/*-----------------------------------------------------------------------------------

[ Custom CSS ]

-----------------------------------------------------------------------------------

[Table of Contents]

1. Font
2. Css Variable for Colors
3. Common CSS
4. Preloader CSS
5. Header - Main Navigation Section
6. Home Page CSS
7. Coding Assessment Platform Page CSS
8. Technical Skill Assessments Page CSS
9. Cognitive Ability Testing Platform CSS
10. Behavioral Assessment Software CSS
11. Psychometric Assessment Platform CSS
12. AI Interview Platform CSS
13. Campus Hiring Platform CSS
14. Freshers Hiring Assessments CSS
15. Lateral Hiring Assessments CSS
16. Virtual Hiring Software CSS
17. Developer Hiring Platform CSS
18. Hackathon Platform CSS
19. Online Coding Competitions CSS
20. Practice Coding Tests CSS
21. Aptitude Practice Tests CSS
22. Mock Interviews CSS
23. Skill Certification Tests CSS
24. Assessment Platform Overview CSS
25. Online Assessment Software CSS
26. Technical Assessment Software CSS
27. Job Readiness Assessments CSS
28. Self Evaluation Skill Tests CSS
29. Assessment Library CSS
30. Hiring Playbooks CSS
31. Candidate Evaluation Guides CSS
32. Assessment Benchmark Reports CSS
33. Product Documentation CSS
34. About CloudTest CSS
35. Careers at CloudTest CSS
36. Partner Program CSS
37. Access Account CSS
38. Create Account CSS
39. Footer CSS

-----------------------------------------------------------------------------------*/


/*===================================================================================
    1. Font Start
===================================================================================*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&family=Playfair+Display:wght@600;700&family=Poppins:wght@400;500;600;700;800&display=swap");

/*===================================================================================
    1. Font End
===================================================================================*/


/*===================================================================================
    2. Css Variable for Colors Start
===================================================================================*/

/* Home page variables are kept inside the Home Page CSS section as provided. */

/*===================================================================================
    2. Css Variable for Colors End
===================================================================================*/


/*===================================================================================
    3. Common CSS Start
===================================================================================*/

/* Common CSS is kept inside the Home Page CSS section as provided. */

/*===================================================================================
    3. Common CSS End
===================================================================================*/


/*===================================================================================
    4. Preloader CSS Start
===================================================================================*/

/* Add preloader CSS here when available. */

/*===================================================================================
    4. Preloader CSS End
===================================================================================*/


/*===================================================================================
    5. Header - Main Navigation Section Start
===================================================================================*/


/*-----------------------------------------------------------------------------------
    5.1 Header Auth Buttons Start
-----------------------------------------------------------------------------------*/

/* Mobile Register Button beside Toggle */
.mobile_register_btn {
    display: none;
}

@media only screen and (max-width: 991px) {
    header .navbar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0;
    }

    header .navbar-brand {
        margin-right: auto;
        flex: 0 1 auto;
    }

    .mobile_register_btn {
        order: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 9px 15px;
        margin: 0 clamp(8px, 2.5vw, 14px);
        border-radius: 999px;
        background: linear-gradient(135deg, #6842f4 0%, #7d5cff 100%);
        color: #ffffff !important;
        font-size: 13px;
        /* font-weight: 700; */
        line-height: 1;
        text-decoration: none !important;
        white-space: nowrap;
        box-shadow: 0 8px 18px rgba(104, 66, 244, 0.24);
    }

    header .navbar-toggler {
        order: 3;
        margin-left: 0;
        padding: 0;
        border: 0;
        outline: none !important;
        box-shadow: none !important;
        flex: 0 0 auto;
    }

    header .navbar-toggler:focus,
    header .navbar-toggler:active {
        outline: none !important;
        box-shadow: none !important;
    }

    header .navbar-collapse {
        order: 4;
        flex-basis: 100%;
        width: 100%;
    }

    .header_auth_btns .signup_btn {
        display: none;
    }
}

/* Small mobile devices */
@media only screen and (max-width: 575px) {
    .mobile_register_btn {
        min-height: 36px;
        padding: 8px 13px;
        margin: 0 20px;
        font-size: 12.5px;
    }
}

/* Very small devices: 320px - 374px */
@media only screen and (max-width: 374px) {
    .mobile_register_btn {
        min-height: 34px;
        padding: 8px 10px;
        margin: 0 25px;
        font-size: 12px;
    }

    header .navbar-brand img {
        max-width: 125px;
    }
}

/* Extra small devices: below 340px */
@media only screen and (max-width: 340px) {
    .mobile_register_btn {
        padding: 7px 9px;
        margin: 0 10px;
        font-size: 11.5px;
    }

    header .navbar-brand img {
        max-width: 112px;
    }
}

.header_auth_btns {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 12px;
}

.header_auth_btns a {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    height: 50px;
    padding: 0 26px;
    border-radius: 15px;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.3s ease;
    line-height: 1;
    white-space: nowrap;
}

/*-----------------------------------------------------------------------------------
    5.1 Header Auth Buttons End
-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
    5.2 Login Button Start
-----------------------------------------------------------------------------------*/

.login_btn {
    background: linear-gradient(135deg, #7c5cff 0%, #6842f4 100%);
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(104, 66, 244, 0.28);
}

.login_btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(104, 66, 244, 0.34);
}

/*-----------------------------------------------------------------------------------
    5.2 Login Button End
-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
    5.3 Sign Up Button Start
-----------------------------------------------------------------------------------*/

.signup_btn {
    background: linear-gradient(135deg, #ffffff 0%, #f3eeff 100%);
    color: #6842f4 !important;
    border: 1.5px solid #6842f4;
    box-shadow: 0 8px 20px rgba(104, 66, 244, 0.14);
}

.signup_btn:hover {
    color: #5b35ea !important;
    background: linear-gradient(135deg, #faf8ff 0%, #ede6ff 100%);
    border-color: #6842f4;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(104, 66, 244, 0.20);
}

/*-----------------------------------------------------------------------------------
    5.3 Sign Up Button End
-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
    5.4 Header Auth Buttons Responsive Start
-----------------------------------------------------------------------------------*/

@media (max-width: 991px) {
    .header_auth_btns {
        margin-top: 15px;
        margin-left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .header_auth_btns a {
        width: 100%;
        min-width: 100%;
    }
}

/*-----------------------------------------------------------------------------------
    5.4 Header Auth Buttons Responsive End
-----------------------------------------------------------------------------------*/


/*===================================================================================
    5. Header - Main Navigation Section End
===================================================================================*/


/*===================================================================================
    6. Home Page CSS Start
===================================================================================*/

:root {
    --bg: #f6f7ff;
    --surface: rgba(255, 255, 255, 0.82);
    --surface-strong: #ffffff;
    --surface-soft: #f2f4ff;
    --ink: #111827;
    --ink-2: #1d2340;
    --muted: #687089;
    --line: rgba(104, 66, 244, 0.12);
    --line-strong: rgba(104, 66, 244, 0.18);
    --brand: #6842f4;
    --brand-2: #8e72ff;
    --brand-3: #efeaff;
    --accent: #18d2ff;
    --success: #14b87a;
    --warning: #ffb648;
    --danger: #ff6a7d;
    --shadow-xl: 0 30px 80px rgba(60, 43, 148, 0.16);
    --shadow-lg: 0 20px 50px rgba(74, 56, 168, 0.12);
    --shadow-md: 0 16px 34px rgba(45, 36, 104, 0.1);
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --container: min(1200px, calc(100% - 28px));
    --section-space: clamp(70px, 9vw, 110px);
    --title: "Manrope", "Inter", system-ui, sans-serif;
    --body: "Inter", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    font-family: var(--body);
    color: var(--ink);
    background:
        radial-gradient(circle at 0% 0%, rgba(104, 66, 244, 0.16), transparent 32%),
        radial-gradient(circle at 100% 0%, rgba(24, 210, 255, 0.14), transparent 26%),
        linear-gradient(180deg, #f8f6ff 0%, #eef5ff 30%, #ffffff 60%, #f8fbff 100%);
    overflow-x: clip;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

.page-shell {
    position: relative;
    isolation: isolate;
}

.page-shell::before,
.page-shell::after {
    content: "";
    position: fixed;
    width: 380px;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .42;
    pointer-events: none;
    z-index: -1;
}

.page-shell::before {
    top: -150px;
    left: -120px;
    background: rgba(104, 66, 244, .28);
}

.page-shell::after {
    top: 120px;
    right: -140px;
    background: rgba(24, 210, 255, .18);
}

.container {
    width: var(--container);
    margin-inline: auto;
}

section {
    padding-block: var(--section-space);
    position: relative;
}

/* .hero {
    padding-top: clamp(26px, 5vw, 54px);
    padding-bottom: clamp(78px, 10vw, 122px);
} */

.hero-wrap {
    position: relative;
    border-radius: 40px;
    padding: clamp(24px, 4vw, 34px);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .64)),
        linear-gradient(120deg, rgba(104, 66, 244, .12), rgba(24, 210, 255, .08));
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: var(--shadow-xl);
    overflow: clip;
}

.hero-wrap::before,
.hero-wrap::after {
    content: "";
    position: absolute;
    inset: auto;
    border-radius: 50%;
    pointer-events: none;
}

.hero-wrap::before {
    width: 280px;
    height: 280px;
    top: -100px;
    right: -80px;
    background: radial-gradient(circle, rgba(104, 66, 244, .20), rgba(104, 66, 244, 0));
}

.hero-wrap::after {
    width: 240px;
    height: 240px;
    bottom: -120px;
    left: -80px;
    background: radial-gradient(circle, rgba(24, 210, 255, .12), rgba(24, 210, 255, 0));
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
    gap: clamp(28px, 4vw, 44px);
    align-items: center;
    position: relative;
    z-index: 1;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(104, 66, 244, .1);
    border: 1px solid rgba(104, 66, 244, .14);
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    width: fit-content;
    backdrop-filter: blur(10px);
}

.eyebrow::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    box-shadow: 0 0 0 6px rgba(104, 66, 244, .10);
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--title);
    letter-spacing: -0.05em;
    color: var(--ink-2);
    text-wrap: balance;
}

.hero-copy h1 {
    margin-top: 18px;
    font-size: clamp(2.35rem, 5.6vw, 4.7rem);
    line-height: .94;
    font-weight: 600;
    max-width: 12ch;
}

.hero-copy h1 .grad {
    background: linear-gradient(135deg, #5430d9, #7b58ff 52%, #1ebaf7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-kicker {
    margin: 20px 0 0;
    max-width: 60ch;
    color: var(--ink-2);
    font-size: clamp(1rem, 1.5vw, 1.14rem);
    line-height: 1.8;
    font-weight: 500;
}

.hero-subcopy {
    margin: 18px 0 0;
    max-width: 60ch;
    color: var(--muted);
    font-size: clamp(.98rem, 1.35vw, 1.08rem);
    line-height: 1.9;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 14px 22px;
    border-radius: 15px;
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: -.01em;
    border: 1px solid #d4c9fdb8;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
    will-change: transform;
}

.btn:hover {
    transform: translateY(-3px);
}

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #5a34e8, #7b58ff 55%, #9a85ff 100%);
    box-shadow: 0 18px 38px rgba(104, 66, 244, .26);
}

.btn-secondary {
    color: var(--ink-2);
    background: rgba(255, 255, 255, .72);
    border-color: rgba(104, 66, 244, .14);
    box-shadow: 0 10px 24px rgba(28, 28, 52, .06);
    backdrop-filter: blur(12px);
}

.hero-proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
    max-width: 760px;
}

.proof-card {
    padding: 16px 16px 15px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(104, 66, 244, .1);
    box-shadow: 0 12px 28px rgba(70, 56, 130, .07);
    backdrop-filter: blur(10px);
}

.proof-card strong {
    display: block;
    color: var(--ink-2);
    font-size: clamp(1.1rem, 1.85vw, 1.4rem);
    font-weight: 600;
    letter-spacing: -.04em;
}

.proof-card span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.45;
}

.hero-visual {
    position: relative;
}

.visual-stack {
    position: relative;
    min-height: 640px;
    display: grid;
    place-items: center;
}

.glow-ring {
    position: absolute;
    inset: 10% 12% auto 12%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(104, 66, 244, .18), rgba(104, 66, 244, 0) 58%),
        radial-gradient(circle at 70% 30%, rgba(24, 210, 255, .14), rgba(24, 210, 255, 0) 35%);
    filter: blur(10px);
    pointer-events: none;
}

.dashboard-shell {
    position: relative;
    width: min(100%, 560px);
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(180deg, #151036, #181f4f 45%, #101930 100%);
    box-shadow: 0 34px 90px rgba(36, 26, 100, .34);
    border: 1px solid rgba(255, 255, 255, .10);
    transform: perspective(1300px) rotateY(-8deg) rotateX(4deg);
    transform-style: preserve-3d;
}

.dashboard-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.dots {
    display: flex;
    gap: 8px;
}

.dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .48);
}

.dots span:nth-child(1) {
    background: #ff6a7d;
}

.dots span:nth-child(2) {
    background: #ffb648;
}

.dots span:nth-child(3) {
    background: #14b87a;
}

.shell-label {
    padding: 8px 12px;
    border-radius: 999px;
    color: #dde3ff;
    background: rgba(255, 255, 255, .08);
    font-size: .76rem;
    font-weight: 600;
}

.dashboard-body {
    display: grid;
    gap: 18px;
    padding: 18px;
}

.hero-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-chip {
    padding: 9px 12px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    color: #ebf0ff;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .08);
}

.editor-grid {
    display: grid;
    grid-template-columns: 1.1fr .88fr;
    gap: 16px;
}

.panel {
    border-radius: 22px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.code-panel {
    padding: 18px;
    min-height: 300px;
}

.panel-title,
.mini-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    color: #eef2ff;
    font-size: .92rem;
    font-weight: 600;
}

.code-lines {
    display: grid;
    gap: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .82rem;
    line-height: 1.65;
    color: #cfd8ff;
}

.code-line {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    align-items: center;
}

.line-no {
    color: rgba(219, 225, 255, .36);
    font-size: .76rem;
}

.code-text {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.token-fn {
    color: #8fe5ff;
}

.token-key {
    color: #ffaf68;
}

.token-var {
    color: #c7b3ff;
}

.token-ok {
    color: #68ffbb;
}

.insight-col {
    display: grid;
    gap: 16px;
    align-content: start;
}

.score-card,
.mini-panel {
    padding: 16px;
}

.score-value {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: #fff;
}

.score-value strong {
    font-size: 2.05rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -.05em;
}

.score-value span {
    font-size: .92rem;
    color: #b8c6ff;
    font-weight: 600;
}

.bar-chart {
    display: flex;
    align-items: end;
    gap: 10px;
    height: 96px;
    margin-top: 16px;
}

.bar-chart span {
    flex: 1;
    border-radius: 999px 999px 12px 12px;
    background: linear-gradient(180deg, rgba(24, 210, 255, .8), rgba(104, 66, 244, .9));
    box-shadow: 0 8px 20px rgba(104, 66, 244, .22);
}

.bar-chart span:nth-child(1) {
    height: 48%;
}

.bar-chart span:nth-child(2) {
    height: 84%;
}

.bar-chart span:nth-child(3) {
    height: 67%;
}

.bar-chart span:nth-child(4) {
    height: 92%;
}

.candidate-list {
    display: grid;
    gap: 12px;
    margin-top: 8px;
}

.candidate-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
}

.person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(104, 66, 244, .95), rgba(24, 210, 255, .95));
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(104, 66, 244, .25);
    flex: 0 0 auto;
}

.person strong {
    display: block;
    color: #eef2ff;
    font-size: .92rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.person span {
    display: block;
    margin-top: 4px;
    color: #adb7df;
    font-size: .76rem;
    font-weight: 600;
}

.badge-pass,
.badge-watch {
    padding: 8px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-pass {
    color: #d8fff0;
    background: rgba(20, 184, 122, .18);
    border: 1px solid rgba(20, 184, 122, .3);
}

.badge-watch {
    color: #fff0ce;
    background: rgba(255, 182, 72, .18);
    border: 1px solid rgba(255, 182, 72, .26);
}

.floating-card {
    position: absolute;
    display: grid;
    gap: 10px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(14px);
    box-shadow: 0 22px 42px rgba(56, 40, 130, .18);
    border: 1px solid rgba(255, 255, 255, .74);
}

.floating-card small {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.floating-card strong {
    font-size: 1.18rem;
    color: var(--ink-2);
    font-weight: 600;
    letter-spacing: -.04em;
}

.floating-card p {
    margin: 0;
    color: var(--muted);
    font-size: .83rem;
    line-height: 1.55;
    font-weight: 600;
}

.card-a {
    top: 20px;
    right: -10px;
    width: 210px;
}

.card-b {
    left: -4px;
    bottom: 38px;
    width: 220px;
}

.sparkline {
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(104, 66, 244, .08), rgba(104, 66, 244, .02));
    position: relative;
    overflow: hidden;
}

.sparkline svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(104, 66, 244, .10);
}

.hero-footer p {
    margin: 0;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.7;
    font-weight: 600;
}

.inline-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.inline-tags span {
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(104, 66, 244, .08);
    color: var(--brand);
    font-size: .76rem;
    font-weight: 600;
    border: 1px solid rgba(104, 66, 244, .12);
}

.section-head {
    display: grid;
    gap: 14px;
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
    padding-top: 50px;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    margin: 0 auto;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(104, 66, 244, .08);
    border: 1px solid rgba(104, 66, 244, .12);
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.section-tag::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--accent));
}

.section-head h2,
.content-block h2 {
    font-size: clamp(1.95rem, 4.3vw, 3.15rem);
    line-height: 1.02;
    font-weight: 600;
}

.section-head p,
.content-block>p {
    margin: 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.45vw, 1.08rem);
    line-height: 1.4;
    font-weight: 500;
}

.feature-grid,
.use-case-grid,
.metric-grid {
    display: grid;
    gap: 20px;
}

.feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.use-case-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.soft-card {
    position: relative;
    padding: 24px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .76));
    border: 1px solid rgba(104, 66, 244, .09);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.soft-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    /* background: linear-gradient(90deg, var(--brand), var(--accent)); */
    opacity: .9;
}

.icon-badge {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 14px 28px rgba(104, 66, 244, .18);
}

.icon-badge svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.soft-card h3 {
    margin-top: 18px;
    font-size: 1.16rem;
    line-height: 1.18;
    font-weight: 600;
    color: var(--ink-2);
}

.soft-card p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: .97rem;
    line-height: 1.8;
    font-weight: 500;
}

.soft-card ul {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: grid;
    gap: 10px;
}

.soft-card ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-2);
    font-size: .9rem;
    font-weight: 600;
}

.soft-card ul li::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    flex: 0 0 auto;
}

.story-section {
    padding-top: 0;
}

.story-grid {
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(320px, 1.06fr);
    gap: 24px;
    align-items: stretch;
}

.content-block {
    padding: clamp(26px, 3vw, 34px);
    border-radius: 30px;
    background: linear-gradient(180deg, #ffffff, #f8f7ff);
    border: 1px solid rgba(104, 66, 244, .09);
    box-shadow: var(--shadow-lg);
}

.content-block .section-tag {
    margin: 0 0 16px;
}

.content-block>p {
    margin-top: 18px;
}

.tick-list {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.tick-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px;
    border-radius: 20px;
    background: var(--surface-soft);
    border: 1px solid rgba(104, 66, 244, .08);
}

.tick-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(104, 66, 244, .14), rgba(24, 210, 255, .14));
    color: var(--brand);
    font-weight: 600;
    font-size: 1rem;
}

.tick-item strong {
    display: block;
    color: var(--ink-2);
    font-size: 1rem;
    font-weight: 600;
}

.tick-item p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: .94rem;
    line-height: 1.75;
    font-weight: 500;
}

.analysis-board {
    position: relative;
    height: 100%;
    padding: clamp(24px, 3vw, 34px);
    border-radius: 30px;
    background: linear-gradient(160deg, #0f1330, #151a45 50%, #1d245b 100%);
    box-shadow: 0 34px 80px rgba(41, 28, 117, .26);
    color: #edf2ff;
    overflow: hidden;
    min-height: 570px;
}

.analysis-board::before,
.analysis-board::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    pointer-events: none;
}

.analysis-board::before {
    width: 240px;
    height: 240px;
    top: -90px;
    right: -50px;
    background: radial-gradient(circle, rgba(104, 66, 244, .34), rgba(104, 66, 244, 0));
}

.analysis-board::after {
    width: 220px;
    height: 220px;
    left: -70px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(24, 210, 255, .18), rgba(24, 210, 255, 0));
}

.board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.board-head h3 {
    font-family: var(--body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: #edf2ff;
}

.board-pill {
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #dce4ff;
    font-size: .75rem;
    font-weight: 600;
}

.board-canvas {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
}

.big-score {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 18px;
}

.score-box,
.chart-box,
.distribution-box,
.insight-box {
    border-radius: 24px;
    padding: 20px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .09);
    backdrop-filter: blur(10px);
}

.score-box strong {
    display: block;
    margin-top: 8px;
    font-size: clamp(2.05rem, 3.7vw, 2.6rem);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -.06em;
    color: #ffffff;
}

.score-box p,
.chart-box p,
.distribution-box p,
.insight-box p {
    margin: 10px 0 0;
    color: #bcc7ef;
    font-size: .9rem;
    line-height: 1.7;
    font-weight: 500;
}

.ring {
    width: 132px;
    aspect-ratio: 1;
    margin: 10px auto 0;
    border-radius: 50%;
    background: conic-gradient(var(--accent) 0 72%, rgba(255, 255, 255, .08) 72% 100%);
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 14px rgba(17, 21, 51, .94);
    font-weight: 600;
    font-size: 1.45rem;
    color: #fff;
}

.line-chart {
    margin-top: 16px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
}

.mini-bars {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.mini-bars .row {
    display: grid;
    grid-template-columns: 120px 1fr 44px;
    gap: 12px;
    align-items: center;
    color: #e7ecff;
    font-size: .84rem;
    font-weight: 600;
}

.track {
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}

.track>span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-2), var(--accent));
}

.insight-box ul {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: grid;
    gap: 12px;
}

.insight-box li {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 12px;
    color: #dce4ff;
    font-size: .9rem;
    line-height: 1.7;
    font-weight: 600;
}

.insight-box li::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-top: 5px;
    background: linear-gradient(135deg, var(--accent), var(--brand-2));
    box-shadow: 0 0 0 5px rgba(24, 210, 255, .08);
}

.workflow-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    counter-reset: flow;
}

.step-card {
    position: relative;
    padding: 24px;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff, #f7f8ff);
    border: 1px solid rgba(104, 66, 244, .09);
    box-shadow: var(--shadow-md);
    min-height: 240px;
    overflow: hidden;
}

.step-card::before {
    counter-increment: flow;
    content: counter(flow, decimal-leading-zero);
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 600;
    color: rgba(104, 66, 244, .10);
    letter-spacing: -.06em;
}

.step-card .icon-badge {
    margin-bottom: 18px;
}

.step-card h3 {
    font-size: 1.16rem;
    font-weight: 600;
    line-height: 1.25;
}

.step-card p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.8;
    font-weight: 500;
}

.step-card .mini-note {
    display: inline-flex;
    margin-top: 16px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(104, 66, 244, .08);
    color: var(--brand);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.metric-card {
    padding: 24px;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff, #fafbff);
    border: 1px solid rgba(104, 66, 244, .08);
    box-shadow: var(--shadow-md);
}

.metric-card strong {
    display: block;
    font-size: clamp(1.8rem, 2.8vw, 2.35rem);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -.06em;
    color: var(--ink-2);
}

.metric-card span {
    display: block;
    margin-top: 12px;
    color: var(--ink-2);
    font-size: .96rem;
    font-weight: 600;
    line-height: 1.55;
}

.metric-card p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.72;
    font-weight: 500;
}

.cta-section {
    padding-top: 0;
    padding-bottom: clamp(76px, 9vw, 120px);
}

.cta-card {
    position: relative;
    padding: clamp(28px, 4vw, 42px);
    border-radius: 34px;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 10%, rgba(24, 210, 255, .22), rgba(24, 210, 255, 0) 24%),
        radial-gradient(circle at 10% 100%, rgba(140, 115, 255, .18), rgba(140, 115, 255, 0) 28%),
        linear-gradient(135deg, #171a43, #1f2462 56%, #262f79 100%);
    box-shadow: 0 36px 80px rgba(29, 26, 92, .24);
    color: #eef2ff;
}

.cta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.cta-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(290px, .65fr);
    gap: 22px;
    align-items: center;
}

.cta-copy h2 {
    color: #ffffff;
    font-size: clamp(1.95rem, 3.8vw, 3rem);
    line-height: 1.03;
}

.cta-copy p {
    margin: 18px 0 0;
    max-width: 56ch;
    color: #c7d2ff;
    font-size: 1.02rem;
    line-height: 1.9;
    font-weight: 500;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.cta-actions .btn-secondary {
    color: #eef2ff;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .14);
}

.mini-summary {
    display: grid;
    gap: 14px;
    padding: 20px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(12px);
}

.mini-summary .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .05);
}

.mini-summary .row strong {
    color: #ffffff;
    font-size: .98rem;
    font-weight: 600;
}

.mini-summary .row span {
    color: #c7d2ff;
    font-size: .82rem;
    font-weight: 600;
}

.mini-summary .tag {
    display: inline-flex;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(24, 210, 255, .14);
    color: #c7f6ff;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ctca-assess-section {
    padding-top: 20px;
}

.ctca-assess-wrap {
    position: relative;
    padding: clamp(24px, 4vw, 34px);
    border-radius: 32px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 249, 255, .86)),
        linear-gradient(135deg, rgba(104, 66, 244, .07), rgba(24, 210, 255, .05));
    border: 1px solid rgba(104, 66, 244, .09);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.ctca-assess-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(24, 210, 255, .12), transparent 30%),
        radial-gradient(circle at 0% 100%, rgba(104, 66, 244, .10), transparent 32%);
    pointer-events: none;
}

.ctca-assess-head {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
}

.ctca-assess-head h2 {
    font-family: var(--title);
    font-size: clamp(1.95rem, 4.2vw, 3.05rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    color: var(--ink-2);
    font-weight: 600;
    margin: 0;
}

.ctca-assess-head p {
    margin: 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.35vw, 1.06rem);
    line-height: 1.82;
    font-weight: 500;
}

.ctca-assess-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ctca-assess-card {
    position: relative;
    min-height: 100%;
    padding: 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(104, 66, 244, .09);
    box-shadow: 0 18px 38px rgba(56, 43, 120, .08);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    overflow: hidden;
}

.ctca-assess-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 44px rgba(56, 43, 120, .12);
    border-color: rgba(104, 66, 244, .16);
}

.ctca-assess-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    /* background: linear-gradient(90deg, var(--brand), var(--accent)); */
    opacity: .95;
}

.ctca-assess-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.ctca-assess-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(104, 66, 244, .14), rgba(24, 210, 255, .18));
    border: 1px solid rgba(104, 66, 244, .10);
    color: var(--brand);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}

.ctca-assess-icon svg {
    width: 24px;
    height: 24px;
}

.ctca-assess-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(104, 66, 244, .07);
    color: var(--brand);
    font-size: .76rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 600;
}

.ctca-assess-card h3 {
    margin: 0;
    color: var(--ink-2);
    font-family: var(--title);
    font-size: 1.14rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
    font-weight: 600;
}

.ctca-assess-card p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.78;
    font-weight: 500;
}

.ctca-assess-chip {
    display: inline-flex;
    width: fit-content;
    margin-top: 16px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(24, 210, 255, .08);
    color: #117ea4;
    border: 1px solid rgba(24, 210, 255, .12);
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
}

.ctca-faq-section {
    padding-top: 10px;
    padding-bottom: 90px;
}

.ctca-faq-shell {
    display: grid;
    gap: 16px;
    max-width: 980px;
    margin: 0 auto;
}

details.ctca-faq-item {
    position: relative;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 255, .88));
    border: 1px solid rgba(104, 66, 244, .09);
    box-shadow: 0 18px 38px rgba(60, 43, 130, .08);
    overflow: hidden;
}

details.ctca-faq-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    /* background: linear-gradient(180deg, var(--brand), var(--accent)); */
    opacity: .95;
}

details.ctca-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 66px 22px 26px;
    position: relative;
    color: var(--ink-2);
    font-size: 1rem;
    line-height: 1.55;
    letter-spacing: -0.01em;
    font-weight: 600;
}

details.ctca-faq-item summary::-webkit-details-marker {
    display: none;
}

details.ctca-faq-item summary::after,
details.ctca-faq-item summary::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--brand);
    transform: translateY(-50%);
    transition: transform .2s ease, opacity .2s ease;
}

details.ctca-faq-item summary::before {
    transform: translateY(-50%) rotate(90deg);
}

details[open].ctca-faq-item summary::before {
    opacity: 0;
    transform: translateY(-50%) rotate(90deg) scaleX(.3);
}

.ctca-faq-answer {
    padding: 0 26px 24px 26px;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.84;
    font-weight: 500;
}

.ctca-faq-answer p {
    margin: 0;
}

.ctca-faq-points {
    display: grid;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.ctca-faq-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ink-2);
    font-size: .92rem;
    line-height: 1.7;
    font-weight: 500;
}

.ctca-faq-points li::before {
    content: "";
    width: 9px;
    height: 9px;
    margin-top: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    box-shadow: 0 0 0 6px rgba(104, 66, 244, .08);
}

/* =========================================================
   DESKTOP + RESPONSIVE POLISH
   Web spacing fixed + beautiful responsive cards
========================================================= */

/* Desktop polish */
:root {
    --container: min(1160px, calc(100% - 48px));
    --section-space: clamp(52px, 5.4vw, 78px);
    --shadow-xl: 0 24px 64px rgba(60, 43, 148, 0.14);
    --shadow-lg: 0 18px 42px rgba(74, 56, 168, 0.10);
    --shadow-md: 0 14px 30px rgba(45, 36, 104, 0.08);
}

section {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
}

.hero {
    /* padding-top: clamp(28px, 4vw, 52px); */
    padding-top: clamp(28px, 8vw, 111px);
    padding-bottom: clamp(42px, 5vw, 68px);
}

#platform-modules {
    padding-top: clamp(48px, 5vw, 72px);
    padding-bottom: clamp(46px, 5vw, 70px);
}

.ctca-assess-section {
    padding-top: clamp(40px, 4.5vw, 64px);
    padding-bottom: clamp(48px, 5vw, 72px);
}

.story-section {
    padding-top: clamp(42px, 5vw, 72px);
    padding-bottom: clamp(48px, 5vw, 72px);
}

.workflow-section,
.use-cases-section,
.metrics-section {
    padding-top: clamp(48px, 5vw, 74px);
    padding-bottom: clamp(48px, 5vw, 74px);
}

.cta-section {
    padding-top: clamp(46px, 5vw, 70px);
    padding-bottom: clamp(52px, 6vw, 82px);
}

.ctca-faq-section {
    padding-top: clamp(48px, 5vw, 72px);
    padding-bottom: clamp(58px, 6vw, 88px);
}

.section-head {
    padding-top: 0;
    margin-bottom: clamp(26px, 3vw, 36px);
}

.section-head h2,
.content-block h2,
.ctca-assess-head h2,
.cta-copy h2 {
    letter-spacing: -0.045em;
}

.section-head p,
.content-block > p,
.ctca-assess-head p,
.cta-copy p {
    max-width: 760px;
    margin-inline: auto;
}

/* Desktop card improvements: icon + heading side-by-side */
.feature-grid,
.use-case-grid,
.workflow-grid,
.metric-grid,
.ctca-assess-grid {
    gap: 22px;
}

.feature-grid .soft-card,
.use-case-grid .soft-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 0;
    align-items: center;
    min-height: 218px;
    padding: 26px;
    text-align: left;
    background:
        radial-gradient(circle at 0 0, rgba(104, 66, 244, .09), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(250, 251, 255, .86));
    border: 1px solid rgba(104, 66, 244, .10);
    box-shadow: 0 18px 42px rgba(56, 43, 120, .08);
}

.feature-grid .soft-card:hover,
.use-case-grid .soft-card:hover,
.step-card:hover,
.metric-card:hover,
.ctca-assess-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 54px rgba(56, 43, 120, .13);
    border-color: rgba(104, 66, 244, .17);
}

.feature-grid .soft-card .icon-badge,
.use-case-grid .soft-card .icon-badge {
    grid-column: 1;
    grid-row: 1;
    width: 58px;
    height: 58px;
    margin: 0;
    border-radius: 19px;
    font-size: 1rem;
}

.feature-grid .soft-card .icon-badge svg,
.use-case-grid .soft-card .icon-badge svg {
    width: 25px;
    height: 25px;
}

.feature-grid .soft-card h3,
.use-case-grid .soft-card h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 1.14rem;
    line-height: 1.24;
    letter-spacing: -0.03em;
    text-align: left;
}

.feature-grid .soft-card p,
.use-case-grid .soft-card p,
.feature-grid .soft-card ul,
.use-case-grid .soft-card ul {
    grid-column: 1 / -1;
    text-align: left;
}

.feature-grid .soft-card p,
.use-case-grid .soft-card p {
    margin-top: 15px;
    font-size: .96rem;
    line-height: 1.75;
}

/* Workflow cards upgraded */
.step-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 0;
    align-items: center;
    min-height: 218px;
    padding: 26px;
    text-align: left;
    background:
        radial-gradient(circle at 100% 0, rgba(142, 114, 255, .12), transparent 34%),
        linear-gradient(180deg, #ffffff, #f8f9ff);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.step-card::before {
    top: 18px;
    right: 18px;
    font-size: 2.1rem;
    color: rgba(104, 66, 244, .09);
}

.step-card .icon-badge {
    grid-column: 1;
    grid-row: 1;
    width: 58px;
    height: 58px;
    margin: 0;
    border-radius: 19px;
    font-size: 1rem;
}

.step-card h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 1.14rem;
    line-height: 1.24;
    letter-spacing: -0.03em;
    text-align: left;
}

.step-card p,
.step-card .mini-note {
    grid-column: 1 / -1;
    text-align: left;
}

.step-card p {
    margin-top: 15px;
    font-size: .95rem;
    line-height: 1.75;
}

.step-card .mini-note {
    width: fit-content;
}

/* Assessment cards polished */
.ctca-assess-card {
    background:
        radial-gradient(circle at 100% 0, rgba(24, 210, 255, .08), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,251,255,.88));
}

.ctca-assess-top {
    align-items: center;
}

.ctca-assess-card h3 {
    font-size: 1.12rem;
}

/* Recruiter outcome cards upgraded */
.metric-grid {
    counter-reset: metric;
}

.metric-card {
    position: relative;
    min-height: 214px;
    padding: 26px;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(24, 210, 255, .08), transparent 30%),
        linear-gradient(180deg, #ffffff, #fafbff);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.metric-card::before {
    counter-increment: metric;
    content: "0" counter(metric);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 38px;
    padding: 0 12px;
    border-radius: 14px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: .03em;
    box-shadow: 0 12px 26px rgba(104, 66, 244, .18);
}

.metric-card strong {
    font-size: 1.28rem;
    line-height: 1.18;
}

.metric-card span {
    font-size: .96rem;
    line-height: 1.6;
}

.metric-card p {
    font-size: .92rem;
    line-height: 1.68;
}

/* CTA polished */
.cta-card {
    border-radius: 30px;
    padding: clamp(30px, 4vw, 46px);
}

.cta-grid {
    gap: clamp(24px, 4vw, 42px);
}

.mini-summary {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* FAQ polished */
details.ctca-faq-item {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

details.ctca-faq-item:hover {
    transform: translateY(-2px);
    border-color: rgba(104, 66, 244, .15);
    box-shadow: 0 22px 48px rgba(60, 43, 130, .10);
}

/* Large tablet / small laptop */
@media (max-width: 1140px) {
    :root {
        --container: min(100% - 34px, 980px);
        --section-space: 70px;
    }

    .hero-grid,
    .story-grid,
    .cta-grid {
        grid-template-columns: 1fr;
    }

    .feature-grid,
    .use-case-grid,
    .ctca-assess-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .metric-grid,
    .workflow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-copy h1 {
        max-width: 14ch;
        font-size: clamp(3rem, 7vw, 4.25rem);
        line-height: .98;
    }

    .hero-proof {
        max-width: none;
    }

    .visual-stack {
        min-height: 540px;
    }

    .dashboard-shell {
        transform: none;
    }

    .card-a {
        right: 12px;
    }

    .card-b {
        left: 12px;
    }

    .analysis-board {
        min-height: auto;
    }
}

/* Tablet */
@media (max-width: 860px) {
    :root {
        --container: min(100% - 28px, 760px);
        --section-space: 62px;
    }

    body {
        background:
            radial-gradient(circle at 0% 0%, rgba(104, 66, 244, 0.13), transparent 34%),
            radial-gradient(circle at 100% 8%, rgba(24, 210, 255, 0.11), transparent 30%),
            linear-gradient(180deg, #f8f6ff 0%, #eef5ff 34%, #ffffff 70%, #f8fbff 100%);
    }

    section,
    #platform-modules,
    .ctca-assess-section,
    .story-section,
    .workflow-section,
    .use-cases-section,
    .metrics-section,
    .cta-section,
    .ctca-faq-section {
        padding-top: 62px;
        padding-bottom: 62px;
    }

    .hero {
        padding-top: 72px;
        padding-bottom: 34px;
    }

    .hero-wrap,
    .ctca-assess-wrap,
    .cta-card {
        border-radius: 30px;
    }

    .hero-grid {
        gap: 32px;
    }

    .hero-proof,
    .feature-grid,
    .use-case-grid,
    .metric-grid,
    .workflow-grid,
    .ctca-assess-grid {
        grid-template-columns: 1fr;
    }

    .editor-grid,
    .big-score {
        grid-template-columns: 1fr;
    }

    .hero-footer {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .inline-tags {
        justify-content: flex-start;
    }

    .card-a,
    .card-b {
        position: static;
        width: 100%;
        margin-top: 16px;
    }

    .visual-stack {
        min-height: auto;
        gap: 16px;
    }

    .dashboard-shell {
        width: 100%;
    }

    .mini-bars .row {
        grid-template-columns: 92px 1fr 36px;
    }

    .board-head {
        align-items: flex-start;
    }

    .cta-grid {
        gap: 26px;
    }
}

/* Mobile */
@media (max-width: 620px) {
    :root {
        --container: min(100% - 24px, 1200px);
        --section-space: 54px;
        --shadow-xl: 0 18px 42px rgba(60, 43, 148, 0.13);
        --shadow-lg: 0 16px 34px rgba(74, 56, 168, 0.10);
        --shadow-md: 0 12px 26px rgba(45, 36, 104, 0.08);
    }

    html,
    body {
        overflow-x: hidden;
    }

    body {
        min-width: 320px;
    }

    .page-shell::before,
    .page-shell::after {
        width: 260px;
        filter: blur(70px);
        opacity: .34;
    }

    .container {
        width: var(--container);
    }

    section {
        padding-top: 54px;
        padding-bottom: 54px;
    }

    #platform-modules {
        padding-top: 50px;
        padding-bottom: 52px;
    }

    .ctca-assess-section {
        padding-top: 32px;
        padding-bottom: 52px;
    }

    .story-section {
        padding-top: 28px;
        padding-bottom: 54px;
    }

    .workflow-section,
    .use-cases-section,
    .metrics-section {
        padding-top: 54px;
        padding-bottom: 54px;
    }

    .cta-section {
        padding-top: 18px;
        padding-bottom: 66px;
    }

    .ctca-faq-section {
        padding-top: 36px;
        padding-bottom: 78px;
    }

    /* Hero mobile */
    .hero {
        padding-top: 72px;
        padding-bottom: 28px;
    }

    .hero-wrap {
        padding: 18px;
        border-radius: 26px;
    }

    .hero-grid {
        gap: 28px;
    }

    .eyebrow,
    .section-tag {
        padding: 8px 12px;
        gap: 8px;
        font-size: 9.5px;
        line-height: 1.35;
        letter-spacing: .105em;
        text-align: center;
    }

    .eyebrow::before,
    .section-tag::before {
        width: 8px;
        height: 8px;
    }

    .hero-copy h1 {
        margin-top: 16px;
        max-width: none;
        font-size: clamp(2.15rem, 10.5vw, 3rem);
        line-height: 1.02;
        letter-spacing: -0.055em;
    }

    .hero-kicker,
    .hero-subcopy {
        font-size: .95rem;
        line-height: 1.7;
    }

    .hero-actions,
    .cta-actions {
        flex-direction: column;
        gap: 11px;
        margin-top: 22px;
    }

    .btn {
        width: 100%;
        min-height: 50px;
        padding: 13px 16px;
        border-radius: 14px;
        font-size: .92rem;
        line-height: 1.2;
    }

    .hero-proof {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 22px;
    }

    .proof-card {
        padding: 14px;
        border-radius: 18px;
    }

    .proof-card strong {
        font-size: 1.2rem;
        line-height: 1;
    }

    .proof-card span {
        margin-top: 5px;
        font-size: .76rem;
        line-height: 1.45;
    }

    /* Dashboard mobile */
    .visual-stack {
        display: grid;
        place-items: stretch;
    }

    .glow-ring {
        inset: 6% 10% auto 10%;
        opacity: .75;
    }

    .dashboard-shell {
        border-radius: 22px;
        box-shadow: 0 22px 54px rgba(36, 26, 100, .26);
    }

    .dashboard-topbar {
        padding: 11px 12px;
    }

    .dots {
        gap: 6px;
    }

    .dots span {
        width: 8px;
        height: 8px;
    }

    .shell-label {
        padding: 7px 9px;
        font-size: .66rem;
        line-height: 1;
    }

    .dashboard-body {
        gap: 13px;
        padding: 14px;
    }

    .hero-chip-row {
        gap: 7px;
    }

    .hero-chip {
        padding: 7px 9px;
        font-size: .66rem;
        line-height: 1.25;
    }

    .editor-grid {
        gap: 13px;
    }

    .panel {
        border-radius: 18px;
    }

    .code-panel,
    .score-card,
    .mini-panel,
    .score-box,
    .chart-box,
    .distribution-box,
    .insight-box {
        padding: 14px;
    }

    .panel-title,
    .mini-title {
        margin-bottom: 12px;
        gap: 8px;
        font-size: .8rem;
        line-height: 1.35;
    }

    .code-lines {
        gap: 9px;
        font-size: .68rem;
        line-height: 1.55;
    }

    .code-line {
        grid-template-columns: 20px 1fr;
        gap: 8px;
    }

    .line-no {
        font-size: .65rem;
    }

    .score-value strong {
        font-size: 1.75rem;
    }

    .score-value span {
        font-size: .78rem;
        line-height: 1.3;
    }

    .bar-chart {
        height: 74px;
        gap: 8px;
        margin-top: 13px;
    }

    .candidate-list {
        gap: 9px;
    }

    .candidate-item {
        gap: 9px;
        padding: 10px;
        border-radius: 14px;
    }

    .person {
        gap: 9px;
    }

    .avatar {
        width: 34px;
        height: 34px;
        border-radius: 12px;
        font-size: .68rem;
    }

    .person strong {
        font-size: .8rem;
    }

    .person span {
        font-size: .68rem;
    }

    .badge-pass,
    .badge-watch {
        padding: 7px 8px;
        font-size: .64rem;
    }

    .floating-card {
        padding: 14px;
        border-radius: 18px;
        gap: 7px;
    }

    .floating-card small {
        font-size: .65rem;
    }

    .floating-card strong {
        font-size: 1rem;
    }

    .floating-card p {
        font-size: .78rem;
        line-height: 1.55;
    }

    .sparkline {
        height: 44px;
    }

    .hero-footer {
        margin-top: 20px;
        padding-top: 16px;
    }

    .hero-footer p {
        font-size: .86rem;
        line-height: 1.65;
    }

    .inline-tags {
        gap: 7px;
    }

    .inline-tags span {
        padding: 8px 10px;
        font-size: .68rem;
        line-height: 1.2;
    }

    /* Common section heading typography */
    .section-head {
        gap: 12px;
        padding-top: 0;
        margin-bottom: 24px;
        text-align: center;
    }

    .section-head h2,
    .content-block h2,
    .ctca-assess-head h2,
    .cta-copy h2 {
        font-size: clamp(1.65rem, 7.2vw, 2.15rem);
        line-height: 1.12;
        letter-spacing: -0.045em;
    }

    .section-head p,
    .content-block > p,
    .ctca-assess-head p,
    .cta-copy p {
        font-size: .92rem;
        line-height: 1.68;
    }

    /* Common card polish */
    .soft-card,
    .step-card,
    .metric-card,
    .content-block,
    .analysis-board,
    .cta-card,
    .ctca-assess-card,
    details.ctca-faq-item {
        border-radius: 22px;
    }

    .soft-card,
    .step-card,
    .metric-card,
    .content-block,
    .analysis-board,
    .cta-card,
    .ctca-assess-card {
        padding: 18px;
    }

    .feature-grid,
    .use-case-grid,
    .metric-grid,
    .workflow-grid,
    .ctca-assess-grid {
        gap: 14px;
    }

    /* Platform modules + Hiring use cases */
    .feature-grid .soft-card,
    .use-case-grid .soft-card {
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 13px;
        min-height: auto;
        padding: 18px;
    }

    .feature-grid .soft-card .icon-badge,
    .use-case-grid .soft-card .icon-badge {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        font-size: .95rem;
    }

    .feature-grid .soft-card .icon-badge svg,
    .use-case-grid .soft-card .icon-badge svg {
        width: 21px;
        height: 21px;
    }

    .feature-grid .soft-card h3,
    .use-case-grid .soft-card h3 {
        font-size: 1rem;
        line-height: 1.28;
    }

    .feature-grid .soft-card p,
    .use-case-grid .soft-card p {
        margin-top: 13px;
        font-size: .9rem;
        line-height: 1.72;
    }

    /* Assessment types */
    .ctca-assess-wrap {
        padding: 18px;
        border-radius: 26px;
    }

    .ctca-assess-head {
        gap: 12px;
        margin-bottom: 20px;
    }

    .ctca-assess-card {
        min-height: auto;
    }

    .ctca-assess-top {
        margin-bottom: 14px;
        gap: 10px;
    }

    .ctca-assess-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }

    .ctca-assess-icon svg {
        width: 21px;
        height: 21px;
    }

    .ctca-assess-no {
        padding: 7px 10px;
        font-size: .66rem;
    }

    .ctca-assess-card h3 {
        font-size: 1.02rem;
        line-height: 1.32;
    }

    .ctca-assess-card p {
        margin-top: 10px;
        font-size: .9rem;
        line-height: 1.7;
    }

    .ctca-assess-chip {
        margin-top: 13px;
        padding: 8px 10px;
        font-size: .65rem;
    }

    /* Story section */
    .story-grid {
        gap: 16px;
    }

    .content-block .section-tag {
        margin-bottom: 14px;
    }

    .content-block > p {
        margin-top: 14px;
    }

    .tick-list {
        gap: 12px;
        margin-top: 18px;
    }

    .story-section .tick-item {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        padding: 14px;
        border-radius: 18px;
        text-align: left;
    }

    .story-section .tick-icon {
        grid-column: 1;
        grid-row: 1;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        font-size: .9rem;
    }

    .story-section .tick-item > div:last-child {
        display: contents;
    }

    .story-section .tick-item strong {
        grid-column: 2;
        grid-row: 1;
        font-size: .96rem;
        line-height: 1.32;
        text-align: left;
    }

    .story-section .tick-item p {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 0;
        font-size: .86rem;
        line-height: 1.68;
        text-align: left;
    }

    /* Analytics board */
    .analysis-board {
        min-height: auto;
        padding: 18px;
    }

    .board-head {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }

    .board-head h3 {
        font-size: .96rem;
        line-height: 1.35;
    }

    .board-pill {
        width: fit-content;
        padding: 8px 10px;
        font-size: .66rem;
    }

    .board-canvas {
        gap: 13px;
    }

    .score-box,
    .chart-box,
    .distribution-box,
    .insight-box {
        border-radius: 18px;
    }

    .score-box strong {
        font-size: 2rem;
    }

    .score-box p,
    .chart-box p,
    .distribution-box p,
    .insight-box p {
        font-size: .82rem;
        line-height: 1.6;
    }

    .ring {
        width: 108px;
        box-shadow: inset 0 0 0 11px rgba(17, 21, 51, .94);
        font-size: 1.18rem;
    }

    .line-chart {
        margin-top: 0;
        border-radius: 16px;
    }

    .mini-bars {
        gap: 11px;
        margin-top: 13px;
    }

    .mini-bars .row {
        grid-template-columns: 82px 1fr 30px;
        gap: 8px;
        font-size: .72rem;
    }

    .track {
        height: 9px;
    }

    .insight-box ul {
        gap: 10px;
        margin-top: 12px;
    }

    .insight-box li {
        grid-template-columns: 10px 1fr;
        gap: 10px;
        font-size: .82rem;
        line-height: 1.6;
    }

    .insight-box li::before {
        width: 10px;
        height: 10px;
        margin-top: 6px;
        box-shadow: 0 0 0 4px rgba(24, 210, 255, .08);
    }

    /* Workflow */
    .step-card {
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 13px;
        min-height: auto;
        padding: 18px;
    }

    .step-card::before {
        display: none;
    }

    .step-card .icon-badge {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        font-size: .95rem;
    }

    .step-card h3 {
        font-size: 1rem;
        line-height: 1.28;
    }

    .step-card p {
        margin-top: 13px;
        font-size: .9rem;
        line-height: 1.72;
    }

    .step-card .mini-note {
        width: fit-content;
        margin-top: 13px;
        padding: 7px 10px;
        font-size: .65rem;
    }

    /* Recruiter outcomes */
    .metric-card {
        min-height: auto;
        padding: 18px;
    }

    .metric-card::before {
        min-width: 40px;
        height: 34px;
        margin-bottom: 14px;
        border-radius: 13px;
        font-size: .78rem;
    }

    .metric-card strong {
        font-size: 1.25rem;
        line-height: 1.16;
    }

    .metric-card span {
        margin-top: 10px;
        font-size: .9rem;
        line-height: 1.55;
    }

    .metric-card p {
        margin-top: 9px;
        font-size: .84rem;
        line-height: 1.65;
    }

    /* CTA */
    .cta-card {
        padding: 20px;
        border-radius: 26px;
    }

    .cta-copy .section-tag {
        margin-bottom: 14px !important;
    }

    .cta-copy p {
        margin-top: 14px;
        color: #d5ddff;
    }

    .mini-summary {
        gap: 11px;
        padding: 14px;
        border-radius: 20px;
    }

    .mini-summary .tag {
        padding: 7px 10px;
        font-size: .65rem;
    }

    .mini-summary .row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px;
        border-radius: 15px;
    }

    .mini-summary .row strong {
        font-size: .88rem;
    }

    .mini-summary .row span {
        font-size: .72rem;
        line-height: 1.45;
    }

    /* FAQ */
    .ctca-faq-shell {
        gap: 12px;
    }

    details.ctca-faq-item {
        border-radius: 20px;
    }

    details.ctca-faq-item::before {
        width: 0;
    }

    details.ctca-faq-item summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 34px;
        align-items: center;
        gap: 12px;
        padding: 18px 14px 18px 16px;
        text-align: left;
        font-size: .92rem;
        line-height: 1.45;
    }

    details.ctca-faq-item summary::after,
    details.ctca-faq-item summary::before {
        position: static;
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        align-self: center;
        width: 16px;
        height: 2px;
        transform: none;
    }

    details.ctca-faq-item summary::before {
        transform: rotate(90deg);
    }

    details[open].ctca-faq-item summary::before {
        opacity: 0;
        transform: rotate(90deg) scaleX(.3);
    }

    .ctca-faq-answer {
        padding: 0 16px 18px 16px;
        font-size: .86rem;
        line-height: 1.68;
        text-align: left;
    }

    .ctca-faq-points {
        gap: 8px;
        margin-top: 12px;
    }

    .ctca-faq-points li {
        gap: 9px;
        font-size: .84rem;
        line-height: 1.62;
    }

    .ctca-faq-points li::before {
        width: 8px;
        height: 8px;
        margin-top: 7px;
        box-shadow: 0 0 0 4px rgba(104, 66, 244, .08);
    }
}

/* Small mobile */
@media (max-width: 430px) {
    :root {
        --container: min(100% - 20px, 1200px);
        --section-space: 50px;
    }

    section,
    #platform-modules,
    .ctca-assess-section,
    .story-section,
    .workflow-section,
    .use-cases-section,
    .metrics-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .hero {
        padding-top: 66px;
        padding-bottom: 24px;
    }

    .cta-section {
        padding-top: 16px;
        padding-bottom: 62px;
    }

    .ctca-faq-section {
        padding-top: 34px;
        padding-bottom: 74px;
    }

    .hero-wrap,
    .ctca-assess-wrap,
    .cta-card {
        padding: 16px;
        border-radius: 22px;
    }

    .hero-copy h1 {
        font-size: clamp(2rem, 10.8vw, 2.55rem);
        line-height: 1.04;
    }

    .section-head h2,
    .content-block h2,
    .ctca-assess-head h2,
    .cta-copy h2 {
        font-size: clamp(1.5rem, 7.8vw, 1.9rem);
        line-height: 1.14;
    }

    .section-head p,
    .content-block > p,
    .ctca-assess-head p,
    .cta-copy p {
        font-size: .88rem;
        line-height: 1.62;
    }

    .hero-proof {
        grid-template-columns: 1fr;
    }

    .proof-card {
        display: grid;
        grid-template-columns: 52px 1fr;
        gap: 10px;
        align-items: center;
    }

    .proof-card strong {
        grid-row: 1 / 3;
    }

    .proof-card span {
        margin: 0;
    }

    .soft-card,
    .step-card,
    .metric-card,
    .content-block,
    .analysis-board,
    .ctca-assess-card {
        padding: 16px;
    }

    .feature-grid .soft-card,
    .use-case-grid .soft-card,
    .step-card {
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 12px;
    }

    .feature-grid .soft-card .icon-badge,
    .use-case-grid .soft-card .icon-badge,
    .step-card .icon-badge {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .feature-grid .soft-card h3,
    .use-case-grid .soft-card h3,
    .step-card h3 {
        font-size: .96rem;
        line-height: 1.3;
    }

    .feature-grid .soft-card p,
    .use-case-grid .soft-card p,
    .step-card p,
    .ctca-assess-card p {
        font-size: .86rem;
        line-height: 1.66;
    }

    .ctca-assess-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .ctca-assess-card h3 {
        font-size: .98rem;
    }

    .mini-bars .row {
        grid-template-columns: 74px 1fr 28px;
        font-size: .68rem;
    }

    .candidate-item {
        align-items: flex-start;
    }

    .badge-pass,
    .badge-watch {
        margin-top: 2px;
    }

    details.ctca-faq-item summary {
        grid-template-columns: minmax(0, 1fr) 30px;
        padding: 16px 12px 16px 14px;
        font-size: .88rem;
    }

    .ctca-faq-answer {
        padding-inline: 14px;
        font-size: .84rem;
    }
}

/* Extra small mobile */
@media (max-width: 360px) {
    :root {
        --container: min(100% - 16px, 1200px);
    }

    .hero-wrap,
    .ctca-assess-wrap,
    .cta-card {
        padding: 14px;
    }

    .hero-copy h1 {
        font-size: 1.86rem;
    }

    .eyebrow,
    .section-tag {
        font-size: 8.5px;
        letter-spacing: .085em;
        padding: 7px 10px;
    }

    .btn {
        min-height: 48px;
        font-size: .88rem;
    }

    .dashboard-body,
    .code-panel,
    .score-card,
    .mini-panel,
    .score-box,
    .chart-box,
    .distribution-box,
    .insight-box {
        padding: 12px;
    }

    .feature-grid .soft-card,
    .use-case-grid .soft-card,
    .step-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .feature-grid .soft-card .icon-badge,
    .use-case-grid .soft-card .icon-badge,
    .step-card .icon-badge {
        width: 42px;
        height: 42px;
    }

    .mini-summary .row {
        padding: 10px;
    }
}

/*===================================================================================
    6. Home Page CSS End
===================================================================================*/


/*===================================================================================
    7. Coding Assessment Platform Page CSS Start
===================================================================================*/
:root {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --bg-purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --slider-dots-color: #D4D2DD;
    --light-bg: #DFDAF3;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 6% 4%, rgba(106, 73, 242, 0.12), transparent 25%),
        radial-gradient(circle at 94% 8%, rgba(223, 218, 243, 0.92), transparent 26%),
        radial-gradient(circle at 4% 92%, rgba(106, 73, 242, 0.07), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #fcfbff 44%, #f7f3ff 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--body-text-purple);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.coding-assessment-platform-page,
.coding-assessment-platform-page *,
.coding-assessment-platform-page *::before,
.coding-assessment-platform-page *::after {
    box-sizing: border-box;
}

.coding-assessment-platform-page {
    --cap-container: 1160px;
    --cap-page-gap: 44px;
    --cap-section-space: clamp(46px, 4.8vw, 68px);
    --cap-surface: rgba(255, 255, 255, 0.94);
    --cap-surface-soft: rgba(255, 255, 255, 0.88);
    --cap-line: rgba(106, 73, 242, 0.12);
    --cap-line-strong: rgba(106, 73, 242, 0.20);
    --cap-text: #20183f;
    --cap-text-soft: rgba(62, 63, 102, 0.78);
    --cap-text-muted: rgba(62, 63, 102, 0.62);
    --cap-radius-xl: 32px;
    --cap-radius-lg: 26px;
    --cap-radius-md: 20px;
    --cap-radius-sm: 16px;
    --cap-shadow-sm: 0 10px 28px rgba(50, 35, 111, 0.06);
    --cap-shadow-md: 0 16px 42px rgba(50, 35, 111, 0.085);
    --cap-shadow-lg: 0 28px 72px rgba(50, 35, 111, 0.15);
    --cap-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    padding-top: clamp(86px, 6.5vw, 112px);
    color: var(--cap-text-soft);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
        radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
        linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
}

.coding-assessment-platform-page::before,
.coding-assessment-platform-page::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    opacity: .72;
}

.coding-assessment-platform-page::before {
    width: 300px;
    height: 300px;
    top: 92px;
    left: -120px;
    background: rgba(106, 73, 242, 0.13);
}

.coding-assessment-platform-page::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
}

.coding-assessment-platform-page a {
    color: inherit;
    text-decoration: none;
}

.coding-assessment-platform-page img,
.coding-assessment-platform-page svg {
    display: block;
    max-width: 100%;
}

.coding-assessment-platform-page h1,
.coding-assessment-platform-page h2,
.coding-assessment-platform-page h3,
.coding-assessment-platform-page h4,
.coding-assessment-platform-page p {
    margin: 0;
    font-family: inherit;
}

.coding-assessment-platform-page .cap-shell {
    width: min(var(--cap-container), calc(100% - var(--cap-page-gap)));
    margin-inline: auto;
    position: relative;
    z-index: 1;
    min-width: 0;
}

.coding-assessment-platform-page .cap-section,
.coding-assessment-platform-page #challengeSection,
.coding-assessment-platform-page #pipelineSection,
.coding-assessment-platform-page #modulesSection,
.coding-assessment-platform-page #analyticsSection,
.coding-assessment-platform-page #useCasesSection,
.coding-assessment-platform-page #outcomesSection {
    position: relative;
    padding-block: var(--cap-section-space);
}

.coding-assessment-platform-page .cap-hero {
    padding-top: clamp(28px, 3.4vw, 46px);
    padding-bottom: clamp(38px, 4.4vw, 58px);
}

.coding-assessment-platform-page .cap-final {
    padding-top: clamp(34px, 4vw, 54px);
    padding-bottom: clamp(52px, 6vw, 78px);
}

.coding-assessment-platform-page .cap-hidden {
    display: none !important;
}

.coding-assessment-platform-page .cap-eyebrow,
.coding-assessment-platform-page .cap-kicker,
.coding-assessment-platform-page .cap-badge,
.coding-assessment-platform-page .cap-tag,
.coding-assessment-platform-page .cap-workspace-tag,
.coding-assessment-platform-page .cap-chart-chip,
.coding-assessment-platform-page .cap-score-pill,
.coding-assessment-platform-page .cap-module-score,
.coding-assessment-platform-page .cap-step small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.coding-assessment-platform-page .cap-eyebrow {
    gap: 9px;
    min-height: auto;
    padding: 10px 15px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--purple);
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    text-align: center;
}

.coding-assessment-platform-page .cap-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
}

.coding-assessment-platform-page .cap-head {
    display: grid;
    justify-items: center;
    gap: 14px;
    max-width: 820px;
    margin: 0 auto clamp(24px, 2.8vw, 34px);
    text-align: center;
}

.coding-assessment-platform-page .cap-head h2,
.coding-assessment-platform-page .cap-hero-copy h1,
.coding-assessment-platform-page .cap-final-copy h2 {
    margin: 0;
    color: var(--cap-text);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.045em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.coding-assessment-platform-page .cap-head h2 {
    font-size: clamp(30px, 3.65vw, 46px);
}

.coding-assessment-platform-page .cap-copy,
.coding-assessment-platform-page .cap-head p,
.coding-assessment-platform-page .cap-hero-copy p,
.coding-assessment-platform-page .cap-card p,
.coding-assessment-platform-page .cap-module-card p,
.coding-assessment-platform-page .cap-analytics-card p,
.coding-assessment-platform-page .cap-use-card p,
.coding-assessment-platform-page .cap-outcome-card p,
.coding-assessment-platform-page .cap-step p,
.coding-assessment-platform-page .cap-aside p,
.coding-assessment-platform-page .cap-note,
.coding-assessment-platform-page .cap-muted,
.coding-assessment-platform-page .cap-chart-note,
.coding-assessment-platform-page .cap-final-copy p,
.coding-assessment-platform-page .cap-final-note,
.coding-assessment-platform-page .cap-insight-card p,
.coding-assessment-platform-page .cap-kpi-box span,
.coding-assessment-platform-page .cap-aside-chip span,
.coding-assessment-platform-page .cap-line span {
    color: var(--cap-text-soft);
    line-height: 1.72;
    overflow-wrap: anywhere;
}

.coding-assessment-platform-page .cap-head p {
    max-width: 760px;
    font-size: 15.5px;
}

/* Hero */
.coding-assessment-platform-page .cap-hero-copy {
    display: grid;
    justify-items: center;
    max-width: 990px;
    margin-inline: auto;
    text-align: center;
}

.coding-assessment-platform-page .cap-hero-copy h1 {
    margin-top: 18px;
    font-size: clamp(42px, 5.6vw, 76px);
    line-height: 1.04;
    letter-spacing: -0.055em;
}

.coding-assessment-platform-page .cap-hero-copy p {
    margin: 20px auto 0;
    max-width: 840px;
    font-size: clamp(15px, 1.18vw, 17px);
}

.coding-assessment-platform-page .cap-action-row {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.coding-assessment-platform-page .cap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    font-size: 14.5px;
    font-weight: 700;
    text-align: center;
    line-height: 1.25;
    transition: var(--cap-transition);
    white-space: normal;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.coding-assessment-platform-page .cap-btn:hover {
    transform: translateY(-3px);
}

.coding-assessment-platform-page .cap-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--purple), #8A70FF);
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.22);
}

.coding-assessment-platform-page .cap-btn-primary:hover {
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.28);
}

.coding-assessment-platform-page .cap-btn-secondary {
    color: var(--purple);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
}

.coding-assessment-platform-page .cap-btn-secondary:hover {
    color: var(--purple);
    background: #ffffff;
    border-color: rgba(106, 73, 242, 0.24);
}

.coding-assessment-platform-page .cap-badges {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 22px;
}

.coding-assessment-platform-page .cap-badge,
.coding-assessment-platform-page .cap-tag {
    padding: 8px 12px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.12);
    color: var(--purple);
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 8px 20px rgba(50, 35, 111, 0.045);
}

/* Hero dashboard */
.coding-assessment-platform-page .cap-command {
    margin-top: clamp(28px, 3.4vw, 42px);
    padding: 20px;
    border-radius: var(--cap-radius-xl);
    background:
        radial-gradient(circle at 0 0, rgba(106, 73, 242, 0.10), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 244, 254, 0.90));
    border: 1px solid rgba(106, 73, 242, 0.12);
    box-shadow: var(--cap-shadow-lg);
    backdrop-filter: blur(14px);
}

.coding-assessment-platform-page .cap-command-grid {
    display: grid;
    grid-template-columns: minmax(220px, .82fr) minmax(360px, 1.25fr) minmax(220px, .88fr);
    gap: 18px;
    align-items: stretch;
    min-width: 0;
}

.coding-assessment-platform-page .cap-column,
.coding-assessment-platform-page .cap-mini-kpi,
.coding-assessment-platform-page .cap-feed,
.coding-assessment-platform-page .cap-insight-stack,
.coding-assessment-platform-page .cap-test-bars,
.coding-assessment-platform-page .cap-chart-grid,
.coding-assessment-platform-page .cap-analytics-stack,
.coding-assessment-platform-page .cap-line-list,
.coding-assessment-platform-page .cap-bullets,
.coding-assessment-platform-page .cap-aside-grid {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.coding-assessment-platform-page .cap-panel,
.coding-assessment-platform-page .cap-card,
.coding-assessment-platform-page .cap-module-card,
.coding-assessment-platform-page .cap-analytics-card,
.coding-assessment-platform-page .cap-use-card,
.coding-assessment-platform-page .cap-outcome-card,
.coding-assessment-platform-page .cap-mini-card,
.coding-assessment-platform-page .cap-feed-item,
.coding-assessment-platform-page .cap-insight-card,
.coding-assessment-platform-page .cap-step,
.coding-assessment-platform-page .cap-kpi-box {
    background: var(--cap-surface);
    border: 1px solid var(--cap-line);
    box-shadow: var(--cap-shadow-md);
    backdrop-filter: blur(14px);
    min-width: 0;
}

.coding-assessment-platform-page .cap-card:hover,
.coding-assessment-platform-page .cap-module-card:hover,
.coding-assessment-platform-page .cap-analytics-card:hover,
.coding-assessment-platform-page .cap-use-card:hover,
.coding-assessment-platform-page .cap-outcome-card:hover,
.coding-assessment-platform-page .cap-mini-card:hover,
.coding-assessment-platform-page .cap-feed-item:hover,
.coding-assessment-platform-page .cap-insight-card:hover,
.coding-assessment-platform-page .cap-step:hover,
.coding-assessment-platform-page .cap-kpi-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--cap-shadow-lg);
    border-color: var(--cap-line-strong);
}

.coding-assessment-platform-page .cap-mini-card {
    padding: 18px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.07), transparent 34%),
        rgba(255,255,255,.94);
    transition: var(--cap-transition);
}

.coding-assessment-platform-page .cap-mini-card h3,
.coding-assessment-platform-page .cap-workspace h3 {
    margin: 0;
    color: var(--cap-text);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.coding-assessment-platform-page .cap-mini-kpi {
    margin-top: 12px;
    gap: 10px;
}

.coding-assessment-platform-page .cap-kpi-box {
    padding: 14px;
    border-radius: 18px;
    background: rgba(106, 73, 242, 0.07);
    border-color: rgba(106, 73, 242, 0.10);
    transition: var(--cap-transition);
}

.coding-assessment-platform-page .cap-kpi-box strong {
    display: block;
    color: var(--cap-text);
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.1;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.coding-assessment-platform-page .cap-kpi-box span {
    display: block;
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.55;
}

.coding-assessment-platform-page .cap-feed {
    margin-top: 14px;
    gap: 12px;
}

.coding-assessment-platform-page .cap-feed-item {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.94);
}

.coding-assessment-platform-page .cap-feed-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    min-width: 0;
}

.coding-assessment-platform-page .cap-feed-top strong,
.coding-assessment-platform-page .cap-feed-top span {
    overflow-wrap: anywhere;
}

.coding-assessment-platform-page .cap-score-pill {
    min-width: 64px;
    padding: 7px 10px;
    background: rgba(106, 73, 242, 0.08);
    color: var(--purple);
    font-size: 12px;
    line-height: 1.2;
}

.coding-assessment-platform-page .cap-workspace {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0, rgba(157, 140, 255, .30), transparent 34%),
        linear-gradient(180deg, rgba(50, 35, 111, 0.98), rgba(64, 45, 139, 0.98));
    color: #fff;
    box-shadow: var(--cap-shadow-lg);
    min-width: 0;
}

.coding-assessment-platform-page .cap-workspace::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -90px;
    top: -80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 72%);
    pointer-events: none;
}

.coding-assessment-platform-page .cap-workspace::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    left: -70px;
    bottom: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(106, 73, 242, 0.50), transparent 72%);
    pointer-events: none;
}

.coding-assessment-platform-page .cap-workspace-top,
.coding-assessment-platform-page .cap-editor,
.coding-assessment-platform-page .cap-test-bars {
    position: relative;
    z-index: 1;
}

.coding-assessment-platform-page .cap-workspace-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    min-width: 0;
}

.coding-assessment-platform-page .cap-workspace h3 {
    color: #fff;
}

.coding-assessment-platform-page .cap-workspace-tag,
.coding-assessment-platform-page .cap-chart-chip {
    flex: 0 0 auto;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.84);
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
}

.coding-assessment-platform-page .cap-editor {
    margin-top: 18px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(13, 11, 28, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 0;
}

.coding-assessment-platform-page .cap-editor-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.coding-assessment-platform-page .cap-editor-head span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
    flex: 0 0 auto;
}

.coding-assessment-platform-page .cap-code {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.88);
    white-space: pre-wrap;
    word-break: break-word;
}

.coding-assessment-platform-page .cap-test-bars {
    margin-top: 18px;
    gap: 12px;
}

.coding-assessment-platform-page .cap-test-row,
.coding-assessment-platform-page .cap-chart-row {
    display: grid;
    gap: 8px;
}

.coding-assessment-platform-page .cap-test-meta,
.coding-assessment-platform-page .cap-chart-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    min-width: 0;
}

.coding-assessment-platform-page .cap-test-meta span,
.coding-assessment-platform-page .cap-chart-meta span {
    overflow-wrap: anywhere;
    min-width: 0;
}

.coding-assessment-platform-page .cap-track,
.coding-assessment-platform-page .cap-chart-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.coding-assessment-platform-page .cap-fill,
.coding-assessment-platform-page .cap-chart-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9d8cff 0%, #ffffff 100%);
    max-width: 100%;
}

.coding-assessment-platform-page .cap-insight-stack {
    margin-top: 12px;
}

.coding-assessment-platform-page .cap-insight-card {
    padding: 16px;
    border-radius: 20px;
    background: rgba(255,255,255,.94);
}

.coding-assessment-platform-page .cap-insight-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--purple);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.coding-assessment-platform-page .cap-insight-card p {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.62;
}

/* Challenge */
.coding-assessment-platform-page .cap-layout,
.coding-assessment-platform-page .cap-analytics-layout {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 22px;
    align-items: stretch;
    min-width: 0;
}

.coding-assessment-platform-page .cap-aside,
.coding-assessment-platform-page .cap-chart-card {
    padding: 26px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 100% 0, rgba(255,255,255,.16), transparent 34%),
        linear-gradient(180deg, rgba(50, 35, 111, 0.98), rgba(67, 48, 145, 0.98));
    color: #fff;
    box-shadow: var(--cap-shadow-lg);
    min-width: 0;
}

.coding-assessment-platform-page .cap-aside h3,
.coding-assessment-platform-page .cap-chart-head h3 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1.32;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.coding-assessment-platform-page .cap-aside p {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.78);
}

.coding-assessment-platform-page .cap-aside-grid {
    margin-top: 18px;
    gap: 12px;
}

.coding-assessment-platform-page .cap-aside-chip {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.coding-assessment-platform-page .cap-aside-chip strong {
    display: block;
    color: #fff;
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.coding-assessment-platform-page .cap-aside-chip span {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.55;
}

.coding-assessment-platform-page .cap-grid-2,
.coding-assessment-platform-page .cap-pipeline,
.coding-assessment-platform-page .cap-module-grid,
.coding-assessment-platform-page .cap-use-grid,
.coding-assessment-platform-page .cap-outcome-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    min-width: 0;
    align-items: stretch;
}

.coding-assessment-platform-page .cap-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Cards */
.coding-assessment-platform-page .cap-card,
.coding-assessment-platform-page .cap-module-card,
.coding-assessment-platform-page .cap-analytics-card,
.coding-assessment-platform-page .cap-use-card,
.coding-assessment-platform-page .cap-outcome-card {
    position: relative;
    display: grid;
    align-content: start;
    padding: 24px;
    border-radius: var(--cap-radius-lg);
    transition: var(--cap-transition);
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(250,249,255,.88));
    overflow: hidden;
}

.coding-assessment-platform-page .cap-card::after,
.coding-assessment-platform-page .cap-module-card::after,
.coding-assessment-platform-page .cap-analytics-card::after,
.coding-assessment-platform-page .cap-use-card::after,
.coding-assessment-platform-page .cap-outcome-card::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    right: -42px;
    bottom: -52px;
    background: radial-gradient(circle, rgba(106, 73, 242, 0.13), transparent 72%);
    pointer-events: none;
}

.coding-assessment-platform-page .cap-kicker {
    padding: 8px 12px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.10);
    color: var(--purple);
    font-size: 11px;
    line-height: 1.22;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: center;
}

.coding-assessment-platform-page .cap-card h3,
.coding-assessment-platform-page .cap-module-card h3,
.coding-assessment-platform-page .cap-analytics-card h3,
.coding-assessment-platform-page .cap-use-card h3,
.coding-assessment-platform-page .cap-outcome-card h3,
.coding-assessment-platform-page .cap-step h3 {
    margin: 12px 0 10px;
    color: var(--cap-text);
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.024em;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.coding-assessment-platform-page .cap-card p,
.coding-assessment-platform-page .cap-module-card p,
.coding-assessment-platform-page .cap-analytics-card p,
.coding-assessment-platform-page .cap-use-card p,
.coding-assessment-platform-page .cap-outcome-card p,
.coding-assessment-platform-page .cap-step p {
    font-size: 14px;
    line-height: 1.62;
}

.coding-assessment-platform-page .cap-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}

.coding-assessment-platform-page .cap-tag {
    color: var(--dark-purple);
    font-size: 12px;
    box-shadow: none;
}

/* Pipeline */
.coding-assessment-platform-page .cap-pipeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: relative;
}

.coding-assessment-platform-page .cap-pipeline::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 44px;
    height: 2px;
    background: linear-gradient(90deg, rgba(106, 73, 242, 0.10), rgba(106, 73, 242, 0.28), rgba(106, 73, 242, 0.10));
    z-index: 0;
}

.coding-assessment-platform-page .cap-step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 0;
    align-items: center;
    padding: 22px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 32%),
        linear-gradient(180deg, #fff, #fbfaff);
    transition: var(--cap-transition);
    overflow: hidden;
}

.coding-assessment-platform-page .cap-step-top {
    display: contents;
    min-width: 0;
}

.coding-assessment-platform-page .cap-step-index {
    grid-column: 1;
    grid-row: 1;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--purple), #8b72ff);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(106, 73, 242, 0.22);
    flex: 0 0 auto;
}

.coding-assessment-platform-page .cap-step h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 16px;
    line-height: 1.28;
}

.coding-assessment-platform-page .cap-step small {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 14px;
    padding: 7px 11px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.10);
    color: var(--purple);
    font-size: 10.5px;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: center;
}

.coding-assessment-platform-page .cap-step p {
    grid-column: 1 / -1;
    margin: 12px 0 0;
}

.coding-assessment-platform-page .cap-step-note {
    grid-column: 1 / -1;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(50, 35, 111, 0.14);
    color: rgba(62, 63, 102, 0.74);
    font-size: 13px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

/* Modules */
.coding-assessment-platform-page .cap-module-top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    min-width: 0;
}

.coding-assessment-platform-page .cap-module-score {
    flex: 0 0 auto;
    padding: 10px 12px;
    border-radius: 16px;
    min-width: 82px;
    text-align: center;
    background: rgba(50, 35, 111, 0.92);
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
    box-shadow: 0 10px 20px rgba(50, 35, 111, 0.12);
}

.coding-assessment-platform-page .cap-bullets {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    gap: 10px;
}

.coding-assessment-platform-page .cap-bullets li {
    position: relative;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding-left: 0;
    color: var(--cap-text-soft);
    line-height: 1.62;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.coding-assessment-platform-page .cap-bullets li::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: .58em;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), #9d8cff);
    box-shadow: 0 0 0 4px rgba(106, 73, 242, 0.10);
}

/* Analytics */
.coding-assessment-platform-page .cap-analytics-layout {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
}

.coding-assessment-platform-page .cap-chart-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
}

.coding-assessment-platform-page .cap-chart-grid {
    margin-top: 20px;
}

.coding-assessment-platform-page .cap-chart-meta {
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
}

.coding-assessment-platform-page .cap-chart-track {
    height: 12px;
}

.coding-assessment-platform-page .cap-chart-note {
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 14px;
    line-height: 1.72;
}

.coding-assessment-platform-page .cap-line-list {
    margin-top: 16px;
    gap: 10px;
}

.coding-assessment-platform-page .cap-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(50, 35, 111, 0.08);
    min-width: 0;
}

.coding-assessment-platform-page .cap-line:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.coding-assessment-platform-page .cap-line strong {
    color: var(--dark-purple);
    text-align: right;
    overflow-wrap: anywhere;
}

/* Final CTA */
.coding-assessment-platform-page .cap-final-wrap {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 3vw, 34px);
    border-radius: var(--cap-radius-xl);
    background:
        radial-gradient(circle at right top, rgba(255,255,255,0.14), transparent 28%),
        linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    color: #fff;
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
}

.coding-assessment-platform-page .cap-final-wrap::before,
.coding-assessment-platform-page .cap-final-wrap::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    opacity: .24;
}

.coding-assessment-platform-page .cap-final-wrap::before {
    width: 300px;
    height: 300px;
    right: -100px;
    top: -100px;
    background: radial-gradient(circle, rgba(255,255,255,0.56), rgba(255,255,255,0));
}

.coding-assessment-platform-page .cap-final-wrap::after {
    width: 240px;
    height: 240px;
    left: -90px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(255,255,255,0.30), rgba(255,255,255,0));
}

.coding-assessment-platform-page .cap-final-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 24px;
    align-items: center;
    min-width: 0;
}

.coding-assessment-platform-page .cap-final-copy h2 {
    margin: 16px 0 12px;
    color: #fff;
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
}

.coding-assessment-platform-page .cap-final-copy p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.80);
}

.coding-assessment-platform-page .cap-final-card {
    justify-self: end;
    width: min(100%, 340px);
    min-width: 0;
    padding: 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
}

.coding-assessment-platform-page .cap-final-card .cap-action-row {
    justify-content: stretch;
    flex-direction: column;
    margin-top: 18px;
}

.coding-assessment-platform-page .cap-final-card .cap-btn {
    width: 100%;
}

.coding-assessment-platform-page .cap-final-note {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 13.5px;
    line-height: 1.65;
}

.coding-assessment-platform-page .cap-final-card .cap-btn-primary {
    background: #fff;
    color: var(--cap-text);
    box-shadow: 0 18px 38px rgba(0,0,0,0.10);
}

.coding-assessment-platform-page .cap-final-card .cap-btn-secondary {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.18);
}

/* Responsive */
@media (max-width: 1180px) {
    .coding-assessment-platform-page {
        --cap-page-gap: 34px;
        --cap-section-space: 58px;
        padding-top: 86px;
    }

    .coding-assessment-platform-page .cap-command-grid,
    .coding-assessment-platform-page .cap-layout,
    .coding-assessment-platform-page .cap-analytics-layout,
    .coding-assessment-platform-page .cap-final-grid {
        grid-template-columns: 1fr;
    }

    .coding-assessment-platform-page .cap-final-card {
        justify-self: stretch;
        width: 100%;
    }

   .coding-assessment-platform-page .cap-grid-2,
    .coding-assessment-platform-page .cap-pipeline,
    .coding-assessment-platform-page .cap-use-grid,
    .coding-assessment-platform-page .cap-outcome-grid,
    .coding-assessment-platform-page .cap-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .coding-assessment-platform-page .cap-pipeline::before {
        display: none;
    }
}

@media (max-width: 860px) {
    .coding-assessment-platform-page {
        --cap-page-gap: 28px;
        --cap-section-space: 54px;
        padding-top: 78px;
    }

    .coding-assessment-platform-page .cap-hero {
        padding-top: 28px;
        padding-bottom: 36px;
    }

    .coding-assessment-platform-page .cap-hero-copy h1 {
        font-size: clamp(34px, 8vw, 58px);
    }

    .coding-assessment-platform-page .cap-head h2 {
        font-size: clamp(28px, 5.6vw, 40px);
    }

    .coding-assessment-platform-page .cap-command,
    .coding-assessment-platform-page .cap-workspace,
    .coding-assessment-platform-page .cap-chart-card,
    .coding-assessment-platform-page .cap-final-wrap {
        border-radius: 26px;
    }
}

@media (max-width: 700px) {
    .coding-assessment-platform-page {
        --cap-page-gap: 24px;
        --cap-section-space: 46px;
        padding-top: 70px;
    }

    .coding-assessment-platform-page .cap-shell {
        width: min(var(--cap-container), calc(100% - var(--cap-page-gap)));
    }

    .coding-assessment-platform-page .cap-hero {
        padding-top: 24px;
        padding-bottom: 32px;
    }

    .coding-assessment-platform-page .cap-head {
        margin-bottom: 22px;
    }

    .coding-assessment-platform-page .cap-head h2,
    .coding-assessment-platform-page .cap-final-copy h2 {
        font-size: clamp(24px, 7.4vw, 34px);
        line-height: 1.16;
        letter-spacing: -0.04em;
    }

    .coding-assessment-platform-page .cap-hero-copy h1 {
        font-size: clamp(30px, 9.3vw, 42px);
        line-height: 1.1;
    }

    .coding-assessment-platform-page .cap-head p,
    .coding-assessment-platform-page .cap-hero-copy p,
    .coding-assessment-platform-page .cap-final-copy p {
        font-size: 14px;
        line-height: 1.62;
    }

    .coding-assessment-platform-page .cap-eyebrow {
        padding: 8px 12px;
        gap: 8px;
        font-size: 9.5px;
        letter-spacing: .075em;
    }

    .coding-assessment-platform-page .cap-eyebrow::before {
        width: 7px;
        height: 7px;
    }

    .coding-assessment-platform-page .cap-action-row {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 11px;
        margin-top: 22px;
    }

    .coding-assessment-platform-page .cap-btn {
        width: 100%;
        min-height: 50px;
        padding: 13px 16px;
        border-radius: 14px;
        font-size: 14px;
    }

    .coding-assessment-platform-page .cap-badges {
        gap: 8px;
        margin-top: 20px;
    }

    .coding-assessment-platform-page .cap-badge,
    .coding-assessment-platform-page .cap-tag {
        padding: 7px 10px;
        font-size: 11.5px;
        line-height: 1.2;
    }

    .coding-assessment-platform-page .cap-command,
    .coding-assessment-platform-page .cap-final-wrap {
        padding: 16px;
        border-radius: 24px;
    }

    .coding-assessment-platform-page .cap-command-grid,
   .coding-assessment-platform-page .cap-grid-2,
    .coding-assessment-platform-page .cap-pipeline,
    .coding-assessment-platform-page .cap-module-grid,
    .coding-assessment-platform-page .cap-use-grid,
    .coding-assessment-platform-page .cap-outcome-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .coding-assessment-platform-page .cap-layout,
    .coding-assessment-platform-page .cap-analytics-layout,
    .coding-assessment-platform-page .cap-final-grid {
        gap: 16px;
    }

    .coding-assessment-platform-page .cap-mini-card,
    .coding-assessment-platform-page .cap-aside,
    .coding-assessment-platform-page .cap-card,
    .coding-assessment-platform-page .cap-module-card,
    .coding-assessment-platform-page .cap-analytics-card,
    .coding-assessment-platform-page .cap-use-card,
    .coding-assessment-platform-page .cap-outcome-card,
    .coding-assessment-platform-page .cap-step,
    .coding-assessment-platform-page .cap-chart-card,
    .coding-assessment-platform-page .cap-workspace,
    .coding-assessment-platform-page .cap-final-card {
        padding: 16px;
        border-radius: 20px;
    }

    .coding-assessment-platform-page .cap-workspace-top,
    .coding-assessment-platform-page .cap-chart-head {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .coding-assessment-platform-page .cap-workspace-tag,
    .coding-assessment-platform-page .cap-chart-chip {
        width: fit-content;
        font-size: 11px;
    }

    .coding-assessment-platform-page .cap-editor {
        padding: 14px;
        border-radius: 16px;
    }

    .coding-assessment-platform-page .cap-code {
        font-size: 11px;
        line-height: 1.65;
    }

    .coding-assessment-platform-page .cap-test-meta,
    .coding-assessment-platform-page .cap-chart-meta {
        font-size: 12px;
    }

    .coding-assessment-platform-page .cap-kpi-box strong {
        font-size: 22px;
    }

    .coding-assessment-platform-page .cap-card,
    .coding-assessment-platform-page .cap-module-card,
    .coding-assessment-platform-page .cap-analytics-card,
    .coding-assessment-platform-page .cap-use-card,
    .coding-assessment-platform-page .cap-outcome-card,
    .coding-assessment-platform-page .cap-step {
        text-align: left;
        align-content: start;
        background:
            radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 249, 255, 0.94));
        border: 1px solid rgba(106, 73, 242, 0.10);
        box-shadow: 0 14px 30px rgba(50, 35, 111, 0.07);
    }

    .coding-assessment-platform-page .cap-card h3,
    .coding-assessment-platform-page .cap-module-card h3,
    .coding-assessment-platform-page .cap-analytics-card h3,
    .coding-assessment-platform-page .cap-use-card h3,
    .coding-assessment-platform-page .cap-outcome-card h3,
    .coding-assessment-platform-page .cap-step h3 {
        font-size: 16.5px;
        line-height: 1.32;
    }

    .coding-assessment-platform-page .cap-card p,
    .coding-assessment-platform-page .cap-module-card p,
    .coding-assessment-platform-page .cap-analytics-card p,
    .coding-assessment-platform-page .cap-use-card p,
    .coding-assessment-platform-page .cap-outcome-card p,
    .coding-assessment-platform-page .cap-step p,
    .coding-assessment-platform-page .cap-aside p,
    .coding-assessment-platform-page .cap-chart-note,
    .coding-assessment-platform-page .cap-note {
        font-size: 13.5px;
        line-height: 1.58;
    }

    .coding-assessment-platform-page .cap-kicker {
        justify-content: flex-start;
        padding: 8px 12px;
        background: linear-gradient(90deg, rgba(106, 73, 242, 0.12), rgba(106, 73, 242, 0.04));
        font-size: 10.8px;
        line-height: 1.25;
        letter-spacing: 0.075em;
        text-align: left;
    }

    .coding-assessment-platform-page .cap-tags {
        justify-content: flex-start;
    }

    .coding-assessment-platform-page .cap-feed-top {
        grid-template-columns: 1fr;
    }

    .coding-assessment-platform-page .cap-score-pill {
        width: fit-content;
        min-width: 0;
    }

    .coding-assessment-platform-page .cap-module-top {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .coding-assessment-platform-page .cap-module-score {
        width: fit-content;
        min-width: 0;
        padding: 9px 12px;
        border-radius: 14px;
        background: linear-gradient(135deg, #32236F, #5d42c8);
        color: #fff;
        font-size: 12px;
        text-align: left;
    }

    .coding-assessment-platform-page .cap-bullets {
        gap: 8px;
        margin-top: 14px;
    }

    .coding-assessment-platform-page .cap-bullets li {
        font-size: 13.5px;
        line-height: 1.55;
    }

    .coding-assessment-platform-page .cap-step {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
    }

    .coding-assessment-platform-page .cap-step-index {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 12.5px;
    }

    .coding-assessment-platform-page .cap-step h3 {
        margin: 0;
    }

    .coding-assessment-platform-page .cap-step small,
    .coding-assessment-platform-page .cap-step p,
    .coding-assessment-platform-page .cap-step-note {
        grid-column: 1 / -1;
    }

    .coding-assessment-platform-page .cap-step small {
        margin-top: 12px;
        font-size: 10px;
        padding: 7px 10px;
    }

    .coding-assessment-platform-page .cap-step p {
        margin-top: 10px;
    }

    .coding-assessment-platform-page .cap-step-note {
        margin-top: 12px;
        padding: 12px;
        border-top: 0;
        border-radius: 14px;
        background: rgba(50, 35, 111, 0.04);
        font-size: 13px;
        line-height: 1.58;
    }

    .coding-assessment-platform-page .cap-line-list {
        margin-top: 14px;
        gap: 8px;
        padding: 10px;
        border-radius: 18px;
        background:
            radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 36%),
            linear-gradient(180deg, rgba(246, 244, 254, 0.84), rgba(255,255,255,0.86));
        border: 1px solid rgba(106, 73, 242, 0.10);
    }

    .coding-assessment-platform-page .cap-line {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        align-items: center;
        gap: 9px;
        padding: 11px 12px;
        border: 1px solid rgba(106, 73, 242, 0.09);
        border-radius: 14px;
        background: rgba(255,255,255,0.88);
    }

    .coding-assessment-platform-page .cap-line:last-child {
        border-bottom: 1px solid rgba(106, 73, 242, 0.09);
    }

    .coding-assessment-platform-page .cap-line span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        min-height: 28px;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(50, 35, 111, 0.07);
        color: rgba(50, 35, 111, 0.68);
        font-size: 10px;
        line-height: 1;
        letter-spacing: .07em;
        text-transform: uppercase;
        font-weight: 800;
        text-align: center;
    }

    .coding-assessment-platform-page .cap-line strong {
        color: var(--dark-purple);
        font-size: 13px;
        line-height: 1.38;
        font-weight: 700;
        text-align: left;
    }

    .coding-assessment-platform-page .cap-line:nth-child(2) {
        background:
            radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.10), transparent 34%),
            rgba(255,255,255,0.96);
        border-color: rgba(106, 73, 242, 0.18);
    }

    .coding-assessment-platform-page .cap-line:nth-child(2) span {
        background: linear-gradient(135deg, var(--purple), #8A70FF);
        color: #ffffff;
        box-shadow: 0 8px 18px rgba(106, 73, 242, 0.18);
    }
}

@media (max-width: 430px) {
    .coding-assessment-platform-page {
        --cap-page-gap: 22px;
        --cap-section-space: 42px;
        padding-top: 64px;
    }

    .coding-assessment-platform-page .cap-hero {
        padding-top: 20px;
        padding-bottom: 30px;
    }

    .coding-assessment-platform-page .cap-hero-copy h1 {
        font-size: clamp(27px, 8.8vw, 36px);
    }

    .coding-assessment-platform-page .cap-head h2,
    .coding-assessment-platform-page .cap-final-copy h2 {
        font-size: clamp(22px, 7vw, 30px);
    }

    .coding-assessment-platform-page .cap-head p,
    .coding-assessment-platform-page .cap-hero-copy p,
    .coding-assessment-platform-page .cap-final-copy p {
        font-size: 13.5px;
    }

    .coding-assessment-platform-page .cap-command,
    .coding-assessment-platform-page .cap-final-wrap,
    .coding-assessment-platform-page .cap-mini-card,
    .coding-assessment-platform-page .cap-aside,
    .coding-assessment-platform-page .cap-card,
    .coding-assessment-platform-page .cap-module-card,
    .coding-assessment-platform-page .cap-analytics-card,
    .coding-assessment-platform-page .cap-use-card,
    .coding-assessment-platform-page .cap-outcome-card,
    .coding-assessment-platform-page .cap-step,
    .coding-assessment-platform-page .cap-chart-card,
    .coding-assessment-platform-page .cap-workspace,
    .coding-assessment-platform-page .cap-final-card {
        padding: 14px;
        border-radius: 18px;
    }

    .coding-assessment-platform-page .cap-step {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 11px;
    }

    .coding-assessment-platform-page .cap-step-index {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .coding-assessment-platform-page .cap-step h3 {
        font-size: 15.5px;
    }

    .coding-assessment-platform-page .cap-line {
        grid-template-columns: 1fr;
        gap: 7px;
        text-align: center;
    }

    .coding-assessment-platform-page .cap-line span {
        margin: 0 auto;
    }

    .coding-assessment-platform-page .cap-line strong {
        text-align: center;
        font-size: 12.8px;
    }

    .coding-assessment-platform-page .cap-kicker {
        font-size: 10px;
        letter-spacing: 0.07em;
        padding: 7px 10px;
    }
}

@media (max-width: 360px) {
    .coding-assessment-platform-page {
        --cap-page-gap: 18px;
        padding-top: 60px;
    }

    .coding-assessment-platform-page .cap-hero-copy h1 {
        font-size: 25px;
    }

    .coding-assessment-platform-page .cap-eyebrow {
        font-size: 8.5px;
        letter-spacing: .055em;
        padding: 7px 10px;
    }

    .coding-assessment-platform-page .cap-btn {
        min-height: 48px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .coding-assessment-platform-page [data-reveal] {
        opacity: 0;
        transform: translateY(16px);
        animation: capFadeUp 0.78s ease forwards;
    }

    .coding-assessment-platform-page [data-reveal="2"] {
        animation-delay: 0.08s;
    }

    .coding-assessment-platform-page [data-reveal="3"] {
        animation-delay: 0.16s;
    }

    .coding-assessment-platform-page [data-reveal="4"] {
        animation-delay: 0.24s;
    }

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

@media (hover: none) {
    .coding-assessment-platform-page .cap-card:hover,
    .coding-assessment-platform-page .cap-module-card:hover,
    .coding-assessment-platform-page .cap-analytics-card:hover,
    .coding-assessment-platform-page .cap-use-card:hover,
    .coding-assessment-platform-page .cap-outcome-card:hover,
    .coding-assessment-platform-page .cap-mini-card:hover,
    .coding-assessment-platform-page .cap-feed-item:hover,
    .coding-assessment-platform-page .cap-insight-card:hover,
    .coding-assessment-platform-page .cap-step:hover,
    .coding-assessment-platform-page .cap-kpi-box:hover,
    .coding-assessment-platform-page .cap-btn:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .coding-assessment-platform-page *,
    .coding-assessment-platform-page *::before,
    .coding-assessment-platform-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .coding-assessment-platform-page [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/*===================================================================================
    7. Coding Assessment Platform Page CSS End
===================================================================================*/


/*===================================================================================
    8. Technical Skill Assessments Page CSS Start
===================================================================================*/

:root {
        --light-purple: #F6F4FE;
        --purple: #6A49F2;
        --bg-purple: #6A49F2;
        --dark-purple: #32236F;
        --body-text-purple: #3E3F66;
        --text-white: #ffffff;
        --bg-white: #ffffff;
        --slider-dots-color: #D4D2DD;
        --light-bg: #DFDAF3;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        min-width: 320px;
        overflow-x: hidden;
        background:
            radial-gradient(circle at 6% 4%, rgba(106, 73, 242, .12), transparent 24%),
            radial-gradient(circle at 94% 8%, rgba(223, 218, 243, .92), transparent 26%),
            linear-gradient(180deg, #ffffff 0%, #fcfbff 44%, #f7f3ff 100%);
    }

    .tsa-forge,
    .tsa-forge * {
        box-sizing: border-box;
    }

    .tsa-forge {
        --tsa-container: 1160px;
        --tsa-page-pad: 44px;
        --tsa-space: clamp(46px, 4.8vw, 68px);
        --tsa-heading: var(--dark-purple);
        --tsa-text: var(--body-text-purple);
        --tsa-accent: var(--purple);
        --tsa-border: rgba(106, 73, 242, .14);
        --tsa-border-soft: rgba(106, 73, 242, .10);
        --tsa-soft: rgba(106, 73, 242, .08);
        --tsa-shadow: 0 16px 40px rgba(50, 35, 111, .08);
        --tsa-shadow-hover: 0 22px 52px rgba(50, 35, 111, .12);
        --tsa-radius-xl: 32px;
        --tsa-radius-lg: 24px;
        --tsa-radius-md: 18px;
        --tsa-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
        font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: var(--tsa-text);
        overflow-x: hidden;
        position: relative;
        isolation: isolate;
        padding-top: 86px;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    .tsa-forge::before,
    .tsa-forge::after {
        content: "";
        position: fixed;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        z-index: -1;
        opacity: .72;
    }

    .tsa-forge::before {
        width: 300px;
        height: 300px;
        left: -120px;
        top: 68px;
        background: rgba(106, 73, 242, .12);
    }

    .tsa-forge::after {
        width: 340px;
        height: 340px;
        right: -130px;
        top: 320px;
        background: rgba(223, 218, 243, .9);
    }

    .tsa-forge a {
        color: inherit;
        text-decoration: none;
    }

    .tsa-forge img,
    .tsa-forge svg {
        max-width: 100%;
        display: block;
    }

    .tsa-forge .container {
        width: min(var(--tsa-container), calc(100% - var(--tsa-page-pad)));
        margin-inline: auto;
    }

    .tsa-forge .section {
        position: relative;
        padding-block: var(--tsa-space);
    }

    .tsa-forge .section.soft {
        background: linear-gradient(180deg, rgba(246, 244, 254, .66), rgba(255, 255, 255, 0));
    }

    .tsa-forge .eyebrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        max-width: 100%;
        padding: 10px 15px;
        border-radius: 999px;
        background: rgba(106, 73, 242, .08);
        border: 1px solid rgba(106, 73, 242, .14);
        color: var(--tsa-accent);
        font-size: 12px;
        line-height: 1.25;
        letter-spacing: .085em;
        text-transform: uppercase;
        font-weight: 700;
        overflow-wrap: anywhere;
        box-shadow: 0 10px 24px rgba(106, 73, 242, .06);
    }

    .tsa-forge .eyebrow::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--tsa-accent), #15bdf6);
        box-shadow: 0 0 0 5px rgba(106, 73, 242, .10);
        flex: 0 0 auto;
    }

    .tsa-forge .section-head {
        max-width: 800px;
        margin-bottom: clamp(24px, 2.6vw, 32px);
    }

    .tsa-forge .section-head h2,
    .tsa-forge .narrative-card h2,
    .tsa-forge .cta-copy h2 {
        margin: 16px 0 12px;
        color: var(--tsa-heading);
        font-size: clamp(30px, 3.65vw, 46px);
        line-height: 1.12;
        letter-spacing: -0.035em;
        font-weight: 700;
        text-wrap: balance;
    }

    .tsa-forge .section-head p,
    .tsa-forge .hero-copy p,
    .tsa-forge .atlas-head p,
    .tsa-forge .metric p,
    .tsa-forge .narrative-card p,
    .tsa-forge .mosaic-card p,
    .tsa-forge .list-card p,
    .tsa-forge .step-card p,
    .tsa-forge .compare-card p,
    .tsa-forge .cta-copy p {
        margin: 0;
        color: rgba(62, 63, 102, .82);
        font-size: 15.5px;
        line-height: 1.72;
        font-weight: 400;
        overflow-wrap: anywhere;
    }

    /* Header */
    .tsa-forge .site-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        background: rgba(255, 255, 255, .86);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(106, 73, 242, .08);
    }

    .tsa-forge .header-row {
        min-height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .tsa-forge .brand-mark {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        color: var(--dark-purple);
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
    }

    .tsa-forge .brand-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        color: var(--text-white);
        background: linear-gradient(135deg, var(--purple), #7d5df6);
        box-shadow: 0 10px 24px rgba(106, 73, 242, .20);
        font-weight: 700;
    }

    .tsa-forge .header-nav {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .tsa-forge .header-nav a {
        color: var(--body-text-purple);
        font-size: 14px;
        line-height: 1;
        font-weight: 500;
        transition: .25s ease;
    }

    .tsa-forge .header-nav a:hover {
        color: var(--purple);
    }

    .tsa-forge .header-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 150px;
        padding: 13px 20px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--purple), #7d5df6);
        color: var(--text-white);
        box-shadow: 0 14px 28px rgba(106, 73, 242, .18);
        transition: .3s ease;
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
    }

    .tsa-forge .header-cta:hover {
        transform: translateY(-2px);
    }

    /* Hero */
    .tsa-forge .hero {
        padding: 22px 0 clamp(46px, 5vw, 62px);
        position: relative;
    }

    .tsa-forge .hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(430px, 540px);
        gap: 24px;
        align-items: stretch;
    }

    .tsa-forge .hero-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .tsa-forge .hero-copy h1 {
        margin: 18px 0 14px;
        color: var(--tsa-heading);
        font-size: clamp(38px, 5vw, 60px);
        line-height: 1.07;
        letter-spacing: -0.045em;
        font-weight: 700;
        max-width: 720px;
        text-wrap: balance;
    }

    .tsa-forge .hero-copy h1 span {
        color: var(--tsa-accent);
        display: inline;
    }

    .tsa-forge .hero-copy p {
        max-width: 620px;
        font-size: 15.8px;
        margin-bottom: 24px;
    }

    .tsa-forge .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 20px;
    }

    .tsa-forge .btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-width: 176px;
        min-height: 52px;
        padding: 14px 22px;
        border-radius: 15px;
        border: 1px solid transparent;
        overflow: hidden;
        isolation: isolate;
        transition: var(--tsa-transition);
        font-size: 14.5px;
        line-height: 1.2;
        font-weight: 700;
        text-align: center;
    }

    .tsa-forge .btn::before {
        content: "";
        position: absolute;
        inset: 0;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .35s ease;
        border-radius: inherit;
        z-index: -1;
    }

    .tsa-forge .btn:hover {
        transform: translateY(-3px);
    }

    .tsa-forge .btn:hover::before {
        transform: scaleX(1);
    }

    .tsa-forge .btn-primary {
        background: linear-gradient(135deg, var(--tsa-accent), #7d5df6);
        color: var(--text-white);
        box-shadow: 0 18px 36px rgba(106, 73, 242, .22);
    }

    .tsa-forge .btn-primary::before {
        background: linear-gradient(135deg, var(--tsa-heading), var(--tsa-accent));
    }

    .tsa-forge .btn-secondary {
        background: rgba(255, 255, 255, .94);
        color: var(--tsa-accent);
        border-color: rgba(106, 73, 242, .16);
        box-shadow: 0 12px 26px rgba(50, 35, 111, .07);
    }

    .tsa-forge .btn-secondary::before {
        background: linear-gradient(135deg, rgba(106, 73, 242, .06), rgba(106, 73, 242, .14));
    }

    .tsa-forge .hero-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
    }

    .tsa-forge .hero-tags span,
    .tsa-forge .tag-row span {
        padding: 9px 12px;
        border-radius: 999px;
        background: rgba(106, 73, 242, .08);
        border: 1px solid rgba(106, 73, 242, .12);
        color: var(--tsa-accent);
        font-size: 12.5px;
        line-height: 1.2;
        font-weight: 700;
    }

    /* Common cards */
    .tsa-forge .atlas-shell,
    .tsa-forge .metric,
    .tsa-forge .narrative-card,
    .tsa-forge .mosaic-card,
    .tsa-forge .list-card,
    .tsa-forge .step-card,
    .tsa-forge .compare-card,
    .tsa-forge .cta-shell {
        background: rgba(255, 255, 255, .96);
        border: 1px solid var(--tsa-border);
        box-shadow: var(--tsa-shadow);
        transition: var(--tsa-transition);
    }

    .tsa-forge .atlas-shell:hover,
    .tsa-forge .metric:hover,
    .tsa-forge .narrative-card:hover,
    .tsa-forge .mosaic-card:hover,
    .tsa-forge .list-card:hover,
    .tsa-forge .step-card:hover,
    .tsa-forge .compare-card:hover,
    .tsa-forge .cta-shell:hover {
        transform: translateY(-4px);
        box-shadow: var(--tsa-shadow-hover);
    }

    .tsa-forge .atlas-shell {
        padding: 20px;
        border-radius: var(--tsa-radius-xl);
        background:
            radial-gradient(circle at right top, rgba(223, 218, 243, .54), transparent 28%),
            linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(246, 244, 254, .96));
        position: relative;
        overflow: hidden;
        height: 100%;
    }

    .tsa-forge .atlas-shell::before {
        content: "";
        position: absolute;
        width: 210px;
        height: 210px;
        border-radius: 50%;
        left: -56px;
        bottom: -72px;
        background: rgba(106, 73, 242, .08);
        pointer-events: none;
    }

    .tsa-forge .atlas-media {
        position: relative;
        margin-bottom: 18px;
        border-radius: 24px;
        overflow: hidden;
        min-height: 250px;
        aspect-ratio: 16 / 10.2;
        background: linear-gradient(135deg, rgba(106, 73, 242, .10), rgba(223, 218, 243, .85));
        border: 1px solid rgba(106, 73, 242, .10);
    }

    .tsa-forge .atlas-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .tsa-forge .media-badge {
        position: absolute;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        max-width: calc(100% - 32px);
        padding: 9px 13px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .92);
        border: 1px solid rgba(106, 73, 242, .12);
        color: var(--purple);
        font-size: 11.5px;
        line-height: 1.2;
        box-shadow: 0 12px 30px rgba(50, 35, 111, .12);
        font-weight: 700;
    }

    .tsa-forge .media-badge::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--purple);
        flex: 0 0 auto;
    }

    .tsa-forge .media-badge.top {
        top: 14px;
        left: 14px;
    }

    .tsa-forge .media-badge.bottom {
        right: 14px;
        bottom: 14px;
    }

    .tsa-forge .atlas-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 14px;
        position: relative;
        z-index: 1;
    }

    .tsa-forge .atlas-head strong,
    .tsa-forge .metric strong,
    .tsa-forge .narrative-card strong,
    .tsa-forge .mosaic-card h3,
    .tsa-forge .list-card h3,
    .tsa-forge .step-card h3,
    .tsa-forge .compare-card h3,
    .tsa-forge .signal-card strong,
    .tsa-forge .micro-card strong {
        color: var(--tsa-heading);
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .tsa-forge .atlas-head strong {
        display: block;
        margin-bottom: 6px;
        font-size: 17px;
        line-height: 1.35;
    }

    .tsa-forge .atlas-chip {
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(106, 73, 242, .08);
        border: 1px solid rgba(106, 73, 242, .12);
        color: var(--tsa-accent);
        font-size: 12.5px;
        line-height: 1;
        font-weight: 700;
        white-space: nowrap;
    }

    .tsa-forge .signal-grid {
        display: grid;
        grid-template-columns: 1.08fr .92fr;
        gap: 16px;
        position: relative;
        z-index: 1;
    }

    .tsa-forge .signal-panel,
    .tsa-forge .micro-panel {
        padding: 18px;
        border-radius: 22px;
        background: rgba(255, 255, 255, .92);
        border: 1px solid var(--tsa-border-soft);
        box-shadow: 0 14px 30px rgba(50, 35, 111, .06);
    }

    .tsa-forge .signal-panel h3,
    .tsa-forge .micro-panel h3 {
        margin: 0 0 8px;
        color: var(--tsa-heading);
        font-size: 19px;
        line-height: 1.3;
        font-weight: 700;
    }

    .tsa-forge .score-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 14px;
    }

    .tsa-forge .signal-card,
    .tsa-forge .micro-card {
        padding: 13px;
        border-radius: 16px;
        background: rgba(106, 73, 242, .05);
        border: 1px solid rgba(106, 73, 242, .10);
    }

    .tsa-forge .signal-card strong,
    .tsa-forge .micro-card strong {
        display: block;
        font-size: 14.5px;
        line-height: 1.35;
        margin-bottom: 4px;
    }

    .tsa-forge .signal-card small,
    .tsa-forge .micro-card small {
        display: block;
        color: var(--tsa-text);
        font-size: 12.5px;
        line-height: 1.6;
        font-weight: 500;
    }

    .tsa-forge .signal-meta {
        display: inline-flex;
        margin-top: 10px;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .94);
        border: 1px solid rgba(106, 73, 242, .10);
        color: var(--tsa-accent);
        font-size: 11.5px;
        line-height: 1;
        font-weight: 700;
    }

    .tsa-forge .bar-list,
    .tsa-forge .micro-list,
    .tsa-forge .narrative-points,
    .tsa-forge .list-check,
    .tsa-forge .bullet-list {
        display: grid;
        gap: 10px;
        margin-top: 16px;
    }

    .tsa-forge .bar-row {
        display: grid;
        gap: 7px;
    }

    .tsa-forge .bar-row strong {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        color: var(--tsa-heading);
        font-size: 13.5px;
        line-height: 1.4;
        font-weight: 700;
    }

    .tsa-forge .track {
        height: 10px;
        border-radius: 999px;
        background: rgba(106, 73, 242, .10);
        overflow: hidden;
    }

    .tsa-forge .fill {
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--tsa-accent), #8b71ff);
    }

    .tsa-forge .metrics-grid {
        margin-top: 22px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .tsa-forge .metric {
        padding: 20px;
        border-radius: 22px;
        background:
            radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%),
            rgba(255, 255, 255, .96);
    }

    .tsa-forge .metric strong {
        display: block;
        margin-bottom: 8px;
        font-size: 24px;
        line-height: 1;
    }

    .tsa-forge .story-layout {
        display: grid;
        grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
        gap: 18px;
        align-items: stretch;
    }

    .tsa-forge .narrative-card {
        padding: 28px;
        border-radius: var(--tsa-radius-xl);
        background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(246, 244, 254, .96));
    }

    .tsa-forge .narrative-points div {
        padding: 15px;
        border-radius: 16px;
        background: rgba(106, 73, 242, .05);
        border: 1px solid var(--tsa-border-soft);
    }

    .tsa-forge .narrative-points strong {
        display: block;
        margin-bottom: 5px;
        font-size: 16px;
        line-height: 1.4;
        color: var(--tsa-heading);
        font-weight: 700;
    }

    .tsa-forge .mosaic-grid,
    .tsa-forge .list-grid,
    .tsa-forge .compare-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .tsa-forge .mosaic-card,
    .tsa-forge .list-card,
    .tsa-forge .step-card,
    .tsa-forge .compare-card {
        position: relative;
        overflow: hidden;
    }

    .tsa-forge .mosaic-card {
        padding: 22px;
        border-radius: var(--tsa-radius-lg);
    }

    .tsa-forge .mosaic-card::before,
    .tsa-forge .step-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(106, 73, 242, .04), transparent 52%, rgba(106, 73, 242, .06));
        pointer-events: none;
    }

    .tsa-forge .icon-card,
    .tsa-forge .step-number {
        width: 52px;
        height: 52px;
        border-radius: 17px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, rgba(106, 73, 242, .14), rgba(223, 218, 243, .96));
        color: var(--tsa-accent);
        font-size: 20px;
        line-height: 1;
        font-weight: 700;
        margin-bottom: 15px;
        position: relative;
        z-index: 1;
        flex: 0 0 auto;
    }

    .tsa-forge .mosaic-card h3,
    .tsa-forge .mosaic-card p,
    .tsa-forge .mosaic-card .tag-row,
    .tsa-forge .step-card h3,
    .tsa-forge .step-card p,
    .tsa-forge .step-number {
        position: relative;
        z-index: 1;
    }

    .tsa-forge .mosaic-card h3,
    .tsa-forge .list-card h3,
    .tsa-forge .step-card h3,
    .tsa-forge .compare-card h3 {
        margin: 0 0 8px;
        font-size: 20px;
        line-height: 1.34;
        font-weight: 700;
    }

    .tsa-forge .tag-row {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        margin-top: 15px;
    }

    .tsa-forge .list-card {
        padding: 22px;
        border-radius: 26px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 244, 255, .96));
    }

    .tsa-forge .list-check div,
    .tsa-forge .bullet-list div {
        position: relative;
        padding-left: 24px;
        color: var(--tsa-text);
        font-size: 14.5px;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

    .tsa-forge .list-check div::before,
    .tsa-forge .bullet-list div::before {
        content: "";
        position: absolute;
        left: 0;
        top: .68em;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--tsa-accent);
        box-shadow: 0 0 0 5px rgba(106, 73, 242, .10);
    }

    .tsa-forge .steps-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .tsa-forge .step-card {
        padding: 22px;
        border-radius: 26px;
    }

    .tsa-forge .compare-card {
        padding: 24px;
        border-radius: 28px;
    }

    .tsa-forge .compare-card.bad {
        background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(249, 246, 255, .96));
    }

    .tsa-forge .compare-card.good {
        background: linear-gradient(180deg, rgba(106, 73, 242, .08), rgba(255, 255, 255, .98));
        border-color: rgba(106, 73, 242, .18);
    }

    .tsa-forge .compare-top {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 16px;
    }

    .tsa-forge .compare-icon {
        width: 50px;
        height: 50px;
        border-radius: 17px;
        display: grid;
        place-items: center;
        font-size: 22px;
        line-height: 1;
        font-weight: 700;
        flex: 0 0 auto;
    }

    .tsa-forge .bad .compare-icon {
        background: rgba(50, 35, 111, .08);
        color: var(--tsa-heading);
    }

    .tsa-forge .good .compare-icon {
        background: rgba(106, 73, 242, .14);
        color: var(--tsa-accent);
    }

    .tsa-forge .cta-shell {
        padding: 30px;
        border-radius: 30px;
        background:
            radial-gradient(circle at right top, rgba(223, 218, 243, .56), transparent 26%),
            linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(246, 244, 254, .98));
        position: relative;
        overflow: hidden;
    }

    .tsa-forge .cta-shell::before,
    .tsa-forge .cta-shell::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: rgba(106, 73, 242, .08);
    }

    .tsa-forge .cta-shell::before {
        width: 170px;
        height: 170px;
        right: -38px;
        bottom: -48px;
    }

    .tsa-forge .cta-shell::after {
        width: 118px;
        height: 118px;
        left: -34px;
        top: -34px;
    }

    .tsa-forge .cta-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 20px;
        align-items: center;
    }

    .tsa-forge .cta-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        justify-content: flex-end;
    }

    .tsa-forge [data-empty="true"] {
        display: none !important;
    }

    .tsa-forge .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .8s ease, transform .8s ease;
    }

    .tsa-forge .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Responsive */
    @media (max-width: 1180px) {
        .tsa-forge {
            --tsa-container: 980px;
            --tsa-page-pad: 34px;
            --tsa-space: 58px;
            padding-top: 82px;
        }

        .tsa-forge .hero-grid,
        .tsa-forge .story-layout,
        .tsa-forge .cta-grid {
            grid-template-columns: 1fr;
        }

        .tsa-forge .hero-copy {
            order: 1;
        }

        .tsa-forge .atlas-shell {
            order: 2;
        }

        .tsa-forge .cta-actions {
            justify-content: flex-start;
        }

        .tsa-forge .header-nav {
            display: none;
        }

        .tsa-forge .metrics-grid,
        .tsa-forge .steps-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 991px) {
        .tsa-forge {
            --tsa-space: 54px;
            --tsa-page-pad: 30px;
            padding-top: 78px;
        }

        .tsa-forge .header-row {
            min-height: 66px;
        }

        .tsa-forge .signal-grid,
        .tsa-forge .mosaic-grid,
        .tsa-forge .list-grid,
        .tsa-forge .compare-grid {
            grid-template-columns: 1fr;
        }

        .tsa-forge .score-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .tsa-forge .atlas-media {
            min-height: 240px;
        }
    }

    @media (max-width: 767px) {
        .tsa-forge {
            --tsa-space: 46px;
            --tsa-page-pad: 24px;
            padding-top: 70px;
        }

        .tsa-forge .container {
            width: min(var(--tsa-container), calc(100% - var(--tsa-page-pad)));
        }

        .tsa-forge .section {
            padding-block: var(--tsa-space);
        }

        .tsa-forge .hero {
            padding: 16px 0 34px;
        }

        .tsa-forge .hero-copy h1 {
            font-size: clamp(30px, 9.2vw, 42px);
            line-height: 1.1;
            margin: 16px 0 12px;
        }

        .tsa-forge .section-head {
            margin-bottom: 22px;
        }

        .tsa-forge .section-head h2,
        .tsa-forge .narrative-card h2,
        .tsa-forge .cta-copy h2 {
            font-size: clamp(24px, 7.4vw, 34px);
            line-height: 1.16;
        }

        .tsa-forge .hero-copy p,
        .tsa-forge .section-head p,
        .tsa-forge .atlas-head p,
        .tsa-forge .metric p,
        .tsa-forge .narrative-card p,
        .tsa-forge .mosaic-card p,
        .tsa-forge .list-card p,
        .tsa-forge .step-card p,
        .tsa-forge .compare-card p,
        .tsa-forge .cta-copy p {
            font-size: 14px;
            line-height: 1.65;
        }

        .tsa-forge .eyebrow {
            padding: 8px 12px;
            gap: 8px;
            font-size: 9.5px;
            letter-spacing: .075em;
        }

        .tsa-forge .eyebrow::before {
            width: 7px;
            height: 7px;
        }

        .tsa-forge .hero-actions,
        .tsa-forge .cta-actions {
            flex-direction: column;
            gap: 11px;
        }

        .tsa-forge .btn,
        .tsa-forge .header-cta {
            width: 100%;
            min-width: 0;
            min-height: 50px;
            padding: 13px 16px;
            border-radius: 14px;
            font-size: 14px;
        }

        .tsa-forge .header-row {
            flex-wrap: wrap;
            gap: 10px;
            padding: 10px 0;
        }

        .tsa-forge .brand-mark {
            font-size: 15px;
        }

        .tsa-forge .brand-icon {
            width: 38px;
            height: 38px;
            border-radius: 13px;
        }

        .tsa-forge .signal-grid,
        .tsa-forge .metrics-grid,
        .tsa-forge .mosaic-grid,
        .tsa-forge .list-grid,
        .tsa-forge .steps-grid,
        .tsa-forge .score-grid,
        .tsa-forge .compare-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .tsa-forge .atlas-shell,
        .tsa-forge .metric,
        .tsa-forge .narrative-card,
        .tsa-forge .mosaic-card,
        .tsa-forge .list-card,
        .tsa-forge .step-card,
        .tsa-forge .compare-card,
        .tsa-forge .cta-shell,
        .tsa-forge .signal-panel,
        .tsa-forge .micro-panel {
            border-radius: 20px;
        }

        .tsa-forge .atlas-shell,
        .tsa-forge .narrative-card,
        .tsa-forge .mosaic-card,
        .tsa-forge .list-card,
        .tsa-forge .step-card,
        .tsa-forge .compare-card,
        .tsa-forge .cta-shell {
            padding: 16px;
        }

        .tsa-forge .signal-panel,
        .tsa-forge .micro-panel {
            padding: 14px;
        }

        .tsa-forge .atlas-media {
            min-height: 190px;
            border-radius: 18px;
        }

        .tsa-forge .media-badge {
            font-size: 10px;
            padding: 8px 10px;
        }

        .tsa-forge .media-badge.top {
            top: 10px;
            left: 10px;
        }

        .tsa-forge .media-badge.bottom {
            right: 10px;
            bottom: 10px;
        }

        .tsa-forge .atlas-head {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .tsa-forge .atlas-chip {
            width: fit-content;
        }

        .tsa-forge .metric {
            display: grid;
            grid-template-columns: 88px minmax(0, 1fr);
            gap: 10px;
            align-items: center;
        }

        .tsa-forge .metric strong {
            margin: 0;
            font-size: 21px;
        }

        .tsa-forge .mosaic-card {
            display: grid;
            grid-template-columns: 48px minmax(0, 1fr);
            column-gap: 12px;
            align-items: center;
        }

        .tsa-forge .icon-card,
        .tsa-forge .step-number {
            width: 46px;
            height: 46px;
            border-radius: 15px;
            font-size: 16px;
            margin: 0;
        }

        .tsa-forge .mosaic-card h3 {
            margin: 0;
            font-size: 17px;
            line-height: 1.32;
        }

        .tsa-forge .mosaic-card p,
        .tsa-forge .mosaic-card .tag-row {
            grid-column: 1 / -1;
        }

        .tsa-forge .mosaic-card p {
            margin-top: 12px;
        }

        .tsa-forge .step-card {
            display: grid;
            grid-template-columns: 48px minmax(0, 1fr);
            column-gap: 12px;
            align-items: center;
        }

        .tsa-forge .step-card h3 {
            margin: 0;
            font-size: 17px;
            line-height: 1.32;
        }

        .tsa-forge .step-card p {
            grid-column: 1 / -1;
            margin-top: 12px;
        }

        .tsa-forge .list-card h3,
        .tsa-forge .compare-card h3 {
            font-size: 18px;
        }

        .tsa-forge .list-check div,
        .tsa-forge .bullet-list div {
            font-size: 13.5px;
            line-height: 1.62;
            padding-left: 22px;
        }

        .tsa-forge .compare-top {
            display: grid;
            grid-template-columns: 46px minmax(0, 1fr);
            gap: 12px;
            margin-bottom: 14px;
        }

        .tsa-forge .compare-icon {
            width: 46px;
            height: 46px;
            border-radius: 15px;
            font-size: 18px;
        }

        .tsa-forge .cta-grid {
            gap: 16px;
        }

        .tsa-forge .tag-row,
        .tsa-forge .hero-tags {
            gap: 8px;
        }

        .tsa-forge .hero-tags span,
        .tsa-forge .tag-row span {
            font-size: 11.5px;
            padding: 8px 10px;
        }
    }

    @media (max-width: 430px) {
        .tsa-forge {
            --tsa-page-pad: 22px;
            --tsa-space: 42px;
            padding-top: 66px;
        }

        .tsa-forge .hero {
            padding-top: 12px;
            padding-bottom: 30px;
        }

        .tsa-forge .hero-copy h1 {
            font-size: clamp(27px, 8.8vw, 36px);
        }

        .tsa-forge .section-head h2,
        .tsa-forge .narrative-card h2,
        .tsa-forge .cta-copy h2 {
            font-size: clamp(22px, 7vw, 30px);
        }

        .tsa-forge .atlas-shell,
        .tsa-forge .narrative-card,
        .tsa-forge .mosaic-card,
        .tsa-forge .list-card,
        .tsa-forge .step-card,
        .tsa-forge .compare-card,
        .tsa-forge .cta-shell {
            padding: 14px;
            border-radius: 18px;
        }

        .tsa-forge .metric {
            grid-template-columns: 78px minmax(0, 1fr);
            padding: 14px;
            border-radius: 18px;
        }

        .tsa-forge .mosaic-card,
        .tsa-forge .step-card {
            grid-template-columns: 44px minmax(0, 1fr);
            column-gap: 11px;
        }

        .tsa-forge .icon-card,
        .tsa-forge .step-number,
        .tsa-forge .compare-icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
        }

        .tsa-forge .compare-top {
            grid-template-columns: 42px minmax(0, 1fr);
        }

        .tsa-forge .atlas-media {
            min-height: 170px;
        }
    }

    @media (max-width: 360px) {
        .tsa-forge {
            --tsa-page-pad: 18px;
        }

        .tsa-forge .hero-copy h1 {
            font-size: 25px;
        }

        .tsa-forge .eyebrow {
            font-size: 8.5px;
            letter-spacing: .055em;
            padding: 7px 10px;
        }

        .tsa-forge .atlas-shell,
        .tsa-forge .narrative-card,
        .tsa-forge .mosaic-card,
        .tsa-forge .list-card,
        .tsa-forge .step-card,
        .tsa-forge .compare-card,
        .tsa-forge .cta-shell,
        .tsa-forge .metric {
            padding: 13px;
        }
    }

    @media (hover: none) {
        .tsa-forge .atlas-shell:hover,
        .tsa-forge .metric:hover,
        .tsa-forge .narrative-card:hover,
        .tsa-forge .mosaic-card:hover,
        .tsa-forge .list-card:hover,
        .tsa-forge .step-card:hover,
        .tsa-forge .compare-card:hover,
        .tsa-forge .cta-shell:hover,
        .tsa-forge .btn:hover {
            transform: none;
        }
    }

    /* =====================================================
       FINAL MOBILE METRICS FIX
       Fixes broken words like Strong-er / Cleane-r on mobile
    ===================================================== */

    @media (max-width: 767px) {
        .tsa-forge .metrics-grid {
            gap: 14px;
        }

        .tsa-forge .metric {
            display: grid;
            grid-template-columns: 1fr;
            gap: 9px;
            align-items: start;
            text-align: left;
            padding: 18px;
            border-radius: 20px;
            background:
                radial-gradient(circle at 100% 0, rgba(106, 73, 242, .10), transparent 36%),
                rgba(255, 255, 255, .96);
        }

        .tsa-forge .metric strong {
            display: inline-flex;
            width: fit-content;
            max-width: 100%;
            margin: 0;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(106, 73, 242, .09);
            color: var(--tsa-heading);
            font-size: 18px;
            line-height: 1.2;
            font-weight: 700;
            word-break: normal;
            overflow-wrap: normal;
            white-space: nowrap;
        }

        .tsa-forge .metric p {
            margin: 0;
            max-width: 100%;
            color: rgba(62, 63, 102, .82);
            font-size: 14px;
            line-height: 1.62;
            text-align: left;
        }
    }

    @media (max-width: 430px) {
        .tsa-forge .metric {
            grid-template-columns: 1fr;
            padding: 16px;
            border-radius: 18px;
        }

        .tsa-forge .metric strong {
            font-size: 17px;
            padding: 8px 13px;
        }

        .tsa-forge .metric p {
            font-size: 13.5px;
            line-height: 1.58;
        }
    }

    @media (max-width: 360px) {
        .tsa-forge .metric {
            padding: 14px;
        }

        .tsa-forge .metric strong {
            white-space: normal;
            font-size: 16px;
        }
    }

/*===================================================================================
    8. Technical Skill Assessments Page CSS End
===================================================================================*/


/*===================================================================================
    9. Cognitive Ability Testing Platform CSS Start
===================================================================================*/

:root {
        --light-purple: #F6F4FE;
        --purple: #6A49F2;
        --bg-purple: #6A49F2;
        --dark-purple: #32236F;
        --body-text-purple: #3E3F66;
        --text-white: #ffffff;
        --bg-white: #ffffff;
        --slider-dots-color: #D4D2DD;
        --light-bg: #DFDAF3;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        min-width: 320px;
        overflow-x: hidden;
        background:
            radial-gradient(circle at 6% 3%, rgba(106, 73, 242, 0.12), transparent 25%),
            radial-gradient(circle at 96% 8%, rgba(223, 218, 243, 0.92), transparent 28%),
            radial-gradient(circle at 6% 88%, rgba(106, 73, 242, 0.07), transparent 28%),
            linear-gradient(180deg, #ffffff 0%, #fcfbff 42%, #f7f3ff 100%);
    }

    .catp-editorial,
    .catp-editorial * {
        box-sizing: border-box;
    }

    .catp-editorial {
        --cp-container: 1160px;
        --cp-page-gap: 44px;
        --cp-space: clamp(44px, 4.8vw, 68px);
        --cp-heading: var(--dark-purple);
        --cp-text: var(--body-text-purple);
        --cp-accent: var(--purple);
        --cp-border: rgba(106, 73, 242, 0.14);
        --cp-border-soft: rgba(106, 73, 242, 0.10);
        --cp-soft: rgba(106, 73, 242, 0.08);
        --cp-surface: rgba(255, 255, 255, 0.96);
        --cp-shadow: 0 16px 42px rgba(50, 35, 111, 0.085);
        --cp-shadow-hover: 0 22px 56px rgba(50, 35, 111, 0.13);
        --cp-radius-xl: 32px;
        --cp-radius-lg: 26px;
        --cp-radius-md: 20px;
        --cp-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
        position: relative;
        isolation: isolate;
        overflow-x: hidden;
        min-width: 320px;
        padding-top: clamp(72px, 6vw, 96px);
        color: var(--cp-text);
        font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    .catp-editorial::before,
    .catp-editorial::after {
        content: "";
        position: fixed;
        border-radius: 50%;
        filter: blur(92px);
        pointer-events: none;
        z-index: -1;
        opacity: .72;
    }

    .catp-editorial::before {
        width: 300px;
        height: 300px;
        left: -110px;
        top: 80px;
        background: rgba(106, 73, 242, 0.12);
    }

    .catp-editorial::after {
        width: 340px;
        height: 340px;
        right: -120px;
        top: 320px;
        background: rgba(223, 218, 243, 0.9);
    }

    .catp-editorial a {
        color: inherit;
        text-decoration: none;
    }

    .catp-editorial img,
    .catp-editorial svg {
        max-width: 100%;
        display: block;
    }

    .catp-editorial .container {
        width: min(var(--cp-container), calc(100% - var(--cp-page-gap)));
        margin-inline: auto;
    }

    .catp-editorial .section {
        padding-block: var(--cp-space);
        position: relative;
    }

    .catp-editorial .section.soft {
        background:
            radial-gradient(circle at 0 0, rgba(106, 73, 242, .045), transparent 24%),
            linear-gradient(180deg, rgba(246, 244, 254, 0.62), rgba(255, 255, 255, 0));
    }

    .catp-editorial .eyebrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        max-width: 100%;
        padding: 10px 15px;
        border-radius: 999px;
        background: rgba(106, 73, 242, 0.08);
        border: 1px solid rgba(106, 73, 242, 0.14);
        color: var(--cp-accent);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: .085em;
        text-transform: uppercase;
        overflow-wrap: anywhere;
        box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    }

    .catp-editorial .eyebrow::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--cp-accent), #15bdf6);
        box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
        flex: 0 0 auto;
    }

    .catp-editorial .section-head {
        max-width: 800px;
        margin-bottom: clamp(24px, 2.6vw, 32px);
    }

    .catp-editorial .section-head h2,
    .catp-editorial .narrative h2,
    .catp-editorial .cta-copy h2 {
        margin: 16px 0 12px;
        color: var(--cp-heading);
        font-size: clamp(30px, 3.55vw, 46px);
        line-height: 1.12;
        letter-spacing: -0.036em;
        font-weight: 700;
        text-wrap: balance;
    }

    .catp-editorial .section-head p,
    .catp-editorial .hero-copy p,
    .catp-editorial .metric p,
    .catp-editorial .narrative p,
    .catp-editorial .editor-card p,
    .catp-editorial .grid-card p,
    .catp-editorial .compare-card p,
    .catp-editorial .cta-copy p,
    .catp-editorial .hero-insight p,
    .catp-editorial .hero-stat-card span,
    .catp-editorial .hero-note-card p {
        margin: 0;
        color: rgba(62, 63, 102, .82);
        font-size: 15.5px;
        line-height: 1.72;
        font-weight: 400;
        overflow-wrap: anywhere;
    }

    /* Hero */
    .catp-editorial .hero {
        padding: clamp(20px, 2.8vw, 34px) 0 clamp(42px, 4.8vw, 62px);
        position: relative;
    }

    .catp-editorial .hero-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(420px, 540px);
        gap: 28px;
        align-items: center;
    }

    .catp-editorial .hero-copy {
        max-width: 680px;
    }

    .catp-editorial .hero-copy h1 {
        margin: 18px 0 14px;
        color: var(--cp-heading);
        font-size: clamp(38px, 5.15vw, 60px);
        line-height: 1.07;
        letter-spacing: -0.045em;
        font-weight: 700;
        max-width: 720px;
        text-wrap: balance;
    }

    .catp-editorial .hero-copy h1 span {
        color: var(--cp-accent);
        display: inline;
    }

    .catp-editorial .hero-copy p {
        max-width: 630px;
        font-size: 15.8px;
        margin-bottom: 24px;
    }

    .catp-editorial .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 20px;
    }

    .catp-editorial .btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-width: 176px;
        min-height: 52px;
        padding: 14px 22px;
        border-radius: 15px;
        border: 1px solid transparent;
        overflow: hidden;
        isolation: isolate;
        transition: var(--cp-transition);
        font-size: 14.5px;
        line-height: 1.2;
        font-weight: 700;
        text-align: center;
    }

    .catp-editorial .btn::before {
        content: "";
        position: absolute;
        inset: 0;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .35s ease;
        border-radius: inherit;
        z-index: -1;
    }

    .catp-editorial .btn:hover {
        transform: translateY(-3px);
    }

    .catp-editorial .btn:hover::before {
        transform: scaleX(1);
    }

    .catp-editorial .btn-primary {
        background: linear-gradient(135deg, var(--cp-accent), #7e5ef6);
        color: var(--text-white);
        box-shadow: 0 18px 36px rgba(106, 73, 242, 0.22);
    }

    .catp-editorial .btn-primary::before {
        background: linear-gradient(135deg, var(--cp-heading), var(--cp-accent));
    }

    .catp-editorial .btn-secondary {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(106, 73, 242, 0.16);
        color: var(--cp-accent);
        box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    }

    .catp-editorial .btn-secondary::before {
        background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
    }

    .catp-editorial .hero-tags,
    .catp-editorial .tag-row {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
    }

    .catp-editorial .hero-tags span,
    .catp-editorial .tag-row span {
        padding: 9px 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(106, 73, 242, 0.12);
        color: var(--cp-accent);
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.2;
        box-shadow: 0 10px 22px rgba(50, 35, 111, 0.05);
    }

    /* Card system */
    .catp-editorial .hero-card,
    .catp-editorial .metric,
    .catp-editorial .narrative,
    .catp-editorial .editor-card,
    .catp-editorial .grid-card,
    .catp-editorial .compare-card,
    .catp-editorial .cta-shell {
        background: var(--cp-surface);
        border: 1px solid var(--cp-border);
        box-shadow: var(--cp-shadow);
        transition: var(--cp-transition);
    }

    .catp-editorial .hero-card:hover,
    .catp-editorial .metric:hover,
    .catp-editorial .narrative:hover,
    .catp-editorial .editor-card:hover,
    .catp-editorial .grid-card:hover,
    .catp-editorial .compare-card:hover,
    .catp-editorial .cta-shell:hover {
        transform: translateY(-4px);
        box-shadow: var(--cp-shadow-hover);
        border-color: rgba(106, 73, 242, 0.20);
    }

    .catp-editorial .hero-banner {
        position: relative;
        min-width: 0;
    }

    .catp-editorial .hero-card {
        position: relative;
        padding: 18px;
        border-radius: var(--cp-radius-xl);
        overflow: hidden;
        background:
            radial-gradient(circle at 12% 12%, rgba(106, 73, 242, 0.10), transparent 26%),
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 244, 254, 0.96));
    }

    .catp-editorial .hero-card::before {
        content: "";
        position: absolute;
        right: -50px;
        top: -50px;
        width: 170px;
        height: 170px;
        border-radius: 50%;
        background: rgba(106, 73, 242, 0.08);
        pointer-events: none;
    }

    .catp-editorial .hero-visual {
        position: relative;
        min-height: 370px;
        border-radius: 26px;
        overflow: hidden;
        background: linear-gradient(135deg, #33246f, #6A49F2);
    }

    .catp-editorial .hero-visual img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
    }

    .catp-editorial .hero-visual::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(180deg, rgba(50, 35, 111, .05) 0%, rgba(50, 35, 111, .28) 44%, rgba(50, 35, 111, .88) 100%);
    }

    .catp-editorial .hero-chip {
        position: absolute;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        max-width: calc(100% - 36px);
        padding: 9px 13px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .16);
        border: 1px solid rgba(255, 255, 255, .18);
        color: #ffffff;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        font-size: 11px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: .055em;
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }

    .catp-editorial .hero-chip::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 0 0 5px rgba(255, 255, 255, .10);
        flex: 0 0 auto;
    }

    .catp-editorial .hero-chip.top-left {
        top: 18px;
        left: 18px;
    }

    .catp-editorial .hero-chip.top-right {
        top: 18px;
        right: 18px;
    }

    .catp-editorial .hero-insight {
        position: absolute;
        z-index: 2;
        left: 18px;
        right: 18px;
        bottom: 18px;
        padding: 18px;
        border-radius: 22px;
        background: rgba(255, 255, 255, .14);
        border: 1px solid rgba(255, 255, 255, .18);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .catp-editorial .hero-insight-label {
        display: inline-block;
        margin-bottom: 8px;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .14);
        color: rgba(255, 255, 255, .94);
        font-size: 10.5px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: .055em;
        text-transform: uppercase;
    }

    .catp-editorial .hero-insight strong {
        display: block;
        color: #ffffff;
        font-size: 30px;
        line-height: 1;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .catp-editorial .hero-insight p {
        color: rgba(255, 255, 255, .84);
        font-size: 13.5px;
        line-height: 1.66;
    }

    .catp-editorial .hero-stats,
    .catp-editorial .hero-note-grid {
        display: grid;
        gap: 12px;
        margin-top: 14px;
    }

    .catp-editorial .hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .catp-editorial .hero-note-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catp-editorial .hero-stat-card,
    .catp-editorial .hero-note-card {
        padding: 15px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(106, 73, 242, 0.12);
        box-shadow: 0 10px 22px rgba(50, 35, 111, 0.05);
    }

    .catp-editorial .hero-stat-card strong {
        display: block;
        color: var(--cp-heading);
        font-size: 22px;
        line-height: 1;
        font-weight: 700;
        margin-bottom: 6px;
    }

    .catp-editorial .hero-stat-card span,
    .catp-editorial .hero-note-card p {
        display: block;
        color: rgba(62, 63, 102, .82);
        font-size: 12.5px;
        line-height: 1.55;
        font-weight: 500;
    }

    .catp-editorial .hero-note-card strong {
        display: block;
        color: var(--cp-heading);
        font-size: 14.5px;
        line-height: 1.35;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .catp-editorial .hero-metrics,
    .catp-editorial .editor-grid,
    .catp-editorial .grid-4,
    .catp-editorial .compare-grid {
        display: grid;
        gap: 16px;
    }

    .catp-editorial .hero-metrics {
        margin-top: 22px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .catp-editorial .metric {
        padding: 20px 18px;
        border-radius: 22px;
        background:
            radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 32%),
            rgba(255, 255, 255, .96);
    }

    .catp-editorial .metric strong {
        display: block;
        margin-bottom: 8px;
        color: var(--cp-heading);
        font-size: 24px;
        line-height: 1;
        font-weight: 700;
    }

    .catp-editorial .metric p {
        font-size: 14.5px;
        line-height: 1.68;
    }

    /* Content blocks */
    .catp-editorial .narrative-layout {
        display: grid;
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
        gap: 18px;
        align-items: stretch;
    }

    .catp-editorial .narrative {
        padding: 28px;
        border-radius: var(--cp-radius-xl);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 244, 254, 0.96));
    }

    .catp-editorial .narrative-points {
        display: grid;
        gap: 12px;
        margin-top: 20px;
    }

    .catp-editorial .narrative-points div {
        padding: 15px;
        border-radius: 16px;
        background: rgba(106, 73, 242, 0.05);
        border: 1px solid rgba(106, 73, 242, 0.10);
    }

    .catp-editorial .narrative-points strong {
        display: block;
        margin-bottom: 0;
        color: var(--cp-heading);
        font-size: 16px;
        line-height: 1.38;
        font-weight: 700;
    }

    .catp-editorial .editor-grid,
    .catp-editorial .compare-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catp-editorial .grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .catp-editorial .editor-card,
    .catp-editorial .grid-card,
    .catp-editorial .compare-card {
        position: relative;
        overflow: hidden;
    }

    .catp-editorial .editor-card,
    .catp-editorial .grid-card {
        padding: 22px;
        border-radius: var(--cp-radius-lg);
    }

    .catp-editorial .editor-card::before,
    .catp-editorial .grid-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(106, 73, 242, 0.04), transparent 50%, rgba(106, 73, 242, 0.06));
        pointer-events: none;
    }

    .catp-editorial .icon-card,
    .catp-editorial .step-no {
        width: 52px;
        height: 52px;
        border-radius: 17px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, rgba(106, 73, 242, 0.14), rgba(223, 218, 243, 0.96));
        color: var(--cp-accent);
        font-size: 19px;
        line-height: 1;
        font-weight: 700;
        margin-bottom: 15px;
        position: relative;
        z-index: 1;
    }

    .catp-editorial .editor-card h3,
    .catp-editorial .grid-card h3,
    .catp-editorial .compare-card h3 {
        margin: 0 0 8px;
        color: var(--cp-heading);
        font-size: 19px;
        line-height: 1.34;
        font-weight: 700;
        position: relative;
        z-index: 1;
        overflow-wrap: anywhere;
    }

    .catp-editorial .editor-card p,
    .catp-editorial .grid-card p {
        position: relative;
        z-index: 1;
    }

    .catp-editorial .tag-row {
        margin-top: 15px;
        position: relative;
        z-index: 1;
    }

    /* Compare */
    .catp-editorial .compare-card {
        padding: 24px;
        border-radius: 28px;
    }

    .catp-editorial .compare-card.bad {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 246, 255, 0.96));
    }

    .catp-editorial .compare-card.good {
        background: linear-gradient(180deg, rgba(106, 73, 242, 0.08), rgba(255, 255, 255, 0.98));
        border-color: rgba(106, 73, 242, 0.18);
    }

    .catp-editorial .compare-top {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 16px;
    }

    .catp-editorial .compare-icon {
        width: 50px;
        height: 50px;
        border-radius: 17px;
        display: grid;
        place-items: center;
        font-size: 22px;
        line-height: 1;
        font-weight: 700;
        flex: 0 0 auto;
    }

    .catp-editorial .bad .compare-icon {
        background: rgba(50, 35, 111, 0.08);
        color: var(--cp-heading);
    }

    .catp-editorial .good .compare-icon {
        background: rgba(106, 73, 242, 0.14);
        color: var(--cp-accent);
    }

    .catp-editorial .bullet-list {
        display: grid;
        gap: 10px;
        margin-top: 16px;
    }

    .catp-editorial .bullet-list div {
        position: relative;
        padding-left: 24px;
        color: rgba(62, 63, 102, .84);
        font-size: 14.5px;
        line-height: 1.68;
        overflow-wrap: anywhere;
    }

    .catp-editorial .bullet-list div::before {
        content: "";
        position: absolute;
        left: 0;
        top: .68em;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--cp-accent);
        box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    }

    /* CTA */
    .catp-editorial .cta-shell {
        padding: 30px;
        border-radius: 30px;
        background:
            radial-gradient(circle at left bottom, rgba(223, 218, 243, 0.56), transparent 28%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 244, 254, 0.96));
        position: relative;
        overflow: hidden;
    }

    .catp-editorial .cta-shell::before,
    .catp-editorial .cta-shell::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: rgba(106, 73, 242, 0.08);
    }

    .catp-editorial .cta-shell::before {
        width: 170px;
        height: 170px;
        right: -38px;
        bottom: -48px;
    }

    .catp-editorial .cta-shell::after {
        width: 118px;
        height: 118px;
        left: -34px;
        top: -34px;
    }

    .catp-editorial .cta-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 20px;
        align-items: center;
    }

    .catp-editorial .cta-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        justify-content: flex-end;
    }

    .catp-editorial .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .8s ease, transform .8s ease;
    }

    .catp-editorial .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Responsive */
    @media (max-width: 1180px) {
        .catp-editorial {
            --cp-container: 980px;
            --cp-page-gap: 34px;
            --cp-space: 58px;
            padding-top: 82px;
        }

        .catp-editorial .hero-shell,
        .catp-editorial .narrative-layout,
        .catp-editorial .cta-grid {
            grid-template-columns: 1fr;
        }

        .catp-editorial .hero-copy {
            max-width: 880px;
        }

        .catp-editorial .hero-metrics,
        .catp-editorial .grid-4 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .catp-editorial .cta-actions {
            justify-content: flex-start;
        }
    }

    @media (max-width: 991px) {
        .catp-editorial {
            --cp-space: 54px;
            --cp-page-gap: 30px;
            padding-top: 78px;
        }

        .catp-editorial .hero-shell {
            gap: 24px;
        }

        .catp-editorial .hero-visual {
            min-height: 330px;
        }

        .catp-editorial .editor-grid,
        .catp-editorial .compare-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 767px) {
        .catp-editorial {
            --cp-space: 46px;
            --cp-page-gap: 24px;
            padding-top: 64px;
        }

        .catp-editorial .container {
            width: min(var(--cp-container), calc(100% - var(--cp-page-gap)));
        }

        .catp-editorial .section {
            padding-block: var(--cp-space);
        }

        .catp-editorial .hero {
            padding: 14px 0 34px;
        }

        .catp-editorial .section-head {
            margin-bottom: 22px;
        }

        .catp-editorial .hero-copy h1 {
            font-size: clamp(30px, 9.2vw, 42px);
            line-height: 1.1;
            margin: 16px 0 12px;
        }

        .catp-editorial .section-head h2,
        .catp-editorial .narrative h2,
        .catp-editorial .cta-copy h2 {
            font-size: clamp(24px, 7.4vw, 34px);
            line-height: 1.16;
        }

        .catp-editorial .hero-copy p,
        .catp-editorial .section-head p,
        .catp-editorial .metric p,
        .catp-editorial .narrative p,
        .catp-editorial .editor-card p,
        .catp-editorial .grid-card p,
        .catp-editorial .compare-card p,
        .catp-editorial .cta-copy p,
        .catp-editorial .hero-insight p,
        .catp-editorial .hero-stat-card span,
        .catp-editorial .hero-note-card p {
            font-size: 14px;
            line-height: 1.62;
        }

        .catp-editorial .eyebrow {
            padding: 8px 12px;
            gap: 8px;
            font-size: 9.5px;
            letter-spacing: .075em;
        }

        .catp-editorial .eyebrow::before {
            width: 7px;
            height: 7px;
        }

        .catp-editorial .hero-actions,
        .catp-editorial .cta-actions {
            flex-direction: column;
            gap: 11px;
        }

        .catp-editorial .btn {
            width: 100%;
            min-width: 0;
            min-height: 50px;
            padding: 13px 16px;
            border-radius: 14px;
            font-size: 14px;
        }

        .catp-editorial .hero-card,
        .catp-editorial .metric,
        .catp-editorial .narrative,
        .catp-editorial .editor-card,
        .catp-editorial .grid-card,
        .catp-editorial .compare-card,
        .catp-editorial .cta-shell {
            padding: 16px;
            border-radius: 20px;
        }

        .catp-editorial .hero-visual {
            min-height: 290px;
            border-radius: 18px;
        }

        .catp-editorial .hero-chip {
            font-size: 9.8px;
            padding: 8px 10px;
        }

        .catp-editorial .hero-chip.top-left {
            top: 10px;
            left: 10px;
        }

        .catp-editorial .hero-chip.top-right {
            top: 48px;
            right: auto;
            left: 10px;
        }

        .catp-editorial .hero-insight {
            left: 12px;
            right: 12px;
            bottom: 12px;
            padding: 14px;
            border-radius: 18px;
        }

        .catp-editorial .hero-insight strong {
            font-size: 26px;
        }

        .catp-editorial .hero-insight-label {
            font-size: 9.8px;
            padding: 6px 9px;
        }

        .catp-editorial .hero-stats,
        .catp-editorial .hero-note-grid,
        .catp-editorial .hero-metrics,
        .catp-editorial .editor-grid,
        .catp-editorial .grid-4,
        .catp-editorial .compare-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .catp-editorial .hero-stat-card,
        .catp-editorial .hero-note-card {
            padding: 14px;
            border-radius: 18px;
        }

        .catp-editorial .metric {
            display: grid;
            grid-template-columns: 1fr;
            gap: 9px;
            text-align: left;
            background:
                radial-gradient(circle at 100% 0, rgba(106, 73, 242, .10), transparent 36%),
                rgba(255, 255, 255, .96);
        }

        .catp-editorial .metric strong {
            display: inline-flex;
            width: fit-content;
            max-width: 100%;
            margin: 0;
            padding: 8px 13px;
            border-radius: 999px;
            background: rgba(106, 73, 242, .09);
            color: var(--cp-heading);
            font-size: 17px;
            line-height: 1.2;
            white-space: nowrap;
            word-break: normal;
            overflow-wrap: normal;
        }

        .catp-editorial .metric p {
            margin: 0;
            text-align: left;
        }

        .catp-editorial .editor-card,
        .catp-editorial .grid-card {
            display: grid;
            grid-template-columns: 46px minmax(0, 1fr);
            column-gap: 12px;
            align-items: center;
            text-align: left;
        }

        .catp-editorial .icon-card,
        .catp-editorial .step-no {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            margin: 0;
            font-size: 15px;
        }

        .catp-editorial .editor-card h3,
        .catp-editorial .grid-card h3 {
            margin: 0;
            font-size: 16.5px;
            line-height: 1.32;
        }

        .catp-editorial .editor-card p,
        .catp-editorial .grid-card p,
        .catp-editorial .editor-card .tag-row {
            grid-column: 1 / -1;
        }

        .catp-editorial .editor-card p,
        .catp-editorial .grid-card p {
            margin-top: 12px;
        }

        .catp-editorial .tag-row {
            gap: 8px;
            margin-top: 13px;
        }

        .catp-editorial .hero-tags span,
        .catp-editorial .tag-row span {
            font-size: 11.5px;
            padding: 8px 10px;
        }

        .catp-editorial .narrative-points {
            margin-top: 16px;
        }

        .catp-editorial .narrative-points div {
            padding: 13px;
            border-radius: 14px;
        }

        .catp-editorial .narrative-points strong {
            font-size: 14.5px;
        }

        .catp-editorial .compare-top {
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr);
            gap: 12px;
            margin-bottom: 14px;
            align-items: start;
        }

        .catp-editorial .compare-icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            font-size: 18px;
        }

        .catp-editorial .compare-card h3 {
            font-size: 17px;
            line-height: 1.32;
        }

        .catp-editorial .bullet-list {
            gap: 9px;
            margin-top: 14px;
        }

        .catp-editorial .bullet-list div {
            font-size: 13.5px;
            line-height: 1.6;
            padding-left: 22px;
        }

        .catp-editorial .bullet-list div::before {
            width: 8px;
            height: 8px;
            box-shadow: 0 0 0 4px rgba(106, 73, 242, 0.10);
        }

        .catp-editorial .cta-grid {
            gap: 16px;
        }
    }

    @media (max-width: 430px) {
        .catp-editorial {
            --cp-page-gap: 22px;
            --cp-space: 42px;
            padding-top: 60px;
        }

        .catp-editorial .hero {
            padding-top: 10px;
            padding-bottom: 30px;
        }

        .catp-editorial .hero-copy h1 {
            font-size: clamp(27px, 8.8vw, 36px);
        }

        .catp-editorial .section-head h2,
        .catp-editorial .narrative h2,
        .catp-editorial .cta-copy h2 {
            font-size: clamp(22px, 7vw, 30px);
        }

        .catp-editorial .hero-card,
        .catp-editorial .metric,
        .catp-editorial .narrative,
        .catp-editorial .editor-card,
        .catp-editorial .grid-card,
        .catp-editorial .compare-card,
        .catp-editorial .cta-shell {
            padding: 14px;
            border-radius: 18px;
        }

        .catp-editorial .hero-visual {
            min-height: 270px;
        }

        .catp-editorial .editor-card,
        .catp-editorial .grid-card {
            grid-template-columns: 42px minmax(0, 1fr);
            column-gap: 11px;
        }

        .catp-editorial .icon-card,
        .catp-editorial .step-no,
        .catp-editorial .compare-icon {
            width: 40px;
            height: 40px;
            border-radius: 13px;
        }

        .catp-editorial .compare-top {
            grid-template-columns: 40px minmax(0, 1fr);
        }

        .catp-editorial .metric strong {
            font-size: 16.5px;
            white-space: normal;
        }
    }

    @media (max-width: 360px) {
        .catp-editorial {
            --cp-page-gap: 18px;
            padding-top: 56px;
        }

        .catp-editorial .hero-copy h1 {
            font-size: 25px;
        }

        .catp-editorial .eyebrow {
            font-size: 8.5px;
            letter-spacing: .055em;
            padding: 7px 10px;
        }

        .catp-editorial .hero-card,
        .catp-editorial .metric,
        .catp-editorial .narrative,
        .catp-editorial .editor-card,
        .catp-editorial .grid-card,
        .catp-editorial .compare-card,
        .catp-editorial .cta-shell {
            padding: 13px;
        }

        .catp-editorial .hero-visual {
            min-height: 250px;
        }
    }

    @media (hover: none) {
        .catp-editorial .hero-card:hover,
        .catp-editorial .metric:hover,
        .catp-editorial .narrative:hover,
        .catp-editorial .editor-card:hover,
        .catp-editorial .grid-card:hover,
        .catp-editorial .compare-card:hover,
        .catp-editorial .cta-shell:hover,
        .catp-editorial .btn:hover {
            transform: none;
        }
    }

/* CSS-only fallback: keep page content visible when page JS is not loaded from this CSS file. */
.catp-editorial .reveal,
.catp-editorial .catp-reveal {
    opacity: 1;
    transform: none;
}

.catp-editorial .reveal.visible,
.catp-editorial .catp-reveal.visible,
.catp-editorial .reveal.is-visible,
.catp-editorial .catp-reveal.is-visible {
    opacity: 1;
    transform: none;
}


/*===================================================================================
    9. Cognitive Ability Testing Platform CSS End
===================================================================================*/


/*===================================================================================
    10. Behavioral Assessment Software CSS Start
===================================================================================*/

:root {
        --bas-primary: #6842f4;
        --bas-primary-dark: #5330e7;
        --bas-primary-soft: #f2edff;
        --bas-accent: #8d75ff;
        --bas-dark: #211a44;
        --bas-text: #585576;
        --bas-text-soft: #7d7a97;
        --bas-white: #ffffff;
        --bas-bg: #fcfbff;
        --bas-surface: #ffffff;
        --bas-surface-2: #f8f5ff;
        --bas-line: rgba(104, 66, 244, 0.12);
        --bas-line-strong: rgba(104, 66, 244, 0.18);
        --bas-shadow: 0 16px 42px rgba(45, 28, 125, 0.08);
        --bas-shadow-lg: 0 24px 62px rgba(45, 28, 125, 0.12);
        --bas-radius-xl: 32px;
        --bas-radius-lg: 26px;
        --bas-radius-md: 20px;
        --bas-radius-sm: 16px;
        --bas-container: 1160px;
        --bas-page-gap: 44px;
        --bas-section-space: clamp(46px, 4.8vw, 68px);
        --bas-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
    }

    * {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        min-width: 320px;
        overflow-x: hidden;
        font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: var(--bas-text);
        background:
            radial-gradient(circle at 0% 8%, rgba(104, 66, 244, .12), transparent 28%),
            radial-gradient(circle at 100% 4%, rgba(141, 117, 255, .15), transparent 26%),
            radial-gradient(circle at 4% 90%, rgba(104, 66, 244, .07), transparent 26%),
            linear-gradient(180deg, #ffffff 0%, #fcfbff 42%, #f7f3ff 100%);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    .bas-orbit,
    .bas-orbit * {
        box-sizing: border-box;
    }

    .bas-orbit {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        min-width: 320px;
        padding-top: clamp(70px, 6vw, 96px);
        color: var(--bas-text);
    }

    .bas-orbit::before,
    .bas-orbit::after {
        content: "";
        position: fixed;
        border-radius: 50%;
        filter: blur(88px);
        pointer-events: none;
        z-index: -1;
        opacity: .68;
    }

    .bas-orbit::before {
        width: 300px;
        height: 300px;
        left: -120px;
        top: 90px;
        background: rgba(104, 66, 244, .13);
    }

    .bas-orbit::after {
        width: 340px;
        height: 340px;
        right: -120px;
        top: 320px;
        background: rgba(223, 218, 243, .9);
    }

    .bas-orbit a {
        text-decoration: none;
        color: inherit;
    }

    .bas-orbit img,
    .bas-orbit svg {
        max-width: 100%;
        display: block;
    }

    .bas-orbit .container {
        width: min(var(--bas-container), calc(100% - var(--bas-page-gap)));
        margin-inline: auto;
    }

    .bas-orbit .section {
        position: relative;
        padding-block: var(--bas-section-space);
    }

    .bas-orbit .section.soft {
        background:
            radial-gradient(circle at 0 0, rgba(104, 66, 244, .045), transparent 25%),
            linear-gradient(180deg, rgba(104, 66, 244, .03), rgba(255, 255, 255, 0));
    }

    .bas-orbit .eyebrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        max-width: 100%;
        padding: 10px 15px;
        border-radius: 999px;
        background: rgba(104, 66, 244, .08);
        border: 1px solid rgba(104, 66, 244, .13);
        color: var(--bas-primary);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .08em;
        line-height: 1.25;
        text-transform: uppercase;
        box-shadow: 0 10px 22px rgba(104, 66, 244, .06);
        overflow-wrap: anywhere;
    }

    .bas-orbit .eyebrow::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--bas-primary), #15bdf6);
        box-shadow: 0 0 0 5px rgba(104, 66, 244, .10);
        flex: 0 0 auto;
    }

    .bas-orbit .section-head {
        max-width: 800px;
        margin-bottom: clamp(24px, 2.7vw, 34px);
    }

    .bas-orbit .section-head h2,
    .bas-orbit .cta-copy h2 {
        margin: 16px 0 12px;
        color: var(--bas-dark);
        font-size: clamp(30px, 3.65vw, 46px);
        line-height: 1.12;
        letter-spacing: -.038em;
        font-weight: 700;
        text-wrap: balance;
    }

    .bas-orbit .section-head p,
    .bas-orbit .hero-copy p,
    .bas-orbit .hero-subpoint p,
    .bas-orbit .hero-float-card p,
    .bas-orbit .hero-mini-card p,
    .bas-orbit .feature-card p,
    .bas-orbit .content-card p,
    .bas-orbit .workflow-card p,
    .bas-orbit .comparison-card p,
    .bas-orbit .cta-copy p,
    .bas-orbit .hero-image-caption p {
        margin: 0;
        font-size: 15.5px;
        line-height: 1.72;
        color: rgba(88, 85, 118, .86);
        font-weight: 400;
        overflow-wrap: anywhere;
    }

    /* Hero */
    .bas-orbit .hero {
        position: relative;
        padding: clamp(24px, 3vw, 40px) 0 clamp(44px, 5vw, 64px);
        overflow: hidden;
    }

    .bas-orbit .hero::before,
    .bas-orbit .hero::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
        filter: blur(10px);
    }

    .bas-orbit .hero::before {
        width: 240px;
        height: 240px;
        top: 20px;
        right: 8%;
        background: radial-gradient(circle, rgba(104, 66, 244, 0.14), rgba(104, 66, 244, 0));
    }

    .bas-orbit .hero::after {
        width: 210px;
        height: 210px;
        left: -70px;
        bottom: 30px;
        background: radial-gradient(circle, rgba(141, 117, 255, 0.14), rgba(141, 117, 255, 0));
    }

    .bas-orbit .hero-shell {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1.02fr) minmax(410px, .98fr);
        gap: 30px;
        align-items: center;
    }

    .bas-orbit .hero-copy {
        position: relative;
        z-index: 2;
        min-width: 0;
    }

    .bas-orbit .hero-copy h1 {
        margin: 18px 0 16px;
        max-width: 700px;
        color: var(--bas-dark);
        font-size: clamp(38px, 5.15vw, 60px);
        line-height: 1.06;
        letter-spacing: -.048em;
        font-weight: 700;
        text-wrap: balance;
    }

    .bas-orbit .hero-copy h1 span {
        color: var(--bas-primary);
        display: inline;
    }

    .bas-orbit .hero-copy p {
        max-width: 630px;
        font-size: 15.8px;
        line-height: 1.75;
        margin-bottom: 26px;
    }

    .bas-orbit .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 22px;
    }

    .bas-orbit .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 176px;
        min-height: 52px;
        padding: 14px 22px;
        border-radius: 15px;
        font-size: 14.5px;
        line-height: 1.2;
        font-weight: 700;
        text-align: center;
        border: 1px solid transparent;
        transition: var(--bas-transition);
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    .bas-orbit .btn::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .35s ease;
        z-index: -1;
    }

    .bas-orbit .btn:hover {
        transform: translateY(-3px);
    }

    .bas-orbit .btn:hover::before {
        transform: scaleX(1);
    }

    .bas-orbit .btn-primary {
        color: #fff;
        background: linear-gradient(135deg, var(--bas-primary) 0%, #8062ff 100%);
        box-shadow: 0 18px 36px rgba(104, 66, 244, .24);
    }

    .bas-orbit .btn-primary::before {
        background: linear-gradient(135deg, var(--bas-dark) 0%, var(--bas-primary) 100%);
    }

    .bas-orbit .btn-secondary {
        color: var(--bas-primary);
        background: rgba(255, 255, 255, .9);
        border-color: rgba(104, 66, 244, .16);
        box-shadow: 0 12px 28px rgba(50, 35, 111, .07);
    }

    .bas-orbit .btn-secondary::before {
        background: linear-gradient(135deg, rgba(104, 66, 244, .06), rgba(104, 66, 244, .12));
    }

    .bas-orbit .hero-tags,
    .bas-orbit .tag-row {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
    }

    .bas-orbit .hero-tags {
        margin-bottom: 26px;
    }

    .bas-orbit .hero-tags span,
    .bas-orbit .tag-row span {
        max-width: 100%;
        padding: 9px 12px;
        border-radius: 999px;
        background: rgba(104, 66, 244, .07);
        border: 1px solid rgba(104, 66, 244, .12);
        color: var(--bas-primary);
        font-size: 12.5px;
        line-height: 1.2;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .bas-orbit .hero-subpoints {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        max-width: 630px;
    }

    .bas-orbit .hero-subpoint {
        padding: 17px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.86);
        border: 1px solid rgba(104, 66, 244, 0.10);
        box-shadow: 0 14px 34px rgba(50, 35, 111, 0.06);
        backdrop-filter: blur(10px);
        transition: var(--bas-transition);
    }

    .bas-orbit .hero-subpoint:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 48px rgba(50, 35, 111, 0.10);
    }

    .bas-orbit .hero-subpoint strong {
        display: block;
        margin-bottom: 6px;
        color: var(--bas-dark);
        font-size: 17px;
        line-height: 1.24;
        font-weight: 700;
    }

    .bas-orbit .hero-visual-wrap {
        position: relative;
        min-width: 0;
        padding: 20px;
        border-radius: 32px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(248, 244, 255, .96));
        border: 1px solid var(--bas-line);
        box-shadow: var(--bas-shadow-lg);
        backdrop-filter: blur(10px);
        overflow: hidden;
    }

    .bas-orbit .hero-visual-wrap::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 100% 0%, rgba(104, 66, 244, .14), transparent 30%),
            linear-gradient(135deg, rgba(104, 66, 244, .03), transparent 52%, rgba(104, 66, 244, .05));
        pointer-events: none;
    }

    .bas-orbit .hero-image-card {
        position: relative;
        z-index: 1;
        min-height: 500px;
        border-radius: 26px;
        overflow: hidden;
        box-shadow: 0 24px 60px rgba(50, 35, 111, 0.16);
        background: #ece8ff;
    }

    .bas-orbit .hero-image-card img {
        width: 100%;
        height: 100%;
        min-height: 500px;
        object-fit: cover;
        display: block;
    }

    .bas-orbit .hero-image-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(180deg, rgba(20, 13, 52, 0.04) 0%, rgba(20, 13, 52, 0.16) 44%, rgba(20, 13, 52, 0.76) 100%);
        pointer-events: none;
    }

    .bas-orbit .hero-image-badge {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        max-width: calc(100% - 32px);
        padding: 9px 13px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.20);
        color: #fff;
        font-size: 11.5px;
        line-height: 1.2;
        font-weight: 700;
        backdrop-filter: blur(12px);
        overflow-wrap: anywhere;
    }

    .bas-orbit .hero-image-badge::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14);
        flex: 0 0 auto;
    }

    .bas-orbit .hero-image-caption {
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 18px;
        z-index: 2;
        padding: 18px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.16);
        backdrop-filter: blur(14px);
    }

    .bas-orbit .hero-image-caption span {
        display: inline-block;
        margin-bottom: 10px;
        color: rgba(255, 255, 255, 0.86);
        font-size: 11px;
        line-height: 1.2;
        letter-spacing: .07em;
        text-transform: uppercase;
        font-weight: 700;
    }

    .bas-orbit .hero-image-caption h3 {
        margin: 0 0 8px;
        color: #fff;
        font-size: 22px;
        line-height: 1.28;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .bas-orbit .hero-image-caption p {
        color: rgba(255, 255, 255, 0.86);
        font-size: 13.5px;
        line-height: 1.7;
    }

    .bas-orbit .hero-float-card {
        position: absolute;
        z-index: 3;
        width: 220px;
        padding: 17px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(104, 66, 244, 0.12);
        box-shadow: 0 18px 42px rgba(50, 35, 111, 0.12);
        backdrop-filter: blur(14px);
        transition: var(--bas-transition);
    }

    .bas-orbit .hero-float-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 24px 52px rgba(50, 35, 111, 0.16);
    }

    .bas-orbit .hero-float-card.top-left {
        top: 30px;
        left: -6px;
    }

    .bas-orbit .hero-float-card.bottom-right {
        right: -4px;
        bottom: 118px;
    }

    .bas-orbit .hero-float-label {
        display: inline-block;
        margin-bottom: 10px;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(104, 66, 244, 0.08);
        color: var(--bas-primary);
        font-size: 10.5px;
        line-height: 1.1;
        letter-spacing: .06em;
        text-transform: uppercase;
        font-weight: 700;
    }

    .bas-orbit .hero-float-card h3 {
        margin: 0 0 8px;
        color: var(--bas-dark);
        font-size: 17px;
        line-height: 1.32;
        font-weight: 700;
    }

    .bas-orbit .hero-score-row {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 14px;
        margin-top: 18px;
    }

    .bas-orbit .hero-score-card,
    .bas-orbit .hero-mini-card {
        padding: 17px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.88);
        border: 1px solid rgba(104, 66, 244, 0.10);
        box-shadow: 0 14px 34px rgba(50, 35, 111, 0.06);
        backdrop-filter: blur(10px);
    }

    .bas-orbit .hero-score-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 15px;
    }

    .bas-orbit .hero-score-top strong {
        color: var(--bas-dark);
        font-size: 17px;
        line-height: 1.24;
        font-weight: 700;
    }

    .bas-orbit .hero-score-chip {
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(104, 66, 244, 0.08);
        color: var(--bas-primary);
        font-size: 11.5px;
        line-height: 1.1;
        font-weight: 700;
        white-space: nowrap;
    }

    .bas-orbit .hero-score-bars {
        display: grid;
        gap: 12px;
    }

    .bas-orbit .hero-score-item {
        display: grid;
        gap: 7px;
    }

    .bas-orbit .hero-score-item span {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        color: var(--bas-dark);
        font-size: 13.5px;
        line-height: 1.35;
        font-weight: 600;
    }

    .bas-orbit .hero-score-track,
    .bas-orbit .progress-track {
        width: 100%;
        height: 10px;
        border-radius: 999px;
        background: rgba(104, 66, 244, 0.10);
        overflow: hidden;
    }

    .bas-orbit .hero-score-fill,
    .bas-orbit .progress-fill {
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--bas-primary), #8d75ff);
    }

    .bas-orbit .hero-mini-card strong {
        display: block;
        margin-bottom: 8px;
        color: var(--bas-dark);
        font-size: 18px;
        line-height: 1.2;
        font-weight: 700;
    }

    /* Cards and sections */
    .bas-orbit .feature-grid,
    .bas-orbit .content-grid,
    .bas-orbit .workflow-grid,
    .bas-orbit .comparison-grid {
        display: grid;
        gap: 18px;
    }

    .bas-orbit .feature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bas-orbit .content-grid,
    .bas-orbit .comparison-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bas-orbit .workflow-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bas-orbit .feature-card,
    .bas-orbit .content-card,
    .bas-orbit .workflow-card,
    .bas-orbit .comparison-card,
    .bas-orbit .cta-box {
        background: rgba(255, 255, 255, .94);
        border: 1px solid var(--bas-line);
        box-shadow: var(--bas-shadow);
        transition: var(--bas-transition);
    }

    .bas-orbit .feature-card:hover,
    .bas-orbit .content-card:hover,
    .bas-orbit .workflow-card:hover,
    .bas-orbit .comparison-card:hover,
    .bas-orbit .cta-box:hover {
        transform: translateY(-4px);
        box-shadow: var(--bas-shadow-lg);
        border-color: rgba(104, 66, 244, 0.18);
    }

    .bas-orbit .feature-card,
    .bas-orbit .workflow-card {
        position: relative;
        overflow: hidden;
        padding: 24px;
        border-radius: 26px;
        background:
            radial-gradient(circle at 100% 0, rgba(104, 66, 244, .08), transparent 34%),
            linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 244, 255, .96));
    }

    .bas-orbit .feature-card::before,
    .bas-orbit .workflow-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(104, 66, 244, .03), transparent 50%, rgba(104, 66, 244, .06));
        pointer-events: none;
    }

    .bas-orbit .feature-icon,
    .bas-orbit .workflow-no {
        width: 52px;
        height: 52px;
        border-radius: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(104, 66, 244, .15), rgba(223, 218, 243, .96));
        color: var(--bas-primary);
        font-size: 18px;
        line-height: 1;
        font-weight: 700;
        margin-bottom: 16px;
        position: relative;
        z-index: 1;
        flex: 0 0 auto;
    }

    .bas-orbit .feature-card h3,
    .bas-orbit .content-card h3,
    .bas-orbit .workflow-card h3,
    .bas-orbit .comparison-card h3 {
        margin: 0 0 10px;
        color: var(--bas-dark);
        font-size: 20px;
        line-height: 1.3;
        font-weight: 700;
        position: relative;
        z-index: 1;
        overflow-wrap: anywhere;
    }

    .bas-orbit .feature-card p,
    .bas-orbit .workflow-card p {
        position: relative;
        z-index: 1;
    }

    .bas-orbit .tag-row {
        margin-top: 16px;
        position: relative;
        z-index: 1;
    }

    .bas-orbit .content-card {
        padding: 26px;
        border-radius: 28px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 244, 255, .96));
    }

    .bas-orbit .progress-list,
    .bas-orbit .check-list,
    .bas-orbit .bullet-list {
        display: grid;
        gap: 12px;
        margin-top: 18px;
    }

    .bas-orbit .progress-item {
        display: grid;
        gap: 8px;
    }

    .bas-orbit .progress-item strong {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        color: var(--bas-dark);
        font-size: 14.5px;
        line-height: 1.4;
        font-weight: 700;
    }

    .bas-orbit .check-list div,
    .bas-orbit .bullet-list div {
        position: relative;
        padding-left: 24px;
        color: rgba(88, 85, 118, .9);
        font-size: 14.5px;
        line-height: 1.68;
        font-weight: 400;
        overflow-wrap: anywhere;
    }

    .bas-orbit .check-list div::before,
    .bas-orbit .bullet-list div::before {
        content: "";
        position: absolute;
        left: 0;
        top: .68em;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--bas-primary);
        box-shadow: 0 0 0 5px rgba(104, 66, 244, .10);
    }

    .bas-orbit .comparison-card {
        padding: 26px;
        border-radius: 28px;
    }

    .bas-orbit .comparison-card.bad {
        background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 247, 255, .96));
    }

    .bas-orbit .comparison-card.good {
        background: linear-gradient(180deg, rgba(104, 66, 244, .08), rgba(255, 255, 255, .98));
        border-color: rgba(104, 66, 244, .18);
    }

    .bas-orbit .comparison-top {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 16px;
    }

    .bas-orbit .comparison-icon {
        width: 50px;
        height: 50px;
        border-radius: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        line-height: 1;
        font-weight: 700;
        flex-shrink: 0;
    }

    .bas-orbit .comparison-card.bad .comparison-icon {
        background: rgba(33, 26, 68, .08);
        color: var(--bas-dark);
    }

    .bas-orbit .comparison-card.good .comparison-icon {
        background: rgba(104, 66, 244, .14);
        color: var(--bas-primary);
    }

    .bas-orbit .cta-box {
        padding: 34px;
        border-radius: 32px;
        background:
            radial-gradient(circle at 100% 0%, rgba(223, 218, 243, .58), transparent 30%),
            linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(246, 244, 254, .98));
        position: relative;
        overflow: hidden;
    }

    .bas-orbit .cta-box::before,
    .bas-orbit .cta-box::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: rgba(104, 66, 244, .08);
    }

    .bas-orbit .cta-box::before {
        width: 170px;
        height: 170px;
        right: -44px;
        bottom: -50px;
    }

    .bas-orbit .cta-box::after {
        width: 110px;
        height: 110px;
        left: -28px;
        top: -28px;
    }

    .bas-orbit .cta-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 24px;
        align-items: center;
    }

    .bas-orbit .cta-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        justify-content: flex-end;
    }

    .bas-orbit .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .85s ease, transform .85s ease;
    }

    .bas-orbit .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Responsive */
    @media (max-width: 1180px) {
        :root {
            --bas-container: 980px;
            --bas-page-gap: 34px;
            --bas-section-space: 58px;
        }

        .bas-orbit {
            padding-top: 82px;
        }

        .bas-orbit .hero-shell,
        .bas-orbit .cta-grid {
            grid-template-columns: 1fr;
        }

        .bas-orbit .cta-actions {
            justify-content: flex-start;
        }

        .bas-orbit .hero-copy {
            max-width: 900px;
        }

        .bas-orbit .hero-visual-wrap {
            max-width: 780px;
        }

        .bas-orbit .feature-grid,
        .bas-orbit .workflow-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 991px) {
        :root {
            --bas-page-gap: 30px;
            --bas-section-space: 54px;
        }

        .bas-orbit {
            padding-top: 76px;
        }

        .bas-orbit .hero {
            padding-top: 26px;
            padding-bottom: 44px;
        }

        .bas-orbit .hero-copy h1 {
            font-size: clamp(36px, 6vw, 54px);
        }

        .bas-orbit .hero-image-card,
        .bas-orbit .hero-image-card img {
            min-height: 470px;
        }

        .bas-orbit .hero-float-card.top-left {
            top: 18px;
            left: 18px;
        }

        .bas-orbit .hero-float-card.bottom-right {
            right: 18px;
            bottom: 110px;
        }

        .bas-orbit .content-grid,
        .bas-orbit .comparison-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 767px) {
        :root {
            --bas-page-gap: 24px;
            --bas-section-space: 46px;
        }

        .bas-orbit {
            padding-top: 66px;
        }

        .bas-orbit .container {
            width: min(var(--bas-container), calc(100% - var(--bas-page-gap)));
        }

        .bas-orbit .hero {
            padding: 16px 0 34px;
        }

        .bas-orbit .section {
            padding-block: var(--bas-section-space);
        }

        .bas-orbit .section-head {
            margin-bottom: 22px;
        }

        .bas-orbit .hero-copy h1 {
            font-size: clamp(30px, 9.2vw, 42px);
            line-height: 1.1;
            margin: 16px 0 12px;
        }

        .bas-orbit .hero-copy p,
        .bas-orbit .section-head p,
        .bas-orbit .hero-subpoint p,
        .bas-orbit .hero-float-card p,
        .bas-orbit .hero-mini-card p,
        .bas-orbit .feature-card p,
        .bas-orbit .content-card p,
        .bas-orbit .workflow-card p,
        .bas-orbit .comparison-card p,
        .bas-orbit .cta-copy p,
        .bas-orbit .hero-image-caption p {
            font-size: 14px;
            line-height: 1.62;
        }

        .bas-orbit .section-head h2,
        .bas-orbit .cta-copy h2 {
            font-size: clamp(24px, 7.4vw, 34px);
            line-height: 1.16;
        }

        .bas-orbit .eyebrow {
            padding: 8px 12px;
            gap: 8px;
            font-size: 9.5px;
            letter-spacing: .075em;
        }

        .bas-orbit .eyebrow::before {
            width: 7px;
            height: 7px;
        }

        .bas-orbit .hero-actions,
        .bas-orbit .cta-actions {
            flex-direction: column;
            gap: 11px;
        }

        .bas-orbit .btn {
            width: 100%;
            min-width: 0;
            min-height: 50px;
            padding: 13px 16px;
            border-radius: 14px;
            font-size: 14px;
        }

        .bas-orbit .hero-tags {
            gap: 8px;
            margin-bottom: 20px;
        }

        .bas-orbit .hero-tags span,
        .bas-orbit .tag-row span {
            white-space: normal;
            font-size: 11.5px;
            padding: 8px 10px;
        }

        .bas-orbit .hero-subpoints,
        .bas-orbit .hero-score-row,
        .bas-orbit .feature-grid,
        .bas-orbit .content-grid,
        .bas-orbit .workflow-grid,
        .bas-orbit .comparison-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .bas-orbit .hero-subpoint,
        .bas-orbit .feature-card,
        .bas-orbit .content-card,
        .bas-orbit .workflow-card,
        .bas-orbit .comparison-card,
        .bas-orbit .cta-box {
            padding: 16px;
            border-radius: 20px;
        }

        .bas-orbit .hero-visual-wrap {
            padding: 16px;
            border-radius: 24px;
        }

        .bas-orbit .hero-image-card,
        .bas-orbit .hero-image-card img {
            min-height: 360px;
        }

        .bas-orbit .hero-image-card {
            border-radius: 20px;
        }

        .bas-orbit .hero-image-caption {
            left: 12px;
            right: 12px;
            bottom: 12px;
            padding: 14px;
            border-radius: 18px;
        }

        .bas-orbit .hero-image-caption h3 {
            font-size: 18px;
            line-height: 1.28;
        }

        .bas-orbit .hero-image-caption span,
        .bas-orbit .hero-image-badge {
            font-size: 10px;
        }

        .bas-orbit .hero-image-badge {
            top: 10px;
            left: 10px;
            padding: 8px 10px;
        }

        .bas-orbit .hero-float-card {
            position: relative;
            width: 100%;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            bottom: auto !important;
            margin-top: 14px;
            padding: 14px;
            border-radius: 18px;
        }

        .bas-orbit .hero-score-card,
        .bas-orbit .hero-mini-card {
            padding: 14px;
            border-radius: 18px;
        }

        .bas-orbit .hero-score-top {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .bas-orbit .hero-score-chip {
            width: fit-content;
        }

        .bas-orbit .feature-card,
        .bas-orbit .workflow-card {
            display: grid;
            grid-template-columns: 46px minmax(0, 1fr);
            column-gap: 12px;
            align-items: center;
        }

        .bas-orbit .feature-icon,
        .bas-orbit .workflow-no {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            margin: 0;
            font-size: 15px;
        }

        .bas-orbit .feature-card h3,
        .bas-orbit .workflow-card h3 {
            margin: 0;
            font-size: 16.5px;
            line-height: 1.32;
        }

        .bas-orbit .feature-card p,
        .bas-orbit .workflow-card p,
        .bas-orbit .feature-card .tag-row {
            grid-column: 1 / -1;
        }

        .bas-orbit .feature-card p,
        .bas-orbit .workflow-card p {
            margin-top: 12px;
        }

        .bas-orbit .content-card h3,
        .bas-orbit .comparison-card h3 {
            font-size: 17.5px;
            line-height: 1.32;
        }

        .bas-orbit .progress-item strong {
            font-size: 13.5px;
        }

        .bas-orbit .check-list div,
        .bas-orbit .bullet-list div {
            font-size: 13.5px;
            line-height: 1.6;
            padding-left: 22px;
        }

        .bas-orbit .check-list div::before,
        .bas-orbit .bullet-list div::before {
            width: 8px;
            height: 8px;
            box-shadow: 0 0 0 4px rgba(104, 66, 244, .10);
        }

        .bas-orbit .comparison-top {
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr);
            gap: 12px;
            margin-bottom: 14px;
        }

        .bas-orbit .comparison-icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            font-size: 18px;
        }

        .bas-orbit .cta-box {
            padding: 18px;
        }

        .bas-orbit .cta-grid {
            gap: 16px;
        }
    }

    @media (max-width: 430px) {
        :root {
            --bas-page-gap: 22px;
            --bas-section-space: 42px;
        }

        .bas-orbit {
            padding-top: 60px;
        }

        .bas-orbit .hero {
            padding-top: 10px;
            padding-bottom: 30px;
        }

        .bas-orbit .hero-copy h1 {
            font-size: clamp(27px, 8.8vw, 36px);
        }

        .bas-orbit .section-head h2,
        .bas-orbit .cta-copy h2 {
            font-size: clamp(22px, 7vw, 30px);
        }

        .bas-orbit .hero-subpoint,
        .bas-orbit .feature-card,
        .bas-orbit .content-card,
        .bas-orbit .workflow-card,
        .bas-orbit .comparison-card,
        .bas-orbit .cta-box,
        .bas-orbit .hero-visual-wrap {
            padding: 14px;
            border-radius: 18px;
        }

        .bas-orbit .hero-image-card,
        .bas-orbit .hero-image-card img {
            min-height: 330px;
        }

        .bas-orbit .feature-card,
        .bas-orbit .workflow-card {
            grid-template-columns: 42px minmax(0, 1fr);
            column-gap: 11px;
        }

        .bas-orbit .feature-icon,
        .bas-orbit .workflow-no,
        .bas-orbit .comparison-icon {
            width: 40px;
            height: 40px;
            border-radius: 13px;
        }

        .bas-orbit .comparison-top {
            grid-template-columns: 40px minmax(0, 1fr);
        }
    }

    @media (max-width: 360px) {
        :root {
            --bas-page-gap: 18px;
        }

        .bas-orbit {
            padding-top: 56px;
        }

        .bas-orbit .hero-copy h1 {
            font-size: 25px;
        }

        .bas-orbit .eyebrow {
            font-size: 8.5px;
            letter-spacing: .055em;
            padding: 7px 10px;
        }

        .bas-orbit .hero-image-card,
        .bas-orbit .hero-image-card img {
            min-height: 310px;
        }

        .bas-orbit .hero-subpoint,
        .bas-orbit .feature-card,
        .bas-orbit .content-card,
        .bas-orbit .workflow-card,
        .bas-orbit .comparison-card,
        .bas-orbit .cta-box,
        .bas-orbit .hero-visual-wrap,
        .bas-orbit .hero-score-card,
        .bas-orbit .hero-mini-card {
            padding: 13px;
        }
    }

    @media (hover: none) {
        .bas-orbit .btn:hover,
        .bas-orbit .hero-subpoint:hover,
        .bas-orbit .hero-float-card:hover,
        .bas-orbit .feature-card:hover,
        .bas-orbit .content-card:hover,
        .bas-orbit .workflow-card:hover,
        .bas-orbit .comparison-card:hover,
        .bas-orbit .cta-box:hover {
            transform: none;
        }
    }

/*===================================================================================
    10. Behavioral Assessment Software CSS End
===================================================================================*/


/*===================================================================================
    11. Psychometric Assessment Platform CSS Start
===================================================================================*/

:root {
    --pe-bg: #f7f5f1;
    --pe-bg-2: #fcfbf8;
    --pe-card: rgba(255, 255, 255, 0.82);
    --pe-card-strong: #ffffff;
    --pe-text: #1d1a27;
    --pe-text-soft: #625d73;
    --pe-text-muted: #8b859f;
    --pe-brand: #6842f4;
    --pe-brand-dark: #5531e6;
    --pe-brand-soft: rgba(104, 66, 244, 0.10);
    --pe-line: rgba(29, 26, 39, 0.08);
    --pe-line-2: rgba(104, 66, 244, 0.14);
    --pe-shadow: 0 16px 42px rgba(27, 22, 44, 0.07);
    --pe-shadow-lg: 0 26px 68px rgba(27, 22, 44, 0.11);
    --pe-radius-xl: 34px;
    --pe-radius-lg: 28px;
    --pe-radius-md: 22px;
    --pe-radius-sm: 16px;
    --pe-container: 1160px;
    --pe-page-gap: 44px;
    --pe-space: clamp(46px, 4.8vw, 70px);
    --pe-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
      radial-gradient(circle at 0% 8%, rgba(104, 66, 244, 0.11), transparent 26%),
      radial-gradient(circle at 100% 5%, rgba(104, 66, 244, 0.08), transparent 22%),
      radial-gradient(circle at 0% 90%, rgba(182, 166, 255, 0.12), transparent 24%),
      linear-gradient(180deg, var(--pe-bg-2) 0%, var(--pe-bg) 48%, #f4f0ff 100%);
    color: var(--pe-text-soft);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .psyx-editorial-page,
  .psyx-editorial-page * {
    box-sizing: border-box;
  }

  .psyx-editorial-page {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-width: 320px;
    padding-top: clamp(72px, 6vw, 96px);
    background:
      radial-gradient(circle at 0% 10%, rgba(104, 66, 244, 0.10), transparent 24%),
      radial-gradient(circle at 100% 8%, rgba(104, 66, 244, 0.08), transparent 18%),
      linear-gradient(180deg, rgba(252, 251, 248, .96) 0%, rgba(247, 245, 241, .96) 48%, rgba(244, 240, 255, .98) 100%);
  }

  .psyx-editorial-page::before,
  .psyx-editorial-page::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    z-index: -1;
    pointer-events: none;
    opacity: .62;
  }

  .psyx-editorial-page::before {
    width: 280px;
    height: 280px;
    top: 120px;
    left: -120px;
    background: rgba(104, 66, 244, 0.14);
  }

  .psyx-editorial-page::after {
    width: 330px;
    height: 330px;
    right: -140px;
    top: 460px;
    background: rgba(182, 166, 255, 0.20);
  }

  .psyx-editorial-page a {
    text-decoration: none;
    color: inherit;
  }

  .psyx-editorial-page img,
  .psyx-editorial-page svg {
    display: block;
    max-width: 100%;
  }

  .psyx-editorial-page .pe-container {
    width: min(var(--pe-container), calc(100% - var(--pe-page-gap)));
    margin: 0 auto;
  }

  .psyx-editorial-page .pe-section {
    padding-block: var(--pe-space);
    position: relative;
  }

  .psyx-editorial-page .pe-soft {
    background:
      radial-gradient(circle at 0 0, rgba(104, 66, 244, .045), transparent 25%),
      linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.35) 20%, rgba(245,240,255,0.58) 100%);
  }

  .psyx-editorial-page .pe-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    max-width: 100%;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,0.68);
    border: 1px solid var(--pe-line-2);
    color: var(--pe-brand);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 24px rgba(104, 66, 244, 0.06);
    overflow-wrap: anywhere;
  }

  .psyx-editorial-page .pe-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pe-brand), #17b9f4);
    box-shadow: 0 0 0 5px rgba(104, 66, 244, 0.10);
    flex: 0 0 auto;
  }

  .psyx-editorial-page .pe-section-head {
    max-width: 760px;
    margin-bottom: clamp(24px, 2.8vw, 36px);
  }

  .psyx-editorial-page .pe-section-head.pe-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .psyx-editorial-page .pe-section-head h2,
  .psyx-editorial-page .pe-copy h2,
  .psyx-editorial-page .pe-cta-copy h2 {
    margin: 16px 0 12px;
    color: var(--pe-text);
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.1;
    letter-spacing: -.04em;
    font-weight: 700;
    text-wrap: balance;
  }

  .psyx-editorial-page .pe-section-head p,
  .psyx-editorial-page .pe-copy p,
  .psyx-editorial-page .pe-card p,
  .psyx-editorial-page .pe-step p,
  .psyx-editorial-page .pe-stat p,
  .psyx-editorial-page .pe-cta-copy p,
  .psyx-editorial-page .pe-note p,
  .psyx-editorial-page .pe-benefit p,
  .psyx-editorial-page .pe-copy-card p,
  .psyx-editorial-page .pe-side-panel p,
  .psyx-editorial-page .pe-compare-card p,
  .psyx-editorial-page .pe-float p {
    margin: 0;
    color: var(--pe-text-soft);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .psyx-editorial-page .pe-btn-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
  }

  .psyx-editorial-page .pe-btn {
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    border: 1px solid transparent;
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    transition: var(--pe-transition);
  }

  .psyx-editorial-page .pe-btn:hover {
    transform: translateY(-3px);
  }

  .psyx-editorial-page .pe-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--pe-brand), #8368ff);
    box-shadow: 0 16px 36px rgba(104, 66, 244, 0.22);
  }

  .psyx-editorial-page .pe-btn-primary:hover {
    color: #fff;
    box-shadow: 0 22px 46px rgba(104, 66, 244, 0.28);
  }

  .psyx-editorial-page .pe-btn-secondary {
    color: var(--pe-brand);
    background: rgba(255,255,255,0.9);
    border-color: var(--pe-line-2);
    box-shadow: 0 10px 28px rgba(27, 22, 44, 0.06);
  }

  .psyx-editorial-page .pe-btn-secondary:hover {
    color: var(--pe-brand);
    background: #fff;
  }

  /* HERO */
  .psyx-editorial-page .pe-hero {
    padding: clamp(24px, 3vw, 38px) 0 clamp(44px, 5vw, 64px);
  }

  .psyx-editorial-page .pe-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 30px;
    align-items: center;
  }

  .psyx-editorial-page .pe-copy {
    min-width: 0;
  }

  .psyx-editorial-page .pe-copy h1 {
    margin: 18px 0 18px;
    color: var(--pe-text);
    font-size: clamp(38px, 5.3vw, 64px);
    line-height: 1.01;
    letter-spacing: -.055em;
    font-weight: 700;
    max-width: 700px;
    text-wrap: balance;
  }

  .psyx-editorial-page .pe-copy h1 span {
    color: var(--pe-brand);
    display: inline;
  }

  .psyx-editorial-page .pe-copy p {
    max-width: 620px;
    margin-bottom: 26px;
    font-size: 16px;
  }

  .psyx-editorial-page .pe-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
  }

  .psyx-editorial-page .pe-meta-row span {
    max-width: 100%;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,0.68);
    border: 1px solid var(--pe-line-2);
    color: var(--pe-text-soft);
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 600;
    backdrop-filter: blur(12px);
    overflow-wrap: anywhere;
  }

  .psyx-editorial-page .pe-hero-visual {
    position: relative;
    min-width: 0;
  }

  .psyx-editorial-page .pe-hero-shell {
    position: relative;
    padding: 16px;
    border-radius: 36px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(255,255,255,0.76);
    box-shadow: var(--pe-shadow-lg);
    backdrop-filter: blur(16px);
  }

  .psyx-editorial-page .pe-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
    gap: 16px;
    align-items: stretch;
  }

  .psyx-editorial-page .pe-hero-main,
  .psyx-editorial-page .pe-hero-side-card {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    min-height: 100%;
    background: #ede8fb;
  }

  .psyx-editorial-page .pe-hero-main {
    min-height: 560px;
  }

  .psyx-editorial-page .pe-hero-side {
    display: grid;
    gap: 16px;
  }

  .psyx-editorial-page .pe-hero-side-card {
    min-height: 272px;
  }

  .psyx-editorial-page .pe-hero-main img,
  .psyx-editorial-page .pe-hero-side-card img,
  .psyx-editorial-page .pe-overview-image img,
  .psyx-editorial-page .pe-cta-bg img,
  .psyx-editorial-page .pe-mini-visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .psyx-editorial-page .pe-float,
  .psyx-editorial-page .pe-note {
    position: absolute;
    z-index: 2;
    padding: 15px 16px;
    border-radius: 20px;
    background: rgba(255,255,255,0.90);
    border: 1px solid rgba(255,255,255,0.92);
    box-shadow: var(--pe-shadow);
    backdrop-filter: blur(14px);
  }

  .psyx-editorial-page .pe-float.top {
    top: 16px;
    left: 16px;
    max-width: 220px;
  }

  .psyx-editorial-page .pe-float.bottom {
    right: 16px;
    bottom: 16px;
    max-width: 250px;
  }

  .psyx-editorial-page .pe-float strong,
  .psyx-editorial-page .pe-note strong,
  .psyx-editorial-page .pe-card h3,
  .psyx-editorial-page .pe-step h3,
  .psyx-editorial-page .pe-compare-card h3,
  .psyx-editorial-page .pe-overview-copy h3 {
    display: block;
    color: var(--pe-text);
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.36;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .psyx-editorial-page .pe-float p {
    font-size: 12.8px;
    line-height: 1.62;
  }

  .psyx-editorial-page .pe-score {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .psyx-editorial-page .pe-ring {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    background: conic-gradient(var(--pe-brand) 0 84%, rgba(104, 66, 244, .12) 84% 100%);
    flex: 0 0 auto;
  }

  .psyx-editorial-page .pe-ring::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: #fff;
  }

  .psyx-editorial-page .pe-ring span {
    position: relative;
    z-index: 1;
    color: var(--pe-brand);
    font-size: 13.5px;
    line-height: 1;
    font-weight: 700;
  }

  /* STAT BAR */
  .psyx-editorial-page .pe-stat-grid {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .psyx-editorial-page .pe-stat,
  .psyx-editorial-page .pe-copy-card,
  .psyx-editorial-page .pe-benefit,
  .psyx-editorial-page .pe-card,
  .psyx-editorial-page .pe-step,
  .psyx-editorial-page .pe-side-panel,
  .psyx-editorial-page .pe-compare-card {
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(104, 66, 244, 0.10);
    box-shadow: var(--pe-shadow);
    transition: var(--pe-transition);
  }

  .psyx-editorial-page .pe-stat:hover,
  .psyx-editorial-page .pe-copy-card:hover,
  .psyx-editorial-page .pe-benefit:hover,
  .psyx-editorial-page .pe-card:hover,
  .psyx-editorial-page .pe-step:hover,
  .psyx-editorial-page .pe-side-panel:hover,
  .psyx-editorial-page .pe-compare-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pe-shadow-lg);
    border-color: rgba(104, 66, 244, 0.18);
  }

  .psyx-editorial-page .pe-stat {
    padding: 20px 18px;
    border-radius: 22px;
  }

  .psyx-editorial-page .pe-stat strong {
    display: block;
    margin-bottom: 8px;
    color: var(--pe-text);
    font-size: 22px;
    line-height: 1.1;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .psyx-editorial-page .pe-stat p {
    font-size: 14.5px;
    line-height: 1.62;
  }

  /* OVERVIEW */
  .psyx-editorial-page .pe-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 24px;
    align-items: stretch;
  }

  .psyx-editorial-page .pe-overview-image {
    position: relative;
    min-height: 590px;
    overflow: hidden;
    border-radius: 32px;
    box-shadow: var(--pe-shadow-lg);
    background: #efe8ff;
  }

  .psyx-editorial-page .pe-overview-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(19, 16, 30, 0.04), rgba(19, 16, 30, 0.20));
    pointer-events: none;
  }

  .psyx-editorial-page .pe-note {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .psyx-editorial-page .pe-note p {
    font-size: 13.8px;
  }

  .psyx-editorial-page .pe-overview-copy {
    display: grid;
    align-content: start;
    gap: 18px;
  }

  .psyx-editorial-page .pe-copy-card {
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,0.84);
    border-color: var(--pe-line-2);
    backdrop-filter: blur(12px);
  }

  .psyx-editorial-page .pe-copy-card h3 {
    font-size: 22px;
  }

  .psyx-editorial-page .pe-copy-card p {
    font-size: 14.5px;
    line-height: 1.72;
  }

  .psyx-editorial-page .pe-benefit-list {
    display: grid;
    gap: 14px;
  }

  .psyx-editorial-page .pe-benefit {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(246,241,255,0.90));
  }

  .psyx-editorial-page .pe-benefit-icon {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(104, 66, 244, 0.14), rgba(169, 154, 255, 0.22));
    color: var(--pe-brand);
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
  }

  .psyx-editorial-page .pe-benefit strong {
    display: block;
    margin-bottom: 6px;
    color: var(--pe-text);
    font-size: 18px;
    line-height: 1.32;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .psyx-editorial-page .pe-benefit p {
    font-size: 14.5px;
    line-height: 1.68;
  }

  /* DIMENSIONS */
  .psyx-editorial-page .pe-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .psyx-editorial-page .pe-card {
    padding: 24px;
    border-radius: 26px;
    background:
      radial-gradient(circle at 100% 0, rgba(104, 66, 244, 0.08), transparent 34%),
      rgba(255,255,255,0.90);
    position: relative;
    overflow: hidden;
  }

  .psyx-editorial-page .pe-card::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    right: -55px;
    bottom: -60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(104, 66, 244, 0.10), rgba(104, 66, 244, 0));
    pointer-events: none;
  }

  .psyx-editorial-page .pe-card-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(104, 66, 244, 0.15), rgba(170, 154, 255, 0.22));
    color: var(--pe-brand);
    font-size: 17px;
    line-height: 1;
    font-weight: 700;
    position: relative;
    z-index: 1;
  }

  .psyx-editorial-page .pe-card h3 {
    margin-bottom: 10px;
    font-size: 20px;
    position: relative;
    z-index: 1;
  }

  .psyx-editorial-page .pe-card p {
    position: relative;
    z-index: 1;
  }

  /* WORKFLOW */
  .psyx-editorial-page .pe-flow-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: 24px;
    align-items: stretch;
  }

  .psyx-editorial-page .pe-steps {
    display: grid;
    gap: 16px;
  }

  .psyx-editorial-page .pe-step {
    position: relative;
    padding: 22px 22px 22px 82px;
    border-radius: 26px;
  }

  .psyx-editorial-page .pe-step-no {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--pe-brand), #8368ff);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(104, 66, 244, 0.24);
  }

  .psyx-editorial-page .pe-step h3 {
    font-size: 20px;
  }

  .psyx-editorial-page .pe-side-stack {
    display: grid;
    gap: 16px;
    height: 100%;
  }

  .psyx-editorial-page .pe-side-panel {
    padding: 24px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(246,241,255,0.92));
  }

  .psyx-editorial-page .pe-side-panel h3 {
    margin: 0 0 10px;
    color: var(--pe-text);
    font-size: 24px;
    line-height: 1.22;
    font-weight: 700;
  }

  .psyx-editorial-page .pe-side-panel p {
    font-size: 14.5px;
    line-height: 1.72;
  }

  .psyx-editorial-page .pe-inline-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
  }

  .psyx-editorial-page .pe-inline-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(104, 66, 244, 0.10);
  }

  .psyx-editorial-page .pe-inline-item strong {
    color: var(--pe-text);
    font-size: 14.2px;
    line-height: 1.4;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .psyx-editorial-page .pe-inline-item span {
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--pe-brand-soft);
    color: var(--pe-brand);
    font-size: 11.5px;
    line-height: 1;
    white-space: nowrap;
    font-weight: 700;
  }

  .psyx-editorial-page .pe-mini-visual {
    min-height: 300px;
    overflow: hidden;
    border-radius: 28px;
    background: #ece5ff;
    box-shadow: var(--pe-shadow-lg);
  }

  /* COMPARISON */
  .psyx-editorial-page .pe-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .psyx-editorial-page .pe-compare-card {
    padding: 26px;
    border-radius: 28px;
  }

  .psyx-editorial-page .pe-compare-card.before {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,246,255,0.96));
  }

  .psyx-editorial-page .pe-compare-card.after {
    background: linear-gradient(180deg, rgba(239,234,255,0.82), rgba(255,255,255,0.98));
    border-color: rgba(104, 66, 244, 0.18);
  }

  .psyx-editorial-page .pe-compare-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
  }

  .psyx-editorial-page .pe-compare-badge {
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    border-radius: 17px;
    display: grid;
    place-items: center;
    font-size: 21px;
    line-height: 1;
    font-weight: 700;
  }

  .psyx-editorial-page .before .pe-compare-badge {
    background: rgba(29, 26, 39, 0.08);
    color: var(--pe-text);
  }

  .psyx-editorial-page .after .pe-compare-badge {
    background: rgba(104, 66, 244, 0.14);
    color: var(--pe-brand);
  }

  .psyx-editorial-page .pe-compare-card p {
    font-size: 14.5px;
    line-height: 1.72;
  }

  .psyx-editorial-page .pe-bullet-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
  }

  .psyx-editorial-page .pe-bullet {
    position: relative;
    padding-left: 24px;
    color: var(--pe-text-soft);
    font-size: 14.5px;
    line-height: 1.68;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .psyx-editorial-page .pe-bullet::before {
    content: "";
    position: absolute;
    left: 0;
    top: .68em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pe-brand);
    box-shadow: 0 0 0 5px rgba(104, 66, 244, 0.10);
  }

  /* CTA */
  .psyx-editorial-page .pe-cta-shell {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    border-radius: 34px;
    box-shadow: var(--pe-shadow-lg);
  }

  .psyx-editorial-page .pe-cta-bg {
    position: absolute;
    inset: 0;
  }

  .psyx-editorial-page .pe-cta-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(22, 18, 34, 0.78) 0%, rgba(22, 18, 34, 0.54) 52%, rgba(22, 18, 34, 0.15) 100%);
  }

  .psyx-editorial-page .pe-cta-content {
    position: relative;
    z-index: 1;
    width: min(580px, 100%);
    padding: 44px;
  }

  .psyx-editorial-page .pe-cta-copy .pe-pill {
    color: #fff;
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.18);
  }

  .psyx-editorial-page .pe-cta-copy .pe-pill::before {
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255,255,255,.10);
  }

  .psyx-editorial-page .pe-cta-copy h2 {
    color: #fff;
    margin-top: 18px;
    margin-bottom: 14px;
  }

  .psyx-editorial-page .pe-cta-copy p {
    color: rgba(255,255,255,0.82);
    margin-bottom: 22px;
  }

  .psyx-editorial-page .pe-cta-copy .pe-btn-secondary {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.20);
    color: #fff;
    box-shadow: none;
    backdrop-filter: blur(10px);
  }

  .psyx-editorial-page .pe-cta-copy .pe-btn-secondary:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
  }

  /* REVEAL */
  .psyx-editorial-page .pe-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
  }

  .psyx-editorial-page .pe-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* RESPONSIVE */
  @media (max-width: 1180px) {
    :root {
      --pe-container: 980px;
      --pe-page-gap: 34px;
      --pe-space: 58px;
    }

    .psyx-editorial-page {
      padding-top: 82px;
    }

    .psyx-editorial-page .pe-hero-grid,
    .psyx-editorial-page .pe-overview-grid,
    .psyx-editorial-page .pe-flow-grid {
      grid-template-columns: 1fr;
    }

    .psyx-editorial-page .pe-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .psyx-editorial-page .pe-overview-image {
      min-height: 520px;
    }
  }

  @media (max-width: 991px) {
    :root {
      --pe-page-gap: 30px;
      --pe-space: 54px;
    }

    .psyx-editorial-page {
      padding-top: 76px;
    }

    .psyx-editorial-page .pe-hero {
      padding-top: 26px;
      padding-bottom: 42px;
    }

    .psyx-editorial-page .pe-hero-layout {
      grid-template-columns: 1fr;
    }

    .psyx-editorial-page .pe-hero-main {
      min-height: 420px;
    }

    .psyx-editorial-page .pe-hero-side {
      grid-template-columns: 1fr 1fr;
    }

    .psyx-editorial-page .pe-hero-side-card {
      min-height: 230px;
    }

    .psyx-editorial-page .pe-stat-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .psyx-editorial-page .pe-compare-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 767px) {
    :root {
      --pe-page-gap: 24px;
      --pe-space: 46px;
    }

    .psyx-editorial-page {
      padding-top: 64px;
    }

    .psyx-editorial-page .pe-container {
      width: min(var(--pe-container), calc(100% - var(--pe-page-gap)));
    }

    .psyx-editorial-page .pe-hero {
      padding: 16px 0 34px;
    }

    .psyx-editorial-page .pe-section {
      padding-block: var(--pe-space);
    }

    .psyx-editorial-page .pe-copy h1 {
      font-size: clamp(30px, 9.5vw, 42px);
      line-height: 1.08;
      margin: 16px 0 12px;
    }

    .psyx-editorial-page .pe-section-head h2,
    .psyx-editorial-page .pe-copy h2,
    .psyx-editorial-page .pe-cta-copy h2 {
      font-size: clamp(24px, 7.4vw, 34px);
      line-height: 1.16;
    }

    .psyx-editorial-page .pe-section-head p,
    .psyx-editorial-page .pe-copy p,
    .psyx-editorial-page .pe-card p,
    .psyx-editorial-page .pe-step p,
    .psyx-editorial-page .pe-stat p,
    .psyx-editorial-page .pe-cta-copy p,
    .psyx-editorial-page .pe-note p,
    .psyx-editorial-page .pe-benefit p,
    .psyx-editorial-page .pe-copy-card p,
    .psyx-editorial-page .pe-side-panel p,
    .psyx-editorial-page .pe-compare-card p {
      font-size: 14px;
      line-height: 1.62;
    }

    .psyx-editorial-page .pe-pill {
      padding: 8px 12px;
      gap: 8px;
      font-size: 9.5px;
      letter-spacing: .075em;
    }

    .psyx-editorial-page .pe-pill::before {
      width: 7px;
      height: 7px;
    }

    .psyx-editorial-page .pe-btn-row {
      flex-direction: column;
      align-items: stretch;
      gap: 11px;
    }

    .psyx-editorial-page .pe-btn {
      width: 100%;
      min-width: 0;
      min-height: 50px;
      padding: 13px 16px;
      border-radius: 14px;
      font-size: 14px;
    }

    .psyx-editorial-page .pe-meta-row {
      gap: 8px;
      margin-top: 18px;
    }

    .psyx-editorial-page .pe-meta-row span {
      font-size: 11.5px;
      padding: 8px 10px;
    }

    .psyx-editorial-page .pe-hero-shell {
      padding: 14px;
      border-radius: 24px;
    }

    .psyx-editorial-page .pe-hero-main {
      min-height: 340px;
      border-radius: 20px;
    }

    .psyx-editorial-page .pe-hero-side {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .psyx-editorial-page .pe-hero-side-card {
      min-height: 180px;
      border-radius: 20px;
    }

    .psyx-editorial-page .pe-float {
      position: relative;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      max-width: none !important;
      margin-top: 14px;
      padding: 14px;
      border-radius: 18px;
    }

    .psyx-editorial-page .pe-stat-grid,
    .psyx-editorial-page .pe-card-grid {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .psyx-editorial-page .pe-stat {
      padding: 16px;
      border-radius: 20px;
      text-align: left;
    }

    .psyx-editorial-page .pe-stat strong {
      display: inline-flex;
      width: fit-content;
      max-width: 100%;
      padding: 8px 13px;
      margin: 0 0 8px;
      border-radius: 999px;
      background: rgba(104, 66, 244, .09);
      font-size: 17px;
      line-height: 1.2;
    }

    .psyx-editorial-page .pe-overview-image {
      min-height: 360px;
      border-radius: 22px;
    }

    .psyx-editorial-page .pe-note {
      left: 12px;
      right: 12px;
      bottom: 12px;
      padding: 14px;
      border-radius: 18px;
    }

    .psyx-editorial-page .pe-copy-card,
    .psyx-editorial-page .pe-side-panel,
    .psyx-editorial-page .pe-compare-card {
      padding: 16px;
      border-radius: 20px;
    }

    .psyx-editorial-page .pe-copy-card h3,
    .psyx-editorial-page .pe-side-panel h3 {
      font-size: 18px;
      line-height: 1.28;
    }

    .psyx-editorial-page .pe-benefit {
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 12px;
      padding: 16px;
      border-radius: 20px;
      align-items: center;
    }

    .psyx-editorial-page .pe-benefit-icon,
    .psyx-editorial-page .pe-card-icon,
    .psyx-editorial-page .pe-step-no,
    .psyx-editorial-page .pe-compare-badge {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      font-size: 14px;
    }

    .psyx-editorial-page .pe-benefit strong {
      font-size: 16px;
      line-height: 1.3;
      margin: 0;
    }

    .psyx-editorial-page .pe-benefit p {
      grid-column: 1 / -1;
      margin-top: 0;
    }

    .psyx-editorial-page .pe-card {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      column-gap: 12px;
      align-items: center;
      padding: 16px;
      border-radius: 20px;
      text-align: left;
    }

    .psyx-editorial-page .pe-card-icon {
      margin: 0;
    }

    .psyx-editorial-page .pe-card h3 {
      margin: 0;
      font-size: 16.5px;
      line-height: 1.32;
    }

    .psyx-editorial-page .pe-card p {
      grid-column: 1 / -1;
      margin-top: 12px;
      text-align: left;
    }

    .psyx-editorial-page .pe-flow-grid {
      gap: 16px;
    }

    .psyx-editorial-page .pe-steps {
      gap: 14px;
    }

    .psyx-editorial-page .pe-step {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      padding: 16px;
      border-radius: 20px;
    }

    .psyx-editorial-page .pe-step-no {
      position: static;
    }

    .psyx-editorial-page .pe-step h3 {
      margin: 0;
      font-size: 16.5px;
      line-height: 1.32;
    }

    .psyx-editorial-page .pe-step p {
      grid-column: 1 / -1;
      margin-top: 0;
    }

    .psyx-editorial-page .pe-inline-list {
      gap: 10px;
      margin-top: 14px;
    }

    .psyx-editorial-page .pe-inline-item {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      padding: 12px;
      border-radius: 14px;
    }

    .psyx-editorial-page .pe-inline-item strong {
      font-size: 13.5px;
      line-height: 1.35;
    }

    .psyx-editorial-page .pe-inline-item span {
      font-size: 10.5px;
      padding: 7px 9px;
    }

    .psyx-editorial-page .pe-mini-visual {
      min-height: 220px;
      border-radius: 20px;
    }

    .psyx-editorial-page .pe-compare-top {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      margin-bottom: 14px;
    }

    .psyx-editorial-page .pe-compare-card h3 {
      font-size: 17px;
      line-height: 1.32;
    }

    .psyx-editorial-page .pe-bullet-list {
      gap: 9px;
      margin-top: 14px;
    }

    .psyx-editorial-page .pe-bullet {
      font-size: 13.5px;
      line-height: 1.6;
      padding-left: 22px;
    }

    .psyx-editorial-page .pe-bullet::before {
      width: 8px;
      height: 8px;
      box-shadow: 0 0 0 4px rgba(104, 66, 244, 0.10);
    }

    .psyx-editorial-page .pe-cta-shell {
      min-height: 380px;
      border-radius: 22px;
    }

    .psyx-editorial-page .pe-cta-shell::after {
      background: linear-gradient(90deg, rgba(22, 18, 34, 0.82) 0%, rgba(22, 18, 34, 0.64) 72%, rgba(22, 18, 34, 0.42) 100%);
    }

    .psyx-editorial-page .pe-cta-content {
      padding: 24px 18px;
    }
  }

  @media (max-width: 430px) {
    :root {
      --pe-page-gap: 22px;
      --pe-space: 42px;
    }

    .psyx-editorial-page {
      padding-top: 58px;
    }

    .psyx-editorial-page .pe-hero {
      padding-top: 10px;
      padding-bottom: 30px;
    }

    .psyx-editorial-page .pe-copy h1 {
      font-size: clamp(27px, 9vw, 36px);
    }

    .psyx-editorial-page .pe-section-head h2,
    .psyx-editorial-page .pe-copy h2,
    .psyx-editorial-page .pe-cta-copy h2 {
      font-size: clamp(22px, 7vw, 30px);
    }

    .psyx-editorial-page .pe-hero-shell,
    .psyx-editorial-page .pe-stat,
    .psyx-editorial-page .pe-copy-card,
    .psyx-editorial-page .pe-benefit,
    .psyx-editorial-page .pe-card,
    .psyx-editorial-page .pe-step,
    .psyx-editorial-page .pe-side-panel,
    .psyx-editorial-page .pe-compare-card {
      padding: 14px;
      border-radius: 18px;
    }

    .psyx-editorial-page .pe-hero-main {
      min-height: 320px;
    }

    .psyx-editorial-page .pe-benefit,
    .psyx-editorial-page .pe-card,
    .psyx-editorial-page .pe-step,
    .psyx-editorial-page .pe-compare-top {
      grid-template-columns: 40px minmax(0, 1fr);
      column-gap: 11px;
    }

    .psyx-editorial-page .pe-benefit-icon,
    .psyx-editorial-page .pe-card-icon,
    .psyx-editorial-page .pe-step-no,
    .psyx-editorial-page .pe-compare-badge {
      width: 40px;
      height: 40px;
      border-radius: 13px;
    }

    .psyx-editorial-page .pe-overview-image {
      min-height: 330px;
    }

    .psyx-editorial-page .pe-inline-item {
      grid-template-columns: 1fr;
    }

    .psyx-editorial-page .pe-inline-item span {
      width: fit-content;
    }
  }

  @media (max-width: 360px) {
    :root {
      --pe-page-gap: 18px;
    }

    .psyx-editorial-page {
      padding-top: 54px;
    }

    .psyx-editorial-page .pe-copy h1 {
      font-size: 25px;
    }

    .psyx-editorial-page .pe-pill {
      font-size: 8.5px;
      letter-spacing: .055em;
      padding: 7px 10px;
    }

    .psyx-editorial-page .pe-hero-shell,
    .psyx-editorial-page .pe-stat,
    .psyx-editorial-page .pe-copy-card,
    .psyx-editorial-page .pe-benefit,
    .psyx-editorial-page .pe-card,
    .psyx-editorial-page .pe-step,
    .psyx-editorial-page .pe-side-panel,
    .psyx-editorial-page .pe-compare-card {
      padding: 13px;
    }

    .psyx-editorial-page .pe-hero-main {
      min-height: 300px;
    }
  }

  @media (hover: none) {
    .psyx-editorial-page .pe-btn:hover,
    .psyx-editorial-page .pe-stat:hover,
    .psyx-editorial-page .pe-copy-card:hover,
    .psyx-editorial-page .pe-benefit:hover,
    .psyx-editorial-page .pe-card:hover,
    .psyx-editorial-page .pe-step:hover,
    .psyx-editorial-page .pe-side-panel:hover,
    .psyx-editorial-page .pe-compare-card:hover {
      transform: none;
    }
  }

  /* =====================================================
     MOBILE ACTION LIST POLISH
     Makes "What recruiters can act on immediately" cards cleaner
  ===================================================== */

  @media (max-width: 767px) {
    .psyx-editorial-page .pe-side-panel {
      overflow: hidden;
    }

    .psyx-editorial-page .pe-side-panel .pe-inline-list {
      gap: 10px;
      margin-top: 16px;
    }

    .psyx-editorial-page .pe-side-panel .pe-inline-item {
      position: relative;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 13px 12px;
      border-radius: 16px;
      background:
        radial-gradient(circle at 100% 0%, rgba(104, 66, 244, .09), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,248,255,.94));
      border: 1px solid rgba(104, 66, 244, .12);
      box-shadow: 0 12px 26px rgba(27, 22, 44, .055);
      text-align: left;
      overflow: hidden;
    }

    .psyx-editorial-page .pe-side-panel .pe-inline-item::before {
      content: "";
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: block;
      background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.92), transparent 24%),
        linear-gradient(135deg, rgba(104, 66, 244, .95), rgba(131, 104, 255, .95));
      box-shadow: 0 10px 20px rgba(104, 66, 244, .18);
    }

    .psyx-editorial-page .pe-side-panel .pe-inline-item::after {
      content: "";
      position: absolute;
      left: 24px;
      top: 24px;
      width: 8px;
      height: 14px;
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: rotate(45deg);
      pointer-events: none;
    }

    .psyx-editorial-page .pe-side-panel .pe-inline-item strong {
      color: var(--pe-text);
      font-size: 14px;
      line-height: 1.34;
      font-weight: 700;
      text-align: left;
      min-width: 0;
    }

    .psyx-editorial-page .pe-side-panel .pe-inline-item span {
      justify-self: end;
      width: fit-content;
      max-width: 100%;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(104, 66, 244, .09);
      color: var(--pe-brand);
      border: 1px solid rgba(104, 66, 244, .10);
      font-size: 10.8px;
      line-height: 1;
      font-weight: 800;
      letter-spacing: .02em;
      white-space: nowrap;
      text-align: center;
    }
  }

  @media (max-width: 430px) {
    .psyx-editorial-page .pe-side-panel .pe-inline-list {
      gap: 9px;
    }

    .psyx-editorial-page .pe-side-panel .pe-inline-item {
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 9px 10px;
      padding: 12px;
      border-radius: 15px;
    }

    .psyx-editorial-page .pe-side-panel .pe-inline-item span {
      grid-column: 2;
      justify-self: start;
      margin-top: -2px;
      font-size: 10.5px;
      padding: 7px 9px;
    }

    .psyx-editorial-page .pe-side-panel .pe-inline-item strong {
      font-size: 13.6px;
    }
  }

  @media (max-width: 360px) {
    .psyx-editorial-page .pe-side-panel .pe-inline-item {
      grid-template-columns: 32px minmax(0, 1fr);
      padding: 11px;
    }

    .psyx-editorial-page .pe-side-panel .pe-inline-item::before {
      width: 32px;
      height: 32px;
      border-radius: 11px;
    }

    .psyx-editorial-page .pe-side-panel .pe-inline-item::after {
      left: 23px;
      top: 23px;
    }
  }

/*===================================================================================
    11. Psychometric Assessment Platform CSS End
===================================================================================*/


/*===================================================================================
    12. AI Interview Platform CSS Start
===================================================================================*/


  :root {
    --lp-bg: #f7f5ff;
    --lp-surface: #ffffff;
    --lp-surface-2: #fcfbff;
    --lp-line: rgba(104, 66, 244, 0.10);
    --lp-line-strong: rgba(104, 66, 244, 0.18);
    --lp-text: #544d74;
    --lp-heading: #20193f;
    --lp-accent: #6b56f5;
    --lp-accent-2: #8f7cff;
    --lp-soft: #efeaff;
    --lp-shadow: 0 16px 42px rgba(32, 25, 63, 0.075);
    --lp-shadow-lg: 0 26px 68px rgba(32, 25, 63, 0.12);
    --lp-radius: 28px;
    --lp-radius-sm: 20px;
    --lp-max: 1160px;
    --lp-page-gap: 44px;
    --lp-space: clamp(46px, 4.8vw, 70px);
    --lp-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--lp-text);
    background:
      radial-gradient(circle at 0% 6%, rgba(107, 86, 245, 0.10), transparent 27%),
      radial-gradient(circle at 100% 14%, rgba(143, 124, 255, 0.10), transparent 24%),
      radial-gradient(circle at 6% 92%, rgba(107, 86, 245, 0.07), transparent 24%),
      linear-gradient(180deg, #ffffff 0%, #fbf9ff 46%, #f7f4ff 100%);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .premium-interview-page,
  .premium-interview-page * {
    box-sizing: border-box;
  }

  .premium-interview-page {
    position: relative;
    overflow: hidden;
    min-width: 320px;
    color: var(--lp-text);
    background:
      radial-gradient(circle at top left, rgba(107, 86, 245, 0.08), transparent 28%),
      radial-gradient(circle at right 18%, rgba(143, 124, 255, 0.08), transparent 24%),
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(251,249,255,.96) 45%, rgba(247,244,255,.98) 100%);
  }

  .premium-interview-page a {
    text-decoration: none;
    color: inherit;
  }

  .premium-interview-page img,
  .premium-interview-page svg {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .premium-interview-page .container {
    width: min(var(--lp-max), calc(100% - var(--lp-page-gap)));
    margin: 0 auto;
  }

  .premium-interview-page .section {
    padding: var(--lp-space) 0;
    position: relative;
  }

  .premium-interview-page .label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    max-width: 100%;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(107, 86, 245, 0.08);
    border: 1px solid rgba(107, 86, 245, 0.14);
    color: var(--lp-accent);
    font-size: 12px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(107, 86, 245, 0.06);
    overflow-wrap: anywhere;
  }

  .premium-interview-page .label::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lp-accent), #18bdf5);
    box-shadow: 0 0 0 5px rgba(107, 86, 245, 0.10);
    flex: 0 0 auto;
  }

  .premium-interview-page h1,
  .premium-interview-page h2,
  .premium-interview-page h3,
  .premium-interview-page h4 {
    margin: 0;
    color: var(--lp-heading);
    font-weight: 700;
    letter-spacing: -0.035em;
    overflow-wrap: anywhere;
  }

  .premium-interview-page p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    color: var(--lp-text);
    overflow-wrap: anywhere;
  }

  .premium-interview-page .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  .premium-interview-page .btn {
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid transparent;
    transition: var(--lp-transition);
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
  }

  .premium-interview-page .btn:hover {
    transform: translateY(-3px);
  }

  .premium-interview-page .btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--lp-accent) 0%, var(--lp-accent-2) 100%);
    box-shadow: 0 16px 34px rgba(107, 86, 245, 0.24);
  }

  .premium-interview-page .btn-primary:hover {
    color: #fff;
    box-shadow: 0 22px 46px rgba(107, 86, 245, 0.30);
  }

  .premium-interview-page .btn-secondary {
    color: var(--lp-heading);
    background: rgba(255,255,255,0.90);
    border-color: rgba(32,25,63,0.08);
    box-shadow: 0 10px 24px rgba(32,25,63,0.06);
  }

  /* HERO */
  .premium-interview-page .hero {
    padding: clamp(84px, 8vw, 112px) 0 clamp(48px, 5vw, 70px);
  }

  .premium-interview-page .hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
    gap: 30px;
    align-items: center;
  }

  .premium-interview-page .hero-copy {
    min-width: 0;
    padding-right: 8px;
  }

  .premium-interview-page .hero-copy h1 {
    margin: 18px 0 16px;
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.05;
    max-width: 700px;
    letter-spacing: -0.052em;
    text-wrap: balance;
  }

  .premium-interview-page .hero-copy h1 span {
    color: var(--lp-accent);
  }

  .premium-interview-page .hero-copy p {
    max-width: 620px;
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.72;
  }

  .premium-interview-page .hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
    margin-top: 26px;
  }

  .premium-interview-page .metric-pill {
    padding: 17px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, rgba(107,86,245,.08), transparent 35%),
      rgba(255,255,255,0.82);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(107,86,245,0.10);
    box-shadow: 0 12px 30px rgba(32,25,63,0.06);
  }

  .premium-interview-page .metric-pill strong {
    display: block;
    margin-bottom: 7px;
    color: var(--lp-heading);
    font-size: 23px;
    line-height: 1.05;
    font-weight: 700;
  }

  .premium-interview-page .metric-pill span {
    display: block;
    font-size: 12.7px;
    line-height: 1.58;
    color: var(--lp-text);
    font-weight: 500;
  }

  .premium-interview-page .hero-visual {
    position: relative;
    min-height: 560px;
  }

  .premium-interview-page .hero-image-wrap {
    position: relative;
    height: 100%;
    border-radius: 34px;
    overflow: hidden;
    box-shadow: var(--lp-shadow-lg);
    background: #eae5ff;
  }

  .premium-interview-page .hero-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(19,14,42,0.05) 0%, rgba(19,14,42,0.14) 100%),
      radial-gradient(circle at 0 100%, rgba(107,86,245,.25), transparent 38%);
    pointer-events: none;
  }

  .premium-interview-page .hero-image-wrap img {
    height: 100%;
    min-height: 560px;
    object-fit: cover;
  }

  .premium-interview-page .floating-card {
    position: absolute;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.62);
    box-shadow: 0 20px 45px rgba(32,25,63,0.12);
    border-radius: 22px;
    transition: var(--lp-transition);
  }

  .premium-interview-page .floating-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 54px rgba(32,25,63,0.14);
  }

  .premium-interview-page .floating-card.top {
    top: 26px;
    left: -12px;
    width: 248px;
    padding: 17px;
  }

  .premium-interview-page .floating-card.bottom {
    right: -12px;
    bottom: 26px;
    width: 260px;
    padding: 17px;
  }

  .premium-interview-page .floating-card .kicker {
    display: inline-flex;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(107,86,245,0.10);
    color: var(--lp-accent);
    font-size: 11.5px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 12px;
  }

  .premium-interview-page .floating-card h4 {
    font-size: 17px;
    line-height: 1.32;
    margin-bottom: 9px;
  }

  .premium-interview-page .floating-card p {
    font-size: 13.2px;
    line-height: 1.62;
  }

  .premium-interview-page .mini-bars {
    display: grid;
    gap: 10px;
    margin-top: 12px;
  }

  .premium-interview-page .mini-bars span {
    display: block;
    height: 8px;
    background: rgba(107,86,245,0.10);
    border-radius: 999px;
    overflow: hidden;
  }

  .premium-interview-page .mini-bars span i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,var(--lp-accent),var(--lp-accent-2));
  }

  .premium-interview-page .trust-strip {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .premium-interview-page .trust-strip span {
    max-width: 100%;
    padding: 9px 13px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(32,25,63,0.08);
    box-shadow: 0 8px 18px rgba(32,25,63,0.05);
    font-size: 12.7px;
    line-height: 1.25;
    color: var(--lp-heading);
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  /* COMMON CARD EFFECTS */
  .premium-interview-page .editorial-panel,
  .premium-interview-page .story-block,
  .premium-interview-page .split-highlight,
  .premium-interview-page .step-card,
  .premium-interview-page .quote-card,
  .premium-interview-page .insight-card,
  .premium-interview-page .stat-box,
  .premium-interview-page .metric-pill {
    transition: var(--lp-transition);
  }

  .premium-interview-page .story-block:hover,
  .premium-interview-page .step-card:hover,
  .premium-interview-page .quote-card:hover,
  .premium-interview-page .insight-card:hover,
  .premium-interview-page .stat-box:hover,
  .premium-interview-page .metric-pill:hover {
    transform: translateY(-4px);
    box-shadow: var(--lp-shadow-lg);
  }

  .premium-interview-page .editorial-panel {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 26px;
    align-items: center;
    padding: 30px;
    border-radius: 32px;
    background: rgba(255,255,255,0.82);
    border: 1px solid var(--lp-line);
    box-shadow: var(--lp-shadow);
    backdrop-filter: blur(10px);
  }

  .premium-interview-page .section-head {
    max-width: 760px;
    margin-bottom: 34px;
  }

  .premium-interview-page .section-head h2 {
    margin: 16px 0 12px;
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.12;
    text-wrap: balance;
  }

  .premium-interview-page .image-card {
    position: relative;
    min-height: 480px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--lp-shadow-lg);
    background: #eae5ff;
  }

  .premium-interview-page .image-card img {
    height: 100%;
    min-height: 480px;
    object-fit: cover;
  }

  .premium-interview-page .image-card .overlay-note {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    padding: 17px 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.86);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.72);
    box-shadow: 0 14px 34px rgba(32,25,63,0.10);
  }

  .premium-interview-page .overlay-note strong {
    display: block;
    color: var(--lp-heading);
    margin-bottom: 6px;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
  }

  .premium-interview-page .overlay-note span {
    display: block;
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--lp-text);
    font-weight: 400;
  }

  .premium-interview-page .feature-stack {
    display: grid;
    gap: 0;
    margin-top: 24px;
  }

  .premium-interview-page .feature-line {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: flex-start;
    padding: 15px 0;
    border-top: 1px solid rgba(32,25,63,0.08);
  }

  .premium-interview-page .feature-line:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .premium-interview-page .feature-no {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(107,86,245,0.08);
    color: var(--lp-accent);
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
  }

  .premium-interview-page .feature-line h3 {
    font-size: 19px;
    line-height: 1.34;
    margin-bottom: 6px;
  }

  .premium-interview-page .mosaic {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 20px;
  }

  .premium-interview-page .mosaic-col {
    display: grid;
    gap: 20px;
  }

  .premium-interview-page .story-block {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-line);
    box-shadow: var(--lp-shadow);
  }

  .premium-interview-page .story-image {
    height: 300px;
    overflow: hidden;
  }

  .premium-interview-page .story-image img {
    height: 100%;
    object-fit: cover;
  }

  .premium-interview-page .story-copy {
    padding: 22px;
  }

  .premium-interview-page .story-copy h3 {
    font-size: 22px;
    line-height: 1.28;
    margin-bottom: 10px;
  }

  .premium-interview-page .story-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 15px;
  }

  .premium-interview-page .story-meta span {
    max-width: 100%;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(107,86,245,0.08);
    color: var(--lp-accent);
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .premium-interview-page .split-highlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
    padding: 30px;
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,244,255,0.96));
    border: 1px solid var(--lp-line);
    box-shadow: var(--lp-shadow);
  }

  .premium-interview-page .highlight-copy h2 {
    font-size: clamp(30px,3.6vw,44px);
    line-height: 1.12;
    margin: 16px 0 14px;
    text-wrap: balance;
  }

  .premium-interview-page .stat-row {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
    margin-top: 24px;
  }

  .premium-interview-page .stat-box {
    padding: 17px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(107,86,245,0.10);
    box-shadow: 0 12px 30px rgba(32,25,63,0.05);
  }

  .premium-interview-page .stat-box strong {
    display: block;
    color: var(--lp-heading);
    font-size: 25px;
    line-height: 1.08;
    margin-bottom: 7px;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .premium-interview-page .stat-box span {
    display: block;
    font-size: 12.8px;
    line-height: 1.58;
    color: var(--lp-text);
    font-weight: 500;
  }

  .premium-interview-page .steps {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
  }

  .premium-interview-page .step-card {
    padding: 24px;
    border-radius: 26px;
    background:
      radial-gradient(circle at 100% 0, rgba(107,86,245,.08), transparent 35%),
      rgba(255,255,255,0.88);
    border: 1px solid var(--lp-line);
    box-shadow: var(--lp-shadow);
  }

  .premium-interview-page .step-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: rgba(107,86,245,0.08);
    color: var(--lp-accent);
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 16px;
  }

  .premium-interview-page .step-card h3 {
    font-size: 20px;
    line-height: 1.28;
    margin-bottom: 10px;
  }

  .premium-interview-page .quote-panel {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 22px;
    align-items: stretch;
  }

  .premium-interview-page .quote-card,
  .premium-interview-page .insight-card {
    border-radius: 30px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--lp-line);
    box-shadow: var(--lp-shadow);
  }

  .premium-interview-page .quote-card {
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243,239,255,0.96));
  }

  .premium-interview-page .quote-mark {
    color: var(--lp-accent);
    font-size: 52px;
    line-height: .8;
    margin-bottom: 16px;
    font-weight: 700;
  }

  .premium-interview-page .quote-card p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--lp-heading);
    max-width: 520px;
  }

  .premium-interview-page .quote-person {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(32,25,63,0.08);
  }

  .premium-interview-page .quote-person strong {
    display: block;
    font-size: 16px;
    line-height: 1.3;
    color: var(--lp-heading);
    font-weight: 700;
  }

  .premium-interview-page .quote-person span {
    display: block;
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--lp-text);
    font-weight: 400;
  }

  .premium-interview-page .insight-card {
    display: grid;
    grid-template-rows: 280px 1fr;
  }

  .premium-interview-page .insight-card img {
    height: 100%;
    object-fit: cover;
  }

  .premium-interview-page .insight-body {
    padding: 22px;
  }

  .premium-interview-page .insight-body h3 {
    font-size: 22px;
    line-height: 1.28;
    margin-bottom: 10px;
  }

  .premium-interview-page .cta-banner {
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    box-shadow: var(--lp-shadow-lg);
    min-height: 400px;
  }

  .premium-interview-page .cta-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .premium-interview-page .cta-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(22,16,45,0.82) 0%, rgba(22,16,45,0.66) 44%, rgba(22,16,45,0.24) 100%);
  }

  .premium-interview-page .cta-content {
    position: relative;
    z-index: 1;
    padding: 42px;
    max-width: 640px;
  }

  .premium-interview-page .cta-content .label {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.16);
    color: #fff;
  }

  .premium-interview-page .cta-content .label::before {
    background: #fff;
    box-shadow: 0 0 0 6px rgba(255,255,255,0.08);
  }

  .premium-interview-page .cta-content h2 {
    color: #fff;
    margin: 18px 0 12px;
    font-size: clamp(30px,3.8vw,46px);
    line-height: 1.1;
    text-wrap: balance;
  }

  .premium-interview-page .cta-content p {
    color: rgba(255,255,255,0.84);
    margin-bottom: 26px;
    font-size: 15.5px;
  }

  .premium-interview-page .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .75s ease, transform .75s ease;
  }

  .premium-interview-page .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (max-width: 1100px) {
    :root {
      --lp-max: 980px;
      --lp-page-gap: 34px;
      --lp-space: 58px;
    }

    .premium-interview-page .hero-shell,
    .premium-interview-page .editorial-panel,
    .premium-interview-page .mosaic,
    .premium-interview-page .split-highlight,
    .premium-interview-page .quote-panel {
      grid-template-columns: 1fr;
    }

    .premium-interview-page .hero-copy {
      padding-right: 0;
    }

    .premium-interview-page .hero-visual {
      min-height: auto;
      max-width: 780px;
    }

    .premium-interview-page .hero-image-wrap img {
      min-height: 520px;
    }

    .premium-interview-page .floating-card.top {
      left: 16px;
    }

    .premium-interview-page .floating-card.bottom {
      right: 16px;
    }
  }

  @media (max-width: 991px) {
    :root {
      --lp-page-gap: 30px;
      --lp-space: 54px;
    }

    .premium-interview-page .hero {
      padding-top: 82px;
      padding-bottom: 42px;
    }

    .premium-interview-page .hero-metrics,
    .premium-interview-page .stat-row,
    .premium-interview-page .steps {
      grid-template-columns: repeat(2,minmax(0,1fr));
    }
  }

  @media (max-width: 767px) {
    :root {
      --lp-page-gap: 24px;
      --lp-space: 46px;
    }

    .premium-interview-page .container {
      width: min(var(--lp-max), calc(100% - var(--lp-page-gap)));
    }

    .premium-interview-page .hero {
      padding: 64px 0 34px;
    }

    .premium-interview-page .section {
      padding: var(--lp-space) 0;
    }

    .premium-interview-page .hero-copy h1 {
      font-size: clamp(30px, 9.5vw, 42px);
      line-height: 1.1;
      margin: 16px 0 12px;
    }

    .premium-interview-page .section-head h2,
    .premium-interview-page .highlight-copy h2,
    .premium-interview-page .cta-content h2 {
      font-size: clamp(24px, 7.4vw, 34px);
      line-height: 1.16;
    }

    .premium-interview-page p,
    .premium-interview-page .hero-copy p,
    .premium-interview-page .cta-content p {
      font-size: 14px;
      line-height: 1.62;
    }

    .premium-interview-page .label {
      padding: 8px 12px;
      gap: 8px;
      font-size: 9.5px;
      letter-spacing: .075em;
    }

    .premium-interview-page .label::before {
      width: 7px;
      height: 7px;
    }

    .premium-interview-page .btn-row {
      flex-direction: column;
      gap: 11px;
    }

    .premium-interview-page .btn {
      width: 100%;
      min-width: 0;
      min-height: 50px;
      padding: 13px 16px;
      border-radius: 14px;
      font-size: 14px;
    }

    .premium-interview-page .hero-metrics,
    .premium-interview-page .stat-row,
    .premium-interview-page .steps {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .premium-interview-page .metric-pill,
    .premium-interview-page .stat-box {
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 15px;
      border-radius: 18px;
    }

    .premium-interview-page .metric-pill strong,
    .premium-interview-page .stat-box strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      margin: 0;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(107, 86, 245, .09);
      color: var(--lp-heading);
      font-size: 17px;
      line-height: 1.15;
      text-align: center;
    }

    .premium-interview-page .metric-pill span,
    .premium-interview-page .stat-box span {
      font-size: 13px;
      line-height: 1.52;
    }

    .premium-interview-page .trust-strip {
      gap: 8px;
    }

    .premium-interview-page .trust-strip span {
      font-size: 11.5px;
      padding: 8px 10px;
    }

    .premium-interview-page .hero-image-wrap {
      min-height: 360px;
      border-radius: 22px;
    }

    .premium-interview-page .hero-image-wrap img {
      min-height: 360px;
    }

    .premium-interview-page .floating-card {
      position: static;
      width: 100% !important;
      margin-top: 14px;
      padding: 14px;
      border-radius: 18px;
    }

    .premium-interview-page .hero-visual {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .premium-interview-page .editorial-panel,
    .premium-interview-page .split-highlight,
    .premium-interview-page .step-card,
    .premium-interview-page .quote-card,
    .premium-interview-page .insight-body,
    .premium-interview-page .cta-content {
      padding: 16px;
      border-radius: 20px;
    }

    .premium-interview-page .image-card,
    .premium-interview-page .image-card img {
      min-height: 340px;
      border-radius: 20px;
    }

    .premium-interview-page .image-card .overlay-note {
      left: 12px;
      right: 12px;
      bottom: 12px;
      padding: 14px;
      border-radius: 16px;
    }

    .premium-interview-page .overlay-note strong {
      font-size: 15.5px;
    }

    .premium-interview-page .overlay-note span {
      font-size: 12.8px;
      line-height: 1.58;
    }

    .premium-interview-page .feature-line {
      grid-template-columns: 40px 1fr;
      gap: 12px;
      padding: 14px 0;
    }

    .premium-interview-page .feature-no,
    .premium-interview-page .step-chip {
      width: 40px;
      height: 40px;
      border-radius: 13px;
      font-size: 13px;
    }

    .premium-interview-page .feature-line h3 {
      font-size: 16.5px;
      line-height: 1.3;
    }

    .premium-interview-page .story-image {
      height: 230px;
    }

    .premium-interview-page .story-copy {
      padding: 16px;
    }

    .premium-interview-page .story-copy h3,
    .premium-interview-page .insight-body h3,
    .premium-interview-page .step-card h3 {
      font-size: 17px;
      line-height: 1.32;
    }

    .premium-interview-page .story-meta {
      gap: 8px;
    }

    .premium-interview-page .story-meta span {
      font-size: 11.5px;
      padding: 8px 10px;
    }

    .premium-interview-page .step-card {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      column-gap: 12px;
      align-items: center;
    }

    .premium-interview-page .step-chip {
      margin: 0;
    }

    .premium-interview-page .step-card h3 {
      margin: 0;
    }

    .premium-interview-page .step-card p {
      grid-column: 1 / -1;
      margin-top: 12px;
    }

    .premium-interview-page .quote-panel {
      gap: 16px;
    }

    .premium-interview-page .quote-card,
    .premium-interview-page .insight-card {
      border-radius: 20px;
    }

    .premium-interview-page .quote-mark {
      font-size: 42px;
      margin-bottom: 12px;
    }

    .premium-interview-page .quote-card p {
      font-size: 15px;
      line-height: 1.7;
    }

    .premium-interview-page .insight-card {
      grid-template-rows: 220px 1fr;
    }

    .premium-interview-page .cta-banner {
      min-height: 420px;
      border-radius: 22px;
    }

    .premium-interview-page .cta-banner::after {
      background: linear-gradient(180deg, rgba(22,16,45,0.84) 0%, rgba(22,16,45,0.62) 100%);
    }
  }

  @media (max-width: 430px) {
    :root {
      --lp-page-gap: 22px;
      --lp-space: 42px;
    }

    .premium-interview-page .hero {
      padding-top: 58px;
      padding-bottom: 30px;
    }

    .premium-interview-page .hero-copy h1 {
      font-size: clamp(27px, 9vw, 36px);
    }

    .premium-interview-page .section-head h2,
    .premium-interview-page .highlight-copy h2,
    .premium-interview-page .cta-content h2 {
      font-size: clamp(22px, 7vw, 30px);
    }

    .premium-interview-page .editorial-panel,
    .premium-interview-page .split-highlight,
    .premium-interview-page .step-card,
    .premium-interview-page .quote-card,
    .premium-interview-page .insight-body,
    .premium-interview-page .cta-content,
    .premium-interview-page .metric-pill,
    .premium-interview-page .stat-box {
      padding: 14px;
      border-radius: 18px;
    }

    .premium-interview-page .metric-pill,
    .premium-interview-page .stat-box {
      grid-template-columns: 66px minmax(0, 1fr);
    }

    .premium-interview-page .metric-pill strong,
    .premium-interview-page .stat-box strong {
      font-size: 15.5px;
      min-height: 40px;
    }

    .premium-interview-page .image-card,
    .premium-interview-page .image-card img,
    .premium-interview-page .hero-image-wrap,
    .premium-interview-page .hero-image-wrap img {
      min-height: 320px;
    }
  }

  @media (max-width: 360px) {
    :root {
      --lp-page-gap: 18px;
    }

    .premium-interview-page .hero-copy h1 {
      font-size: 25px;
    }

    .premium-interview-page .label {
      font-size: 8.5px;
      letter-spacing: .055em;
      padding: 7px 10px;
    }

    .premium-interview-page .metric-pill,
    .premium-interview-page .stat-box {
      grid-template-columns: 1fr;
    }

    .premium-interview-page .metric-pill strong,
    .premium-interview-page .stat-box strong {
      width: fit-content;
      justify-content: flex-start;
    }
  }

  @media (hover: none) {
    .premium-interview-page .btn:hover,
    .premium-interview-page .floating-card:hover,
    .premium-interview-page .story-block:hover,
    .premium-interview-page .step-card:hover,
    .premium-interview-page .quote-card:hover,
    .premium-interview-page .insight-card:hover,
    .premium-interview-page .stat-box:hover,
    .premium-interview-page .metric-pill:hover {
      transform: none;
    }
  }

/*===================================================================================
    12. AI Interview Platform CSS End
===================================================================================*/


/*===================================================================================
    13. Campus Hiring Platform CSS Start
===================================================================================*/


    :root {
        --chp-primary: #6842f4;
        --chp-primary-dark: #5330e7;
        --chp-accent: #8d75ff;
        --chp-dark: #211a44;
        --chp-text: #595672;
        --chp-soft-text: #7b7793;
        --chp-white: #ffffff;
        --chp-line: rgba(104, 66, 244, 0.12);
        --chp-line-strong: rgba(104, 66, 244, 0.18);
        --chp-shadow: 0 16px 42px rgba(45, 28, 125, 0.075);
        --chp-shadow-lg: 0 26px 68px rgba(45, 28, 125, 0.12);
        --chp-container: 1160px;
        --chp-page-gap: 44px;
        --chp-space: clamp(46px, 4.8vw, 68px);
        --chp-radius-xl: 32px;
        --chp-radius-lg: 26px;
        --chp-radius-md: 20px;
        --chp-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
    }

    html { scroll-behavior: smooth; }

    body {
        margin: 0;
        min-width: 320px;
        overflow-x: hidden;
        font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: var(--chp-text);
        background:
            radial-gradient(circle at 0% 8%, rgba(104, 66, 244, .12), transparent 28%),
            radial-gradient(circle at 100% 4%, rgba(141, 117, 255, .15), transparent 26%),
            linear-gradient(180deg, #ffffff 0%, #fcfbff 42%, #f7f3ff 100%);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    .chp-minimal,
    .chp-minimal * { box-sizing: border-box; }

    .chp-minimal {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        min-width: 320px;
        padding-top: clamp(72px, 6vw, 96px);
        font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: var(--chp-text);
        background:
            radial-gradient(circle at 0% 10%, rgba(104, 66, 244, 0.10), transparent 24%),
            radial-gradient(circle at 100% 10%, rgba(141, 117, 255, 0.12), transparent 22%),
            linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 42%, rgba(247,243,255,.98) 100%);
    }

    .chp-minimal::before,
    .chp-minimal::after {
        content: "";
        position: fixed;
        border-radius: 50%;
        filter: blur(88px);
        pointer-events: none;
        z-index: -1;
        opacity: .68;
    }

    .chp-minimal::before {
        width: 300px;
        height: 300px;
        left: -120px;
        top: 90px;
        background: rgba(104, 66, 244, 0.13);
    }

    .chp-minimal::after {
        width: 340px;
        height: 340px;
        right: -120px;
        top: 320px;
        background: rgba(223, 218, 243, .9);
    }

    .chp-minimal a { color: inherit; text-decoration: none; }
    .chp-minimal img, .chp-minimal svg { max-width: 100%; display: block; }

    .chp-minimal .container {
        width: min(var(--chp-container), calc(100% - var(--chp-page-gap)));
        margin: 0 auto;
    }

    .chp-minimal .section {
        position: relative;
        padding-block: var(--chp-space);
    }

    .chp-minimal .section.soft {
        background:
            radial-gradient(circle at 0 0, rgba(104, 66, 244, .045), transparent 25%),
            linear-gradient(180deg, rgba(104, 66, 244, .03), rgba(255, 255, 255, 0));
    }

    .chp-minimal .eyebrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        max-width: 100%;
        padding: 10px 15px;
        border-radius: 999px;
        background: rgba(104, 66, 244, .08);
        border: 1px solid rgba(104, 66, 244, .13);
        color: var(--chp-primary);
        font-size: 12px;
        line-height: 1.25;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        box-shadow: 0 10px 22px rgba(104, 66, 244, .06);
        overflow-wrap: anywhere;
    }

    .chp-minimal .eyebrow::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--chp-primary), #17bdf5);
        box-shadow: 0 0 0 5px rgba(104, 66, 244, .10);
        flex: 0 0 auto;
    }

    .chp-minimal .section-head {
        max-width: 780px;
        margin-bottom: clamp(24px, 2.8vw, 34px);
    }

    .chp-minimal .section-head h2,
    .chp-minimal .cta-copy h2 {
        margin: 16px 0 12px;
        color: var(--chp-dark);
        font-size: clamp(30px, 3.65vw, 46px);
        line-height: 1.12;
        letter-spacing: -.04em;
        font-weight: 700;
        text-wrap: balance;
        overflow-wrap: anywhere;
    }

    .chp-minimal .section-head p,
    .chp-minimal .hero-copy p,
    .chp-minimal .hero-note p,
    .chp-minimal .metric-card p,
    .chp-minimal .info-card p,
    .chp-minimal .panel p,
    .chp-minimal .step-card p,
    .chp-minimal .compare-card p,
    .chp-minimal .cta-copy p {
        margin: 0;
        color: rgba(89, 86, 114, .88);
        font-size: 15.5px;
        line-height: 1.72;
        font-weight: 400;
        overflow-wrap: anywhere;
    }

    .chp-minimal .hero {
        position: relative;
        padding: clamp(24px, 3vw, 38px) 0 clamp(44px, 5vw, 64px);
    }

    .chp-minimal .hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(420px, 1.02fr);
        gap: 30px;
        align-items: center;
    }

    .chp-minimal .hero-copy { min-width: 0; }

    .chp-minimal .hero-copy h1 {
        margin: 18px 0 16px;
        max-width: 720px;
        color: var(--chp-dark);
        font-size: clamp(38px, 5.15vw, 62px);
        line-height: 1.06;
        letter-spacing: -.052em;
        font-weight: 700;
        text-wrap: balance;
        overflow-wrap: anywhere;
    }

    .chp-minimal .hero-copy h1 span {
        color: var(--chp-primary);
        display: inline;
    }

    .chp-minimal .hero-copy p {
        max-width: 630px;
        font-size: 16px;
        line-height: 1.75;
        margin-bottom: 26px;
    }

    .chp-minimal .hero-actions,
    .chp-minimal .cta-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }

    .chp-minimal .hero-actions { margin-bottom: 24px; }

    .chp-minimal .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 176px;
        min-height: 52px;
        padding: 14px 22px;
        border-radius: 15px;
        border: 1px solid transparent;
        font-size: 14.5px;
        line-height: 1.2;
        font-weight: 700;
        text-align: center;
        transition: var(--chp-transition);
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    .chp-minimal .btn::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .35s ease;
        z-index: -1;
    }

    .chp-minimal .btn:hover { transform: translateY(-3px); }
    .chp-minimal .btn:hover::before { transform: scaleX(1); }

    .chp-minimal .btn-primary {
        color: #fff;
        background: linear-gradient(135deg, var(--chp-primary) 0%, #8062ff 100%);
        box-shadow: 0 18px 36px rgba(104, 66, 244, .24);
    }

    .chp-minimal .btn-primary::before {
        background: linear-gradient(135deg, var(--chp-dark), var(--chp-primary));
    }

    .chp-minimal .btn-secondary {
        color: var(--chp-primary);
        background: rgba(255, 255, 255, .92);
        border-color: rgba(104, 66, 244, .16);
        box-shadow: 0 12px 28px rgba(50, 35, 111, .07);
    }

    .chp-minimal .btn-secondary::before {
        background: linear-gradient(135deg, rgba(104, 66, 244, .06), rgba(104, 66, 244, .12));
    }

    .chp-minimal .hero-tags,
    .chp-minimal .tag-row {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
    }

    .chp-minimal .hero-tags { margin-bottom: 24px; }

    .chp-minimal .hero-tags span,
    .chp-minimal .tag-row span {
        max-width: 100%;
        padding: 9px 12px;
        border-radius: 999px;
        background: rgba(104, 66, 244, .07);
        border: 1px solid rgba(104, 66, 244, .12);
        color: var(--chp-primary);
        font-size: 12.5px;
        line-height: 1.2;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .chp-minimal .hero-note {
        max-width: 620px;
        padding: 17px 18px;
        border-radius: 20px;
        background: rgba(255, 255, 255, .86);
        border: 1px solid rgba(104, 66, 244, .10);
        box-shadow: 0 14px 34px rgba(50, 35, 111, .06);
        backdrop-filter: blur(10px);
    }

    .chp-minimal .hero-note strong {
        display: block;
        color: var(--chp-dark);
        font-size: 17px;
        line-height: 1.3;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .chp-minimal .hero-visual {
        position: relative;
        min-width: 0;
    }

    .chp-minimal .hero-photo-wrap {
        position: relative;
        padding: 18px;
        border-radius: 32px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(248, 244, 255, .96));
        border: 1px solid var(--chp-line);
        box-shadow: var(--chp-shadow-lg);
        backdrop-filter: blur(10px);
        overflow: hidden;
    }

    .chp-minimal .hero-photo-wrap::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 100% 0, rgba(104, 66, 244, .13), transparent 34%),
            linear-gradient(135deg, rgba(104, 66, 244, .03), transparent 52%, rgba(104, 66, 244, .05));
        pointer-events: none;
    }

    .chp-minimal .hero-photo {
        position: relative;
        min-height: 520px;
        border-radius: 26px;
        overflow: hidden;
        background: #ede8ff;
        box-shadow: 0 22px 56px rgba(50, 35, 111, .14);
    }

    .chp-minimal .hero-photo img {
        width: 100%;
        height: 100%;
        min-height: 520px;
        object-fit: cover;
        display: block;
    }

    .chp-minimal .hero-photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(24, 16, 63, 0.06) 0%, rgba(24, 16, 63, 0.16) 42%, rgba(24, 16, 63, 0.72) 100%);
        pointer-events: none;
    }

    .chp-minimal .hero-photo-content {
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 18px;
        z-index: 2;
        padding: 18px;
        border-radius: 22px;
        background: rgba(255, 255, 255, .14);
        border: 1px solid rgba(255, 255, 255, .14);
        backdrop-filter: blur(14px);
    }

    .chp-minimal .hero-photo-content span {
        display: inline-block;
        margin-bottom: 10px;
        color: rgba(255, 255, 255, .84);
        font-size: 11px;
        line-height: 1;
        letter-spacing: .07em;
        text-transform: uppercase;
        font-weight: 700;
    }

    .chp-minimal .hero-photo-content h3 {
        margin: 0 0 8px;
        color: #fff;
        font-size: 22px;
        line-height: 1.28;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .chp-minimal .hero-photo-content p {
        margin: 0;
        color: rgba(255, 255, 255, .86);
        font-size: 13.5px;
        line-height: 1.68;
    }

    .chp-minimal .hero-float {
        position: absolute;
        z-index: 3;
        width: 220px;
        padding: 17px;
        border-radius: 22px;
        background: rgba(255, 255, 255, .92);
        border: 1px solid rgba(104, 66, 244, .12);
        box-shadow: 0 18px 42px rgba(50, 35, 111, .12);
        backdrop-filter: blur(14px);
        transition: var(--chp-transition);
    }

    .chp-minimal .hero-float:hover {
        transform: translateY(-5px);
        box-shadow: 0 24px 54px rgba(50, 35, 111, .16);
    }

    .chp-minimal .hero-float.one { top: 26px; left: 8px; }
    .chp-minimal .hero-float.two { right: 8px; bottom: 110px; }

    .chp-minimal .hero-float-label {
        display: inline-block;
        margin-bottom: 10px;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(104, 66, 244, .08);
        color: var(--chp-primary);
        font-size: 10.5px;
        line-height: 1;
        letter-spacing: .06em;
        text-transform: uppercase;
        font-weight: 700;
    }

    .chp-minimal .hero-float h3 {
        margin: 0 0 8px;
        color: var(--chp-dark);
        font-size: 17px;
        line-height: 1.32;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .chp-minimal .hero-float p {
        margin: 0;
        color: var(--chp-text);
        font-size: 13px;
        line-height: 1.62;
    }

    .chp-minimal .hero-metrics {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-top: 18px;
    }

    .chp-minimal .metric-card,
    .chp-minimal .info-card,
    .chp-minimal .panel,
    .chp-minimal .step-card,
    .chp-minimal .compare-card,
    .chp-minimal .cta-shell {
        background: rgba(255, 255, 255, .94);
        border: 1px solid var(--chp-line);
        box-shadow: var(--chp-shadow);
        transition: var(--chp-transition);
    }

    .chp-minimal .metric-card:hover,
    .chp-minimal .info-card:hover,
    .chp-minimal .panel:hover,
    .chp-minimal .step-card:hover,
    .chp-minimal .compare-card:hover,
    .chp-minimal .cta-shell:hover {
        transform: translateY(-4px);
        box-shadow: var(--chp-shadow-lg);
        border-color: rgba(104, 66, 244, .18);
    }

    .chp-minimal .metric-card {
        padding: 18px;
        border-radius: 20px;
        background:
            radial-gradient(circle at 100% 0, rgba(104, 66, 244, .08), transparent 34%),
            rgba(255, 255, 255, .94);
    }

    .chp-minimal .metric-card strong {
        display: block;
        margin-bottom: 7px;
        color: var(--chp-dark);
        font-size: 23px;
        line-height: 1.05;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .chp-minimal .metric-card p {
        font-size: 13.2px;
        line-height: 1.6;
    }

    .chp-minimal .info-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .chp-minimal .info-card {
        padding: 24px;
        border-radius: 26px;
        background:
            radial-gradient(circle at 100% 0, rgba(104, 66, 244, .08), transparent 34%),
            linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 244, 255, .96));
        position: relative;
        overflow: hidden;
    }

    .chp-minimal .info-card::before,
    .chp-minimal .step-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(104, 66, 244, .03), transparent 50%, rgba(104, 66, 244, .06));
        pointer-events: none;
    }

    .chp-minimal .icon-box,
    .chp-minimal .step-no {
        width: 52px;
        height: 52px;
        border-radius: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        background: linear-gradient(135deg, rgba(104, 66, 244, .15), rgba(223, 218, 243, .95));
        color: var(--chp-primary);
        font-size: 17px;
        line-height: 1;
        font-weight: 700;
        position: relative;
        z-index: 1;
        flex: 0 0 auto;
    }

    .chp-minimal .info-card h3,
    .chp-minimal .panel h3,
    .chp-minimal .step-card h3,
    .chp-minimal .compare-card h3 {
        margin: 0 0 10px;
        color: var(--chp-dark);
        font-size: 20px;
        line-height: 1.3;
        font-weight: 700;
        position: relative;
        z-index: 1;
        overflow-wrap: anywhere;
    }

    .chp-minimal .info-card p,
    .chp-minimal .info-card .tag-row {
        position: relative;
        z-index: 1;
    }

    .chp-minimal .tag-row { margin-top: 15px; }

    .chp-minimal .panel-grid,
    .chp-minimal .compare-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .chp-minimal .panel {
        padding: 26px;
        border-radius: 28px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 244, 255, .96));
    }

    .chp-minimal .check-list,
    .chp-minimal .bullet-list {
        display: grid;
        gap: 11px;
        margin-top: 16px;
    }

    .chp-minimal .check-list div,
    .chp-minimal .bullet-list div {
        position: relative;
        padding-left: 23px;
        color: var(--chp-text);
        font-size: 14.5px;
        line-height: 1.68;
        overflow-wrap: anywhere;
    }

    .chp-minimal .check-list div::before,
    .chp-minimal .bullet-list div::before {
        content: "";
        position: absolute;
        left: 0;
        top: .68em;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--chp-primary);
        box-shadow: 0 0 0 5px rgba(104, 66, 244, .10);
    }

    .chp-minimal .steps-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }

    .chp-minimal .step-card {
        padding: 24px;
        border-radius: 26px;
        position: relative;
        overflow: hidden;
        background: rgba(255, 255, 255, .95);
    }

    .chp-minimal .step-card h3,
    .chp-minimal .step-card p,
    .chp-minimal .step-no {
        position: relative;
        z-index: 1;
    }

    .chp-minimal .compare-card {
        padding: 26px;
        border-radius: 28px;
    }

    .chp-minimal .compare-card.bad {
        background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 247, 255, .96));
    }

    .chp-minimal .compare-card.good {
        background: linear-gradient(180deg, rgba(104, 66, 244, .08), rgba(255, 255, 255, .98));
        border-color: rgba(104, 66, 244, .18);
    }

    .chp-minimal .compare-top {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 16px;
    }

    .chp-minimal .compare-icon {
        width: 50px;
        height: 50px;
        border-radius: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        line-height: 1;
        font-weight: 700;
        flex-shrink: 0;
    }

    .chp-minimal .compare-card.bad .compare-icon {
        background: rgba(33, 26, 68, .08);
        color: var(--chp-dark);
    }

    .chp-minimal .compare-card.good .compare-icon {
        background: rgba(104, 66, 244, .14);
        color: var(--chp-primary);
    }

    .chp-minimal .cta-shell {
        padding: 34px;
        border-radius: 32px;
        background:
            radial-gradient(circle at 100% 0%, rgba(223, 218, 243, .58), transparent 30%),
            linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(246, 244, 254, .98));
        position: relative;
        overflow: hidden;
    }

    .chp-minimal .cta-shell::before,
    .chp-minimal .cta-shell::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: rgba(104, 66, 244, .08);
    }

    .chp-minimal .cta-shell::before {
        width: 170px;
        height: 170px;
        right: -44px;
        bottom: -50px;
    }

    .chp-minimal .cta-shell::after {
        width: 110px;
        height: 110px;
        left: -28px;
        top: -28px;
    }

    .chp-minimal .cta-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 24px;
        align-items: center;
    }

    .chp-minimal .cta-actions { justify-content: flex-end; }

    .chp-minimal .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .85s ease, transform .85s ease;
    }

    .chp-minimal .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }

    @media (max-width: 1180px) {
        :root {
            --chp-container: 980px;
            --chp-page-gap: 34px;
            --chp-space: 58px;
        }

        .chp-minimal { padding-top: 82px; }

        .chp-minimal .hero-grid,
        .chp-minimal .cta-grid {
            grid-template-columns: 1fr;
        }

        .chp-minimal .hero-copy { max-width: 920px; }
        .chp-minimal .hero-visual { max-width: 820px; }
        .chp-minimal .cta-actions { justify-content: flex-start; }

        .chp-minimal .steps-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 991px) {
        :root {
            --chp-page-gap: 30px;
            --chp-space: 54px;
        }

        .chp-minimal { padding-top: 76px; }

        .chp-minimal .hero {
            padding-top: 26px;
            padding-bottom: 44px;
        }

        .chp-minimal .info-grid,
        .chp-minimal .panel-grid,
        .chp-minimal .compare-grid,
        .chp-minimal .hero-metrics {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .chp-minimal .hero-photo,
        .chp-minimal .hero-photo img {
            min-height: 470px;
        }

        .chp-minimal .hero-float.one {
            top: 18px;
            left: 18px;
        }

        .chp-minimal .hero-float.two {
            right: 18px;
            bottom: 100px;
        }
    }

    @media (max-width: 767px) {
        :root {
            --chp-page-gap: 24px;
            --chp-space: 46px;
        }

        .chp-minimal { padding-top: 64px; }

        .chp-minimal .container {
            width: min(var(--chp-container), calc(100% - var(--chp-page-gap)));
        }

        .chp-minimal .hero {
            padding: 16px 0 34px;
        }

        .chp-minimal .section {
            padding-block: var(--chp-space);
        }

        .chp-minimal .section-head {
            margin-bottom: 22px;
        }

        .chp-minimal .hero-copy h1 {
            font-size: clamp(30px, 9.4vw, 42px);
            line-height: 1.1;
            margin: 16px 0 12px;
        }

        .chp-minimal .section-head h2,
        .chp-minimal .cta-copy h2 {
            font-size: clamp(24px, 7.4vw, 34px);
            line-height: 1.16;
        }

        .chp-minimal .section-head p,
        .chp-minimal .hero-copy p,
        .chp-minimal .hero-note p,
        .chp-minimal .metric-card p,
        .chp-minimal .info-card p,
        .chp-minimal .panel p,
        .chp-minimal .step-card p,
        .chp-minimal .compare-card p,
        .chp-minimal .cta-copy p {
            font-size: 14px;
            line-height: 1.62;
        }

        .chp-minimal .eyebrow {
            padding: 8px 12px;
            gap: 8px;
            font-size: 9.5px;
            letter-spacing: .075em;
        }

        .chp-minimal .eyebrow::before {
            width: 7px;
            height: 7px;
        }

        .chp-minimal .hero-actions,
        .chp-minimal .cta-actions {
            flex-direction: column;
            gap: 11px;
        }

        .chp-minimal .btn {
            width: 100%;
            min-width: 0;
            min-height: 50px;
            padding: 13px 16px;
            border-radius: 14px;
            font-size: 14px;
        }

        .chp-minimal .hero-tags,
        .chp-minimal .tag-row {
            gap: 8px;
        }

        .chp-minimal .hero-tags span,
        .chp-minimal .tag-row span {
            white-space: normal;
            font-size: 11.5px;
            padding: 8px 10px;
        }

        .chp-minimal .hero-metrics,
        .chp-minimal .info-grid,
        .chp-minimal .panel-grid,
        .chp-minimal .steps-grid,
        .chp-minimal .compare-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .chp-minimal .hero-photo-wrap {
            padding: 16px;
            border-radius: 24px;
        }

        .chp-minimal .hero-photo {
            min-height: 340px;
            border-radius: 20px;
        }

        .chp-minimal .hero-photo img {
            min-height: 340px;
        }

        .chp-minimal .hero-photo-content {
            left: 12px;
            right: 12px;
            bottom: 12px;
            padding: 14px;
            border-radius: 18px;
        }

        .chp-minimal .hero-photo-content h3 {
            font-size: 18px;
            line-height: 1.28;
        }

        .chp-minimal .hero-photo-content span {
            font-size: 10px;
        }

        .chp-minimal .hero-float {
            position: relative;
            width: 100%;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            bottom: auto !important;
            margin-top: 14px;
            padding: 14px;
            border-radius: 18px;
        }

        .chp-minimal .metric-card,
        .chp-minimal .info-card,
        .chp-minimal .panel,
        .chp-minimal .step-card,
        .chp-minimal .compare-card,
        .chp-minimal .cta-shell,
        .chp-minimal .hero-note {
            padding: 16px;
            border-radius: 20px;
        }

        .chp-minimal .metric-card {
            display: grid;
            grid-template-columns: 74px minmax(0, 1fr);
            gap: 10px;
            align-items: center;
        }

        .chp-minimal .metric-card strong {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            margin: 0;
            padding: 8px 10px;
            border-radius: 14px;
            background: rgba(104, 66, 244, .09);
            font-size: 16.5px;
            line-height: 1.15;
            text-align: center;
        }

        .chp-minimal .metric-card p {
            font-size: 13px;
            line-height: 1.52;
        }

        .chp-minimal .info-card,
        .chp-minimal .step-card {
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr);
            column-gap: 12px;
            align-items: center;
            text-align: left;
        }

        .chp-minimal .icon-box,
        .chp-minimal .step-no,
        .chp-minimal .compare-icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            margin: 0;
            font-size: 14px;
        }

        .chp-minimal .info-card h3,
        .chp-minimal .step-card h3 {
            margin: 0;
            font-size: 16.5px;
            line-height: 1.32;
        }

        .chp-minimal .info-card p,
        .chp-minimal .info-card .tag-row,
        .chp-minimal .step-card p {
            grid-column: 1 / -1;
        }

        .chp-minimal .info-card p,
        .chp-minimal .step-card p {
            margin-top: 12px;
        }

        .chp-minimal .panel h3,
        .chp-minimal .compare-card h3 {
            font-size: 17px;
            line-height: 1.32;
        }

        .chp-minimal .check-list,
        .chp-minimal .bullet-list {
            gap: 9px;
            margin-top: 14px;
        }

        .chp-minimal .check-list div,
        .chp-minimal .bullet-list div {
            font-size: 13.5px;
            line-height: 1.6;
            padding-left: 22px;
        }

        .chp-minimal .check-list div::before,
        .chp-minimal .bullet-list div::before {
            width: 8px;
            height: 8px;
            box-shadow: 0 0 0 4px rgba(104, 66, 244, .10);
        }

        .chp-minimal .compare-top {
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr);
            gap: 12px;
            margin-bottom: 14px;
        }

        .chp-minimal .cta-shell {
            padding: 18px;
        }

        .chp-minimal .cta-grid {
            gap: 16px;
        }
    }

    @media (max-width: 430px) {
        :root {
            --chp-page-gap: 22px;
            --chp-space: 42px;
        }

        .chp-minimal {
            padding-top: 58px;
        }

        .chp-minimal .hero {
            padding-top: 10px;
            padding-bottom: 30px;
        }

        .chp-minimal .hero-copy h1 {
            font-size: clamp(27px, 8.8vw, 36px);
        }

        .chp-minimal .section-head h2,
        .chp-minimal .cta-copy h2 {
            font-size: clamp(22px, 7vw, 30px);
        }

        .chp-minimal .metric-card,
        .chp-minimal .info-card,
        .chp-minimal .panel,
        .chp-minimal .step-card,
        .chp-minimal .compare-card,
        .chp-minimal .cta-shell,
        .chp-minimal .hero-note,
        .chp-minimal .hero-float {
            padding: 14px;
            border-radius: 18px;
        }

        .chp-minimal .metric-card {
            grid-template-columns: 66px minmax(0, 1fr);
        }

        .chp-minimal .metric-card strong {
            font-size: 15.5px;
            min-height: 40px;
        }

        .chp-minimal .info-card,
        .chp-minimal .step-card,
        .chp-minimal .compare-top {
            grid-template-columns: 40px minmax(0, 1fr);
        }

        .chp-minimal .icon-box,
        .chp-minimal .step-no,
        .chp-minimal .compare-icon {
            width: 40px;
            height: 40px;
            border-radius: 13px;
        }

        .chp-minimal .hero-photo,
        .chp-minimal .hero-photo img {
            min-height: 320px;
        }
    }

    @media (max-width: 360px) {
        :root {
            --chp-page-gap: 18px;
        }

        .chp-minimal {
            padding-top: 54px;
        }

        .chp-minimal .hero-copy h1 {
            font-size: 25px;
        }

        .chp-minimal .eyebrow {
            font-size: 8.5px;
            letter-spacing: .055em;
            padding: 7px 10px;
        }

        .chp-minimal .metric-card {
            grid-template-columns: 1fr;
        }

        .chp-minimal .metric-card strong {
            width: fit-content;
            justify-content: flex-start;
        }
    }

    @media (hover: none) {
        .chp-minimal .btn:hover,
        .chp-minimal .hero-float:hover,
        .chp-minimal .metric-card:hover,
        .chp-minimal .info-card:hover,
        .chp-minimal .panel:hover,
        .chp-minimal .step-card:hover,
        .chp-minimal .compare-card:hover,
        .chp-minimal .cta-shell:hover {
            transform: none;
        }
    }

/*===================================================================================
    13. Campus Hiring Platform CSS End
===================================================================================*/


/*===================================================================================
    14. Freshers Hiring Assessments CSS Start
===================================================================================*/

:root {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --bg-purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --slider-dots-color: #D4D2DD;
    --light-bg: #DFDAF3;

    --fh-bg: #f7f3ff;
    --fh-bg-soft: #fcfbff;
    --fh-surface: rgba(255, 255, 255, 0.94);
    --fh-surface-strong: #ffffff;
    --fh-title: var(--dark-purple);
    --fh-text: rgba(62, 63, 102, 0.78);
    --fh-muted: rgba(62, 63, 102, 0.62);
    --fh-line: rgba(106, 73, 242, 0.12);
    --fh-line-strong: rgba(106, 73, 242, 0.20);
    --fh-shadow-sm: 0 10px 28px rgba(50, 35, 111, 0.06);
    --fh-shadow-md: 0 16px 42px rgba(50, 35, 111, 0.085);
    --fh-shadow-lg: 0 28px 72px rgba(50, 35, 111, 0.15);
    --fh-shadow-deep: 0 34px 86px rgba(50, 35, 111, 0.18);
    --fh-radius-xl: 34px;
    --fh-radius-lg: 26px;
    --fh-radius-md: 20px;
    --fh-radius-sm: 16px;
    --fh-wrap: 1160px;
    --fh-page-gap: 44px;
    --fh-section-y: clamp(46px, 4.8vw, 68px);
    --fh-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  }

  * {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 6% 4%, rgba(106, 73, 242, 0.12), transparent 25%),
      radial-gradient(circle at 94% 8%, rgba(223, 218, 243, 0.92), transparent 26%),
      radial-gradient(circle at 4% 92%, rgba(106, 73, 242, 0.07), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fcfbff 44%, #f7f3ff 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--fh-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img {
    max-width: 100%;
    display: block;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .fh-luxe,
  .fh-luxe * {
    box-sizing: border-box;
  }

  .fh-luxe {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    color: var(--fh-text);
    background:
      radial-gradient(circle at top left, rgba(106, 73, 242, 0.11), transparent 25%),
      radial-gradient(circle at top right, rgba(223, 218, 243, 0.76), transparent 22%),
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 42%, rgba(247,243,255,.98) 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .fh-luxe::before,
  .fh-luxe::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(86px);
    z-index: -1;
    pointer-events: none;
    opacity: .72;
  }

  .fh-luxe::before {
    width: 300px;
    height: 300px;
    left: -120px;
    top: 100px;
    background: rgba(106, 73, 242, 0.14);
  }

  .fh-luxe::after {
    width: 360px;
    height: 360px;
    right: -150px;
    top: 640px;
    background: rgba(223, 218, 243, 0.86);
  }

  .fh-luxe .container {
    width: min(var(--fh-wrap), calc(100% - var(--fh-page-gap)));
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .fh-luxe .section {
    padding-block: var(--fh-section-y);
    position: relative;
  }

  .fh-luxe .eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--purple);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 700;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    text-align: center;
    overflow-wrap: anywhere;
  }

  .fh-luxe .eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
  }

  .fh-luxe .section-head {
    display: grid;
    gap: 14px;
    max-width: 800px;
    margin-bottom: clamp(24px, 2.8vw, 36px);
  }

  .fh-luxe .section-head h2,
  .fh-luxe .hero-copy h1,
  .fh-luxe .cta-copy h2,
  .fh-luxe .story-copy h3,
  .fh-luxe .feature-copy h2,
  .fh-luxe .outcomes-copy h2 {
    margin: 0;
    color: var(--fh-title);
    letter-spacing: -0.045em;
    font-weight: 700;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .fh-luxe .section-head h2,
  .fh-luxe .cta-copy h2,
  .fh-luxe .feature-copy h2,
  .fh-luxe .outcomes-copy h2 {
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
  }

  .fh-luxe .section-head .eyebrow,
  .fh-luxe .feature-copy .eyebrow,
  .fh-luxe .story-copy .eyebrow,
  .fh-luxe .outcomes-copy .eyebrow,
  .fh-luxe .cta-copy .eyebrow {
    margin-bottom: 2px;
  }

  .fh-luxe .accent {
    color: var(--purple);
  }

  .fh-luxe .hero-copy p,
  .fh-luxe .section-head p,
  .fh-luxe .feature-copy p,
  .fh-luxe .story-copy p,
  .fh-luxe .outcomes-copy p,
  .fh-luxe .quote-copy p,
  .fh-luxe .cta-copy p,
  .fh-luxe .metric-block p,
  .fh-luxe .process-item p,
  .fh-luxe .mini-point p,
  .fh-luxe .stat-panel p,
  .fh-luxe .metric-chip span,
  .fh-luxe .score-top span,
  .fh-luxe .hero-badge span,
  .fh-luxe .score-list small,
  .fh-luxe .soft-note {
    margin: 0;
    color: var(--fh-text);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  /* HERO */
  .fh-luxe .hero {
    padding: clamp(112px, 8vw, 138px) 0 clamp(42px, 4.8vw, 62px);
    position: relative;
  }

  .fh-luxe .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
    gap: clamp(28px, 4vw, 54px);
    align-items: center;
  }

  .fh-luxe .hero-copy {
    display: grid;
    gap: 22px;
    min-width: 0;
    max-width: 720px;
  }

  .fh-luxe .hero-copy h1 {
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.06;
    max-width: 760px;
  }

  .fh-luxe .hero-copy p {
    max-width: 660px;
    font-size: 16px;
    line-height: 1.76;
  }

  .fh-luxe .hero-actions,
  .fh-luxe .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
  }

  .fh-luxe .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 186px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    white-space: normal;
    transition: var(--fh-transition);
  }

  .fh-luxe .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
  }

  .fh-luxe .btn:hover {
    transform: translateY(-3px);
  }

  .fh-luxe .btn:hover::before {
    transform: scaleX(1);
  }

  .fh-luxe .btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--purple), #8A70FF);
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.24);
  }

  .fh-luxe .btn-primary::before {
    background: linear-gradient(135deg, var(--fh-title), var(--purple));
  }

  .fh-luxe .btn-primary:hover {
    color: #fff;
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.30);
  }

  .fh-luxe .btn-secondary {
    color: var(--purple);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
  }

  .fh-luxe .btn-secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
  }

  .fh-luxe .hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 720px;
  }

  .fh-luxe .metric-chip,
  .fh-luxe .glass-panel,
  .fh-luxe .score-panel,
  .fh-luxe .stat-panel,
  .fh-luxe .quote-band,
  .fh-luxe .proof-shell,
  .fh-luxe .feature-shell,
  .fh-luxe .story-row,
  .fh-luxe .process-shell,
  .fh-luxe .cta-shell,
  .fh-luxe .mini-point,
  .fh-luxe .metric-block,
  .fh-luxe .process-item {
    background: var(--fh-surface);
    border: 1px solid var(--fh-line);
    box-shadow: var(--fh-shadow-md);
    backdrop-filter: blur(14px);
    transition: var(--fh-transition);
  }

  .fh-luxe .metric-chip:hover,
  .fh-luxe .mini-point:hover,
  .fh-luxe .metric-block:hover,
  .fh-luxe .process-item:hover,
  .fh-luxe .feature-shell:hover,
  .fh-luxe .story-row:hover,
  .fh-luxe .quote-band:hover,
  .fh-luxe .cta-shell:hover {
    transform: translateY(-4px);
    box-shadow: var(--fh-shadow-lg);
    border-color: var(--fh-line-strong);
  }

  .fh-luxe .metric-chip {
    min-width: 0;
    padding: 18px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, rgba(106,73,242,.08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .fh-luxe .metric-chip strong {
    display: block;
    margin-bottom: 7px;
    color: var(--fh-title);
    font-size: 20px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
  }

  .fh-luxe .metric-chip span {
    display: block;
    font-size: 12.8px;
    line-height: 1.55;
  }

  /* HERO VISUAL */
  .fh-luxe .hero-media {
    position: relative;
    min-height: 640px;
    display: grid;
    align-items: center;
    min-width: 0;
  }

  .fh-luxe .hero-photo {
    position: relative;
    margin-left: auto;
    width: min(100%, 610px);
    border-radius: var(--fh-radius-xl);
    overflow: hidden;
    box-shadow: var(--fh-shadow-deep);
    border: 1px solid rgba(106, 73, 242, 0.12);
    background: #efeaff;
  }

  .fh-luxe .hero-photo::after,
  .fh-luxe .feature-image::after,
  .fh-luxe .story-media::after,
  .fh-luxe .outcomes-visual::after,
  .fh-luxe .quote-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(23, 15, 60, 0.02), rgba(23, 15, 60, 0.16)),
      radial-gradient(circle at 0 100%, rgba(106, 73, 242, .18), transparent 42%);
    pointer-events: none;
  }

  .fh-luxe .hero-photo img {
    width: 100%;
    height: 620px;
    object-fit: cover;
  }

  .fh-luxe .glass-panel {
    position: absolute;
    padding: 17px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.90);
  }

  .fh-luxe .panel-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--purple);
    font-size: 11px;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 800;
  }

  .fh-luxe .panel-label::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--purple);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, .10);
    flex: 0 0 auto;
  }

  .fh-luxe .hero-badge {
    top: 26px;
    right: 0;
    width: 238px;
  }

  .fh-luxe .hero-badge strong {
    display: block;
    margin-bottom: 6px;
    color: var(--fh-title);
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.03em;
  }

  .fh-luxe .score-panel {
    left: 0;
    bottom: 44px;
    width: min(330px, 76%);
    border-radius: 24px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.92);
  }

  .fh-luxe .score-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }

  .fh-luxe .score-top strong {
    display: block;
    color: var(--fh-title);
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 700;
  }

  .fh-luxe .score-list {
    display: grid;
    gap: 10px;
  }

  .fh-luxe .score-row {
    display: grid;
    gap: 6px;
  }

  .fh-luxe .score-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--fh-title);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
  }

  .fh-luxe .bar-track,
  .fh-luxe .mini-progress {
    width: 100%;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.12);
    overflow: hidden;
  }

  .fh-luxe .bar-track {
    height: 10px;
  }

  .fh-luxe .bar-fill,
  .fh-luxe .mini-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--purple), #9d8cff);
  }

  .fh-luxe .hero-mini-visual {
    right: 22px;
    bottom: 0;
    width: 230px;
    border-radius: 22px;
    padding: 16px;
  }

  .fh-luxe .mini-window {
    overflow: hidden;
    border-radius: 18px;
    background: #fbfaff;
    border: 1px solid rgba(106, 73, 242, 0.08);
  }

  .fh-luxe .mini-window-head {
    display: flex;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(106, 73, 242, 0.08);
  }

  .fh-luxe .mini-window-head span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(106, 73, 242, 0.28);
  }

  .fh-luxe .mini-window-body {
    padding: 14px;
    display: grid;
    gap: 12px;
  }

  .fh-luxe .mini-line {
    display: grid;
    gap: 6px;
  }

  .fh-luxe .mini-line strong {
    display: block;
    color: var(--fh-title);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
  }

  .fh-luxe .mini-progress {
    height: 8px;
  }

  /* PROOF */
  .fh-luxe .proof {
    padding-top: 12px;
    padding-bottom: 20px;
  }

  .fh-luxe .proof-shell {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.90);
  }

  .fh-luxe .metric-block {
    padding: 28px 30px;
    position: relative;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .fh-luxe .metric-block + .metric-block {
    border-left: 1px solid rgba(106, 73, 242, 0.10);
  }

  .fh-luxe .metric-block strong {
    display: block;
    margin-bottom: 10px;
    color: var(--fh-title);
    font-size: clamp(30px, 3.5vw, 44px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.04em;
    overflow-wrap: anywhere;
  }

  /* FEATURE */
  .fh-luxe .feature-shell {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
    gap: 26px;
    border-radius: var(--fh-radius-xl);
    padding: 24px;
    background: rgba(255, 255, 255, 0.90);
  }

  .fh-luxe .feature-image,
  .fh-luxe .story-media,
  .fh-luxe .outcomes-visual,
  .fh-luxe .quote-image {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    min-height: 100%;
    background: #efeaff;
  }

  .fh-luxe .feature-image img,
  .fh-luxe .story-media img,
  .fh-luxe .outcomes-visual img,
  .fh-luxe .quote-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fh-luxe .feature-copy {
    padding: 18px 10px 18px 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
  }

  .fh-luxe .feature-list {
    margin-top: 8px;
    display: grid;
    gap: 0;
  }

  .fh-luxe .feature-list article {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 15px 0;
    border-bottom: 1px solid rgba(106, 73, 242, 0.10);
  }

  .fh-luxe .feature-list article:first-child {
    padding-top: 0;
  }

  .fh-luxe .feature-list article:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .fh-luxe .feature-no {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(106,73,242,0.14), rgba(223,218,243,0.96));
    color: var(--purple);
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
  }

  .fh-luxe .feature-list strong,
  .fh-luxe .mini-point strong,
  .fh-luxe .process-item strong,
  .fh-luxe .stat-panel strong,
  .fh-luxe .quote-meta strong {
    color: var(--fh-title);
    font-weight: 700;
  }

  .fh-luxe .feature-list strong {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.4;
  }

  .fh-luxe .feature-list p {
    margin: 0;
    color: var(--fh-text);
    font-size: 14px;
    line-height: 1.62;
  }

  /* STORY */
  .fh-luxe .story-stack {
    display: grid;
    gap: 24px;
  }

  .fh-luxe .story-row {
    display: grid;
    grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
    gap: 26px;
    padding: 22px;
    border-radius: var(--fh-radius-xl);
    background: rgba(255, 255, 255, 0.90);
  }

  .fh-luxe .story-row.reverse {
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  }

  .fh-luxe .story-row.reverse .story-media {
    order: 2;
  }

  .fh-luxe .story-row.reverse .story-copy {
    order: 1;
  }

  .fh-luxe .story-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 12px 6px;
  }

  .fh-luxe .story-copy h3 {
    font-size: clamp(26px, 3.3vw, 40px);
    line-height: 1.1;
  }

  .fh-luxe .mini-points {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .fh-luxe .mini-point {
    padding: 16px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, rgba(106,73,242,.06), transparent 34%),
      rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(106, 73, 242, 0.10);
    box-shadow: var(--fh-shadow-sm);
  }

  .fh-luxe .mini-point strong {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 1.4;
  }

  .fh-luxe .mini-point p {
    font-size: 13.5px;
    line-height: 1.6;
  }

  /* PROCESS */
  .fh-luxe .process-shell {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: var(--fh-radius-xl);
    background:
      radial-gradient(circle at 0 0, rgba(106, 73, 242, .10), transparent 34%),
      radial-gradient(circle at 100% 0, rgba(223, 218, 243, .42), transparent 30%),
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,243,255,.90));
    border: 1px solid rgba(106, 73, 242, .10);
    box-shadow: var(--fh-shadow-lg);
  }

  .fh-luxe .process-line {
    display: none;
  }

  .fh-luxe .process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .fh-luxe .process-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 0;
    align-items: center;
    min-width: 0;
    padding: 20px;
    border-radius: 22px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,249,255,.94));
    border: 1px solid rgba(106, 73, 242, .10);
    box-shadow: var(--fh-shadow-sm);
  }

  .fh-luxe .process-item::before {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    content: "";
    width: 48px;
    height: 48px;
    display: block;
    margin: 0;
    border-radius: 16px;
    background:
      radial-gradient(circle at 36% 30%, rgba(255,255,255,.95), transparent 18%),
      linear-gradient(135deg, var(--purple), #9d8cff);
    box-shadow: 0 14px 28px rgba(106, 73, 242, .20);
  }

  .fh-luxe .process-step {
    grid-column: 2;
    display: inline-flex;
    width: fit-content;
    margin: 0 0 7px;
    padding: 0;
    color: var(--purple);
    font-size: 11px;
    line-height: 1;
    letter-spacing: .095em;
    text-transform: uppercase;
    font-weight: 800;
    text-align: left;
  }

  .fh-luxe .process-item strong {
    grid-column: 2;
    display: block;
    margin: 0;
    color: var(--fh-title);
    font-size: 17px;
    line-height: 1.3;
    font-weight: 800;
    text-align: left;
  }

  .fh-luxe .process-item p {
    grid-column: 1 / -1;
    margin-top: 14px;
    color: var(--fh-text);
    font-size: 14px;
    line-height: 1.62;
    text-align: left;
  }

  /* OUTCOMES */
  .fh-luxe .outcomes-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(340px, 1.06fr);
    gap: 30px;
    align-items: center;
  }

  .fh-luxe .outcomes-copy {
    display: grid;
    gap: 14px;
  }

  .fh-luxe .outcomes-copy .points {
    margin-top: 8px;
    display: grid;
    gap: 13px;
  }

  .fh-luxe .outcomes-copy .points div {
    position: relative;
    padding-left: 24px;
    color: var(--fh-text);
    font-size: 15px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .fh-luxe .outcomes-copy .points div::before {
    content: "";
    position: absolute;
    left: 0;
    top: .68em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--purple);
    box-shadow: 0 0 0 6px rgba(106, 73, 242, 0.10);
  }

  .fh-luxe .outcomes-visual {
    min-height: 560px;
    box-shadow: var(--fh-shadow-deep);
    border: 1px solid rgba(106, 73, 242, 0.12);
  }

  .fh-luxe .outcomes-visual img {
    height: 560px;
  }

  .fh-luxe .stat-panel {
    position: absolute;
    width: min(260px, calc(100% - 32px));
    padding: 17px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.90);
  }

  .fh-luxe .stat-panel.top {
    top: 24px;
    left: 24px;
  }

  .fh-luxe .stat-panel.bottom {
    bottom: 22px;
    right: 22px;
  }

  .fh-luxe .stat-panel strong {
    display: block;
    margin-bottom: 6px;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .fh-luxe .stat-panel p {
    font-size: 13px;
    line-height: 1.6;
  }

  /* QUOTE */
  .fh-luxe .quote-band {
    display: grid;
    grid-template-columns: minmax(300px, 0.94fr) minmax(0, 1.06fr);
    gap: 0;
    overflow: hidden;
    border-radius: var(--fh-radius-xl);
    background: rgba(255, 255, 255, 0.90);
  }

  .fh-luxe .quote-copy {
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 243, 255, 0.88));
  }

  .fh-luxe .quote-mark {
    color: var(--purple);
    font-size: 54px;
    line-height: .8;
    font-weight: 700;
    margin-bottom: 14px;
  }

  .fh-luxe .quote-copy p {
    font-size: 18px;
    line-height: 1.72;
    color: var(--fh-title);
    max-width: 540px;
  }

  .fh-luxe .quote-meta {
    margin-top: 24px;
  }

  .fh-luxe .quote-meta strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    line-height: 1.4;
  }

  .fh-luxe .quote-meta span {
    display: block;
    color: var(--fh-muted);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
  }

  .fh-luxe .quote-tags {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  .fh-luxe .quote-tags span {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.10);
    color: var(--purple);
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  /* CTA */
  .fh-luxe .cta-shell {
    position: relative;
    overflow: hidden;
    padding: 34px;
    border-radius: var(--fh-radius-xl);
    background:
      radial-gradient(circle at right top, rgba(255,255,255,0.14), transparent 28%),
      linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    color: #fff;
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
    border-color: rgba(255,255,255,0.12);
  }

  .fh-luxe .cta-shell::before,
  .fh-luxe .cta-shell::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    opacity: .24;
  }

  .fh-luxe .cta-shell::before {
    width: 300px;
    height: 300px;
    right: -100px;
    top: -100px;
    background: radial-gradient(circle, rgba(255,255,255,0.56), rgba(255,255,255,0));
  }

  .fh-luxe .cta-shell::after {
    width: 240px;
    height: 240px;
    left: -90px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(255,255,255,0.30), rgba(255,255,255,0));
  }

  .fh-luxe .cta-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
  }

  .fh-luxe .cta-copy {
    display: grid;
    gap: 14px;
  }

  .fh-luxe .cta-copy .eyebrow {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;
  }

  .fh-luxe .cta-copy .eyebrow::before {
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12);
  }

  .fh-luxe .cta-copy h2,
  .fh-luxe .cta-copy p {
    color: #fff;
  }

  .fh-luxe .cta-copy p,
  .fh-luxe .soft-note {
    color: rgba(255, 255, 255, 0.82);
  }

  .fh-luxe .cta-actions {
    justify-content: flex-end;
  }

  .fh-luxe .cta-actions .btn-primary {
    background: #fff;
    color: var(--fh-title);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.10);
  }

  .fh-luxe .cta-actions .btn-primary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
  }

  .fh-luxe .cta-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: none;
  }

  .fh-luxe .soft-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
  }

  .fh-luxe .soft-note::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #37b37e;
    box-shadow: 0 0 0 7px rgba(55, 179, 126, 0.10);
    flex: 0 0 auto;
  }

  /* Reveal */
  .fh-luxe .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .fh-luxe .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Tablet */
  @media (max-width: 1160px) {
    :root {
      --fh-page-gap: 34px;
      --fh-section-y: 58px;
    }

    .fh-luxe .hero-grid,
    .fh-luxe .feature-shell,
    .fh-luxe .outcomes-grid,
    .fh-luxe .cta-grid,
    .fh-luxe .quote-band,
    .fh-luxe .story-row,
    .fh-luxe .story-row.reverse {
      grid-template-columns: 1fr;
    }

    .fh-luxe .story-row.reverse .story-media,
    .fh-luxe .story-row.reverse .story-copy {
      order: initial;
    }

    .fh-luxe .hero-copy {
      max-width: 900px;
    }

    .fh-luxe .hero-media {
      min-height: initial;
      max-width: 820px;
    }

    .fh-luxe .hero-photo {
      width: 100%;
    }

    .fh-luxe .hero-badge {
      right: 20px;
    }

    .fh-luxe .score-panel {
      left: 18px;
    }

    .fh-luxe .cta-actions {
      justify-content: flex-start;
    }
  }

  @media (max-width: 980px) {
    :root {
      --fh-page-gap: 30px;
      --fh-section-y: 54px;
    }

    .fh-luxe .proof-shell,
    .fh-luxe .process-grid,
    .fh-luxe .mini-points,
    .fh-luxe .hero-metrics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fh-luxe .process-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fh-luxe .metric-block:nth-child(3) {
      grid-column: 1 / -1;
      border-left: 0;
      border-top: 1px solid rgba(106, 73, 242, 0.10);
    }

    .fh-luxe .hero-photo img {
      height: 520px;
    }

    .fh-luxe .outcomes-visual,
    .fh-luxe .outcomes-visual img {
      min-height: 500px;
      height: 500px;
    }
  }

  /* Mobile */
  @media (max-width: 767px) {
    :root {
      --fh-page-gap: 24px;
      --fh-section-y: 46px;
    }

    .fh-luxe .container {
      width: min(var(--fh-wrap), calc(100% - var(--fh-page-gap)));
    }

    .fh-luxe .hero {
      padding: 96px 0 30px;
    }

    .fh-luxe .section {
      padding-block: var(--fh-section-y);
    }

    .fh-luxe .section-head {
      margin-bottom: 22px;
    }

    .fh-luxe .hero-copy,
    .fh-luxe .section-head,
    .fh-luxe .feature-copy,
    .fh-luxe .story-copy,
    .fh-luxe .cta-copy {
      text-align: center;
      justify-items: center;
    }

    .fh-luxe .hero-copy h1 {
      font-size: clamp(30px, 9.5vw, 42px);
      line-height: 1.1;
    }

    .fh-luxe .section-head h2,
    .fh-luxe .cta-copy h2,
    .fh-luxe .feature-copy h2,
    .fh-luxe .outcomes-copy h2,
    .fh-luxe .story-copy h3 {
      font-size: clamp(24px, 7.4vw, 34px);
      line-height: 1.16;
    }

    .fh-luxe .hero-copy p,
    .fh-luxe .section-head p,
    .fh-luxe .feature-copy p,
    .fh-luxe .story-copy p,
    .fh-luxe .outcomes-copy p,
    .fh-luxe .cta-copy p,
    .fh-luxe .metric-block p,
    .fh-luxe .process-item p,
    .fh-luxe .mini-point p,
    .fh-luxe .stat-panel p,
    .fh-luxe .quote-copy p {
      font-size: 14px;
      line-height: 1.62;
      text-align: center;
    }

    .fh-luxe .eyebrow {
      padding: 8px 12px;
      gap: 8px;
      font-size: 9.5px;
      letter-spacing: .075em;
      margin-left: auto;
      margin-right: auto;
    }

    .fh-luxe .eyebrow::before {
      width: 7px;
      height: 7px;
    }

    .fh-luxe .hero-actions,
    .fh-luxe .cta-actions {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: 11px;
    }

    .fh-luxe .btn {
      width: 100%;
      min-width: 0;
      min-height: 50px;
      padding: 13px 16px;
      border-radius: 14px;
      font-size: 14px;
    }

    .fh-luxe .hero-metrics,
    .fh-luxe .proof-shell,
    .fh-luxe .process-grid,
    .fh-luxe .mini-points {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .fh-luxe .metric-chip {
      display: grid;
      grid-template-columns: 86px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      min-width: 0;
      padding: 15px;
      border-radius: 18px;
      text-align: left;
    }

    .fh-luxe .metric-chip strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      margin: 0;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(106, 73, 242, .09);
      color: var(--fh-title);
      font-size: 13.5px;
      line-height: 1.15;
      text-align: center;
    }

    .fh-luxe .metric-chip span {
      font-size: 12.8px;
      line-height: 1.52;
      text-align: left;
    }

    .fh-luxe .hero-photo img {
      height: 340px;
    }

    .fh-luxe .hero-badge,
    .fh-luxe .hero-mini-visual,
    .fh-luxe .score-panel {
      position: static;
      width: 100%;
      margin-top: 14px;
    }

    .fh-luxe .hero-media {
      display: block;
    }

    .fh-luxe .hero-photo,
    .fh-luxe .story-row,
    .fh-luxe .feature-shell,
    .fh-luxe .quote-band,
    .fh-luxe .cta-shell,
    .fh-luxe .process-shell,
    .fh-luxe .outcomes-grid {
      border-radius: 22px;
    }

    .fh-luxe .feature-shell,
    .fh-luxe .story-row,
    .fh-luxe .process-shell,
    .fh-luxe .cta-shell,
    .fh-luxe .outcomes-grid {
      padding: 16px;
    }

    .fh-luxe .feature-image,
    .fh-luxe .story-media,
    .fh-luxe .outcomes-visual,
    .fh-luxe .quote-image {
      border-radius: 18px;
      min-height: 260px;
    }

    .fh-luxe .feature-copy,
    .fh-luxe .story-copy {
      padding: 0;
    }

    .fh-luxe .feature-list {
      margin-top: 4px;
      width: 100%;
    }

    .fh-luxe .feature-list article {
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 12px;
      padding: 14px 0;
      text-align: left;
    }

    .fh-luxe .feature-no {
      width: 40px;
      height: 40px;
      border-radius: 13px;
      font-size: 13px;
    }

    .fh-luxe .feature-list strong {
      font-size: 15px;
      line-height: 1.34;
      text-align: left;
    }

    .fh-luxe .feature-list p {
      text-align: left;
      font-size: 13.5px;
      line-height: 1.58;
    }

    .fh-luxe .proof-shell {
      overflow: visible;
      background: transparent;
      border: 0;
      box-shadow: none;
    }

    .fh-luxe .metric-block {
      padding: 16px;
      border-radius: 18px;
      border: 1px solid var(--fh-line);
      background: rgba(255,255,255,.92);
      box-shadow: var(--fh-shadow-sm);
      text-align: center;
    }

    .fh-luxe .metric-block + .metric-block,
    .fh-luxe .metric-block:nth-child(3) {
      border-left: 1px solid var(--fh-line);
      border-top: 1px solid var(--fh-line);
    }

    .fh-luxe .metric-block strong {
      font-size: 25px;
      line-height: 1.1;
      margin-bottom: 8px;
    }

    .fh-luxe .mini-point {
      padding: 14px;
      border-radius: 16px;
      text-align: center;
    }

    .fh-luxe .mini-point p {
      font-size: 13.5px;
    }

    .fh-luxe .process-shell {
      background:
        radial-gradient(circle at 0 0, rgba(106, 73, 242, .11), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,243,255,.92));
    }

    .fh-luxe .process-item {
      grid-template-columns: 46px minmax(0, 1fr);
      column-gap: 12px;
      padding: 15px;
      border-radius: 18px;
      align-items: center;
      text-align: left;
    }

    .fh-luxe .process-item::before {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      align-self: center;
    }

    .fh-luxe .process-step {
      margin-bottom: 6px;
      font-size: 10.5px;
      letter-spacing: .085em;
      text-align: left;
    }

    .fh-luxe .process-item strong {
      font-size: 15.5px;
      line-height: 1.28;
      text-align: left;
    }

    .fh-luxe .process-item p {
      margin-top: 11px;
      font-size: 13.5px;
      line-height: 1.58;
      text-align: left;
    }

    .fh-luxe .outcomes-grid {
      gap: 18px;
      background:
        radial-gradient(circle at 0 0, rgba(106, 73, 242, .11), transparent 34%),
        radial-gradient(circle at 100% 0, rgba(223, 218, 243, .42), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,243,255,.92));
      border: 1px solid rgba(106, 73, 242, .10);
      box-shadow: var(--fh-shadow-md);
    }

    .fh-luxe .outcomes-copy {
      text-align: left;
      justify-items: start;
    }

    .fh-luxe .outcomes-copy .eyebrow {
      margin: 0 0 2px;
    }

    .fh-luxe .outcomes-copy h2,
    .fh-luxe .outcomes-copy p {
      text-align: left;
    }

    .fh-luxe .outcomes-copy .points {
      gap: 10px;
      margin-top: 4px;
      width: 100%;
    }

    .fh-luxe .outcomes-copy .points div {
      min-height: 46px;
      display: flex;
      align-items: center;
      padding: 12px 12px 12px 42px;
      border-radius: 16px;
      background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .07), transparent 34%),
        rgba(255,255,255,.90);
      border: 1px solid rgba(106, 73, 242, .10);
      box-shadow: var(--fh-shadow-sm);
      color: var(--fh-text);
      font-size: 13.5px;
      line-height: 1.55;
      text-align: left;
    }

    .fh-luxe .outcomes-copy .points div::before {
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 9px;
      height: 9px;
    }

    .fh-luxe .outcomes-visual,
    .fh-luxe .outcomes-visual img {
      min-height: 360px;
      height: 360px;
    }

    .fh-luxe .stat-panel {
      position: static;
      width: 100%;
      margin-top: 14px;
      padding: 14px;
      border-radius: 18px;
      text-align: center;
    }

    .fh-luxe .stat-panel strong {
      font-size: 22px;
    }

    .fh-luxe .quote-copy {
      padding: 20px 16px;
      text-align: center;
    }

    .fh-luxe .quote-mark {
      font-size: 40px;
      margin-bottom: 10px;
    }

    .fh-luxe .quote-copy p {
      font-size: 15px;
      line-height: 1.68;
    }

    .fh-luxe .quote-tags {
      justify-content: center;
      gap: 8px;
      margin-top: 18px;
    }

    .fh-luxe .quote-tags span {
      font-size: 11.5px;
      padding: 8px 10px;
    }

    .fh-luxe .cta-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .fh-luxe .cta-actions {
      justify-content: stretch;
    }

    .fh-luxe .soft-note {
      align-items: flex-start;
      font-size: 13px;
      line-height: 1.55;
      text-align: left;
    }
  }

  @media (max-width: 430px) {
    :root {
      --fh-page-gap: 22px;
      --fh-section-y: 42px;
    }

    .fh-luxe .hero {
      padding-top: 88px;
      padding-bottom: 28px;
    }

    .fh-luxe .hero-copy h1 {
      font-size: clamp(27px, 8.8vw, 36px);
    }

    .fh-luxe .section-head h2,
    .fh-luxe .cta-copy h2,
    .fh-luxe .feature-copy h2,
    .fh-luxe .outcomes-copy h2,
    .fh-luxe .story-copy h3 {
      font-size: clamp(22px, 7vw, 30px);
    }

    .fh-luxe .hero-photo img {
      height: 320px;
    }

    .fh-luxe .glass-panel,
    .fh-luxe .metric-chip,
    .fh-luxe .mini-point,
    .fh-luxe .stat-panel,
    .fh-luxe .process-item,
    .fh-luxe .metric-block {
      border-radius: 16px;
      padding: 13px;
    }

    .fh-luxe .metric-chip {
      grid-template-columns: 78px minmax(0, 1fr);
    }

    .fh-luxe .metric-chip strong {
      font-size: 12.5px;
      min-height: 38px;
    }

    .fh-luxe .score-top {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .fh-luxe .feature-shell,
    .fh-luxe .story-row,
    .fh-luxe .process-shell,
    .fh-luxe .cta-shell,
    .fh-luxe .outcomes-grid {
      padding: 14px;
      border-radius: 18px;
    }

    .fh-luxe .feature-list article {
      grid-template-columns: 38px minmax(0, 1fr);
    }

    .fh-luxe .feature-no {
      width: 38px;
      height: 38px;
      border-radius: 12px;
    }

    .fh-luxe .process-item {
      grid-template-columns: 42px minmax(0, 1fr);
      padding: 13px;
    }

    .fh-luxe .process-item::before {
      width: 38px;
      height: 38px;
      border-radius: 13px;
    }

    .fh-luxe .process-item strong {
      font-size: 15px;
    }

    .fh-luxe .outcomes-copy .points div {
      padding: 11px 11px 11px 40px;
      border-radius: 15px;
      font-size: 13px;
    }

    .fh-luxe .outcomes-copy .points div::before {
      left: 15px;
    }
  }

  @media (max-width: 360px) {
    :root {
      --fh-page-gap: 18px;
    }

    .fh-luxe .hero {
      padding-top: 82px;
    }

    .fh-luxe .hero-copy h1 {
      font-size: 25px;
    }

    .fh-luxe .eyebrow {
      font-size: 8.5px;
      letter-spacing: .055em;
      padding: 7px 10px;
    }

    .fh-luxe .metric-chip {
      grid-template-columns: 1fr;
      text-align: center;
    }

    .fh-luxe .metric-chip strong {
      width: fit-content;
      margin: 0 auto;
    }

    .fh-luxe .metric-chip span {
      text-align: center;
    }
  }

  @media (hover: none) {
    .fh-luxe .btn:hover,
    .fh-luxe .metric-chip:hover,
    .fh-luxe .mini-point:hover,
    .fh-luxe .metric-block:hover,
    .fh-luxe .process-item:hover,
    .fh-luxe .feature-shell:hover,
    .fh-luxe .story-row:hover,
    .fh-luxe .quote-band:hover,
    .fh-luxe .cta-shell:hover {
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .fh-luxe *,
    .fh-luxe *::before,
    .fh-luxe *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }

    .fh-luxe .reveal {
      opacity: 1 !important;
      transform: none !important;
    }
  }

/*===================================================================================
    14. Freshers Hiring Assessments CSS End
===================================================================================*/


/*===================================================================================
    15. Lateral Hiring Assessments CSS Start
===================================================================================*/
:root {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --bg-purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --slider-dots-color: #D4D2DD;
    --light-bg: #DFDAF3;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 6% 4%, rgba(106, 73, 242, 0.12), transparent 25%),
      radial-gradient(circle at 94% 8%, rgba(223, 218, 243, 0.90), transparent 26%),
      radial-gradient(circle at 4% 92%, rgba(106, 73, 242, 0.07), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fcfbff 44%, #f7f3ff 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .lha-editorial,
  .lha-editorial * {
    box-sizing: border-box;
  }

  .lha-editorial {
    --lha-container: 1160px;
    --lha-page-gap: 44px;
    --lha-space: clamp(46px, 4.8vw, 68px);
    --lha-heading: var(--dark-purple);
    --lha-text: var(--body-text-purple);
    --lha-muted: rgba(62, 63, 102, 0.78);
    --lha-accent: var(--purple);
    --lha-border: rgba(106, 73, 242, 0.14);
    --lha-border-soft: rgba(106, 73, 242, 0.10);
    --lha-soft: rgba(106, 73, 242, 0.08);
    --lha-surface: rgba(255, 255, 255, 0.92);
    --lha-surface-solid: #ffffff;
    --lha-shadow: 0 16px 42px rgba(50, 35, 111, 0.085);
    --lha-shadow-hover: 0 24px 58px rgba(50, 35, 111, 0.13);
    --lha-shadow-deep: 0 28px 72px rgba(50, 35, 111, 0.15);
    --lha-radius-xl: 32px;
    --lha-radius-lg: 26px;
    --lha-radius-md: 20px;
    --lha-radius-sm: 16px;
    --lha-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;

    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--lha-text);
    overflow-x: hidden;
    position: relative;
    isolation: isolate;
    min-width: 320px;
    padding-top: clamp(72px, 6vw, 96px);
  }

  .lha-editorial::before,
  .lha-editorial::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    opacity: .72;
  }

  .lha-editorial::before {
    width: 300px;
    height: 300px;
    left: -120px;
    top: 90px;
    background: rgba(106, 73, 242, 0.13);
  }

  .lha-editorial::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 320px;
    background: rgba(223, 218, 243, 0.92);
  }

  .lha-editorial a {
    color: inherit;
    text-decoration: none;
  }

  .lha-editorial img,
  .lha-editorial svg {
    max-width: 100%;
    display: block;
  }

  .lha-editorial .container {
    width: min(var(--lha-container), calc(100% - var(--lha-page-gap)));
    margin-inline: auto;
  }

  .lha-editorial .section {
    padding-block: var(--lha-space);
    position: relative;
  }

  .lha-editorial .section.soft {
    background:
      radial-gradient(circle at 0 0, rgba(106, 73, 242, 0.045), transparent 25%),
      linear-gradient(180deg, rgba(246, 244, 254, 0.62), rgba(255, 255, 255, 0));
  }

  .lha-editorial .eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    max-width: 100%;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--lha-accent);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    overflow-wrap: anywhere;
  }

  .lha-editorial .eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lha-accent), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
  }

  .lha-editorial .section-head {
    max-width: 800px;
    margin-bottom: clamp(24px, 2.8vw, 34px);
  }

  .lha-editorial .section-head h2,
  .lha-editorial .story-copy h2,
  .lha-editorial .cta-copy h2 {
    margin: 16px 0 12px;
    color: var(--lha-heading);
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.04em;
    font-weight: 700;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .lha-editorial .section-head p,
  .lha-editorial .hero-copy p,
  .lha-editorial .trust-card p,
  .lha-editorial .story-copy p,
  .lha-editorial .feature-card p,
  .lha-editorial .panel p,
  .lha-editorial .path-card p,
  .lha-editorial .compare-card p,
  .lha-editorial .cta-copy p,
  .lha-editorial .hero-caption p,
  .lha-editorial .metric p,
  .lha-editorial .floating-note p {
    margin: 0;
    color: var(--lha-muted);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  /* HERO */
  .lha-editorial .hero {
    padding: clamp(24px, 3vw, 38px) 0 clamp(44px, 5vw, 64px);
    position: relative;
  }

  .lha-editorial .hero-layout {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    gap: clamp(24px, 3vw, 34px);
    align-items: center;
  }

  .lha-editorial .hero-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
  }

  .lha-editorial .hero-copy h1 {
    margin: 18px 0 16px;
    color: var(--lha-heading);
    font-size: clamp(38px, 5.2vw, 62px);
    line-height: 1.06;
    letter-spacing: -0.052em;
    font-weight: 700;
    max-width: 720px;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .lha-editorial .hero-copy h1 span {
    color: var(--lha-accent);
    display: inline;
  }

  .lha-editorial .hero-copy p {
    max-width: 640px;
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.74;
  }

  .lha-editorial .hero-actions,
  .lha-editorial .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  .lha-editorial .hero-actions {
    margin-bottom: 24px;
  }

  .lha-editorial .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    transition: var(--lha-transition);
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
  }

  .lha-editorial .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
    z-index: -1;
  }

  .lha-editorial .btn:hover {
    transform: translateY(-3px);
  }

  .lha-editorial .btn:hover::before {
    transform: scaleX(1);
  }

  .lha-editorial .btn-primary {
    background: linear-gradient(135deg, var(--lha-accent), #7c5cf6);
    color: var(--text-white);
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.22);
  }

  .lha-editorial .btn-primary::before {
    background: linear-gradient(135deg, var(--lha-heading), var(--lha-accent));
  }

  .lha-editorial .btn-secondary {
    background: rgba(255, 255, 255, 0.94);
    color: var(--lha-accent);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
  }

  .lha-editorial .btn-secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
  }

  .lha-editorial .hero-tags,
  .lha-editorial .tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  .lha-editorial .hero-tags {
    margin-bottom: 24px;
  }

  .lha-editorial .hero-tags span,
  .lha-editorial .tag-row span {
    max-width: 100%;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.12);
    color: var(--lha-accent);
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .lha-editorial .hero-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 620px;
  }

  .lha-editorial .trust-card,
  .lha-editorial .story-copy,
  .lha-editorial .feature-card,
  .lha-editorial .panel,
  .lha-editorial .path-card,
  .lha-editorial .compare-card,
  .lha-editorial .cta-shell,
  .lha-editorial .metric {
    background: var(--lha-surface);
    border: 1px solid var(--lha-border);
    box-shadow: var(--lha-shadow);
    transition: var(--lha-transition);
  }

  .lha-editorial .trust-card:hover,
  .lha-editorial .story-copy:hover,
  .lha-editorial .feature-card:hover,
  .lha-editorial .panel:hover,
  .lha-editorial .path-card:hover,
  .lha-editorial .compare-card:hover,
  .lha-editorial .cta-shell:hover,
  .lha-editorial .metric:hover {
    transform: translateY(-4px);
    box-shadow: var(--lha-shadow-hover);
    border-color: rgba(106, 73, 242, 0.20);
  }

  .lha-editorial .trust-card {
    padding: 18px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255,255,255,0.86);
    backdrop-filter: blur(10px);
  }

  .lha-editorial .trust-card strong {
    display: block;
    margin-bottom: 6px;
    color: var(--lha-heading);
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  /* HERO VISUAL */
  .lha-editorial .hero-visual {
    position: relative;
    min-width: 0;
  }

  .lha-editorial .visual-shell {
    position: relative;
    padding: 18px;
    border-radius: var(--lha-radius-xl);
    background:
      radial-gradient(circle at right top, rgba(223, 218, 243, 0.54), transparent 28%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 244, 254, 0.96));
    border: 1px solid var(--lha-border);
    box-shadow: var(--lha-shadow-deep);
    overflow: hidden;
  }

  .lha-editorial .visual-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.03), transparent 54%, rgba(106, 73, 242, 0.05));
    pointer-events: none;
  }

  .lha-editorial .hero-figure {
    position: relative;
    z-index: 1;
    min-height: 560px;
    border-radius: 26px;
    overflow: hidden;
    background: #efeaff;
    box-shadow: 0 22px 54px rgba(50, 35, 111, 0.14);
  }

  .lha-editorial .hero-figure img {
    width: 100%;
    height: 100%;
    min-height: 560px;
    display: block;
    object-fit: cover;
  }

  .lha-editorial .hero-figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(23, 15, 60, 0.06) 0%, rgba(23, 15, 60, 0.18) 46%, rgba(23, 15, 60, 0.74) 100%);
    pointer-events: none;
  }

  .lha-editorial .hero-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 36px);
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    font-size: 11.5px;
    line-height: 1.2;
    font-weight: 700;
    backdrop-filter: blur(12px);
    overflow-wrap: anywhere;
  }

  .lha-editorial .hero-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.14);
    flex: 0 0 auto;
  }

  .lha-editorial .hero-caption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(14px);
  }

  .lha-editorial .hero-caption span {
    display: inline-block;
    margin-bottom: 9px;
    color: rgba(255,255,255,0.84);
    font-size: 10.8px;
    line-height: 1;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-weight: 700;
  }

  .lha-editorial .hero-caption h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 21px;
    line-height: 1.28;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .lha-editorial .hero-caption p {
    color: rgba(255,255,255,0.86);
    font-size: 13.2px;
    line-height: 1.68;
  }

  .lha-editorial .floating-note {
    position: absolute;
    z-index: 3;
    width: 220px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(106,73,242,0.12);
    box-shadow: 0 18px 42px rgba(50,35,111,0.12);
    backdrop-filter: blur(14px);
    transition: var(--lha-transition);
  }

  .lha-editorial .floating-note:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 52px rgba(50,35,111,0.16);
  }

  .lha-editorial .floating-note.one {
    top: 24px;
    left: -8px;
  }

  .lha-editorial .floating-note.two {
    right: -8px;
    bottom: 108px;
  }

  .lha-editorial .floating-note .label {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(106,73,242,0.08);
    color: var(--lha-accent);
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
  }

  .lha-editorial .floating-note h4 {
    margin: 0 0 8px;
    color: var(--lha-heading);
    font-size: 17px;
    line-height: 1.34;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .lha-editorial .floating-note p {
    font-size: 12.8px;
    line-height: 1.62;
  }

  .lha-editorial .hero-metrics {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
  }

  .lha-editorial .metric {
    padding: 18px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, rgba(106,73,242,0.08), transparent 34%),
      rgba(255,255,255,0.90);
    backdrop-filter: blur(10px);
  }

  .lha-editorial .metric strong {
    display: block;
    margin-bottom: 7px;
    color: var(--lha-heading);
    font-size: 22px;
    line-height: 1.05;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .lha-editorial .metric p {
    font-size: 13px;
    line-height: 1.58;
  }

  /* STORY */
  .lha-editorial .story-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 22px;
    align-items: stretch;
  }

  .lha-editorial .story-copy {
    padding: 28px;
    border-radius: var(--lha-radius-xl);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,244,254,0.96));
  }

  .lha-editorial .story-points {
    display: grid;
    gap: 12px;
    margin-top: 20px;
  }

  .lha-editorial .story-points div {
    padding: 15px;
    border-radius: 16px;
    background: rgba(106, 73, 242, 0.05);
    border: 1px solid rgba(106, 73, 242, 0.10);
  }

  .lha-editorial .story-points strong {
    display: block;
    margin-bottom: 5px;
    color: var(--lha-heading);
    font-size: 16px;
    line-height: 1.38;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .lha-editorial .features-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .lha-editorial .feature-card {
    padding: 22px;
    border-radius: var(--lha-radius-lg);
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,245,255,0.94));
  }

  .lha-editorial .feature-card::before,
  .lha-editorial .path-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(106,73,242,0.04), transparent 52%, rgba(106,73,242,0.06));
    pointer-events: none;
  }

  .lha-editorial .icon-card,
  .lha-editorial .path-number {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(106,73,242,0.14), rgba(223,218,243,0.96));
    color: var(--lha-accent);
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
  }

  .lha-editorial .feature-card h3,
  .lha-editorial .feature-card p,
  .lha-editorial .feature-card .tag-row,
  .lha-editorial .path-card h3,
  .lha-editorial .path-card p,
  .lha-editorial .path-number {
    position: relative;
    z-index: 1;
  }

  .lha-editorial .feature-card h3,
  .lha-editorial .panel h3,
  .lha-editorial .path-card h3,
  .lha-editorial .compare-card h3 {
    margin: 0 0 10px;
    color: var(--lha-heading);
    font-size: 19px;
    line-height: 1.32;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  /* PANELS */
  .lha-editorial .panel-grid,
  .lha-editorial .compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .lha-editorial .panel {
    padding: 26px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,244,255,0.96));
  }

  .lha-editorial .list-check,
  .lha-editorial .bullet-list {
    display: grid;
    gap: 11px;
    margin-top: 16px;
  }

  .lha-editorial .list-check div,
  .lha-editorial .bullet-list div {
    position: relative;
    padding-left: 24px;
    color: var(--lha-muted);
    font-size: 14.5px;
    line-height: 1.68;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .lha-editorial .list-check div::before,
  .lha-editorial .bullet-list div::before {
    content: "";
    position: absolute;
    left: 0;
    top: .68em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--lha-accent);
    box-shadow: 0 0 0 5px rgba(106,73,242,0.10);
  }

  /* PATH */
  .lha-editorial .path-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .lha-editorial .path-card {
    padding: 22px;
    border-radius: 26px;
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255,255,255,0.94);
  }

  /* COMPARE */
  .lha-editorial .compare-card {
    padding: 26px;
    border-radius: 28px;
  }

  .lha-editorial .compare-card.bad {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,246,255,0.96));
  }

  .lha-editorial .compare-card.good {
    background: linear-gradient(180deg, rgba(106,73,242,0.08), rgba(255,255,255,0.98));
    border-color: rgba(106,73,242,0.18);
  }

  .lha-editorial .compare-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
  }

  .lha-editorial .compare-icon {
    width: 50px;
    height: 50px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    flex: 0 0 auto;
  }

  .lha-editorial .compare-card.bad .compare-icon {
    background: rgba(50,35,111,0.08);
    color: var(--lha-heading);
  }

  .lha-editorial .compare-card.good .compare-icon {
    background: rgba(106,73,242,0.14);
    color: var(--lha-accent);
  }

  /* CTA */
  .lha-editorial .cta-shell {
    padding: 32px;
    border-radius: 30px;
    background:
      radial-gradient(circle at left bottom, rgba(223,218,243,0.56), transparent 28%),
      linear-gradient(135deg, rgba(255,255,255,0.98), rgba(246,244,254,0.98));
    position: relative;
    overflow: hidden;
  }

  .lha-editorial .cta-shell::before,
  .lha-editorial .cta-shell::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(106,73,242,0.08);
  }

  .lha-editorial .cta-shell::before {
    width: 170px;
    height: 170px;
    right: -38px;
    bottom: -48px;
  }

  .lha-editorial .cta-shell::after {
    width: 118px;
    height: 118px;
    left: -34px;
    top: -34px;
  }

  .lha-editorial .cta-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) auto;
    gap: 24px;
    align-items: center;
  }

  .lha-editorial .cta-actions {
    justify-content: flex-end;
  }

  .lha-editorial .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
  }

  .lha-editorial .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* TABLET */
  @media (max-width: 1180px) {
    .lha-editorial {
      --lha-container: 980px;
      --lha-page-gap: 34px;
      --lha-space: 58px;
      padding-top: 82px;
    }

    .lha-editorial .hero-layout,
    .lha-editorial .story-layout,
    .lha-editorial .cta-grid {
      grid-template-columns: 1fr;
    }

    .lha-editorial .cta-actions {
      justify-content: flex-start;
    }

    .lha-editorial .hero-copy {
      max-width: 900px;
    }

    .lha-editorial .hero-visual {
      max-width: 820px;
    }

    .lha-editorial .path-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lha-editorial .floating-note.one {
      left: 18px;
    }

    .lha-editorial .floating-note.two {
      right: 18px;
    }
  }

  @media (max-width: 991px) {
    .lha-editorial {
      --lha-page-gap: 30px;
      --lha-space: 54px;
      padding-top: 76px;
    }

    .lha-editorial .hero {
      padding-top: 26px;
      padding-bottom: 44px;
    }

    .lha-editorial .hero-metrics,
    .lha-editorial .features-grid,
    .lha-editorial .panel-grid,
    .lha-editorial .compare-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lha-editorial .hero-figure,
    .lha-editorial .hero-figure img {
      min-height: 500px;
    }

    .lha-editorial .floating-note.two {
      bottom: 96px;
    }
  }

  /* MOBILE */
  @media (max-width: 767px) {
    .lha-editorial {
      --lha-page-gap: 24px;
      --lha-space: 46px;
      padding-top: 64px;
    }

    .lha-editorial .container {
      width: min(var(--lha-container), calc(100% - var(--lha-page-gap)));
    }

    .lha-editorial .hero {
      padding: 16px 0 34px;
    }

    .lha-editorial .section {
      padding-block: var(--lha-space);
    }

    .lha-editorial .section-head {
      margin-bottom: 22px;
    }

    .lha-editorial .hero-copy h1 {
      font-size: clamp(30px, 9.3vw, 42px);
      line-height: 1.1;
      margin: 16px 0 12px;
    }

    .lha-editorial .section-head h2,
    .lha-editorial .story-copy h2,
    .lha-editorial .cta-copy h2 {
      font-size: clamp(24px, 7.4vw, 34px);
      line-height: 1.16;
    }

    .lha-editorial .section-head p,
    .lha-editorial .hero-copy p,
    .lha-editorial .trust-card p,
    .lha-editorial .story-copy p,
    .lha-editorial .feature-card p,
    .lha-editorial .panel p,
    .lha-editorial .path-card p,
    .lha-editorial .compare-card p,
    .lha-editorial .cta-copy p,
    .lha-editorial .hero-caption p,
    .lha-editorial .metric p {
      font-size: 14px;
      line-height: 1.62;
    }

    .lha-editorial .eyebrow {
      padding: 8px 12px;
      gap: 8px;
      font-size: 9.5px;
      letter-spacing: .075em;
    }

    .lha-editorial .eyebrow::before {
      width: 7px;
      height: 7px;
    }

    .lha-editorial .hero-actions,
    .lha-editorial .cta-actions {
      flex-direction: column;
      gap: 11px;
    }

    .lha-editorial .btn {
      width: 100%;
      min-width: 0;
      min-height: 50px;
      padding: 13px 16px;
      border-radius: 14px;
      font-size: 14px;
    }

    .lha-editorial .hero-tags,
    .lha-editorial .tag-row {
      gap: 8px;
    }

    .lha-editorial .hero-tags span,
    .lha-editorial .tag-row span {
      white-space: normal;
      font-size: 11.5px;
      padding: 8px 10px;
    }

    .lha-editorial .hero-trust,
    .lha-editorial .hero-metrics,
    .lha-editorial .features-grid,
    .lha-editorial .panel-grid,
    .lha-editorial .path-grid,
    .lha-editorial .compare-grid {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .lha-editorial .visual-shell {
      padding: 16px;
      border-radius: 24px;
    }

    .lha-editorial .hero-figure {
      min-height: 350px;
      border-radius: 20px;
    }

    .lha-editorial .hero-figure img {
      min-height: 350px;
    }

    .lha-editorial .hero-caption {
      left: 12px;
      right: 12px;
      bottom: 12px;
      padding: 14px;
      border-radius: 18px;
    }

    .lha-editorial .hero-caption h3 {
      font-size: 18px;
      line-height: 1.28;
    }

    .lha-editorial .hero-caption span,
    .lha-editorial .hero-badge {
      font-size: 10px;
    }

    .lha-editorial .hero-badge {
      top: 10px;
      left: 10px;
      padding: 8px 10px;
    }

    .lha-editorial .floating-note {
      position: relative;
      width: 100%;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      margin-top: 14px;
      padding: 14px;
      border-radius: 18px;
    }

    .lha-editorial .metric,
    .lha-editorial .trust-card,
    .lha-editorial .story-copy,
    .lha-editorial .feature-card,
    .lha-editorial .panel,
    .lha-editorial .path-card,
    .lha-editorial .compare-card,
    .lha-editorial .cta-shell {
      padding: 16px;
      border-radius: 20px;
    }

    .lha-editorial .metric {
      display: grid;
      grid-template-columns: 78px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }

    .lha-editorial .metric strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      margin: 0;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(106, 73, 242, .09);
      font-size: 15.5px;
      line-height: 1.15;
      text-align: center;
    }

    .lha-editorial .feature-card,
    .lha-editorial .path-card {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      column-gap: 12px;
      align-items: center;
      text-align: left;
    }

    .lha-editorial .icon-card,
    .lha-editorial .path-number,
    .lha-editorial .compare-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      margin: 0;
      font-size: 14px;
    }

    .lha-editorial .feature-card h3,
    .lha-editorial .path-card h3 {
      margin: 0;
      font-size: 16.5px;
      line-height: 1.32;
    }

    .lha-editorial .feature-card p,
    .lha-editorial .feature-card .tag-row,
    .lha-editorial .path-card p {
      grid-column: 1 / -1;
    }

    .lha-editorial .feature-card p,
    .lha-editorial .path-card p {
      margin-top: 12px;
    }

    .lha-editorial .panel h3,
    .lha-editorial .compare-card h3 {
      font-size: 17px;
      line-height: 1.32;
    }

    .lha-editorial .list-check,
    .lha-editorial .bullet-list {
      gap: 9px;
      margin-top: 14px;
    }

    .lha-editorial .list-check div,
    .lha-editorial .bullet-list div {
      font-size: 13.5px;
      line-height: 1.6;
      padding-left: 22px;
    }

    .lha-editorial .list-check div::before,
    .lha-editorial .bullet-list div::before {
      width: 8px;
      height: 8px;
      box-shadow: 0 0 0 4px rgba(106,73,242,0.10);
    }

    .lha-editorial .compare-top {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 12px;
      margin-bottom: 14px;
      align-items: start;
    }

    .lha-editorial .cta-shell {
      padding: 18px;
    }

    .lha-editorial .cta-grid {
      gap: 16px;
    }
  }

  @media (max-width: 430px) {
    .lha-editorial {
      --lha-page-gap: 22px;
      --lha-space: 42px;
      padding-top: 58px;
    }

    .lha-editorial .hero {
      padding-top: 10px;
      padding-bottom: 30px;
    }

    .lha-editorial .hero-copy h1 {
      font-size: clamp(27px, 8.8vw, 36px);
    }

    .lha-editorial .section-head h2,
    .lha-editorial .story-copy h2,
    .lha-editorial .cta-copy h2 {
      font-size: clamp(22px, 7vw, 30px);
    }

    .lha-editorial .metric,
    .lha-editorial .trust-card,
    .lha-editorial .story-copy,
    .lha-editorial .feature-card,
    .lha-editorial .panel,
    .lha-editorial .path-card,
    .lha-editorial .compare-card,
    .lha-editorial .cta-shell,
    .lha-editorial .floating-note {
      padding: 14px;
      border-radius: 18px;
    }

    .lha-editorial .metric {
      grid-template-columns: 70px minmax(0, 1fr);
    }

    .lha-editorial .metric strong {
      min-height: 40px;
      font-size: 14.5px;
    }

    .lha-editorial .feature-card,
    .lha-editorial .path-card,
    .lha-editorial .compare-top {
      grid-template-columns: 40px minmax(0, 1fr);
      column-gap: 11px;
    }

    .lha-editorial .icon-card,
    .lha-editorial .path-number,
    .lha-editorial .compare-icon {
      width: 40px;
      height: 40px;
      border-radius: 13px;
    }

    .lha-editorial .hero-figure,
    .lha-editorial .hero-figure img {
      min-height: 320px;
    }
  }

  @media (max-width: 360px) {
    .lha-editorial {
      --lha-page-gap: 18px;
      padding-top: 54px;
    }

    .lha-editorial .hero-copy h1 {
      font-size: 25px;
    }

    .lha-editorial .eyebrow {
      font-size: 8.5px;
      letter-spacing: .055em;
      padding: 7px 10px;
    }

    .lha-editorial .metric {
      grid-template-columns: 1fr;
    }

    .lha-editorial .metric strong {
      width: fit-content;
      justify-content: flex-start;
    }
  }

  @media (hover: none) {
    .lha-editorial .btn:hover,
    .lha-editorial .trust-card:hover,
    .lha-editorial .story-copy:hover,
    .lha-editorial .feature-card:hover,
    .lha-editorial .panel:hover,
    .lha-editorial .path-card:hover,
    .lha-editorial .compare-card:hover,
    .lha-editorial .cta-shell:hover,
    .lha-editorial .metric:hover,
    .lha-editorial .floating-note:hover {
      transform: none;
    }
  }

/*===================================================================================
    15. Lateral Hiring Assessments CSS End
===================================================================================*/


/*===================================================================================
    16. Virtual Hiring Software CSS Start
===================================================================================*/
:root {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --bg-purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --slider-dots-color: #D4D2DD;
    --light-bg: #DFDAF3;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--body-text-purple);
    background:
      radial-gradient(circle at 6% 4%, rgba(106, 73, 242, 0.12), transparent 25%),
      radial-gradient(circle at 94% 8%, rgba(223, 218, 243, 0.92), transparent 26%),
      radial-gradient(circle at 4% 92%, rgba(106, 73, 242, 0.07), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fcfbff 44%, #f7f3ff 100%);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .vhs-luxe,
  .vhs-luxe * {
    box-sizing: border-box;
  }

  .vhs-luxe {
    --vhs-container: 1160px;
    --vhs-page-gap: 44px;
    --vhs-space: clamp(46px, 4.8vw, 68px);
    --vhs-heading: var(--dark-purple);
    --vhs-text: var(--body-text-purple);
    --vhs-muted: rgba(62, 63, 102, 0.78);
    --vhs-accent: var(--purple);
    --vhs-accent-dark: #4D32C8;
    --vhs-surface: rgba(255, 255, 255, 0.94);
    --vhs-surface-solid: #ffffff;
    --vhs-border: rgba(106, 73, 242, 0.14);
    --vhs-border-soft: rgba(106, 73, 242, 0.10);
    --vhs-soft: rgba(106, 73, 242, 0.08);
    --vhs-shadow: 0 16px 42px rgba(50, 35, 111, 0.085);
    --vhs-shadow-hover: 0 24px 58px rgba(50, 35, 111, 0.13);
    --vhs-shadow-deep: 0 28px 72px rgba(50, 35, 111, 0.15);
    --vhs-radius-xl: 32px;
    --vhs-radius-lg: 26px;
    --vhs-radius-md: 20px;
    --vhs-radius-sm: 16px;
    --vhs-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    padding: clamp(72px, 6vw, 96px) 0 clamp(58px, 6vw, 86px);
    background:
      radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
      radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.90), transparent 23%),
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--vhs-text);
  }

  .vhs-luxe::before,
  .vhs-luxe::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(90px);
    z-index: -1;
    pointer-events: none;
    opacity: .72;
  }

  .vhs-luxe::before {
    width: 300px;
    height: 300px;
    left: -120px;
    top: 92px;
    background: rgba(106, 73, 242, 0.13);
  }

  .vhs-luxe::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 350px;
    background: rgba(223, 218, 243, 0.92);
  }

  .vhs-luxe img,
  .vhs-luxe svg {
    max-width: 100%;
    display: block;
  }

  .vhs-luxe a {
    color: inherit;
    text-decoration: none;
  }

  .vhs-luxe .vhs-container {
    width: min(var(--vhs-container), calc(100% - var(--vhs-page-gap)));
    margin: 0 auto;
  }

  .vhs-luxe .vhs-section {
    padding-block: var(--vhs-space);
    position: relative;
  }

  .vhs-luxe .vhs-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    max-width: 100%;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--vhs-accent);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
    overflow-wrap: anywhere;
  }

  .vhs-luxe .vhs-label::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vhs-accent), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
  }

  .vhs-luxe h1,
  .vhs-luxe h2,
  .vhs-luxe h3,
  .vhs-luxe p,
  .vhs-luxe strong,
  .vhs-luxe a,
  .vhs-luxe span {
    font-family: inherit;
  }

  .vhs-luxe h1,
  .vhs-luxe h2,
  .vhs-luxe h3,
  .vhs-luxe strong {
    color: var(--vhs-heading);
    font-weight: 700;
  }

  .vhs-luxe p {
    color: var(--vhs-muted);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  /* HERO */
  .vhs-luxe .vhs-hero {
    padding: clamp(24px, 3vw, 38px) 0 clamp(44px, 5vw, 64px);
    position: relative;
  }

  .vhs-luxe .vhs-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    gap: clamp(24px, 3vw, 34px);
    align-items: center;
  }

  .vhs-luxe .vhs-copy {
    max-width: 680px;
    min-width: 0;
  }

  .vhs-luxe .vhs-copy h1 {
    margin: 18px 0 16px;
    max-width: 720px;
    font-size: clamp(38px, 5.2vw, 62px);
    line-height: 1.06;
    letter-spacing: -0.052em;
    font-weight: 700;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .vhs-luxe .vhs-copy h1 span {
    color: var(--vhs-accent);
    display: inline;
    font-weight: 700;
  }

  .vhs-luxe .vhs-copy p {
    max-width: 630px;
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 1.74;
  }

  .vhs-luxe .vhs-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
  }

  .vhs-luxe .vhs-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: var(--vhs-transition);
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
  }

  .vhs-luxe .vhs-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
    z-index: -1;
  }

  .vhs-luxe .vhs-btn:hover {
    transform: translateY(-3px);
  }

  .vhs-luxe .vhs-btn:hover::before {
    transform: scaleX(1);
  }

  .vhs-luxe .vhs-btn-primary {
    background: linear-gradient(135deg, var(--vhs-accent), #7d5df6);
    color: #ffffff;
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.22);
  }

  .vhs-luxe .vhs-btn-primary:hover {
    color: #ffffff;
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.28);
  }

  .vhs-luxe .vhs-btn-primary::before {
    background: linear-gradient(135deg, var(--vhs-heading), var(--vhs-accent));
  }

  .vhs-luxe .vhs-btn-secondary {
    background: rgba(255, 255, 255, 0.94);
    color: var(--vhs-accent);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
  }

  .vhs-luxe .vhs-btn-secondary:hover {
    color: var(--vhs-accent);
    background: #ffffff;
  }

  .vhs-luxe .vhs-btn-secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
  }

  .vhs-luxe .vhs-support {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  .vhs-luxe .vhs-support span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.12);
    color: var(--vhs-accent);
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 700;
    backdrop-filter: blur(12px);
    overflow-wrap: anywhere;
  }

  .vhs-luxe .vhs-support span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vhs-accent), #16BDF5);
    flex: 0 0 auto;
  }

  /* HERO VISUAL */
  .vhs-luxe .vhs-visual-wrap {
    position: relative;
    min-width: 0;
  }

  .vhs-luxe .vhs-visual-frame {
    position: relative;
    padding: 18px;
    border-radius: var(--vhs-radius-xl);
    background:
      radial-gradient(circle at right top, rgba(223, 218, 243, 0.54), transparent 28%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 244, 254, 0.96));
    border: 1px solid var(--vhs-border);
    box-shadow: var(--vhs-shadow-deep);
    backdrop-filter: blur(16px);
    overflow: hidden;
  }

  .vhs-luxe .vhs-visual-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.03), transparent 54%, rgba(106, 73, 242, 0.05));
    pointer-events: none;
  }

  .vhs-luxe .vhs-visual-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.88fr);
    gap: 16px;
    align-items: stretch;
  }

  .vhs-luxe .vhs-main-image,
  .vhs-luxe .vhs-side-image,
  .vhs-luxe .vhs-showcase-image,
  .vhs-luxe .vhs-cta {
    position: relative;
    overflow: hidden;
    background: #efeaff;
  }

  .vhs-luxe .vhs-main-image {
    min-height: 560px;
    border-radius: 26px;
    box-shadow: 0 22px 54px rgba(50, 35, 111, 0.12);
  }

  .vhs-luxe .vhs-side-stack {
    display: grid;
    gap: 16px;
  }

  .vhs-luxe .vhs-side-image {
    min-height: 272px;
    border-radius: 24px;
    box-shadow: 0 14px 34px rgba(50, 35, 111, 0.08);
  }

  .vhs-luxe .vhs-main-image::after,
  .vhs-luxe .vhs-side-image::after,
  .vhs-luxe .vhs-showcase-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(23, 15, 60, 0.04), rgba(23, 15, 60, 0.16)),
      radial-gradient(circle at 0 100%, rgba(106, 73, 242, 0.18), transparent 40%);
    pointer-events: none;
  }

  .vhs-luxe .vhs-main-image img,
  .vhs-luxe .vhs-side-image img,
  .vhs-luxe .vhs-showcase-image img,
  .vhs-luxe .vhs-cta-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
  }

  .vhs-luxe .vhs-float {
    position: absolute;
    z-index: 3;
    max-width: 230px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(106, 73, 242, 0.12);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 42px rgba(50, 35, 111, 0.12);
    transition: var(--vhs-transition);
  }

  .vhs-luxe .vhs-float:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 52px rgba(50, 35, 111, 0.16);
  }

  .vhs-luxe .vhs-float strong {
    display: block;
    margin-bottom: 6px;
    color: var(--vhs-heading);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .vhs-luxe .vhs-float span {
    display: block;
    color: var(--vhs-muted);
    font-size: 12px;
    line-height: 1.62;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .vhs-luxe .vhs-float.top {
    top: 28px;
    left: -12px;
  }

  .vhs-luxe .vhs-float.bottom {
    right: 24px;
    bottom: 24px;
  }

  /* MINI STRIP */
  .vhs-luxe .vhs-mini-strip {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .vhs-luxe .vhs-mini-card,
  .vhs-luxe .vhs-benefit,
  .vhs-luxe .vhs-showcase-copy,
  .vhs-luxe .vhs-stat {
    background: var(--vhs-surface);
    border: 1px solid var(--vhs-border);
    box-shadow: var(--vhs-shadow);
    backdrop-filter: blur(14px);
    transition: var(--vhs-transition);
  }

  .vhs-luxe .vhs-mini-card:hover,
  .vhs-luxe .vhs-benefit:hover,
  .vhs-luxe .vhs-showcase-copy:hover,
  .vhs-luxe .vhs-stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--vhs-shadow-hover);
    border-color: rgba(106, 73, 242, 0.20);
  }

  .vhs-luxe .vhs-mini-card {
    padding: 18px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .vhs-luxe .vhs-mini-card strong {
    display: block;
    margin-bottom: 6px;
    color: var(--vhs-heading);
    font-size: 15px;
    line-height: 1.38;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .vhs-luxe .vhs-mini-card p {
    margin: 0;
    color: var(--vhs-muted);
    font-size: 13px;
    line-height: 1.62;
  }

  /* HEAD */
  .vhs-luxe .vhs-head {
    max-width: 760px;
    margin-bottom: clamp(24px, 2.8vw, 34px);
  }

  .vhs-luxe .vhs-head h2 {
    margin: 16px 0 12px;
    color: var(--vhs-heading);
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.04em;
    font-weight: 700;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .vhs-luxe .vhs-head p {
    margin: 0;
    max-width: 720px;
    color: var(--vhs-muted);
    font-size: 15.5px;
    line-height: 1.72;
  }

  /* BENEFITS */
  .vhs-luxe .vhs-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .vhs-luxe .vhs-benefit {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: 26px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,245,255,0.94));
  }

  .vhs-luxe .vhs-benefit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(106,73,242,0.04), transparent 52%, rgba(106,73,242,0.06));
    pointer-events: none;
  }

  .vhs-luxe .vhs-benefit-no {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(106,73,242,0.14), rgba(223,218,243,0.96));
    color: var(--vhs-accent);
    font-size: 14px;
    font-weight: 700;
  }

  .vhs-luxe .vhs-benefit h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    color: var(--vhs-heading);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .vhs-luxe .vhs-benefit p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--vhs-muted);
    font-size: 14.5px;
    line-height: 1.68;
  }

  /* SHOWCASE */
  .vhs-luxe .vhs-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 24px;
    align-items: stretch;
  }

  .vhs-luxe .vhs-showcase-image {
    min-height: 600px;
    border-radius: var(--vhs-radius-xl);
    box-shadow: var(--vhs-shadow-deep);
    background: #efeaff;
  }

  .vhs-luxe .vhs-showcase-note {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(106, 73, 242, 0.12);
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 34px rgba(50, 35, 111, 0.10);
  }

  .vhs-luxe .vhs-showcase-note strong {
    display: block;
    margin-bottom: 6px;
    color: var(--vhs-heading);
    font-size: 16px;
    line-height: 1.36;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .vhs-luxe .vhs-showcase-note p {
    margin: 0;
    color: var(--vhs-muted);
    font-size: 13px;
    line-height: 1.62;
  }

  .vhs-luxe .vhs-showcase-copy {
    padding: 28px;
    border-radius: var(--vhs-radius-xl);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,244,255,0.96));
  }

  .vhs-luxe .vhs-showcase-copy h3 {
    margin: 16px 0 12px;
    color: var(--vhs-heading);
    font-size: clamp(26px, 3.1vw, 38px);
    line-height: 1.14;
    letter-spacing: -0.035em;
    font-weight: 700;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .vhs-luxe .vhs-showcase-copy > p {
    margin: 0 0 18px;
    color: var(--vhs-muted);
    font-size: 14.8px;
    line-height: 1.72;
  }

  .vhs-luxe .vhs-points {
    display: grid;
    gap: 0;
    margin-top: 22px;
  }

  .vhs-luxe .vhs-point {
    padding: 15px 0;
    border-bottom: 1px solid rgba(106, 73, 242, 0.10);
  }

  .vhs-luxe .vhs-point:first-child {
    padding-top: 0;
  }

  .vhs-luxe .vhs-point:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .vhs-luxe .vhs-point strong {
    display: block;
    margin-bottom: 6px;
    color: var(--vhs-heading);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .vhs-luxe .vhs-point p {
    margin: 0;
    color: var(--vhs-muted);
    font-size: 14px;
    line-height: 1.62;
  }

  .vhs-luxe .vhs-quiet-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
  }

  .vhs-luxe .vhs-stat {
    padding: 16px;
    border-radius: 18px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.07), transparent 34%),
      rgba(255,255,255,0.94);
  }

  .vhs-luxe .vhs-stat strong {
    display: block;
    margin-bottom: 6px;
    color: var(--vhs-heading);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .vhs-luxe .vhs-stat span {
    display: block;
    color: var(--vhs-muted);
    font-size: 12.5px;
    line-height: 1.55;
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  /* CTA */
  .vhs-luxe .vhs-cta {
    min-height: 440px;
    border-radius: var(--vhs-radius-xl);
    box-shadow: var(--vhs-shadow-deep);
  }

  .vhs-luxe .vhs-cta-image {
    position: absolute;
    inset: 0;
  }

  .vhs-luxe .vhs-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(50, 35, 111, 0.82) 0%, rgba(50, 35, 111, 0.62) 48%, rgba(50, 35, 111, 0.18) 100%),
      radial-gradient(circle at 0 100%, rgba(106, 73, 242, 0.32), transparent 38%);
  }

  .vhs-luxe .vhs-cta-content {
    position: relative;
    z-index: 1;
    width: min(580px, 100%);
    padding: 44px;
  }

  .vhs-luxe .vhs-cta-content .vhs-label {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.10);
  }

  .vhs-luxe .vhs-cta-content .vhs-label::before {
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(255,255,255,.12);
  }

  .vhs-luxe .vhs-cta-content h2 {
    margin: 18px 0 14px;
    color: #ffffff;
    font-size: clamp(30px, 3.8vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.04em;
    font-weight: 700;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .vhs-luxe .vhs-cta-content p {
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 15px;
    line-height: 1.72;
  }

  .vhs-luxe .vhs-cta-content .vhs-actions {
    margin-bottom: 0;
  }

  .vhs-luxe .vhs-cta-content .vhs-btn-secondary {
    color: #ffffff;
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.22);
    box-shadow: none;
  }

  .vhs-luxe .vhs-cta-content .vhs-btn-secondary:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.18);
  }

  /* RESPONSIVE */
  @media (max-width: 1180px) {
    .vhs-luxe {
      --vhs-container: 980px;
      --vhs-page-gap: 34px;
      --vhs-space: 58px;
      padding-top: 82px;
    }

    .vhs-luxe .vhs-hero-grid,
    .vhs-luxe .vhs-showcase {
      grid-template-columns: 1fr;
    }

    .vhs-luxe .vhs-copy {
      max-width: 900px;
    }

    .vhs-luxe .vhs-visual-wrap {
      max-width: 860px;
    }

    .vhs-luxe .vhs-main-image {
      min-height: 520px;
    }

    .vhs-luxe .vhs-showcase-image {
      min-height: 520px;
    }

    .vhs-luxe .vhs-float.top {
      left: 18px;
      top: 18px;
    }

    .vhs-luxe .vhs-float.bottom {
      right: 18px;
      bottom: 18px;
    }
  }

  @media (max-width: 991px) {
    .vhs-luxe {
      --vhs-page-gap: 30px;
      --vhs-space: 54px;
      padding-top: 76px;
      padding-bottom: 76px;
    }

    .vhs-luxe .vhs-hero {
      padding-top: 26px;
      padding-bottom: 44px;
    }

    .vhs-luxe .vhs-mini-strip,
    .vhs-luxe .vhs-benefits,
    .vhs-luxe .vhs-quiet-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vhs-luxe .vhs-visual-grid {
      grid-template-columns: 1fr;
    }

    .vhs-luxe .vhs-side-stack {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vhs-luxe .vhs-side-image {
      min-height: 240px;
    }
  }

  @media (max-width: 767px) {
    .vhs-luxe {
      --vhs-page-gap: 24px;
      --vhs-space: 46px;
      padding-top: 64px;
      padding-bottom: 68px;
    }

    .vhs-luxe .vhs-container {
      width: min(var(--vhs-container), calc(100% - var(--vhs-page-gap)));
    }

    .vhs-luxe .vhs-hero {
      padding: 16px 0 34px;
    }

    .vhs-luxe .vhs-section {
      padding-block: var(--vhs-space);
    }

    .vhs-luxe .vhs-copy h1 {
      font-size: clamp(30px, 9.3vw, 42px);
      line-height: 1.1;
      margin: 16px 0 12px;
    }

    .vhs-luxe .vhs-head h2,
    .vhs-luxe .vhs-cta-content h2 {
      font-size: clamp(24px, 7.4vw, 34px);
      line-height: 1.16;
    }

    .vhs-luxe .vhs-showcase-copy h3 {
      font-size: clamp(22px, 7vw, 30px);
      line-height: 1.16;
    }

    .vhs-luxe .vhs-copy p,
    .vhs-luxe .vhs-head p,
    .vhs-luxe .vhs-benefit p,
    .vhs-luxe .vhs-showcase-copy > p,
    .vhs-luxe .vhs-cta-content p {
      font-size: 14px;
      line-height: 1.62;
    }

    .vhs-luxe .vhs-label {
      padding: 8px 12px;
      gap: 8px;
      font-size: 9.5px;
      letter-spacing: .075em;
    }

    .vhs-luxe .vhs-label::before {
      width: 7px;
      height: 7px;
    }

    .vhs-luxe .vhs-actions {
      flex-direction: column;
      align-items: stretch;
      gap: 11px;
    }

    .vhs-luxe .vhs-btn {
      width: 100%;
      min-width: 0;
      min-height: 50px;
      padding: 13px 16px;
      border-radius: 14px;
      font-size: 14px;
    }

    .vhs-luxe .vhs-support {
      gap: 8px;
    }

    .vhs-luxe .vhs-support span {
      font-size: 11.5px;
      padding: 8px 10px;
      white-space: normal;
    }

    .vhs-luxe .vhs-visual-frame {
      padding: 16px;
      border-radius: 24px;
    }

    .vhs-luxe .vhs-main-image {
      min-height: 340px;
      border-radius: 20px;
    }

    .vhs-luxe .vhs-side-stack,
    .vhs-luxe .vhs-mini-strip,
    .vhs-luxe .vhs-benefits,
    .vhs-luxe .vhs-quiet-stats {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .vhs-luxe .vhs-side-image {
      min-height: 190px;
      border-radius: 20px;
    }

    .vhs-luxe .vhs-float {
      position: static;
      width: 100%;
      max-width: none;
      margin-top: 14px;
      padding: 14px;
      border-radius: 18px;
    }

    .vhs-luxe .vhs-mini-card,
    .vhs-luxe .vhs-benefit,
    .vhs-luxe .vhs-showcase-copy,
    .vhs-luxe .vhs-stat {
      padding: 16px;
      border-radius: 20px;
    }

    .vhs-luxe .vhs-benefit {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      column-gap: 12px;
      align-items: center;
      text-align: left;
    }

    .vhs-luxe .vhs-benefit-no {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      margin: 0;
      font-size: 13px;
    }

    .vhs-luxe .vhs-benefit h3 {
      margin: 0;
      font-size: 16.5px;
      line-height: 1.32;
    }

    .vhs-luxe .vhs-benefit p {
      grid-column: 1 / -1;
      margin-top: 12px;
    }

    .vhs-luxe .vhs-showcase-image {
      min-height: 360px;
      border-radius: 22px;
    }

    .vhs-luxe .vhs-showcase-note {
      left: 12px;
      right: 12px;
      bottom: 12px;
      padding: 14px;
      border-radius: 18px;
    }

    .vhs-luxe .vhs-showcase-note strong {
      font-size: 15px;
    }

    .vhs-luxe .vhs-showcase-note p,
    .vhs-luxe .vhs-point p {
      font-size: 13px;
      line-height: 1.58;
    }

    .vhs-luxe .vhs-point {
      padding: 13px 0;
    }

    .vhs-luxe .vhs-point strong {
      font-size: 15px;
      line-height: 1.35;
    }

    .vhs-luxe .vhs-stat {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }

    .vhs-luxe .vhs-stat strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      margin: 0;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(106, 73, 242, .09);
      font-size: 13.5px;
      line-height: 1.15;
      text-align: center;
    }

    .vhs-luxe .vhs-stat span {
      font-size: 12.5px;
      line-height: 1.5;
    }

    .vhs-luxe .vhs-cta {
      min-height: 390px;
      border-radius: 22px;
    }

    .vhs-luxe .vhs-cta::after {
      background:
        linear-gradient(180deg, rgba(50, 35, 111, 0.84) 0%, rgba(50, 35, 111, 0.64) 100%),
        radial-gradient(circle at 0 100%, rgba(106, 73, 242, 0.32), transparent 38%);
    }

    .vhs-luxe .vhs-cta-content {
      padding: 24px 18px;
    }
  }

  @media (max-width: 430px) {
    .vhs-luxe {
      --vhs-page-gap: 22px;
      --vhs-space: 42px;
      padding-top: 58px;
    }

    .vhs-luxe .vhs-hero {
      padding-top: 10px;
      padding-bottom: 30px;
    }

    .vhs-luxe .vhs-copy h1 {
      font-size: clamp(27px, 8.8vw, 36px);
    }

    .vhs-luxe .vhs-head h2,
    .vhs-luxe .vhs-cta-content h2,
    .vhs-luxe .vhs-showcase-copy h3 {
      font-size: clamp(22px, 7vw, 30px);
    }

    .vhs-luxe .vhs-visual-frame,
    .vhs-luxe .vhs-mini-card,
    .vhs-luxe .vhs-benefit,
    .vhs-luxe .vhs-showcase-copy,
    .vhs-luxe .vhs-stat {
      padding: 14px;
      border-radius: 18px;
    }

    .vhs-luxe .vhs-main-image {
      min-height: 320px;
    }

    .vhs-luxe .vhs-benefit {
      grid-template-columns: 40px minmax(0, 1fr);
      column-gap: 11px;
    }

    .vhs-luxe .vhs-benefit-no {
      width: 40px;
      height: 40px;
      border-radius: 13px;
    }

    .vhs-luxe .vhs-stat {
      grid-template-columns: 84px minmax(0, 1fr);
    }

    .vhs-luxe .vhs-stat strong {
      font-size: 12.5px;
    }

    .vhs-luxe .vhs-showcase-image {
      min-height: 330px;
    }
  }

  @media (max-width: 360px) {
    .vhs-luxe {
      --vhs-page-gap: 18px;
      padding-top: 54px;
    }

    .vhs-luxe .vhs-copy h1 {
      font-size: 25px;
    }

    .vhs-luxe .vhs-label {
      font-size: 8.5px;
      letter-spacing: .055em;
      padding: 7px 10px;
    }

    .vhs-luxe .vhs-stat {
      grid-template-columns: 1fr;
    }

    .vhs-luxe .vhs-stat strong {
      width: fit-content;
      justify-content: flex-start;
    }
  }

  @media (hover: none) {
    .vhs-luxe .vhs-btn:hover,
    .vhs-luxe .vhs-float:hover,
    .vhs-luxe .vhs-mini-card:hover,
    .vhs-luxe .vhs-benefit:hover,
    .vhs-luxe .vhs-showcase-copy:hover,
    .vhs-luxe .vhs-stat:hover {
      transform: none;
    }
  }

/*===================================================================================
    16. Virtual Hiring Software CSS End
===================================================================================*/

/*===================================================================================
    17. Developer Hiring Platform CSS Start
===================================================================================*/

:root {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --bg-purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --slider-dots-color: #D4D2DD;
    --light-bg: #DFDAF3;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 6% 4%, rgba(106, 73, 242, 0.12), transparent 25%),
      radial-gradient(circle at 94% 8%, rgba(223, 218, 243, 0.92), transparent 26%),
      radial-gradient(circle at 4% 92%, rgba(106, 73, 242, 0.07), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fcfbff 44%, #f7f3ff 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .devhire-premium,
  .devhire-premium * {
    box-sizing: border-box;
  }

  .devhire-premium {
    --dh-container: 1160px;
    --dh-page-gap: 44px;
    --dh-space: clamp(46px, 4.8vw, 68px);
    --dh-brand: var(--purple);
    --dh-brand-dark: #4D32C8;
    --dh-brand-soft: rgba(106, 73, 242, 0.08);
    --dh-heading: var(--dark-purple);
    --dh-text: var(--body-text-purple);
    --dh-muted: rgba(62, 63, 102, 0.78);
    --dh-surface: rgba(255, 255, 255, 0.94);
    --dh-surface-solid: #ffffff;
    --dh-line: rgba(106, 73, 242, 0.14);
    --dh-line-soft: rgba(106, 73, 242, 0.10);
    --dh-shadow: 0 16px 42px rgba(50, 35, 111, 0.085);
    --dh-shadow-hover: 0 24px 58px rgba(50, 35, 111, 0.13);
    --dh-shadow-deep: 0 28px 72px rgba(50, 35, 111, 0.15);
    --dh-radius-xl: 32px;
    --dh-radius-lg: 26px;
    --dh-radius-md: 20px;
    --dh-radius-sm: 16px;
    --dh-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    padding-top: clamp(72px, 6vw, 96px);
    background:
      radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
      radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
    color: var(--dh-text);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .devhire-premium::before,
  .devhire-premium::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    opacity: .72;
  }

  .devhire-premium::before {
    width: 300px;
    height: 300px;
    top: 92px;
    left: -120px;
    background: rgba(106, 73, 242, 0.13);
  }

  .devhire-premium::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
  }

  .devhire-premium a {
    color: inherit;
    text-decoration: none;
  }

  .devhire-premium img,
  .devhire-premium svg {
    display: block;
    max-width: 100%;
  }

  .devhire-shell {
    position: relative;
    z-index: 1;
    width: min(var(--dh-container), calc(100% - var(--dh-page-gap)));
    margin: 0 auto;
  }

  .devhire-section {
    padding-block: var(--dh-space);
    position: relative;
  }

  .dh-kicker,
  .dh-story-eyebrow,
  .dh-use-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    min-height: auto;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--dh-brand);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    overflow-wrap: anywhere;
  }

  .dh-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dh-brand), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
  }

  .dh-heading,
  .dh-subheading,
  .dh-story-copy h3,
  .dh-flow-card h3,
  .dh-use-content h3 {
    color: var(--dh-heading);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .dh-heading {
    margin: 0;
    font-size: clamp(38px, 5.2vw, 62px);
    line-height: 1.06;
  }

  .dh-heading .accent,
  .dh-subheading .accent {
    color: var(--dh-brand);
  }

  .dh-subheading {
    margin: 0;
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
  }

  .dh-copy,
  .dh-feature-list li,
  .dh-flow-card p,
  .dh-editorial-copy p,
  .dh-proof-copy p,
  .dh-final-copy p {
    margin: 0;
    color: var(--dh-muted);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .dh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
  }

  .dh-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    transition: var(--dh-transition);
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
  }

  .dh-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
    z-index: -1;
  }

  .dh-btn:hover {
    transform: translateY(-3px);
  }

  .dh-btn:hover::before {
    transform: scaleX(1);
  }

  .dh-btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--dh-brand), #7d5df6);
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.22);
  }

  .dh-btn-primary::before {
    background: linear-gradient(135deg, var(--dh-heading), var(--dh-brand));
  }

  .dh-btn-primary:hover {
    color: #ffffff;
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.28);
  }

  .dh-btn-secondary {
    color: var(--dh-brand);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
  }

  .dh-btn-secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
  }

  .dh-btn-secondary:hover {
    color: var(--dh-brand);
  }

  /* HERO */
  .dh-hero {
    padding: clamp(24px, 3vw, 38px) 0 clamp(44px, 5vw, 64px);
  }

  .dh-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    gap: clamp(24px, 3vw, 34px);
    align-items: center;
  }

  .dh-hero-copy {
    display: grid;
    gap: 22px;
    max-width: 680px;
    min-width: 0;
  }

  .dh-hero-copy .dh-copy {
    max-width: 640px;
    font-size: 16px;
    line-height: 1.74;
  }

  .dh-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 2px;
  }

  .dh-metric-pill,
  .dh-brand-row,
  .dh-story-block,
  .dh-editorial-stat,
  .dh-flow-card {
    background: var(--dh-surface);
    border: 1px solid var(--dh-line);
    box-shadow: var(--dh-shadow);
    backdrop-filter: blur(14px);
    transition: var(--dh-transition);
  }

  .dh-metric-pill:hover,
  .dh-brand-row:hover,
  .dh-story-block:hover,
  .dh-editorial-stat:hover,
  .dh-flow-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--dh-shadow-hover);
    border-color: rgba(106, 73, 242, 0.20);
  }

  .dh-metric-pill {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .dh-metric-pill strong {
    display: block;
    margin-bottom: 7px;
    color: var(--dh-heading);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .dh-metric-pill span {
    display: block;
    color: var(--dh-muted);
    font-size: 12.5px;
    line-height: 1.58;
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  .dh-hero-visual {
    position: relative;
    display: grid;
    gap: 18px;
    min-width: 0;
  }

  .dh-image-frame {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    border-radius: var(--dh-radius-xl);
    background: #efeaff;
    box-shadow: var(--dh-shadow-deep);
    border: 1px solid rgba(106, 73, 242, 0.12);
  }

  .dh-image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(23, 15, 60, 0.06) 0%, rgba(23, 15, 60, 0.16) 42%, rgba(23, 15, 60, 0.70) 100%),
      radial-gradient(circle at 0 100%, rgba(106, 73, 242, 0.22), transparent 42%);
    pointer-events: none;
  }

  .dh-image-frame img {
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
  }

  .dh-floating-note {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 36px);
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(106, 73, 242, 0.12);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.10);
    color: var(--dh-heading);
    font-size: 12.5px;
    line-height: 1.3;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .dh-floating-note::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #86efac);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.12);
    flex: 0 0 auto;
  }

  .dh-hero-product {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    width: min(350px, calc(100% - 36px));
    padding: 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(106, 73, 242, 0.12);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 42px rgba(50, 35, 111, 0.14);
  }

  .dh-product-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
  }

  .dh-product-top strong {
    display: block;
    color: var(--dh-heading);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .dh-product-top span {
    display: block;
    margin-top: 4px;
    color: var(--dh-muted);
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 500;
  }

  .dh-mini-badge,
  .dh-chip-score {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.09);
    color: var(--dh-brand);
    border: 1px solid rgba(106, 73, 242, 0.10);
    font-size: 11.5px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
  }

  .dh-signal-list {
    display: grid;
    gap: 0;
  }

  .dh-signal-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-top: 1px solid rgba(106, 73, 242, 0.10);
  }

  .dh-signal-item:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .dh-signal-item:last-child {
    padding-bottom: 0;
  }

  .dh-signal-item strong {
    display: block;
    margin-bottom: 4px;
    color: var(--dh-heading);
    font-size: 13.5px;
    line-height: 1.38;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .dh-signal-item span {
    display: block;
    color: var(--dh-muted);
    font-size: 12px;
    line-height: 1.5;
  }

  /* BRAND STRIP */
  .dh-brand-strip {
    padding: 18px 0 0;
  }

  .dh-brand-row {
    display: grid;
    grid-template-columns: 1.05fr 1.2fr;
    gap: 20px;
    align-items: center;
    padding: 22px;
    border-radius: var(--dh-radius-lg);
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .dh-brand-row p {
    margin: 0;
    color: var(--dh-heading);
    font-size: 15px;
    line-height: 1.68;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .dh-brand-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
  }

  .dh-brand-list span {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    max-width: 100%;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.12);
    color: var(--dh-brand);
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  /* PROOF */
  .dh-proof-grid,
  .dh-editorial-shell {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 30px;
    align-items: center;
  }

  .dh-proof-copy,
  .dh-editorial-copy {
    display: grid;
    gap: 20px;
    max-width: 620px;
  }

  .dh-feature-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: grid;
    gap: 12px;
  }

  .dh-feature-list li {
    position: relative;
    padding: 13px 14px 13px 44px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(106, 73, 242, 0.10);
    box-shadow: 0 10px 24px rgba(50, 35, 111, 0.05);
  }

  .dh-feature-list li::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 50%;
    width: 9px;
    height: 9px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--dh-brand);
    box-shadow: 0 0 0 6px rgba(106, 73, 242, 0.10);
  }

  .dh-proof-visual {
    position: relative;
    min-height: 560px;
  }

  .dh-proof-main {
    position: absolute;
    inset: 0 80px 0 0;
    overflow: hidden;
    border-radius: var(--dh-radius-xl);
    box-shadow: var(--dh-shadow-deep);
    background: #efeaff;
  }

  .dh-proof-main::after,
  .dh-proof-side::after,
  .dh-story-media::after,
  .dh-editorial-visual::after,
  .dh-cta-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(23, 15, 60, 0.04), rgba(23, 15, 60, 0.20)),
      radial-gradient(circle at 0 100%, rgba(106, 73, 242, 0.14), transparent 40%);
    pointer-events: none;
  }

  .dh-proof-main img,
  .dh-proof-side img,
  .dh-story-media img,
  .dh-editorial-visual img,
  .dh-cta-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dh-proof-side {
    position: absolute;
    right: 0;
    bottom: 34px;
    width: 230px;
    height: 280px;
    overflow: hidden;
    border-radius: 26px;
    border: 8px solid rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 40px rgba(50, 35, 111, 0.14);
    background: #efeaff;
  }

  .dh-proof-card {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: min(300px, calc(100% - 48px));
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(106, 73, 242, 0.12);
    box-shadow: 0 14px 28px rgba(50, 35, 111, 0.12);
  }

  .dh-proof-card strong {
    display: block;
    margin-bottom: 7px;
    color: var(--dh-heading);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .dh-proof-card span {
    display: block;
    color: var(--dh-muted);
    font-size: 12.5px;
    line-height: 1.6;
  }

  /* STORY BLOCKS */
  .dh-story-stack {
    display: grid;
    gap: 22px;
  }

  .dh-story-block {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    gap: 22px;
    align-items: stretch;
    padding: 22px;
    border-radius: var(--dh-radius-xl);
    background: rgba(255, 255, 255, 0.88);
  }

  .dh-story-block.reverse {
    grid-template-columns: minmax(360px, .95fr) minmax(0, 1.05fr);
  }

  .dh-story-copy {
    display: grid;
    gap: 16px;
    align-content: center;
    padding: 10px 6px;
  }

  .dh-story-eyebrow {
    min-height: auto;
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: .08em;
  }

  .dh-story-copy h3 {
    margin: 0;
    font-size: clamp(24px, 2.5vw, 36px);
    line-height: 1.14;
  }

  .dh-story-points {
    display: grid;
    gap: 12px;
  }

  .dh-story-point {
    padding: 14px;
    border-radius: 16px;
    background: rgba(106, 73, 242, 0.05);
    border: 1px solid rgba(106, 73, 242, 0.10);
  }

  .dh-story-point strong {
    display: block;
    margin-bottom: 5px;
    color: var(--dh-heading);
    font-size: 14px;
    line-height: 1.38;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .dh-story-point span {
    display: block;
    color: var(--dh-muted);
    font-size: 12.8px;
    line-height: 1.58;
  }

  .dh-story-media {
    position: relative;
    overflow: hidden;
    border-radius: var(--dh-radius-lg);
    min-height: 420px;
    background: #efeaff;
  }

  .dh-story-float {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    max-width: calc(100% - 32px);
    padding: 13px 15px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(106, 73, 242, 0.12);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 22px rgba(50, 35, 111, 0.12);
    color: var(--dh-heading);
    font-size: 12.8px;
    line-height: 1.5;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  /* EDITORIAL */
  .dh-editorial-shell {
    align-items: stretch;
  }

  .dh-editorial-visual {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    border-radius: var(--dh-radius-xl);
    box-shadow: var(--dh-shadow-deep);
    background: #efeaff;
  }

  .dh-editorial-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .dh-editorial-stat {
    padding: 20px;
    border-radius: 22px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .dh-editorial-stat strong {
    display: block;
    margin-bottom: 7px;
    color: var(--dh-heading);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .dh-editorial-stat span {
    display: block;
    color: var(--dh-muted);
    font-size: 12.8px;
    line-height: 1.58;
  }

  /* FLOW */
  .dh-flow-head {
    display: grid;
    gap: 16px;
    max-width: 780px;
    margin-bottom: 30px;
  }

  .dh-flow-line {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .dh-flow-line::before {
    display: none;
  }

  .dh-flow-card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 13px;
    align-content: start;
    padding: 22px;
    border-radius: var(--dh-radius-lg);
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.92);
  }

  .dh-flow-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.035), transparent 52%, rgba(106, 73, 242, 0.06));
    pointer-events: none;
    border-radius: inherit;
  }

  .dh-flow-number {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.14), rgba(223, 218, 243, 0.96));
    color: var(--dh-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 18px rgba(106, 73, 242, 0.10);
    font-size: 14px;
    font-weight: 700;
  }

  .dh-flow-card h3,
  .dh-flow-card span,
  .dh-flow-card p {
    position: relative;
    z-index: 1;
  }

  .dh-flow-card h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.28;
    font-weight: 700;
  }

  .dh-flow-card span {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    color: var(--dh-brand);
    font-size: 11.5px;
    line-height: 1;
    font-weight: 700;
  }

  .dh-flow-card p {
    font-size: 13.5px;
    line-height: 1.58;
  }

  /* USE CASES */
  .dh-use-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .dh-use-panel {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    border-radius: 30px;
    box-shadow: var(--dh-shadow-deep);
    background: #efeaff;
    transition: var(--dh-transition);
  }

  .dh-use-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 76px rgba(50, 35, 111, 0.18);
  }

  .dh-use-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(50, 35, 111, 0.08) 0%, rgba(50, 35, 111, 0.78) 100%),
      radial-gradient(circle at 0 100%, rgba(106, 73, 242, 0.24), transparent 42%);
  }

  .dh-use-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dh-use-content {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 24px;
    display: grid;
    gap: 13px;
  }

  .dh-use-tag {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    box-shadow: none;
    backdrop-filter: blur(10px);
    font-size: 10.8px;
    letter-spacing: .08em;
    padding: 8px 11px;
  }

  .dh-use-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.18;
    font-weight: 700;
  }

  .dh-use-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 13.5px;
    line-height: 1.62;
  }

  /* FINAL CTA */
  .dh-final-cta {
    padding-top: var(--dh-space);
    padding-bottom: clamp(58px, 6vw, 86px);
  }

  .dh-final-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .88fr);
    gap: 28px;
    padding: clamp(24px, 3.2vw, 34px);
    border-radius: var(--dh-radius-xl);
    overflow: hidden;
    background:
      radial-gradient(circle at right top, rgba(255,255,255,0.12), transparent 28%),
      linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
  }

  .dh-final-shell::before,
  .dh-final-shell::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    pointer-events: none;
  }

  .dh-final-shell::before {
    width: 260px;
    height: 260px;
    right: -80px;
    top: -70px;
  }

  .dh-final-shell::after {
    width: 220px;
    height: 220px;
    left: -60px;
    bottom: -60px;
  }

  .dh-final-copy,
  .dh-cta-visual {
    position: relative;
    z-index: 1;
  }

  .dh-final-copy {
    display: grid;
    gap: 20px;
    align-content: center;
    max-width: 620px;
  }

  .dh-final-copy .dh-kicker {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.16);
    color: #ffffff;
  }

  .dh-final-copy .dh-kicker::before {
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.12);
  }

  .dh-final-copy .dh-subheading {
    color: #ffffff;
  }

  .dh-final-copy .dh-copy {
    color: rgba(255,255,255,0.80);
  }

  .dh-final-copy .dh-btn-secondary {
    color: #ffffff;
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.22);
    box-shadow: none;
  }

  .dh-final-copy .dh-btn-secondary:hover {
    background: rgba(255,255,255,0.18);
    color: #ffffff;
  }

  .dh-cta-visual {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    border-radius: 26px;
    background: rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  }

  /* REVEAL */
  .dh-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s ease, transform .65s ease;
  }

  .dh-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
  }

  /* TABLET */
  @media (max-width: 1180px) {
    .devhire-premium {
      --dh-container: 980px;
      --dh-page-gap: 34px;
      --dh-space: 58px;
      padding-top: 82px;
    }

    .dh-hero-grid,
    .dh-proof-grid,
    .dh-editorial-shell,
    .dh-final-shell,
    .dh-brand-row,
    .dh-story-block,
    .dh-story-block.reverse {
      grid-template-columns: 1fr;
    }

    .dh-brand-list {
      justify-content: flex-start;
    }

    .dh-hero-copy,
    .dh-proof-copy,
    .dh-editorial-copy {
      max-width: 900px;
    }

    .dh-image-frame {
      min-height: 520px;
      max-width: 820px;
    }

    .dh-image-frame img {
      min-height: 520px;
    }

    .dh-proof-visual {
      min-height: 520px;
      max-width: 820px;
    }

    .dh-story-media {
      min-height: 360px;
    }
  }

  @media (max-width: 991px) {
    .devhire-premium {
      --dh-page-gap: 30px;
      --dh-space: 54px;
      padding-top: 76px;
    }

    .dh-hero {
      padding-top: 26px;
      padding-bottom: 44px;
    }

    .dh-hero-metrics,
    .dh-editorial-stats,
    .dh-flow-line,
    .dh-use-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dh-proof-main {
      inset: 0 60px 0 0;
    }

    .dh-proof-side {
      width: 190px;
      height: 230px;
    }
  }

  /* MOBILE */
  @media (max-width: 767px) {
    .devhire-premium {
      --dh-page-gap: 24px;
      --dh-space: 46px;
      padding-top: 64px;
    }

    .devhire-shell {
      width: min(var(--dh-container), calc(100% - var(--dh-page-gap)));
    }

    .dh-hero {
      padding: 16px 0 34px;
    }

    .devhire-section {
      padding-block: var(--dh-space);
    }

    .dh-heading {
      font-size: clamp(30px, 9.3vw, 42px);
      line-height: 1.1;
    }

    .dh-subheading {
      font-size: clamp(24px, 7.4vw, 34px);
      line-height: 1.16;
    }

    .dh-copy,
    .dh-feature-list li,
    .dh-flow-card p,
    .dh-editorial-copy p,
    .dh-proof-copy p,
    .dh-final-copy p {
      font-size: 14px;
      line-height: 1.62;
    }

    .dh-kicker,
    .dh-story-eyebrow,
    .dh-use-tag {
      padding: 8px 12px;
      gap: 8px;
      font-size: 9.5px;
      letter-spacing: .075em;
    }

    .dh-kicker::before {
      width: 7px;
      height: 7px;
    }

    .dh-actions {
      flex-direction: column;
      align-items: stretch;
      gap: 11px;
    }

    .dh-btn {
      width: 100%;
      min-width: 0;
      min-height: 50px;
      padding: 13px 16px;
      border-radius: 14px;
      font-size: 14px;
    }

    .dh-hero-metrics,
    .dh-editorial-stats,
    .dh-flow-line,
    .dh-use-grid {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .dh-metric-pill {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 15px;
      border-radius: 18px;
    }

    .dh-metric-pill strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      margin: 0;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(106, 73, 242, .09);
      font-size: 13.8px;
      line-height: 1.15;
      text-align: center;
    }

    .dh-metric-pill span {
      font-size: 12.8px;
      line-height: 1.52;
    }

    .dh-image-frame {
      min-height: 340px;
      border-radius: 22px;
    }

    .dh-image-frame img {
      min-height: 340px;
    }

    .dh-floating-note {
      top: 12px;
      left: 12px;
      right: 12px;
      max-width: calc(100% - 24px);
      width: fit-content;
      padding: 9px 12px;
      font-size: 11.5px;
    }

    .dh-hero-product {
      position: static;
      width: 100%;
      margin-top: 14px;
      padding: 16px;
      border-radius: 20px;
    }

    .dh-product-top {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .dh-mini-badge {
      width: fit-content;
    }

    .dh-signal-item {
      grid-template-columns: 1fr;
      gap: 8px;
      padding: 12px 0;
    }

    .dh-chip-score {
      justify-self: start;
    }

    .dh-brand-row,
    .dh-story-block,
    .dh-flow-card,
    .dh-editorial-stat {
      padding: 16px;
      border-radius: 20px;
    }

    .dh-brand-list {
      gap: 8px;
    }

    .dh-brand-list span {
      min-height: 36px;
      font-size: 11.5px;
      padding: 8px 10px;
    }

    .dh-feature-list {
      gap: 10px;
    }

    .dh-feature-list li {
      padding: 12px 12px 12px 40px;
      border-radius: 15px;
    }

    .dh-feature-list li::before {
      left: 15px;
    }

    .dh-proof-visual {
      min-height: auto;
    }

    .dh-proof-main {
      position: relative;
      inset: auto;
      height: 340px;
      border-radius: 22px;
    }

    .dh-proof-side {
      display: none;
    }

    .dh-proof-card {
      position: static;
      width: 100%;
      margin-top: 14px;
      padding: 14px;
      border-radius: 18px;
    }

    .dh-story-copy {
      padding: 0;
    }

    .dh-story-copy h3 {
      font-size: clamp(22px, 7vw, 30px);
      line-height: 1.16;
    }

    .dh-story-point {
      padding: 13px;
      border-radius: 15px;
    }

    .dh-story-media,
    .dh-editorial-visual,
    .dh-cta-visual {
      min-height: 300px;
      border-radius: 20px;
    }

    .dh-editorial-stat {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
    }

    .dh-flow-card {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      column-gap: 12px;
      align-items: center;
    }

    .dh-flow-number {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      font-size: 13px;
    }

    .dh-flow-card span {
      grid-column: 2;
      grid-row: 1;
      align-self: end;
      padding: 7px 10px;
      font-size: 10.5px;
    }

    .dh-flow-card h3 {
      grid-column: 1 / -1;
      margin-top: 2px;
      font-size: 16.5px;
      line-height: 1.32;
    }

    .dh-flow-card p {
      grid-column: 1 / -1;
      margin-top: -2px;
    }

    .dh-use-panel {
      min-height: 360px;
      border-radius: 22px;
    }

    .dh-use-content {
      padding: 18px;
      gap: 11px;
    }

    .dh-use-content h3 {
      font-size: 19px;
      line-height: 1.22;
    }

    .dh-final-cta {
      padding-top: var(--dh-space);
      padding-bottom: 64px;
    }

    .dh-final-shell {
      grid-template-columns: 1fr;
      gap: 18px;
      padding: 18px;
      border-radius: 22px;
    }

    .dh-cta-visual {
      min-height: 260px;
    }
  }

  @media (max-width: 430px) {
    .devhire-premium {
      --dh-page-gap: 22px;
      --dh-space: 42px;
      padding-top: 58px;
    }

    .dh-hero {
      padding-top: 10px;
      padding-bottom: 30px;
    }

    .dh-heading {
      font-size: clamp(27px, 8.8vw, 36px);
    }

    .dh-subheading {
      font-size: clamp(22px, 7vw, 30px);
    }

    .dh-metric-pill,
    .dh-brand-row,
    .dh-story-block,
    .dh-flow-card,
    .dh-editorial-stat,
    .dh-hero-product,
    .dh-final-shell {
      padding: 14px;
      border-radius: 18px;
    }

    .dh-metric-pill {
      grid-template-columns: 86px minmax(0, 1fr);
    }

    .dh-metric-pill strong {
      font-size: 12.8px;
      min-height: 40px;
    }

    .dh-image-frame,
    .dh-image-frame img {
      min-height: 320px;
    }

    .dh-proof-main {
      height: 320px;
    }

    .dh-story-media,
    .dh-editorial-visual {
      min-height: 280px;
    }
  }

  @media (max-width: 360px) {
    .devhire-premium {
      --dh-page-gap: 18px;
      padding-top: 54px;
    }

    .dh-heading {
      font-size: 25px;
    }

    .dh-kicker,
    .dh-story-eyebrow,
    .dh-use-tag {
      font-size: 8.5px;
      letter-spacing: .055em;
      padding: 7px 10px;
    }

    .dh-metric-pill {
      grid-template-columns: 1fr;
    }

    .dh-metric-pill strong {
      width: fit-content;
      justify-content: flex-start;
      text-align: left;
    }
  }

  @media (hover: none) {
    .dh-btn:hover,
    .dh-metric-pill:hover,
    .dh-brand-row:hover,
    .dh-story-block:hover,
    .dh-editorial-stat:hover,
    .dh-flow-card:hover,
    .dh-use-panel:hover {
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dh-reveal,
    .dh-btn {
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
    }
  }

  /* =====================================================
     FINAL TAG CENTER + BRAND STRIP POLISH
     Fixes mobile section tags alignment and improves the
     brand strip design on desktop/tablet/mobile.
  ===================================================== */

  .devhire-premium .dh-brand-strip {
    padding-top: 24px;
  }

  .devhire-premium .dh-brand-row {
    position: relative;
    overflow: hidden;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: center;
    padding: 24px;
    border-radius: 30px;
    background:
      radial-gradient(circle at 0% 0%, rgba(106, 73, 242, .10), transparent 34%),
      radial-gradient(circle at 100% 0%, rgba(223, 218, 243, .42), transparent 30%),
      linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,245,255,.94));
  }

  .devhire-premium .dh-brand-row::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 24px;
    border: 1px solid rgba(106, 73, 242, .07);
    pointer-events: none;
  }

  .devhire-premium .dh-brand-row p {
    position: relative;
    z-index: 1;
    max-width: 560px;
    padding-left: 16px;
    border-left: 4px solid rgba(106, 73, 242, .35);
    color: var(--dh-heading);
    font-size: 15.5px;
    line-height: 1.68;
    font-weight: 700;
  }

  .devhire-premium .dh-brand-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
  }

  .devhire-premium .dh-brand-list span {
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,244,254,.90));
    border: 1px solid rgba(106, 73, 242, .14);
    color: var(--dh-brand);
    box-shadow: 0 10px 22px rgba(50, 35, 111, .055);
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
  }

  .devhire-premium .dh-flow-head {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
  }

  .devhire-premium .dh-flow-head .dh-copy {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  .devhire-premium .dh-flow-head .dh-kicker,
  .devhire-premium .dh-flow-head .dh-story-eyebrow,
  .devhire-premium .dh-flow-head .dh-use-tag {
    justify-self: center;
  }

  @media (max-width: 1180px) {
    .devhire-premium .dh-brand-row {
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .devhire-premium .dh-brand-list {
      justify-content: flex-start;
    }
  }

  @media (max-width: 767px) {
    .devhire-premium .dh-brand-strip {
      padding-top: 16px;
    }

    .devhire-premium .dh-brand-row {
      padding: 16px;
      border-radius: 22px;
      text-align: center;
      gap: 16px;
      background:
        radial-gradient(circle at 50% 0%, rgba(106, 73, 242, .12), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,245,255,.94));
    }

    .devhire-premium .dh-brand-row::before {
      inset: 8px;
      border-radius: 18px;
    }

    .devhire-premium .dh-brand-row p {
      max-width: 100%;
      padding: 0 0 14px;
      border-left: 0;
      border-bottom: 1px solid rgba(106, 73, 242, .12);
      text-align: center;
      font-size: 14px;
      line-height: 1.58;
    }

    .devhire-premium .dh-brand-list {
      justify-content: center;
      gap: 8px;
    }

    .devhire-premium .dh-brand-list span {
      justify-content: center;
      min-height: 34px;
      padding: 8px 10px;
      font-size: 11px;
      white-space: normal;
      text-align: center;
    }

    .devhire-premium .dh-flow-head,
    .devhire-premium .dh-flow-head .dh-subheading,
    .devhire-premium .dh-flow-head .dh-copy {
      text-align: center;
    }

    .devhire-premium .dh-flow-head .dh-kicker {
      margin-left: auto;
      margin-right: auto;
      justify-content: center;
    }

    .devhire-premium .dh-use-content {
      justify-items: center;
      text-align: center;
    }

    .devhire-premium .dh-use-tag {
      justify-self: center;
      margin-left: auto;
      margin-right: auto;
    }

    .devhire-premium .dh-use-content h3,
    .devhire-premium .dh-use-content p {
      text-align: center;
    }
  }

  @media (max-width: 430px) {
    .devhire-premium .dh-brand-row {
      padding: 14px;
      border-radius: 20px;
    }

    .devhire-premium .dh-brand-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%;
    }

    .devhire-premium .dh-brand-list span {
      width: 100%;
    }
  }

  @media (max-width: 360px) {
    .devhire-premium .dh-brand-list {
      grid-template-columns: 1fr;
    }
  }


  /* =====================================================
     FINAL MOBILE PILL + FLOW CARD + WEB BRAND PILL FIX
     - Mobile workflow tags hidden
     - Mobile workflow number + heading side-by-side
     - Web brand strip chips show 2 per row
     - Mobile/top pills centered properly
  ===================================================== */

  @media (min-width: 1190px) {
    .devhire-premium .dh-brand-row {
      grid-template-columns: minmax(0, .95fr) minmax(420px, .9fr);
    }

    .devhire-premium .dh-brand-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      justify-content: stretch;
      align-items: stretch;
      max-width: 520px;
      margin-left: auto;
      width: 100%;
    }

    .devhire-premium .dh-brand-list span {
      width: 100%;
      justify-content: center;
      text-align: center;
      white-space: normal;
    }
  }

  @media (max-width: 767px) {
    .devhire-premium .dh-hero-copy,
    .devhire-premium .dh-proof-copy,
    .devhire-premium .dh-editorial-copy,
    .devhire-premium .dh-flow-head,
    .devhire-premium .dh-final-copy {
      text-align: center;
      justify-items: center;
    }

    .devhire-premium .dh-kicker,
    .devhire-premium .dh-story-eyebrow,
    .devhire-premium .dh-use-tag {
      margin-left: auto;
      margin-right: auto;
      justify-content: center;
      text-align: center;
    }

    .devhire-premium .dh-hero-copy .dh-copy,
    .devhire-premium .dh-proof-copy .dh-copy,
    .devhire-premium .dh-editorial-copy .dh-copy,
    .devhire-premium .dh-flow-head .dh-copy,
    .devhire-premium .dh-final-copy .dh-copy {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .devhire-premium .dh-actions {
      width: 100%;
    }

    .devhire-premium .dh-flow-card {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      column-gap: 12px;
      row-gap: 10px;
      align-items: center;
      text-align: left;
      padding: 16px;
      border-radius: 20px;
    }

    .devhire-premium .dh-flow-card span {
      display: none !important;
    }

    .devhire-premium .dh-flow-number {
      grid-column: 1;
      grid-row: 1;
      width: 42px;
      height: 42px;
      border-radius: 14px;
      font-size: 13px;
      margin: 0;
    }

    .devhire-premium .dh-flow-card h3 {
      grid-column: 2;
      grid-row: 1;
      margin: 0;
      align-self: center;
      font-size: 16.5px;
      line-height: 1.32;
      text-align: left;
    }

    .devhire-premium .dh-flow-card p {
      grid-column: 1 / -1;
      margin-top: 2px;
      text-align: left;
      font-size: 13.5px;
      line-height: 1.58;
    }

    .devhire-premium .dh-brand-list {
      justify-content: center;
    }
  }

  @media (max-width: 430px) {
    .devhire-premium .dh-flow-card {
      grid-template-columns: 40px minmax(0, 1fr);
      column-gap: 11px;
      padding: 14px;
      border-radius: 18px;
    }

    .devhire-premium .dh-flow-number {
      width: 40px;
      height: 40px;
      border-radius: 13px;
    }

    .devhire-premium .dh-flow-card h3 {
      font-size: 15.5px;
    }
  }

/*===================================================================================
    17. Developer Hiring Platform CSS End
===================================================================================*/


/*===================================================================================
    18. Hackathon Platform CSS Start
===================================================================================*/


  :root {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --bg-purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --slider-dots-color: #D4D2DD;
    --light-bg: #DFDAF3;

    --hp2-bg: #f7f4ff;
    --hp2-bg-soft: #fcfbff;
    --hp2-surface: rgba(255, 255, 255, 0.94);
    --hp2-surface-strong: #ffffff;
    --hp2-line: rgba(106, 73, 242, 0.12);
    --hp2-line-strong: rgba(106, 73, 242, 0.18);
    --hp2-text: var(--body-text-purple);
    --hp2-text-soft: rgba(62, 63, 102, 0.78);
    --hp2-title: var(--dark-purple);
    --hp2-brand: var(--purple);
    --hp2-brand-deep: #4D32C8;
    --hp2-brand-soft: rgba(106, 73, 242, 0.08);
    --hp2-shadow: 0 16px 42px rgba(50, 35, 111, 0.085);
    --hp2-shadow-hover: 0 24px 58px rgba(50, 35, 111, 0.13);
    --hp2-shadow-deep: 0 28px 72px rgba(50, 35, 111, 0.15);
    --hp2-radius-xl: 32px;
    --hp2-radius-lg: 26px;
    --hp2-radius-md: 20px;
    --hp2-radius-sm: 16px;
    --hp2-container: 1160px;
    --hp2-page-gap: 44px;
    --hp2-section-space: clamp(46px, 4.8vw, 68px);
    --hp2-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 6% 4%, rgba(106, 73, 242, 0.12), transparent 25%),
      radial-gradient(circle at 94% 8%, rgba(223, 218, 243, 0.92), transparent 26%),
      radial-gradient(circle at 4% 92%, rgba(106, 73, 242, 0.07), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fcfbff 44%, #f7f3ff 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--hp2-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .hackathon-premium-page,
  .hackathon-premium-page * {
    box-sizing: border-box;
  }

  .hackathon-premium-page {
    position: relative;
    overflow: hidden;
    min-width: 320px;
    isolation: isolate;
    background:
      radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
      radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
    color: var(--hp2-text);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .hackathon-premium-page::before,
  .hackathon-premium-page::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(90px);
    z-index: -1;
    opacity: .72;
  }

  .hackathon-premium-page::before {
    width: 300px;
    height: 300px;
    top: 92px;
    left: -120px;
    background: rgba(106, 73, 242, 0.13);
  }

  .hackathon-premium-page::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
  }

  .hackathon-premium-page img,
  .hackathon-premium-page svg {
    display: block;
    max-width: 100%;
  }

  .hackathon-premium-page a {
    color: inherit;
    text-decoration: none;
  }

  .hp2-shell {
    position: relative;
    z-index: 1;
    width: min(var(--hp2-container), calc(100% - var(--hp2-page-gap)));
    margin: 0 auto;
    padding: clamp(72px, 6vw, 96px) 0 clamp(58px, 6vw, 86px);
  }

  .hp2-section {
    padding-block: var(--hp2-section-space);
  }

  .hp2-section.compact {
    padding-block: clamp(30px, 3.2vw, 44px);
  }

  .hp2-label,
  .hp2-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    min-height: auto;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--hp2-brand);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
    overflow-wrap: anywhere;
  }

  .hp2-label::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hp2-brand), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
  }

  .hackathon-premium-page h1,
  .hackathon-premium-page h2,
  .hackathon-premium-page h3,
  .hackathon-premium-page h4,
  .hackathon-premium-page p {
    margin: 0;
    font-family: inherit;
  }

  .hackathon-premium-page h1,
  .hackathon-premium-page h2,
  .hackathon-premium-page h3 {
    color: var(--hp2-title);
    font-weight: 700;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .hackathon-premium-page h1 {
    font-size: clamp(38px, 5.2vw, 62px);
    line-height: 1.06;
    letter-spacing: -0.052em;
    max-width: 720px;
  }

  .hackathon-premium-page h2 {
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.04em;
  }

  .hackathon-premium-page h3 {
    font-size: 20px;
    line-height: 1.32;
    letter-spacing: -0.025em;
  }

  .hackathon-premium-page p {
    color: var(--hp2-text-soft);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .hp2-section-head {
    display: grid;
    gap: 14px;
    max-width: 780px;
    margin-bottom: clamp(24px, 2.8vw, 34px);
  }

  .hp2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  .hp2-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    transition: var(--hp2-transition);
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
  }

  .hp2-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
    z-index: -1;
  }

  .hp2-btn:hover {
    transform: translateY(-3px);
  }

  .hp2-btn:hover::before {
    transform: scaleX(1);
  }

  .hp2-btn.primary {
    background: linear-gradient(135deg, var(--hp2-brand), #7d5df6);
    color: #ffffff;
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.22);
  }

  .hp2-btn.primary::before {
    background: linear-gradient(135deg, var(--hp2-title), var(--hp2-brand));
  }

  .hp2-btn.secondary {
    background: rgba(255, 255, 255, 0.94);
    color: var(--hp2-brand);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
  }

  .hp2-btn.secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
  }

  /* HERO */
  .hp2-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    gap: clamp(24px, 3vw, 34px);
    align-items: center;
    padding: clamp(24px, 3vw, 38px);
    border-radius: var(--hp2-radius-xl);
    background:
      radial-gradient(circle at right top, rgba(223, 218, 243, 0.54), transparent 28%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 244, 254, 0.96));
    border: 1px solid var(--hp2-line);
    box-shadow: var(--hp2-shadow-deep);
    overflow: hidden;
    isolation: isolate;
  }

  .hp2-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.03), transparent 54%, rgba(106, 73, 242, 0.05));
    pointer-events: none;
    z-index: -1;
  }

  .hp2-hero-copy {
    display: grid;
    gap: 22px;
    min-width: 0;
    max-width: 680px;
  }

  .hp2-hero-copy > p {
    max-width: 640px;
    font-size: 16px;
    line-height: 1.74;
  }

  .hp2-inline-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding-top: 2px;
  }

  .hp2-inline-stat,
  .hp2-note,
  .hp2-feature-row,
  .hp2-step,
  .hp2-editorial-card,
  .hp2-usecase,
  .hp2-proof-pill {
    background: var(--hp2-surface);
    border: 1px solid var(--hp2-line);
    box-shadow: var(--hp2-shadow);
    backdrop-filter: blur(14px);
    transition: var(--hp2-transition);
  }

  .hp2-inline-stat:hover,
  .hp2-note:hover,
  .hp2-feature-row:hover,
  .hp2-step:hover,
  .hp2-editorial-card:hover,
  .hp2-usecase:hover,
  .hp2-proof-pill:hover {
    transform: translateY(-4px);
    box-shadow: var(--hp2-shadow-hover);
    border-color: rgba(106, 73, 242, 0.20);
  }

  .hp2-inline-stat {
    padding: 18px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .hp2-inline-stat strong {
    display: block;
    margin-bottom: 7px;
    color: var(--hp2-title);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .hp2-inline-stat span {
    display: block;
    color: var(--hp2-text-soft);
    font-size: 12.5px;
    line-height: 1.58;
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  .hp2-hero-visual {
    position: relative;
    min-height: 560px;
    min-width: 0;
  }

  .hp2-main-image {
    position: absolute;
    inset: 0 0 88px 0;
    border-radius: 26px;
    overflow: hidden;
    background: #efeaff;
    box-shadow: 0 22px 54px rgba(50, 35, 111, 0.14);
  }

  .hp2-main-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(23, 15, 60, 0.06) 0%, rgba(23, 15, 60, 0.16) 42%, rgba(23, 15, 60, 0.48) 100%),
      radial-gradient(circle at 0 100%, rgba(106, 73, 242, 0.22), transparent 42%);
    pointer-events: none;
  }

  .hp2-main-image img,
  .hp2-side-image img,
  .hp2-usecase-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .hp2-float-card,
  .hp2-float-card-secondary {
    position: absolute;
    z-index: 3;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(106, 73, 242, 0.12);
    box-shadow: 0 18px 42px rgba(50, 35, 111, 0.14);
    transition: var(--hp2-transition);
  }

  .hp2-float-card:hover,
  .hp2-float-card-secondary:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 52px rgba(50, 35, 111, 0.16);
  }

  .hp2-float-card {
    left: -10px;
    bottom: 18px;
    width: min(320px, 76%);
    padding: 18px;
  }

  .hp2-float-card-secondary {
    right: -8px;
    top: 20px;
    width: min(250px, 58%);
    padding: 16px;
  }

  .hp2-mini-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .hp2-mini-head h3 {
    font-size: 16px;
    line-height: 1.32;
  }

  .hp2-mini-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    color: var(--hp2-brand);
    border: 1px solid rgba(106, 73, 242, 0.10);
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
  }

  .hp2-mini-line {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(106, 73, 242, 0.10);
    margin-top: 10px;
  }

  .hp2-mini-line > span,
  .hp2-score-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--hp2-brand), #9f88ff);
  }

  .hp2-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
  }

  .hp2-mini-box {
    padding: 12px;
    border-radius: 16px;
    background: rgba(106, 73, 242, 0.05);
    border: 1px solid rgba(106, 73, 242, 0.08);
  }

  .hp2-mini-box strong {
    display: block;
    margin-bottom: 4px;
    color: var(--hp2-title);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
  }

  .hp2-mini-box span {
    display: block;
    color: var(--hp2-text-soft);
    font-size: 12px;
    line-height: 1.55;
    font-weight: 500;
  }

  /* PROOF STRIP */
  .hp2-proof-strip {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, 1fr);
    gap: 24px;
    align-items: center;
    padding: 24px;
    border-radius: 30px;
    background:
      radial-gradient(circle at 0 0, rgba(106, 73, 242, .10), transparent 34%),
      radial-gradient(circle at 100% 0, rgba(223, 218, 243, .42), transparent 30%),
      linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,245,255,.94));
    border: 1px solid var(--hp2-line);
    box-shadow: var(--hp2-shadow);
    overflow: hidden;
  }

  .hp2-proof-text {
    display: grid;
    gap: 14px;
    min-width: 0;
  }

  .hp2-proof-text h2 {
    font-size: clamp(28px, 3.2vw, 42px);
  }

  .hp2-proof-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    justify-content: stretch;
  }

  .hp2-proof-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    width: 100%;
    padding: 9px 14px;
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,244,254,.90));
    color: var(--hp2-brand);
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 800;
    text-align: center;
  }

  /* SPLIT CONTENT */
  .hp2-split {
    display: grid;
    grid-template-columns: minmax(340px, 0.96fr) minmax(0, 1.04fr);
    gap: clamp(22px, 3vw, 34px);
    align-items: stretch;
  }

  .hp2-split.reverse {
    grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.98fr);
  }

  .hp2-visual-stack,
  .hp2-copy-stack {
    min-width: 0;
  }

  .hp2-visual-stack,
  .hp2-copy-stack {
    display: grid;
    gap: 18px;
    align-content: center;
  }

  .hp2-side-image {
    position: relative;
    min-height: 460px;
    overflow: hidden;
    border-radius: var(--hp2-radius-xl);
    background: #efeaff;
    box-shadow: var(--hp2-shadow-deep);
  }

  .hp2-side-image::after,
  .hp2-usecase-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(23, 15, 60, 0.04), rgba(23, 15, 60, 0.20)),
      radial-gradient(circle at 0 100%, rgba(106, 73, 242, 0.14), transparent 40%);
    pointer-events: none;
  }

  .hp2-visual-note {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .hp2-note {
    padding: 18px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .hp2-note strong {
    display: block;
    margin-bottom: 6px;
    color: var(--hp2-title);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .hp2-note span {
    display: block;
    color: var(--hp2-text-soft);
    font-size: 13px;
    line-height: 1.62;
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  .hp2-feature-list {
    display: grid;
    gap: 14px;
    margin-top: 4px;
  }

  .hp2-feature-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 22px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.07), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .hp2-feature-row .num {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(106,73,242,0.14), rgba(223,218,243,0.96));
    color: var(--hp2-brand);
    font-size: 14px;
    font-weight: 700;
  }

  .hp2-feature-row h3 {
    font-size: 18px;
    line-height: 1.32;
  }

  .hp2-feature-row p {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.62;
  }

  /* JOURNEY */
  .hp2-journey {
    display: grid;
    gap: 16px;
  }

  .hp2-step {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 170px;
    gap: 18px;
    align-items: center;
    padding: 20px 22px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.07), transparent 34%),
      rgba(255,255,255,0.90);
  }

  .hp2-step small,
  .hp2-step em {
    font-style: normal;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .095em;
    color: var(--hp2-brand);
    font-weight: 800;
  }

  .hp2-step h3 {
    margin-bottom: 6px;
    font-size: 18px;
  }

  .hp2-step p {
    font-size: 14px;
    line-height: 1.62;
  }

  .hp2-step-chip {
    justify-self: end;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(106,66,244,0.08);
    color: var(--hp2-brand);
    border: 1px solid rgba(106, 73, 242, 0.10);
    font-size: 11.5px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
  }

  /* EDITORIAL */
  .hp2-editorial-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 22px;
    align-items: stretch;
  }

  .hp2-editorial-card {
    padding: clamp(22px, 3vw, 30px);
    border-radius: var(--hp2-radius-xl);
    background: rgba(255,255,255,0.92);
  }

  .hp2-editorial-card.dark {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at right top, rgba(255,255,255,0.15), transparent 28%),
      linear-gradient(145deg, #2a205f 0%, #4930b1 52%, #6842f4 100%);
    border-color: rgba(255,255,255,0.12);
    color: #ffffff;
  }

  .hp2-editorial-card.dark h3,
  .hp2-editorial-card.dark p,
  .hp2-editorial-card.dark strong,
  .hp2-editorial-card.dark span {
    color: #ffffff;
  }

  .hp2-editorial-card.dark .hp2-label {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.16);
    color: #ffffff;
    box-shadow: none;
  }

  .hp2-editorial-card.dark .hp2-label::before {
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.12);
  }

  .hp2-score-list {
    display: grid;
    gap: 16px;
    margin-top: 18px;
  }

  .hp2-score-item {
    display: grid;
    gap: 8px;
  }

  .hp2-score-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .hp2-score-head span,
  .hp2-score-head strong {
    font-size: 13.5px;
    color: inherit;
    font-weight: 700;
  }

  .hp2-score-track {
    height: 11px;
    border-radius: 999px;
    background: rgba(255,255,255,0.15);
    overflow: hidden;
  }

  .hp2-editorial-card:not(.dark) .hp2-score-track {
    background: rgba(106,73,242,0.10);
  }

  .hp2-quote {
    display: grid;
    gap: 16px;
  }

  .hp2-quote-mark {
    color: rgba(106,73,242,0.20);
    font-size: 54px;
    line-height: .7;
    font-weight: 700;
  }

  .hp2-person {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
  }

  .hp2-person img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 12px 26px rgba(40, 28, 102, 0.10);
    flex: 0 0 auto;
  }

  .hp2-person strong {
    display: block;
    color: var(--hp2-title);
    font-size: 14.5px;
    line-height: 1.4;
    font-weight: 700;
  }

  .hp2-person span {
    display: block;
    margin-top: 3px;
    color: var(--hp2-text-soft);
    font-size: 12.8px;
    line-height: 1.55;
    font-weight: 500;
  }

  /* USE CASES */
  .hp2-usecases {
    display: grid;
    gap: 18px;
  }

  .hp2-usecase {
    display: grid;
    grid-template-columns: minmax(240px, .82fr) minmax(0, 1.18fr);
    gap: 18px;
    align-items: stretch;
    padding: 18px;
    border-radius: var(--hp2-radius-lg);
    background: rgba(255,255,255,0.90);
  }

  .hp2-usecase-media {
    position: relative;
    min-height: 230px;
    overflow: hidden;
    border-radius: 22px;
    background: #efeaff;
  }

  .hp2-usecase-copy {
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 6px 4px;
  }

  .hp2-usecase-copy h3 {
    font-size: 22px;
    line-height: 1.26;
  }

  .hp2-usecase-copy p {
    font-size: 14.5px;
    line-height: 1.68;
  }

  .hp2-tag {
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: .08em;
    box-shadow: none;
  }

  /* FINAL CTA */
  .hp2-final {
    position: relative;
    overflow: hidden;
    padding: clamp(26px, 4vw, 38px);
    border-radius: var(--hp2-radius-xl);
    background:
      radial-gradient(circle at right top, rgba(255,255,255,0.14), transparent 28%),
      linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
  }

  .hp2-final::before,
  .hp2-final::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    opacity: .24;
  }

  .hp2-final::before {
    width: 300px;
    height: 300px;
    right: -100px;
    top: -100px;
    background: radial-gradient(circle, rgba(255,255,255,0.56), rgba(255,255,255,0));
  }

  .hp2-final::after {
    width: 240px;
    height: 240px;
    left: -90px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(255,255,255,0.30), rgba(255,255,255,0));
  }

  .hp2-final-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    gap: 22px;
    align-items: center;
  }

  .hp2-final-copy {
    display: grid;
    gap: 18px;
  }

  .hp2-final-copy .hp2-label {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.16);
    color: #ffffff;
    box-shadow: none;
  }

  .hp2-final-copy .hp2-label::before {
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.12);
  }

  .hp2-final-copy h2,
  .hp2-final-copy p {
    color: #ffffff;
  }

  .hp2-final-points {
    display: grid;
    gap: 12px;
  }

  .hp2-final-point {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(10px);
  }

  .hp2-final-point b {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255,255,255,0.18);
    font-weight: 700;
    color: #ffffff;
  }

  .hp2-final-point span {
    color: rgba(255,255,255,0.92);
    font-size: 14.5px;
    line-height: 1.68;
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  [data-hp2-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--hp2-delay, 0s);
    will-change: opacity, transform;
  }

  [data-hp2-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* TABLET */
  @media (max-width: 1180px) {
    :root {
      --hp2-page-gap: 34px;
      --hp2-section-space: 58px;
    }

    .hp2-shell {
      padding-top: 82px;
    }

    .hp2-hero,
    .hp2-proof-strip,
    .hp2-split,
    .hp2-split.reverse,
    .hp2-editorial-grid,
    .hp2-final-grid {
      grid-template-columns: 1fr;
    }

    .hp2-hero-copy {
      max-width: 900px;
    }

    .hp2-hero-visual {
      max-width: 820px;
      min-height: 520px;
    }

    .hp2-proof-logos {
      max-width: 560px;
    }

    .hp2-side-image {
      min-height: 420px;
    }
  }

  @media (max-width: 991px) {
    :root {
      --hp2-page-gap: 30px;
      --hp2-section-space: 54px;
    }

    .hp2-inline-stats,
    .hp2-visual-note,
    .hp2-proof-logos {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hp2-step {
      grid-template-columns: 92px minmax(0, 1fr);
    }

    .hp2-step-chip {
      grid-column: 2;
      justify-self: start;
    }

    .hp2-usecase {
      grid-template-columns: 1fr;
    }
  }

  /* MOBILE */
  @media (max-width: 767px) {
    :root {
      --hp2-page-gap: 24px;
      --hp2-section-space: 46px;
    }

    .hp2-shell {
      width: min(var(--hp2-container), calc(100% - var(--hp2-page-gap)));
      padding-top: 64px;
      padding-bottom: 68px;
    }

    .hp2-section {
      padding-block: var(--hp2-section-space);
    }

    .hp2-section.compact {
      padding-block: 28px;
    }

    .hp2-hero {
      padding: 16px;
      border-radius: 24px;
    }

    .hackathon-premium-page h1 {
      font-size: clamp(30px, 9.3vw, 42px);
      line-height: 1.1;
    }

    .hackathon-premium-page h2 {
      font-size: clamp(24px, 7.4vw, 34px);
      line-height: 1.16;
    }

    .hackathon-premium-page h3 {
      font-size: 17px;
      line-height: 1.32;
    }

    .hackathon-premium-page p,
    .hp2-hero-copy > p,
    .hp2-usecase-copy p,
    .hp2-feature-row p,
    .hp2-step p {
      font-size: 14px;
      line-height: 1.62;
    }

    .hp2-label,
    .hp2-tag {
      padding: 8px 12px;
      gap: 8px;
      font-size: 9.5px;
      letter-spacing: .075em;
      margin-left: auto;
      margin-right: auto;
      justify-content: center;
      text-align: center;
    }

    .hp2-label::before {
      width: 7px;
      height: 7px;
    }

    .hp2-hero-copy,
    .hp2-section-head,
    .hp2-proof-text,
    .hp2-copy-stack,
    .hp2-final-copy {
      text-align: center;
      justify-items: center;
    }

    .hp2-hero-copy > p,
    .hp2-section-head p,
    .hp2-proof-text p,
    .hp2-copy-stack p,
    .hp2-final-copy p {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .hp2-actions {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: 11px;
    }

    .hp2-btn {
      width: 100%;
      min-width: 0;
      min-height: 50px;
      padding: 13px 16px;
      border-radius: 14px;
      font-size: 14px;
    }

    .hp2-hero-visual {
      min-height: auto;
      display: grid;
      gap: 14px;
    }

    .hp2-main-image {
      position: relative;
      inset: auto;
      height: 330px;
      border-radius: 20px;
    }

    .hp2-float-card,
    .hp2-float-card-secondary {
      position: relative;
      width: 100%;
      left: auto;
      right: auto;
      top: auto;
      bottom: auto;
      padding: 14px;
      border-radius: 18px;
    }

    .hp2-mini-grid,
    .hp2-inline-stats,
    .hp2-visual-note,
    .hp2-proof-logos {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .hp2-inline-stat {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 15px;
      border-radius: 18px;
      text-align: left;
    }

    .hp2-inline-stat strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      margin: 0;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(106, 73, 242, .09);
      color: var(--hp2-title);
      font-size: 15px;
      line-height: 1.15;
      text-align: center;
    }

    .hp2-inline-stat span {
      font-size: 12.8px;
      line-height: 1.52;
    }

    .hp2-proof-strip {
      padding: 16px;
      border-radius: 22px;
      text-align: center;
    }

    .hp2-proof-pill {
      min-height: 36px;
      padding: 8px 10px;
      font-size: 11.5px;
    }

    .hp2-side-image {
      min-height: 320px;
      border-radius: 20px;
    }

    .hp2-note,
    .hp2-feature-row,
    .hp2-step,
    .hp2-editorial-card,
    .hp2-usecase {
      padding: 16px;
      border-radius: 20px;
    }

    .hp2-feature-row {
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      text-align: left;
    }

    .hp2-feature-row .num {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      font-size: 13px;
    }

    .hp2-feature-row h3 {
      margin: 0;
      font-size: 16.5px;
      line-height: 1.32;
    }

    .hp2-feature-row p {
      grid-column: 1 / -1;
      margin-top: 0;
      text-align: left;
    }

    .hp2-step {
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 10px 12px;
      align-items: center;
      text-align: left;
    }

    .hp2-step small {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(106,73,242,0.14), rgba(223,218,243,0.96));
      color: var(--hp2-brand);
      font-size: 10px;
      line-height: 1.1;
      letter-spacing: .04em;
      text-align: center;
    }

    .hp2-step > div {
      min-width: 0;
    }

    .hp2-step h3 {
      margin: 0;
      font-size: 16.5px;
      line-height: 1.32;
    }

    .hp2-step p {
      grid-column: 1 / -1;
      margin-top: 2px;
      text-align: left;
    }

    .hp2-step-chip {
      display: none;
    }

    .hp2-score-head {
      align-items: flex-start;
    }

    .hp2-score-head span,
    .hp2-score-head strong {
      font-size: 12.5px;
      line-height: 1.4;
    }

    .hp2-person {
      align-items: flex-start;
      text-align: left;
    }

    .hp2-usecase-media {
      min-height: 220px;
      border-radius: 18px;
    }

    .hp2-usecase-copy {
      text-align: center;
      justify-items: center;
      padding: 0;
    }

    .hp2-usecase-copy h3,
    .hp2-usecase-copy p {
      text-align: center;
    }

    .hp2-final {
      padding: 18px;
      border-radius: 22px;
    }

    .hp2-final-point {
      padding: 13px;
      border-radius: 16px;
    }

    .hp2-final-point span {
      font-size: 13.5px;
      line-height: 1.62;
    }
  }

  @media (max-width: 430px) {
    :root {
      --hp2-page-gap: 22px;
      --hp2-section-space: 42px;
    }

    .hp2-shell {
      padding-top: 58px;
    }

    .hackathon-premium-page h1 {
      font-size: clamp(27px, 8.8vw, 36px);
    }

    .hackathon-premium-page h2 {
      font-size: clamp(22px, 7vw, 30px);
    }

    .hp2-hero,
    .hp2-proof-strip,
    .hp2-note,
    .hp2-feature-row,
    .hp2-step,
    .hp2-editorial-card,
    .hp2-usecase,
    .hp2-final {
      padding: 14px;
      border-radius: 18px;
    }

    .hp2-main-image {
      height: 300px;
    }

    .hp2-side-image {
      min-height: 280px;
    }

    .hp2-feature-row,
    .hp2-step {
      grid-template-columns: 40px minmax(0, 1fr);
      column-gap: 11px;
    }

    .hp2-feature-row .num,
    .hp2-step small {
      width: 40px;
      height: 40px;
      border-radius: 13px;
    }

    .hp2-mini-head {
      display: grid;
      grid-template-columns: 1fr;
    }

    .hp2-mini-head span {
      justify-self: start;
    }
  }

  @media (max-width: 360px) {
    :root {
      --hp2-page-gap: 18px;
    }

    .hp2-shell {
      padding-top: 54px;
    }

    .hackathon-premium-page h1 {
      font-size: 25px;
    }

    .hp2-label,
    .hp2-tag {
      font-size: 8.5px;
      letter-spacing: .055em;
      padding: 7px 10px;
    }

    .hp2-inline-stat {
      grid-template-columns: 1fr;
    }

    .hp2-inline-stat strong {
      width: fit-content;
      justify-content: flex-start;
      text-align: left;
    }
  }

  @media (hover: none) {
    .hp2-btn:hover,
    .hp2-inline-stat:hover,
    .hp2-note:hover,
    .hp2-feature-row:hover,
    .hp2-step:hover,
    .hp2-editorial-card:hover,
    .hp2-usecase:hover,
    .hp2-proof-pill:hover,
    .hp2-float-card:hover,
    .hp2-float-card-secondary:hover {
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-hp2-reveal],
    .hp2-btn {
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
    }
  }

/*===================================================================================
    18. Hackathon Platform CSS End
===================================================================================*/


/*===================================================================================
    19. Online Coding Competitions CSS Start
===================================================================================*/


  :root {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --bg-purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --slider-dots-color: #D4D2DD;
    --light-bg: #DFDAF3;

    --elm-bg: #f7f3ff;
    --elm-bg-soft: #fcfbff;
    --elm-surface: rgba(255, 255, 255, 0.94);
    --elm-surface-soft: rgba(255, 255, 255, 0.88);
    --elm-title: var(--dark-purple);
    --elm-text: rgba(62, 63, 102, 0.78);
    --elm-line: rgba(106, 73, 242, 0.12);
    --elm-line-strong: rgba(106, 73, 242, 0.18);
    --elm-accent: var(--purple);
    --elm-accent-dark: #4D32C8;
    --elm-accent-soft: rgba(106, 73, 242, 0.08);
    --elm-shadow: 0 16px 42px rgba(50, 35, 111, 0.085);
    --elm-shadow-hover: 0 24px 58px rgba(50, 35, 111, 0.13);
    --elm-shadow-deep: 0 28px 72px rgba(50, 35, 111, 0.15);
    --elm-radius-xl: 32px;
    --elm-radius-lg: 26px;
    --elm-radius-md: 20px;
    --elm-radius-sm: 16px;
    --elm-container: 1160px;
    --elm-page-gap: 44px;
    --elm-space: clamp(46px, 4.8vw, 68px);
    --elm-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 6% 4%, rgba(106, 73, 242, 0.12), transparent 25%),
      radial-gradient(circle at 94% 8%, rgba(223, 218, 243, 0.92), transparent 26%),
      radial-gradient(circle at 4% 92%, rgba(106, 73, 242, 0.07), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fcfbff 44%, #f7f3ff 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--elm-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .elm-page,
  .elm-page * {
    box-sizing: border-box;
  }

  .elm-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    background:
      radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
      radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
    color: var(--elm-text);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .elm-page::before,
  .elm-page::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(90px);
    z-index: -1;
    opacity: .72;
  }

  .elm-page::before {
    width: 300px;
    height: 300px;
    top: 92px;
    left: -120px;
    background: rgba(106, 73, 242, 0.13);
  }

  .elm-page::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
  }

  .elm-page img,
  .elm-page svg {
    display: block;
    max-width: 100%;
  }

  .elm-page a {
    color: inherit;
    text-decoration: none;
  }

  .elm-container {
    width: min(var(--elm-container), calc(100% - var(--elm-page-gap)));
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .elm-section {
    padding-block: var(--elm-space);
  }

  .elm-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    padding: 10px 15px;
    border-radius: 999px;
    border: 1px solid rgba(106, 73, 242, 0.14);
    background: rgba(106, 73, 242, 0.08);
    color: var(--elm-accent);
    font-size: 12px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .085em;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
    overflow-wrap: anywhere;
  }

  .elm-label::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--elm-accent), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
  }

  .elm-page h1,
  .elm-page h2,
  .elm-page h3,
  .elm-page p {
    margin: 0;
    font-family: inherit;
  }

  .elm-page h1,
  .elm-page h2,
  .elm-page h3 {
    color: var(--elm-title);
    font-weight: 700;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .elm-page h1 {
    font-size: clamp(38px, 5.2vw, 62px);
    line-height: 1.06;
    letter-spacing: -0.052em;
    max-width: 720px;
  }

  .elm-page h2 {
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.04em;
    max-width: 780px;
  }

  .elm-page h3 {
    font-size: 20px;
    line-height: 1.32;
    letter-spacing: -0.025em;
  }

  .elm-page p {
    color: var(--elm-text);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .elm-head {
    display: grid;
    gap: 14px;
    max-width: 780px;
    margin-bottom: clamp(24px, 2.8vw, 34px);
  }

  .elm-btns,
  .elm-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 2px;
  }

  .elm-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    transition: var(--elm-transition);
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
  }

  .elm-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
    z-index: -1;
  }

  .elm-btn:hover {
    transform: translateY(-3px);
  }

  .elm-btn:hover::before {
    transform: scaleX(1);
  }

  .elm-btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--elm-accent), #7d5df6);
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.22);
  }

  .elm-btn-primary::before {
    background: linear-gradient(135deg, var(--elm-title), var(--elm-accent));
  }

  .elm-btn-primary:hover {
    color: #ffffff;
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.28);
  }

  .elm-btn-secondary {
    color: var(--elm-accent);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
  }

  .elm-btn-secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
  }

  .elm-btn-secondary:hover {
    color: var(--elm-accent);
    background: #ffffff;
  }

  /* HERO */
  .elm-hero {
    padding: clamp(72px, 6vw, 96px) 0 clamp(44px, 5vw, 64px);
  }

  .elm-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    gap: clamp(24px, 3vw, 34px);
    align-items: center;
  }

  .elm-copy {
    display: grid;
    gap: 22px;
    max-width: 680px;
    min-width: 0;
  }

  .elm-copy p {
    max-width: 640px;
    font-size: 16px;
    line-height: 1.74;
  }

  .elm-mini-points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding-top: 2px;
  }

  .elm-mini-points span {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.12);
    color: var(--elm-accent);
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .elm-mini-points span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--elm-accent), #16BDF5);
    flex: 0 0 auto;
  }

  .elm-hero-visual {
    min-width: 0;
    position: relative;
  }

  .elm-hero-frame {
    position: relative;
    min-height: 560px;
    border-radius: var(--elm-radius-xl);
    overflow: hidden;
    background: #efeaff;
    box-shadow: var(--elm-shadow-deep);
    border: 1px solid rgba(106, 73, 242, 0.12);
  }

  .elm-hero-frame img,
  .elm-panel img,
  .elm-showcase-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .elm-hero-frame::after,
  .elm-panel::after,
  .elm-showcase-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(23, 15, 60, 0.04), rgba(23, 15, 60, 0.20)),
      radial-gradient(circle at 0 100%, rgba(106, 73, 242, 0.16), transparent 42%);
    pointer-events: none;
  }

  .elm-overlay-card {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    max-width: 440px;
    padding: 20px;
    border-radius: 22px;
    background: rgba(255,255,255,0.90);
    border: 1px solid rgba(106, 73, 242, 0.12);
    box-shadow: 0 18px 42px rgba(50, 35, 111, 0.14);
    backdrop-filter: blur(14px);
  }

  .elm-overlay-card small {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 9px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    color: var(--elm-accent);
    border: 1px solid rgba(106, 73, 242, 0.10);
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
  }

  .elm-overlay-card strong {
    display: block;
    color: var(--elm-title);
    font-size: 17px;
    line-height: 1.36;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .elm-overlay-card p {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.62;
  }

  /* STATS */
  .elm-stats-band {
    margin-top: 24px;
    padding: 18px;
    border-radius: 28px;
    border: 1px solid var(--elm-line);
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255,255,255,0.88);
    box-shadow: var(--elm-shadow);
    backdrop-filter: blur(14px);
  }

  .elm-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
  }

  .elm-stat,
  .elm-copy-card,
  .elm-feature,
  .elm-showcase-copy,
  .elm-list-item {
    transition: var(--elm-transition);
  }

  .elm-stat {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(106, 73, 242, 0.10);
    box-shadow: 0 10px 24px rgba(50, 35, 111, 0.05);
  }

  .elm-stat:hover,
  .elm-feature:hover,
  .elm-copy-card:hover,
  .elm-showcase-copy:hover {
    transform: translateY(-4px);
    box-shadow: var(--elm-shadow-hover);
    border-color: rgba(106, 73, 242, 0.20);
  }

  .elm-stat strong {
    display: block;
    margin-bottom: 7px;
    color: var(--elm-title);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .elm-stat span {
    display: block;
    color: var(--elm-text);
    font-size: 13px;
    line-height: 1.62;
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  /* SPLIT */
  .elm-split {
    display: grid;
    grid-template-columns: minmax(340px, .96fr) minmax(0, 1.04fr);
    gap: clamp(22px, 3vw, 34px);
    align-items: stretch;
  }

  .elm-panel {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    border-radius: var(--elm-radius-xl);
    background: #efeaff;
    box-shadow: var(--elm-shadow-deep);
    border: 1px solid rgba(106, 73, 242, 0.12);
  }

  .elm-copy-card {
    min-width: 0;
    height: 100%;
    display: grid;
    align-content: center;
    gap: 22px;
    padding: 30px;
    border-radius: var(--elm-radius-xl);
    border: 1px solid var(--elm-line);
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255,255,255,0.90);
    box-shadow: var(--elm-shadow);
    backdrop-filter: blur(14px);
  }

  .elm-list {
    display: grid;
    gap: 12px;
  }

  .elm-list-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(106, 73, 242, 0.10);
    background: rgba(255,255,255,0.72);
    box-shadow: 0 10px 24px rgba(50, 35, 111, 0.05);
  }

  .elm-list-item i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(106,73,242,0.14), rgba(223,218,243,0.96));
    color: var(--elm-accent);
    font-style: normal;
    font-size: 13px;
    font-weight: 700;
  }

  .elm-list-item strong {
    display: block;
    margin-bottom: 5px;
    color: var(--elm-title);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .elm-list-item span {
    display: block;
    color: var(--elm-text);
    font-size: 13px;
    line-height: 1.62;
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  /* FEATURES */
  .elm-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
  }

  .elm-feature {
    padding: 24px;
    border-radius: var(--elm-radius-lg);
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255,255,255,0.92);
    border: 1px solid var(--elm-line);
    box-shadow: var(--elm-shadow);
    position: relative;
    overflow: hidden;
  }

  .elm-feature b {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(106,73,242,0.14), rgba(223,218,243,0.96));
    color: var(--elm-accent);
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
  }

  .elm-feature h3 {
    margin-bottom: 10px;
  }

  .elm-feature p {
    font-size: 14px;
    line-height: 1.62;
  }

  /* SHOWCASE */
  .elm-showcase {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 22px;
  }

  .elm-showcase-card {
    position: relative;
    min-height: 500px;
    border-radius: var(--elm-radius-xl);
    overflow: hidden;
    background: #efeaff;
    box-shadow: var(--elm-shadow-deep);
    border: 1px solid rgba(106, 73, 242, 0.12);
  }

  .elm-showcase-copy {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    padding: 20px;
    border-radius: 22px;
    background: rgba(255,255,255,0.90);
    border: 1px solid rgba(106, 73, 242, 0.12);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 42px rgba(50, 35, 111, 0.12);
  }

  .elm-showcase-copy em {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(106,73,242,0.08);
    color: var(--elm-accent);
    border: 1px solid rgba(106, 73, 242, 0.10);
    font-style: normal;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
  }

  .elm-showcase-copy h3 {
    margin-bottom: 8px;
  }

  .elm-showcase-copy p {
    font-size: 13px;
    line-height: 1.62;
  }

  /* CTA */
  .elm-cta {
    position: relative;
    overflow: hidden;
    padding: 34px;
    border-radius: var(--elm-radius-xl);
    background:
      radial-gradient(circle at right top, rgba(255,255,255,0.14), transparent 28%),
      linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
  }

  .elm-cta::before,
  .elm-cta::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    opacity: .24;
  }

  .elm-cta::before {
    width: 300px;
    height: 300px;
    right: -100px;
    top: -100px;
    background: radial-gradient(circle, rgba(255,255,255,0.56), rgba(255,255,255,0));
  }

  .elm-cta::after {
    width: 240px;
    height: 240px;
    left: -90px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(255,255,255,0.30), rgba(255,255,255,0));
  }

  .elm-cta-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 26px;
    align-items: center;
  }

  .elm-cta-copy {
    display: grid;
    gap: 16px;
    max-width: 760px;
  }

  .elm-cta .elm-label {
    color: #ffffff;
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.16);
    box-shadow: none;
  }

  .elm-cta .elm-label::before {
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.12);
  }

  .elm-cta h2,
  .elm-cta p {
    color: #ffffff;
  }

  .elm-cta-actions {
    justify-content: flex-end;
  }

  .elm-cta .elm-btn-primary {
    background: #ffffff;
    color: var(--elm-title);
    box-shadow: 0 18px 38px rgba(0,0,0,0.10);
  }

  .elm-cta .elm-btn-primary:hover {
    color: var(--elm-title);
    background: #f6f2ff;
  }

  .elm-cta .elm-btn-secondary {
    color: #ffffff;
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.22);
    box-shadow: none;
  }

  .elm-cta .elm-btn-secondary:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.18);
  }

  /* TABLET */
  @media (max-width: 1180px) {
    :root {
      --elm-page-gap: 34px;
      --elm-space: 58px;
    }

    .elm-hero-grid,
    .elm-split,
    .elm-cta-grid {
      grid-template-columns: 1fr;
    }

    .elm-copy {
      max-width: 900px;
    }

    .elm-hero-frame {
      max-width: 820px;
      min-height: 520px;
    }

    .elm-panel {
      min-height: 460px;
    }

    .elm-cta-actions {
      justify-content: flex-start;
    }
  }

  @media (max-width: 991px) {
    :root {
      --elm-page-gap: 30px;
      --elm-space: 54px;
    }

    .elm-stats-grid,
    .elm-feature-grid {
      grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .elm-showcase {
      grid-template-columns: 1fr;
    }
  }

  /* MOBILE */
  @media (max-width: 767px) {
    :root {
      --elm-page-gap: 24px;
      --elm-space: 46px;
    }

    .elm-container {
      width: min(var(--elm-container), calc(100% - var(--elm-page-gap)));
    }

    .elm-hero {
      padding: 64px 0 34px;
    }

    .elm-section {
      padding-block: var(--elm-space);
    }

    .elm-page h1 {
      font-size: clamp(30px, 9.3vw, 42px);
      line-height: 1.1;
      max-width: none;
    }

    .elm-page h2 {
      font-size: clamp(24px, 7.4vw, 34px);
      line-height: 1.16;
      max-width: none;
    }

    .elm-page h3 {
      font-size: 17px;
      line-height: 1.32;
    }

    .elm-page p,
    .elm-copy p,
    .elm-feature p,
    .elm-showcase-copy p {
      font-size: 14px;
      line-height: 1.62;
    }

    .elm-label {
      padding: 8px 12px;
      gap: 8px;
      font-size: 9.5px;
      letter-spacing: .075em;
      margin-left: auto;
      margin-right: auto;
      justify-content: center;
      text-align: center;
    }

    .elm-label::before {
      width: 7px;
      height: 7px;
    }

    .elm-copy,
    .elm-head,
    .elm-cta-copy {
      text-align: center;
      justify-items: center;
    }

    .elm-copy p,
    .elm-head p,
    .elm-cta-copy p {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .elm-btns,
    .elm-cta-actions {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: 11px;
    }

    .elm-btn {
      width: 100%;
      min-width: 0;
      min-height: 50px;
      padding: 13px 16px;
      border-radius: 14px;
      font-size: 14px;
    }

    .elm-mini-points {
      justify-content: center;
      gap: 8px;
    }

    .elm-mini-points span {
      padding: 8px 10px;
      font-size: 11.5px;
      text-align: center;
    }

    .elm-hero-frame {
      min-height: 340px;
      border-radius: 22px;
    }

    .elm-overlay-card {
      left: 12px;
      right: 12px;
      bottom: 12px;
      max-width: none;
      padding: 14px;
      border-radius: 18px;
    }

    .elm-overlay-card small {
      font-size: 9.8px;
    }

    .elm-overlay-card strong {
      font-size: 15px;
    }

    .elm-overlay-card p {
      font-size: 12.5px;
      line-height: 1.58;
    }

    .elm-stats-band {
      padding: 14px;
      border-radius: 22px;
    }

    .elm-stats-grid,
    .elm-feature-grid {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .elm-stat {
      display: grid;
      grid-template-columns: 100px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 15px;
      border-radius: 18px;
      text-align: left;
    }

    .elm-stat strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      margin: 0;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(106, 73, 242, .09);
      color: var(--elm-title);
      font-size: 13.5px;
      line-height: 1.15;
      text-align: center;
    }

    .elm-stat span {
      font-size: 12.8px;
      line-height: 1.52;
    }

    .elm-panel {
      min-height: 320px;
      border-radius: 20px;
    }

    .elm-panel img {
      min-height: 320px;
    }

    .elm-copy-card,
    .elm-feature,
    .elm-showcase-copy,
    .elm-cta {
      padding: 16px;
      border-radius: 20px;
    }

    .elm-list-item {
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 12px;
      padding: 13px;
      border-radius: 16px;
      text-align: left;
    }

    .elm-list-item i {
      width: 38px;
      height: 38px;
      border-radius: 13px;
    }

    .elm-feature {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      column-gap: 12px;
      align-items: center;
      text-align: left;
    }

    .elm-feature b {
      width: 42px;
      height: 42px;
      margin: 0;
      border-radius: 14px;
      font-size: 13px;
    }

    .elm-feature h3 {
      margin: 0;
      font-size: 16.5px;
      line-height: 1.32;
    }

    .elm-feature p {
      grid-column: 1 / -1;
      margin-top: 12px;
      text-align: left;
    }

    .elm-showcase-card {
      min-height: 360px;
      border-radius: 22px;
    }

    .elm-showcase-copy {
      left: 12px;
      right: 12px;
      bottom: 12px;
    }

    .elm-showcase-copy em {
      font-size: 9.8px;
      padding: 7px 10px;
    }

    .elm-cta {
      padding: 18px;
      border-radius: 22px;
    }

    .elm-cta-grid {
      gap: 18px;
    }
  }

  @media (max-width: 430px) {
    :root {
      --elm-page-gap: 22px;
      --elm-space: 42px;
    }

    .elm-hero {
      padding-top: 58px;
      padding-bottom: 30px;
    }

    .elm-page h1 {
      font-size: clamp(27px, 8.8vw, 36px);
    }

    .elm-page h2 {
      font-size: clamp(22px, 7vw, 30px);
    }

    .elm-hero-frame {
      min-height: 320px;
    }

    .elm-stats-band,
    .elm-copy-card,
    .elm-feature,
    .elm-showcase-copy,
    .elm-cta {
      padding: 14px;
      border-radius: 18px;
    }

    .elm-stat {
      grid-template-columns: 88px minmax(0, 1fr);
      padding: 13px;
    }

    .elm-stat strong {
      font-size: 12.5px;
      min-height: 40px;
    }

    .elm-feature {
      grid-template-columns: 40px minmax(0, 1fr);
      column-gap: 11px;
    }

    .elm-feature b {
      width: 40px;
      height: 40px;
      border-radius: 13px;
    }

    .elm-showcase-card {
      min-height: 330px;
    }
  }

  @media (max-width: 360px) {
    :root {
      --elm-page-gap: 18px;
    }

    .elm-hero {
      padding-top: 54px;
    }

    .elm-page h1 {
      font-size: 25px;
    }

    .elm-label {
      font-size: 8.5px;
      letter-spacing: .055em;
      padding: 7px 10px;
    }

    .elm-stat {
      grid-template-columns: 1fr;
    }

    .elm-stat strong {
      width: fit-content;
      justify-content: flex-start;
      text-align: left;
    }
  }

  @media (hover: none) {
    .elm-btn:hover,
    .elm-stat:hover,
    .elm-feature:hover,
    .elm-copy-card:hover,
    .elm-showcase-copy:hover {
      transform: none;
    }
  }

  /* =====================================================
     FINAL TOP SPACING FIX
     Adds more breathing room below the site header/navbar
     on desktop, tablet, and mobile.
  ===================================================== */

  .elm-page .elm-hero {
    padding-top: clamp(112px, 8vw, 136px) !important;
  }

  @media (max-width: 1180px) {
    .elm-page .elm-hero {
      padding-top: 110px !important;
    }
  }

  @media (max-width: 991px) {
    .elm-page .elm-hero {
      padding-top: 104px !important;
    }
  }

  @media (max-width: 767px) {
    .elm-page .elm-hero {
      padding-top: 96px !important;
    }
  }

  @media (max-width: 430px) {
    .elm-page .elm-hero {
      padding-top: 88px !important;
    }
  }

  @media (max-width: 360px) {
    .elm-page .elm-hero {
      padding-top: 82px !important;
    }
  }

/*===================================================================================
    19. Online Coding Competitions CSS End
===================================================================================*/


/*===================================================================================
    20. Practice Coding Tests CSS Start
===================================================================================*/

  :root {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --bg-purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --slider-dots-color: #D4D2DD;
    --light-bg: #DFDAF3;

    --pct-bg: #f7f3ff;
    --pct-bg-soft: #fcfbff;
    --pct-surface: rgba(255, 255, 255, 0.94);
    --pct-surface-soft: rgba(255, 255, 255, 0.88);
    --pct-line: rgba(106, 73, 242, 0.12);
    --pct-line-strong: rgba(106, 73, 242, 0.18);
    --pct-text: var(--dark-purple);
    --pct-text-soft: rgba(62, 63, 102, 0.78);
    --pct-text-muted: rgba(62, 63, 102, 0.62);
    --pct-accent: var(--purple);
    --pct-accent-dark: #4D32C8;
    --pct-accent-soft: rgba(106, 73, 242, 0.08);
    --pct-shadow: 0 16px 42px rgba(50, 35, 111, 0.085);
    --pct-shadow-hover: 0 24px 58px rgba(50, 35, 111, 0.13);
    --pct-shadow-deep: 0 28px 72px rgba(50, 35, 111, 0.15);
    --pct-radius-xl: 32px;
    --pct-radius-lg: 26px;
    --pct-radius-md: 20px;
    --pct-radius-sm: 16px;
    --pct-container: 1160px;
    --pct-page-gap: 44px;
    --pct-space: clamp(46px, 4.8vw, 68px);
    --pct-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 6% 4%, rgba(106, 73, 242, 0.12), transparent 25%),
      radial-gradient(circle at 94% 8%, rgba(223, 218, 243, 0.92), transparent 26%),
      radial-gradient(circle at 4% 92%, rgba(106, 73, 242, 0.07), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fcfbff 44%, #f7f3ff 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--pct-text-soft);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .pct-luxe,
  .pct-luxe * {
    box-sizing: border-box;
  }

  .pct-luxe {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    padding: 0;
    padding-top: clamp(72px, 6vw, 96px);
    background:
      radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
      radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
    color: var(--pct-text-soft);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .pct-luxe::before,
  .pct-luxe::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    opacity: .72;
  }

  .pct-luxe::before {
    width: 300px;
    height: 300px;
    top: 92px;
    left: -120px;
    background: rgba(106, 73, 242, 0.13);
  }

  .pct-luxe::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
  }

  .pct-luxe a {
    color: inherit;
    text-decoration: none;
  }

  .pct-luxe img,
  .pct-luxe svg {
    display: block;
    max-width: 100%;
  }

  .pct-luxe h1,
  .pct-luxe h2,
  .pct-luxe h3,
  .pct-luxe h4,
  .pct-luxe p {
    margin: 0;
    font-family: inherit;
  }

  .pct-luxe .container {
    width: min(var(--pct-container), calc(100% - var(--pct-page-gap)));
    margin: 0 auto;
  }

  .pct-luxe .section {
    padding: var(--pct-space) 0;
    position: relative;
  }

  .pct-luxe .eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    min-height: auto;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--pct-accent);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
    overflow-wrap: anywhere;
  }

  .pct-luxe .eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pct-accent), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
  }

  .pct-luxe .section-head {
    display: grid;
    gap: 14px;
    max-width: 780px;
    margin-bottom: clamp(24px, 2.8vw, 34px);
  }

  .pct-luxe .section-head h2,
  .pct-luxe .cta-copy h2 {
    color: var(--pct-text);
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.04em;
    font-weight: 700;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .pct-luxe .section-head p,
  .pct-luxe .hero-copy p,
  .pct-luxe .feature-card p,
  .pct-luxe .editorial-copy p,
  .pct-luxe .step-card p,
  .pct-luxe .cta-copy p,
  .pct-luxe .stat-card p,
  .pct-luxe .editorial-points p,
  .pct-luxe .floating-card p,
  .pct-luxe .mini-note p {
    color: var(--pct-text-soft);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  /* Hero */
  .pct-luxe .hero {
    position: relative;
    min-height: auto;
    display: flex;
    align-items: center;
    padding: clamp(58px, 6vw, 88px) 0 clamp(44px, 5vw, 64px);
  }

  .pct-luxe .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    gap: clamp(24px, 3vw, 34px);
    align-items: center;
  }

  .pct-luxe .hero-copy {
    display: grid;
    gap: 22px;
    max-width: 680px;
    min-width: 0;
  }

  .pct-luxe .hero-copy h1 {
    color: var(--pct-text);
    font-size: clamp(38px, 5.2vw, 62px);
    line-height: 1.06;
    letter-spacing: -0.052em;
    font-weight: 700;
    max-width: 720px;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .pct-luxe .hero-copy h1 span {
    color: var(--pct-accent);
    font-weight: 700;
  }

  .pct-luxe .hero-copy p {
    max-width: 640px;
    font-size: 16px;
    line-height: 1.74;
  }

  .pct-luxe .hero-actions,
  .pct-luxe .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  .pct-luxe .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    transition: var(--pct-transition);
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
  }

  .pct-luxe .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
    z-index: -1;
  }

  .pct-luxe .btn:hover {
    transform: translateY(-3px);
  }

  .pct-luxe .btn:hover::before {
    transform: scaleX(1);
  }

  .pct-luxe .btn-primary {
    background: linear-gradient(135deg, var(--pct-accent), #7d5df6);
    color: #ffffff;
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.22);
  }

  .pct-luxe .btn-primary::before {
    background: linear-gradient(135deg, var(--pct-text), var(--pct-accent));
  }

  .pct-luxe .btn-primary:hover {
    color: #ffffff;
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.28);
  }

  .pct-luxe .btn-secondary {
    background: rgba(255, 255, 255, 0.94);
    color: var(--pct-accent);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
  }

  .pct-luxe .btn-secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
  }

  .pct-luxe .btn-secondary:hover {
    color: var(--pct-accent);
    background: #ffffff;
  }

  .pct-luxe .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  .pct-luxe .hero-meta span {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.12);
    color: var(--pct-accent);
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .pct-luxe .hero-meta span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pct-accent), #16BDF5);
    flex: 0 0 auto;
  }

  .pct-luxe .hero-visual {
    position: relative;
    min-height: 560px;
    min-width: 0;
  }

  .pct-luxe .hero-main-image {
    position: absolute;
    inset: 0 0 86px 0;
    border-radius: var(--pct-radius-xl);
    overflow: hidden;
    box-shadow: var(--pct-shadow-deep);
    background: #efeaff;
    border: 1px solid rgba(106, 73, 242, 0.12);
  }

  .pct-luxe .hero-main-image::after,
  .pct-luxe .floating-image::after,
  .pct-luxe .editorial-image::after,
  .pct-luxe .cta-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(23, 15, 60, 0.04), rgba(23, 15, 60, 0.20)),
      radial-gradient(circle at 0 100%, rgba(106, 73, 242, 0.16), transparent 42%);
    pointer-events: none;
  }

  .pct-luxe .hero-main-image img,
  .pct-luxe .floating-image img,
  .pct-luxe .editorial-image img,
  .pct-luxe .cta-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .pct-luxe .floating-card {
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 3;
    width: min(270px, calc(100% - 36px));
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(106, 73, 242, 0.12);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 42px rgba(50, 35, 111, 0.14);
    transition: var(--pct-transition);
  }

  .pct-luxe .floating-card:hover,
  .pct-luxe .floating-image:hover,
  .pct-luxe .mini-note:hover,
  .pct-luxe .feature-card:hover,
  .pct-luxe .step-card:hover,
  .pct-luxe .stat-card:hover,
  .pct-luxe .editorial-copy:hover,
  .pct-luxe .editorial-points div:hover,
  .pct-luxe .cta-shell:hover {
    transform: translateY(-4px);
    box-shadow: var(--pct-shadow-hover);
    border-color: rgba(106, 73, 242, 0.20);
  }

  .pct-luxe .floating-card strong,
  .pct-luxe .stat-card strong,
  .pct-luxe .feature-card h3,
  .pct-luxe .editorial-copy h3,
  .pct-luxe .step-card h3,
  .pct-luxe .mini-note strong {
    display: block;
    color: var(--pct-text);
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .pct-luxe .floating-card strong {
    margin-bottom: 7px;
    font-size: 16px;
    line-height: 1.36;
  }

  .pct-luxe .floating-card p,
  .pct-luxe .mini-note p {
    font-size: 13px;
    line-height: 1.62;
  }

  .pct-luxe .floating-image {
    position: absolute;
    right: 18px;
    bottom: 0;
    z-index: 2;
    width: min(300px, calc(100% - 36px));
    height: 180px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(50, 35, 111, 0.12);
    border: 8px solid rgba(255,255,255,0.78);
    background: #efeaff;
    transition: var(--pct-transition);
  }

  .pct-luxe .mini-note {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 3;
    max-width: 280px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(106, 73, 242, 0.12);
    backdrop-filter: blur(14px);
    box-shadow: 0 16px 38px rgba(50, 35, 111, 0.12);
    transition: var(--pct-transition);
  }

  .pct-luxe .mini-note strong {
    margin-bottom: 7px;
    font-size: 15px;
    line-height: 1.36;
  }

  /* Stats */
  .pct-luxe .stats-row {
    margin-top: 26px;
  }

  .pct-luxe .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .pct-luxe .stat-card,
  .pct-luxe .feature-card,
  .pct-luxe .step-card,
  .pct-luxe .editorial-copy,
  .pct-luxe .editorial-points div,
  .pct-luxe .cta-shell {
    background: var(--pct-surface);
    border: 1px solid var(--pct-line);
    box-shadow: var(--pct-shadow);
    backdrop-filter: blur(14px);
    transition: var(--pct-transition);
  }

  .pct-luxe .stat-card {
    padding: 20px;
    border-radius: 22px;
    min-height: 150px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255,255,255,0.90);
  }

  .pct-luxe .stat-card strong {
    margin-bottom: 8px;
    font-size: 22px;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }

  .pct-luxe .stat-card p {
    font-size: 14px;
    line-height: 1.62;
  }

  /* Editorial */
  .pct-luxe .editorial-grid {
    display: grid;
    grid-template-columns: minmax(340px, .96fr) minmax(0, 1.04fr);
    gap: clamp(22px, 3vw, 34px);
    align-items: stretch;
  }

  .pct-luxe .editorial-image {
    min-height: 560px;
    border-radius: var(--pct-radius-xl);
    overflow: hidden;
    position: relative;
    box-shadow: var(--pct-shadow-deep);
    background: #efeaff;
    border: 1px solid rgba(106, 73, 242, 0.12);
  }

  .pct-luxe .editorial-panel {
    display: grid;
    gap: 18px;
    align-content: stretch;
  }

  .pct-luxe .editorial-copy {
    display: grid;
    gap: 12px;
    padding: 28px;
    border-radius: var(--pct-radius-xl);
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255,255,255,0.90);
  }

  .pct-luxe .editorial-copy h3 {
    font-size: clamp(24px, 2.7vw, 36px);
    line-height: 1.14;
    letter-spacing: -0.035em;
  }

  .pct-luxe .editorial-points {
    display: grid;
    gap: 14px;
  }

  .pct-luxe .editorial-points div {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.86);
  }

  .pct-luxe .editorial-points strong {
    display: block;
    margin-bottom: 6px;
    color: var(--pct-text);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .pct-luxe .editorial-points p {
    font-size: 14px;
    line-height: 1.62;
  }

  /* Features */
  .pct-luxe .feature-grid,
  .pct-luxe .steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .pct-luxe .feature-card,
  .pct-luxe .step-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: var(--pct-radius-lg);
    min-height: 250px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255,255,255,0.92);
  }

  .pct-luxe .feature-card::before,
  .pct-luxe .step-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(106,73,242,0.04), transparent 52%, rgba(106,73,242,0.06));
    pointer-events: none;
  }

  .pct-luxe .feature-index,
  .pct-luxe .step-index {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(106,73,242,0.14), rgba(223,218,243,0.96));
    color: var(--pct-accent);
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
  }

  .pct-luxe .feature-card h3,
  .pct-luxe .step-card h3,
  .pct-luxe .feature-card p,
  .pct-luxe .step-card p {
    position: relative;
    z-index: 1;
  }

  .pct-luxe .feature-card h3,
  .pct-luxe .step-card h3 {
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.3;
  }

  .pct-luxe .feature-card p,
  .pct-luxe .step-card p {
    font-size: 14px;
    line-height: 1.62;
  }

  /* CTA */
  .pct-luxe .cta-shell {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(320px, .96fr);
    gap: 24px;
    align-items: center;
    padding: 24px;
    border-radius: var(--pct-radius-xl);
    background:
      radial-gradient(circle at right top, rgba(255,255,255,0.14), transparent 28%),
      linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
  }

  .pct-luxe .cta-shell::before,
  .pct-luxe .cta-shell::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    opacity: .24;
  }

  .pct-luxe .cta-shell::before {
    width: 300px;
    height: 300px;
    right: -100px;
    top: -100px;
    background: radial-gradient(circle, rgba(255,255,255,0.56), rgba(255,255,255,0));
  }

  .pct-luxe .cta-shell::after {
    width: 240px;
    height: 240px;
    left: -90px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(255,255,255,0.30), rgba(255,255,255,0));
  }

  .pct-luxe .cta-copy,
  .pct-luxe .cta-image {
    position: relative;
    z-index: 1;
  }

  .pct-luxe .cta-copy {
    display: grid;
    gap: 16px;
    padding: 12px;
  }

  .pct-luxe .cta-copy .eyebrow {
    color: #ffffff;
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.16);
    box-shadow: none;
  }

  .pct-luxe .cta-copy .eyebrow::before {
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.12);
  }

  .pct-luxe .cta-copy h2,
  .pct-luxe .cta-copy p {
    color: #ffffff;
  }

  .pct-luxe .cta-copy h2 {
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.04em;
    font-weight: 700;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .pct-luxe .cta-copy p {
    color: rgba(255,255,255,0.82);
  }

  .pct-luxe .cta-actions {
    margin-top: 4px;
  }

  .pct-luxe .cta-copy .btn-primary {
    background: #ffffff;
    color: var(--pct-text);
    box-shadow: 0 18px 38px rgba(0,0,0,0.10);
  }

  .pct-luxe .cta-copy .btn-primary:hover {
    color: var(--pct-text);
    background: #f6f2ff;
  }

  .pct-luxe .cta-copy .btn-secondary {
    color: #ffffff;
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.22);
    box-shadow: none;
  }

  .pct-luxe .cta-copy .btn-secondary:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.18);
  }

  .pct-luxe .cta-image {
    min-height: 360px;
    height: 100%;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 20px 48px rgba(18, 12, 46, 0.20);
    background: #efeaff;
  }

  /* Reveal */
  .pct-luxe .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
  }

  .pct-luxe .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Tablet */
  @media (max-width: 1180px) {
    :root {
      --pct-page-gap: 34px;
      --pct-space: 58px;
    }

    .pct-luxe {
      padding-top: 82px;
    }

    .pct-luxe .hero-grid,
    .pct-luxe .editorial-grid,
    .pct-luxe .cta-shell {
      grid-template-columns: 1fr;
    }

    .pct-luxe .hero-copy {
      max-width: 900px;
    }

    .pct-luxe .hero-visual {
      max-width: 820px;
      min-height: 520px;
    }

    .pct-luxe .editorial-image {
      min-height: 460px;
    }

    .pct-luxe .stats-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 991px) {
    :root {
      --pct-page-gap: 30px;
      --pct-space: 54px;
    }

    .pct-luxe {
      padding-top: 76px;
    }

    .pct-luxe .hero {
      padding-top: 44px;
      padding-bottom: 44px;
    }

    .pct-luxe .feature-grid,
    .pct-luxe .steps-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Mobile */
  @media (max-width: 767px) {
    :root {
      --pct-page-gap: 24px;
      --pct-space: 46px;
    }

    .pct-luxe {
      padding-top: 64px;
    }

    .pct-luxe .container {
      width: min(var(--pct-container), calc(100% - var(--pct-page-gap)));
    }

    .pct-luxe .hero {
      padding: 34px 0 34px;
    }

    .pct-luxe .section {
      padding-block: var(--pct-space);
    }

    .pct-luxe .section-head {
      margin-bottom: 22px;
    }

    .pct-luxe .hero-copy,
    .pct-luxe .section-head,
    .pct-luxe .cta-copy {
      text-align: center;
      justify-items: center;
    }

    .pct-luxe .hero-copy h1 {
      font-size: clamp(30px, 9.3vw, 42px);
      line-height: 1.1;
      max-width: none;
    }

    .pct-luxe .section-head h2,
    .pct-luxe .cta-copy h2 {
      font-size: clamp(24px, 7.4vw, 34px);
      line-height: 1.16;
    }

    .pct-luxe .hero-copy p,
    .pct-luxe .section-head p,
    .pct-luxe .feature-card p,
    .pct-luxe .editorial-copy p,
    .pct-luxe .step-card p,
    .pct-luxe .cta-copy p,
    .pct-luxe .stat-card p {
      font-size: 14px;
      line-height: 1.62;
      text-align: center;
    }

    .pct-luxe .eyebrow {
      padding: 8px 12px;
      gap: 8px;
      font-size: 9.5px;
      letter-spacing: .075em;
      margin-left: auto;
      margin-right: auto;
      justify-content: center;
      text-align: center;
    }

    .pct-luxe .eyebrow::before {
      width: 7px;
      height: 7px;
    }

    .pct-luxe .hero-actions,
    .pct-luxe .cta-actions {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: 11px;
    }

    .pct-luxe .btn {
      width: 100%;
      min-width: 0;
      min-height: 50px;
      padding: 13px 16px;
      border-radius: 14px;
      font-size: 14px;
    }

    .pct-luxe .hero-meta {
      justify-content: center;
      gap: 8px;
    }

    .pct-luxe .hero-meta span {
      padding: 8px 10px;
      font-size: 11.5px;
      text-align: center;
    }

    .pct-luxe .hero-visual {
      min-height: auto;
      display: grid;
      gap: 14px;
    }

    .pct-luxe .hero-main-image {
      position: relative;
      inset: auto;
      height: 340px;
      border-radius: 22px;
    }

    .pct-luxe .floating-card,
    .pct-luxe .floating-image,
    .pct-luxe .mini-note {
      position: relative;
      inset: auto;
      left: auto;
      right: auto;
      top: auto;
      bottom: auto;
      width: 100%;
      max-width: none;
      border-radius: 18px;
    }

    .pct-luxe .floating-card {
      padding: 14px;
    }

    .pct-luxe .floating-image {
      height: 180px;
      border: 0;
    }

    .pct-luxe .mini-note {
      display: block;
      padding: 14px;
    }

    .pct-luxe .stats-grid,
    .pct-luxe .feature-grid,
    .pct-luxe .steps-grid {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .pct-luxe .stat-card {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      min-height: auto;
      padding: 15px;
      border-radius: 18px;
      text-align: left;
    }

    .pct-luxe .stat-card strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      margin: 0;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(106, 73, 242, .09);
      color: var(--pct-text);
      font-size: 13.8px;
      line-height: 1.15;
      text-align: center;
    }

    .pct-luxe .stat-card p {
      text-align: left;
      font-size: 12.8px;
      line-height: 1.52;
    }

    .pct-luxe .editorial-image {
      min-height: 320px;
      border-radius: 20px;
    }

    .pct-luxe .editorial-copy,
    .pct-luxe .editorial-points div,
    .pct-luxe .feature-card,
    .pct-luxe .step-card,
    .pct-luxe .cta-shell {
      padding: 16px;
      border-radius: 20px;
    }

    .pct-luxe .editorial-copy h3 {
      font-size: clamp(22px, 7vw, 30px);
      line-height: 1.16;
      text-align: center;
    }

    .pct-luxe .editorial-points strong,
    .pct-luxe .editorial-points p {
      text-align: center;
    }

    .pct-luxe .feature-card,
    .pct-luxe .step-card {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      column-gap: 12px;
      align-items: center;
      min-height: auto;
      text-align: left;
    }

    .pct-luxe .feature-index,
    .pct-luxe .step-index {
      width: 42px;
      height: 42px;
      margin: 0;
      border-radius: 14px;
      font-size: 13px;
    }

    .pct-luxe .feature-card h3,
    .pct-luxe .step-card h3 {
      margin: 0;
      font-size: 16.5px;
      line-height: 1.32;
      text-align: left;
    }

    .pct-luxe .feature-card p,
    .pct-luxe .step-card p {
      grid-column: 1 / -1;
      margin-top: 12px;
      text-align: left;
    }

    .pct-luxe .cta-shell {
      gap: 18px;
    }

    .pct-luxe .cta-copy {
      padding: 0;
    }

    .pct-luxe .cta-image {
      min-height: 280px;
      border-radius: 18px;
    }
  }

  @media (max-width: 430px) {
    :root {
      --pct-page-gap: 22px;
      --pct-space: 42px;
    }

    .pct-luxe {
      padding-top: 58px;
    }

    .pct-luxe .hero {
      padding-top: 28px;
      padding-bottom: 30px;
    }

    .pct-luxe .hero-copy h1 {
      font-size: clamp(27px, 8.8vw, 36px);
    }

    .pct-luxe .section-head h2,
    .pct-luxe .cta-copy h2 {
      font-size: clamp(22px, 7vw, 30px);
    }

    .pct-luxe .hero-main-image {
      height: 320px;
    }

    .pct-luxe .stat-card,
    .pct-luxe .editorial-copy,
    .pct-luxe .editorial-points div,
    .pct-luxe .feature-card,
    .pct-luxe .step-card,
    .pct-luxe .cta-shell,
    .pct-luxe .floating-card,
    .pct-luxe .mini-note {
      padding: 14px;
      border-radius: 18px;
    }

    .pct-luxe .stat-card {
      grid-template-columns: 86px minmax(0, 1fr);
    }

    .pct-luxe .stat-card strong {
      font-size: 12.8px;
      min-height: 40px;
    }

    .pct-luxe .feature-card,
    .pct-luxe .step-card {
      grid-template-columns: 40px minmax(0, 1fr);
      column-gap: 11px;
    }

    .pct-luxe .feature-index,
    .pct-luxe .step-index {
      width: 40px;
      height: 40px;
      border-radius: 13px;
    }

    .pct-luxe .floating-image {
      height: 150px;
    }
  }

  @media (max-width: 360px) {
    :root {
      --pct-page-gap: 18px;
    }

    .pct-luxe {
      padding-top: 54px;
    }

    .pct-luxe .hero-copy h1 {
      font-size: 25px;
    }

    .pct-luxe .eyebrow {
      font-size: 8.5px;
      letter-spacing: .055em;
      padding: 7px 10px;
    }

    .pct-luxe .stat-card {
      grid-template-columns: 1fr;
    }

    .pct-luxe .stat-card strong {
      width: fit-content;
      justify-content: flex-start;
      text-align: left;
    }
  }

  @media (hover: none) {
    .pct-luxe .btn:hover,
    .pct-luxe .floating-card:hover,
    .pct-luxe .floating-image:hover,
    .pct-luxe .mini-note:hover,
    .pct-luxe .feature-card:hover,
    .pct-luxe .step-card:hover,
    .pct-luxe .stat-card:hover,
    .pct-luxe .editorial-copy:hover,
    .pct-luxe .editorial-points div:hover,
    .pct-luxe .cta-shell:hover {
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pct-luxe .reveal,
    .pct-luxe .btn {
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
    }
  }

/*===================================================================================
    20. Practice Coding Tests CSS End
===================================================================================*/


/*===================================================================================
    21. Aptitude Practice Tests CSS Start
===================================================================================*/

:root {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --bg-purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --slider-dots-color: #D4D2DD;
    --light-bg: #DFDAF3;

    --apt-bg: #f7f3ff;
    --apt-bg-soft: #fcfbff;
    --apt-surface: rgba(255, 255, 255, 0.94);
    --apt-surface-soft: rgba(255, 255, 255, 0.88);
    --apt-text: var(--dark-purple);
    --apt-text-soft: rgba(62, 63, 102, 0.78);
    --apt-text-muted: rgba(62, 63, 102, 0.62);
    --apt-brand: var(--purple);
    --apt-brand-2: #8a70ff;
    --apt-brand-dark: #4D32C8;
    --apt-line: rgba(106, 73, 242, 0.12);
    --apt-line-strong: rgba(106, 73, 242, 0.18);
    --apt-shadow-lg: 0 28px 72px rgba(50, 35, 111, 0.15);
    --apt-shadow-md: 0 16px 42px rgba(50, 35, 111, 0.085);
    --apt-shadow-sm: 0 10px 28px rgba(50, 35, 111, 0.06);
    --apt-radius-xl: 32px;
    --apt-radius-lg: 26px;
    --apt-radius-md: 20px;
    --apt-radius-sm: 16px;
    --apt-container: 1160px;
    --apt-page-gap: 44px;
    --apt-section-space: clamp(46px, 4.8vw, 68px);
    --apt-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 6% 4%, rgba(106, 73, 242, 0.12), transparent 25%),
      radial-gradient(circle at 94% 8%, rgba(223, 218, 243, 0.92), transparent 26%),
      radial-gradient(circle at 4% 92%, rgba(106, 73, 242, 0.07), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fcfbff 44%, #f7f3ff 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--apt-text-soft);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .apt-premium-page,
  .apt-premium-page * {
    box-sizing: border-box;
  }

  .apt-premium-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    background:
      radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
      radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
    color: var(--apt-text-soft);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .apt-premium-page::before,
  .apt-premium-page::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(90px);
    z-index: -1;
    opacity: .72;
  }

  .apt-premium-page::before {
    width: 300px;
    height: 300px;
    top: 92px;
    left: -120px;
    background: rgba(106, 73, 242, 0.13);
  }

  .apt-premium-page::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
  }

  .apt-premium-page img,
  .apt-premium-page svg {
    display: block;
    max-width: 100%;
  }

  .apt-premium-page a {
    color: inherit;
    text-decoration: none;
  }

  .apt-premium-page h1,
  .apt-premium-page h2,
  .apt-premium-page h3,
  .apt-premium-page h4,
  .apt-premium-page p {
    margin: 0;
    font-family: inherit;
  }

  .apt-premium-page h1,
  .apt-premium-page h2,
  .apt-premium-page h3,
  .apt-premium-page h4 {
    color: var(--apt-text);
    font-weight: 700;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .apt-premium-page p {
    color: var(--apt-text-soft);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .apt-wrap {
    width: min(var(--apt-container), calc(100% - var(--apt-page-gap)));
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  .apt-section {
    padding: var(--apt-section-space) 0;
  }

  .apt-section.compact {
    padding-top: clamp(34px, 3.4vw, 48px);
    padding-bottom: var(--apt-section-space);
  }

  .apt-grid {
    display: grid;
    gap: 24px;
  }

  .apt-kicker,
  .apt-score-tag,
  .apt-outcome-card .label,
  .apt-chip,
  .apt-point {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .apt-kicker {
    gap: 9px;
    min-height: auto;
    padding: 10px 15px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--apt-brand);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
  }

  .apt-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--apt-brand), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
  }

  .apt-section-head {
    display: grid;
    gap: 14px;
    max-width: 780px;
    margin-bottom: clamp(24px, 2.8vw, 34px);
  }

  .apt-section-head h2,
  .apt-editorial-copy h2,
  .apt-dark-card h2,
  .apt-cta-copy h2 {
    margin: 0;
    color: var(--apt-text);
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.04em;
    font-weight: 700;
  }

  .apt-section-head p,
  .apt-editorial-copy p,
  .apt-cta-copy p,
  .apt-dark-card p {
    max-width: 720px;
  }

  .apt-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  .apt-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none !important;
    transition: var(--apt-transition);
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
  }

  .apt-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
    z-index: -1;
  }

  .apt-btn:hover {
    transform: translateY(-3px);
  }

  .apt-btn:hover::before {
    transform: scaleX(1);
  }

  .apt-btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg, var(--apt-brand), var(--apt-brand-2));
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.22);
  }

  .apt-btn-primary::before {
    background: linear-gradient(135deg, var(--apt-text), var(--apt-brand));
  }

  .apt-btn-primary:hover {
    color: #fff !important;
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.28);
  }

  .apt-btn-secondary {
    color: var(--apt-brand) !important;
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
  }

  .apt-btn-secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
  }

  .apt-btn-secondary:hover {
    color: var(--apt-brand) !important;
    background: #ffffff;
  }

  .apt-chip-row,
  .apt-points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  .apt-chip,
  .apt-point {
    min-height: 38px;
    padding: 8px 13px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.12);
    color: var(--apt-brand);
    box-shadow: 0 8px 20px rgba(50, 35, 111, 0.05);
    font-size: 12.5px;
    line-height: 1.2;
    text-align: center;
  }

  .apt-glass,
  .apt-mini-metric,
  .apt-stat-ribbon .item,
  .apt-editorial-copy .panel,
  .apt-info-card,
  .apt-module-panel,
  .apt-step,
  .apt-outcome-card,
  .apt-cta-band {
    background: var(--apt-surface);
    border: 1px solid var(--apt-line);
    box-shadow: var(--apt-shadow-md);
    backdrop-filter: blur(14px);
    transition: var(--apt-transition);
  }

  .apt-mini-metric:hover,
  .apt-stat-ribbon .item:hover,
  .apt-editorial-copy .panel:hover,
  .apt-info-card:hover,
  .apt-module-panel:hover,
  .apt-step:hover,
  .apt-outcome-card:hover,
  .apt-cta-band:hover,
  .apt-floating-card:hover,
  .apt-dark-metric:hover {
    transform: translateY(-4px);
    box-shadow: var(--apt-shadow-hover);
    border-color: rgba(106, 73, 242, 0.20);
  }

  /* hero */
  .apt-hero {
    padding: clamp(116px, 8vw, 140px) 0 clamp(44px, 5vw, 64px);
  }

  .apt-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    gap: clamp(24px, 3vw, 34px);
    align-items: center;
  }

  .apt-hero-copy {
    display: grid;
    gap: 22px;
    max-width: 680px;
    min-width: 0;
    padding: 0;
  }

  .apt-hero-copy h1 {
    color: var(--apt-text);
    font-size: clamp(38px, 5.2vw, 62px);
    line-height: 1.06;
    letter-spacing: -0.052em;
    font-weight: 700;
    max-width: 720px;
  }

  .apt-hero-copy p {
    max-width: 640px;
    font-size: 16px;
    line-height: 1.74;
  }

  .apt-hero-copy .apt-btn-row,
  .apt-hero-copy .apt-chip-row,
  .apt-mini-metrics {
    margin-top: 0;
  }

  .apt-mini-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .apt-mini-metric {
    padding: 18px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .apt-mini-metric strong {
    display: block;
    color: var(--apt-text);
    font-size: 20px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .apt-mini-metric span {
    display: block;
    margin-top: 7px;
    color: var(--apt-text-muted);
    font-size: 12.7px;
    line-height: 1.55;
    font-weight: 500;
  }

  .apt-hero-visual {
    position: relative;
    min-height: 620px;
    min-width: 0;
  }

  .apt-main-photo {
    position: absolute;
    inset: 18px 52px 72px 52px;
    border-radius: var(--apt-radius-xl);
    overflow: hidden;
    box-shadow: var(--apt-shadow-lg);
    background: #efeaff;
    border: 1px solid rgba(106, 73, 242, 0.12);
  }

  .apt-main-photo::after,
  .apt-side-photo::after,
  .apt-photo-card::after,
  .apt-module-media::after,
  .apt-flow-visual .frame::after,
  .apt-outcome-card.photo::after,
  .apt-cta-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(23, 15, 60, 0.04), rgba(23, 15, 60, 0.20)),
      radial-gradient(circle at 0 100%, rgba(106, 73, 242, 0.16), transparent 42%);
    pointer-events: none;
  }

  .apt-main-photo img,
  .apt-side-photo img,
  .apt-photo-card img,
  .apt-module-media img,
  .apt-flow-visual img,
  .apt-outcome-card.photo img,
  .apt-cta-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .apt-floating-card {
    position: absolute;
    z-index: 3;
    border-radius: 22px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(106, 73, 242, 0.12);
    box-shadow: 0 18px 42px rgba(50, 35, 111, 0.14);
    backdrop-filter: blur(14px);
    transition: var(--apt-transition);
  }

  .apt-floating-card.card-a {
    top: 0;
    left: 0;
    width: 258px;
  }

  .apt-floating-card.card-b {
    right: 0;
    bottom: 28px;
    width: 248px;
    padding: 12px;
  }

  .apt-floating-card.card-c {
    left: 30px;
    bottom: 0;
    width: 230px;
    padding: 16px;
  }

  .apt-floating-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--apt-brand);
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 800;
  }

  .apt-floating-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
  }

  .apt-floating-card h4 {
    margin-top: 10px;
    color: var(--apt-text);
    font-size: 17px;
    line-height: 1.34;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .apt-floating-card p {
    margin-top: 8px;
    font-size: 12.8px;
    line-height: 1.6;
  }

  .apt-floating-bars {
    display: grid;
    gap: 10px;
    margin-top: 14px;
  }

  .apt-floating-bar span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    color: var(--apt-text-muted);
    font-size: 12px;
    line-height: 1.4;
  }

  .apt-floating-track {
    height: 9px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.10);
    overflow: hidden;
  }

  .apt-floating-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--apt-brand), #b5a6ff);
  }

  .apt-side-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / .82;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--apt-shadow-sm);
    background: #efeaff;
  }

  .apt-stat-ribbon {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .apt-stat-ribbon .item {
    padding: 20px;
    border-radius: 22px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .apt-stat-ribbon .value {
    color: var(--apt-text);
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .apt-stat-ribbon .label {
    margin-top: 8px;
    color: var(--apt-text-muted);
    font-size: 13.5px;
    line-height: 1.62;
    font-weight: 500;
  }

  /* editorial split */
  .apt-editorial {
    display: grid;
    grid-template-columns: minmax(340px, .92fr) minmax(0, 1.08fr);
    gap: clamp(22px, 3vw, 34px);
    align-items: stretch;
  }

  .apt-editorial-copy,
  .apt-editorial-gallery {
    min-width: 0;
  }

  .apt-editorial-copy .panel {
    height: 100%;
    display: grid;
    align-content: center;
    gap: 18px;
    padding: 30px;
    border-radius: var(--apt-radius-xl);
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .apt-editorial-copy h2 {
    margin: 0;
  }

  .apt-editorial-copy p {
    margin: 0;
  }

  .apt-bullet-list {
    display: grid;
    gap: 12px;
    margin-top: 4px;
  }

  .apt-bullet {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(106, 73, 242, 0.10);
    box-shadow: 0 10px 24px rgba(50, 35, 111, 0.05);
  }

  .apt-bullet i {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(106,73,242,0.14), rgba(223,218,243,0.96));
    color: var(--apt-brand);
    font-size: 15px;
  }

  .apt-bullet strong {
    display: block;
    color: var(--apt-text);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .apt-bullet span {
    display: block;
    margin-top: 5px;
    color: var(--apt-text-muted);
    font-size: 13px;
    line-height: 1.6;
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  .apt-editorial-gallery {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 18px;
  }

  .apt-photo-card,
  .apt-info-card,
  .apt-quote {
    border-radius: var(--apt-radius-lg);
    overflow: hidden;
    min-width: 0;
  }

  .apt-photo-card {
    position: relative;
    min-height: 520px;
    background: #efeaff;
    box-shadow: var(--apt-shadow-lg);
  }

  .apt-column-stack {
    display: grid;
    gap: 18px;
  }

  .apt-info-card {
    padding: 22px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255,255,255,0.90);
  }

  .apt-info-card h3 {
    color: var(--apt-text);
    font-size: 20px;
    line-height: 1.28;
    font-weight: 700;
  }

  .apt-info-card p {
    margin-top: 10px;
  }

  .apt-quote {
    display: grid;
    gap: 14px;
    padding: 24px;
    background:
      radial-gradient(circle at right top, rgba(255,255,255,0.14), transparent 28%),
      linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    box-shadow: var(--apt-shadow-md);
    color: #fff;
  }

  .apt-quote p {
    color: rgba(255, 255, 255, 0.84);
  }

  .apt-quote strong {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
  }

  /* modules */
  .apt-module-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
  }

  .apt-module-panel {
    overflow: hidden;
    border-radius: var(--apt-radius-lg);
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .apt-module-panel.large {
    grid-column: span 7;
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    min-height: 420px;
  }

  .apt-module-panel.tall {
    grid-column: span 5;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 420px;
  }

  .apt-module-panel.wide {
    grid-column: span 6;
    display: grid;
    grid-template-columns: .96fr 1.04fr;
    min-height: 320px;
  }

  .apt-module-panel.soft {
    grid-column: span 6;
    padding: 26px;
    min-height: 320px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.10), transparent 34%),
      linear-gradient(180deg, rgba(247, 243, 255, 0.96), rgba(255, 255, 255, 0.94));
  }

  .apt-module-media {
    position: relative;
    min-height: 100%;
    background: #efeaff;
  }

  .apt-module-copy {
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .apt-module-copy h3,
  .apt-module-panel.tall h3,
  .apt-module-panel.soft h3 {
    color: var(--apt-text);
    font-size: 24px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
  }

  .apt-module-copy p,
  .apt-module-panel.tall p,
  .apt-module-panel.soft p {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.62;
  }

  .apt-points {
    margin-top: 18px;
  }

  .apt-score-tag,
  .apt-outcome-card .label {
    min-height: 38px;
    padding: 8px 13px;
    margin-bottom: 14px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.12);
    color: var(--apt-brand);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .045em;
    text-transform: uppercase;
  }

  .apt-soft-list {
    display: grid;
    gap: 13px;
    margin-top: 22px;
  }

  .apt-soft-row {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(106, 73, 242, 0.10);
  }

  .apt-soft-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .apt-soft-row .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--apt-brand);
    box-shadow: 0 0 0 6px rgba(106, 73, 242, 0.10);
  }

  .apt-soft-row span,
  .apt-soft-row strong {
    font-size: 13.5px;
    line-height: 1.55;
  }

  .apt-soft-row span {
    color: var(--apt-text-soft);
  }

  .apt-soft-row strong {
    color: var(--apt-text);
    font-weight: 700;
    white-space: nowrap;
  }

  /* workflow */
  .apt-flow {
    display: grid;
    grid-template-columns: minmax(340px, .94fr) minmax(0, 1.06fr);
    gap: 26px;
    align-items: start;
  }

  .apt-flow-visual {
    position: sticky;
    top: 26px;
  }

  .apt-flow-visual .frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--apt-radius-xl);
    box-shadow: var(--apt-shadow-lg);
    background: #efeaff;
    border: 1px solid rgba(106, 73, 242, 0.12);
  }

  .apt-flow-visual img {
    width: 100%;
    display: block;
    min-height: 620px;
    object-fit: cover;
  }

  .apt-flow-visual .overlay {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(106, 73, 242, 0.12);
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 34px rgba(50, 35, 111, 0.12);
  }

  .apt-flow-visual .overlay strong {
    display: block;
    color: var(--apt-text);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .apt-flow-visual .overlay span {
    display: block;
    margin-top: 8px;
    color: var(--apt-text-muted);
    font-size: 13px;
    line-height: 1.62;
    font-weight: 500;
  }

  .apt-step-list {
    display: grid;
    gap: 16px;
  }

  .apt-step {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
    padding: 22px;
    border-radius: var(--apt-radius-lg);
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .apt-step-no {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(106,73,242,0.14), rgba(223,218,243,0.96));
    color: var(--apt-brand);
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
  }

  .apt-step h3 {
    color: var(--apt-text);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
  }

  .apt-step p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.62;
  }

  .apt-step-note {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px dashed rgba(106, 73, 242, 0.16);
    color: var(--apt-text-muted);
    font-size: 13px;
    line-height: 1.6;
    font-weight: 500;
  }

  /* outcome strip */
  .apt-outcome-shell {
    display: grid;
    grid-template-columns: minmax(340px, .86fr) minmax(0, 1.14fr);
    gap: 22px;
    align-items: stretch;
  }

  .apt-dark-card {
    position: relative;
    overflow: hidden;
    padding: 30px;
    border-radius: var(--apt-radius-xl);
    background:
      radial-gradient(circle at right top, rgba(255,255,255,0.14), transparent 28%),
      linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    box-shadow: var(--apt-shadow-lg);
    color: #fff;
  }

  .apt-dark-card::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -120px;
    top: -120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
  }

  .apt-dark-card .apt-kicker {
    position: relative;
    z-index: 1;
  }

  .apt-dark-card h2,
  .apt-dark-card p,
  .apt-dark-card * {
    position: relative;
    z-index: 1;
  }

  .apt-dark-card h2 {
    margin-top: 18px;
    color: #ffffff;
  }

  .apt-dark-card p {
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.82);
  }

  .apt-dark-metrics {
    display: grid;
    gap: 14px;
    margin-top: 24px;
  }

  .apt-dark-metric {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: var(--apt-transition);
  }

  .apt-dark-metric strong {
    display: block;
    color: #fff;
    font-size: 19px;
    line-height: 1.22;
    font-weight: 700;
  }

  .apt-dark-metric span {
    display: block;
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
    line-height: 1.6;
    font-weight: 500;
  }

  .apt-outcome-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .apt-outcome-card {
    padding: 24px;
    border-radius: var(--apt-radius-lg);
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .apt-outcome-card.photo {
    position: relative;
    padding: 0;
    overflow: hidden;
    min-height: 280px;
    background: #efeaff;
  }

  .apt-outcome-card .label {
    margin-bottom: 0;
  }

  .apt-outcome-card h3 {
    margin-top: 14px;
    color: var(--apt-text);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .apt-outcome-card p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.62;
  }

  .apt-line-list {
    display: grid;
    gap: 11px;
    margin-top: 18px;
  }

  .apt-line-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(106, 73, 242, 0.10);
  }

  .apt-line-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .apt-line-row span {
    color: var(--apt-text-muted);
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 500;
  }

  .apt-line-row strong {
    color: var(--apt-text);
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 700;
    text-align: right;
  }

  /* final CTA */
  .apt-cta-band {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(320px, .94fr);
    gap: 24px;
    align-items: center;
    padding: 26px;
    border-radius: var(--apt-radius-xl);
    background:
      radial-gradient(circle at right top, rgba(255,255,255,0.14), transparent 28%),
      linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
  }

  .apt-cta-band::before,
  .apt-cta-band::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    opacity: .24;
  }

  .apt-cta-band::before {
    width: 300px;
    height: 300px;
    right: -100px;
    top: -100px;
    background: radial-gradient(circle, rgba(255,255,255,0.56), rgba(255,255,255,0));
  }

  .apt-cta-band::after {
    width: 240px;
    height: 240px;
    left: -90px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(255,255,255,0.30), rgba(255,255,255,0));
  }

  .apt-cta-copy,
  .apt-cta-visual {
    position: relative;
    z-index: 1;
  }

  .apt-cta-copy {
    display: grid;
    gap: 16px;
    padding: 10px;
    align-self: center;
  }

  .apt-cta-copy .apt-kicker {
    color: #ffffff;
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.16);
    box-shadow: none;
  }

  .apt-cta-copy .apt-kicker::before {
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.12);
  }

  .apt-cta-copy h2,
  .apt-cta-copy p {
    color: #ffffff;
    margin: 0;
  }

  .apt-cta-copy p {
    color: rgba(255,255,255,0.82);
  }

  .apt-cta-copy .apt-btn-row {
    margin-top: 4px;
  }

  .apt-cta-copy .apt-btn-primary {
    background: #ffffff;
    color: var(--apt-text) !important;
    box-shadow: 0 18px 38px rgba(0,0,0,0.10);
  }

  .apt-cta-copy .apt-btn-primary:hover {
    color: var(--apt-text) !important;
    background: #f6f2ff;
  }

  .apt-cta-copy .apt-btn-secondary {
    color: #ffffff !important;
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.22);
    box-shadow: none;
  }

  .apt-cta-copy .apt-btn-secondary:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.18);
  }

  .apt-cta-visual {
    min-height: 360px;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 20px 48px rgba(18, 12, 46, 0.20);
    background: #efeaff;
  }

  .apt-cta-float {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(106, 73, 242, 0.12);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 30px rgba(50, 35, 111, 0.12);
  }

  .apt-cta-float strong {
    display: block;
    color: var(--apt-text);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .apt-cta-float span {
    display: block;
    margin-top: 6px;
    color: var(--apt-text-muted);
    font-size: 13px;
    line-height: 1.6;
    font-weight: 500;
  }

  /* reveal */
  @media (prefers-reduced-motion: no-preference) {
    .apt-reveal {
      opacity: 0;
      transform: translateY(18px);
      animation: aptFadeUp 0.75s ease forwards;
    }

    .apt-reveal.d2 { animation-delay: 0.08s; }
    .apt-reveal.d3 { animation-delay: 0.16s; }
    .apt-reveal.d4 { animation-delay: 0.24s; }
  }

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

  /* responsive */
  @media (max-width: 1180px) {
    :root {
      --apt-page-gap: 34px;
      --apt-section-space: 58px;
    }

    .apt-hero-grid,
    .apt-editorial,
    .apt-flow,
    .apt-outcome-shell,
    .apt-cta-band {
      grid-template-columns: 1fr;
    }

    .apt-hero-copy {
      max-width: 900px;
    }

    .apt-hero-visual {
      max-width: 820px;
      min-height: 580px;
    }

    .apt-main-photo {
      inset: 18px 52px 72px 52px;
    }

    .apt-flow-visual {
      position: static;
    }

    .apt-flow-visual img {
      min-height: 480px;
    }

    .apt-module-panel.large,
    .apt-module-panel.tall,
    .apt-module-panel.wide,
    .apt-module-panel.soft {
      grid-column: span 12;
    }

    .apt-module-panel.large,
    .apt-module-panel.wide {
      grid-template-columns: 1fr 1fr;
    }

    .apt-outcome-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 991px) {
    :root {
      --apt-page-gap: 30px;
      --apt-section-space: 54px;
    }

    .apt-hero {
      padding-top: 104px;
    }

    .apt-editorial-gallery,
    .apt-mini-metrics,
    .apt-stat-ribbon,
    .apt-module-panel.large,
    .apt-module-panel.wide {
      grid-template-columns: 1fr;
    }

    .apt-photo-card {
      min-height: 420px;
    }

    .apt-module-media {
      min-height: 300px;
    }

    .apt-outcome-grid {
      grid-template-columns: 1fr;
    }

    .apt-outcome-card.photo {
      min-height: 340px;
    }
  }

  @media (max-width: 767px) {
    :root {
      --apt-page-gap: 24px;
      --apt-section-space: 46px;
    }

    .apt-wrap {
      width: min(var(--apt-container), calc(100% - var(--apt-page-gap)));
    }

    .apt-section,
    .apt-section.compact {
      padding: var(--apt-section-space) 0;
    }

    .apt-hero {
      padding: 96px 0 34px;
    }

    .apt-hero-copy,
    .apt-section-head,
    .apt-editorial-copy .panel,
    .apt-cta-copy {
      text-align: center;
      justify-items: center;
    }

    .apt-hero-copy h1 {
      font-size: clamp(30px, 9.3vw, 42px);
      line-height: 1.1;
      max-width: none;
    }

    .apt-section-head h2,
    .apt-editorial-copy h2,
    .apt-dark-card h2,
    .apt-cta-copy h2 {
      font-size: clamp(24px, 7.4vw, 34px);
      line-height: 1.16;
      max-width: none;
    }

    .apt-premium-page p,
    .apt-hero-copy p,
    .apt-section-head p,
    .apt-editorial-copy p,
    .apt-cta-copy p,
    .apt-dark-card p {
      font-size: 14px;
      line-height: 1.62;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .apt-kicker,
    .apt-score-tag,
    .apt-outcome-card .label {
      padding: 8px 12px;
      gap: 8px;
      font-size: 9.5px;
      letter-spacing: .075em;
      margin-left: auto;
      margin-right: auto;
      justify-content: center;
      text-align: center;
    }

    .apt-kicker::before {
      width: 7px;
      height: 7px;
    }

    .apt-btn-row {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: 11px;
    }

    .apt-btn {
      width: 100%;
      min-width: 0;
      min-height: 50px;
      padding: 13px 16px;
      border-radius: 14px;
      font-size: 14px;
    }

    .apt-chip-row,
    .apt-points {
      justify-content: center;
      gap: 8px;
    }

    .apt-chip,
    .apt-point {
      min-height: 34px;
      padding: 8px 10px;
      font-size: 11.5px;
      white-space: normal;
    }

    .apt-mini-metrics,
    .apt-stat-ribbon {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .apt-mini-metric,
    .apt-stat-ribbon .item {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 15px;
      border-radius: 18px;
      text-align: left;
    }

    .apt-mini-metric strong,
    .apt-stat-ribbon .value {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      margin: 0;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(106, 73, 242, .09);
      color: var(--apt-text);
      font-size: 13.8px;
      line-height: 1.15;
      text-align: center;
    }

    .apt-mini-metric span,
    .apt-stat-ribbon .label {
      margin: 0;
      font-size: 12.8px;
      line-height: 1.52;
      text-align: left;
    }

    .apt-hero-visual {
      min-height: auto;
      display: grid;
      gap: 14px;
    }

    .apt-main-photo,
    .apt-floating-card,
    .apt-floating-card.card-a,
    .apt-floating-card.card-b,
    .apt-floating-card.card-c {
      position: relative;
      inset: auto;
      left: auto;
      right: auto;
      top: auto;
      bottom: auto;
      width: 100%;
      max-width: none;
    }

    .apt-main-photo {
      height: 340px;
      border-radius: 22px;
    }

    .apt-floating-card {
      padding: 14px;
      border-radius: 18px;
    }

    .apt-side-photo {
      aspect-ratio: 16 / 8.5;
      border-radius: 16px;
    }

    .apt-editorial-copy .panel,
    .apt-info-card,
    .apt-quote,
    .apt-module-panel.tall,
    .apt-module-panel.soft,
    .apt-module-copy,
    .apt-step,
    .apt-outcome-card,
    .apt-dark-card,
    .apt-cta-band {
      padding: 16px;
      border-radius: 20px;
    }

    .apt-bullet {
      grid-template-columns: 40px minmax(0, 1fr);
      padding: 13px;
      border-radius: 16px;
      text-align: left;
    }

    .apt-bullet i {
      width: 38px;
      height: 38px;
      border-radius: 13px;
    }

    .apt-bullet strong,
    .apt-bullet span {
      text-align: left;
    }

    .apt-photo-card {
      min-height: 320px;
      border-radius: 20px;
    }

    .apt-info-card h3,
    .apt-quote p,
    .apt-quote strong {
      text-align: center;
    }

    .apt-module-panel.large,
    .apt-module-panel.wide {
      grid-template-columns: 1fr;
      border-radius: 20px;
    }

    .apt-module-copy h3,
    .apt-module-panel.tall h3,
    .apt-module-panel.soft h3 {
      font-size: 20px !important;
      line-height: 1.22 !important;
      text-align: center;
    }

    .apt-module-copy p,
    .apt-module-panel.tall p,
    .apt-module-panel.soft p {
      text-align: center;
    }

    .apt-module-media {
      min-height: 250px;
    }

    .apt-soft-row {
      grid-template-columns: 14px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      text-align: left;
    }

    .apt-soft-row strong {
      grid-column: 2;
      white-space: normal;
      text-align: left;
    }

    .apt-flow-visual .frame {
      border-radius: 22px;
    }

    .apt-flow-visual img {
      min-height: 320px;
    }

    .apt-flow-visual .overlay {
      left: 12px;
      right: 12px;
      bottom: 12px;
      padding: 14px;
      border-radius: 18px;
      text-align: center;
    }

    .apt-step {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 10px 12px;
      align-items: center;
      text-align: left;
    }

    .apt-step-no {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      font-size: 13px;
    }

    .apt-step h3 {
      margin: 0;
      font-size: 16.5px;
      line-height: 1.32;
      text-align: left;
    }

    .apt-step p,
    .apt-step-note {
      grid-column: 1 / -1;
      text-align: left;
    }

    .apt-step p {
      margin-top: 2px;
    }

    .apt-outcome-card h3,
    .apt-outcome-card p {
      text-align: center;
    }

    .apt-line-row strong {
      text-align: right;
    }

    .apt-outcome-card.photo {
      min-height: 280px;
      border-radius: 20px;
    }

    .apt-dark-metric {
      padding: 14px;
      border-radius: 16px;
      text-align: center;
    }

    .apt-cta-band {
      gap: 18px;
    }

    .apt-cta-copy {
      padding: 0;
    }

    .apt-cta-visual {
      min-height: 300px;
      border-radius: 18px;
    }

    .apt-cta-float {
      left: 12px;
      right: 12px;
      bottom: 12px;
      padding: 14px;
      border-radius: 16px;
      text-align: center;
    }
  }

  @media (max-width: 430px) {
    :root {
      --apt-page-gap: 22px;
      --apt-section-space: 42px;
    }

    .apt-hero {
      padding-top: 88px;
      padding-bottom: 30px;
    }

    .apt-hero-copy h1 {
      font-size: clamp(27px, 8.8vw, 36px);
    }

    .apt-section-head h2,
    .apt-editorial-copy h2,
    .apt-dark-card h2,
    .apt-cta-copy h2 {
      font-size: clamp(22px, 7vw, 30px);
    }

    .apt-main-photo {
      height: 320px;
    }

    .apt-mini-metric,
    .apt-stat-ribbon .item {
      grid-template-columns: 82px minmax(0, 1fr);
      padding: 13px;
      border-radius: 16px;
    }

    .apt-mini-metric strong,
    .apt-stat-ribbon .value {
      min-height: 40px;
      font-size: 12.5px;
    }

    .apt-editorial-copy .panel,
    .apt-info-card,
    .apt-quote,
    .apt-module-panel.tall,
    .apt-module-panel.soft,
    .apt-module-copy,
    .apt-step,
    .apt-outcome-card,
    .apt-dark-card,
    .apt-cta-band {
      padding: 14px;
      border-radius: 18px;
    }

    .apt-step {
      grid-template-columns: 40px minmax(0, 1fr);
      column-gap: 11px;
    }

    .apt-step-no {
      width: 40px;
      height: 40px;
      border-radius: 13px;
    }

    .apt-step h3 {
      font-size: 15.5px;
    }

    .apt-module-media {
      min-height: 220px;
    }

    .apt-cta-visual {
      min-height: 270px;
    }
  }

  @media (max-width: 360px) {
    :root {
      --apt-page-gap: 18px;
    }

    .apt-hero {
      padding-top: 82px;
    }

    .apt-hero-copy h1 {
      font-size: 25px;
    }

    .apt-kicker,
    .apt-score-tag,
    .apt-outcome-card .label {
      font-size: 8.5px;
      letter-spacing: .055em;
      padding: 7px 10px;
    }

    .apt-mini-metric,
    .apt-stat-ribbon .item {
      grid-template-columns: 1fr;
    }

    .apt-mini-metric strong,
    .apt-stat-ribbon .value {
      width: fit-content;
      justify-content: flex-start;
      text-align: left;
    }
  }

  @media (hover: none) {
    .apt-btn:hover,
    .apt-mini-metric:hover,
    .apt-stat-ribbon .item:hover,
    .apt-editorial-copy .panel:hover,
    .apt-info-card:hover,
    .apt-module-panel:hover,
    .apt-step:hover,
    .apt-outcome-card:hover,
    .apt-cta-band:hover,
    .apt-floating-card:hover,
    .apt-dark-metric:hover {
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .apt-reveal,
    .apt-btn {
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
      animation: none !important;
    }
  }

  /* =====================================================
     FINAL BEFORE / AFTER COMPARISON POLISH
     Makes the before-after rows look premium and readable
     on mobile, tablet, and desktop.
  ===================================================== */

  .apt-premium-page .apt-line-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    padding: 12px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 36%),
      linear-gradient(180deg, rgba(246, 244, 254, 0.88), rgba(255,255,255,0.88));
    border: 1px solid rgba(106, 73, 242, 0.10);
  }

  .apt-premium-page .apt-line-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(106, 73, 242, 0.10);
    border-radius: 16px;
    background: rgba(255,255,255,0.86);
    box-shadow: 0 8px 18px rgba(50, 35, 111, 0.045);
  }

  .apt-premium-page .apt-line-row:last-child,
  .apt-premium-page .apt-line-row {
    border-bottom: 1px solid rgba(106, 73, 242, 0.10);
    padding-bottom: 12px;
  }

  .apt-premium-page .apt-line-row span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 30px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(50, 35, 111, 0.07);
    color: rgba(50, 35, 111, 0.68);
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 800;
    text-align: center;
  }

  .apt-premium-page .apt-line-row strong {
    color: var(--apt-text);
    font-size: 13.8px;
    line-height: 1.42;
    font-weight: 800;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .apt-premium-page .apt-line-row:nth-child(2) {
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.10), transparent 34%),
      rgba(255,255,255,0.94);
    border-color: rgba(106, 73, 242, 0.18);
  }

  .apt-premium-page .apt-line-row:nth-child(2) span {
    background: linear-gradient(135deg, var(--apt-brand), var(--apt-brand-2));
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(106, 73, 242, 0.18);
  }

  .apt-premium-page .apt-line-row:nth-child(2) strong {
    color: var(--apt-brand-dark);
  }

  @media (max-width: 767px) {
    .apt-premium-page .apt-line-list {
      gap: 9px;
      padding: 10px;
      border-radius: 18px;
    }

    .apt-premium-page .apt-line-row {
      grid-template-columns: 1fr;
      gap: 8px;
      padding: 12px;
      border-radius: 15px;
      text-align: center;
    }

    .apt-premium-page .apt-line-row span {
      width: fit-content;
      min-height: 28px;
      margin: 0 auto;
      padding: 7px 12px;
      font-size: 10px;
    }

    .apt-premium-page .apt-line-row strong {
      text-align: center;
      font-size: 13.5px;
      line-height: 1.42;
    }
  }

  @media (max-width: 430px) {
    .apt-premium-page .apt-line-list {
      padding: 9px;
      border-radius: 16px;
    }

    .apt-premium-page .apt-line-row {
      padding: 11px;
      border-radius: 14px;
    }

    .apt-premium-page .apt-line-row strong {
      font-size: 13px;
    }
  }

/*===================================================================================
    21. Aptitude Practice Tests CSS End
===================================================================================*/


/*===================================================================================
    22. Mock Interviews CSS Start
===================================================================================*/


  :root {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --bg-purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --slider-dots-color: #D4D2DD;
    --light-bg: #DFDAF3;

    --mti-bg: #f7f3ff;
    --mti-bg-soft: #fcfbff;
    --mti-surface: rgba(255, 255, 255, 0.94);
    --mti-surface-soft: rgba(255, 255, 255, 0.88);
    --mti-title: var(--dark-purple);
    --mti-text: rgba(62, 63, 102, 0.78);
    --mti-muted: rgba(62, 63, 102, 0.62);
    --mti-brand: var(--purple);
    --mti-brand-2: #8a70ff;
    --mti-brand-dark: #4D32C8;
    --mti-line: rgba(106, 73, 242, 0.12);
    --mti-line-strong: rgba(106, 73, 242, 0.18);
    --mti-shadow-sm: 0 10px 28px rgba(50, 35, 111, 0.06);
    --mti-shadow-md: 0 16px 42px rgba(50, 35, 111, 0.085);
    --mti-shadow-lg: 0 28px 72px rgba(50, 35, 111, 0.15);
    --mti-radius-xl: 32px;
    --mti-radius-lg: 26px;
    --mti-radius-md: 20px;
    --mti-radius-sm: 16px;
    --mti-container: 1160px;
    --mti-page-gap: 44px;
    --mti-section-space: clamp(46px, 4.8vw, 68px);
    --mti-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 6% 4%, rgba(106, 73, 242, 0.12), transparent 25%),
      radial-gradient(circle at 94% 8%, rgba(223, 218, 243, 0.92), transparent 26%),
      radial-gradient(circle at 4% 92%, rgba(106, 73, 242, 0.07), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fcfbff 44%, #f7f3ff 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--mti-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .lux-mti,
  .lux-mti * {
    box-sizing: border-box;
  }

  .lux-mti {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    padding: 0;
    background:
      radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
      radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
    color: var(--mti-text);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .lux-mti::before,
  .lux-mti::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    opacity: .72;
  }

  .lux-mti::before {
    width: 300px;
    height: 300px;
    top: 92px;
    left: -120px;
    background: rgba(106, 73, 242, 0.13);
  }

  .lux-mti::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
  }

  .lux-mti a {
    color: inherit;
    text-decoration: none;
  }

  .lux-mti img,
  .lux-mti svg {
    display: block;
    max-width: 100%;
  }

  .lux-mti h1,
  .lux-mti h2,
  .lux-mti h3,
  .lux-mti h4,
  .lux-mti p {
    margin: 0;
    font-family: inherit;
  }

  .lux-mti h1,
  .lux-mti h2,
  .lux-mti h3,
  .lux-mti h4 {
    color: var(--mti-title);
    font-weight: 700;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .lux-mti p {
    color: var(--mti-text);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .lux-mti__container {
    width: min(var(--mti-container), calc(100% - var(--mti-page-gap)));
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  .lux-mti__section {
    padding: var(--mti-section-space) 0;
    position: relative;
  }

  .lux-mti__section--soft {
    background:
      radial-gradient(circle at 0 0, rgba(106, 73, 242, .05), transparent 26%),
      linear-gradient(180deg, rgba(246, 244, 254, .66), rgba(255, 255, 255, 0));
  }

  .lux-mti__eyebrow,
  .lux-mti__card-tag,
  .lux-mti__process-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
    color: var(--mti-brand);
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .lux-mti__eyebrow {
    gap: 9px;
    min-height: auto;
    padding: 10px 15px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
  }

  .lux-mti__eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mti-brand), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
  }

  .lux-mti__section-head {
    display: grid;
    gap: 14px;
    max-width: 780px;
    margin-bottom: clamp(24px, 2.8vw, 34px);
  }

  .lux-mti__section-head h2,
  .lux-mti__split-copy h2,
  .lux-mti__cta-copy h2 {
    margin: 0;
    color: var(--mti-title);
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.04em;
    font-weight: 700;
  }

  .lux-mti__section-head p,
  .lux-mti__hero-copy > p,
  .lux-mti__metric p,
  .lux-mti__card-body p,
  .lux-mti__split-copy > p,
  .lux-mti__point p,
  .lux-mti__process-item p,
  .lux-mti__cta-copy p,
  .lux-mti__float-copy p {
    margin: 0;
    color: var(--mti-text);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  /* Hero */
  .lux-mti__hero {
    padding: clamp(116px, 8vw, 140px) 0 clamp(44px, 5vw, 64px);
    position: relative;
  }

  .lux-mti__hero-shell {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    gap: clamp(24px, 3vw, 34px);
    align-items: center;
  }

  .lux-mti__hero-copy {
    display: grid;
    gap: 22px;
    max-width: 680px;
    min-width: 0;
  }

  .lux-mti__hero-copy h1 {
    margin: 0;
    color: var(--mti-title);
    font-size: clamp(38px, 5.2vw, 62px);
    line-height: 1.06;
    letter-spacing: -0.052em;
    font-weight: 700;
    max-width: 720px;
  }

  .lux-mti__hero-copy h1 span {
    color: var(--mti-brand);
  }

  .lux-mti__hero-copy > p {
    max-width: 640px;
    font-size: 16px;
    line-height: 1.74;
  }

  .lux-mti__hero-actions,
  .lux-mti__cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  .lux-mti__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    transition: var(--mti-transition);
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
  }

  .lux-mti__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
    z-index: -1;
  }

  .lux-mti__btn:hover {
    transform: translateY(-3px);
  }

  .lux-mti__btn:hover::before {
    transform: scaleX(1);
  }

  .lux-mti__btn--primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--mti-brand), var(--mti-brand-2));
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.22);
  }

  .lux-mti__btn--primary::before {
    background: linear-gradient(135deg, var(--mti-title), var(--mti-brand));
  }

  .lux-mti__btn--primary:hover {
    color: #ffffff;
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.28);
  }

  .lux-mti__btn--secondary {
    color: var(--mti-brand);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
  }

  .lux-mti__btn--secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
  }

  .lux-mti__btn--secondary:hover {
    color: var(--mti-brand);
    background: #ffffff;
  }

  .lux-mti__micro {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  .lux-mti__micro span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.12);
    color: var(--mti-brand);
    box-shadow: 0 8px 20px rgba(50, 35, 111, 0.05);
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .lux-mti__micro span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mti-brand), #16BDF5);
    flex: 0 0 auto;
  }

  .lux-mti__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .lux-mti__metric,
  .lux-mti__trust-item,
  .lux-mti__card,
  .lux-mti__point,
  .lux-mti__process-item,
  .lux-mti__cta-shell,
  .lux-mti__float-note,
  .lux-mti__float-mini {
    background: var(--mti-surface);
    border: 1px solid var(--mti-line);
    box-shadow: var(--mti-shadow-md);
    backdrop-filter: blur(14px);
    transition: var(--mti-transition);
  }

  .lux-mti__metric:hover,
  .lux-mti__trust-item:hover,
  .lux-mti__card:hover,
  .lux-mti__point:hover,
  .lux-mti__process-item:hover,
  .lux-mti__cta-shell:hover,
  .lux-mti__float-note:hover,
  .lux-mti__float-mini:hover {
    transform: translateY(-4px);
    box-shadow: var(--mti-shadow-lg);
    border-color: rgba(106, 73, 242, 0.20);
  }

  .lux-mti__metric {
    padding: 18px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .lux-mti__metric strong {
    display: block;
    margin-bottom: 7px;
    color: var(--mti-title);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .lux-mti__metric p {
    font-size: 13px;
    line-height: 1.58;
  }

  .lux-mti__hero-visual,
  .lux-mti__visual-shell {
    min-width: 0;
    position: relative;
  }

  .lux-mti__hero-image-wrap {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    border-radius: var(--mti-radius-xl);
    background: #efeaff;
    box-shadow: var(--mti-shadow-lg);
    border: 1px solid rgba(106, 73, 242, 0.12);
  }

  .lux-mti__hero-image-wrap::after,
  .lux-mti__card-media::after,
  .lux-mti__split-image::after,
  .lux-mti__float-mini::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(23, 15, 60, 0.04), rgba(23, 15, 60, 0.20)),
      radial-gradient(circle at 0 100%, rgba(106, 73, 242, 0.16), transparent 42%);
    pointer-events: none;
  }

  .lux-mti__hero-image-wrap > img {
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
  }

  .lux-mti__float-note {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 3;
    max-width: min(310px, calc(100% - 36px));
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.90);
  }

  .lux-mti__float-note span,
  .lux-mti__float-copy span,
  .lux-mti__card-tag,
  .lux-mti__process-no {
    color: var(--mti-brand);
    font-size: 11px;
    line-height: 1;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 800;
  }

  .lux-mti__float-note strong,
  .lux-mti__float-copy strong,
  .lux-mti__card-body h3,
  .lux-mti__point strong,
  .lux-mti__process-item h3 {
    display: block;
    color: var(--mti-title);
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .lux-mti__float-note strong {
    margin-top: 9px;
    font-size: 16px;
    line-height: 1.42;
  }

  .lux-mti__float-mini {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    width: min(280px, calc(100% - 36px));
    overflow: hidden;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.90);
  }

  .lux-mti__float-mini img {
    position: relative;
    width: 100%;
    aspect-ratio: 1.35 / .88;
    object-fit: cover;
  }

  .lux-mti__float-copy {
    position: relative;
    z-index: 1;
    padding: 14px;
    background: rgba(255,255,255,.94);
  }

  .lux-mti__float-copy strong {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.4;
  }

  .lux-mti__float-copy p {
    margin-top: 6px;
    font-size: 12.8px;
    line-height: 1.58;
  }

  .lux-mti__trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
  }

  .lux-mti__trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.88);
    color: var(--mti-title);
    text-align: center;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  /* Highlights */
  .lux-mti__editorial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .lux-mti__card {
    overflow: hidden;
    border-radius: var(--mti-radius-lg);
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.06), transparent 34%),
      rgba(255,255,255,.90);
  }

  .lux-mti__card-media {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    background: #efeaff;
  }

  .lux-mti__card-media img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
  }

  .lux-mti__card-body {
    padding: 22px;
  }

  .lux-mti__card-tag {
    margin-bottom: 12px;
    padding: 8px 12px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.10);
  }

  .lux-mti__card-body h3 {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.24;
    letter-spacing: -0.028em;
  }

  .lux-mti__card-body p {
    font-size: 14px;
    line-height: 1.62;
  }

  /* Story split */
  .lux-mti__split-shell {
    display: grid;
    grid-template-columns: minmax(340px, .96fr) minmax(0, 1.04fr);
    gap: clamp(22px, 3vw, 34px);
    align-items: center;
  }

  .lux-mti__split-image {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    border-radius: var(--mti-radius-xl);
    background: #efeaff;
    box-shadow: var(--mti-shadow-lg);
    border: 1px solid rgba(106, 73, 242, 0.12);
  }

  .lux-mti__split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .lux-mti__split-copy {
    display: grid;
    gap: 18px;
    min-width: 0;
  }

  .lux-mti__points {
    display: grid;
    gap: 14px;
    margin-top: 2px;
  }

  .lux-mti__point {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 22px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.07), transparent 34%),
      rgba(255,255,255,.90);
  }

  .lux-mti__point-no {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(106,73,242,0.14), rgba(223,218,243,0.96));
    color: var(--mti-brand);
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    flex: 0 0 auto;
  }

  .lux-mti__point strong {
    margin-bottom: 6px;
    font-size: 17px;
    line-height: 1.35;
  }

  .lux-mti__point p {
    font-size: 13.5px;
    line-height: 1.6;
  }

  /* Process */
  .lux-mti__process {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .lux-mti__process-item {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 22px;
    border-radius: var(--mti-radius-lg);
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255,255,255,.90);
  }

  .lux-mti__process-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(106,73,242,0.035), transparent 52%, rgba(106,73,242,0.06));
    pointer-events: none;
  }

  .lux-mti__process-no {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(106,73,242,0.14), rgba(223,218,243,0.96));
    letter-spacing: 0;
    font-size: 14px;
  }

  .lux-mti__process-item h3,
  .lux-mti__process-item p {
    position: relative;
    z-index: 1;
  }

  .lux-mti__process-item h3 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.28;
    letter-spacing: -0.025em;
  }

  .lux-mti__process-item p {
    font-size: 13.5px;
    line-height: 1.6;
  }

  /* CTA */
  .lux-mti__cta-shell {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: clamp(24px, 3vw, 34px);
    border-radius: var(--mti-radius-xl);
    background:
      radial-gradient(circle at right top, rgba(255,255,255,0.14), transparent 28%),
      linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
  }

  .lux-mti__cta-shell::before,
  .lux-mti__cta-shell::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    opacity: .24;
  }

  .lux-mti__cta-shell::before {
    width: 300px;
    height: 300px;
    right: -100px;
    top: -100px;
    background: radial-gradient(circle, rgba(255,255,255,0.56), rgba(255,255,255,0));
  }

  .lux-mti__cta-shell::after {
    width: 240px;
    height: 240px;
    left: -90px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(255,255,255,0.30), rgba(255,255,255,0));
  }

  .lux-mti__cta-copy,
  .lux-mti__cta-actions {
    position: relative;
    z-index: 1;
  }

  .lux-mti__cta-copy {
    display: grid;
    gap: 16px;
    max-width: 720px;
  }

  .lux-mti__cta-copy .lux-mti__eyebrow {
    color: #ffffff;
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.16);
    box-shadow: none;
  }

  .lux-mti__cta-copy .lux-mti__eyebrow::before {
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.12);
  }

  .lux-mti__cta-copy h2,
  .lux-mti__cta-copy p {
    color: #ffffff;
  }

  .lux-mti__cta-copy p {
    color: rgba(255,255,255,0.82);
  }

  .lux-mti__cta-actions {
    justify-content: flex-end;
  }

  .lux-mti__cta-actions .lux-mti__btn--primary {
    background: #ffffff;
    color: var(--mti-title);
    box-shadow: 0 18px 38px rgba(0,0,0,0.10);
  }

  .lux-mti__cta-actions .lux-mti__btn--primary:hover {
    color: var(--mti-title);
    background: #f6f2ff;
  }

  .lux-mti__cta-actions .lux-mti__btn--secondary {
    color: #ffffff;
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.22);
    box-shadow: none;
  }

  .lux-mti__cta-actions .lux-mti__btn--secondary:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.18);
  }

  /* Reveal */
  .lux-mti .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
  }

  .lux-mti .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Tablet */
  @media (max-width: 1180px) {
    :root {
      --mti-page-gap: 34px;
      --mti-section-space: 58px;
    }

    .lux-mti__hero-shell,
    .lux-mti__split-shell,
    .lux-mti__cta-shell {
      grid-template-columns: 1fr;
    }

    .lux-mti__hero-copy {
      max-width: 900px;
    }

    .lux-mti__hero-image-wrap {
      max-width: 820px;
    }

    .lux-mti__trust,
    .lux-mti__process {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lux-mti__editorial-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lux-mti__cta-actions {
      justify-content: flex-start;
    }
  }

  @media (max-width: 991px) {
    :root {
      --mti-page-gap: 30px;
      --mti-section-space: 54px;
    }

    .lux-mti__hero {
      padding-top: 104px;
    }

    .lux-mti__metrics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lux-mti__split-image {
      min-height: 440px;
    }
  }

  /* Mobile */
  @media (max-width: 767px) {
    :root {
      --mti-page-gap: 24px;
      --mti-section-space: 46px;
    }

    .lux-mti__container {
      width: min(var(--mti-container), calc(100% - var(--mti-page-gap)));
    }

    .lux-mti__hero {
      padding: 96px 0 34px;
    }

    .lux-mti__section {
      padding-block: var(--mti-section-space);
    }

    .lux-mti__hero-copy,
    .lux-mti__section-head,
    .lux-mti__split-copy,
    .lux-mti__cta-copy {
      text-align: center;
      justify-items: center;
    }

    .lux-mti__hero-copy h1 {
      font-size: clamp(30px, 9.3vw, 42px);
      line-height: 1.1;
      max-width: none;
    }

    .lux-mti__section-head h2,
    .lux-mti__split-copy h2,
    .lux-mti__cta-copy h2 {
      font-size: clamp(24px, 7.4vw, 34px);
      line-height: 1.16;
      max-width: none;
    }

    .lux-mti p,
    .lux-mti__section-head p,
    .lux-mti__hero-copy > p,
    .lux-mti__split-copy > p,
    .lux-mti__cta-copy p {
      font-size: 14px;
      line-height: 1.62;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .lux-mti__eyebrow {
      padding: 8px 12px;
      gap: 8px;
      font-size: 9.5px;
      letter-spacing: .075em;
      margin-left: auto;
      margin-right: auto;
      justify-content: center;
      text-align: center;
    }

    .lux-mti__eyebrow::before {
      width: 7px;
      height: 7px;
    }

    .lux-mti__hero-actions,
    .lux-mti__cta-actions {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: 11px;
    }

    .lux-mti__btn {
      width: 100%;
      min-width: 0;
      min-height: 50px;
      padding: 13px 16px;
      border-radius: 14px;
      font-size: 14px;
    }

    .lux-mti__micro {
      justify-content: center;
      gap: 8px;
    }

    .lux-mti__micro span {
      min-height: 34px;
      padding: 8px 10px;
      font-size: 11.5px;
      text-align: center;
    }

    .lux-mti__metrics,
    .lux-mti__trust,
    .lux-mti__editorial-grid,
    .lux-mti__process {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .lux-mti__metric {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 15px;
      border-radius: 18px;
      text-align: left;
    }

    .lux-mti__metric strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      margin: 0;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(106, 73, 242, .09);
      color: var(--mti-title);
      font-size: 13.5px;
      line-height: 1.15;
      text-align: center;
    }

    .lux-mti__metric p {
      margin: 0;
      text-align: left;
      font-size: 12.8px;
      line-height: 1.52;
    }

    .lux-mti__hero-image-wrap {
      min-height: auto;
      display: grid;
      gap: 14px;
      overflow: visible;
      background: transparent;
      box-shadow: none;
      border: 0;
      border-radius: 0;
    }

    .lux-mti__hero-image-wrap::after {
      display: none;
    }

    .lux-mti__hero-image-wrap > img {
      min-height: 340px;
      height: 340px;
      border-radius: 22px;
      object-fit: cover;
      box-shadow: var(--mti-shadow-lg);
      border: 1px solid rgba(106, 73, 242, 0.12);
      background: #efeaff;
    }

    .lux-mti__float-note,
    .lux-mti__float-mini {
      position: relative;
      inset: auto;
      left: auto;
      right: auto;
      top: auto;
      bottom: auto;
      width: 100%;
      max-width: none;
      padding: 14px;
      border-radius: 18px;
    }

    .lux-mti__float-mini {
      display: grid;
      gap: 0;
      overflow: hidden;
    }

    .lux-mti__float-mini img {
      aspect-ratio: 16 / 8.5;
    }

    .lux-mti__trust-item {
      min-height: auto;
      padding: 14px;
      border-radius: 16px;
      font-size: 13px;
    }

    .lux-mti__card,
    .lux-mti__point,
    .lux-mti__process-item,
    .lux-mti__cta-shell {
      border-radius: 20px;
    }

    .lux-mti__card-body {
      padding: 16px;
      text-align: center;
    }

    .lux-mti__card-media,
    .lux-mti__card-media img {
      min-height: 220px;
    }

    .lux-mti__card-tag {
      margin-left: auto;
      margin-right: auto;
      font-size: 10px;
    }

    .lux-mti__card-body h3 {
      font-size: 18px;
      line-height: 1.3;
    }

    .lux-mti__card-body p {
      text-align: center;
      font-size: 13.5px;
    }

    .lux-mti__split-image {
      min-height: 320px;
      border-radius: 20px;
    }

    .lux-mti__split-image img {
      min-height: 320px;
    }

    .lux-mti__point {
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      padding: 16px;
      text-align: left;
    }

    .lux-mti__point-no {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      font-size: 13px;
    }

    .lux-mti__point strong {
      margin: 0;
      font-size: 16px;
      line-height: 1.32;
      text-align: left;
    }

    .lux-mti__point p {
      grid-column: 1 / -1;
      margin-top: 2px;
      text-align: left;
    }

    .lux-mti__process-item {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 10px 12px;
      align-items: center;
      padding: 16px;
      text-align: left;
    }

    .lux-mti__process-no {
      width: 42px;
      height: 42px;
      margin: 0;
      border-radius: 14px;
      font-size: 13px;
    }

    .lux-mti__process-item h3 {
      margin: 0;
      font-size: 16.5px;
      line-height: 1.32;
      text-align: left;
    }

    .lux-mti__process-item p {
      grid-column: 1 / -1;
      margin-top: 2px;
      text-align: left;
      font-size: 13.5px;
    }

    .lux-mti__cta-shell {
      padding: 18px;
      gap: 18px;
    }
  }

  @media (max-width: 430px) {
    :root {
      --mti-page-gap: 22px;
      --mti-section-space: 42px;
    }

    .lux-mti__hero {
      padding-top: 88px;
      padding-bottom: 30px;
    }

    .lux-mti__hero-copy h1 {
      font-size: clamp(27px, 8.8vw, 36px);
    }

    .lux-mti__section-head h2,
    .lux-mti__split-copy h2,
    .lux-mti__cta-copy h2 {
      font-size: clamp(22px, 7vw, 30px);
    }

    .lux-mti__metric {
      grid-template-columns: 84px minmax(0, 1fr);
      padding: 13px;
      border-radius: 16px;
    }

    .lux-mti__metric strong {
      min-height: 40px;
      font-size: 12.5px;
    }

    .lux-mti__hero-image-wrap > img {
      height: 310px;
      min-height: 310px;
    }

    .lux-mti__card-body,
    .lux-mti__point,
    .lux-mti__process-item,
    .lux-mti__cta-shell,
    .lux-mti__float-note,
    .lux-mti__float-copy {
      padding: 14px;
      border-radius: 18px;
    }

    .lux-mti__point,
    .lux-mti__process-item {
      grid-template-columns: 40px minmax(0, 1fr);
      column-gap: 11px;
    }

    .lux-mti__point-no,
    .lux-mti__process-no {
      width: 40px;
      height: 40px;
      border-radius: 13px;
    }

    .lux-mti__point strong,
    .lux-mti__process-item h3 {
      font-size: 15.5px;
    }
  }

  @media (max-width: 360px) {
    :root {
      --mti-page-gap: 18px;
    }

    .lux-mti__hero {
      padding-top: 82px;
    }

    .lux-mti__hero-copy h1 {
      font-size: 25px;
    }

    .lux-mti__eyebrow {
      font-size: 8.5px;
      letter-spacing: .055em;
      padding: 7px 10px;
    }

    .lux-mti__metric {
      grid-template-columns: 1fr;
    }

    .lux-mti__metric strong {
      width: fit-content;
      justify-content: flex-start;
      text-align: left;
    }
  }

  @media (hover: none) {
    .lux-mti__btn:hover,
    .lux-mti__metric:hover,
    .lux-mti__trust-item:hover,
    .lux-mti__card:hover,
    .lux-mti__point:hover,
    .lux-mti__process-item:hover,
    .lux-mti__cta-shell:hover,
    .lux-mti__float-note:hover,
    .lux-mti__float-mini:hover {
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .lux-mti .reveal,
    .lux-mti__btn {
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
    }
  }

  /* =====================================================
     FINAL HERO PRIMARY BUTTON WHITE FIX
     Makes "Start Interview Practice" white on web and mobile.
  ===================================================== */

  .lux-mti .lux-mti__hero-actions .lux-mti__btn--primary {
    background: #ffffff !important;
    color: var(--mti-title) !important;
    border-color: rgba(106, 73, 242, 0.16) !important;
    box-shadow: 0 14px 30px rgba(50, 35, 111, 0.09) !important;
  }

  .lux-mti .lux-mti__hero-actions .lux-mti__btn--primary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14)) !important;
  }

  .lux-mti .lux-mti__hero-actions .lux-mti__btn--primary:hover {
    color: var(--mti-brand) !important;
    background: #ffffff !important;
    border-color: rgba(106, 73, 242, 0.22) !important;
    box-shadow: 0 18px 40px rgba(50, 35, 111, 0.12) !important;
  }

  @media (max-width: 767px) {
    .lux-mti .lux-mti__hero-actions .lux-mti__btn--primary {
      background: #ffffff !important;
      color: var(--mti-title) !important;
      border-color: rgba(106, 73, 242, 0.16) !important;
      box-shadow: 0 12px 26px rgba(50, 35, 111, 0.08) !important;
    }
  }

/*===================================================================================
    22. Mock Interviews CSS End
===================================================================================*/

/*===================================================================================
    23. Skill Certification Tests CSS Start
===================================================================================*/

  :root {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --bg-purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --slider-dots-color: #D4D2DD;
    --light-bg: #DFDAF3;

    --sct-bg: #f7f3ff;
    --sct-bg-soft: #fcfbff;
    --sct-surface: rgba(255, 255, 255, 0.94);
    --sct-surface-soft: rgba(255, 255, 255, 0.88);
    --sct-title: var(--dark-purple);
    --sct-text: rgba(62, 63, 102, 0.78);
    --sct-muted: rgba(62, 63, 102, 0.62);
    --sct-accent: var(--purple);
    --sct-accent-2: #8A70FF;
    --sct-accent-deep: #4D32C8;
    --sct-line: rgba(106, 73, 242, 0.12);
    --sct-line-strong: rgba(106, 73, 242, 0.18);
    --sct-shadow-sm: 0 10px 28px rgba(50, 35, 111, 0.06);
    --sct-shadow-md: 0 16px 42px rgba(50, 35, 111, 0.085);
    --sct-shadow-lg: 0 28px 72px rgba(50, 35, 111, 0.15);
    --sct-radius-xl: 32px;
    --sct-radius-lg: 26px;
    --sct-radius-md: 20px;
    --sct-radius-sm: 16px;
    --sct-wrap: 1160px;
    --sct-page-gap: 44px;
    --sct-space: clamp(46px, 4.8vw, 68px);
    --sct-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 6% 4%, rgba(106, 73, 242, 0.12), transparent 25%),
      radial-gradient(circle at 94% 8%, rgba(223, 218, 243, 0.92), transparent 26%),
      radial-gradient(circle at 4% 92%, rgba(106, 73, 242, 0.07), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fcfbff 44%, #f7f3ff 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--sct-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .sct-cert-luxe,
  .sct-cert-luxe * {
    box-sizing: border-box;
  }

  .sct-cert-luxe {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    color: var(--sct-text);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
      radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
      radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
  }

  .sct-cert-luxe::before,
  .sct-cert-luxe::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    opacity: .72;
  }

  .sct-cert-luxe::before {
    width: 300px;
    height: 300px;
    top: 92px;
    left: -120px;
    background: rgba(106, 73, 242, 0.13);
  }

  .sct-cert-luxe::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
  }

  .sct-cert-luxe img,
  .sct-cert-luxe svg {
    display: block;
    max-width: 100%;
  }

  .sct-cert-luxe a {
    color: inherit;
    text-decoration: none;
  }

  .sct-cert-luxe h1,
  .sct-cert-luxe h2,
  .sct-cert-luxe h3,
  .sct-cert-luxe h4,
  .sct-cert-luxe p {
    margin: 0;
    font-family: inherit;
  }

  .sct-cert-luxe .sct-wrap {
    width: min(var(--sct-wrap), calc(100% - var(--sct-page-gap)));
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .sct-cert-luxe .sct-section {
    padding-block: var(--sct-space);
    position: relative;
  }

  .sct-cert-luxe .sct-section.tight {
    padding-top: clamp(30px, 3.2vw, 44px);
  }

  .sct-cert-luxe .sct-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    min-height: auto;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--sct-accent);
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .sct-cert-luxe .sct-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sct-accent), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
  }

  .sct-cert-luxe .sct-title {
    margin: 0;
    color: var(--sct-title);
    font-weight: 700;
    letter-spacing: -0.04em;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .sct-cert-luxe .sct-copy,
  .sct-cert-luxe .sct-step p,
  .sct-cert-luxe .sct-band p,
  .sct-cert-luxe .sct-check span,
  .sct-cert-luxe .sct-image-note span,
  .sct-cert-luxe .sct-floating-panel p,
  .sct-cert-luxe .sct-cta-grid p,
  .sct-cert-luxe .sct-quote-card span,
  .sct-cert-luxe .sct-mini-glass span,
  .sct-cert-luxe .sct-metric span {
    margin: 0;
    color: var(--sct-text);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .sct-cert-luxe .sct-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
  }

  .sct-cert-luxe .sct-btn {
    position: relative;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    transition: var(--sct-transition);
    white-space: nowrap;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
  }

  .sct-cert-luxe .sct-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
    z-index: -1;
  }

  .sct-cert-luxe .sct-btn:hover {
    transform: translateY(-3px);
  }

  .sct-cert-luxe .sct-btn:hover::before {
    transform: scaleX(1);
  }

  .sct-cert-luxe .sct-btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--sct-accent), var(--sct-accent-2));
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.22);
  }

  .sct-cert-luxe .sct-btn-primary::before {
    background: linear-gradient(135deg, var(--sct-title), var(--sct-accent));
  }

  .sct-cert-luxe .sct-btn-primary:hover {
    color: #ffffff;
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.28);
  }

  .sct-cert-luxe .sct-btn-secondary {
    color: var(--sct-accent);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
  }

  .sct-cert-luxe .sct-btn-secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
  }

  .sct-cert-luxe .sct-btn-secondary:hover {
    color: var(--sct-accent);
    background: #ffffff;
  }

  /* HERO */
  .sct-cert-luxe .sct-hero {
    padding: clamp(116px, 8vw, 140px) 0 clamp(44px, 5vw, 64px);
  }

  .sct-cert-luxe .sct-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    gap: clamp(24px, 3vw, 34px);
    align-items: center;
  }

  .sct-cert-luxe .sct-hero-copy {
    display: grid;
    gap: 22px;
    align-content: center;
    max-width: 680px;
    min-width: 0;
  }

  .sct-cert-luxe .sct-hero-title {
    color: var(--sct-title);
    font-size: clamp(38px, 5.2vw, 62px);
    line-height: 1.06;
    letter-spacing: -0.052em;
    font-weight: 700;
    max-width: 720px;
  }

  .sct-cert-luxe .sct-hero-title span {
    color: var(--sct-accent);
  }

  .sct-cert-luxe .sct-hero-copy .sct-copy {
    max-width: 640px;
    font-size: 16px;
    line-height: 1.74;
  }

  .sct-cert-luxe .sct-hero-note {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding-top: 2px;
    color: var(--sct-text);
    font-size: 14px;
    line-height: 1.7;
  }

  .sct-cert-luxe .sct-hero-note strong {
    color: var(--sct-title);
    font-weight: 700;
  }

  .sct-cert-luxe .sct-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .sct-cert-luxe .sct-metric,
  .sct-cert-luxe .sct-band,
  .sct-cert-luxe .sct-check,
  .sct-cert-luxe .sct-image-note,
  .sct-cert-luxe .sct-floating-panel,
  .sct-cert-luxe .sct-mini-glass,
  .sct-cert-luxe .sct-band-item,
  .sct-cert-luxe .sct-step,
  .sct-cert-luxe .sct-quote-card,
  .sct-cert-luxe .sct-cta-shell {
    background: var(--sct-surface);
    border: 1px solid var(--sct-line);
    box-shadow: var(--sct-shadow-md);
    backdrop-filter: blur(14px);
    transition: var(--sct-transition);
  }

  .sct-cert-luxe .sct-metric:hover,
  .sct-cert-luxe .sct-band:hover,
  .sct-cert-luxe .sct-check:hover,
  .sct-cert-luxe .sct-image-note:hover,
  .sct-cert-luxe .sct-floating-panel:hover,
  .sct-cert-luxe .sct-mini-glass:hover,
  .sct-cert-luxe .sct-band-item:hover,
  .sct-cert-luxe .sct-step:hover,
  .sct-cert-luxe .sct-quote-card:hover,
  .sct-cert-luxe .sct-cta-shell:hover {
    transform: translateY(-4px);
    box-shadow: var(--sct-shadow-lg);
    border-color: rgba(106, 73, 242, 0.20);
  }

  .sct-cert-luxe .sct-metric {
    padding: 18px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .sct-cert-luxe .sct-metric strong {
    display: block;
    margin-bottom: 7px;
    color: var(--sct-title);
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .sct-cert-luxe .sct-metric span {
    display: block;
    font-size: 12.8px;
    line-height: 1.55;
  }

  .sct-cert-luxe .sct-hero-visual {
    position: relative;
    min-height: 620px;
    min-width: 0;
  }

  .sct-cert-luxe .sct-main-photo {
    position: absolute;
    inset: 18px 52px 72px 52px;
    border-radius: var(--sct-radius-xl);
    overflow: hidden;
    box-shadow: var(--sct-shadow-lg);
    background: #efeaff;
    border: 1px solid rgba(106, 73, 242, 0.12);
  }

  .sct-cert-luxe .sct-main-photo img,
  .sct-cert-luxe .sct-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sct-cert-luxe .sct-main-photo::after,
  .sct-cert-luxe .sct-image-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(23, 15, 60, 0.04), rgba(23, 15, 60, 0.20)),
      radial-gradient(circle at 0 100%, rgba(106, 73, 242, 0.16), transparent 42%);
    pointer-events: none;
  }

  .sct-cert-luxe .sct-floating-panel {
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(82%, 430px);
    padding: 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.90);
  }

  .sct-cert-luxe .sct-floating-panel h3 {
    margin: 0 0 8px;
    color: var(--sct-title);
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .sct-cert-luxe .sct-floating-panel p {
    font-size: 13.2px;
    line-height: 1.62;
  }

  .sct-cert-luxe .sct-proof-lines {
    display: grid;
    gap: 10px;
    margin-top: 16px;
  }

  .sct-cert-luxe .sct-proof-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    background: rgba(246, 244, 254, 0.74);
    border: 1px solid rgba(106, 73, 242, 0.10);
  }

  .sct-cert-luxe .sct-proof-row span {
    color: var(--sct-title);
    font-size: 13px;
    line-height: 1.48;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .sct-cert-luxe .sct-proof-tag {
    padding: 8px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--sct-accent), var(--sct-accent-2));
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(106, 73, 242, 0.18);
  }

  .sct-cert-luxe .sct-mini-glass {
    position: absolute;
    top: 0;
    right: 0;
    width: 220px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.90);
  }

  .sct-cert-luxe .sct-mini-glass small {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 10px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    color: var(--sct-accent);
    border: 1px solid rgba(106, 73, 242, 0.10);
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 800;
  }

  .sct-cert-luxe .sct-mini-glass strong {
    display: block;
    color: var(--sct-title);
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .sct-cert-luxe .sct-mini-glass span {
    display: block;
    font-size: 12.8px;
    line-height: 1.58;
  }

  /* BAND */
  .sct-cert-luxe .sct-band {
    padding: 28px;
    border-radius: var(--sct-radius-xl);
    background:
      radial-gradient(circle at 0% 0%, rgba(106, 73, 242, .10), transparent 34%),
      radial-gradient(circle at 100% 0%, rgba(223, 218, 243, .42), transparent 30%),
      linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,245,255,.94));
  }

  .sct-cert-luxe .sct-band-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, .9fr);
    gap: 24px;
    align-items: center;
  }

  .sct-cert-luxe .sct-band h2 {
    margin: 0 0 12px;
    color: var(--sct-title);
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.04em;
    font-weight: 700;
    max-width: 720px;
  }

  .sct-cert-luxe .sct-band p {
    max-width: 700px;
  }

  .sct-cert-luxe .sct-band-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .sct-cert-luxe .sct-band-item {
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.88);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .sct-cert-luxe .sct-band-item span {
    color: var(--sct-title);
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .sct-cert-luxe .sct-band-item strong {
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(106,73,242,0.08);
    border: 1px solid rgba(106,73,242,0.10);
    color: var(--sct-accent);
    font-size: 11px;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 800;
    white-space: nowrap;
  }

  /* SPLIT SECTIONS */
  .sct-cert-luxe .sct-split,
  .sct-cert-luxe .sct-proof-section {
    display: grid;
    grid-template-columns: minmax(340px, .96fr) minmax(0, 1.04fr);
    gap: clamp(22px, 3vw, 34px);
    align-items: center;
  }

  .sct-cert-luxe .sct-split.reverse {
    grid-template-columns: minmax(0, 1.04fr) minmax(340px, .96fr);
  }

  .sct-cert-luxe .sct-content {
    display: grid;
    gap: 18px;
    min-width: 0;
  }

  .sct-cert-luxe .sct-content .sct-title,
  .sct-cert-luxe .sct-flow-head .sct-title {
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
    max-width: 780px;
  }

  .sct-cert-luxe .sct-checklist {
    display: grid;
    gap: 12px;
    margin-top: 4px;
  }

  .sct-cert-luxe .sct-check {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.82);
  }

  .sct-cert-luxe .sct-check i {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(106,73,242,0.14), rgba(223,218,243,0.96));
    color: var(--sct-accent);
    font-size: 15px;
    margin: 0;
  }

  .sct-cert-luxe .sct-check span {
    display: block;
    align-self: center;
    color: var(--sct-text);
    font-size: 14px;
    line-height: 1.62;
    font-weight: 500;
  }

  .sct-cert-luxe .sct-image-block {
    position: relative;
    min-height: 520px;
    min-width: 0;
  }

  .sct-cert-luxe .sct-image-card {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--sct-radius-xl);
    box-shadow: var(--sct-shadow-lg);
    background: #efeaff;
    border: 1px solid rgba(106, 73, 242, 0.12);
  }

  .sct-cert-luxe .sct-image-note {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    width: min(80%, 300px);
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.90);
  }

  .sct-cert-luxe .sct-image-note strong {
    display: block;
    color: var(--sct-title);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
  }

  .sct-cert-luxe .sct-image-note span {
    display: block;
    font-size: 13px;
    line-height: 1.6;
  }

  /* FLOW */
  .sct-cert-luxe .sct-flow {
    display: grid;
    gap: 30px;
  }

  .sct-cert-luxe .sct-flow-head {
    display: grid;
    gap: 16px;
    max-width: 780px;
  }

  .sct-cert-luxe .sct-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    position: relative;
  }

  .sct-cert-luxe .sct-timeline::before {
    display: none;
  }

  .sct-cert-luxe .sct-step {
    position: relative;
    overflow: hidden;
    z-index: 1;
    min-width: 0;
    padding: 22px;
    border-radius: var(--sct-radius-lg);
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255,255,255,.90);
  }

  .sct-cert-luxe .sct-step::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(106,73,242,0.035), transparent 52%, rgba(106,73,242,0.06));
    pointer-events: none;
  }

  .sct-cert-luxe .sct-step-badge {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(106,73,242,0.14), rgba(223,218,243,0.96));
    color: var(--sct-accent);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
    box-shadow: none;
  }

  .sct-cert-luxe .sct-step h3,
  .sct-cert-luxe .sct-step p,
  .sct-cert-luxe .sct-step small {
    position: relative;
    z-index: 1;
  }

  .sct-cert-luxe .sct-step h3 {
    margin: 0 0 8px;
    color: var(--sct-title);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .sct-cert-luxe .sct-step p {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.6;
  }

  .sct-cert-luxe .sct-step small {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(106,73,242,0.08);
    border: 1px solid rgba(106,73,242,0.10);
    color: var(--sct-accent);
    font-size: 10.8px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  /* PROOF */
  .sct-cert-luxe .sct-quote-wrap {
    display: grid;
    gap: 16px;
  }

  .sct-cert-luxe .sct-quote-card {
    padding: 28px;
    border-radius: var(--sct-radius-xl);
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255,255,255,.90);
  }

  .sct-cert-luxe .sct-quote-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: rgba(106, 73, 242, 0.10);
    color: var(--sct-accent);
    font-size: 20px;
    margin-bottom: 16px;
  }

  .sct-cert-luxe .sct-quote-card p {
    margin: 0 0 18px;
    color: var(--sct-title);
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.62;
    font-weight: 600;
  }

  .sct-cert-luxe .sct-quote-card strong {
    display: block;
    color: var(--sct-title);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
  }

  .sct-cert-luxe .sct-quote-card span {
    display: block;
    margin-top: 4px;
    color: var(--sct-muted);
    font-size: 13px;
    line-height: 1.6;
  }

  .sct-cert-luxe .sct-proof-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  /* CTA */
  .sct-cert-luxe .sct-cta {
    padding-top: var(--sct-space);
  }

  .sct-cert-luxe .sct-cta-shell {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 3vw, 34px);
    border-radius: var(--sct-radius-xl);
    background:
      radial-gradient(circle at right top, rgba(255,255,255,0.14), transparent 28%),
      linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
    color: #ffffff;
  }

  .sct-cert-luxe .sct-cta-shell::before,
  .sct-cert-luxe .sct-cta-shell::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    opacity: .24;
  }

  .sct-cert-luxe .sct-cta-shell::before {
    width: 300px;
    height: 300px;
    right: -100px;
    top: -100px;
    background: radial-gradient(circle, rgba(255,255,255,0.56), rgba(255,255,255,0));
  }

  .sct-cert-luxe .sct-cta-shell::after {
    width: 240px;
    height: 240px;
    left: -90px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(255,255,255,0.30), rgba(255,255,255,0));
  }

  .sct-cert-luxe .sct-cta-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
  }

  .sct-cert-luxe .sct-cta-grid .sct-eyebrow {
    color: #ffffff;
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.16);
    box-shadow: none;
  }

  .sct-cert-luxe .sct-cta-grid .sct-eyebrow::before {
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.12);
  }

  .sct-cert-luxe .sct-cta-grid h2 {
    margin: 18px 0 12px;
    color: #ffffff;
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.04em;
    max-width: 760px;
    text-wrap: balance;
  }

  .sct-cert-luxe .sct-cta-grid p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.72;
  }

  .sct-cert-luxe .sct-cta-grid .sct-actions {
    justify-content: flex-end;
  }

  .sct-cert-luxe .sct-cta-grid .sct-btn-primary {
    background: #ffffff;
    color: var(--sct-title);
    box-shadow: 0 18px 38px rgba(0,0,0,0.10);
  }

  .sct-cert-luxe .sct-cta-grid .sct-btn-primary:hover {
    color: var(--sct-title);
    background: #f6f2ff;
  }

  .sct-cert-luxe .sct-cta-grid .sct-btn-secondary {
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    border-color: rgba(255,255,255,0.22);
    box-shadow: none;
  }

  .sct-cert-luxe .sct-cta-grid .sct-btn-secondary:hover {
    background: rgba(255,255,255,0.18);
    color: #ffffff;
  }

  .sct-cert-luxe .sct-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s ease;
  }

  .sct-cert-luxe .sct-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (max-width: 1180px) {
    :root {
      --sct-page-gap: 34px;
      --sct-space: 58px;
    }

    .sct-cert-luxe .sct-hero-grid,
    .sct-cert-luxe .sct-split,
    .sct-cert-luxe .sct-split.reverse,
    .sct-cert-luxe .sct-proof-section,
    .sct-cert-luxe .sct-band-grid,
    .sct-cert-luxe .sct-cta-grid {
      grid-template-columns: 1fr;
    }

    .sct-cert-luxe .sct-hero-copy {
      max-width: 900px;
    }

    .sct-cert-luxe .sct-hero-visual {
      max-width: 820px;
      min-height: 580px;
    }

    .sct-cert-luxe .sct-main-photo {
      inset: 18px 52px 72px 52px;
    }

    .sct-cert-luxe .sct-timeline {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sct-cert-luxe .sct-cta-grid .sct-actions {
      justify-content: flex-start;
    }
  }

  @media (max-width: 991px) {
    :root {
      --sct-page-gap: 30px;
      --sct-space: 54px;
    }

    .sct-cert-luxe .sct-hero {
      padding-top: 104px;
    }

    .sct-cert-luxe .sct-band-rail,
    .sct-cert-luxe .sct-proof-stats,
    .sct-cert-luxe .sct-metrics {
      grid-template-columns: 1fr;
    }

    .sct-cert-luxe .sct-image-block {
      min-height: 440px;
    }
  }

  @media (max-width: 767px) {
    :root {
      --sct-page-gap: 24px;
      --sct-space: 46px;
    }

    .sct-cert-luxe .sct-wrap {
      width: min(var(--sct-wrap), calc(100% - var(--sct-page-gap)));
    }

    .sct-cert-luxe .sct-section {
      padding-block: var(--sct-space);
    }

    .sct-cert-luxe .sct-hero {
      padding: 96px 0 34px;
    }

    .sct-cert-luxe .sct-hero-copy,
    .sct-cert-luxe .sct-content,
    .sct-cert-luxe .sct-flow-head,
    .sct-cert-luxe .sct-band-grid > div:first-child,
    .sct-cert-luxe .sct-cta-grid > div:first-child {
      text-align: center;
      justify-items: center;
    }

    .sct-cert-luxe .sct-hero-title {
      font-size: clamp(30px, 9.3vw, 42px);
      line-height: 1.1;
      max-width: none;
    }

    .sct-cert-luxe .sct-content .sct-title,
    .sct-cert-luxe .sct-flow-head .sct-title,
    .sct-cert-luxe .sct-band h2,
    .sct-cert-luxe .sct-cta-grid h2 {
      font-size: clamp(24px, 7.4vw, 34px);
      line-height: 1.16;
      max-width: none;
      text-align: center;
    }

    .sct-cert-luxe .sct-copy,
    .sct-cert-luxe .sct-hero-copy .sct-copy,
    .sct-cert-luxe .sct-band p,
    .sct-cert-luxe .sct-cta-grid p {
      font-size: 14px;
      line-height: 1.62;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .sct-cert-luxe .sct-eyebrow {
      padding: 8px 12px;
      gap: 8px;
      font-size: 9.5px;
      letter-spacing: .075em;
      margin-left: auto;
      margin-right: auto;
      justify-content: center;
      text-align: center;
    }

    .sct-cert-luxe .sct-eyebrow::before {
      width: 7px;
      height: 7px;
    }

    .sct-cert-luxe .sct-actions,
    .sct-cert-luxe .sct-cta-grid .sct-actions {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: 11px;
    }

    .sct-cert-luxe .sct-btn {
      width: 100%;
      min-width: 0;
      min-height: 50px;
      padding: 13px 16px;
      border-radius: 14px;
      font-size: 14px;
    }

    .sct-cert-luxe .sct-hero-note {
      justify-content: center;
      text-align: center;
      font-size: 13.5px;
    }

    .sct-cert-luxe .sct-metric {
      display: grid;
      grid-template-columns: 82px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 15px;
      border-radius: 18px;
      text-align: left;
    }

    .sct-cert-luxe .sct-metric strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      margin: 0;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(106, 73, 242, .09);
      color: var(--sct-title);
      font-size: 14px;
      line-height: 1.15;
      text-align: center;
    }

    .sct-cert-luxe .sct-metric span {
      font-size: 12.8px;
      line-height: 1.52;
      text-align: left;
    }

    .sct-cert-luxe .sct-hero-visual {
      min-height: auto;
      display: grid;
      gap: 14px;
    }

    .sct-cert-luxe .sct-main-photo,
    .sct-cert-luxe .sct-floating-panel,
    .sct-cert-luxe .sct-mini-glass,
    .sct-cert-luxe .sct-image-note {
      position: relative;
      inset: auto;
      left: auto;
      right: auto;
      bottom: auto;
      top: auto;
      width: 100%;
      max-width: none;
    }

    .sct-cert-luxe .sct-main-photo {
      height: 340px;
      border-radius: 22px;
    }

    .sct-cert-luxe .sct-floating-panel,
    .sct-cert-luxe .sct-mini-glass,
    .sct-cert-luxe .sct-image-note,
    .sct-cert-luxe .sct-band,
    .sct-cert-luxe .sct-quote-card,
    .sct-cert-luxe .sct-cta-shell {
      padding: 16px;
      border-radius: 20px;
    }

    .sct-cert-luxe .sct-proof-row {
      grid-template-columns: 1fr;
      text-align: center;
    }

    .sct-cert-luxe .sct-proof-tag {
      justify-self: center;
    }

    .sct-cert-luxe .sct-band-rail {
      gap: 10px;
    }

    .sct-cert-luxe .sct-band-item {
      align-items: center;
      text-align: center;
    }

    .sct-cert-luxe .sct-band-item strong {
      justify-self: center;
    }

    .sct-cert-luxe .sct-image-block {
      min-height: auto;
      display: grid;
      gap: 14px;
    }

    .sct-cert-luxe .sct-image-card {
      position: relative;
      min-height: 320px;
      border-radius: 20px;
    }

    .sct-cert-luxe .sct-check {
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 12px;
      padding: 13px;
      border-radius: 16px;
      text-align: left;
    }

    .sct-cert-luxe .sct-check i {
      width: 38px;
      height: 38px;
      border-radius: 13px;
    }

    .sct-cert-luxe .sct-check span {
      font-size: 13.5px;
      line-height: 1.58;
      text-align: left;
    }

    .sct-cert-luxe .sct-timeline {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .sct-cert-luxe .sct-step {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 10px 12px;
      align-items: center;
      padding: 16px;
      border-radius: 20px;
      text-align: left;
    }

    .sct-cert-luxe .sct-step-badge {
      width: 42px;
      height: 42px;
      margin: 0;
      border-radius: 14px;
      font-size: 13px;
    }

    .sct-cert-luxe .sct-step h3 {
      margin: 0;
      font-size: 16.5px;
      line-height: 1.32;
      text-align: left;
    }

    .sct-cert-luxe .sct-step p,
    .sct-cert-luxe .sct-step small {
      grid-column: 1 / -1;
    }

    .sct-cert-luxe .sct-step p {
      margin-top: 2px;
      font-size: 13.5px;
      text-align: left;
    }

    .sct-cert-luxe .sct-step small {
      justify-self: start;
      white-space: normal;
    }

    .sct-cert-luxe .sct-quote-mark {
      margin-left: auto;
      margin-right: auto;
    }

    .sct-cert-luxe .sct-quote-card {
      text-align: center;
    }

    .sct-cert-luxe .sct-quote-card p {
      font-size: 16px;
      line-height: 1.62;
    }

    .sct-cert-luxe .sct-cta {
      padding-top: var(--sct-space);
    }

    .sct-cert-luxe .sct-cta-grid {
      gap: 18px;
    }
  }

  @media (max-width: 430px) {
    :root {
      --sct-page-gap: 22px;
      --sct-space: 42px;
    }

    .sct-cert-luxe .sct-hero {
      padding-top: 88px;
      padding-bottom: 30px;
    }

    .sct-cert-luxe .sct-hero-title {
      font-size: clamp(27px, 8.8vw, 36px);
    }

    .sct-cert-luxe .sct-content .sct-title,
    .sct-cert-luxe .sct-flow-head .sct-title,
    .sct-cert-luxe .sct-band h2,
    .sct-cert-luxe .sct-cta-grid h2 {
      font-size: clamp(22px, 7vw, 30px);
    }

    .sct-cert-luxe .sct-main-photo {
      height: 320px;
    }

    .sct-cert-luxe .sct-metric {
      grid-template-columns: 74px minmax(0, 1fr);
      padding: 13px;
      border-radius: 16px;
    }

    .sct-cert-luxe .sct-metric strong {
      min-height: 40px;
      font-size: 13px;
    }

    .sct-cert-luxe .sct-floating-panel,
    .sct-cert-luxe .sct-mini-glass,
    .sct-cert-luxe .sct-image-note,
    .sct-cert-luxe .sct-band,
    .sct-cert-luxe .sct-quote-card,
    .sct-cert-luxe .sct-cta-shell,
    .sct-cert-luxe .sct-step {
      padding: 14px;
      border-radius: 18px;
    }

    .sct-cert-luxe .sct-step {
      grid-template-columns: 40px minmax(0, 1fr);
      column-gap: 11px;
    }

    .sct-cert-luxe .sct-step-badge {
      width: 40px;
      height: 40px;
      border-radius: 13px;
    }

    .sct-cert-luxe .sct-step h3 {
      font-size: 15.5px;
    }
  }

  @media (max-width: 360px) {
    :root {
      --sct-page-gap: 18px;
    }

    .sct-cert-luxe .sct-hero {
      padding-top: 82px;
    }

    .sct-cert-luxe .sct-hero-title {
      font-size: 25px;
    }

    .sct-cert-luxe .sct-eyebrow {
      font-size: 8.5px;
      letter-spacing: .055em;
      padding: 7px 10px;
    }

    .sct-cert-luxe .sct-metric {
      grid-template-columns: 1fr;
    }

    .sct-cert-luxe .sct-metric strong {
      width: fit-content;
      justify-content: flex-start;
      text-align: left;
    }
  }

  @media (hover: none) {
    .sct-cert-luxe .sct-btn:hover,
    .sct-cert-luxe .sct-metric:hover,
    .sct-cert-luxe .sct-band:hover,
    .sct-cert-luxe .sct-check:hover,
    .sct-cert-luxe .sct-image-note:hover,
    .sct-cert-luxe .sct-floating-panel:hover,
    .sct-cert-luxe .sct-mini-glass:hover,
    .sct-cert-luxe .sct-band-item:hover,
    .sct-cert-luxe .sct-step:hover,
    .sct-cert-luxe .sct-quote-card:hover,
    .sct-cert-luxe .sct-cta-shell:hover {
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sct-cert-luxe *,
    .sct-cert-luxe *::before,
    .sct-cert-luxe *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }

    .sct-cert-luxe .sct-reveal {
      opacity: 1;
      transform: none;
    }
  }

/*===================================================================================
    23. Skill Certification Tests CSS End
===================================================================================*/


/*===================================================================================
    24. Assessment Platform Overview CSS Start
===================================================================================*/

.ap-overview-page {
    --ap-primary: #6A49F2;
    --ap-primary-dark: #4D32C8;
    --ap-primary-soft: rgba(106, 73, 242, 0.10);
    --ap-primary-soft-2: rgba(106, 73, 242, 0.16);
    --ap-ink: #171631;
    --ap-title: #21194F;
    --ap-text: #5A5B7B;
    --ap-muted: #7B7C99;
    --ap-line: rgba(106, 73, 242, 0.14);
    --ap-line-strong: rgba(106, 73, 242, 0.22);
    --ap-white: #ffffff;
    --ap-bg: #fbfaff;
    --ap-soft-bg: #f6f3ff;
    --ap-card: rgba(255, 255, 255, 0.92);
    --ap-shadow: 0 18px 48px rgba(35, 28, 86, 0.10);
    --ap-shadow-hover: 0 26px 70px rgba(35, 28, 86, 0.16);
    --ap-radius-xl: 32px;
    --ap-radius-lg: 24px;
    --ap-radius-md: 18px;
    --ap-container: 1180px;
    --ap-gap: clamp(18px, 3vw, 30px);
    position: relative;
    overflow: hidden;
    min-width: 320px;
    background:
        radial-gradient(circle at 8% 2%, rgba(106, 73, 242, 0.12), transparent 28%),
        radial-gradient(circle at 92% 8%, rgba(196, 185, 255, 0.26), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fbfaff 44%, #f7f4ff 100%);
    color: var(--ap-text);
    font-family: "Inter", "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    isolation: isolate;
}

.ap-overview-page,
.ap-overview-page * {
    box-sizing: border-box;
}

.ap-overview-page::before,
.ap-overview-page::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(70px);
    opacity: 0.55;
    z-index: -1;
}

.ap-overview-page::before {
    top: 90px;
    left: -190px;
    background: rgba(106, 73, 242, 0.18);
}

.ap-overview-page::after {
    top: 720px;
    right: -210px;
    background: rgba(196, 185, 255, 0.32);
}

.ap-overview-page .container {
    width: min(var(--ap-container), calc(100% - clamp(32px, 5vw, 72px)));
    max-width: var(--ap-container);
    margin-inline: auto;
    padding-inline: 0;
}

.ap-overview-page a {
    text-decoration: none;
}

.ap-overview-page h1,
.ap-overview-page h2,
.ap-overview-page h3,
.ap-overview-page p {
    margin: 0;
}

.ap-overview-page h1,
.ap-overview-page h2,
.ap-overview-page h3 {
    color: var(--ap-title);
    font-weight: 600;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.ap-overview-page p {
    color: var(--ap-text);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
}

/* Hero */
.ap-overview-page .hero {
    position: relative;
    padding: clamp(86px, 9vw, 126px) 0 clamp(58px, 7vw, 92px);
}

.ap-overview-page .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(440px, 1.05fr);
    gap: clamp(32px, 5vw, 74px);
    align-items: center;
}

.ap-overview-page .hero-copy {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.ap-overview-page .eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 34px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--ap-line);
    background: rgba(106, 73, 242, 0.08);
    color: var(--ap-primary);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.07);
}

.ap-overview-page .eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ap-primary), #15BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.09);
}

.ap-overview-page .hero h1 {
    max-width: 690px;
    font-size: clamp(42px, 3.4vw, 74px);
    line-height: 0.98;
}

.ap-overview-page .hero h1 span {
    display: block;
    color: var(--ap-primary);
}

.ap-overview-page .hero-copy > p {
    max-width: 680px;
    font-size: 16px;
    line-height: 1.76;
}

.ap-overview-page .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    align-items: center;
    margin-top: 4px;
}

.ap-overview-page .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    min-width: 158px;
    padding: 13px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.ap-overview-page .btn:hover {
    transform: translateY(-3px);
}

.ap-overview-page .btn-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--ap-primary) 0%, #8062ff 100%);
    box-shadow: 0 16px 36px rgba(106, 73, 242, 0.25);
}

.ap-overview-page .btn-primary:hover {
    box-shadow: 0 22px 48px rgba(106, 73, 242, 0.34);
}

.ap-overview-page .btn-secondary {
    color: var(--ap-primary) !important;
    background: rgba(255, 255, 255, 0.86);
    border-color: var(--ap-line-strong);
    box-shadow: 0 14px 32px rgba(35, 28, 86, 0.08);
    backdrop-filter: blur(12px);
}

.ap-overview-page .btn-secondary:hover {
    background: #ffffff;
    border-color: rgba(106, 73, 242, 0.32);
    box-shadow: 0 20px 42px rgba(35, 28, 86, 0.12);
}

.ap-overview-page .hero-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.ap-overview-page .meta-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--ap-line);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.09), transparent 36%),
        rgba(255, 255, 255, 0.80);
    box-shadow: 0 14px 34px rgba(35, 28, 86, 0.07);
    backdrop-filter: blur(14px);
}

.ap-overview-page .meta-card strong {
    display: block;
    margin-bottom: 7px;
    color: var(--ap-title);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 600;
}

.ap-overview-page .meta-card span {
    display: block;
    color: var(--ap-muted);
    font-size: 12.6px;
    line-height: 1.58;
    font-weight: 500;
}

/* Hero dashboard */
.ap-overview-page .hero-visual {
    position: relative;
    min-width: 0;
}

.ap-overview-page .hero-visual::before {
    content: "";
    position: absolute;
    inset: 10% -6% -7% 12%;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.18);
    filter: blur(58px);
    z-index: -1;
}

.ap-overview-page .dashboard-shell {
    position: relative;
    overflow: hidden;
    padding: clamp(18px, 2vw, 26px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(circle at 18% 0%, rgba(126, 98, 255, 0.38), transparent 32%),
        linear-gradient(145deg, #11102e 0%, #191741 58%, #0d0d25 100%);
    color: #ffffff;
    box-shadow: 0 34px 90px rgba(16, 13, 52, 0.30);
}

.ap-overview-page .dashboard-shell::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    top: -52px;
    right: -48px;
    border-radius: 50%;
    background: rgba(126, 98, 255, 0.24);
    filter: blur(6px);
}

.ap-overview-page .dashboard-top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.ap-overview-page .dashboard-title strong {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 600;
}

.ap-overview-page .dashboard-title span,
.ap-overview-page .metric-label {
    display: block;
    color: rgba(255, 255, 255, 0.68);
    font-size: 12.8px;
    line-height: 1.55;
    font-weight: 400;
}

.ap-overview-page .pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.ap-overview-page .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 500;
}

.ap-overview-page .dashboard-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ap-overview-page .panel {
    min-width: 0;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
}

.ap-overview-page .panel h3 {
    margin-bottom: 6px;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.ap-overview-page .chart {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 190px;
    margin-top: 22px;
    padding: 18px 14px 30px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
}

.ap-overview-page .chart-bar {
    position: relative;
    flex: 1;
    min-height: 36px;
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(180deg, #a99cff 0%, #6A49F2 100%);
    box-shadow: 0 12px 22px rgba(106, 73, 242, 0.22);
}

.ap-overview-page .chart-bar::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    bottom: -23px;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.62);
    font-size: 10.5px;
    line-height: 1;
    font-weight: 500;
}

.ap-overview-page .progress-list {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.ap-overview-page .progress-item strong {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 500;
}

.ap-overview-page .progress-track {
    overflow: hidden;
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.ap-overview-page .progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8f78ff, #ffffff);
    box-shadow: 0 0 22px rgba(143, 120, 255, 0.50);
}

/* Sections */
.ap-overview-page .section {
    position: relative;
    padding: clamp(62px, 8vw, 104px) 0;
}

.ap-overview-page .section.light {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.52), rgba(246,243,255,0.70));
    border-top: 1px solid rgba(106, 73, 242, 0.08);
    border-bottom: 1px solid rgba(106, 73, 242, 0.08);
}

.ap-overview-page .section-heading {
    display: grid;
    gap: 14px;
    max-width: 810px;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.ap-overview-page .section-heading h2 {
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.1;
}

.ap-overview-page .section-heading p {
    max-width: 760px;
    font-size: 15.8px;
}

.ap-overview-page .overview-grid,
.ap-overview-page .assessment-grid {
    display: grid;
    gap: clamp(18px, 2vw, 24px);
}

.ap-overview-page .overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ap-overview-page .assessment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ap-overview-page .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    padding: clamp(20px, 2.2vw, 28px);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-lg);
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 36%),
        var(--ap-card);
    box-shadow: var(--ap-shadow);
    overflow: hidden;
    backdrop-filter: blur(16px);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.ap-overview-page .card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), transparent 48%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.ap-overview-page .card:hover {
    transform: translateY(-6px);
    border-color: rgba(106, 73, 242, 0.28);
    box-shadow: var(--ap-shadow-hover);
    background: #ffffff;
}

.ap-overview-page .card:hover::before {
    opacity: 1;
}

.ap-overview-page .icon-wrap {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.14), rgba(246, 243, 255, 0.95));
    color: var(--ap-primary);
    font-size: 15px;
    line-height: 1;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(106, 73, 242, 0.14), 0 12px 24px rgba(106, 73, 242, 0.11);
}

.ap-overview-page .card h3 {
    position: relative;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.3;
}

.ap-overview-page .card p {
    position: relative;
    flex: 1 1 auto;
    font-size: 14.6px;
    line-height: 1.68;
}

.ap-overview-page .info-tags {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.ap-overview-page .info-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 7px 10px;
    border: 1px solid rgba(106, 73, 242, 0.12);
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.07);
    color: var(--ap-primary-dark);
    font-size: 11.8px;
    line-height: 1.2;
    font-weight: 500;
}

/* Final CTA section */
.ap-overview-page #final-cta {
    padding-bottom: clamp(78px, 9vw, 120px);
}

.ap-overview-page #final-cta .section-heading {
    max-width: none;
    margin-bottom: 0;
    padding: clamp(26px, 4vw, 46px);
    border-radius: var(--ap-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background:
        radial-gradient(circle at 86% 0, rgba(255, 255, 255, 0.20), transparent 30%),
        linear-gradient(135deg, #5E3FF0 0%, #7A5CFF 58%, #22175E 100%);
    box-shadow: 0 28px 80px rgba(50, 35, 111, 0.20);
    overflow: hidden;
}

.ap-overview-page #final-cta .eyebrow {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

.ap-overview-page #final-cta .eyebrow::before {
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.14);
}

.ap-overview-page #final-cta h2,
.ap-overview-page #final-cta p {
    color: #ffffff;
}

.ap-overview-page #final-cta p {
    color: rgba(255, 255, 255, 0.82);
}

.ap-overview-page #final-cta .btn-primary {
    color: var(--ap-primary) !important;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(17, 16, 46, 0.18);
}

.ap-overview-page #final-cta .btn-secondary {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

/* Reveal */
.ap-overview-page .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.70s ease, transform 0.70s ease;
    will-change: opacity, transform;
}

.ap-overview-page .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Laptop */
@media (max-width: 1199px) {
    .ap-overview-page .hero-grid {
        grid-template-columns: 1fr;
    }

    .ap-overview-page .hero-visual {
        max-width: 840px;
    }

    .ap-overview-page .overview-grid,
    .ap-overview-page .assessment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Tablet */
@media (max-width: 991px) {
    .ap-overview-page .container {
        width: min(var(--ap-container), calc(100% - 36px));
    }

    .ap-overview-page .hero {
        padding-top: 74px;
    }

    .ap-overview-page .hero-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ap-overview-page .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .ap-overview-page .chart {
        height: 160px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .ap-overview-page .container {
        width: min(var(--ap-container), calc(100% - 28px));
    }

    .ap-overview-page .hero {
        padding: 58px 0 44px;
    }

    .ap-overview-page .hero-grid {
        gap: 28px;
    }

    .ap-overview-page .hero-copy,
    .ap-overview-page .section-heading {
        text-align: center;
        justify-items: center;
    }

    .ap-overview-page .hero h1 {
        font-size: clamp(32px, 10vw, 44px);
        line-height: 1.06;
    }

    .ap-overview-page .section-heading h2 {
        font-size: clamp(25px, 8vw, 34px);
        line-height: 1.14;
    }

    .ap-overview-page .hero-copy > p,
    .ap-overview-page .section-heading p,
    .ap-overview-page p {
        font-size: 14px;
        line-height: 1.62;
    }

    .ap-overview-page .eyebrow {
        min-height: 31px;
        padding: 7px 12px;
        font-size: 9.5px;
        letter-spacing: 0.07em;
    }

    .ap-overview-page .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 11px;
    }

    .ap-overview-page .btn {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 12px 16px;
        border-radius: 14px;
        font-size: 13.5px;
    }

    .ap-overview-page .hero-meta,
    .ap-overview-page .overview-grid,
    .ap-overview-page .assessment-grid {
        grid-template-columns: 1fr;
    }

    .ap-overview-page .meta-card {
        display: grid;
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 14px;
        text-align: left;
        border-radius: 18px;
    }

    .ap-overview-page .meta-card strong {
        display: grid;
        place-items: center;
        min-height: 42px;
        margin: 0;
        padding: 8px 10px;
        border-radius: 14px;
        background: rgba(106, 73, 242, 0.08);
        font-size: 14px;
        text-align: center;
    }

    .ap-overview-page .meta-card span {
        font-size: 12.4px;
        line-height: 1.48;
    }

    .ap-overview-page .dashboard-shell {
        padding: 15px;
        border-radius: 22px;
    }

    .ap-overview-page .dashboard-top {
        display: grid;
        gap: 12px;
    }

    .ap-overview-page .dashboard-title strong,
    .ap-overview-page .panel h3 {
        font-size: 15px;
    }

    .ap-overview-page .pills {
        justify-content: flex-start;
    }

    .ap-overview-page .panel {
        padding: 14px;
        border-radius: 18px;
    }

    .ap-overview-page .chart {
        height: 135px;
        gap: 8px;
        margin-top: 16px;
        padding: 14px 10px 28px;
    }

    .ap-overview-page .section {
        padding: 48px 0;
    }

    .ap-overview-page .section-heading {
        margin-bottom: 24px;
    }

    .ap-overview-page .card {
        padding: 18px;
        border-radius: 20px;
        text-align: left;
    }

    .ap-overview-page .icon-wrap {
        width: 46px;
        height: 46px;
        margin-bottom: 14px;
        border-radius: 15px;
        font-size: 13px;
    }

    .ap-overview-page .card h3 {
        font-size: 17px;
    }

    .ap-overview-page .card p {
        font-size: 13.8px;
        line-height: 1.62;
    }

    .ap-overview-page .info-tags {
        margin-top: 16px;
    }

    .ap-overview-page #final-cta .section-heading {
        padding: 20px;
        border-radius: 22px;
    }
}

/* Small Mobile */
@media (max-width: 430px) {
    .ap-overview-page .container {
        width: min(var(--ap-container), calc(100% - 22px));
    }

    .ap-overview-page .hero h1 {
        font-size: 31px;
    }

    .ap-overview-page .section-heading h2 {
        font-size: 24px;
    }

    .ap-overview-page .dashboard-shell,
    .ap-overview-page .card,
    .ap-overview-page .meta-card,
    .ap-overview-page #final-cta .section-heading {
        border-radius: 18px;
    }

    .ap-overview-page .meta-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ap-overview-page .meta-card strong {
        width: fit-content;
        margin-inline: auto;
    }

    .ap-overview-page .chart {
        height: 120px;
    }

    .ap-overview-page .progress-item strong {
        font-size: 11.8px;
    }
}

@media (max-width: 360px) {
    .ap-overview-page .hero h1 {
        font-size: 28px;
    }

    .ap-overview-page .eyebrow {
        font-size: 8.5px;
        padding-inline: 10px;
    }

    .ap-overview-page .info-tags span {
        font-size: 11px;
    }
}

@media (hover: none) {
    .ap-overview-page .btn:hover,
    .ap-overview-page .card:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ap-overview-page .reveal,
    .ap-overview-page .btn,
    .ap-overview-page .card {
        transition: none !important;
        transform: none !important;
    }

    .ap-overview-page .reveal {
        opacity: 1 !important;
    }
}

/*===================================================================================
    24. Assessment Platform Overview CSS End
===================================================================================*/



/*===================================================================================
    25. Online Assessment Software CSS Start
===================================================================================*/

:root {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --bg-purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --slider-dots-color: #D4D2DD;
    --light-bg: #DFDAF3;
}

html {
    scroll-behavior: smooth;
}

.oas-page,
.oas-page *,
.oas-page *::before,
.oas-page *::after {
    box-sizing: border-box;
}

.oas-page {
    --oas-soft-border: rgba(106, 73, 242, 0.12);
    --oas-medium-border: rgba(106, 73, 242, 0.18);
    --oas-dark-border: rgba(50, 35, 111, 0.12);
    --oas-card-shadow: 0 16px 42px rgba(50, 35, 111, 0.085);
    --oas-card-shadow-hover: 0 24px 58px rgba(50, 35, 111, 0.13);
    --oas-shadow-deep: 0 28px 72px rgba(50, 35, 111, 0.15);
    --oas-radius-xl: 32px;
    --oas-radius-lg: 26px;
    --oas-radius-md: 20px;
    --oas-radius-sm: 16px;
    --oas-container: 1160px;
    --oas-page-gap: 44px;
    --oas-section-space: clamp(46px, 4.8vw, 68px);
    --oas-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    color: var(--body-text-purple);
    background:
        radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
        radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
        linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.oas-page::before,
.oas-page::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    opacity: .72;
}

.oas-page::before {
    width: 300px;
    height: 300px;
    top: 92px;
    left: -120px;
    background: rgba(106, 73, 242, 0.13);
}

.oas-page::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
}

.oas-page a {
    color: inherit;
    text-decoration: none;
}

.oas-page img,
.oas-page svg {
    display: block;
    max-width: 100%;
}

.oas-page h1,
.oas-page h2,
.oas-page h3,
.oas-page h4,
.oas-page p {
    margin: 0;
    font-family: inherit;
}

.oas-page .container {
    width: min(var(--oas-container), calc(100% - var(--oas-page-gap)));
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.oas-page .section {
    position: relative;
    padding-block: var(--oas-section-space);
}

.oas-page .section.light {
    background:
        radial-gradient(circle at 0 0, rgba(106, 73, 242, .05), transparent 26%),
        linear-gradient(180deg, rgba(246, 244, 254, .66), rgba(255, 255, 255, 0));
}

.oas-page .eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    min-height: auto;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--purple);
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.oas-page .eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
}

.oas-page .section-heading {
    display: grid;
    gap: 14px;
    max-width: 780px;
    margin-bottom: clamp(24px, 2.8vw, 34px);
}

.oas-page .section-heading h2,
.oas-page .experience-copy h2,
.oas-page .cta-copy h2 {
    margin: 0;
    color: var(--dark-purple);
    font-size: clamp(30px, 3.65vw, 46px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.04em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.oas-page .section-heading p,
.oas-page .hero-copy p,
.oas-page .card p,
.oas-page .panel p,
.oas-page .feature-point p,
.oas-page .flow-card p,
.oas-page .experience-copy p,
.oas-page .cta-copy p,
.oas-page .outcome-card span,
.oas-page .floating-note p,
.oas-page .dashboard-title span,
.oas-page .metric-label,
.oas-page .progress-item span:last-child,
.oas-page .floating-badge span,
.oas-page .stat-strip span,
.oas-page .meta-card span,
.oas-page .mini-card p,
.oas-page .experience-box > p {
    color: rgba(62, 63, 102, 0.78);
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.72;
    overflow-wrap: anywhere;
}

.oas-page .hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: auto;
    padding: clamp(116px, 8vw, 140px) 0 clamp(44px, 5vw, 64px);
    overflow: hidden;
}

.oas-page .hero::before {
    content: "";
    position: absolute;
    inset: 40px 0 auto auto;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(106, 73, 242, 0.10) 0%, rgba(106, 73, 242, 0) 70%);
    z-index: -1;
}

.oas-page .hero-grid,
.oas-page .two-col,
.oas-page .cta-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    gap: clamp(24px, 3vw, 34px);
    align-items: center;
}

.oas-page .hero-copy {
    display: grid;
    gap: 22px;
    max-width: 680px;
    min-width: 0;
}

.oas-page .hero-copy h1 {
    margin: 0;
    color: var(--dark-purple);
    font-size: clamp(38px, 5.2vw, 62px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.052em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.oas-page .hero-copy h1 span {
    color: var(--purple);
    display: inline;
}

.oas-page .hero-copy p {
    max-width: 640px;
    font-size: 16px;
    line-height: 1.74;
}

.oas-page .hero-actions,
.oas-page .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.oas-page .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    transition: var(--oas-transition);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.oas-page .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
    border-radius: inherit;
}

.oas-page .btn:hover {
    transform: translateY(-3px);
}

.oas-page .btn:hover::before {
    transform: scaleX(1);
}

.oas-page .btn-primary {
    color: var(--text-white);
    background: linear-gradient(135deg, var(--purple), #7d5df6);
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.22);
}

.oas-page .btn-primary::before {
    background: linear-gradient(135deg, var(--dark-purple), var(--purple));
}

.oas-page .btn-primary:hover {
    color: var(--text-white);
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.28);
}

.oas-page .btn-secondary {
    color: var(--purple);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
}

.oas-page .btn-secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
}

.oas-page .btn-secondary:hover {
    color: var(--purple);
    background: #ffffff;
}

.oas-page .hero-meta,
.oas-page .overview-grid,
.oas-page .capability-grid,
.oas-page .flow-grid,
.oas-page .outcome-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.oas-page .hero-meta {
    gap: 14px;
    max-width: 680px;
}

.oas-page .meta-card,
.oas-page .dashboard-shell,
.oas-page .panel,
.oas-page .card,
.oas-page .flow-card,
.oas-page .outcome-card,
.oas-page .mini-card,
.oas-page .experience-box,
.oas-page .feature-point {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--oas-soft-border);
    box-shadow: var(--oas-card-shadow);
    backdrop-filter: blur(14px);
    transition: var(--oas-transition);
}

.oas-page .meta-card:hover,
.oas-page .card:hover,
.oas-page .flow-card:hover,
.oas-page .outcome-card:hover,
.oas-page .mini-card:hover,
.oas-page .experience-box:hover,
.oas-page .feature-point:hover,
.oas-page .panel:hover {
    transform: translateY(-4px);
    box-shadow: var(--oas-card-shadow-hover);
    border-color: rgba(106, 73, 242, 0.20);
}

.oas-page .meta-card {
    padding: 18px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
        rgba(255, 255, 255, 0.90);
}

.oas-page .meta-card strong {
    display: block;
    margin-bottom: 7px;
    color: var(--dark-purple);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.oas-page .meta-card span {
    display: block;
    font-size: 12.8px;
    line-height: 1.55;
}

.oas-page .hero-visual {
    position: relative;
    min-width: 0;
}

.oas-page .dashboard-shell {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: var(--oas-radius-xl);
    background:
        radial-gradient(circle at right top, rgba(223, 218, 243, 0.54), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 244, 254, 0.96));
    border: 1px solid rgba(106, 73, 242, 0.14);
    box-shadow: var(--oas-shadow-deep);
}

.oas-page .dashboard-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.03), transparent 54%, rgba(106, 73, 242, 0.05));
    pointer-events: none;
}

.oas-page .dashboard-top,
.oas-page .dashboard-grid {
    position: relative;
    z-index: 1;
}

.oas-page .dashboard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.oas-page .dashboard-title strong {
    display: block;
    margin-bottom: 5px;
    color: var(--dark-purple);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.oas-page .dashboard-title span {
    display: block;
    font-size: 13px;
    line-height: 1.55;
}

.oas-page .pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.oas-page .pill,
.oas-page .info-tags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.12);
    color: var(--purple);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}

.oas-page .dashboard-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 16px;
}

.oas-page .panel {
    position: relative;
    padding: 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
}

.oas-page .panel h3,
.oas-page .card h3,
.oas-page .flow-card h3,
.oas-page .outcome-card strong,
.oas-page .experience-box h3,
.oas-page .mini-card h4,
.oas-page .feature-point strong {
    color: var(--dark-purple);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.oas-page .panel h3 {
    margin-bottom: 6px;
    font-size: 20px;
    line-height: 1.28;
}

.oas-page .chart {
    margin-top: 18px;
    display: flex;
    align-items: end;
    gap: 10px;
    height: 190px;
    padding: 12px 0 28px;
}

.oas-page .chart-bar {
    flex: 1;
    min-height: 72px;
    border-radius: 18px 18px 8px 8px;
    background: linear-gradient(180deg, rgba(106, 73, 242, 0.95), rgba(106, 73, 242, 0.45));
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.oas-page .chart-bar::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    bottom: -26px;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    color: rgba(62, 63, 102, 0.72);
}

.oas-page .progress-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.oas-page .progress-item {
    display: grid;
    gap: 8px;
}

.oas-page .progress-item strong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--dark-purple);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.oas-page .progress-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.10);
    overflow: hidden;
}

.oas-page .progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--purple), #8c70ff);
}

.oas-page .floating-note,
.oas-page .floating-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(106, 73, 242, 0.12);
    box-shadow: 0 18px 40px rgba(50, 35, 111, 0.10);
    backdrop-filter: blur(12px);
}

.oas-page .floating-note {
    left: -26px;
    bottom: 28px;
    width: 230px;
    border-radius: 22px;
    padding: 16px;
}

.oas-page .floating-note strong,
.oas-page .floating-badge strong,
.oas-page .flow-count {
    color: var(--dark-purple);
    font-weight: 700;
}

.oas-page .floating-note strong {
    display: block;
    margin-bottom: 6px;
    font-size: 18px;
    line-height: 1.2;
}

.oas-page .floating-badge {
    top: 34px;
    right: -16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
}

.oas-page .floating-badge::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #33c36b, #7ee0a4);
    box-shadow: 0 0 0 6px rgba(51, 195, 107, 0.12);
}

.oas-page .card,
.oas-page .flow-card,
.oas-page .outcome-card,
.oas-page .mini-card,
.oas-page .experience-box {
    position: relative;
    overflow: hidden;
    border-radius: var(--oas-radius-lg);
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
        rgba(255, 255, 255, 0.92);
}

.oas-page .card,
.oas-page .flow-card,
.oas-page .outcome-card {
    padding: 24px;
}

.oas-page .card::after,
.oas-page .flow-card::after,
.oas-page .outcome-card::after {
    content: "";
    position: absolute;
    inset: auto -40px -46px auto;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(106, 73, 242, 0.12), rgba(106, 73, 242, 0));
    border-radius: 50%;
    pointer-events: none;
}

.oas-page .icon-wrap,
.oas-page .flow-count {
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(106,73,242,0.14), rgba(223,218,243,0.96));
    color: var(--purple);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.oas-page .card h3,
.oas-page .flow-card h3 {
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.3;
}

.oas-page .card p,
.oas-page .flow-card p,
.oas-page .outcome-card span {
    font-size: 14px;
    line-height: 1.62;
}

.oas-page .info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.oas-page .outcome-card strong {
    display: block;
    margin-bottom: 10px;
    color: var(--dark-purple);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.oas-page .experience-copy {
    display: grid;
    gap: 16px;
}

.oas-page .experience-box {
    padding: 26px;
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
        rgba(255, 255, 255, 0.92);
}

.oas-page .experience-box h3 {
    margin-bottom: 10px;
    font-size: 22px;
    line-height: 1.3;
}

.oas-page .feature-points,
.oas-page .experience-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.oas-page .feature-point,
.oas-page .mini-card {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(106, 73, 242, 0.10);
}

.oas-page .feature-point strong,
.oas-page .mini-card h4 {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.35;
}

.oas-page .feature-point p,
.oas-page .mini-card p {
    font-size: 13.5px;
    line-height: 1.6;
}

.oas-page .stat-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.08), rgba(223, 218, 243, 0.55));
    border: 1px solid rgba(106, 73, 242, 0.10);
}

.oas-page .metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.oas-page .metric-card {
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f8f6ff);
    border: 1px solid rgba(106, 73, 242, 0.10);
}

.oas-page .metric-card strong,
.oas-page .stat-strip strong {
    display: block;
    margin-bottom: 6px;
    color: var(--purple);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.oas-page .cta-box {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 3vw, 34px);
    border-radius: var(--oas-radius-xl);
    background:
        radial-gradient(circle at right top, rgba(255,255,255,0.14), transparent 28%),
        linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    color: var(--text-white);
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
}

.oas-page .cta-box::before,
.oas-page .cta-box::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    opacity: .24;
    background: rgba(255, 255, 255, 0.08);
}

.oas-page .cta-box::before {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
}

.oas-page .cta-box::after {
    width: 240px;
    height: 240px;
    left: -90px;
    bottom: -90px;
}

.oas-page .cta-grid {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 1fr) auto;
}

.oas-page .cta-copy h2 {
    margin-bottom: 12px;
    color: var(--text-white);
}

.oas-page .cta-copy p {
    max-width: 660px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.72;
}

.oas-page .cta-actions {
    justify-content: flex-end;
}

.oas-page .cta-actions .btn-primary {
    background: #ffffff;
    color: var(--dark-purple);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.10);
}

.oas-page .cta-actions .btn-primary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
}

.oas-page .cta-actions .btn-primary:hover {
    color: var(--dark-purple);
    background: #f6f2ff;
}

.oas-page .cta-actions .btn-secondary {
    color: var(--text-white);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

.oas-page .cta-actions .btn-secondary::before {
    background: rgba(255, 255, 255, 0.10);
}

.oas-page .cta-actions .btn-secondary:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.18);
}

.oas-page .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.oas-page .reveal.visible,
.oas-page .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1180px) {
    .oas-page {
        --oas-page-gap: 34px;
        --oas-section-space: 58px;
    }

    .oas-page .hero-grid,
    .oas-page .two-col,
    .oas-page .cta-grid {
        grid-template-columns: 1fr;
    }

    .oas-page .hero-copy {
        max-width: 900px;
    }

    .oas-page .cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 991px) {
    .oas-page {
        --oas-page-gap: 30px;
        --oas-section-space: 54px;
    }

    .oas-page .hero {
        padding-top: 104px;
    }

    .oas-page .hero-meta,
    .oas-page .overview-grid,
    .oas-page .capability-grid,
    .oas-page .flow-grid,
    .oas-page .outcome-grid,
    .oas-page .feature-points,
    .oas-page .stat-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .oas-page .dashboard-grid,
    .oas-page .metric-grid,
    .oas-page .experience-grid {
        grid-template-columns: 1fr;
    }

    .oas-page .floating-note,
    .oas-page .floating-badge {
        position: static;
        width: 100%;
        margin-top: 16px;
    }

    .oas-page .pills {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .oas-page {
        --oas-page-gap: 24px;
        --oas-section-space: 46px;
    }

    .oas-page .container {
        width: min(var(--oas-container), calc(100% - var(--oas-page-gap)));
    }

    .oas-page .section {
        padding-block: var(--oas-section-space);
    }

    .oas-page .hero {
        padding: 96px 0 34px;
    }

    .oas-page .hero-copy,
    .oas-page .section-heading,
    .oas-page .experience-copy,
    .oas-page .cta-copy {
        text-align: center;
        justify-items: center;
    }

    .oas-page .hero-copy h1 {
        font-size: clamp(30px, 9.3vw, 42px);
        line-height: 1.1;
    }

    .oas-page .section-heading h2,
    .oas-page .experience-copy h2,
    .oas-page .cta-copy h2 {
        font-size: clamp(24px, 7.4vw, 34px);
        line-height: 1.16;
    }

    .oas-page .section-heading p,
    .oas-page .hero-copy p,
    .oas-page .experience-copy p,
    .oas-page .cta-copy p {
        margin-left: auto;
        margin-right: auto;
        font-size: 14px;
        line-height: 1.62;
        text-align: center;
    }

    .oas-page .eyebrow {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        padding: 8px 12px;
        gap: 8px;
        font-size: 9.5px;
        letter-spacing: .075em;
        text-align: center;
    }

    .oas-page .eyebrow::before {
        width: 7px;
        height: 7px;
    }

    .oas-page .hero-actions,
    .oas-page .cta-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .oas-page .btn {
        width: 100%;
        min-width: 0;
        min-height: 50px;
        padding: 13px 16px;
        border-radius: 14px;
        font-size: 14px;
    }

    .oas-page .hero-meta,
    .oas-page .overview-grid,
    .oas-page .capability-grid,
    .oas-page .flow-grid,
    .oas-page .outcome-grid,
    .oas-page .feature-points,
    .oas-page .stat-strip {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .oas-page .meta-card,
    .oas-page .stat-strip > div {
        display: grid;
        grid-template-columns: 94px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 15px;
        border-radius: 18px;
        text-align: left;
    }

    .oas-page .meta-card strong,
    .oas-page .stat-strip strong {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        margin: 0;
        padding: 8px 10px;
        border-radius: 14px;
        background: rgba(106, 73, 242, .09);
        color: var(--dark-purple);
        font-size: 13.5px;
        line-height: 1.15;
        text-align: center;
    }

    .oas-page .meta-card span,
    .oas-page .stat-strip span {
        font-size: 12.8px;
        line-height: 1.52;
        text-align: left;
    }

    .oas-page .dashboard-shell,
    .oas-page .cta-box,
    .oas-page .experience-box {
        padding: 16px;
        border-radius: 22px;
    }

    .oas-page .dashboard-top {
        display: grid;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .oas-page .pills,
    .oas-page .info-tags {
        justify-content: center;
        gap: 8px;
    }

    .oas-page .panel,
    .oas-page .card,
    .oas-page .flow-card,
    .oas-page .outcome-card,
    .oas-page .mini-card,
    .oas-page .feature-point {
        padding: 16px;
        border-radius: 20px;
    }

    .oas-page .card,
    .oas-page .flow-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 12px;
        align-items: center;
        text-align: left;
    }

    .oas-page .icon-wrap,
    .oas-page .flow-count {
        width: 42px;
        height: 42px;
        margin: 0;
        border-radius: 14px;
        font-size: 13px;
    }

    .oas-page .card h3,
    .oas-page .flow-card h3 {
        margin: 0;
        font-size: 16.5px;
        line-height: 1.32;
        text-align: left;
    }

    .oas-page .card p,
    .oas-page .flow-card p {
        grid-column: 1 / -1;
        margin-top: 12px;
        font-size: 13.5px;
        line-height: 1.58;
        text-align: left;
    }

    .oas-page .card .info-tags {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .oas-page .outcome-card,
    .oas-page .feature-point,
    .oas-page .mini-card,
    .oas-page .floating-note,
    .oas-page .floating-badge {
        text-align: center;
    }

    .oas-page .outcome-card strong {
        font-size: 17px;
    }

    .oas-page .outcome-card span,
    .oas-page .feature-point p,
    .oas-page .mini-card p,
    .oas-page .experience-box > p {
        font-size: 13.5px;
        line-height: 1.58;
        text-align: center;
    }

    .oas-page .floating-badge {
        justify-content: center;
        border-radius: 18px;
    }

    .oas-page .chart {
        height: 170px;
    }

    .oas-page .progress-item strong {
        font-size: 13px;
    }

    .oas-page .cta-grid {
        gap: 18px;
    }
}

@media (max-width: 430px) {
    .oas-page {
        --oas-page-gap: 22px;
        --oas-section-space: 42px;
    }

    .oas-page .hero {
        padding-top: 88px;
        padding-bottom: 30px;
    }

    .oas-page .hero-copy h1 {
        font-size: clamp(27px, 8.8vw, 36px);
    }

    .oas-page .section-heading h2,
    .oas-page .experience-copy h2,
    .oas-page .cta-copy h2 {
        font-size: clamp(22px, 7vw, 30px);
    }

    .oas-page .meta-card,
    .oas-page .stat-strip > div {
        grid-template-columns: 82px minmax(0, 1fr);
        padding: 13px;
        border-radius: 16px;
    }

    .oas-page .meta-card strong,
    .oas-page .stat-strip strong {
        min-height: 40px;
        font-size: 12.5px;
    }

    .oas-page .dashboard-shell,
    .oas-page .cta-box,
    .oas-page .experience-box,
    .oas-page .panel,
    .oas-page .card,
    .oas-page .flow-card,
    .oas-page .outcome-card,
    .oas-page .mini-card,
    .oas-page .feature-point {
        padding: 14px;
        border-radius: 18px;
    }

    .oas-page .card,
    .oas-page .flow-card {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 11px;
    }

    .oas-page .icon-wrap,
    .oas-page .flow-count {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .oas-page .card h3,
    .oas-page .flow-card h3 {
        font-size: 15.5px;
    }
}

@media (max-width: 360px) {
    .oas-page {
        --oas-page-gap: 18px;
    }

    .oas-page .hero {
        padding-top: 82px;
    }

    .oas-page .hero-copy h1 {
        font-size: 25px;
    }

    .oas-page .eyebrow {
        font-size: 8.5px;
        letter-spacing: .055em;
        padding: 7px 10px;
    }

    .oas-page .meta-card,
    .oas-page .stat-strip > div {
        grid-template-columns: 1fr;
    }

    .oas-page .meta-card strong,
    .oas-page .stat-strip strong {
        width: fit-content;
        justify-content: flex-start;
        text-align: left;
    }
}

@media (hover: none) {
    .oas-page .btn:hover,
    .oas-page .meta-card:hover,
    .oas-page .card:hover,
    .oas-page .flow-card:hover,
    .oas-page .outcome-card:hover,
    .oas-page .mini-card:hover,
    .oas-page .experience-box:hover,
    .oas-page .feature-point:hover,
    .oas-page .panel:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oas-page *,
    .oas-page *::before,
    .oas-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .oas-page .reveal {
        opacity: 1;
        transform: none;
    }
}

/*===================================================================================
    25. Online Assessment Software CSS End
===================================================================================*/


/*===================================================================================
    26. Technical Assessment Software CSS Start
===================================================================================*/

:root {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --bg-purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --slider-dots-color: #D4D2DD;
    --light-bg: #DFDAF3;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 6% 4%, rgba(106, 73, 242, 0.12), transparent 25%),
      radial-gradient(circle at 94% 8%, rgba(223, 218, 243, 0.92), transparent 26%),
      radial-gradient(circle at 4% 92%, rgba(106, 73, 242, 0.07), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fcfbff 44%, #f7f3ff 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--body-text-purple);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .tas-orbit,
  .tas-orbit *,
  .tas-orbit *::before,
  .tas-orbit *::after {
    box-sizing: border-box;
  }

  .tas-orbit {
    --tas-container: 1160px;
    --tas-page-gap: 44px;
    --tas-section-space: clamp(46px, 4.8vw, 68px);
    --tas-title: #20183f;
    --tas-text: rgba(62, 63, 102, 0.78);
    --tas-muted: rgba(62, 63, 102, 0.62);
    --tas-surface: rgba(255, 255, 255, 0.94);
    --tas-surface-soft: rgba(255, 255, 255, 0.88);
    --tas-line: rgba(106, 73, 242, 0.12);
    --tas-line-strong: rgba(106, 73, 242, 0.20);
    --tas-radius-xl: 32px;
    --tas-radius-lg: 26px;
    --tas-radius-md: 20px;
    --tas-radius-sm: 16px;
    --tas-shadow-sm: 0 10px 28px rgba(50, 35, 111, 0.06);
    --tas-shadow-md: 0 16px 42px rgba(50, 35, 111, 0.085);
    --tas-shadow-lg: 0 28px 72px rgba(50, 35, 111, 0.15);
    --tas-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    padding-top: clamp(102px, 7vw, 124px);
    color: var(--tas-text);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
      radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
      radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
  }

  .tas-orbit::before,
  .tas-orbit::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(90px);
    z-index: -1;
    pointer-events: none;
    opacity: .72;
  }

  .tas-orbit::before {
    width: 300px;
    height: 300px;
    left: -120px;
    top: 92px;
    background: rgba(106, 73, 242, 0.13);
  }

  .tas-orbit::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
  }

  .tas-orbit a {
    color: inherit;
    text-decoration: none;
  }

  .tas-orbit img,
  .tas-orbit svg {
    display: block;
    max-width: 100%;
  }

  .tas-orbit h1,
  .tas-orbit h2,
  .tas-orbit h3,
  .tas-orbit h4,
  .tas-orbit p {
    margin: 0;
    font-family: inherit;
  }

  .tas-orbit .container {
    width: min(var(--tas-container), calc(100% - var(--tas-page-gap)));
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .tas-orbit .section {
    position: relative;
    padding-block: var(--tas-section-space);
  }

  .tas-orbit .section.soft {
    background:
      radial-gradient(circle at 0 0, rgba(106, 73, 242, .05), transparent 26%),
      linear-gradient(180deg, rgba(246, 244, 254, .66), rgba(255, 255, 255, 0));
  }

  .tas-orbit .eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    min-height: auto;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--purple);
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .tas-orbit .eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
  }

  .tas-orbit .section-head {
    display: grid;
    gap: 14px;
    max-width: 800px;
    margin-bottom: clamp(24px, 2.8vw, 34px);
  }

  .tas-orbit .section-head h2,
  .tas-orbit .story-copy h2,
  .tas-orbit .cta-copy h2 {
    margin: 0;
    color: var(--tas-title);
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.04em;
    font-weight: 700;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .tas-orbit .section-head .eyebrow,
  .tas-orbit .story-copy .eyebrow,
  .tas-orbit .cta-copy .eyebrow {
    margin-bottom: 4px;
  }

  .tas-orbit .section-head p,
  .tas-orbit .hero-copy p,
  .tas-orbit .signal-intro p,
  .tas-orbit .benefit-card p,
  .tas-orbit .story-copy p,
  .tas-orbit .review-card p,
  .tas-orbit .role-card p,
  .tas-orbit .flow-card p,
  .tas-orbit .compare-card p,
  .tas-orbit .cta-copy p,
  .tas-orbit .metric span,
  .tas-orbit .side-note p,
  .tas-orbit .orbit-card span,
  .tas-orbit .proof-item span,
  .tas-orbit .story-points span,
  .tas-orbit .signal-chip span,
  .tas-orbit .compare-top span,
  .tas-orbit .note-list div,
  .tas-orbit .bullet-list div,
  .tas-orbit .role-card li {
    margin: 0;
    color: var(--tas-text);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.68;
    overflow-wrap: anywhere;
  }

  /* Hero */
  .tas-orbit .hero {
    padding: clamp(30px, 3.4vw, 48px) 0 clamp(42px, 4.8vw, 62px);
  }

  .tas-orbit .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .98fr) minmax(420px, 1.02fr);
    gap: clamp(24px, 3vw, 34px);
    align-items: center;
  }

  .tas-orbit .hero-copy {
    display: grid;
    gap: 20px;
    max-width: 710px;
    min-width: 0;
  }

  .tas-orbit .hero-copy h1 {
    margin: 0;
    color: var(--tas-title);
    font-size: clamp(38px, 5.2vw, 62px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.052em;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .tas-orbit .hero-copy h1 span {
    color: var(--purple);
    display: inline;
  }

  .tas-orbit .hero-copy p {
    max-width: 640px;
    font-size: 16px;
    line-height: 1.74;
  }

  .tas-orbit .hero-actions,
  .tas-orbit .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
  }

  .tas-orbit .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition: var(--tas-transition);
    white-space: normal;
  }

  .tas-orbit .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    z-index: -1;
  }

  .tas-orbit .btn:hover {
    transform: translateY(-3px);
  }

  .tas-orbit .btn:hover::before {
    transform: scaleX(1);
  }

  .tas-orbit .btn-primary {
    background: linear-gradient(135deg, var(--purple), #8A70FF);
    color: var(--text-white);
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.22);
  }

  .tas-orbit .btn-primary::before {
    background: linear-gradient(135deg, var(--tas-title), var(--purple));
  }

  .tas-orbit .btn-primary:hover {
    color: var(--text-white);
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.28);
  }

  .tas-orbit .btn-secondary {
    background: rgba(255, 255, 255, 0.94);
    color: var(--purple);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
  }

  .tas-orbit .btn-secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
  }

  .tas-orbit .proof-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 720px;
  }

  .tas-orbit .proof-item,
  .tas-orbit .signal-band,
  .tas-orbit .benefit-card,
  .tas-orbit .review-card,
  .tas-orbit .role-card,
  .tas-orbit .flow-card,
  .tas-orbit .compare-card,
  .tas-orbit .story-box,
  .tas-orbit .cta-shell,
  .tas-orbit .side-note,
  .tas-orbit .orbit-card,
  .tas-orbit .signal-chip,
  .tas-orbit .metric,
  .tas-orbit .story-points div,
  .tas-orbit .note-list div {
    background: var(--tas-surface);
    border: 1px solid var(--tas-line);
    box-shadow: var(--tas-shadow-md);
    backdrop-filter: blur(14px);
    transition: var(--tas-transition);
  }

  .tas-orbit .proof-item:hover,
  .tas-orbit .signal-band:hover,
  .tas-orbit .benefit-card:hover,
  .tas-orbit .review-card:hover,
  .tas-orbit .role-card:hover,
  .tas-orbit .flow-card:hover,
  .tas-orbit .compare-card:hover,
  .tas-orbit .story-box:hover,
  .tas-orbit .cta-shell:hover,
  .tas-orbit .side-note:hover,
  .tas-orbit .orbit-card:hover,
  .tas-orbit .signal-chip:hover,
  .tas-orbit .metric:hover {
    transform: translateY(-4px);
    box-shadow: var(--tas-shadow-lg);
    border-color: var(--tas-line-strong);
  }

  .tas-orbit .proof-item {
    padding: 18px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .tas-orbit .proof-item strong {
    display: block;
    margin-bottom: 7px;
    color: var(--tas-title);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .tas-orbit .proof-item span {
    display: block;
    font-size: 12.8px;
    line-height: 1.55;
  }

  /* Orbit visual */
  .tas-orbit .hero-stage {
    position: relative;
    min-height: 620px;
    display: grid;
    place-items: center;
    min-width: 0;
  }

  .tas-orbit .orbit-shell {
    position: relative;
    width: min(100%, 520px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96) 0%, rgba(246, 244, 254, 0.92) 48%, rgba(106, 73, 242, 0.10) 100%);
    border: 1px solid rgba(106, 73, 242, 0.12);
    box-shadow: var(--tas-shadow-lg);
    overflow: visible;
  }

  .tas-orbit .orbit-ring,
  .tas-orbit .orbit-ring::before,
  .tas-orbit .orbit-ring::after {
    position: absolute;
    inset: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(106, 73, 242, 0.20);
    content: "";
  }

  .tas-orbit .orbit-ring {
    width: 76%;
    height: 76%;
  }

  .tas-orbit .orbit-ring::before {
    width: 126%;
    height: 126%;
  }

  .tas-orbit .orbit-ring::after {
    width: 62%;
    height: 62%;
  }

  .tas-orbit .core-panel {
    position: absolute;
    inset: 50%;
    transform: translate(-50%, -50%);
    width: 244px;
    padding: 24px;
    border-radius: 28px;
    background:
      radial-gradient(circle at right top, rgba(255,255,255,0.12), transparent 30%),
      linear-gradient(135deg, #1d1546 0%, #352177 50%, #5b37ea 100%);
    color: #fff;
    box-shadow: 0 24px 60px rgba(50, 35, 111, 0.22);
    text-align: center;
  }

  .tas-orbit .core-panel strong {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .tas-orbit .core-panel p {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    line-height: 1.62;
  }

  .tas-orbit .core-stats {
    display: grid;
    gap: 9px;
  }

  .tas-orbit .core-stats div {
    padding: 11px 12px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.90);
    overflow-wrap: anywhere;
  }

  .tas-orbit .orbit-card {
    position: absolute;
    width: 220px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.95);
  }

  .tas-orbit .orbit-card strong {
    display: block;
    margin-bottom: 5px;
    color: var(--tas-title);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .tas-orbit .orbit-card span {
    display: block;
    font-size: 13px;
    line-height: 1.55;
  }

  .tas-orbit .card-a {
    top: 22px;
    left: 24px;
  }

  .tas-orbit .card-b {
    top: 62px;
    right: -10px;
  }

  .tas-orbit .card-c {
    bottom: 54px;
    left: -6px;
  }

  .tas-orbit .card-d {
    bottom: 12px;
    right: 30px;
  }

  /* Signal band */
  .tas-orbit .signal-band {
    margin-top: clamp(24px, 3vw, 34px);
    padding: 26px;
    border-radius: var(--tas-radius-xl);
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 22px;
    align-items: center;
    background:
      radial-gradient(circle at 0% 0%, rgba(106, 73, 242, .10), transparent 34%),
      radial-gradient(circle at 100% 0%, rgba(223, 218, 243, .42), transparent 30%),
      linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,245,255,.94));
  }

  .tas-orbit .signal-intro strong {
    display: block;
    margin-bottom: 8px;
    color: var(--tas-title);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.28;
    overflow-wrap: anywhere;
  }

  .tas-orbit .signal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .tas-orbit .signal-chip {
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);
    box-shadow: var(--tas-shadow-sm);
  }

  .tas-orbit .signal-chip strong {
    display: block;
    margin-bottom: 5px;
    color: var(--tas-title);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .tas-orbit .signal-chip span {
    display: block;
    font-size: 13px;
    line-height: 1.55;
  }

  /* Cards */
  .tas-orbit .benefit-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 22px;
  }

  .tas-orbit .benefit-stack,
  .tas-orbit .review-stack,
  .tas-orbit .story-points,
  .tas-orbit .note-list,
  .tas-orbit .bullet-list {
    display: grid;
    gap: 16px;
  }

  .tas-orbit .benefit-card,
  .tas-orbit .review-card,
  .tas-orbit .role-card,
  .tas-orbit .flow-card,
  .tas-orbit .compare-card,
  .tas-orbit .story-box,
  .tas-orbit .side-note {
    position: relative;
    overflow: hidden;
    border-radius: var(--tas-radius-lg);
    padding: 26px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.92);
  }

  .tas-orbit .benefit-card::after,
  .tas-orbit .review-card::after,
  .tas-orbit .role-card::before,
  .tas-orbit .flow-card::before,
  .tas-orbit .compare-card::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -46px;
    bottom: -54px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(106, 73, 242, 0.12), rgba(106, 73, 242, 0));
    pointer-events: none;
  }

  .tas-orbit .review-card {
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.07), transparent 34%),
      linear-gradient(180deg, rgba(246, 244, 254, 0.86), rgba(255, 255, 255, 0.98));
  }

  .tas-orbit .icon,
  .tas-orbit .step,
  .tas-orbit .compare-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(106,73,242,0.14), rgba(223,218,243,0.96));
    color: var(--purple);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    position: relative;
    z-index: 1;
  }

  .tas-orbit .benefit-card h3,
  .tas-orbit .review-card h3,
  .tas-orbit .role-card h3,
  .tas-orbit .flow-card h3,
  .tas-orbit .compare-card h3,
  .tas-orbit .side-note strong {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    color: var(--tas-title);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
  }

  .tas-orbit .benefit-card p,
  .tas-orbit .review-card p,
  .tas-orbit .role-card p,
  .tas-orbit .flow-card p,
  .tas-orbit .compare-card p {
    position: relative;
    z-index: 1;
    font-size: 14px;
    line-height: 1.62;
  }

  .tas-orbit .tag-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
  }

  .tas-orbit .tag-row span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.12);
    color: var(--purple);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .tas-orbit .metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
  }

  .tas-orbit .metric {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--tas-shadow-sm);
  }

  .tas-orbit .metric strong {
    display: block;
    margin-bottom: 7px;
    color: var(--purple);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .tas-orbit .metric span {
    display: block;
    font-size: 12.8px;
    line-height: 1.55;
  }

  /* Story */
  .tas-orbit .story-layout {
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
    gap: 22px;
    align-items: stretch;
  }

  .tas-orbit .story-box {
    border-radius: var(--tas-radius-xl);
    padding: 28px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      linear-gradient(180deg, rgba(246, 244, 254, 0.78), rgba(255, 255, 255, 0.98));
  }

  .tas-orbit .story-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
  }

  .tas-orbit .story-points {
    margin-top: 6px;
    gap: 12px;
  }

  .tas-orbit .story-points div,
  .tas-orbit .note-list div {
    padding: 15px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--tas-shadow-sm);
  }

  .tas-orbit .story-points strong {
    display: block;
    margin-bottom: 5px;
    color: var(--tas-title);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .tas-orbit .story-points span {
    display: block;
    font-size: 13px;
    line-height: 1.6;
  }

  /* Roles */
  .tas-orbit .roles-grid,
  .tas-orbit .flow-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .tas-orbit .role-card::after {
    content: attr(data-role);
    position: absolute;
    right: 18px;
    top: 18px;
    color: rgba(106, 73, 242, 0.10);
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
  }

  .tas-orbit .role-card ul {
    position: relative;
    z-index: 1;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
  }

  .tas-orbit .role-card li {
    position: relative;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding-left: 0;
    font-size: 13.5px;
    line-height: 1.62;
  }

  .tas-orbit .role-card li::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: .58em;
    border-radius: 50%;
    background: var(--purple);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
  }

  .tas-orbit .flow-card {
    display: grid;
    align-content: start;
  }

  .tas-orbit .step {
    font-size: 15px;
  }

  /* Compare */
  .tas-orbit .compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .tas-orbit .compare-card.good {
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.10), transparent 34%),
      linear-gradient(180deg, rgba(106, 73, 242, 0.08), rgba(255, 255, 255, 0.98));
    border-color: var(--tas-line-strong);
  }

  .tas-orbit .compare-card.bad {
    background:
      radial-gradient(circle at 100% 0, rgba(50, 35, 111, 0.05), transparent 34%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 245, 255, 0.96));
  }

  .tas-orbit .compare-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
  }

  .tas-orbit .compare-icon {
    margin: 0;
    flex: 0 0 auto;
  }

  .tas-orbit .good .compare-icon {
    background: rgba(106, 73, 242, 0.14);
    color: var(--purple);
  }

  .tas-orbit .bad .compare-icon {
    background: rgba(50, 35, 111, 0.08);
    color: var(--tas-title);
  }

  .tas-orbit .compare-top strong {
    display: block;
    margin-bottom: 4px;
    color: var(--tas-title);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .tas-orbit .compare-top span {
    display: block;
    font-size: 13px;
    line-height: 1.55;
  }

  .tas-orbit .bullet-list {
    position: relative;
    z-index: 1;
    gap: 10px;
    margin-top: 18px;
  }

  .tas-orbit .bullet-list div {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding-left: 0;
    font-size: 14px;
    line-height: 1.62;
  }

  .tas-orbit .bullet-list div::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: .58em;
    border-radius: 50%;
    background: var(--purple);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
  }

  /* CTA */
  .tas-orbit .cta-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: 22px;
    align-items: stretch;
  }

  .tas-orbit .cta-shell,
  .tas-orbit .side-note {
    border-radius: var(--tas-radius-xl);
    padding: 30px;
  }

  .tas-orbit .cta-shell {
    background:
      radial-gradient(circle at right top, rgba(255,255,255,0.14), transparent 28%),
      linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
  }

  .tas-orbit .cta-shell::before,
  .tas-orbit .cta-shell::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    opacity: .24;
  }

  .tas-orbit .cta-shell::before {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
    background: radial-gradient(circle, rgba(255,255,255,0.56), rgba(255,255,255,0));
  }

  .tas-orbit .cta-shell::after {
    width: 240px;
    height: 240px;
    left: -90px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(255,255,255,0.30), rgba(255,255,255,0));
  }

  .tas-orbit .cta-copy,
  .tas-orbit .cta-actions {
    position: relative;
    z-index: 1;
  }

  .tas-orbit .cta-copy {
    display: grid;
    gap: 14px;
  }

  .tas-orbit .cta-copy .eyebrow {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;
  }

  .tas-orbit .cta-copy .eyebrow::before {
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12);
  }

  .tas-orbit .cta-copy h2 {
    color: #fff;
  }

  .tas-orbit .cta-copy p {
    color: rgba(255, 255, 255, 0.82);
  }

  .tas-orbit .cta-actions {
    margin-top: 22px;
  }

  .tas-orbit .cta-actions .btn-primary {
    background: #fff;
    color: var(--tas-title);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.10);
  }

  .tas-orbit .cta-actions .btn-primary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
  }

  .tas-orbit .cta-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: none;
  }

  .tas-orbit .side-note {
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 244, 254, 0.98));
  }

  .tas-orbit .side-note strong {
    display: block;
    margin-bottom: 8px;
  }

  .tas-orbit .note-list {
    margin-top: 18px;
    gap: 10px;
  }

  .tas-orbit .note-list div {
    font-size: 13.5px;
    line-height: 1.62;
  }

  /* Reveal */
  .tas-orbit .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
  }

  .tas-orbit .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Tablet */
  @media (max-width: 1180px) {
    .tas-orbit {
      --tas-page-gap: 34px;
      --tas-section-space: 58px;
      padding-top: 92px;
    }

    .tas-orbit .hero-grid,
    .tas-orbit .benefit-grid,
    .tas-orbit .story-layout,
    .tas-orbit .cta-wrap,
    .tas-orbit .signal-band {
      grid-template-columns: 1fr;
    }

    .tas-orbit .hero-copy {
      max-width: 900px;
    }

    .tas-orbit .hero-stage {
      max-width: 820px;
      min-height: 560px;
    }

    .tas-orbit .roles-grid,
    .tas-orbit .flow-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 991px) {
    .tas-orbit {
      --tas-page-gap: 30px;
      --tas-section-space: 54px;
      padding-top: 86px;
    }

    .tas-orbit .proof-list,
    .tas-orbit .compare-grid,
    .tas-orbit .metrics,
    .tas-orbit .signal-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tas-orbit .hero-stage {
      min-height: auto;
      padding: 22px 0 12px;
    }

    .tas-orbit .orbit-shell {
      width: min(100%, 460px);
    }

    .tas-orbit .orbit-card {
      position: static;
      width: 100%;
      margin-top: 14px;
    }

    .tas-orbit .card-a,
    .tas-orbit .card-b,
    .tas-orbit .card-c,
    .tas-orbit .card-d {
      top: auto;
      left: auto;
      right: auto;
      bottom: auto;
    }
  }

  /* Mobile */
  @media (max-width: 767px) {
    .tas-orbit {
      --tas-page-gap: 24px;
      --tas-section-space: 46px;
      padding-top: 78px;
    }

    .tas-orbit .container {
      width: min(var(--tas-container), calc(100% - var(--tas-page-gap)));
    }

    .tas-orbit .section {
      padding-block: var(--tas-section-space);
    }

    .tas-orbit .hero {
      padding: 24px 0 34px;
    }

    .tas-orbit .hero-copy,
    .tas-orbit .section-head,
    .tas-orbit .story-copy,
    .tas-orbit .cta-copy,
    .tas-orbit .signal-intro {
      text-align: center;
      justify-items: center;
    }

    .tas-orbit .hero-copy h1 {
      font-size: clamp(30px, 9.3vw, 42px);
      line-height: 1.1;
      max-width: none;
    }

    .tas-orbit .section-head h2,
    .tas-orbit .story-copy h2,
    .tas-orbit .cta-copy h2 {
      font-size: clamp(24px, 7.4vw, 34px);
      line-height: 1.16;
      max-width: none;
    }

    .tas-orbit .section-head p,
    .tas-orbit .hero-copy p,
    .tas-orbit .story-copy p,
    .tas-orbit .cta-copy p,
    .tas-orbit .signal-intro p,
    .tas-orbit .side-note p {
      font-size: 14px;
      line-height: 1.62;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .tas-orbit .eyebrow {
      padding: 8px 12px;
      gap: 8px;
      font-size: 9.5px;
      letter-spacing: .075em;
      margin-left: auto;
      margin-right: auto;
      justify-content: center;
      text-align: center;
    }

    .tas-orbit .eyebrow::before {
      width: 7px;
      height: 7px;
    }

    .tas-orbit .hero-actions,
    .tas-orbit .cta-actions {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: 11px;
    }

    .tas-orbit .btn {
      width: 100%;
      min-width: 0;
      min-height: 50px;
      padding: 13px 16px;
      border-radius: 14px;
      font-size: 14px;
    }

    .tas-orbit .proof-list,
    .tas-orbit .roles-grid,
    .tas-orbit .flow-grid,
    .tas-orbit .compare-grid,
    .tas-orbit .metrics,
    .tas-orbit .signal-grid {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .tas-orbit .proof-item,
    .tas-orbit .metric {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 15px;
      border-radius: 18px;
      text-align: left;
    }

    .tas-orbit .proof-item strong,
    .tas-orbit .metric strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      margin: 0;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(106, 73, 242, .09);
      color: var(--tas-title);
      font-size: 13.5px;
      line-height: 1.15;
      text-align: center;
    }

    .tas-orbit .metric strong {
      color: var(--purple);
    }

    .tas-orbit .proof-item span,
    .tas-orbit .metric span {
      margin: 0;
      font-size: 12.8px;
      line-height: 1.52;
      text-align: left;
    }

    .tas-orbit .hero-stage {
      display: grid;
      gap: 14px;
      padding: 8px 0 0;
    }

    .tas-orbit .orbit-shell {
      width: 100%;
      aspect-ratio: auto;
      display: grid;
      gap: 14px;
      padding: 0;
      border-radius: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
    }

    .tas-orbit .orbit-ring {
      display: none;
    }

    .tas-orbit .core-panel,
    .tas-orbit .orbit-card {
      position: relative;
      inset: auto;
      transform: none;
      width: 100%;
      margin: 0;
    }

    .tas-orbit .core-panel {
      padding: 18px;
      border-radius: 22px;
    }

    .tas-orbit .orbit-card {
      padding: 15px;
      border-radius: 18px;
      text-align: center;
    }

    .tas-orbit .signal-band,
    .tas-orbit .benefit-card,
    .tas-orbit .review-card,
    .tas-orbit .role-card,
    .tas-orbit .flow-card,
    .tas-orbit .compare-card,
    .tas-orbit .story-box,
    .tas-orbit .cta-shell,
    .tas-orbit .side-note,
    .tas-orbit .signal-chip {
      padding: 16px;
      border-radius: 20px;
    }

    .tas-orbit .signal-grid {
      margin-top: 2px;
    }

    .tas-orbit .signal-chip,
    .tas-orbit .story-points div,
    .tas-orbit .note-list div {
      padding: 14px;
      border-radius: 16px;
      text-align: center;
    }

    .tas-orbit .benefit-card,
    .tas-orbit .flow-card {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 10px 12px;
      align-items: center;
      text-align: left;
    }

    .tas-orbit .icon,
    .tas-orbit .step {
      width: 42px;
      height: 42px;
      margin: 0;
      border-radius: 14px;
      font-size: 13px;
    }

    .tas-orbit .benefit-card h3,
    .tas-orbit .flow-card h3 {
      margin: 0;
      font-size: 16.5px;
      line-height: 1.32;
      text-align: left;
    }

    .tas-orbit .benefit-card p,
    .tas-orbit .flow-card p,
    .tas-orbit .benefit-card .tag-row {
      grid-column: 1 / -1;
      text-align: left;
    }

    .tas-orbit .benefit-card p,
    .tas-orbit .flow-card p {
      margin-top: 2px;
      font-size: 13.5px;
      line-height: 1.58;
    }

    .tas-orbit .tag-row {
      justify-content: flex-start;
      gap: 8px;
    }

    .tas-orbit .tag-row span {
      font-size: 11.5px;
      padding: 7px 10px;
    }

    .tas-orbit .review-card,
    .tas-orbit .role-card,
    .tas-orbit .compare-card,
    .tas-orbit .side-note {
      text-align: center;
    }

    .tas-orbit .review-card h3,
    .tas-orbit .role-card h3,
    .tas-orbit .compare-card h3,
    .tas-orbit .side-note strong {
      font-size: 17px;
      line-height: 1.3;
      text-align: center;
    }

    .tas-orbit .review-card p,
    .tas-orbit .role-card p,
    .tas-orbit .compare-card p {
      font-size: 13.5px;
      line-height: 1.58;
      text-align: center;
    }

    .tas-orbit .role-card::after {
      font-size: 40px;
      right: 14px;
      top: 14px;
    }

    .tas-orbit .role-card ul,
    .tas-orbit .bullet-list {
      text-align: left;
    }

    .tas-orbit .role-card li,
    .tas-orbit .bullet-list div {
      font-size: 13.5px;
      line-height: 1.58;
    }

    .tas-orbit .compare-top {
      align-items: center;
      text-align: left;
    }

    .tas-orbit .compare-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      font-size: 14px;
    }

    .tas-orbit .compare-top strong {
      font-size: 15.5px;
      line-height: 1.3;
    }

    .tas-orbit .compare-top span {
      font-size: 12.5px;
      line-height: 1.5;
    }

    .tas-orbit .cta-shell {
      text-align: center;
    }

    .tas-orbit .cta-copy {
      justify-items: center;
    }

    .tas-orbit .cta-actions {
      margin-top: 18px;
    }
  }

  @media (max-width: 430px) {
    .tas-orbit {
      --tas-page-gap: 22px;
      --tas-section-space: 42px;
      padding-top: 70px;
    }

    .tas-orbit .hero {
      padding-top: 20px;
      padding-bottom: 30px;
    }

    .tas-orbit .hero-copy h1 {
      font-size: clamp(27px, 8.8vw, 36px);
    }

    .tas-orbit .section-head h2,
    .tas-orbit .story-copy h2,
    .tas-orbit .cta-copy h2 {
      font-size: clamp(22px, 7vw, 30px);
    }

    .tas-orbit .proof-item,
    .tas-orbit .metric {
      grid-template-columns: 82px minmax(0, 1fr);
      padding: 13px;
      border-radius: 16px;
    }

    .tas-orbit .proof-item strong,
    .tas-orbit .metric strong {
      min-height: 40px;
      font-size: 12.5px;
    }

    .tas-orbit .signal-band,
    .tas-orbit .benefit-card,
    .tas-orbit .review-card,
    .tas-orbit .role-card,
    .tas-orbit .flow-card,
    .tas-orbit .compare-card,
    .tas-orbit .story-box,
    .tas-orbit .cta-shell,
    .tas-orbit .side-note,
    .tas-orbit .signal-chip,
    .tas-orbit .core-panel,
    .tas-orbit .orbit-card {
      padding: 14px;
      border-radius: 18px;
    }

    .tas-orbit .benefit-card,
    .tas-orbit .flow-card {
      grid-template-columns: 40px minmax(0, 1fr);
      column-gap: 11px;
    }

    .tas-orbit .icon,
    .tas-orbit .step,
    .tas-orbit .compare-icon {
      width: 40px;
      height: 40px;
      border-radius: 13px;
    }

    .tas-orbit .benefit-card h3,
    .tas-orbit .flow-card h3 {
      font-size: 15.5px;
    }
  }

  @media (max-width: 360px) {
    .tas-orbit {
      --tas-page-gap: 18px;
      padding-top: 64px;
    }

    .tas-orbit .hero-copy h1 {
      font-size: 25px;
    }

    .tas-orbit .eyebrow {
      font-size: 8.5px;
      letter-spacing: .055em;
      padding: 7px 10px;
    }

    .tas-orbit .proof-item,
    .tas-orbit .metric {
      grid-template-columns: 1fr;
      text-align: center;
    }

    .tas-orbit .proof-item strong,
    .tas-orbit .metric strong {
      width: fit-content;
      margin: 0 auto;
    }

    .tas-orbit .proof-item span,
    .tas-orbit .metric span {
      text-align: center;
    }
  }

  @media (hover: none) {
    .tas-orbit .btn:hover,
    .tas-orbit .proof-item:hover,
    .tas-orbit .signal-band:hover,
    .tas-orbit .benefit-card:hover,
    .tas-orbit .review-card:hover,
    .tas-orbit .role-card:hover,
    .tas-orbit .flow-card:hover,
    .tas-orbit .compare-card:hover,
    .tas-orbit .story-box:hover,
    .tas-orbit .cta-shell:hover,
    .tas-orbit .side-note:hover,
    .tas-orbit .orbit-card:hover,
    .tas-orbit .signal-chip:hover,
    .tas-orbit .metric:hover {
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tas-orbit *,
    .tas-orbit *::before,
    .tas-orbit *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }

    .tas-orbit .reveal {
      opacity: 1 !important;
      transform: none !important;
    }
  }

  /* =====================================================
     FINAL WEB HERO POLISH
     Replaces the busy orbit layout on desktop with a clean
     recruiter dashboard card layout. Mobile/tablet remain
     responsive from the existing CSS.
  ===================================================== */

  @media (min-width: 1181px) {
    .tas-orbit {
      padding-top: clamp(104px, 7vw, 126px);
    }

    .tas-orbit .hero {
      padding-top: 34px;
      padding-bottom: 56px;
    }

    .tas-orbit .hero-grid {
      grid-template-columns: minmax(0, 0.95fr) minmax(460px, 1.05fr);
      gap: clamp(38px, 4.4vw, 64px);
      align-items: center;
    }

    .tas-orbit .hero-copy h1 {
      font-size: clamp(44px, 4.55vw, 60px);
      line-height: 1.08;
      letter-spacing: -0.048em;
      max-width: 720px;
    }

    .tas-orbit .hero-copy p {
      max-width: 660px;
      font-size: 16px;
      line-height: 1.78;
    }

    .tas-orbit .hero-stage {
      min-height: auto;
      display: block;
    }

    .tas-orbit .orbit-shell {
      width: 100%;
      max-width: 610px;
      margin-left: auto;
      aspect-ratio: auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      padding: 22px;
      border-radius: 34px;
      overflow: hidden;
      background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.12), transparent 30%),
        radial-gradient(circle at 0 100%, rgba(223, 218, 243, 0.62), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 244, 255, 0.94));
      border: 1px solid rgba(106, 73, 242, 0.14);
      box-shadow: 0 28px 72px rgba(50, 35, 111, 0.13);
      backdrop-filter: blur(16px);
    }

    .tas-orbit .orbit-shell::before {
      content: "";
      position: absolute;
      inset: 14px;
      border-radius: 26px;
      border: 1px solid rgba(106, 73, 242, 0.08);
      pointer-events: none;
    }

    .tas-orbit .orbit-ring {
      display: none;
    }

    .tas-orbit .core-panel {
      position: relative;
      inset: auto;
      transform: none;
      width: 100%;
      grid-column: 1 / -1;
      padding: 24px;
      border-radius: 26px;
      text-align: left;
      box-shadow: 0 22px 48px rgba(50, 35, 111, 0.18);
    }

    .tas-orbit .core-panel strong {
      margin-bottom: 8px;
      font-size: 20px;
      line-height: 1.25;
    }

    .tas-orbit .core-panel p {
      max-width: 520px;
      margin-bottom: 18px;
      font-size: 13.5px;
      line-height: 1.6;
    }

    .tas-orbit .core-stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .tas-orbit .core-stats div {
      min-height: 82px;
      display: flex;
      align-items: center;
      padding: 13px;
      font-size: 11.5px;
      line-height: 1.45;
    }

    .tas-orbit .orbit-card,
    .tas-orbit .card-a,
    .tas-orbit .card-b,
    .tas-orbit .card-c,
    .tas-orbit .card-d {
      position: relative;
      inset: auto;
      top: auto;
      right: auto;
      bottom: auto;
      left: auto;
      width: 100%;
      min-height: 142px;
      margin: 0;
      padding: 20px;
      border-radius: 22px;
      background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.07), transparent 34%),
        rgba(255, 255, 255, 0.94);
      box-shadow: 0 14px 34px rgba(50, 35, 111, 0.075);
    }

    .tas-orbit .orbit-card strong {
      font-size: 16px;
      line-height: 1.34;
    }

    .tas-orbit .orbit-card span {
      font-size: 13px;
      line-height: 1.58;
    }

    .tas-orbit .proof-list {
      gap: 16px;
    }

    .tas-orbit .proof-item {
      min-height: 146px;
    }
  }

/*===================================================================================
    26. Technical Assessment Software CSS End
===================================================================================*/


/*===================================================================================
    27. Job Readiness Assessments CSS Start
===================================================================================*/
:root {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --bg-purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --slider-dots-color: #D4D2DD;
    --light-bg: #DFDAF3;

    --jr2-bg: #f7f3ff;
    --jr2-bg-soft: #fcfbff;
    --jr2-surface: rgba(255, 255, 255, 0.94);
    --jr2-surface-soft: rgba(255, 255, 255, 0.88);
    --jr2-title: var(--dark-purple);
    --jr2-text: rgba(62, 63, 102, 0.78);
    --jr2-text-soft: rgba(62, 63, 102, 0.62);
    --jr2-brand: var(--purple);
    --jr2-brand-dark: #4D32C8;
    --jr2-brand-soft: rgba(106, 73, 242, 0.08);
    --jr2-line: rgba(106, 73, 242, 0.12);
    --jr2-line-strong: rgba(106, 73, 242, 0.20);
    --jr2-shadow-sm: 0 10px 28px rgba(50, 35, 111, 0.06);
    --jr2-shadow-md: 0 16px 42px rgba(50, 35, 111, 0.085);
    --jr2-shadow-lg: 0 28px 72px rgba(50, 35, 111, 0.15);
    --jr2-shadow-deep: 0 34px 86px rgba(50, 35, 111, 0.18);
    --jr2-radius-xl: 34px;
    --jr2-radius-lg: 26px;
    --jr2-radius-md: 20px;
    --jr2-radius-sm: 16px;
    --jr2-wrap: 1160px;
    --jr2-page-gap: 44px;
    --jr2-section-y: clamp(46px, 4.8vw, 68px);
    --jr2-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  }

  * {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 6% 4%, rgba(106, 73, 242, 0.12), transparent 25%),
      radial-gradient(circle at 94% 8%, rgba(223, 218, 243, 0.92), transparent 26%),
      radial-gradient(circle at 4% 92%, rgba(106, 73, 242, 0.07), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fcfbff 44%, #f7f3ff 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--jr2-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img {
    max-width: 100%;
    display: block;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .jr2-page,
  .jr2-page * {
    box-sizing: border-box;
  }

  .jr2-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    color: var(--jr2-text);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
      radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
      radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
  }

  .jr2-page::before,
  .jr2-page::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    opacity: .72;
  }

  .jr2-page::before {
    width: 300px;
    height: 300px;
    top: 92px;
    left: -120px;
    background: rgba(106, 73, 242, 0.13);
  }

  .jr2-page::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
  }

  .jr2-shell {
    width: min(var(--jr2-wrap), calc(100% - var(--jr2-page-gap)));
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding-top: clamp(116px, 8vw, 138px);
  }

  .jr2-section {
    padding: var(--jr2-section-y) 0;
    position: relative;
  }

  .jr2-section.compact {
    padding-top: clamp(30px, 3.6vw, 48px);
    padding-bottom: clamp(34px, 4.4vw, 56px);
  }

  .jr2-page h1,
  .jr2-page h2,
  .jr2-page h3,
  .jr2-page h4,
  .jr2-page p {
    margin: 0;
    font-family: inherit;
  }

  .jr2-page h1,
  .jr2-page h2,
  .jr2-page h3,
  .jr2-page h4 {
    color: var(--jr2-title);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .jr2-page h1 {
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.06;
    max-width: 760px;
  }

  .jr2-page h2 {
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
  }

  .jr2-page h3 {
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.26;
  }

  .jr2-page p {
    color: var(--jr2-text);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .jr2-muted {
    color: var(--jr2-text-soft);
  }

  .jr2-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    min-height: auto;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--jr2-brand);
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .jr2-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--jr2-brand), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
  }

  .jr2-head {
    display: grid;
    gap: 14px;
    max-width: 800px;
    margin-bottom: clamp(24px, 2.8vw, 36px);
  }

  .jr2-head p {
    max-width: 760px;
  }

  .jr2-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
  }

  .jr2-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    transition: var(--jr2-transition);
  }

  .jr2-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
  }

  .jr2-btn:hover {
    transform: translateY(-3px);
  }

  .jr2-btn:hover::before {
    transform: scaleX(1);
  }

  .jr2-btn.primary {
    color: #fff;
    background: linear-gradient(135deg, var(--jr2-brand), #8A70FF);
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.24);
  }

  .jr2-btn.primary::before {
    background: linear-gradient(135deg, var(--jr2-title), var(--jr2-brand));
  }

  .jr2-btn.primary:hover {
    color: #fff;
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.30);
  }

  .jr2-btn.secondary {
    color: var(--jr2-brand);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
  }

  .jr2-btn.secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
  }

  /* HERO */
  .jr2-hero {
    display: grid;
    grid-template-columns: minmax(0, .98fr) minmax(420px, 1.02fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
  }

  .jr2-hero-copy {
    display: grid;
    gap: 22px;
    align-content: center;
    min-width: 0;
    max-width: 720px;
  }

  .jr2-hero-copy > p {
    max-width: 660px;
    font-size: 16px;
    line-height: 1.76;
  }

  .jr2-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 2px;
  }

  .jr2-metric,
  .jr2-float,
  .jr2-float-wide,
  .jr2-proof-strip,
  .jr2-band,
  .jr2-signal-wrap,
  .jr2-signal-note,
  .jr2-step-card,
  .jr2-final-point {
    background: var(--jr2-surface);
    border: 1px solid var(--jr2-line);
    box-shadow: var(--jr2-shadow-md);
    backdrop-filter: blur(14px);
    transition: var(--jr2-transition);
  }

  .jr2-metric:hover,
  .jr2-float:hover,
  .jr2-float-wide:hover,
  .jr2-band:hover,
  .jr2-signal-wrap:hover,
  .jr2-step-card:hover,
  .jr2-final-point:hover {
    transform: translateY(-4px);
    box-shadow: var(--jr2-shadow-lg);
    border-color: var(--jr2-line-strong);
  }

  .jr2-metric {
    min-width: 0;
    padding: 18px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .jr2-metric strong {
    display: block;
    margin-bottom: 7px;
    color: var(--jr2-title);
    font-size: 18px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
  }

  .jr2-metric span {
    display: block;
    color: var(--jr2-text);
    font-size: 12.8px;
    line-height: 1.55;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .jr2-hero-visual {
    position: relative;
    min-height: 640px;
    min-width: 0;
    display: grid;
    align-items: center;
  }

  .jr2-photo-frame {
    position: relative;
    width: min(100%, 610px);
    min-height: 640px;
    margin-left: auto;
    border-radius: var(--jr2-radius-xl);
    overflow: hidden;
    background: #efeaff;
    border: 1px solid rgba(106, 73, 242, 0.12);
    box-shadow: var(--jr2-shadow-deep);
  }

  .jr2-photo-frame::before,
  .jr2-story-media::before,
  .jr2-band-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(23, 15, 60, 0.02), rgba(23, 15, 60, 0.16)),
      radial-gradient(circle at 0 100%, rgba(106, 73, 242, .18), transparent 42%);
    pointer-events: none;
  }

  .jr2-photo-frame img {
    width: 100%;
    height: 640px;
    object-fit: cover;
  }

  .jr2-float,
  .jr2-float-wide {
    position: absolute;
    z-index: 2;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
  }

  .jr2-float {
    padding: 16px 18px;
    width: min(250px, calc(100% - 24px));
  }

  .jr2-float-wide {
    padding: 18px;
    width: min(310px, calc(100% - 24px));
  }

  .jr2-float.top {
    top: 24px;
    right: -8px;
  }

  .jr2-float.bottom {
    left: -18px;
    bottom: 34px;
  }

  .jr2-float-wide.center {
    right: 18px;
    bottom: 116px;
  }

  .jr2-float-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--jr2-brand);
    font-size: 11px;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 800;
  }

  .jr2-float-label::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--jr2-brand);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, .10);
    flex: 0 0 auto;
  }

  .jr2-float strong,
  .jr2-float-wide strong {
    display: block;
    margin-bottom: 6px;
    color: var(--jr2-title);
    font-size: 18px;
    line-height: 1.24;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .jr2-float p,
  .jr2-float-wide p {
    font-size: 13px;
    line-height: 1.62;
  }

  .jr2-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }

  .jr2-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    color: var(--jr2-brand);
    border: 1px solid rgba(106, 73, 242, 0.10);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
  }

  /* PROOF */
  .jr2-proof-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
    gap: 22px;
    align-items: center;
    padding: 26px 30px;
    border-radius: var(--jr2-radius-lg);
    background:
      radial-gradient(circle at 0 0, rgba(106, 73, 242, .09), transparent 34%),
      linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,245,255,.92));
  }

  .jr2-proof-strip p {
    font-size: 15px;
    line-height: 1.72;
  }

  .jr2-proof-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
  }

  .jr2-proof-logos span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.12);
    color: var(--jr2-brand);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
  }

  /* STORY UNUSED SAFE */
  .jr2-story {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(22px, 4vw, 40px);
    align-items: center;
  }

  .jr2-story-media {
    position: relative;
    min-height: 580px;
    border-radius: var(--jr2-radius-xl);
    overflow: hidden;
    box-shadow: var(--jr2-shadow-lg);
  }

  .jr2-story-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .jr2-story-copy,
  .jr2-signal-copy {
    display: grid;
    gap: 18px;
  }

  .jr2-insight-list {
    display: grid;
    gap: 14px;
    margin-top: 8px;
  }

  .jr2-insight {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-top: 1px solid rgba(106, 73, 242, 0.10);
  }

  .jr2-insight:first-child {
    border-top: 0;
    padding-top: 8px;
  }

  .jr2-insight-no {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(106, 73, 242, 0.08);
    color: var(--jr2-brand);
    font-size: 15px;
    font-weight: 700;
  }

  .jr2-insight-copy {
    display: grid;
    gap: 6px;
  }

  .jr2-insight-copy p {
    font-size: 14px;
  }

  /* BANDS */
  .jr2-bands {
    display: grid;
    gap: 24px;
  }

  .jr2-band {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
    gap: clamp(18px, 3vw, 34px);
    align-items: stretch;
    padding: 20px;
    border-radius: var(--jr2-radius-xl);
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .jr2-band.reverse {
    grid-template-columns: minmax(340px, .95fr) minmax(0, 1.05fr);
  }

  .jr2-band-media {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    min-height: 340px;
    background: #efeaff;
  }

  .jr2-band-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .jr2-band-copy {
    display: grid;
    gap: 14px;
    align-content: center;
    padding: 14px 10px;
  }

  .jr2-band-copy .jr2-kicker {
    min-height: auto;
    font-size: 10.5px;
    padding: 8px 12px;
  }

  .jr2-band-points {
    display: grid;
    gap: 10px;
    margin-top: 4px;
  }

  .jr2-band-points span {
    position: relative;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: var(--jr2-text);
    font-size: 14px;
    line-height: 1.68;
    overflow-wrap: anywhere;
  }

  .jr2-band-points span::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: .65em;
    border-radius: 50%;
    background: var(--jr2-brand);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, .10);
  }

  .jr2-band-note {
    width: fit-content;
    max-width: 100%;
    min-height: 40px;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    color: var(--jr2-brand);
    border: 1px solid rgba(106, 73, 242, 0.10);
    font-size: 12.5px;
    line-height: 1.25;
    font-weight: 700;
    margin-top: 2px;
  }

  /* SIGNALS */
  .jr2-signal-wrap {
    padding: clamp(24px, 3vw, 36px);
    border-radius: var(--jr2-radius-xl);
    background:
      radial-gradient(circle at 0 0, rgba(106, 73, 242, .10), transparent 34%),
      radial-gradient(circle at 100% 0, rgba(223, 218, 243, .42), transparent 30%),
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,243,255,.90));
  }

  .jr2-signal-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(24px, 4vw, 44px);
    align-items: center;
  }

  .jr2-signal-stats {
    display: grid;
    gap: 14px;
  }

  .jr2-bar {
    display: grid;
    gap: 8px;
  }

  .jr2-bar-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    color: var(--jr2-title);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
  }

  .jr2-bar-track {
    height: 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.10);
    overflow: hidden;
  }

  .jr2-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--jr2-brand), #9d8cff);
  }

  .jr2-signal-note {
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--jr2-shadow-sm);
  }

  .jr2-signal-note p {
    font-size: 14px;
    line-height: 1.62;
  }

  .jr2-signal-note p + p {
    margin-top: 6px;
  }

  /* WORKFLOW / USE SAFE */
  .jr2-workflow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    position: relative;
  }

  .jr2-step {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 0;
  }

  .jr2-step::before {
    display: none;
  }

  .jr2-step-no {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--jr2-brand), #8b72ff);
    color: #fff;
    box-shadow: 0 12px 24px rgba(106, 73, 242, .22);
    font-size: 13px;
    font-weight: 700;
  }

  .jr2-step-card {
    display: grid;
    gap: 10px;
    padding: 22px;
    min-height: 100%;
    border-radius: 24px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .jr2-step-card span {
    color: var(--jr2-brand);
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 800;
  }

  .jr2-use-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .jr2-use {
    padding: 0 0 0 22px;
    border-left: 1px solid rgba(106, 73, 242, 0.14);
    display: grid;
    gap: 10px;
  }

  .jr2-use small {
    color: var(--jr2-brand);
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 800;
  }

  /* FINAL CTA */
  .jr2-final {
    position: relative;
    overflow: hidden;
    border-radius: var(--jr2-radius-xl);
    padding: clamp(26px, 3vw, 38px);
    background:
      linear-gradient(115deg, rgba(29, 21, 70, .94) 0%, rgba(53, 33, 119, .88) 48%, rgba(106, 73, 242, .82) 100%),
      url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1400&q=80') center/cover no-repeat;
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
  }

  .jr2-final::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 85% 25%, rgba(255,255,255,0.18), transparent 26%),
      radial-gradient(circle at 12% 100%, rgba(255,255,255,0.08), transparent 22%);
    pointer-events: none;
  }

  .jr2-final-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
    gap: 24px;
    align-items: center;
  }

  .jr2-final-copy {
    display: grid;
    gap: 18px;
  }

  .jr2-final-copy .jr2-kicker {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
  }

  .jr2-final-copy .jr2-kicker::before {
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12);
  }

  .jr2-final-copy h2,
  .jr2-final-copy p {
    color: #fff;
  }

  .jr2-final-copy p {
    color: rgba(255,255,255,.84);
  }

  .jr2-final-copy .jr2-btn.primary {
    background: #fff;
    color: var(--jr2-title);
    box-shadow: 0 18px 38px rgba(0,0,0,.10);
  }

  .jr2-final-copy .jr2-btn.secondary {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.22);
    box-shadow: none;
  }

  .jr2-final-points {
    display: grid;
    gap: 12px;
  }

  .jr2-final-point {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    padding: 15px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: none;
    backdrop-filter: blur(8px);
  }

  .jr2-final-point b {
    width: 30px;
    height: 30px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-weight: 700;
  }

  .jr2-final-point span {
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1.68;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  /* Animation */
  [data-jr2-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--jr2-delay, 0s);
    will-change: opacity, transform;
  }

  [data-jr2-reveal].jr2-inview {
    opacity: 1;
    transform: translateY(0);
  }

  /* Tablet */
  @media (max-width: 1140px) {
    :root {
      --jr2-page-gap: 34px;
      --jr2-section-y: 58px;
    }

    .jr2-shell {
      padding-top: 104px;
    }

    .jr2-hero,
    .jr2-story,
    .jr2-signal-grid,
    .jr2-final-grid,
    .jr2-band,
    .jr2-band.reverse,
    .jr2-proof-strip {
      grid-template-columns: 1fr;
    }

    .jr2-hero-copy {
      max-width: 900px;
    }

    .jr2-hero-visual {
      min-height: auto;
      max-width: 820px;
      display: grid;
      gap: 14px;
    }

    .jr2-photo-frame {
      width: 100%;
      min-height: 540px;
    }

    .jr2-photo-frame img {
      height: 540px;
    }

    .jr2-float.top,
    .jr2-float.bottom,
    .jr2-float-wide.center {
      position: static;
      width: 100%;
    }

    .jr2-proof-logos {
      justify-content: flex-start;
    }

    .jr2-workflow,
    .jr2-use-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 820px) {
    :root {
      --jr2-page-gap: 28px;
      --jr2-section-y: 54px;
    }

    .jr2-shell {
      padding-top: 96px;
    }

    .jr2-section {
      padding: var(--jr2-section-y) 0;
    }

    .jr2-hero-metrics {
      grid-template-columns: 1fr;
    }

    .jr2-photo-frame {
      min-height: 470px;
      border-radius: 28px;
    }

    .jr2-photo-frame img {
      height: 470px;
    }

    .jr2-story-media {
      min-height: 380px;
    }

    .jr2-band {
      padding: 16px;
      border-radius: 26px;
    }

    .jr2-band-media {
      min-height: 260px;
    }

    .jr2-signal-wrap {
      border-radius: 28px;
    }
  }

  /* Mobile */
  @media (max-width: 640px) {
    :root {
      --jr2-page-gap: 24px;
      --jr2-section-y: 46px;
    }

    .jr2-shell {
      width: min(var(--jr2-wrap), calc(100% - var(--jr2-page-gap)));
      padding-top: 88px;
    }

    .jr2-section,
    .jr2-section.compact {
      padding: var(--jr2-section-y) 0;
    }

    .jr2-section.compact:first-child {
      padding-top: 22px;
    }

    .jr2-hero-copy,
    .jr2-head,
    .jr2-signal-copy,
    .jr2-final-copy {
      text-align: center;
      justify-items: center;
    }

    .jr2-page h1 {
      font-size: clamp(30px, 9.3vw, 42px);
      line-height: 1.1;
      max-width: none;
    }

    .jr2-page h2 {
      font-size: clamp(24px, 7.4vw, 34px);
      line-height: 1.16;
    }

    .jr2-page h3 {
      font-size: clamp(18px, 5.7vw, 24px);
      line-height: 1.3;
    }

    .jr2-page p,
    .jr2-hero-copy > p,
    .jr2-head p,
    .jr2-signal-copy p,
    .jr2-final-copy p {
      font-size: 14px;
      line-height: 1.62;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .jr2-kicker {
      padding: 8px 12px;
      gap: 8px;
      font-size: 9.5px;
      letter-spacing: .075em;
      margin-left: auto;
      margin-right: auto;
      justify-content: center;
      text-align: center;
    }

    .jr2-kicker::before {
      width: 7px;
      height: 7px;
    }

    .jr2-btn-row {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: 11px;
    }

    .jr2-btn {
      width: 100%;
      min-width: 0;
      min-height: 50px;
      padding: 13px 16px;
      border-radius: 14px;
      font-size: 14px;
    }

    .jr2-metric {
      display: grid;
      grid-template-columns: 86px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 15px;
      border-radius: 18px;
      text-align: left;
    }

    .jr2-metric strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      margin: 0;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(106, 73, 242, .09);
      color: var(--jr2-title);
      font-size: 13.5px;
      line-height: 1.15;
      text-align: center;
    }

    .jr2-metric span {
      font-size: 12.8px;
      line-height: 1.52;
      text-align: left;
    }

    .jr2-photo-frame {
      min-height: auto;
      border-radius: 22px;
    }

    .jr2-photo-frame img {
      height: 340px;
    }

    .jr2-float,
    .jr2-float-wide {
      padding: 15px;
      border-radius: 18px;
      text-align: center;
    }

    .jr2-float strong,
    .jr2-float-wide strong {
      font-size: 16.5px;
    }

    .jr2-float p,
    .jr2-float-wide p {
      font-size: 13.5px;
      text-align: center;
    }

    .jr2-pill-row {
      justify-content: center;
    }

    .jr2-proof-strip {
      padding: 16px;
      border-radius: 22px;
      text-align: center;
    }

    .jr2-proof-logos {
      justify-content: center;
      gap: 8px;
    }

    .jr2-proof-logos span {
      min-height: 36px;
      padding: 8px 11px;
      font-size: 11.5px;
    }

    .jr2-band {
      gap: 16px;
      padding: 14px;
      border-radius: 22px;
    }

    .jr2-band-media {
      min-height: 240px;
      border-radius: 18px;
    }

    .jr2-band-copy {
      padding: 0;
      text-align: center;
      justify-items: center;
    }

    .jr2-band-points {
      width: 100%;
      gap: 10px;
    }

    .jr2-band-points span {
      display: flex;
      align-items: center;
      min-height: 46px;
      padding: 12px 12px 12px 40px;
      border-radius: 16px;
      background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .07), transparent 34%),
        rgba(255,255,255,.90);
      border: 1px solid rgba(106, 73, 242, .10);
      box-shadow: var(--jr2-shadow-sm);
      color: var(--jr2-text);
      font-size: 13.5px;
      line-height: 1.55;
      text-align: left;
      position: relative;
    }

    .jr2-band-points span::before {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
      height: 8px;
      margin: 0;
    }

    .jr2-band-note {
      margin-left: auto;
      margin-right: auto;
      font-size: 11.5px;
    }

    .jr2-signal-wrap {
      padding: 16px;
      border-radius: 22px;
    }

    .jr2-signal-stats {
      gap: 12px;
    }

    .jr2-bar {
      padding: 13px;
      border-radius: 16px;
      background: rgba(255,255,255,.84);
      border: 1px solid rgba(106,73,242,.10);
      box-shadow: var(--jr2-shadow-sm);
    }

    .jr2-bar-head {
      font-size: 13px;
    }

    .jr2-signal-note {
      padding: 14px;
      border-radius: 16px;
      text-align: center;
    }

    .jr2-signal-note p {
      font-size: 13.5px;
      text-align: center;
    }

    .jr2-workflow,
    .jr2-use-grid {
      grid-template-columns: 1fr;
    }

    .jr2-step {
      gap: 10px;
    }

    .jr2-step-card {
      padding: 16px;
      border-radius: 18px;
      text-align: left;
    }

    .jr2-use {
      padding-left: 16px;
      text-align: left;
    }

    .jr2-final {
      border-radius: 24px;
      padding: 18px;
    }

    .jr2-final-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .jr2-final-point {
      grid-template-columns: 32px minmax(0, 1fr);
      padding: 14px;
      border-radius: 18px;
      text-align: left;
    }

    .jr2-final-point span {
      font-size: 13.5px;
      line-height: 1.58;
    }
  }

  @media (max-width: 430px) {
    :root {
      --jr2-page-gap: 22px;
      --jr2-section-y: 42px;
    }

    .jr2-shell {
      padding-top: 82px;
    }

    .jr2-section.compact:first-child {
      padding-top: 18px;
    }

    .jr2-page h1 {
      font-size: clamp(27px, 8.8vw, 36px);
    }

    .jr2-page h2 {
      font-size: clamp(22px, 7vw, 30px);
    }

    .jr2-photo-frame img {
      height: 320px;
    }

    .jr2-metric {
      grid-template-columns: 78px minmax(0, 1fr);
      padding: 13px;
      border-radius: 16px;
    }

    .jr2-metric strong {
      min-height: 38px;
      font-size: 12.5px;
    }

    .jr2-float,
    .jr2-float-wide,
    .jr2-proof-strip,
    .jr2-band,
    .jr2-signal-wrap,
    .jr2-final {
      padding: 14px;
      border-radius: 18px;
    }

    .jr2-band-points span {
      padding: 11px 11px 11px 38px;
      font-size: 13px;
    }

    .jr2-band-points span::before {
      left: 14px;
    }
  }

  @media (max-width: 360px) {
    :root {
      --jr2-page-gap: 18px;
    }

    .jr2-shell {
      padding-top: 76px;
    }

    .jr2-page h1 {
      font-size: 25px;
    }

    .jr2-kicker {
      font-size: 8.5px;
      letter-spacing: .055em;
      padding: 7px 10px;
    }

    .jr2-metric {
      grid-template-columns: 1fr;
      text-align: center;
    }

    .jr2-metric strong {
      width: fit-content;
      margin: 0 auto;
    }

    .jr2-metric span {
      text-align: center;
    }
  }

  @media (hover: none) {
    .jr2-btn:hover,
    .jr2-metric:hover,
    .jr2-float:hover,
    .jr2-float-wide:hover,
    .jr2-band:hover,
    .jr2-signal-wrap:hover,
    .jr2-step-card:hover,
    .jr2-final-point:hover {
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .jr2-page *,
    .jr2-page *::before,
    .jr2-page *::after,
    [data-jr2-reveal],
    .jr2-btn {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }

    [data-jr2-reveal] {
      opacity: 1 !important;
      transform: none !important;
    }
  }

/*===================================================================================
    27. Job Readiness Assessments CSS End
===================================================================================*/


/*===================================================================================
    28. Self Evaluation Skill Tests CSS Start
===================================================================================*/

:root {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --bg-purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --slider-dots-color: #D4D2DD;
    --light-bg: #DFDAF3;

    --ssl-bg: #f7f3ff;
    --ssl-bg-soft: #fcfbff;
    --ssl-surface: rgba(255, 255, 255, 0.94);
    --ssl-surface-soft: rgba(255, 255, 255, 0.88);
    --ssl-title: var(--dark-purple);
    --ssl-text: rgba(62, 63, 102, 0.78);
    --ssl-muted: rgba(62, 63, 102, 0.62);
    --ssl-brand: var(--purple);
    --ssl-brand-dark: #4D32C8;
    --ssl-line: rgba(106, 73, 242, 0.12);
    --ssl-line-strong: rgba(106, 73, 242, 0.20);
    --ssl-shadow-sm: 0 10px 28px rgba(50, 35, 111, 0.06);
    --ssl-shadow-md: 0 16px 42px rgba(50, 35, 111, 0.085);
    --ssl-shadow-lg: 0 28px 72px rgba(50, 35, 111, 0.15);
    --ssl-shadow-deep: 0 34px 86px rgba(50, 35, 111, 0.18);
    --ssl-radius-xl: 34px;
    --ssl-radius-lg: 26px;
    --ssl-radius-md: 20px;
    --ssl-radius-sm: 16px;
    --ssl-wrap: 1160px;
    --ssl-page-gap: 44px;
    --ssl-section-y: clamp(46px, 4.8vw, 68px);
    --ssl-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  }

  * {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 6% 4%, rgba(106, 73, 242, 0.12), transparent 25%),
      radial-gradient(circle at 94% 8%, rgba(223, 218, 243, 0.92), transparent 26%),
      radial-gradient(circle at 4% 92%, rgba(106, 73, 242, 0.07), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fcfbff 44%, #f7f3ff 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ssl-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img {
    max-width: 100%;
    display: block;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .ssl-page,
  .ssl-page * {
    box-sizing: border-box;
  }

  .ssl-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    color: var(--ssl-text);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
      radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
      radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
  }

  .ssl-page::before,
  .ssl-page::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    opacity: .72;
  }

  .ssl-page::before {
    width: 300px;
    height: 300px;
    top: 92px;
    left: -120px;
    background: rgba(106, 73, 242, 0.13);
  }

  .ssl-page::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
  }

  .ssl-shell {
    width: min(var(--ssl-wrap), calc(100% - var(--ssl-page-gap)));
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .ssl-section {
    position: relative;
    padding: var(--ssl-section-y) 0;
  }

  .ssl-page h1,
  .ssl-page h2,
  .ssl-page h3,
  .ssl-page h4,
  .ssl-page p {
    margin: 0;
    font-family: inherit;
  }

  .ssl-page h1,
  .ssl-page h2,
  .ssl-page h3,
  .ssl-page h4 {
    color: var(--ssl-title);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .ssl-head h2,
  .ssl-cta-copy h2 {
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
  }

  .ssl-hero-copy h1 {
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.06;
    max-width: 780px;
  }

  .ssl-page h3 {
    font-size: clamp(19px, 1.75vw, 24px);
    line-height: 1.3;
  }

  .ssl-head p,
  .ssl-hero-copy p,
  .ssl-feature-item p,
  .ssl-story-copy p,
  .ssl-step p,
  .ssl-proof-copy p,
  .ssl-proof-note,
  .ssl-cta-copy p,
  .ssl-showcase-panel p,
  .ssl-showcase-note span,
  .ssl-proof-panel p,
  .ssl-hero-caption span,
  .ssl-cta-pill span,
  .ssl-preview-row span,
  .ssl-mini-proof span,
  .ssl-metric span {
    margin: 0;
    color: var(--ssl-text);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .ssl-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    min-height: auto;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--ssl-brand);
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .ssl-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ssl-brand), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
  }

  .ssl-head {
    display: grid;
    gap: 14px;
    max-width: 820px;
    margin-bottom: clamp(24px, 2.8vw, 36px);
  }

  .ssl-head p {
    max-width: 760px;
  }

  .ssl-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  .ssl-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    transition: var(--ssl-transition);
  }

  .ssl-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
  }

  .ssl-btn:hover {
    transform: translateY(-3px);
  }

  .ssl-btn:hover::before {
    transform: scaleX(1);
  }

  .ssl-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--ssl-brand), #8A70FF);
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.24);
  }

  .ssl-btn-primary::before {
    background: linear-gradient(135deg, var(--ssl-title), var(--ssl-brand));
  }

  .ssl-btn-primary:hover {
    color: #fff;
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.30);
  }

  .ssl-btn-secondary {
    color: var(--ssl-brand);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
  }

  .ssl-btn-secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
  }

  .ssl-surface,
  .ssl-metric,
  .ssl-float-card,
  .ssl-showcase-panel,
  .ssl-feature-item,
  .ssl-step,
  .ssl-proof-panel,
  .ssl-cta-pill {
    background: var(--ssl-surface);
    border: 1px solid var(--ssl-line);
    box-shadow: var(--ssl-shadow-md);
    backdrop-filter: blur(14px);
    transition: var(--ssl-transition);
  }

  .ssl-metric:hover,
  .ssl-float-card:hover,
  .ssl-showcase-panel:hover,
  .ssl-feature-item:hover,
  .ssl-step:hover,
  .ssl-cta-pill:hover {
    transform: translateY(-4px);
    box-shadow: var(--ssl-shadow-lg);
    border-color: var(--ssl-line-strong);
  }

  /* HERO */
  .ssl-hero {
    padding: clamp(116px, 8vw, 138px) 0 clamp(42px, 5vw, 64px);
  }

  .ssl-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
  }

  .ssl-hero-copy {
    display: grid;
    gap: 22px;
    align-content: center;
    min-width: 0;
    max-width: 730px;
  }

  .ssl-hero-copy h1 {
    margin: 0;
  }

  .ssl-hero-copy p {
    max-width: 660px;
    font-size: 16px;
    line-height: 1.76;
  }

  .ssl-hero-copy .ssl-btn-row {
    margin-top: 0;
  }

  .ssl-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 2px;
  }

  .ssl-metric {
    min-width: 0;
    padding: 18px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .ssl-metric strong {
    display: block;
    margin-bottom: 7px;
    color: var(--ssl-title);
    font-size: 22px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
  }

  .ssl-metric span {
    display: block;
    font-size: 12.8px;
    line-height: 1.55;
  }

  .ssl-hero-visual {
    position: relative;
    min-height: 650px;
    min-width: 0;
    display: grid;
    align-items: center;
  }

  .ssl-hero-media {
    position: relative;
    width: min(100%, 610px);
    min-height: 650px;
    margin-left: auto;
    border-radius: var(--ssl-radius-xl);
    overflow: hidden;
    background: #efeaff;
    border: 1px solid rgba(106, 73, 242, 0.12);
    box-shadow: var(--ssl-shadow-deep);
  }

  .ssl-hero-media img {
    width: 100%;
    height: 650px;
    object-fit: cover;
  }

  .ssl-hero-media::after,
  .ssl-story-media::after,
  .ssl-showcase-media::after,
  .ssl-cta-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(23, 15, 60, 0.02), rgba(23, 15, 60, 0.16)),
      radial-gradient(circle at 0 100%, rgba(106, 73, 242, .18), transparent 42%);
    pointer-events: none;
  }

  .ssl-float-card {
    position: absolute;
    z-index: 3;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
  }

  .ssl-mini-proof {
    left: -16px;
    top: 30px;
    width: min(258px, calc(100% - 24px));
    padding: 18px;
  }

  .ssl-preview-card {
    right: -18px;
    bottom: 34px;
    width: min(350px, calc(100% - 24px));
    padding: 20px;
  }

  .ssl-float-card h3,
  .ssl-proof-panel h3,
  .ssl-step h3,
  .ssl-feature-item h3,
  .ssl-cta-box h3,
  .ssl-showcase-panel h3 {
    margin: 0;
    color: var(--ssl-title);
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
  }

  .ssl-mini-proof strong {
    display: block;
    margin: 6px 0 4px;
    color: var(--ssl-brand);
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
  }

  .ssl-mini-proof span {
    display: block;
    font-size: 13px;
    line-height: 1.58;
  }

  .ssl-preview-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
  }

  .ssl-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    color: var(--ssl-brand);
    border: 1px solid rgba(106, 73, 242, 0.10);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .ssl-preview-score {
    color: var(--ssl-title);
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.04em;
  }

  .ssl-preview-list {
    display: grid;
    gap: 12px;
  }

  .ssl-preview-row {
    display: grid;
    gap: 7px;
  }

  .ssl-preview-row span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--ssl-text);
    font-size: 12.5px;
    line-height: 1.4;
  }

  .ssl-bar {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.10);
    overflow: hidden;
  }

  .ssl-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ssl-brand), #9d8cff);
  }

  .ssl-hero-caption {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    padding: 18px 20px;
    border-radius: 22px;
    background: rgba(29, 21, 70, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    color: #fff;
  }

  .ssl-hero-caption strong {
    display: block;
    color: #fff;
    font-size: 15.5px;
    line-height: 1.4;
    font-weight: 700;
  }

  .ssl-hero-caption span {
    display: block;
    margin-top: 6px;
    color: rgba(255,255,255,.78);
    font-size: 13px;
    line-height: 1.6;
  }

  /* STORY SECTION */
  .ssl-story-grid {
    display: grid;
    grid-template-columns: minmax(320px, .92fr) minmax(0, 1.08fr);
    gap: 30px;
    align-items: center;
  }

  .ssl-story-media {
    position: relative;
    min-height: 560px;
    border-radius: var(--ssl-radius-xl);
    overflow: hidden;
    background: #efeaff;
    border: 1px solid rgba(106, 73, 242, 0.12);
    box-shadow: var(--ssl-shadow-deep);
  }

  .ssl-story-media img {
    width: 100%;
    height: 560px;
    object-fit: cover;
  }

  .ssl-story-chip {
    position: absolute;
    left: 22px;
    top: 22px;
    z-index: 2;
    max-width: 250px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(106, 73, 242, 0.10);
    box-shadow: var(--ssl-shadow-sm);
    backdrop-filter: blur(12px);
    color: var(--ssl-text);
    font-size: 13px;
    line-height: 1.62;
  }

  .ssl-story-chip strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ssl-title);
    font-size: 14.5px;
    font-weight: 700;
  }

  .ssl-story-copy {
    display: grid;
    gap: 18px;
    padding: 10px 0;
  }

  .ssl-story-copy p {
    max-width: 640px;
  }

  .ssl-feature-list {
    display: grid;
    gap: 14px;
    margin-top: 8px;
  }

  .ssl-feature-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 18px;
    border-radius: 22px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .ssl-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(106,73,242,.14), rgba(223,218,243,.96));
    position: relative;
  }

  .ssl-feature-icon::before {
    content: "";
    position: absolute;
    inset: 13px;
    border-radius: 9px;
    background: var(--ssl-brand);
  }

  .ssl-feature-item p {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.62;
  }

  /* SHOWCASE */
  .ssl-showcase-wrap {
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--ssl-radius-xl);
    background:
      radial-gradient(circle at 0 0, rgba(106, 73, 242, .09), transparent 34%),
      linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,245,255,.92));
  }

  .ssl-showcase-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .88fr);
    gap: 26px;
    align-items: stretch;
  }

  .ssl-showcase-left {
    display: grid;
    gap: 18px;
  }

  .ssl-showcase-panel {
    padding: 24px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, .07), transparent 34%),
      rgba(255,255,255,.88);
  }

  .ssl-showcase-panel p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.68;
  }

  .ssl-showcase-tags {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  .ssl-showcase-tags span,
  .ssl-proof-inline span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.10);
    color: var(--ssl-brand);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
  }

  .ssl-showcase-media {
    position: relative;
    min-height: 100%;
    border-radius: 26px;
    overflow: hidden;
    background: #efeaff;
    box-shadow: var(--ssl-shadow-lg);
  }

  .ssl-showcase-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ssl-showcase-note {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(106, 73, 242, 0.10);
    box-shadow: var(--ssl-shadow-sm);
    backdrop-filter: blur(10px);
  }

  .ssl-showcase-note strong,
  .ssl-cta-pill strong {
    display: block;
    color: var(--ssl-title);
    font-size: 14.5px;
    line-height: 1.5;
    font-weight: 700;
  }

  .ssl-showcase-note span,
  .ssl-cta-pill span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.6;
  }

  /* STEPS */
  .ssl-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .ssl-step {
    position: relative;
    display: grid;
    align-content: start;
    padding: 24px;
    border-radius: var(--ssl-radius-lg);
    background:
      radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%),
      rgba(255, 255, 255, 0.90);
  }

  .ssl-step-no {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--ssl-brand), #8b72ff);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(106, 73, 242, .20);
  }

  .ssl-step h3 {
    margin-top: 16px;
  }

  .ssl-step p {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.62;
  }

  .ssl-step small {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-top: 14px;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.10);
    color: var(--ssl-brand);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  /* PROOF BAND */
  .ssl-proof-band {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 3vw, 34px);
    border-radius: var(--ssl-radius-xl);
    background:
      radial-gradient(circle at right top, rgba(255,255,255,0.14), transparent 28%),
      linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
  }

  .ssl-proof-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr);
    gap: 26px;
    align-items: center;
  }

  .ssl-proof-media {
    position: relative;
    min-height: 420px;
    border-radius: 26px;
    overflow: hidden;
    background: rgba(255,255,255,.08);
  }

  .ssl-proof-media img {
    width: 100%;
    height: 420px;
    object-fit: cover;
  }

  .ssl-proof-copy {
    color: #fff;
    display: grid;
    gap: 18px;
  }

  .ssl-proof-copy .ssl-eyebrow {
    color: #fff;
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.16);
    box-shadow: none;
  }

  .ssl-proof-copy .ssl-eyebrow::before {
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255,255,255,.12);
  }

  .ssl-proof-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.12;
  }

  .ssl-proof-copy p {
    color: rgba(255,255,255,.80);
  }

  .ssl-proof-panels {
    display: grid;
    gap: 14px;
  }

  .ssl-proof-panel {
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.13);
    box-shadow: none;
  }

  .ssl-proof-panel h3 {
    color: #fff;
    font-size: 16px;
  }

  .ssl-proof-panel p {
    margin-top: 7px;
    color: rgba(255,255,255,.74);
    font-size: 13.5px;
    line-height: 1.65;
  }

  .ssl-proof-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .ssl-proof-inline span {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.14);
    color: rgba(255,255,255,.86);
  }

  /* CTA */
  .ssl-cta-box {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: 26px;
    align-items: center;
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--ssl-radius-xl);
    background:
      radial-gradient(circle at 0 0, rgba(106, 73, 242, .09), transparent 34%),
      linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,245,255,.92));
  }

  .ssl-cta-copy {
    display: grid;
    gap: 16px;
  }

  .ssl-cta-copy h2 {
    max-width: 720px;
  }

  .ssl-cta-copy p {
    max-width: 640px;
  }

  .ssl-cta-box .ssl-btn-row {
    margin-top: 2px;
  }

  .ssl-cta-visual {
    position: relative;
    min-height: 360px;
    border-radius: 26px;
    overflow: hidden;
    background: #efeaff;
    box-shadow: var(--ssl-shadow-lg);
  }

  .ssl-cta-visual img {
    width: 100%;
    height: 360px;
    object-fit: cover;
  }

  .ssl-cta-pill {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.90);
  }

  /* RESPONSIVE */
  @media (max-width: 1120px) {
    :root {
      --ssl-page-gap: 34px;
      --ssl-section-y: 58px;
    }

    .ssl-hero-grid,
    .ssl-story-grid,
    .ssl-showcase-grid,
    .ssl-proof-grid,
    .ssl-cta-box {
      grid-template-columns: 1fr;
    }

    .ssl-hero-copy {
      max-width: 900px;
    }

    .ssl-hero-visual {
      min-height: auto;
      max-width: 820px;
      display: grid;
      gap: 14px;
    }

    .ssl-hero-media {
      width: 100%;
      min-height: 560px;
    }

    .ssl-hero-media img {
      height: 560px;
    }

    .ssl-mini-proof,
    .ssl-preview-card {
      position: static;
      width: 100%;
    }

    .ssl-story-media,
    .ssl-story-media img {
      min-height: 480px;
      height: 480px;
    }

    .ssl-proof-media,
    .ssl-proof-media img {
      min-height: 420px;
      height: 420px;
    }

    .ssl-steps {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 767px) {
    :root {
      --ssl-page-gap: 24px;
      --ssl-section-y: 46px;
    }

    .ssl-shell {
      width: min(var(--ssl-wrap), calc(100% - var(--ssl-page-gap)));
    }

    .ssl-hero {
      padding: 96px 0 34px;
    }

    .ssl-section {
      padding: var(--ssl-section-y) 0;
    }

    .ssl-hero-copy,
    .ssl-head,
    .ssl-story-copy,
    .ssl-proof-copy,
    .ssl-cta-copy {
      text-align: center;
      justify-items: center;
    }

    .ssl-hero-copy h1 {
      font-size: clamp(30px, 9.3vw, 42px);
      line-height: 1.1;
      max-width: none;
    }

    .ssl-head h2,
    .ssl-cta-copy h2,
    .ssl-proof-copy h2 {
      font-size: clamp(24px, 7.4vw, 34px);
      line-height: 1.16;
      max-width: none;
    }

    .ssl-page h3 {
      font-size: clamp(17px, 5.5vw, 22px);
    }

    .ssl-head p,
    .ssl-hero-copy p,
    .ssl-feature-item p,
    .ssl-story-copy p,
    .ssl-step p,
    .ssl-proof-copy p,
    .ssl-cta-copy p,
    .ssl-showcase-panel p {
      font-size: 14px;
      line-height: 1.62;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .ssl-eyebrow {
      padding: 8px 12px;
      gap: 8px;
      font-size: 9.5px;
      letter-spacing: .075em;
      margin-left: auto;
      margin-right: auto;
    }

    .ssl-eyebrow::before {
      width: 7px;
      height: 7px;
    }

    .ssl-btn-row {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: 11px;
    }

    .ssl-btn {
      width: 100%;
      min-width: 0;
      min-height: 50px;
      padding: 13px 16px;
      border-radius: 14px;
      font-size: 14px;
    }

    .ssl-metrics {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .ssl-metric {
      display: grid;
      grid-template-columns: 86px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 15px;
      border-radius: 18px;
      text-align: left;
    }

    .ssl-metric strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      margin: 0;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(106, 73, 242, .09);
      color: var(--ssl-title);
      font-size: 13.5px;
      line-height: 1.15;
      text-align: center;
    }

    .ssl-metric span {
      font-size: 12.8px;
      line-height: 1.52;
      text-align: left;
    }

    .ssl-hero-media {
      min-height: auto;
      border-radius: 22px;
    }

    .ssl-hero-media img {
      height: 340px;
    }

    .ssl-hero-caption {
      left: 14px;
      right: 14px;
      bottom: 14px;
      padding: 14px;
      border-radius: 16px;
      text-align: center;
    }

    .ssl-float-card {
      padding: 15px;
      border-radius: 18px;
      text-align: center;
    }

    .ssl-preview-top {
      display: grid;
      grid-template-columns: 1fr;
      text-align: center;
      gap: 10px;
    }

    .ssl-preview-badge {
      margin: 0 auto;
    }

    .ssl-story-media,
    .ssl-story-media img,
    .ssl-proof-media,
    .ssl-proof-media img {
      min-height: 320px;
      height: 320px;
      border-radius: 20px;
    }

    .ssl-story-chip {
      position: static;
      max-width: none;
      margin-top: 14px;
      text-align: center;
    }

    .ssl-feature-item {
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 12px;
      padding: 15px;
      border-radius: 18px;
      text-align: left;
    }

    .ssl-feature-icon {
      width: 40px;
      height: 40px;
      border-radius: 13px;
    }

    .ssl-feature-item h3,
    .ssl-feature-item p {
      text-align: left;
    }

    .ssl-showcase-wrap,
    .ssl-proof-band,
    .ssl-cta-box {
      padding: 16px;
      border-radius: 22px;
    }

    .ssl-showcase-panel,
    .ssl-step,
    .ssl-proof-panel {
      padding: 16px;
      border-radius: 18px;
    }

    .ssl-showcase-tags,
    .ssl-proof-inline {
      justify-content: center;
    }

    .ssl-showcase-media,
    .ssl-cta-visual {
      min-height: 320px;
      border-radius: 20px;
    }

    .ssl-showcase-media img,
    .ssl-cta-visual img {
      height: 320px;
    }

    .ssl-showcase-note,
    .ssl-cta-pill {
      left: 14px;
      right: 14px;
      bottom: 14px;
      padding: 14px;
      border-radius: 16px;
      text-align: center;
    }

    .ssl-step {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 10px 12px;
      align-items: center;
      text-align: left;
    }

    .ssl-step-no {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      font-size: 13px;
    }

    .ssl-step h3 {
      margin: 0;
      font-size: 16.5px;
      line-height: 1.32;
      text-align: left;
    }

    .ssl-step p,
    .ssl-step small {
      grid-column: 1 / -1;
    }

    .ssl-step p {
      margin-top: 2px;
      font-size: 13.5px;
      text-align: left;
    }

    .ssl-step small {
      justify-self: start;
      white-space: normal;
      font-size: 10.5px;
      text-align: left;
    }

    .ssl-proof-grid {
      gap: 18px;
    }

    .ssl-proof-panel p {
      text-align: center;
      font-size: 13.5px;
    }

    .ssl-cta-visual {
      min-height: 320px;
    }
  }

  @media (max-width: 430px) {
    :root {
      --ssl-page-gap: 22px;
      --ssl-section-y: 42px;
    }

    .ssl-hero {
      padding-top: 88px;
      padding-bottom: 30px;
    }

    .ssl-hero-copy h1 {
      font-size: clamp(27px, 8.8vw, 36px);
    }

    .ssl-head h2,
    .ssl-cta-copy h2,
    .ssl-proof-copy h2 {
      font-size: clamp(22px, 7vw, 30px);
    }

    .ssl-hero-media img {
      height: 320px;
    }

    .ssl-metric {
      grid-template-columns: 78px minmax(0, 1fr);
      padding: 13px;
      border-radius: 16px;
    }

    .ssl-metric strong {
      min-height: 38px;
      font-size: 12.5px;
    }

    .ssl-float-card,
    .ssl-showcase-wrap,
    .ssl-proof-band,
    .ssl-cta-box,
    .ssl-showcase-panel,
    .ssl-step,
    .ssl-proof-panel,
    .ssl-feature-item {
      padding: 14px;
      border-radius: 18px;
    }

    .ssl-step {
      grid-template-columns: 40px minmax(0, 1fr);
      column-gap: 11px;
    }

    .ssl-step-no {
      width: 40px;
      height: 40px;
      border-radius: 13px;
    }

    .ssl-step h3 {
      font-size: 15.5px;
    }
  }

  @media (max-width: 360px) {
    :root {
      --ssl-page-gap: 18px;
    }

    .ssl-hero {
      padding-top: 82px;
    }

    .ssl-hero-copy h1 {
      font-size: 25px;
    }

    .ssl-eyebrow {
      font-size: 8.5px;
      letter-spacing: .055em;
      padding: 7px 10px;
    }

    .ssl-metric {
      grid-template-columns: 1fr;
      text-align: center;
    }

    .ssl-metric strong {
      width: fit-content;
      margin: 0 auto;
    }

    .ssl-metric span {
      text-align: center;
    }
  }

  @media (hover: none) {
    .ssl-btn:hover,
    .ssl-metric:hover,
    .ssl-float-card:hover,
    .ssl-showcase-panel:hover,
    .ssl-feature-item:hover,
    .ssl-step:hover,
    .ssl-cta-pill:hover {
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ssl-page *,
    .ssl-page *::before,
    .ssl-page *::after,
    .ssl-btn {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }

/*===================================================================================
    28. Self Evaluation Skill Tests CSS End
===================================================================================*/


/*===================================================================================
    29. Assessment Library CSS Start
===================================================================================*/

:root {
    --sa-bg: #f7f3ff;
    --sa-bg-soft: #fcfbff;
    --sa-surface: rgba(255, 255, 255, 0.94);
    --sa-surface-soft: rgba(255, 255, 255, 0.88);
    --sa-title: var(--dark-purple, #32236F);
    --sa-text: rgba(62, 63, 102, 0.78);
    --sa-muted: rgba(62, 63, 102, 0.62);
    --sa-brand: var(--purple, #6A49F2);
    --sa-brand-dark: #4D32C8;
    --sa-success: #1EA97C;
    --sa-line: rgba(106, 73, 242, 0.12);
    --sa-line-strong: rgba(106, 73, 242, 0.20);
    --sa-shadow-sm: 0 10px 28px rgba(50, 35, 111, 0.06);
    --sa-shadow-md: 0 16px 42px rgba(50, 35, 111, 0.085);
    --sa-shadow-lg: 0 28px 72px rgba(50, 35, 111, 0.15);
    --sa-shadow-deep: 0 34px 86px rgba(50, 35, 111, 0.18);
    --sa-radius-xl: 34px;
    --sa-radius-lg: 26px;
    --sa-radius-md: 20px;
    --sa-radius-sm: 16px;
    --sa-container: 1160px;
    --sa-page-gap: 44px;
    --sa-section-y: clamp(46px, 4.8vw, 68px);
    --sa-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

.premium-assessment-page,
.premium-assessment-page *,
.premium-assessment-page *::before,
.premium-assessment-page *::after {
    box-sizing: border-box;
}

.premium-assessment-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    padding: 0;
    color: var(--sa-text);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
        radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
        linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(252, 251, 255, .96) 44%, rgba(247, 243, 255, .98) 100%);
}

.premium-assessment-page::before,
.premium-assessment-page::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    opacity: .72;
}

.premium-assessment-page::before {
    width: 300px;
    height: 300px;
    top: 92px;
    left: -120px;
    background: rgba(106, 73, 242, 0.13);
}

.premium-assessment-page::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
}

.premium-assessment-page a {
    color: inherit;
    text-decoration: none;
}

.premium-assessment-page img,
.premium-assessment-page svg {
    display: block;
    max-width: 100%;
}

.premium-assessment-page h1,
.premium-assessment-page h2,
.premium-assessment-page h3,
.premium-assessment-page h4,
.premium-assessment-page p,
.premium-assessment-page blockquote {
    margin: 0;
    font-family: inherit;
}

.premium-assessment-page .sa-container {
    width: min(var(--sa-container), calc(100% - var(--sa-page-gap)));
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.premium-assessment-page .sa-section {
    position: relative;
    padding: var(--sa-section-y) 0;
}

.premium-assessment-page .sa-soft {
    background:
        radial-gradient(circle at 0 0, rgba(106, 73, 242, .05), transparent 26%),
        linear-gradient(180deg, rgba(246, 244, 254, .66), rgba(255, 255, 255, 0));
}

.premium-assessment-page .sa-title-xl,
.premium-assessment-page .sa-title-lg,
.premium-assessment-page .sa-title-md,
.premium-assessment-page .sa-title-sm {
    margin: 0;
    color: var(--sa-title);
    font-weight: 700;
    letter-spacing: -0.045em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.premium-assessment-page .sa-title-xl {
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.06;
}

.premium-assessment-page .sa-title-lg {
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
}

.premium-assessment-page .sa-title-md {
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.15;
}

.premium-assessment-page .sa-title-sm {
    font-size: clamp(18px, 1.55vw, 22px);
    line-height: 1.32;
}

.premium-assessment-page .sa-text-lg,
.premium-assessment-page .sa-text-md,
.premium-assessment-page .sa-text-sm,
.premium-assessment-page .sa-story-list-item p,
.premium-assessment-page .sa-track span,
.premium-assessment-page .sa-mini-metric span,
.premium-assessment-page .sa-trust-copy p,
.premium-assessment-page .sa-insight-badge span,
.premium-assessment-page .sa-flow-step p,
.premium-assessment-page .sa-outcome-item p,
.premium-assessment-page .sa-quote-shell .role {
    margin: 0;
    color: var(--sa-text);
    font-weight: 400;
    overflow-wrap: anywhere;
}

.premium-assessment-page .sa-text-lg {
    font-size: 16px;
    line-height: 1.76;
}

.premium-assessment-page .sa-text-md {
    font-size: 15.5px;
    line-height: 1.72;
}

.premium-assessment-page .sa-text-sm {
    font-size: 14px;
    line-height: 1.62;
}

.premium-assessment-page .sa-highlight {
    color: var(--sa-brand);
}

.premium-assessment-page .sa-eyebrow,
.premium-assessment-page .sa-feature-block .topline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    min-height: auto;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--sa-brand);
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
}

.premium-assessment-page .sa-eyebrow::before,
.premium-assessment-page .sa-feature-block .topline::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sa-brand), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
}

.premium-assessment-page .sa-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.premium-assessment-page .sa-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    transition: var(--sa-transition);
}

.premium-assessment-page .sa-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
}

.premium-assessment-page .sa-btn:hover {
    transform: translateY(-3px);
}

.premium-assessment-page .sa-btn:hover::before {
    transform: scaleX(1);
}

.premium-assessment-page .sa-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--sa-brand), #8A70FF);
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.24);
}

.premium-assessment-page .sa-btn-primary::before {
    background: linear-gradient(135deg, var(--sa-title), var(--sa-brand));
}

.premium-assessment-page .sa-btn-primary:hover {
    color: #fff;
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.30);
}

.premium-assessment-page .sa-btn-secondary {
    color: var(--sa-brand);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
}

.premium-assessment-page .sa-btn-secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
}

.premium-assessment-page .sa-mini-metric,
.premium-assessment-page .sa-floating-card,
.premium-assessment-page .sa-glass-panel,
.premium-assessment-page .sa-trust-row,
.premium-assessment-page .sa-story-card,
.premium-assessment-page .sa-story-media,
.premium-assessment-page .sa-feature-block,
.premium-assessment-page .sa-feature-photo,
.premium-assessment-page .sa-flow-strip,
.premium-assessment-page .sa-flow-step,
.premium-assessment-page .sa-quote-shell,
.premium-assessment-page .sa-outcome-item,
.premium-assessment-page .sa-cta-shell,
.premium-assessment-page .sa-story-list-item {
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    box-shadow: var(--sa-shadow-md);
    backdrop-filter: blur(14px);
    transition: var(--sa-transition);
}

.premium-assessment-page .sa-mini-metric:hover,
.premium-assessment-page .sa-floating-card:hover,
.premium-assessment-page .sa-glass-panel:hover,
.premium-assessment-page .sa-trust-row:hover,
.premium-assessment-page .sa-story-card:hover,
.premium-assessment-page .sa-feature-block:hover,
.premium-assessment-page .sa-feature-photo:hover,
.premium-assessment-page .sa-flow-step:hover,
.premium-assessment-page .sa-quote-shell:hover,
.premium-assessment-page .sa-outcome-item:hover,
.premium-assessment-page .sa-cta-shell:hover,
.premium-assessment-page .sa-story-list-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--sa-shadow-lg);
    border-color: var(--sa-line-strong);
}

/* Hero */
.premium-assessment-page .sa-hero {
    padding: clamp(116px, 8vw, 138px) 0 clamp(42px, 5vw, 64px);
}

.premium-assessment-page .sa-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.premium-assessment-page .sa-hero-copy {
    display: grid;
    gap: 22px;
    align-content: center;
    min-width: 0;
    max-width: 730px;
    padding: 0;
}

.premium-assessment-page .sa-hero-copy .sa-title-xl {
    max-width: 760px;
}

.premium-assessment-page .sa-hero-copy .sa-text-lg {
    max-width: 660px;
}

.premium-assessment-page .sa-mini-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 2px;
    max-width: 610px;
}

.premium-assessment-page .sa-mini-metric {
    min-width: 0;
    padding: 18px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%),
        rgba(255, 255, 255, 0.90);
}

.premium-assessment-page .sa-mini-metric strong {
    display: block;
    margin-bottom: 7px;
    color: var(--sa-title);
    font-size: 18px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.premium-assessment-page .sa-mini-metric span {
    display: block;
    font-size: 12.8px;
    line-height: 1.55;
}

.premium-assessment-page .sa-hero-visual {
    position: relative;
    min-height: 650px;
    min-width: 0;
    display: grid;
    align-items: center;
}

.premium-assessment-page .sa-hero-photo {
    position: relative;
    width: min(100%, 610px);
    min-height: 650px;
    margin-left: auto;
    inset: auto;
    border-radius: var(--sa-radius-xl);
    overflow: hidden;
    background: #efeaff;
    border: 1px solid rgba(106, 73, 242, 0.12);
    box-shadow: var(--sa-shadow-deep);
}

.premium-assessment-page .sa-hero-photo img {
    width: 100%;
    height: 650px;
    object-fit: cover;
}

.premium-assessment-page .sa-hero-photo::after,
.premium-assessment-page .sa-story-media::after,
.premium-assessment-page .sa-feature-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(23, 15, 60, 0.02), rgba(23, 15, 60, 0.16)),
        radial-gradient(circle at 0 100%, rgba(106, 73, 242, .18), transparent 42%);
    pointer-events: none;
}

.premium-assessment-page .sa-floating-card,
.premium-assessment-page .sa-glass-panel {
    position: absolute;
    z-index: 3;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 24px;
}

.premium-assessment-page .sa-floating-card {
    right: -12px;
    top: 32px;
    width: min(270px, calc(100% - 24px));
    padding: 20px;
}

.premium-assessment-page .sa-floating-card .label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--sa-brand);
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
}

.premium-assessment-page .sa-floating-card .label::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sa-success);
    box-shadow: 0 0 0 5px rgba(30, 169, 124, .12);
}

.premium-assessment-page .sa-floating-card strong {
    display: block;
    margin-bottom: 8px;
    color: var(--sa-brand);
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.premium-assessment-page .sa-floating-card p {
    color: var(--sa-text);
    font-size: 13.5px;
    line-height: 1.62;
}

.premium-assessment-page .sa-glass-panel {
    left: -18px;
    right: 58px;
    bottom: 28px;
    padding: 18px;
}

.premium-assessment-page .sa-glass-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.premium-assessment-page .sa-glass-top strong {
    display: block;
    color: var(--sa-title);
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.premium-assessment-page .sa-glass-top span {
    display: block;
    margin-top: 4px;
    color: var(--sa-text);
    font-size: 13px;
    line-height: 1.55;
}

.premium-assessment-page .sa-glass-pill {
    flex: 0 0 auto;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.10);
    color: var(--sa-brand);
    font-size: 11px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 800;
    white-space: nowrap;
}

.premium-assessment-page .sa-track-list {
    display: grid;
    gap: 10px;
}

.premium-assessment-page .sa-track {
    position: relative;
    padding: 13px 13px 13px 50px;
    border-radius: 16px;
    background: rgba(106, 73, 242, 0.06);
    border: 1px solid rgba(106, 73, 242, 0.10);
}

.premium-assessment-page .sa-track::before {
    content: attr(data-index);
    position: absolute;
    left: 13px;
    top: 14px;
    width: 26px;
    height: 26px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(106, 73, 242, 0.10);
    color: var(--sa-brand);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
}

.premium-assessment-page .sa-track strong {
    display: block;
    margin-bottom: 4px;
    color: var(--sa-title);
    font-size: 13.5px;
    line-height: 1.35;
    font-weight: 700;
}

.premium-assessment-page .sa-track span {
    display: block;
    font-size: 12.8px;
    line-height: 1.55;
}

/* Trust */
.premium-assessment-page .sa-trust-row {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    gap: 22px;
    align-items: center;
    padding: 24px 28px;
    border-radius: var(--sa-radius-lg);
    background:
        radial-gradient(circle at 0 0, rgba(106, 73, 242, .09), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 245, 255, .92));
}

.premium-assessment-page .sa-trust-copy strong {
    display: block;
    margin-bottom: 8px;
    color: var(--sa-title);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

.premium-assessment-page .sa-trust-copy p {
    font-size: 14.5px;
    line-height: 1.68;
}

.premium-assessment-page .sa-trust-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.premium-assessment-page .sa-trust-tags span,
.premium-assessment-page .sa-inline-points span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.10);
    color: var(--sa-brand);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
}

/* Section Head */
.premium-assessment-page .sa-section-head {
    display: grid;
    gap: 14px;
    max-width: 820px;
    margin-bottom: clamp(24px, 2.8vw, 36px);
}

.premium-assessment-page .sa-section-head .sa-title-lg,
.premium-assessment-page .sa-section-head .sa-text-md {
    max-width: 780px;
}

/* Story */
.premium-assessment-page .sa-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
    gap: 26px;
    align-items: stretch;
}

.premium-assessment-page .sa-story-card {
    padding: 28px;
    border-radius: var(--sa-radius-xl);
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%),
        rgba(255, 255, 255, .92);
}

.premium-assessment-page .sa-story-card .sa-title-md {
    margin-bottom: 14px;
}

.premium-assessment-page .sa-story-card .sa-text-md {
    margin-bottom: 22px;
}

.premium-assessment-page .sa-story-list {
    display: grid;
    gap: 14px;
}

.premium-assessment-page .sa-story-list-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .86);
    box-shadow: var(--sa-shadow-sm);
}

.premium-assessment-page .sa-story-list-icon,
.premium-assessment-page .sa-step-no,
.premium-assessment-page .sa-quote-mark {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(106, 73, 242, .14), rgba(223, 218, 243, .96));
    color: var(--sa-brand);
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
}

.premium-assessment-page .sa-story-list-item strong {
    display: block;
    margin-bottom: 5px;
    color: var(--sa-title);
    font-size: 15px;
    line-height: 1.38;
    font-weight: 700;
}

.premium-assessment-page .sa-story-list-item p {
    font-size: 13.5px;
    line-height: 1.6;
}

.premium-assessment-page .sa-story-media {
    position: relative;
    min-height: 580px;
    overflow: hidden;
    border-radius: var(--sa-radius-xl);
    background: #efeaff;
}

.premium-assessment-page .sa-story-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.premium-assessment-page .sa-insight-badge {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .90);
    border: 1px solid rgba(106, 73, 242, 0.10);
    box-shadow: var(--sa-shadow-sm);
    backdrop-filter: blur(12px);
}

.premium-assessment-page .sa-insight-badge strong {
    display: block;
    margin-bottom: 6px;
    color: var(--sa-title);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 700;
}

.premium-assessment-page .sa-insight-badge span {
    display: block;
    font-size: 13px;
    line-height: 1.6;
}

/* Mosaic */
.premium-assessment-page .sa-mosaic {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 22px;
}

.premium-assessment-page .sa-mosaic-col {
    display: grid;
    gap: 22px;
}

.premium-assessment-page .sa-feature-block,
.premium-assessment-page .sa-feature-photo {
    overflow: hidden;
    border-radius: 26px;
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .07), transparent 34%),
        rgba(255, 255, 255, .92);
}

.premium-assessment-page .sa-feature-block {
    padding: 26px;
}

.premium-assessment-page .sa-feature-block .topline {
    padding: 8px 12px;
    font-size: 10.5px;
    letter-spacing: .08em;
    margin-bottom: 16px;
}

.premium-assessment-page .sa-feature-block .sa-title-sm {
    margin-bottom: 10px;
}

.premium-assessment-page .sa-feature-block .sa-text-md {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.68;
}

.premium-assessment-page .sa-inline-points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.premium-assessment-page .sa-feature-photo {
    position: relative;
    min-height: 340px;
    background: #efeaff;
}

.premium-assessment-page .sa-feature-photo.tall {
    min-height: 430px;
}

.premium-assessment-page .sa-feature-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Flow */
.premium-assessment-page .sa-flow-strip {
    padding: 22px;
    border-radius: var(--sa-radius-xl);
    background:
        radial-gradient(circle at 0 0, rgba(106, 73, 242, .09), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 245, 255, .92));
}

.premium-assessment-page .sa-flow-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.premium-assessment-page .sa-flow-step {
    display: grid;
    align-content: start;
    min-height: 100%;
    padding: 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--sa-shadow-sm);
}

.premium-assessment-page .sa-step-no {
    margin-bottom: 15px;
}

.premium-assessment-page .sa-flow-step h4 {
    margin: 0 0 8px;
    color: var(--sa-title);
    font-size: 16.5px;
    line-height: 1.38;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.premium-assessment-page .sa-flow-step p {
    color: var(--sa-text);
    font-size: 13.5px;
    line-height: 1.62;
}

/* Outcomes */
.premium-assessment-page .sa-outcome-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 22px;
    align-items: stretch;
}

.premium-assessment-page .sa-quote-shell {
    padding: 30px;
    border-radius: var(--sa-radius-xl);
    background:
        radial-gradient(circle at left top, rgba(223, 218, 243, .58), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 244, 254, .96));
}

.premium-assessment-page .sa-quote-mark {
    margin-bottom: 18px;
    font-size: 24px;
}

.premium-assessment-page .sa-quote-shell blockquote {
    margin: 0 0 18px;
    color: var(--sa-title);
    font-size: 20px;
    line-height: 1.58;
    letter-spacing: -0.02em;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.premium-assessment-page .sa-quote-shell .person {
    display: block;
    margin-bottom: 4px;
    color: var(--sa-title);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 700;
}

.premium-assessment-page .sa-quote-shell .role {
    display: block;
    color: var(--sa-muted);
    font-size: 13.5px;
    line-height: 1.6;
    font-weight: 500;
}

.premium-assessment-page .sa-outcome-list {
    display: grid;
    gap: 14px;
}

.premium-assessment-page .sa-outcome-item {
    position: relative;
    padding: 18px 18px 18px 58px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .90);
    box-shadow: var(--sa-shadow-sm);
}

.premium-assessment-page .sa-outcome-item::before {
    content: "✓";
    position: absolute;
    left: 18px;
    top: 18px;
    width: 28px;
    height: 28px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(30, 169, 124, .12);
    color: var(--sa-success);
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
}

.premium-assessment-page .sa-outcome-item strong {
    display: block;
    margin-bottom: 5px;
    color: var(--sa-title);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 700;
}

.premium-assessment-page .sa-outcome-item p {
    font-size: 13.5px;
    line-height: 1.62;
}

/* CTA */
.premium-assessment-page .sa-cta-shell {
    padding: clamp(24px, 3vw, 34px);
    border-radius: var(--sa-radius-xl);
    background:
        radial-gradient(circle at right top, rgba(255, 255, 255, 0.14), transparent 28%),
        linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    color: #fff;
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
    border-color: rgba(255, 255, 255, .12);
}

.premium-assessment-page .sa-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
}

.premium-assessment-page .sa-cta-shell .sa-title-md,
.premium-assessment-page .sa-cta-shell .sa-text-md {
    color: #fff;
}

.premium-assessment-page .sa-cta-shell .sa-title-md {
    margin-bottom: 12px;
    max-width: 760px;
}

.premium-assessment-page .sa-cta-shell .sa-text-md {
    max-width: 760px;
    color: rgba(255, 255, 255, .80);
}

.premium-assessment-page .sa-cta-shell .sa-btn-secondary {
    color: #fff;
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: none;
}

.premium-assessment-page .sa-cta-shell .sa-btn-primary {
    color: var(--sa-title);
    background: #fff;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .12);
}

/* Reveal */
.premium-assessment-page .sa-reveal {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: no-preference) {
    .premium-assessment-page .sa-reveal {
        opacity: 0;
        transform: translateY(16px);
        animation: saFadeUp .72s ease forwards;
    }

    .premium-assessment-page .sa-reveal:nth-child(2) {
        animation-delay: .08s;
    }

    .premium-assessment-page .sa-reveal:nth-child(3) {
        animation-delay: .16s;
    }

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

/* Responsive */
@media (max-width: 1180px) {
    :root {
        --sa-container: 980px;
        --sa-page-gap: 34px;
        --sa-section-y: 58px;
    }

    .premium-assessment-page .sa-hero-grid,
    .premium-assessment-page .sa-story-grid,
    .premium-assessment-page .sa-mosaic,
    .premium-assessment-page .sa-outcome-grid,
    .premium-assessment-page .sa-cta-grid {
        grid-template-columns: 1fr;
    }

    .premium-assessment-page .sa-hero-copy {
        max-width: 860px;
    }

    .premium-assessment-page .sa-hero-visual {
        min-height: auto;
    }

    .premium-assessment-page .sa-hero-photo {
        width: 100%;
        min-height: 520px;
        margin: 0;
    }

    .premium-assessment-page .sa-hero-photo img {
        height: 520px;
    }

    .premium-assessment-page .sa-floating-card,
    .premium-assessment-page .sa-glass-panel {
        position: relative;
        inset: auto;
        width: 100%;
        margin-top: 16px;
    }

    .premium-assessment-page .sa-trust-row {
        grid-template-columns: 1fr;
    }

    .premium-assessment-page .sa-trust-tags {
        justify-content: flex-start;
    }

    .premium-assessment-page .sa-story-media {
        min-height: 480px;
    }

    .premium-assessment-page .sa-cta-grid {
        gap: 20px;
    }
}

@media (max-width: 991px) {
    :root {
        --sa-page-gap: 30px;
        --sa-section-y: 54px;
    }

    .premium-assessment-page .sa-flow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .premium-assessment-page .sa-mini-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .premium-assessment-page .sa-feature-photo,
    .premium-assessment-page .sa-feature-photo.tall {
        min-height: 320px;
    }
}

@media (max-width: 767px) {
    :root {
        --sa-page-gap: 24px;
        --sa-section-y: 46px;
    }

    .premium-assessment-page .sa-container {
        width: min(var(--sa-container), calc(100% - var(--sa-page-gap)));
    }

    .premium-assessment-page .sa-hero {
        padding: 96px 0 34px;
    }

    .premium-assessment-page .sa-section {
        padding: var(--sa-section-y) 0;
    }

    .premium-assessment-page .sa-hero-copy,
    .premium-assessment-page .sa-section-head,
    .premium-assessment-page .sa-trust-copy,
    .premium-assessment-page .sa-cta-shell {
        text-align: center;
        justify-items: center;
    }

    .premium-assessment-page .sa-title-xl {
        font-size: clamp(30px, 9.3vw, 42px);
        line-height: 1.1;
    }

    .premium-assessment-page .sa-title-lg,
    .premium-assessment-page .sa-title-md {
        font-size: clamp(24px, 7.4vw, 34px);
        line-height: 1.16;
    }

    .premium-assessment-page .sa-title-sm {
        font-size: 17px;
        line-height: 1.32;
    }

    .premium-assessment-page .sa-text-lg,
    .premium-assessment-page .sa-text-md,
    .premium-assessment-page .sa-story-card .sa-text-md,
    .premium-assessment-page .sa-feature-block .sa-text-md,
    .premium-assessment-page .sa-trust-copy p {
        font-size: 14px;
        line-height: 1.62;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .premium-assessment-page .sa-eyebrow,
    .premium-assessment-page .sa-feature-block .topline {
        padding: 8px 12px;
        gap: 8px;
        font-size: 9.5px;
        letter-spacing: .075em;
        margin-left: auto;
        margin-right: auto;
    }

    .premium-assessment-page .sa-eyebrow::before,
    .premium-assessment-page .sa-feature-block .topline::before {
        width: 7px;
        height: 7px;
    }

    .premium-assessment-page .sa-btn-row {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .premium-assessment-page .sa-btn {
        width: 100%;
        min-width: 0;
        min-height: 50px;
        padding: 13px 16px;
        border-radius: 14px;
        font-size: 14px;
    }

    .premium-assessment-page .sa-mini-metrics {
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
    }

    .premium-assessment-page .sa-mini-metric {
        display: grid;
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 15px;
        border-radius: 18px;
        text-align: left;
    }

    .premium-assessment-page .sa-mini-metric strong {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        margin: 0;
        padding: 8px 10px;
        border-radius: 14px;
        background: rgba(106, 73, 242, .09);
        color: var(--sa-title);
        font-size: 13.5px;
        line-height: 1.15;
        text-align: center;
    }

    .premium-assessment-page .sa-mini-metric span {
        font-size: 12.8px;
        line-height: 1.52;
        text-align: left;
    }

    .premium-assessment-page .sa-hero-photo {
        min-height: auto;
        border-radius: 22px;
    }

    .premium-assessment-page .sa-hero-photo img {
        height: 340px;
    }

    .premium-assessment-page .sa-floating-card,
    .premium-assessment-page .sa-glass-panel,
    .premium-assessment-page .sa-trust-row,
    .premium-assessment-page .sa-story-card,
    .premium-assessment-page .sa-story-media,
    .premium-assessment-page .sa-flow-strip,
    .premium-assessment-page .sa-quote-shell,
    .premium-assessment-page .sa-cta-shell,
    .premium-assessment-page .sa-feature-block,
    .premium-assessment-page .sa-feature-photo {
        padding: 16px;
        border-radius: 22px;
    }

    .premium-assessment-page .sa-floating-card,
    .premium-assessment-page .sa-glass-panel {
        text-align: center;
    }

    .premium-assessment-page .sa-glass-top {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .premium-assessment-page .sa-track {
        text-align: left;
    }

    .premium-assessment-page .sa-trust-row {
        padding: 16px;
    }

    .premium-assessment-page .sa-trust-tags,
    .premium-assessment-page .sa-inline-points {
        justify-content: center;
    }

    .premium-assessment-page .sa-story-card {
        padding: 16px;
    }

    .premium-assessment-page .sa-story-list-item {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
        border-radius: 18px;
        text-align: left;
    }

    .premium-assessment-page .sa-story-list-icon,
    .premium-assessment-page .sa-step-no,
    .premium-assessment-page .sa-quote-mark {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .premium-assessment-page .sa-story-list-item p {
        font-size: 13.5px;
        line-height: 1.58;
    }

    .premium-assessment-page .sa-story-media {
        min-height: 320px;
        padding: 0;
    }

    .premium-assessment-page .sa-insight-badge {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 14px;
        border-radius: 16px;
        text-align: center;
    }

    .premium-assessment-page .sa-mosaic {
        gap: 16px;
    }

    .premium-assessment-page .sa-mosaic-col {
        gap: 16px;
    }

    .premium-assessment-page .sa-feature-block {
        text-align: center;
    }

    .premium-assessment-page .sa-feature-photo,
    .premium-assessment-page .sa-feature-photo.tall {
        min-height: 250px;
        padding: 0;
    }

    .premium-assessment-page .sa-flow-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .premium-assessment-page .sa-flow-step {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px 12px;
        align-items: center;
        padding: 16px;
        border-radius: 18px;
        text-align: left;
    }

    .premium-assessment-page .sa-step-no {
        margin: 0;
    }

    .premium-assessment-page .sa-flow-step h4 {
        margin: 0;
        font-size: 16px;
        line-height: 1.32;
    }

    .premium-assessment-page .sa-flow-step p {
        grid-column: 1 / -1;
        margin-top: 2px;
        font-size: 13.5px;
        line-height: 1.58;
        text-align: left;
    }

    .premium-assessment-page .sa-outcome-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .premium-assessment-page .sa-quote-shell {
        text-align: center;
    }

    .premium-assessment-page .sa-quote-mark {
        margin-left: auto;
        margin-right: auto;
    }

    .premium-assessment-page .sa-outcome-list {
        gap: 12px;
    }

    .premium-assessment-page .sa-outcome-item {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 8px;
        align-items: center;
        padding: 15px;
        border-radius: 18px;
        text-align: left;
        background:
            radial-gradient(circle at 100% 0, rgba(106, 73, 242, 0.08), transparent 34%),
            rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(106, 73, 242, 0.12);
        box-shadow: 0 12px 28px rgba(50, 35, 111, 0.07);
    }

    .premium-assessment-page .sa-outcome-item::before {
        position: static;
        grid-column: 1;
        grid-row: 1;
        width: 40px;
        height: 40px;
        border-radius: 13px;
        align-self: center;
    }

    .premium-assessment-page .sa-outcome-item strong {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        align-self: center;
        font-size: 15px;
        line-height: 1.35;
        text-align: left;
    }

    .premium-assessment-page .sa-outcome-item p {
        grid-column: 1 / -1;
        margin: 0;
        font-size: 13.5px;
        line-height: 1.58;
        text-align: left;
    }

    .premium-assessment-page .sa-cta-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    :root {
        --sa-page-gap: 22px;
        --sa-section-y: 42px;
    }

    .premium-assessment-page .sa-hero {
        padding-top: 86px;
        padding-bottom: 30px;
    }

    .premium-assessment-page .sa-title-xl {
        font-size: clamp(27px, 8.8vw, 36px);
    }

    .premium-assessment-page .sa-title-lg,
    .premium-assessment-page .sa-title-md {
        font-size: clamp(22px, 7vw, 30px);
    }

    .premium-assessment-page .sa-hero-photo img {
        height: 320px;
    }

    .premium-assessment-page .sa-mini-metric {
        grid-template-columns: 82px minmax(0, 1fr);
        padding: 13px;
        border-radius: 16px;
    }

    .premium-assessment-page .sa-mini-metric strong {
        min-height: 40px;
        font-size: 12.5px;
    }

    .premium-assessment-page .sa-floating-card,
    .premium-assessment-page .sa-glass-panel,
    .premium-assessment-page .sa-trust-row,
    .premium-assessment-page .sa-story-card,
    .premium-assessment-page .sa-flow-strip,
    .premium-assessment-page .sa-quote-shell,
    .premium-assessment-page .sa-cta-shell,
    .premium-assessment-page .sa-feature-block,
    .premium-assessment-page .sa-flow-step,
    .premium-assessment-page .sa-outcome-item,
    .premium-assessment-page .sa-story-list-item {
        padding: 14px;
        border-radius: 18px;
    }

    .premium-assessment-page .sa-flow-step {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 11px;
    }

    .premium-assessment-page .sa-flow-step h4 {
        font-size: 15.5px;
    }
}

@media (max-width: 360px) {
    :root {
        --sa-page-gap: 18px;
    }

    .premium-assessment-page .sa-hero {
        padding-top: 82px;
    }

    .premium-assessment-page .sa-title-xl {
        font-size: 25px;
    }

    .premium-assessment-page .sa-eyebrow,
    .premium-assessment-page .sa-feature-block .topline {
        font-size: 8.5px;
        letter-spacing: .055em;
        padding: 7px 10px;
    }

    .premium-assessment-page .sa-mini-metric {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .premium-assessment-page .sa-mini-metric strong {
        width: fit-content;
        margin: 0 auto;
    }

    .premium-assessment-page .sa-mini-metric span {
        text-align: center;
    }
}

@media (hover: none) {
    .premium-assessment-page .sa-btn:hover,
    .premium-assessment-page .sa-mini-metric:hover,
    .premium-assessment-page .sa-floating-card:hover,
    .premium-assessment-page .sa-glass-panel:hover,
    .premium-assessment-page .sa-trust-row:hover,
    .premium-assessment-page .sa-story-card:hover,
    .premium-assessment-page .sa-feature-block:hover,
    .premium-assessment-page .sa-feature-photo:hover,
    .premium-assessment-page .sa-flow-step:hover,
    .premium-assessment-page .sa-quote-shell:hover,
    .premium-assessment-page .sa-outcome-item:hover,
    .premium-assessment-page .sa-cta-shell:hover,
    .premium-assessment-page .sa-story-list-item:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .premium-assessment-page *,
    .premium-assessment-page *::before,
    .premium-assessment-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .premium-assessment-page .sa-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/*===================================================================================
    29. Assessment Library CSS End
===================================================================================*/


/*===================================================================================
    30. Hiring Playbooks CSS Start
===================================================================================*/

.hp-luxe {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --bg-purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --slider-dots-color: #D4D2DD;
    --light-bg: #DFDAF3;
    --hp-bg: #fbfaff;
    --hp-surface: rgba(255, 255, 255, 0.94);
    --hp-surface-soft: rgba(255, 255, 255, 0.88);
    --hp-surface-strong: #ffffff;
    --hp-border: rgba(106, 73, 242, 0.12);
    --hp-border-strong: rgba(106, 73, 242, 0.20);
    --hp-text: rgba(62, 63, 102, 0.78);
    --hp-muted: rgba(62, 63, 102, 0.62);
    --hp-heading: #32236F;
    --hp-brand: #6A49F2;
    --hp-brand-dark: #4D32C8;
    --hp-brand-soft: rgba(106, 73, 242, 0.08);
    --hp-success: #1EA97C;
    --hp-shadow-sm: 0 10px 28px rgba(50, 35, 111, 0.06);
    --hp-shadow-md: 0 16px 42px rgba(50, 35, 111, 0.085);
    --hp-shadow-lg: 0 28px 72px rgba(50, 35, 111, 0.15);
    --hp-shadow-deep: 0 34px 86px rgba(50, 35, 111, 0.18);
    --hp-radius-xl: 34px;
    --hp-radius-lg: 26px;
    --hp-radius-md: 20px;
    --hp-radius-sm: 16px;
    --hp-container: 1170px;
    --hp-page-gap: 44px;
    --hp-space: clamp(46px, 4.8vw, 68px);
    --hp-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    padding: 0 0 clamp(62px, 6vw, 96px);
    color: var(--hp-text);
    background:
        radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
        radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
        linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(252, 251, 255, .96) 44%, rgba(247, 243, 255, .98) 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hp-luxe,
.hp-luxe *,
.hp-luxe *::before,
.hp-luxe *::after {
    box-sizing: border-box;
}

.hp-luxe::before,
.hp-luxe::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    opacity: .72;
}

.hp-luxe::before {
    width: 300px;
    height: 300px;
    top: 92px;
    left: -120px;
    background: rgba(106, 73, 242, 0.13);
}

.hp-luxe::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
}

.hp-luxe a {
    color: inherit;
    text-decoration: none;
}

.hp-luxe img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.hp-luxe h1,
.hp-luxe h2,
.hp-luxe h3,
.hp-luxe h4,
.hp-luxe p,
.hp-luxe blockquote {
    margin: 0;
    font-family: inherit;
}

.hp-luxe .mark,
.hp-luxe mark {
    padding: .2em;
    background-color: transparent !important;
}

.hp-luxe .hp-container {
    width: min(var(--hp-container), calc(100% - var(--hp-page-gap)));
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hp-luxe .hp-section {
    padding: var(--hp-space) 0;
    position: relative;
}

.hp-luxe .hp-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    min-height: auto;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--hp-brand);
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
}

.hp-luxe .hp-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hp-brand), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
}

.hp-luxe .hp-hero-copy h1,
.hp-luxe .hp-section-head h2,
.hp-luxe .hp-editorial-copy h2,
.hp-luxe .hp-cta-copy h2 {
    margin: 0;
    color: var(--hp-heading);
    font-weight: 700;
    letter-spacing: -0.045em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.hp-luxe .hp-hero-copy h1 {
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.06;
    max-width: 780px;
}

.hp-luxe .hp-hero-copy h1 span {
    color: var(--hp-brand);
}

.hp-luxe .hp-section-head h2,
.hp-luxe .hp-editorial-copy h2,
.hp-luxe .hp-cta-copy h2 {
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
}

.hp-luxe .hp-hero-copy p,
.hp-luxe .hp-section-head p,
.hp-luxe .hp-story-row p,
.hp-luxe .hp-editorial-copy p,
.hp-luxe .hp-feature-row p,
.hp-luxe .hp-flow-item p,
.hp-luxe .hp-proof-quote p,
.hp-luxe .hp-proof-list p,
.hp-luxe .hp-cta-copy p,
.hp-luxe .hp-metric p,
.hp-luxe .hp-band-item p,
.hp-luxe .hp-floating-card p,
.hp-luxe .hp-story-note p,
.hp-luxe .hp-proof-person span {
    color: var(--hp-text);
    font-weight: 400;
    overflow-wrap: anywhere;
}

.hp-luxe .hp-hero-copy p {
    max-width: 660px;
    font-size: 16px;
    line-height: 1.76;
}

.hp-luxe .hp-section-head p,
.hp-luxe .hp-editorial-copy p,
.hp-luxe .hp-cta-copy p {
    font-size: 15.5px;
    line-height: 1.72;
}

.hp-luxe .hp-btn-row,
.hp-luxe .hp-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hp-luxe .hp-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    transition: var(--hp-transition);
}

.hp-luxe .hp-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
}

.hp-luxe .hp-btn:hover {
    transform: translateY(-3px);
}

.hp-luxe .hp-btn:hover::before {
    transform: scaleX(1);
}

.hp-luxe .hp-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--hp-brand), #8A70FF);
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.24);
}

.hp-luxe .hp-btn-primary::before {
    background: linear-gradient(135deg, var(--hp-heading), var(--hp-brand));
}

.hp-luxe .hp-btn-primary:hover {
    color: #fff;
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.30);
}

.hp-luxe .hp-btn-secondary {
    color: var(--hp-brand);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
}

.hp-luxe .hp-btn-secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
}

.hp-luxe .hp-inline-points {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    max-width: 720px;
}

.hp-luxe .hp-inline-points span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.07);
    border: 1px solid rgba(106, 73, 242, 0.10);
    color: var(--hp-heading);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.hp-luxe .hp-inline-points span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hp-brand);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
}

.hp-luxe .hp-floating-card,
.hp-luxe .hp-metric,
.hp-luxe .hp-band,
.hp-luxe .hp-surface,
.hp-luxe .hp-proof-quote,
.hp-luxe .hp-proof-panel,
.hp-luxe .hp-cta-shell,
.hp-luxe .hp-story-note {
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    box-shadow: var(--hp-shadow-md);
    backdrop-filter: blur(14px);
    transition: var(--hp-transition);
}

.hp-luxe .hp-floating-card:hover,
.hp-luxe .hp-metric:hover,
.hp-luxe .hp-band:hover,
.hp-luxe .hp-surface:hover,
.hp-luxe .hp-proof-quote:hover,
.hp-luxe .hp-proof-panel:hover,
.hp-luxe .hp-cta-shell:hover,
.hp-luxe .hp-story-note:hover {
    transform: translateY(-4px);
    box-shadow: var(--hp-shadow-lg);
    border-color: var(--hp-border-strong);
}

/* Hero */
.hp-luxe .hp-hero {
    padding: clamp(116px, 8vw, 138px) 0 clamp(42px, 5vw, 64px);
}

.hp-luxe .hp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.hp-luxe .hp-hero-copy {
    display: grid;
    gap: 22px;
    align-content: center;
    min-width: 0;
    max-width: 740px;
}

.hp-luxe .hp-hero-visual {
    position: relative;
    min-height: 650px;
    min-width: 0;
    display: grid;
    align-items: center;
}

.hp-luxe .hp-main-image {
    position: relative;
    width: min(100%, 610px);
    min-height: 650px;
    margin-left: auto;
    border-radius: var(--hp-radius-xl);
    overflow: hidden;
    background: #efeaff;
    border: 1px solid rgba(106, 73, 242, 0.12);
    box-shadow: var(--hp-shadow-deep);
}

.hp-luxe .hp-main-image::after,
.hp-luxe .hp-stack-large::after,
.hp-luxe .hp-editorial-image::after,
.hp-luxe .hp-proof-image::after,
.hp-luxe .hp-mini-image::after,
.hp-luxe .hp-stack-small::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(23, 15, 60, 0.02), rgba(23, 15, 60, 0.16)),
        radial-gradient(circle at 0 100%, rgba(106, 73, 242, .18), transparent 42%);
    pointer-events: none;
}

.hp-luxe .hp-main-image img {
    width: 100%;
    height: 650px;
    object-fit: cover;
}

.hp-luxe .hp-floating-card {
    position: absolute;
    z-index: 3;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
}

.hp-luxe .hp-floating-card strong,
.hp-luxe .hp-floating-card h4 {
    color: var(--hp-heading);
    font-weight: 700;
}

.hp-luxe .hp-float-score {
    top: 30px;
    left: -18px;
    width: min(230px, calc(100% - 24px));
    padding: 18px;
}

.hp-luxe .hp-float-score .value {
    margin-bottom: 8px;
    color: var(--hp-brand);
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.hp-luxe .hp-float-score p,
.hp-luxe .hp-float-people p,
.hp-luxe .hp-story-note p {
    font-size: 13px;
    line-height: 1.6;
}

.hp-luxe .hp-float-people {
    right: -18px;
    bottom: 34px;
    width: min(268px, calc(100% - 24px));
    padding: 18px;
}

.hp-luxe .hp-avatar-row {
    display: flex;
    align-items: center;
    margin-bottom: 13px;
}

.hp-luxe .hp-avatar-row img {
    width: 42px;
    height: 42px;
    margin-left: -10px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 8px 18px rgba(50, 35, 111, 0.08);
}

.hp-luxe .hp-avatar-row img:first-child {
    margin-left: 0;
}

.hp-luxe .hp-float-people strong {
    display: block;
    margin-bottom: 5px;
    color: var(--hp-heading);
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
}

.hp-luxe .hp-mini-image {
    position: absolute;
    left: 34px;
    bottom: -34px;
    z-index: 2;
    width: 210px;
    height: 250px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 54px rgba(50, 35, 111, 0.16);
    border: 6px solid rgba(255, 255, 255, 0.9);
}

.hp-luxe .hp-mini-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-luxe .hp-hero-metrics {
    margin-top: clamp(24px, 3vw, 34px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.hp-luxe .hp-metric {
    min-width: 0;
    padding: 20px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%),
        rgba(255, 255, 255, 0.90);
}

.hp-luxe .hp-metric strong {
    display: block;
    margin-bottom: 8px;
    color: var(--hp-heading);
    font-size: 22px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
}

.hp-luxe .hp-metric p {
    font-size: 13.5px;
    line-height: 1.6;
}

/* Band */
.hp-luxe .hp-band {
    padding: 24px 28px;
    border-radius: var(--hp-radius-lg);
    background:
        radial-gradient(circle at 0 0, rgba(106, 73, 242, .09), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 245, 255, .92));
}

.hp-luxe .hp-band-grid {
    display: grid;
    grid-template-columns: minmax(240px, .9fr) repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: center;
}

.hp-luxe .hp-band-label {
    color: var(--hp-heading);
    font-size: 15px;
    line-height: 1.65;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.hp-luxe .hp-band-label span {
    color: var(--hp-brand);
}

.hp-luxe .hp-band-item {
    min-height: 112px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(106, 73, 242, 0.08);
    box-shadow: var(--hp-shadow-sm);
    display: grid;
    place-content: center;
    text-align: center;
}

.hp-luxe .hp-band-item strong {
    display: block;
    margin-bottom: 8px;
    color: var(--hp-brand);
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
}

.hp-luxe .hp-band-item p {
    font-size: 13px;
    line-height: 1.55;
}

.hp-luxe .hp-section-head {
    display: grid;
    gap: 14px;
    max-width: 780px;
    margin-bottom: clamp(24px, 2.8vw, 36px);
}

.hp-luxe .hp-section-head h2 {
    margin-top: 2px;
}

/* Story */
.hp-luxe .hp-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
    gap: clamp(26px, 4vw, 42px);
    align-items: center;
}

.hp-luxe .hp-story-copy {
    padding-right: 0;
}

.hp-luxe .hp-story-list {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.hp-luxe .hp-story-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 17px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .06), transparent 34%),
        rgba(255, 255, 255, .90);
    border: 1px solid rgba(106, 73, 242, .10);
    box-shadow: var(--hp-shadow-sm);
}

.hp-luxe .hp-story-row .num {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(106, 73, 242, .14), rgba(223, 218, 243, .96));
    color: var(--hp-brand);
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
}

.hp-luxe .hp-story-row h3 {
    margin-bottom: 6px;
    color: var(--hp-heading);
    font-size: 17px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.hp-luxe .hp-story-row p {
    font-size: 13.5px;
    line-height: 1.6;
}

.hp-luxe .hp-story-visual {
    position: relative;
    min-height: 620px;
}

.hp-luxe .hp-stack-large,
.hp-luxe .hp-stack-small,
.hp-luxe .hp-editorial-image,
.hp-luxe .hp-proof-image {
    position: relative;
    overflow: hidden;
    background: #efeaff;
}

.hp-luxe .hp-stack-large {
    position: absolute;
    inset: 0 92px 76px 0;
    border-radius: 32px;
    box-shadow: 0 28px 70px rgba(50, 35, 111, 0.12);
}

.hp-luxe .hp-stack-large img,
.hp-luxe .hp-stack-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-luxe .hp-stack-small {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 240px;
    height: 290px;
    border-radius: 28px;
    border: 6px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 56px rgba(50, 35, 111, 0.14);
}

.hp-luxe .hp-story-note {
    position: absolute;
    right: 24px;
    top: 28px;
    z-index: 2;
    width: 230px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.90);
}

.hp-luxe .hp-story-note strong {
    display: block;
    margin-bottom: 8px;
    color: var(--hp-heading);
    font-size: 17px;
    line-height: 1.35;
    font-weight: 800;
}

/* Editorial */
.hp-luxe .hp-editorial-panel {
    border-radius: var(--hp-radius-xl);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.90);
}

.hp-luxe .hp-editorial-grid {
    display: grid;
    grid-template-columns: minmax(320px, .92fr) minmax(0, 1.08fr);
    align-items: stretch;
}

.hp-luxe .hp-editorial-image {
    min-height: 100%;
}

.hp-luxe .hp-editorial-image img {
    width: 100%;
    height: 100%;
    min-height: 540px;
    object-fit: cover;
}

.hp-luxe .hp-editorial-copy {
    padding: clamp(28px, 4vw, 42px);
    background:
        radial-gradient(circle at right top, rgba(223, 218, 243, 0.70), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 245, 255, 0.96));
}

.hp-luxe .hp-editorial-copy h2 {
    margin: 16px 0 14px;
}

.hp-luxe .hp-editorial-copy p {
    margin-bottom: 24px;
}

.hp-luxe .hp-feature-rows {
    display: grid;
    gap: 0;
}

.hp-luxe .hp-feature-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid rgba(106, 73, 242, 0.10);
}

.hp-luxe .hp-feature-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.hp-luxe .hp-feature-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, .08);
    border: 1px solid rgba(106, 73, 242, .10);
    color: var(--hp-brand);
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
}

.hp-luxe .hp-feature-row h3 {
    margin-bottom: 6px;
    color: var(--hp-heading);
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.hp-luxe .hp-feature-row p {
    font-size: 13.5px;
    line-height: 1.62;
}

/* Flow */
.hp-luxe .hp-flow-wrap {
    position: relative;
    padding-left: 40px;
}

.hp-luxe .hp-flow-wrap::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, rgba(106, 73, 242, 0.24), rgba(106, 73, 242, 0.06));
}

.hp-luxe .hp-flow-item {
    position: relative;
    padding: 0 0 34px 28px;
}

.hp-luxe .hp-flow-item:last-child {
    padding-bottom: 0;
}

.hp-luxe .hp-flow-item::before {
    content: "";
    position: absolute;
    left: -34px;
    top: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 6px solid rgba(106, 73, 242, 0.10);
    box-shadow: inset 0 0 0 4px var(--hp-brand);
}

.hp-luxe .hp-flow-item .step {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--hp-brand);
    font-size: 12px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
}

.hp-luxe .hp-flow-item h3 {
    margin-bottom: 8px;
    color: var(--hp-heading);
    font-size: 20px;
    line-height: 1.35;
    font-weight: 800;
}

.hp-luxe .hp-flow-item p {
    max-width: 720px;
    font-size: 14px;
    line-height: 1.68;
}

/* Proof */
.hp-luxe .hp-proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 24px;
    align-items: stretch;
}

.hp-luxe .hp-proof-quote,
.hp-luxe .hp-proof-panel {
    border-radius: 30px;
    padding: clamp(24px, 3vw, 34px);
}

.hp-luxe .hp-proof-quote {
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 245, 255, .92));
}

.hp-luxe .hp-proof-quote .mark {
    margin-bottom: 14px;
    color: var(--hp-brand);
    font-size: 56px;
    line-height: .8;
    font-weight: 700;
    background-color: transparent !important;
}

.hp-luxe .hp-proof-quote blockquote {
    margin-bottom: 18px;
    color: var(--hp-heading);
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.34;
    font-weight: 700;
    letter-spacing: -0.035em;
    overflow-wrap: anywhere;
}

.hp-luxe .hp-proof-quote p {
    margin-bottom: 22px;
    font-size: 14.5px;
    line-height: 1.7;
}

.hp-luxe .hp-proof-person {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hp-luxe .hp-proof-person img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.hp-luxe .hp-proof-person strong {
    display: block;
    margin-bottom: 4px;
    color: var(--hp-heading);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 800;
}

.hp-luxe .hp-proof-person span {
    display: block;
    font-size: 13px;
    line-height: 1.55;
}

.hp-luxe .hp-proof-panel {
    display: grid;
    gap: 18px;
    background: rgba(255, 255, 255, 0.90);
}

.hp-luxe .hp-proof-image {
    height: 260px;
    border-radius: 24px;
}

.hp-luxe .hp-proof-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-luxe .hp-proof-list {
    display: grid;
    gap: 12px;
}

.hp-luxe .hp-proof-list div {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border-radius: 16px;
    background: rgba(106, 73, 242, .05);
    border: 1px solid rgba(106, 73, 242, .08);
}

.hp-luxe .hp-proof-list div::before {
    content: "";
    width: 10px;
    height: 10px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--hp-brand);
    box-shadow: 0 0 0 6px rgba(106, 73, 242, 0.08);
}

.hp-luxe .hp-proof-list p {
    font-size: 13.5px;
    line-height: 1.62;
}

/* CTA */
.hp-luxe .hp-cta {
    padding-top: clamp(46px, 5vw, 70px);
}

.hp-luxe .hp-cta-shell {
    position: relative;
    overflow: hidden;
    border-radius: var(--hp-radius-xl);
    padding: clamp(24px, 3vw, 34px);
    color: #fff;
    background:
        radial-gradient(circle at right top, rgba(255, 255, 255, 0.14), transparent 28%),
        linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
}

.hp-luxe .hp-cta-shell::before,
.hp-luxe .hp-cta-shell::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    opacity: .24;
}

.hp-luxe .hp-cta-shell::before {
    width: 300px;
    height: 300px;
    right: -100px;
    top: -100px;
    background: radial-gradient(circle, rgba(255,255,255,0.56), rgba(255,255,255,0));
}

.hp-luxe .hp-cta-shell::after {
    width: 240px;
    height: 240px;
    left: -90px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(255,255,255,0.30), rgba(255,255,255,0));
}

.hp-luxe .hp-cta-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
}

.hp-luxe .hp-cta-copy h2 {
    color: #fff;
    margin: 16px 0 12px;
}

.hp-luxe .hp-cta-copy p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.80);
}

.hp-luxe .hp-cta-actions {
    justify-content: flex-end;
}

.hp-luxe .hp-cta-actions .hp-btn-primary {
    background: #fff;
    color: var(--hp-heading);
    box-shadow: 0 18px 38px rgba(0,0,0,0.10);
}

.hp-luxe .hp-cta-actions .hp-btn-secondary {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.22);
    box-shadow: none;
}

/* Tablet */
@media (max-width: 1180px) {
    .hp-luxe {
        --hp-page-gap: 34px;
        --hp-space: 58px;
    }

    .hp-luxe .hp-hero-grid,
    .hp-luxe .hp-story-grid,
    .hp-luxe .hp-proof-grid,
    .hp-luxe .hp-editorial-grid,
    .hp-luxe .hp-cta-grid {
        grid-template-columns: 1fr;
    }

    .hp-luxe .hp-hero-copy {
        max-width: 900px;
    }

    .hp-luxe .hp-hero-visual {
        min-height: auto;
        max-width: 820px;
        display: grid;
        gap: 14px;
    }

    .hp-luxe .hp-main-image {
        width: 100%;
        min-height: 560px;
    }

    .hp-luxe .hp-main-image img {
        height: 560px;
    }

    .hp-luxe .hp-float-score,
    .hp-luxe .hp-float-people {
        position: static;
        width: 100%;
    }

    .hp-luxe .hp-mini-image {
        display: none;
    }

    .hp-luxe .hp-cta-actions {
        justify-content: flex-start;
    }

    .hp-luxe .hp-band-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hp-luxe .hp-band-label {
        grid-column: 1 / -1;
        text-align: center;
    }

    .hp-luxe .hp-story-visual {
        min-height: 540px;
    }

    .hp-luxe .hp-editorial-image img {
        min-height: 420px;
    }
}

@media (max-width: 991px) {
    .hp-luxe {
        --hp-page-gap: 30px;
        --hp-space: 54px;
    }

    .hp-luxe .hp-hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hp-luxe .hp-stack-large {
        inset: 0;
        border-radius: 28px;
    }

    .hp-luxe .hp-stack-small,
    .hp-luxe .hp-story-note {
        display: none;
    }

    .hp-luxe .hp-story-visual {
        min-height: 430px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .hp-luxe {
        --hp-page-gap: 24px;
        --hp-space: 46px;
        padding-bottom: 74px;
    }

    .hp-luxe .hp-container {
        width: min(var(--hp-container), calc(100% - var(--hp-page-gap)));
    }

    .hp-luxe .hp-section {
        padding: var(--hp-space) 0;
    }

    .hp-luxe .hp-hero {
        padding: 96px 0 34px;
    }

    .hp-luxe .hp-hero-copy,
    .hp-luxe .hp-section-head,
    .hp-luxe .hp-editorial-copy,
    .hp-luxe .hp-cta-copy {
        text-align: center;
        justify-items: center;
    }

    .hp-luxe .hp-hero-copy h1 {
        font-size: clamp(30px, 9.2vw, 44px);
        line-height: 1.1;
    }

    .hp-luxe .hp-section-head h2,
    .hp-luxe .hp-editorial-copy h2,
    .hp-luxe .hp-cta-copy h2 {
        font-size: clamp(24px, 7.4vw, 34px);
        line-height: 1.16;
    }

    .hp-luxe .hp-hero-copy p,
    .hp-luxe .hp-section-head p,
    .hp-luxe .hp-editorial-copy p,
    .hp-luxe .hp-cta-copy p,
    .hp-luxe .hp-flow-item p,
    .hp-luxe .hp-story-row p {
        font-size: 14px;
        line-height: 1.62;
    }

    .hp-luxe .hp-eyebrow {
        padding: 8px 12px;
        gap: 8px;
        font-size: 9.5px;
        letter-spacing: .075em;
    }

    .hp-luxe .hp-eyebrow::before {
        width: 7px;
        height: 7px;
    }

    .hp-luxe .hp-btn-row,
    .hp-luxe .hp-cta-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .hp-luxe .hp-btn {
        width: 100%;
        min-height: 50px;
        padding: 13px 16px;
        border-radius: 14px;
        font-size: 14px;
    }

    .hp-luxe .hp-inline-points {
        justify-content: center;
    }

    .hp-luxe .hp-main-image,
    .hp-luxe .hp-main-image img {
        min-height: 380px;
        height: 380px;
        border-radius: 24px;
    }

    .hp-luxe .hp-hero-metrics,
    .hp-luxe .hp-band-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hp-luxe .hp-metric {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        text-align: left;
    }

    .hp-luxe .hp-metric strong {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(106, 73, 242, 0.08);
        color: var(--hp-brand);
        font-size: 14px;
        margin: 0;
        text-align: center;
    }

    .hp-luxe .hp-metric p {
        font-size: 13.5px;
        line-height: 1.58;
    }

    .hp-luxe .hp-band,
    .hp-luxe .hp-band-item,
    .hp-luxe .hp-story-row,
    .hp-luxe .hp-editorial-copy,
    .hp-luxe .hp-proof-quote,
    .hp-luxe .hp-proof-panel,
    .hp-luxe .hp-cta-shell {
        padding: 16px;
        border-radius: 20px;
    }

    .hp-luxe .hp-story-visual {
        min-height: 320px;
    }

    .hp-luxe .hp-story-row {
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 12px;
    }

    .hp-luxe .hp-story-row .num {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        font-size: 13px;
    }

    .hp-luxe .hp-story-row h3 {
        font-size: 16.5px;
        line-height: 1.32;
    }

    .hp-luxe .hp-stack-large {
        position: relative;
        inset: auto;
        min-height: 320px;
    }

    .hp-luxe .hp-stack-large img {
        min-height: 320px;
    }

    .hp-luxe .hp-editorial-image img {
        min-height: 280px;
    }

    .hp-luxe .hp-feature-row {
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: center;
    }

    .hp-luxe .hp-feature-key {
        margin: 0 auto;
    }

    .hp-luxe .hp-feature-row h3 {
        font-size: 16px;
        line-height: 1.34;
        text-align: center;
    }

    .hp-luxe .hp-feature-row p {
        font-size: 13.5px;
        line-height: 1.58;
        text-align: center;
    }

    .hp-luxe .hp-flow-wrap {
        padding-left: 28px;
    }

    .hp-luxe .hp-flow-item {
        padding-left: 18px;
    }

    .hp-luxe .hp-flow-item h3 {
        font-size: 17px;
    }

    .hp-luxe .hp-flow-item p {
        font-size: 13.5px;
        line-height: 1.58;
    }

    .hp-luxe .hp-proof-quote {
        text-align: center;
    }

    .hp-luxe .hp-proof-quote .mark {
        font-size: 44px;
    }

    .hp-luxe .hp-proof-quote blockquote {
        font-size: 20px;
        line-height: 1.42;
    }

    .hp-luxe .hp-proof-person {
        justify-content: center;
        text-align: left;
    }

    .hp-luxe .hp-proof-image {
        height: 220px;
        border-radius: 18px;
    }

    .hp-luxe .hp-proof-list div {
        padding: 12px;
        border-radius: 15px;
        text-align: left;
    }

    .hp-luxe .hp-proof-list p {
        font-size: 13.5px;
        line-height: 1.58;
    }

    .hp-luxe .hp-cta-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hp-luxe .hp-cta-actions {
        justify-content: stretch;
    }
}

@media (max-width: 430px) {
    .hp-luxe {
        --hp-page-gap: 22px;
        --hp-space: 42px;
    }

    .hp-luxe .hp-hero {
        padding-top: 88px;
        padding-bottom: 30px;
    }

    .hp-luxe .hp-hero-copy h1 {
        font-size: clamp(27px, 8.8vw, 36px);
    }

    .hp-luxe .hp-section-head h2,
    .hp-luxe .hp-editorial-copy h2,
    .hp-luxe .hp-cta-copy h2 {
        font-size: clamp(22px, 7vw, 30px);
    }

    .hp-luxe .hp-main-image img {
        height: 320px;
    }

    .hp-luxe .hp-floating-card,
    .hp-luxe .hp-metric,
    .hp-luxe .hp-band,
    .hp-luxe .hp-band-item,
    .hp-luxe .hp-story-row,
    .hp-luxe .hp-editorial-copy,
    .hp-luxe .hp-proof-quote,
    .hp-luxe .hp-proof-panel,
    .hp-luxe .hp-cta-shell {
        padding: 14px;
        border-radius: 18px;
    }

    .hp-luxe .hp-metric {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .hp-luxe .hp-metric strong {
        min-height: 40px;
        font-size: 12.5px;
    }

    .hp-luxe .hp-story-row {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 11px;
    }

    .hp-luxe .hp-story-row h3 {
        font-size: 15px;
    }

    .hp-luxe .hp-proof-person {
        display: grid;
        justify-items: center;
        text-align: center;
    }
}

@media (max-width: 360px) {
    .hp-luxe {
        --hp-page-gap: 18px;
    }

    .hp-luxe .hp-hero {
        padding-top: 82px;
    }

    .hp-luxe .hp-hero-copy h1 {
        font-size: 25px;
    }

    .hp-luxe .hp-eyebrow {
        font-size: 8.5px;
        letter-spacing: .055em;
        padding: 7px 10px;
    }

    .hp-luxe .hp-metric {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hp-luxe .hp-metric strong {
        width: fit-content;
        margin: 0 auto;
    }

    .hp-luxe .hp-metric p {
        text-align: center;
    }
}

@media (hover: none) {
    .hp-luxe .hp-btn:hover,
    .hp-luxe .hp-floating-card:hover,
    .hp-luxe .hp-metric:hover,
    .hp-luxe .hp-band:hover,
    .hp-luxe .hp-surface:hover,
    .hp-luxe .hp-proof-quote:hover,
    .hp-luxe .hp-proof-panel:hover,
    .hp-luxe .hp-cta-shell:hover,
    .hp-luxe .hp-story-note:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-luxe *,
    .hp-luxe *::before,
    .hp-luxe *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/*===================================================================================
    30. Hiring Playbooks CSS End
===================================================================================*/


/*===================================================================================
    31. Candidate Evaluation Guides CSS Start
===================================================================================*/

:root {
  --light-purple: #F6F4FE;
  --purple: #6A49F2;
  --bg-purple: #6A49F2;
  --dark-purple: #32236F;
  --body-text-purple: #3E3F66;
  --text-white: #ffffff;
  --bg-white: #ffffff;
  --slider-dots-color: #D4D2DD;
  --light-bg: #DFDAF3;
  --egp-bg: #f7f3ff;
  --egp-bg-soft: #fcfbff;
  --egp-surface: rgba(255, 255, 255, 0.94);
  --egp-surface-soft: rgba(255, 255, 255, 0.88);
  --egp-surface-strong: #ffffff;
  --egp-text: #32236F;
  --egp-muted: rgba(62, 63, 102, 0.78);
  --egp-muted-soft: rgba(62, 63, 102, 0.62);
  --egp-line: rgba(106, 73, 242, 0.12);
  --egp-line-strong: rgba(106, 73, 242, 0.20);
  --egp-brand: #6A49F2;
  --egp-brand-2: #8A70FF;
  --egp-brand-soft: rgba(106, 73, 242, 0.08);
  --egp-success: #1EA97C;
  --egp-shadow-sm: 0 10px 28px rgba(50, 35, 111, 0.06);
  --egp-shadow-md: 0 16px 42px rgba(50, 35, 111, 0.085);
  --egp-shadow-lg: 0 28px 72px rgba(50, 35, 111, 0.15);
  --egp-shadow-deep: 0 34px 86px rgba(50, 35, 111, 0.18);
  --egp-radius-xl: 34px;
  --egp-radius-lg: 26px;
  --egp-radius-md: 20px;
  --egp-radius-sm: 16px;
  --egp-wrap: 1170px;
  --egp-page-gap: 44px;
  --egp-section-y: clamp(46px, 4.8vw, 68px);
  --egp-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

.egp-page,
.egp-page *,
.egp-page *::before,
.egp-page *::after {
  box-sizing: border-box;
}

.egp-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 320px;
  color: var(--egp-muted);
  background:
    radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
    radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.egp-page::before,
.egp-page::after {
  content: "";
  position: fixed;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
  z-index: -1;
  opacity: .72;
}

.egp-page::before {
  width: 300px;
  height: 300px;
  top: 92px;
  left: -120px;
  background: rgba(106, 73, 242, 0.13);
}

.egp-page::after {
  width: 350px;
  height: 350px;
  right: -140px;
  top: 360px;
  background: rgba(223, 218, 243, 0.92);
}

.egp-page img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.egp-page a {
  color: inherit;
  text-decoration: none;
}

.egp-page h1,
.egp-page h2,
.egp-page h3,
.egp-page h4,
.egp-page p,
.egp-page blockquote,
.egp-page ul {
  margin: 0;
  font-family: inherit;
}

.egp-shell {
  width: min(var(--egp-wrap), calc(100% - var(--egp-page-gap)));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.egp-section {
  position: relative;
  padding: var(--egp-section-y) 0;
}

.egp-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  min-height: auto;
  padding: 10px 15px;
  border-radius: 999px;
  background: rgba(106, 73, 242, 0.08);
  border: 1px solid rgba(106, 73, 242, 0.14);
  color: var(--egp-brand);
  box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
  backdrop-filter: blur(12px);
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: .085em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}

.egp-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--egp-brand), #16BDF5);
  box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
  flex: 0 0 auto;
}

.egp-title-xl,
.egp-title-lg,
.egp-title-md {
  margin: 0;
  color: var(--egp-text);
  font-weight: 700;
  letter-spacing: -0.045em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.egp-title-xl {
  font-size: clamp(38px, 5.2vw, 64px);
  line-height: 1.06;
}

.egp-title-lg {
  font-size: clamp(30px, 3.65vw, 46px);
  line-height: 1.12;
}

.egp-title-md {
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.16;
}

.egp-copy,
.egp-page p,
.egp-page li,
.egp-page span,
.egp-page small {
  color: var(--egp-muted);
  font-size: 15.5px;
  line-height: 1.72;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.egp-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.egp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 176px;
  min-height: 52px;
  padding: 14px 22px;
  border-radius: 15px;
  border: 1px solid transparent;
  overflow: hidden;
  isolation: isolate;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  transition: var(--egp-transition);
}

.egp-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  border-radius: inherit;
}

.egp-btn:hover {
  transform: translateY(-3px);
}

.egp-btn:hover::before {
  transform: scaleX(1);
}

.egp-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--egp-brand), var(--egp-brand-2));
  box-shadow: 0 18px 36px rgba(106, 73, 242, 0.24);
}

.egp-btn-primary::before {
  background: linear-gradient(135deg, var(--egp-text), var(--egp-brand));
}

.egp-btn-primary:hover {
  color: #fff;
  box-shadow: 0 24px 46px rgba(106, 73, 242, 0.30);
}

.egp-btn-secondary {
  color: var(--egp-brand);
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(106, 73, 242, 0.16);
  box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
  backdrop-filter: blur(10px);
}

.egp-btn-secondary::before {
  background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
}

.egp-metric,
.egp-proof-row,
.egp-stack-item,
.egp-flow-wrap,
.egp-preview,
.egp-preview-block,
.egp-showcase-card,
.egp-ribbon,
.egp-cta-wrap,
.egp-cta-box,
.egp-image-note,
.egp-media-glass,
.egp-float-top,
.egp-float-bottom,
.egp-float-mini {
  background: var(--egp-surface);
  border: 1px solid var(--egp-line);
  box-shadow: var(--egp-shadow-md);
  backdrop-filter: blur(14px);
  transition: var(--egp-transition);
}

.egp-metric:hover,
.egp-proof-row:hover,
.egp-stack-item:hover,
.egp-flow-wrap:hover,
.egp-preview:hover,
.egp-showcase-card:hover,
.egp-ribbon:hover,
.egp-cta-wrap:hover,
.egp-cta-box:hover,
.egp-float-top:hover,
.egp-float-bottom:hover,
.egp-float-mini:hover {
  transform: translateY(-4px);
  box-shadow: var(--egp-shadow-lg);
  border-color: var(--egp-line-strong);
}

/* Hero */
.egp-hero {
  padding: clamp(116px, 8vw, 138px) 0 clamp(42px, 5vw, 64px);
}

.egp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.egp-hero-copy {
  display: grid;
  gap: 0;
  align-content: center;
  min-width: 0;
  max-width: 740px;
  padding-right: 0;
}

.egp-hero-copy .egp-title-xl {
  max-width: 780px;
}

.egp-hero-copy p {
  margin-top: 18px;
  max-width: 660px;
  font-size: 16px;
  line-height: 1.76;
}

.egp-metric-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.egp-metric {
  min-width: 0;
  padding: 18px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(106,73,242,.08), transparent 34%),
    rgba(255,255,255,.90);
}

.egp-metric strong {
  display: block;
  margin-bottom: 8px;
  color: var(--egp-text);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.egp-metric span {
  display: block;
  margin: 0;
  font-size: 12.8px;
  line-height: 1.55;
}

.egp-hero-stage {
  position: relative;
  min-height: 650px;
  min-width: 0;
  display: grid;
  align-items: center;
}

.egp-hero-card {
  position: relative;
  inset: auto;
  width: min(100%, 610px);
  min-height: 650px;
  margin-left: auto;
  border-radius: var(--egp-radius-xl);
  overflow: hidden;
  background: #efeaff;
  border: 1px solid rgba(106, 73, 242, 0.12);
  box-shadow: var(--egp-shadow-deep);
}

.egp-hero-card img {
  width: 100%;
  height: 650px;
  object-fit: cover;
}

.egp-hero-gradient,
.egp-image-panel::after,
.egp-media-tall::after,
.egp-media-wide::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(23, 15, 60, 0.02), rgba(23, 15, 60, 0.16)),
    radial-gradient(circle at 0 100%, rgba(106, 73, 242, .18), transparent 42%);
  pointer-events: none;
}

.egp-float-top,
.egp-float-bottom,
.egp-float-mini {
  position: absolute;
  z-index: 3;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
}

.egp-float-top {
  top: 30px;
  left: -18px;
  width: min(280px, calc(100% - 24px));
  padding: 18px;
}

.egp-float-mini {
  right: -14px;
  top: 28%;
  min-width: 178px;
  padding: 16px;
  border-radius: 20px;
  text-align: left;
}

.egp-float-bottom {
  right: -18px;
  bottom: 28px;
  width: min(360px, calc(100% - 24px));
  padding: 20px;
  border-radius: 24px;
}

.egp-float-top strong,
.egp-float-bottom strong,
.egp-float-mini strong {
  display: block;
  color: var(--egp-text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.egp-float-top span,
.egp-float-bottom span,
.egp-float-mini span {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.58;
}

.egp-doc-lines {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.egp-doc-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.egp-doc-line b {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(106, 73, 242, 0.08);
  color: var(--egp-text);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.egp-pill-score {
  display: inline-flex;
  justify-content: center;
  min-width: 62px;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--egp-text);
  color: #fff !important;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  font-weight: 700;
}

/* Proof */
.egp-proof {
  padding: 18px 0 24px;
}

.egp-proof-row {
  display: grid;
  grid-template-columns: minmax(220px, .58fr) minmax(0, 1.42fr);
  gap: 14px;
  align-items: center;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 0 0, rgba(106, 73, 242, .08), transparent 34%),
    rgba(255,255,255,.90);
}

.egp-proof-row p {
  margin: 0;
  color: var(--egp-text);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 800;
}

.egp-proof-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.egp-proof-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(106, 73, 242, 0.08);
  border: 1px solid rgba(106, 73, 242, 0.10);
  color: var(--egp-brand);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  text-align: center;
}

/* Story */
.egp-story-grid,
.egp-showcase-row,
.egp-cta-grid,
.egp-flow-grid {
  display: grid;
  gap: 24px;
  align-items: center;
}

.egp-story-grid {
  grid-template-columns: minmax(420px, .95fr) minmax(0, 1.05fr);
}

.egp-image-panel,
.egp-media-tall,
.egp-media-wide {
  position: relative;
  overflow: hidden;
  border-radius: var(--egp-radius-xl);
  min-height: 560px;
  box-shadow: var(--egp-shadow-deep);
  background: #efeaff;
  border: 1px solid rgba(106, 73, 242, 0.12);
}

.egp-image-panel img,
.egp-media-tall img,
.egp-media-wide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.egp-image-note,
.egp-media-glass {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(106, 73, 242, .10);
  box-shadow: var(--egp-shadow-sm);
}

.egp-image-note strong,
.egp-media-glass strong {
  display: block;
  color: var(--egp-text);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.4;
}

.egp-image-note span,
.egp-media-glass span {
  display: block;
  margin-top: 6px;
  font-size: 12.8px;
  line-height: 1.62;
}

.egp-stack-list {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.egp-stack-item {
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(106, 73, 242, .07), transparent 34%),
    rgba(255,255,255,.90);
}

.egp-stack-item strong {
  display: block;
  color: var(--egp-text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.egp-stack-item p {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.62;
}

/* Flow */
.egp-flow-wrap {
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--egp-radius-xl);
  background:
    radial-gradient(circle at 0 0, rgba(106, 73, 242, .10), transparent 34%),
    radial-gradient(circle at 100% 0, rgba(223, 218, 243, .42), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,243,255,.90));
}

.egp-flow-grid {
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(24px, 4vw, 44px);
}

.egp-flow-list {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.egp-flow-step {
  position: relative;
  min-height: auto;
  padding: 0 0 0 58px;
}

.egp-flow-step::before {
  content: "";
  position: absolute;
  top: 44px;
  left: 20px;
  bottom: -18px;
  width: 1px;
  background: rgba(106, 73, 242, 0.16);
}

.egp-flow-step:last-child::before {
  display: none;
}

.egp-flow-num {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--egp-brand), var(--egp-brand-2));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 14px 24px rgba(106, 73, 242, 0.18);
}

.egp-flow-step strong {
  display: block;
  color: var(--egp-text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
}

.egp-flow-step p {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.62;
}

.egp-preview {
  padding: 22px;
  border-radius: 28px;
  background: rgba(255,255,255,.92);
}

.egp-preview-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.egp-preview-top strong {
  color: var(--egp-text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
}

.egp-preview-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(106, 73, 242, 0.08);
  color: var(--egp-brand);
  border: 1px solid rgba(106, 73, 242, .10);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.egp-preview-sheet {
  display: grid;
  gap: 12px;
}

.egp-preview-block {
  padding: 16px;
  border-radius: 18px;
  background: rgba(250,248,255,.88);
  box-shadow: var(--egp-shadow-sm);
}

.egp-preview-block strong {
  display: block;
  color: var(--egp-text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.egp-preview-block p {
  margin: 7px 0 12px;
  font-size: 13px;
  line-height: 1.58;
}

.egp-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(106, 73, 242, 0.10);
  overflow: hidden;
}

.egp-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--egp-brand), #af9dff);
}

/* Showcase */
.egp-showcase-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom: 24px;
}

.egp-showcase-card {
  height: 100%;
  padding: clamp(22px, 3vw, 30px);
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0, rgba(106, 73, 242, .07), transparent 34%),
    rgba(255,255,255,.90);
}

.egp-showcase-card p {
  margin-top: 16px;
  max-width: 560px;
  font-size: 14.5px;
  line-height: 1.68;
}

.egp-inline-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.egp-inline-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--egp-muted);
  font-size: 13.5px;
  line-height: 1.62;
}

.egp-inline-list li::before {
  content: "✓";
  width: 28px;
  height: 28px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(106, 73, 242, .09);
  color: var(--egp-brand);
  font-size: 13px;
  font-weight: 800;
}

.egp-media-tall,
.egp-media-wide {
  min-height: 440px;
}

.egp-media-wide {
  min-height: 400px;
}

/* Ribbon */
.egp-ribbon {
  padding: 18px 20px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0, rgba(255,255,255,.14), transparent 28%),
    linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
  box-shadow: 0 26px 60px rgba(60, 36, 155, 0.20);
  border-color: rgba(255,255,255,.12);
}

.egp-ribbon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.egp-ribbon-stat {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
}

.egp-ribbon-stat strong {
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
}

.egp-ribbon-stat span {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  line-height: 1.58;
}

/* CTA */
.egp-cta-wrap {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--egp-radius-xl);
  background:
    radial-gradient(circle at right top, rgba(255,255,255,0.14), transparent 28%),
    linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
  color: #fff;
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
}

.egp-cta-wrap::before,
.egp-cta-wrap::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  opacity: .24;
}

.egp-cta-wrap::before {
  width: 300px;
  height: 300px;
  top: -100px;
  right: -100px;
  background: radial-gradient(circle, rgba(255,255,255,.56), rgba(255,255,255,0));
}

.egp-cta-wrap::after {
  width: 240px;
  height: 240px;
  left: -90px;
  bottom: -90px;
  background: radial-gradient(circle, rgba(255,255,255,.30), rgba(255,255,255,0));
}

.egp-cta-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr);
  gap: 28px;
}

.egp-cta-wrap .egp-title-lg {
  color: #fff !important;
}

.egp-cta-wrap p {
  margin-top: 14px;
  max-width: 700px;
  color: rgba(255,255,255,.82);
}

.egp-cta-box {
  padding: 22px;
  border-radius: 26px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
}

.egp-cta-box strong {
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 800;
}

.egp-cta-box span {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.76);
  font-size: 13.5px;
  line-height: 1.7;
}

.egp-cta-box .egp-btn-row {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
}

.egp-cta-box .egp-btn {
  width: 100%;
}

.egp-cta-box .egp-btn-primary {
  background: #fff;
  color: var(--egp-text);
  box-shadow: 0 18px 38px rgba(0,0,0,.10);
}

.egp-cta-box .egp-btn-secondary {
  color: #fff;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  box-shadow: none;
}

@media (max-width: 1120px) {
  :root {
    --egp-page-gap: 34px;
    --egp-section-y: 58px;
  }

  .egp-hero-grid,
  .egp-story-grid,
  .egp-flow-grid,
  .egp-showcase-row,
  .egp-cta-grid {
    grid-template-columns: 1fr;
  }

  .egp-hero-copy {
    max-width: 900px;
  }

  .egp-hero-stage {
    min-height: auto;
    max-width: 820px;
    display: grid;
    gap: 14px;
  }

  .egp-hero-card {
    width: 100%;
    min-height: 560px;
  }

  .egp-hero-card img {
    height: 560px;
  }

  .egp-float-top,
  .egp-float-bottom,
  .egp-float-mini {
    position: static;
    width: 100%;
    max-width: none;
  }

  .egp-ribbon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .egp-image-panel {
    min-height: 460px;
  }
}

@media (max-width: 820px) {
  :root {
    --egp-page-gap: 30px;
    --egp-section-y: 54px;
  }

  .egp-metric-strip {
    grid-template-columns: 1fr;
  }

  .egp-proof-row {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .egp-proof-list {
    justify-content: center;
  }
}

@media (max-width: 760px) {
  :root {
    --egp-page-gap: 24px;
    --egp-section-y: 46px;
  }

  .egp-shell {
    width: min(var(--egp-wrap), calc(100% - var(--egp-page-gap)));
  }

  .egp-section {
    padding: var(--egp-section-y) 0;
  }

  .egp-hero {
    padding: 96px 0 34px;
  }

  .egp-hero-copy,
  .egp-showcase-card,
  .egp-cta-wrap {
    text-align: center;
    justify-items: center;
  }

  .egp-title-xl {
    font-size: clamp(30px, 9.3vw, 42px);
    line-height: 1.1;
  }

  .egp-title-lg {
    font-size: clamp(24px, 7.4vw, 34px);
    line-height: 1.16;
  }

  .egp-title-md {
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.18;
  }

  .egp-page p,
  .egp-hero-copy p,
  .egp-showcase-card p,
  .egp-cta-wrap p {
    font-size: 14px;
    line-height: 1.62;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .egp-eyebrow {
    padding: 8px 12px;
    gap: 8px;
    font-size: 9.5px;
    letter-spacing: .075em;
    margin-left: auto;
    margin-right: auto;
  }

  .egp-eyebrow::before {
    width: 7px;
    height: 7px;
  }

  .egp-btn-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .egp-btn {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 13px 16px;
    border-radius: 14px;
    font-size: 14px;
  }

  .egp-metric {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 15px;
    border-radius: 18px;
    text-align: left;
  }

  .egp-metric strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(106,73,242,.09);
    color: var(--egp-text);
    font-size: 13.5px;
    line-height: 1.15;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
  }

  .egp-metric span {
    font-size: 12.8px;
    line-height: 1.52;
    text-align: left;
  }

  .egp-hero-card {
    min-height: auto;
    border-radius: 22px;
  }

  .egp-hero-card img {
    height: 340px;
  }

  .egp-float-top,
  .egp-float-bottom,
  .egp-float-mini {
    padding: 15px;
    border-radius: 18px;
    text-align: center;
  }

  .egp-doc-line {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
  }

  .egp-proof-row,
  .egp-flow-wrap,
  .egp-showcase-card,
  .egp-cta-wrap,
  .egp-preview {
    padding: 16px;
    border-radius: 22px;
  }

  .egp-proof-list {
    gap: 8px;
  }

  .egp-proof-list span {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 11.5px;
  }

  .egp-image-panel,
  .egp-media-tall,
  .egp-media-wide {
    min-height: 320px;
    border-radius: 22px;
  }

  .egp-image-note,
  .egp-media-glass {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 14px;
    border-radius: 16px;
    text-align: center;
  }

  .egp-stack-list {
    gap: 12px;
    margin-top: 20px;
  }

  .egp-stack-item {
    padding: 16px;
    border-radius: 18px;
    text-align: center;
  }

  .egp-flow-step {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px 12px;
    align-items: center;
    padding: 15px;
    border-radius: 18px;
    background: rgba(255,255,255,.90);
    border: 1px solid var(--egp-line);
    box-shadow: var(--egp-shadow-sm);
  }

  .egp-flow-step::before {
    display: none;
  }

  .egp-flow-num {
    position: static;
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .egp-flow-step strong {
    font-size: 15.5px;
    line-height: 1.3;
  }

  .egp-flow-step p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.58;
    text-align: left;
  }

  .egp-preview-top {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .egp-preview-block {
    padding: 14px;
    border-radius: 16px;
    text-align: center;
  }

  .egp-preview-block p {
    text-align: center;
    font-size: 13px;
  }

  .egp-inline-list {
    gap: 10px;
  }

  .egp-inline-list li {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.58;
    text-align: left;
  }

  .egp-media-tall,
  .egp-media-wide {
    min-height: 300px;
  }

  .egp-ribbon {
    padding: 16px;
    border-radius: 22px;
  }

  .egp-ribbon-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .egp-ribbon-stat {
    text-align: center;
    border-radius: 16px;
  }

  .egp-cta-grid {
    grid-template-columns: 1fr;
  }

  .egp-cta-box {
    padding: 16px;
    border-radius: 18px;
    text-align: center;
  }
}

@media (max-width: 430px) {
  :root {
    --egp-page-gap: 22px;
    --egp-section-y: 42px;
  }

  .egp-hero {
    padding-top: 88px;
    padding-bottom: 30px;
  }

  .egp-title-xl {
    font-size: clamp(27px, 8.8vw, 36px);
  }

  .egp-title-lg {
    font-size: clamp(22px, 7vw, 30px);
  }

  .egp-hero-card img {
    height: 320px;
  }

  .egp-metric {
    grid-template-columns: 78px minmax(0, 1fr);
    padding: 13px;
    border-radius: 16px;
  }

  .egp-metric strong {
    min-height: 40px;
    font-size: 12.5px;
  }

  .egp-float-top,
  .egp-float-bottom,
  .egp-float-mini,
  .egp-proof-row,
  .egp-flow-wrap,
  .egp-showcase-card,
  .egp-cta-wrap,
  .egp-preview,
  .egp-stack-item,
  .egp-flow-step {
    padding: 14px;
    border-radius: 18px;
  }
}

@media (max-width: 360px) {
  :root {
    --egp-page-gap: 18px;
  }

  .egp-hero {
    padding-top: 82px;
  }

  .egp-title-xl {
    font-size: 25px;
  }

  .egp-eyebrow {
    font-size: 8.5px;
    letter-spacing: .055em;
    padding: 7px 10px;
  }

  .egp-metric {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .egp-metric strong {
    width: fit-content;
    margin: 0 auto;
  }

  .egp-metric span {
    text-align: center;
  }
}

@media (hover: none) {
  .egp-btn:hover,
  .egp-metric:hover,
  .egp-proof-row:hover,
  .egp-stack-item:hover,
  .egp-flow-wrap:hover,
  .egp-preview:hover,
  .egp-showcase-card:hover,
  .egp-ribbon:hover,
  .egp-cta-wrap:hover,
  .egp-cta-box:hover,
  .egp-float-top:hover,
  .egp-float-bottom:hover,
  .egp-float-mini:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .egp-page *,
  .egp-page *::before,
  .egp-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/*===================================================================================
    31. Candidate Evaluation Guides CSS End
===================================================================================*/


/*===================================================================================
    32. Assessment Benchmark Reports CSS Start
===================================================================================*/

:root {
    --abr-bg: #f7f3ff;
    --abr-bg-soft: #fcfbff;
    --abr-surface: rgba(255, 255, 255, 0.94);
    --abr-surface-soft: rgba(255, 255, 255, 0.88);
    --abr-title: #32236F;
    --abr-text: rgba(62, 63, 102, 0.78);
    --abr-muted: rgba(62, 63, 102, 0.62);
    --abr-brand: #6A49F2;
    --abr-brand-2: #8A70FF;
    --abr-brand-soft: rgba(106, 73, 242, 0.08);
    --abr-line: rgba(106, 73, 242, 0.12);
    --abr-line-strong: rgba(106, 73, 242, 0.20);
    --abr-shadow-sm: 0 10px 28px rgba(50, 35, 111, 0.06);
    --abr-shadow-md: 0 16px 42px rgba(50, 35, 111, 0.085);
    --abr-shadow-lg: 0 28px 72px rgba(50, 35, 111, 0.15);
    --abr-shadow-deep: 0 34px 86px rgba(50, 35, 111, 0.18);
    --abr-radius-xl: 34px;
    --abr-radius-lg: 26px;
    --abr-radius-md: 20px;
    --abr-radius-sm: 16px;
    --abr-wrap: 1170px;
    --abr-page-gap: 44px;
    --abr-section-y: clamp(46px, 4.8vw, 68px);
    --abr-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

.abr-page,
.abr-page *,
.abr-page *::before,
.abr-page *::after {
    box-sizing: border-box;
}

.abr-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    color: var(--abr-text);
    background:
        radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
        radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
        linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.abr-page::before,
.abr-page::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    opacity: .72;
}

.abr-page::before {
    width: 300px;
    height: 300px;
    top: 92px;
    left: -120px;
    background: rgba(106, 73, 242, 0.13);
}

.abr-page::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
}

.abr-page img,
.abr-page svg {
    display: block;
    max-width: 100%;
}

.abr-page a {
    color: inherit;
    text-decoration: none;
}

.abr-page h1,
.abr-page h2,
.abr-page h3,
.abr-page p,
.abr-page ul,
.abr-page li {
    margin: 0;
    font-family: inherit;
}

.abr-shell {
    width: min(var(--abr-wrap), calc(100% - var(--abr-page-gap)));
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 0 0 clamp(58px, 5vw, 88px);
}

.abr-section {
    position: relative;
    padding: var(--abr-section-y) 0;
}

.abr-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--abr-brand);
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
}

.abr-label::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--abr-brand), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
}

.abr-page h1,
.abr-page h2,
.abr-page h3,
.abr-title-lg,
.abr-title-md {
    color: var(--abr-title);
    font-weight: 700;
    letter-spacing: -0.045em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.abr-page h1 {
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.06;
}

.abr-page h2,
.abr-title-lg {
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
}

.abr-page h3,
.abr-title-md {
    font-size: clamp(19px, 1.8vw, 24px);
    line-height: 1.3;
}

.abr-copy,
.abr-page p,
.abr-page li,
.abr-page span,
.abr-page small {
    color: var(--abr-text);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.abr-muted {
    color: var(--abr-muted);
}

.abr-head {
    display: grid;
    gap: 14px;
    max-width: 820px;
    margin-bottom: clamp(24px, 2.8vw, 36px);
}

.abr-head p {
    max-width: 760px;
}

.abr-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.abr-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    white-space: normal;
    transition: var(--abr-transition);
}

.abr-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
}

.abr-btn:hover {
    transform: translateY(-3px);
}

.abr-btn:hover::before {
    transform: scaleX(1);
}

.abr-btn.primary {
    color: #fff;
    background: linear-gradient(135deg, var(--abr-brand), var(--abr-brand-2));
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.24);
}

.abr-btn.primary::before {
    background: linear-gradient(135deg, var(--abr-title), var(--abr-brand));
}

.abr-btn.primary:hover {
    color: #fff;
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.30);
}

.abr-btn.secondary {
    color: var(--abr-brand);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
}

.abr-btn.secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
}

.abr-card,
.abr-soft,
.abr-glass,
.abr-inline-stat,
.abr-trust-bar,
.abr-note-float,
.abr-report-board,
.abr-aside-block,
.abr-flow-wrap,
.abr-step,
.abr-side-panel,
.abr-preview,
.abr-scale,
.abr-line-item,
.abr-compare-row,
.abr-preview-block {
    background: var(--abr-surface);
    border: 1px solid var(--abr-line);
    box-shadow: var(--abr-shadow-md);
    backdrop-filter: blur(14px);
    transition: var(--abr-transition);
}

.abr-card:hover,
.abr-soft:hover,
.abr-glass:hover,
.abr-inline-stat:hover,
.abr-trust-bar:hover,
.abr-note-float:hover,
.abr-report-board:hover,
.abr-aside-block:hover,
.abr-flow-wrap:hover,
.abr-step:hover,
.abr-side-panel:hover,
.abr-preview:hover,
.abr-preview-block:hover {
    transform: translateY(-4px);
    box-shadow: var(--abr-shadow-lg);
    border-color: var(--abr-line-strong);
}

/* Hero Start */
.abr-hero {
    padding-top: clamp(116px, 8vw, 138px);
    padding-bottom: clamp(42px, 5vw, 64px);
}

.abr-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.abr-hero-copy {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.abr-hero-copy h1 {
    max-width: 780px;
}

.abr-hero-copy p {
    max-width: 660px;
    font-size: 16px;
    line-height: 1.76;
}

.abr-inline-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 2px;
    max-width: 610px;
}

.abr-inline-stat {
    min-width: 0;
    padding: 18px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%),
        rgba(255, 255, 255, 0.90);
}

.abr-inline-stat strong {
    display: block;
    margin-bottom: 7px;
    color: var(--abr-title);
    font-size: 20px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
}

.abr-inline-stat span {
    display: block;
    color: var(--abr-text);
    font-size: 12.8px;
    line-height: 1.55;
}

.abr-hero-media {
    position: relative;
    min-width: 0;
    min-height: 650px;
    display: grid;
    align-items: center;
}

.abr-hero-photo-wrap {
    position: relative;
    width: min(100%, 610px);
    min-height: 650px;
    margin-left: auto;
    border-radius: var(--abr-radius-xl);
    overflow: hidden;
    box-shadow: var(--abr-shadow-deep);
    border: 1px solid rgba(106, 73, 242, 0.12);
    background: #efeaff;
}

.abr-hero-photo-wrap::after,
.abr-image-frame::after,
.abr-mosaic-main::after,
.abr-cta-box::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(23, 15, 60, 0.02), rgba(23, 15, 60, 0.16)),
        radial-gradient(circle at 0 100%, rgba(106, 73, 242, .18), transparent 42%);
}

.abr-hero-photo {
    width: 100%;
    height: 650px;
    min-height: 0;
    object-fit: cover;
    object-position: center;
}

.abr-floating-badge,
.abr-preview,
.abr-note-float {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(106, 73, 242, 0.12);
    box-shadow: var(--abr-shadow-md);
    backdrop-filter: blur(14px);
}

.abr-floating-badge {
    position: absolute;
    top: 28px;
    right: -10px;
    z-index: 3;
    max-width: calc(100% - 24px);
    padding: 12px 16px;
    border-radius: 999px;
    color: var(--abr-title);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 800;
    text-align: center;
}

.abr-preview {
    position: absolute;
    left: -16px;
    bottom: 28px;
    z-index: 3;
    width: min(390px, calc(100% - 24px));
    padding: 20px;
    border-radius: 26px;
}

.abr-preview-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.abr-preview-top h3 {
    font-size: 16px;
    line-height: 1.35;
}

.abr-preview-top span,
.abr-report-chip,
.abr-preview-badge,
.abr-pill,
.abr-side-panel .abr-mini,
.abr-cta-point {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.10);
    color: var(--abr-brand);
    font-size: 11.5px;
    line-height: 1.2;
    font-weight: 800;
    text-align: center;
}

.abr-preview-score {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
}

.abr-preview-score strong {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 22px;
    color: var(--abr-brand);
    background: rgba(106, 73, 242, 0.10);
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.abr-preview-score p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
}

.abr-scale-group {
    display: grid;
    gap: 10px;
}

.abr-scale {
    display: grid;
    grid-template-columns: 112px 1fr 48px;
    gap: 9px;
    align-items: center;
    padding: 10px;
    border-radius: 14px;
    background: rgba(250, 248, 255, .88);
    box-shadow: none;
}

.abr-scale label,
.abr-bar-line label {
    color: var(--abr-text);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
}

.abr-scale-track,
.abr-bar-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.10);
    overflow: hidden;
}

.abr-scale-fill,
.abr-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    border-radius: inherit;
}

.abr-scale-fill.primary,
.abr-bar-fill.candidate {
    background: linear-gradient(90deg, var(--abr-brand), var(--abr-brand-2));
}

.abr-scale-fill.soft,
.abr-bar-fill.benchmark {
    background: linear-gradient(90deg, #cabfff, #e7e2ff);
}

.abr-scale em,
.abr-bar-line em {
    color: var(--abr-title);
    font-size: 12px;
    line-height: 1.35;
    font-style: normal;
    font-weight: 800;
    text-align: right;
}
/* Hero End */

/* Trust Row Start */
.abr-trust {
    padding-top: clamp(24px, 3vw, 34px);
}

.abr-trust-bar {
    display: grid;
    grid-template-columns: minmax(230px, .6fr) minmax(0, 1.4fr);
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 0 0, rgba(106, 73, 242, .08), transparent 34%),
        rgba(255, 255, 255, 0.90);
}

.abr-trust-copy {
    color: var(--abr-title);
    font-size: 14px;
    line-height: 1.62;
    font-weight: 800;
}

.abr-pill-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.abr-pill {
    min-height: 38px;
    color: var(--abr-brand);
}
/* Trust Row End */

/* Editorial Split Start */
.abr-split,
.abr-experience-grid,
.abr-mosaic {
    display: grid;
    gap: clamp(24px, 4vw, 42px);
    align-items: center;
}

.abr-split {
    grid-template-columns: minmax(420px, .95fr) minmax(0, 1.05fr);
}

.abr-image-panel {
    position: relative;
    min-width: 0;
}

.abr-image-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--abr-radius-xl);
    box-shadow: var(--abr-shadow-deep);
    min-height: 560px;
    background: #efeaff;
    border: 1px solid rgba(106, 73, 242, 0.12);
}

.abr-image-frame img {
    width: 100%;
    height: 560px;
    min-height: 0;
    object-fit: cover;
}

.abr-note-float {
    position: absolute;
    right: -8px;
    bottom: 24px;
    z-index: 2;
    width: min(300px, 78%);
    padding: 18px;
    border-radius: 22px;
}

.abr-note-float strong {
    display: block;
    margin-bottom: 7px;
    color: var(--abr-title);
    font-size: 15px;
    line-height: 1.38;
    font-weight: 800;
}

.abr-note-float p {
    font-size: 13px;
    line-height: 1.62;
}

.abr-copy-stack {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.abr-copy-stack p {
    max-width: 700px;
}

.abr-line-list {
    display: grid;
    gap: 14px;
    margin-top: 4px;
}

.abr-line-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 16px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .06), transparent 34%),
        rgba(255,255,255,.90);
}

.abr-line-dot {
    width: 12px;
    height: 12px;
    margin: 8px auto 0;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--abr-brand), var(--abr-brand-2));
    box-shadow: 0 0 0 8px rgba(106, 73, 242, 0.08);
}

.abr-line-item strong {
    display: block;
    margin-bottom: 5px;
    color: var(--abr-title);
    font-size: 15.5px;
    line-height: 1.35;
    font-weight: 800;
}

.abr-line-item p {
    font-size: 13.5px;
    line-height: 1.62;
}
/* Editorial Split End */

/* Report Experience Start */
.abr-experience-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: stretch;
}

.abr-report-board {
    padding: clamp(22px, 3vw, 30px);
    border-radius: var(--abr-radius-xl);
    background:
        radial-gradient(circle at 0 0, rgba(106, 73, 242, .09), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,243,255,.90));
}

.abr-report-top,
.abr-report-headline,
.abr-preview-top {
    min-width: 0;
}

.abr-report-top {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.abr-report-headline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
    margin-bottom: 22px;
}

.abr-score-box {
    padding: 18px 20px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(106, 73, 242, 0.09);
    box-shadow: var(--abr-shadow-sm);
}

.abr-score-box strong {
    display: block;
    margin-bottom: 6px;
    color: var(--abr-brand);
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.abr-compare-list,
.abr-bar-stack,
.abr-report-aside {
    display: grid;
    gap: 14px;
}

.abr-compare-row {
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--abr-shadow-sm);
}

.abr-compare-row-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.abr-compare-row-head strong {
    color: var(--abr-title);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
}

.abr-compare-row-head span {
    color: var(--abr-muted);
    font-size: 12.5px;
    line-height: 1.45;
    white-space: nowrap;
    font-weight: 700;
}

.abr-bar-line {
    display: grid;
    grid-template-columns: 88px 1fr 44px;
    gap: 8px;
    align-items: center;
}

.abr-aside-block {
    padding: 22px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .07), transparent 34%),
        rgba(255,255,255,.90);
}

.abr-aside-block strong {
    display: block;
    margin-bottom: 7px;
    color: var(--abr-title);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 800;
}

.abr-aside-block p {
    font-size: 13.5px;
    line-height: 1.62;
}
/* Report Experience End */

/* Flow Start */
.abr-flow-wrap {
    margin-top: clamp(22px, 3vw, 34px);
    padding: clamp(22px, 3vw, 28px);
    border-radius: var(--abr-radius-xl);
    background:
        radial-gradient(circle at 0 0, rgba(106, 73, 242, .10), transparent 34%),
        radial-gradient(circle at 100% 0, rgba(223, 218, 243, .42), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,243,255,.90));
}

.abr-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
    position: relative;
}

.abr-step {
    display: grid;
    align-content: start;
    min-width: 0;
    gap: 12px;
    padding: 20px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%),
        rgba(255, 255, 255, .90);
    box-shadow: var(--abr-shadow-sm);
}

.abr-step-no,
.abr-flow-num {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--abr-brand), var(--abr-brand-2));
    color: #fff;
    box-shadow: 0 14px 28px rgba(106, 73, 242, .20);
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
}

.abr-step h3 {
    font-size: 16.5px;
    line-height: 1.35;
}

.abr-step p {
    font-size: 13.5px;
    line-height: 1.62;
}

.abr-flow-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(24px, 4vw, 44px);
    align-items: center;
}

.abr-flow-list {
    display: grid;
    gap: 16px;
    margin-top: 22px;
}

.abr-flow-step {
    position: relative;
    padding: 0 0 0 58px;
    min-height: 64px;
}

.abr-flow-step::before {
    content: "";
    position: absolute;
    top: 44px;
    left: 20px;
    bottom: -18px;
    width: 1px;
    background: rgba(106, 73, 242, 0.16);
}

.abr-flow-step:last-child::before {
    display: none;
}

.abr-flow-num {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 14px;
}

.abr-flow-step strong {
    display: block;
    color: var(--abr-title);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 800;
}

.abr-flow-step p {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.62;
}

.abr-preview-sheet {
    display: grid;
    gap: 12px;
}

.abr-preview-block {
    padding: 16px;
    border-radius: 18px;
    background: rgba(250,248,255,.88);
    border: 1px solid rgba(106,73,242,.10);
    box-shadow: var(--abr-shadow-sm);
}

.abr-preview-block strong {
    display: block;
    color: var(--abr-title);
    font-size: 14px;
    line-height: 1.45;
    font-weight: 800;
}

.abr-preview-block p {
    margin: 7px 0 12px;
    font-size: 13px;
    line-height: 1.58;
}

.abr-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.10);
    overflow: hidden;
}

.abr-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--abr-brand), #af9dff);
}
/* Flow End */

/* Use Case Mosaic Start */
.abr-mosaic {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: stretch;
}

.abr-mosaic-main {
    position: relative;
    overflow: hidden;
    min-height: 470px;
    border-radius: var(--abr-radius-xl);
    box-shadow: var(--abr-shadow-deep);
    background: #efeaff;
}

.abr-mosaic-main img {
    width: 100%;
    height: 470px;
    min-height: 0;
    object-fit: cover;
}

.abr-mosaic-main::after {
    background:
        linear-gradient(180deg, rgba(17,11,40,0.05), rgba(17,11,40,0.70)),
        radial-gradient(circle at 0 100%, rgba(106, 73, 242, .24), transparent 44%);
}

.abr-mosaic-main-copy {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 1;
    display: grid;
    gap: 10px;
    color: #fff;
}

.abr-mosaic-main-copy h3 {
    color: #fff;
}

.abr-mosaic-main-copy p,
.abr-cta-box p {
    color: rgba(255,255,255,.84);
}

.abr-mosaic-side {
    display: grid;
    gap: 18px;
}

.abr-side-panel {
    display: grid;
    gap: 12px;
    align-content: start;
    min-height: 226px;
    padding: 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .07), transparent 34%),
        rgba(255,255,255,.90);
}

.abr-side-panel .abr-mini {
    width: fit-content;
}

.abr-side-panel h3 {
    font-size: 20px;
    line-height: 1.32;
}

.abr-side-panel p {
    font-size: 13.5px;
    line-height: 1.62;
}
/* Use Case Mosaic End */

/* CTA Start */
.abr-cta-box {
    position: relative;
    overflow: hidden;
    min-height: 430px;
    border-radius: 38px;
    box-shadow: var(--abr-shadow-deep);
    background: #1d1546;
}

.abr-cta-box img {
    width: 100%;
    height: 430px;
    min-height: 0;
    object-fit: cover;
}

.abr-cta-box::after {
    background:
        linear-gradient(90deg, rgba(29,21,70,.92) 0%, rgba(53,33,119,.80) 46%, rgba(106,73,242,.48) 100%),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.18), transparent 26%);
}

.abr-cta-content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    align-content: center;
    gap: 18px;
    max-width: 800px;
    padding: clamp(28px, 5vw, 56px);
}

.abr-cta-content h2 {
    max-width: 760px;
    color: #fff;
}

.abr-cta-content .abr-btn.secondary {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.20);
}

.abr-cta-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
}

.abr-cta-point {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.18);
}
/* CTA End */

/* Reveal Animation Start */
.abr-page [data-reveal] {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: no-preference) {
    .abr-page [data-reveal] {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .72s ease, transform .72s ease;
        transition-delay: var(--delay, 0s);
    }

    .abr-page [data-reveal].in-view,
    .abr-page [data-reveal].visible {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Reveal Animation End */

/* Responsive Start */
@media (max-width: 1180px) {
    .abr-page {
        --abr-page-gap: 34px;
        --abr-section-y: 58px;
    }

    .abr-hero-grid,
    .abr-split,
    .abr-experience-grid,
    .abr-flow-grid,
    .abr-mosaic {
        grid-template-columns: 1fr;
    }

    .abr-hero-media,
    .abr-hero-photo-wrap,
    .abr-hero-photo {
        min-height: 540px;
        height: 540px;
    }

    .abr-hero-photo-wrap {
        width: 100%;
        margin-left: 0;
    }

    .abr-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .abr-preview {
        left: 24px;
    }
}

@media (max-width: 860px) {
    .abr-page {
        --abr-page-gap: 28px;
        --abr-section-y: 54px;
    }

    .abr-hero {
        padding-top: 92px;
    }

    .abr-trust-bar,
    .abr-report-headline {
        grid-template-columns: 1fr;
    }

    .abr-pill-row {
        justify-content: flex-start;
    }

    .abr-report-board,
    .abr-flow-wrap,
    .abr-side-panel,
    .abr-cta-box {
        border-radius: 26px;
    }

    .abr-image-frame,
    .abr-image-frame img,
    .abr-mosaic-main,
    .abr-mosaic-main img {
        min-height: 410px;
        height: 410px;
    }

    .abr-hero-media,
    .abr-hero-photo-wrap,
    .abr-hero-photo {
        min-height: 500px;
        height: 500px;
    }
}

@media (max-width: 700px) {
    .abr-page {
        --abr-page-gap: 24px;
        --abr-section-y: 46px;
    }

    .abr-hero {
        padding-top: 76px;
        padding-bottom: 34px;
    }

    .abr-page h1 {
        font-size: clamp(30px, 9.2vw, 42px);
        line-height: 1.1;
    }

    .abr-page h2,
    .abr-title-lg {
        font-size: clamp(24px, 7.4vw, 34px);
        line-height: 1.16;
    }

    .abr-page h3,
    .abr-title-md {
        font-size: clamp(17px, 4.8vw, 22px);
    }

    .abr-page p,
    .abr-page li,
    .abr-page span,
    .abr-page small {
        font-size: 14px;
        line-height: 1.65;
    }

    .abr-label {
        padding: 8px 12px;
        gap: 8px;
        font-size: 9.5px;
        letter-spacing: .075em;
    }

    .abr-label::before {
        width: 7px;
        height: 7px;
    }

    .abr-btn-row,
    .abr-cta-points {
        display: grid;
        grid-template-columns: 1fr;
        gap: 11px;
        width: 100%;
    }

    .abr-btn,
    .abr-cta-point {
        width: 100%;
        min-width: 0;
        min-height: 50px;
        padding: 13px 16px;
        border-radius: 14px;
        font-size: 14px;
    }

    .abr-inline-stats,
    .abr-steps {
        grid-template-columns: 1fr;
    }

    .abr-hero-media,
    .abr-hero-photo-wrap,
    .abr-hero-photo {
        min-height: auto;
        height: auto;
    }

    .abr-hero-photo {
        height: 380px;
    }

    .abr-hero-photo-wrap,
    .abr-image-frame,
    .abr-mosaic-main,
    .abr-cta-box {
        border-radius: 24px;
    }

    .abr-floating-badge,
    .abr-preview,
    .abr-note-float {
        position: static;
        width: 100%;
        max-width: 100%;
        margin-top: 14px;
    }

    .abr-floating-badge {
        display: inline-flex;
        justify-content: center;
        border-radius: 18px;
    }

    .abr-preview,
    .abr-report-board,
    .abr-flow-wrap,
    .abr-side-panel,
    .abr-aside-block,
    .abr-line-item,
    .abr-step,
    .abr-preview-block,
    .abr-score-box,
    .abr-compare-row {
        padding: 16px;
        border-radius: 18px;
    }

    .abr-preview-top,
    .abr-preview-score,
    .abr-scale,
    .abr-bar-line,
    .abr-compare-row-head {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .abr-preview-score strong {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        font-size: 28px;
    }

    .abr-scale em,
    .abr-bar-line em,
    .abr-compare-row-head span {
        text-align: left;
        white-space: normal;
    }

    .abr-image-frame,
    .abr-image-frame img,
    .abr-mosaic-main,
    .abr-mosaic-main img {
        min-height: 310px;
        height: 310px;
    }

    .abr-flow-step {
        padding-left: 52px;
    }

    .abr-mosaic-main-copy {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }

    .abr-cta-box,
    .abr-cta-box img {
        min-height: 500px;
        height: 500px;
    }

    .abr-cta-content {
        align-content: end;
        padding: 20px;
    }
}

@media (max-width: 430px) {
    .abr-page {
        --abr-page-gap: 22px;
        --abr-section-y: 42px;
    }

    .abr-hero-photo {
        height: 330px;
    }

    .abr-page h1 {
        font-size: clamp(27px, 8.8vw, 36px);
    }

    .abr-page h2,
    .abr-title-lg {
        font-size: clamp(22px, 7vw, 30px);
    }

    .abr-line-item {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 10px;
    }

    .abr-line-dot {
        width: 10px;
        height: 10px;
        box-shadow: 0 0 0 6px rgba(106, 73, 242, 0.08);
    }

    .abr-image-frame,
    .abr-image-frame img,
    .abr-mosaic-main,
    .abr-mosaic-main img {
        min-height: 270px;
        height: 270px;
    }

    .abr-cta-box,
    .abr-cta-box img {
        min-height: 560px;
        height: 560px;
    }
}

@media (max-width: 360px) {
    .abr-page {
        --abr-page-gap: 18px;
    }

    .abr-page h1 {
        font-size: 25px;
    }

    .abr-label {
        font-size: 8.5px;
        letter-spacing: .055em;
        padding: 7px 10px;
    }
}

@media (hover: none) {
    .abr-btn:hover,
    .abr-card:hover,
    .abr-soft:hover,
    .abr-glass:hover,
    .abr-inline-stat:hover,
    .abr-trust-bar:hover,
    .abr-note-float:hover,
    .abr-report-board:hover,
    .abr-aside-block:hover,
    .abr-flow-wrap:hover,
    .abr-step:hover,
    .abr-side-panel:hover,
    .abr-preview:hover,
    .abr-preview-block:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .abr-page *,
    .abr-page *::before,
    .abr-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .abr-page [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}
/* Responsive End */

/*===================================================================================
    32. Assessment Benchmark Reports CSS End
===================================================================================*/


/*===================================================================================
    33. Product Documentation CSS Start
===================================================================================*/

:root {
    --pd-bg: #f7f3ff;
    --pd-bg-soft: #fcfbff;
    --pd-surface: rgba(255, 255, 255, 0.94);
    --pd-surface-soft: rgba(255, 255, 255, 0.88);
    --pd-surface-strong: #ffffff;
    --pd-title: #32236F;
    --pd-text: rgba(62, 63, 102, 0.78);
    --pd-muted: rgba(62, 63, 102, 0.62);
    --pd-line: rgba(106, 73, 242, 0.12);
    --pd-line-strong: rgba(106, 73, 242, 0.20);
    --pd-purple: #6A49F2;
    --pd-purple-dark: #4D32C8;
    --pd-purple-soft: rgba(106, 73, 242, 0.08);
    --pd-green: #1EA97C;
    --pd-shadow-sm: 0 10px 28px rgba(50, 35, 111, 0.06);
    --pd-shadow-md: 0 16px 42px rgba(50, 35, 111, 0.085);
    --pd-shadow-lg: 0 28px 72px rgba(50, 35, 111, 0.15);
    --pd-shadow-deep: 0 34px 86px rgba(50, 35, 111, 0.18);
    --pd-radius-xl: 34px;
    --pd-radius-lg: 26px;
    --pd-radius-md: 20px;
    --pd-radius-sm: 16px;
    --pd-wrap: 1170px;
    --pd-page-gap: 44px;
    --pd-section-y: clamp(46px, 4.8vw, 68px);
    --pd-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

.pd-premium-page,
.pd-premium-page *,
.pd-premium-page *::before,
.pd-premium-page *::after {
    box-sizing: border-box;
}

.pd-premium-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    color: var(--pd-text);
    background:
        radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
        radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
        linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pd-premium-page::before,
.pd-premium-page::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    opacity: .72;
}

.pd-premium-page::before {
    width: 300px;
    height: 300px;
    top: 92px;
    left: -120px;
    background: rgba(106, 73, 242, 0.13);
}

.pd-premium-page::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
}

.pd-premium-page img {
    width: 100%;
    max-width: 100%;
    display: block;
}

.pd-premium-page a {
    color: inherit;
    text-decoration: none;
}

.pd-premium-page h1,
.pd-premium-page h2,
.pd-premium-page h3,
.pd-premium-page p {
    margin: 0;
    font-family: inherit;
}

.pd-shell {
    width: min(var(--pd-wrap), calc(100% - var(--pd-page-gap)));
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.pd-section {
    padding: var(--pd-section-y) 0;
    position: relative;
}

.pd-badge,
.pd-mini-label,
.pd-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
    text-align: center;
}

.pd-badge {
    gap: 9px;
    min-height: auto;
    padding: 10px 15px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--pd-purple);
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.pd-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pd-purple), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
}

.pd-mini-label {
    gap: 8px;
    padding: 8px 12px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.10);
    color: var(--pd-purple);
    font-size: 11.5px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .035em;
}

.pd-tag {
    min-height: 34px;
    padding: 7px 11px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.10);
    color: var(--pd-purple);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.pd-head {
    display: grid;
    gap: 14px;
    max-width: 820px;
    margin-bottom: clamp(24px, 2.8vw, 36px);
}

.pd-head h2,
.pd-hero-copy h1,
.pd-cta-copy h2,
.pd-editorial-statement h2,
.pd-story-copy h2 {
    margin: 0;
    color: var(--pd-title);
    font-weight: 700;
    letter-spacing: -0.045em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.pd-hero-copy h1 {
    max-width: 780px;
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.06;
}

.pd-head h2,
.pd-cta-copy h2,
.pd-editorial-statement h2,
.pd-story-copy h2 {
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
}

.pd-head p,
.pd-hero-copy p,
.pd-copy,
.pd-editorial-copy p,
.pd-outcome-card p,
.pd-feature-card p,
.pd-story-copy p,
.pd-proof-card p,
.pd-cta-copy p,
.pd-kpi span,
.pd-panel-top p,
.pd-panel-bottom p,
.pd-cta-side p,
.pd-story-overlay span,
.pd-metric-card p {
    margin: 0;
    color: var(--pd-text);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.pd-hero-copy p {
    max-width: 660px;
    font-size: 16px;
    line-height: 1.76;
}

.pd-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 0;
}

.pd-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    white-space: normal;
    transition: var(--pd-transition);
}

.pd-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
}

.pd-btn:hover {
    transform: translateY(-3px);
}

.pd-btn:hover::before {
    transform: scaleX(1);
}

.pd-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--pd-purple), #8A70FF);
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.24);
}

.pd-btn-primary::before {
    background: linear-gradient(135deg, var(--pd-title), var(--pd-purple));
}

.pd-btn-primary:hover {
    color: #fff;
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.30);
}

.pd-btn-secondary {
    color: var(--pd-purple);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
}

.pd-btn-secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
}

.pd-kpi,
.pd-floating-panel,
.pd-editorial-statement,
.pd-outcome-card,
.pd-feature-card,
.pd-proof-card,
.pd-metric-card,
.pd-cta-side,
.pd-story-overlay {
    background: var(--pd-surface);
    border: 1px solid var(--pd-line);
    box-shadow: var(--pd-shadow-md);
    backdrop-filter: blur(14px);
    transition: var(--pd-transition);
}

.pd-kpi:hover,
.pd-floating-panel:hover,
.pd-editorial-statement:hover,
.pd-outcome-card:hover,
.pd-feature-card:hover,
.pd-proof-card:hover,
.pd-metric-card:hover,
.pd-cta-side:hover {
    transform: translateY(-4px);
    box-shadow: var(--pd-shadow-lg);
    border-color: var(--pd-line-strong);
}

/* Product Documentation Hero Start */
.pd-hero {
    padding: clamp(116px, 8vw, 138px) 0 clamp(42px, 5vw, 64px);
}

.pd-hero-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.pd-hero-copy {
    display: grid;
    gap: 22px;
    align-content: center;
    min-width: 0;
    padding: 0;
}

.pd-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 2px;
    max-width: 760px;
}

.pd-kpi {
    min-width: 0;
    padding: 18px;
    border-radius: 20px;
    background: radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%), rgba(255, 255, 255, 0.90);
}

.pd-kpi strong {
    display: block;
    margin-bottom: 7px;
    color: var(--pd-title);
    font-size: 18px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.pd-kpi span {
    display: block;
    font-size: 12.8px;
    line-height: 1.55;
}

.pd-hero-media {
    position: relative;
    min-height: 650px;
    min-width: 0;
    display: grid;
    align-items: center;
}

.pd-hero-frame {
    position: relative;
    width: min(100%, 610px);
    min-height: 650px;
    height: auto;
    margin-left: auto;
    border-radius: var(--pd-radius-xl);
    overflow: hidden;
    background: #efeaff;
    border: 1px solid rgba(106, 73, 242, 0.12);
    box-shadow: var(--pd-shadow-deep);
}

.pd-hero-frame img {
    position: relative;
    width: 100%;
    height: 650px;
    object-fit: cover;
}

.pd-hero-frame::after,
.pd-story-media::after,
.pd-proof-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(23, 15, 60, 0.02), rgba(23, 15, 60, 0.16)),
        radial-gradient(circle at 0 100%, rgba(106, 73, 242, .18), transparent 42%);
}

.pd-floating-panel {
    position: absolute;
    z-index: 3;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
}

.pd-panel-top {
    top: 28px;
    right: -14px;
    width: min(330px, calc(100% - 24px));
    padding: 20px;
}

.pd-panel-bottom {
    left: -18px;
    bottom: 30px;
    width: min(360px, calc(100% - 24px));
    padding: 20px;
}

.pd-panel-top h3,
.pd-panel-bottom h3,
.pd-outcome-card h3,
.pd-feature-card h3,
.pd-proof-copy h3,
.pd-metric-card h3,
.pd-cta-side h3 {
    margin: 12px 0 8px;
    color: var(--pd-title);
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.pd-panel-top p,
.pd-panel-bottom p {
    font-size: 13.5px;
    line-height: 1.62;
}

.pd-panel-list,
.pd-progress {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.pd-panel-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(106, 73, 242, 0.10);
}

.pd-panel-line:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.pd-panel-line span,
.pd-progress-top {
    color: var(--pd-title);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
}

.pd-panel-line strong {
    color: var(--pd-green);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
}

.pd-progress-item {
    display: grid;
    gap: 8px;
}

.pd-progress-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.pd-bar {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.10);
    overflow: hidden;
}

.pd-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pd-purple), #ab97ff);
}
/* Product Documentation Hero End */

/* Product Documentation Editorial Start */
.pd-editorial {
    padding-top: clamp(34px, 4vw, 54px);
}

.pd-editorial-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 22px;
    align-items: start;
}

.pd-editorial-statement {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 16px;
    padding: 30px;
    border-radius: 30px;
    background: radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,243,255,.92));
}

.pd-editorial-cards {
    display: grid;
    gap: 16px;
}

.pd-outcome-card {
    padding: 24px;
    border-radius: 24px;
    background: radial-gradient(circle at 100% 0, rgba(106, 73, 242, .07), transparent 34%), rgba(255,255,255,.90);
}

.pd-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
/* Product Documentation Editorial End */

/* Product Documentation Story Start */
.pd-story-grid {
    display: grid;
    grid-template-columns: minmax(420px, 1.02fr) minmax(0, .98fr);
    gap: clamp(26px, 4vw, 44px);
    align-items: center;
}

.pd-story-media {
    position: relative;
    min-height: 560px;
    border-radius: var(--pd-radius-xl);
    overflow: hidden;
    background: #efeaff;
    border: 1px solid rgba(106, 73, 242, 0.12);
    box-shadow: var(--pd-shadow-deep);
}

.pd-story-media img {
    width: 100%;
    height: 560px;
    object-fit: cover;
}

.pd-story-overlay {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.90);
}

.pd-story-overlay strong {
    display: block;
    color: var(--pd-purple);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
}

.pd-story-overlay span {
    display: block;
    margin-top: 8px;
    color: var(--pd-title);
    font-size: 14px;
    line-height: 1.62;
}

.pd-story-copy {
    display: grid;
    gap: 18px;
}

.pd-story-copy p {
    max-width: 640px;
}

.pd-feature-stack {
    margin-top: 6px;
    display: grid;
    gap: 14px;
}

.pd-feature-card {
    padding: 20px;
    border-radius: 22px;
    background: radial-gradient(circle at 100% 0, rgba(106, 73, 242, .07), transparent 34%), rgba(255,255,255,.90);
}

.pd-feature-card p,
.pd-proof-copy p,
.pd-metric-card p {
    font-size: 13.5px;
    line-height: 1.62;
}
/* Product Documentation Story End */

/* Product Documentation Visual Grid Start */
.pd-visual-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.pd-proof-card {
    overflow: hidden;
    border-radius: 28px;
    background: rgba(255,255,255,.90);
}

.pd-proof-image {
    position: relative;
    height: 270px;
    overflow: hidden;
    background: #efeaff;
}

.pd-proof-image img {
    width: 100%;
    height: 270px;
    object-fit: cover;
    transition: transform .6s ease;
}

.pd-proof-card:hover .pd-proof-image img {
    transform: scale(1.04);
}

.pd-proof-copy {
    padding: 24px;
}
/* Product Documentation Visual Grid End */

/* Product Documentation Metrics Start */
.pd-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.pd-metric-card {
    padding: 28px;
    border-radius: 28px;
    background: radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,243,255,.92));
}

.pd-metric-card strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    min-height: 58px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 18px;
    color: var(--pd-purple);
    background: rgba(106, 73, 242, .09);
    font-size: 32px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.pd-metric-card h3 {
    margin-top: 0;
}
/* Product Documentation Metrics End */

/* Product Documentation CTA Start */
.pd-cta {
    padding-top: clamp(32px, 4vw, 54px);
    padding-bottom: clamp(58px, 6vw, 92px);
}

.pd-cta-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--pd-radius-xl);
    background: radial-gradient(circle at right top, rgba(255,255,255,0.14), transparent 28%), linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    color: #fff;
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
}

.pd-cta-panel::before,
.pd-cta-panel::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    opacity: .24;
}

.pd-cta-panel::before {
    width: 300px;
    height: 300px;
    right: -100px;
    top: -100px;
    background: radial-gradient(circle, rgba(255,255,255,.56), rgba(255,255,255,0));
}

.pd-cta-panel::after {
    width: 240px;
    height: 240px;
    left: -90px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(255,255,255,.30), rgba(255,255,255,0));
}

.pd-cta-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    gap: 28px;
    align-items: center;
    padding: clamp(26px, 3vw, 40px);
}

.pd-cta-copy {
    display: grid;
    gap: 16px;
}

.pd-cta-copy h2 {
    max-width: 760px;
    color: #fff;
}

.pd-cta-copy p {
    max-width: 640px;
    color: rgba(255,255,255,.82);
}

.pd-cta-copy .pd-badge {
    color: #fff !important;
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: none;
}

.pd-cta-copy .pd-badge::before {
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255,255,255,.12);
}

.pd-cta-side {
    padding: 24px;
    border-radius: 28px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: none;
}

.pd-cta-side h3 {
    margin: 0;
    color: #fff;
}

.pd-cta-side p {
    margin-top: 10px;
    color: rgba(255,255,255,.78);
    font-size: 14px;
    line-height: 1.68;
}

.pd-cta-side .pd-btn-row {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
}

.pd-cta-side .pd-btn {
    width: 100%;
}

.pd-cta-side .pd-btn-primary {
    background: #fff;
    color: var(--pd-title);
    box-shadow: 0 18px 38px rgba(0,0,0,.10);
}

.pd-cta-side .pd-btn-secondary {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.22);
    box-shadow: none;
}
/* Product Documentation CTA End */

/* Product Documentation Responsive Start */
@media (max-width: 1100px) {
    :root {
        --pd-page-gap: 34px;
        --pd-section-y: 58px;
    }

    .pd-hero-wrap,
    .pd-editorial-grid,
    .pd-story-grid,
    .pd-cta-layout {
        grid-template-columns: 1fr;
    }

    .pd-editorial-statement {
        position: static;
    }

    .pd-hero-copy {
        max-width: 900px;
    }

    .pd-hero-media {
        min-height: auto;
        max-width: 820px;
        display: grid;
        gap: 14px;
    }

    .pd-hero-frame {
        width: 100%;
        min-height: 560px;
    }

    .pd-hero-frame img {
        height: 560px;
    }

    .pd-floating-panel {
        position: static;
        width: 100%;
    }

    .pd-story-media,
    .pd-story-media img {
        min-height: 460px;
        height: 460px;
    }

    .pd-metrics-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    :root {
        --pd-page-gap: 30px;
        --pd-section-y: 54px;
    }

    .pd-visual-grid {
        grid-template-columns: 1fr;
    }

    .pd-kpis {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    :root {
        --pd-page-gap: 24px;
        --pd-section-y: 46px;
    }

    .pd-shell {
        width: min(var(--pd-wrap), calc(100% - var(--pd-page-gap)));
    }

    .pd-section {
        padding: var(--pd-section-y) 0;
    }

    .pd-hero {
        padding: 96px 0 34px;
    }

    .pd-hero-copy,
    .pd-head,
    .pd-story-copy,
    .pd-editorial-statement,
    .pd-cta-copy,
    .pd-cta-side {
        text-align: center;
        justify-items: center;
    }

    .pd-hero-copy h1 {
        font-size: clamp(30px, 9.3vw, 42px);
        line-height: 1.1;
        max-width: none;
    }

    .pd-head h2,
    .pd-cta-copy h2,
    .pd-editorial-statement h2,
    .pd-story-copy h2 {
        font-size: clamp(24px, 7.4vw, 34px);
        line-height: 1.16;
        max-width: none;
    }

    .pd-head p,
    .pd-hero-copy p,
    .pd-editorial-copy p,
    .pd-outcome-card p,
    .pd-feature-card p,
    .pd-story-copy p,
    .pd-proof-card p,
    .pd-cta-copy p,
    .pd-metric-card p,
    .pd-cta-side p {
        font-size: 14px;
        line-height: 1.62;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .pd-badge {
        padding: 8px 12px;
        gap: 8px;
        font-size: 9.5px;
        letter-spacing: .075em;
        margin-left: auto;
        margin-right: auto;
    }

    .pd-badge::before {
        width: 7px;
        height: 7px;
    }

    .pd-btn-row {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .pd-btn {
        width: 100%;
        min-width: 0;
        min-height: 50px;
        padding: 13px 16px;
        border-radius: 14px;
        font-size: 14px;
    }

    .pd-kpi {
        display: grid;
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 15px;
        border-radius: 18px;
        text-align: left;
    }

    .pd-kpi strong {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        margin: 0;
        padding: 8px 10px;
        border-radius: 14px;
        background: rgba(106, 73, 242, .09);
        color: var(--pd-title);
        font-size: 13.5px;
        line-height: 1.15;
        text-align: center;
    }

    .pd-kpi span {
        font-size: 12.8px;
        line-height: 1.52;
        text-align: left;
    }

    .pd-hero-frame {
        min-height: auto;
        border-radius: 22px;
    }

    .pd-hero-frame img {
        height: 340px;
    }

    .pd-floating-panel,
    .pd-editorial-statement,
    .pd-outcome-card,
    .pd-feature-card,
    .pd-proof-card,
    .pd-metric-card,
    .pd-cta-side {
        padding: 15px;
        border-radius: 18px;
    }

    .pd-panel-top h3,
    .pd-panel-bottom h3,
    .pd-outcome-card h3,
    .pd-feature-card h3,
    .pd-proof-copy h3,
    .pd-metric-card h3,
    .pd-cta-side h3 {
        font-size: 16px;
        line-height: 1.32;
        text-align: center;
    }

    .pd-panel-line {
        display: grid;
        grid-template-columns: 1fr auto;
        text-align: left;
    }

    .pd-progress-top {
        font-size: 12.5px;
    }

    .pd-tag-row {
        justify-content: center;
        gap: 8px;
    }

    .pd-tag {
        min-height: 32px;
        padding: 7px 10px;
        font-size: 11.5px;
    }

    .pd-story-media,
    .pd-story-media img {
        min-height: 320px;
        height: 320px;
        border-radius: 22px;
    }

    .pd-story-overlay {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 14px;
        border-radius: 16px;
        text-align: center;
    }

    .pd-story-overlay span {
        font-size: 13px;
        line-height: 1.58;
    }

    .pd-proof-image,
    .pd-proof-image img {
        height: 220px;
    }

    .pd-proof-copy {
        padding: 15px;
        text-align: center;
    }

    .pd-metric-card {
        text-align: center;
    }

    .pd-metric-card strong {
        min-width: 76px;
        min-height: 50px;
        font-size: 24px;
        margin-left: auto;
        margin-right: auto;
    }

    .pd-cta-panel {
        border-radius: 24px;
    }

    .pd-cta-layout {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 18px;
    }

    .pd-cta-side .pd-btn-row {
        width: 100%;
    }
}

@media (max-width: 430px) {
    :root {
        --pd-page-gap: 22px;
        --pd-section-y: 42px;
    }

    .pd-hero {
        padding-top: 88px;
        padding-bottom: 30px;
    }

    .pd-hero-copy h1 {
        font-size: clamp(27px, 8.8vw, 36px);
    }

    .pd-head h2,
    .pd-cta-copy h2,
    .pd-editorial-statement h2,
    .pd-story-copy h2 {
        font-size: clamp(22px, 7vw, 30px);
    }

    .pd-hero-frame img {
        height: 320px;
    }

    .pd-kpi {
        grid-template-columns: 78px minmax(0, 1fr);
        padding: 13px;
        border-radius: 16px;
    }

    .pd-kpi strong {
        min-height: 38px;
        font-size: 12.5px;
    }

    .pd-floating-panel,
    .pd-editorial-statement,
    .pd-outcome-card,
    .pd-feature-card,
    .pd-proof-card,
    .pd-metric-card,
    .pd-cta-side {
        padding: 14px;
        border-radius: 18px;
    }
}

@media (max-width: 360px) {
    :root {
        --pd-page-gap: 18px;
    }

    .pd-hero {
        padding-top: 82px;
    }

    .pd-hero-copy h1 {
        font-size: 25px;
    }

    .pd-badge {
        font-size: 8.5px;
        letter-spacing: .055em;
        padding: 7px 10px;
    }

    .pd-kpi {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .pd-kpi strong {
        width: fit-content;
        margin: 0 auto;
    }

    .pd-kpi span {
        text-align: center;
    }
}

@media (hover: none) {
    .pd-btn:hover,
    .pd-kpi:hover,
    .pd-floating-panel:hover,
    .pd-editorial-statement:hover,
    .pd-outcome-card:hover,
    .pd-feature-card:hover,
    .pd-proof-card:hover,
    .pd-metric-card:hover,
    .pd-cta-side:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-premium-page *,
    .pd-premium-page *::before,
    .pd-premium-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}
/* Product Documentation Responsive End */

/*===================================================================================
    33. Product Documentation CSS End
===================================================================================*/


/*===================================================================================
    34. About CloudTest CSS Start
===================================================================================*/

:root {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --bg-purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --slider-dots-color: #D4D2DD;
    --light-bg: #DFDAF3;

    --ac-bg: #f7f3ff;
    --ac-bg-soft: #fcfbff;
    --ac-surface: rgba(255, 255, 255, 0.94);
    --ac-surface-soft: rgba(255, 255, 255, 0.88);
    --ac-title: #32236F;
    --ac-text: rgba(62, 63, 102, 0.78);
    --ac-muted: rgba(62, 63, 102, 0.62);
    --ac-brand: #6A49F2;
    --ac-brand-2: #8A70FF;
    --ac-brand-soft: rgba(106, 73, 242, 0.08);
    --ac-line: rgba(106, 73, 242, 0.12);
    --ac-line-strong: rgba(106, 73, 242, 0.20);
    --ac-shadow-sm: 0 10px 28px rgba(50, 35, 111, 0.06);
    --ac-shadow-md: 0 16px 42px rgba(50, 35, 111, 0.085);
    --ac-shadow-lg: 0 28px 72px rgba(50, 35, 111, 0.15);
    --ac-shadow-deep: 0 34px 86px rgba(50, 35, 111, 0.18);
    --ac-radius-xl: 34px;
    --ac-radius-lg: 26px;
    --ac-radius-md: 20px;
    --ac-radius-sm: 16px;
    --ac-container: 1220px;
    --ac-page-gap: 44px;
    --ac-section-y: clamp(46px, 4.8vw, 68px);
    --ac-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

.about-cloudtest-page,
.about-cloudtest-page *,
.about-cloudtest-page *::before,
.about-cloudtest-page *::after {
    box-sizing: border-box;
}

.about-cloudtest-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    padding: 0 0 clamp(58px, 6vw, 96px);
    color: var(--ac-text);
    background:
        radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
        radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
        linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.about-cloudtest-page::before,
.about-cloudtest-page::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    opacity: .72;
}

.about-cloudtest-page::before {
    width: 300px;
    height: 300px;
    top: 92px;
    left: -120px;
    background: rgba(106, 73, 242, 0.13);
}

.about-cloudtest-page::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
}

.about-cloudtest-page a {
    color: inherit;
    text-decoration: none;
}

.about-cloudtest-page h1,
.about-cloudtest-page h2,
.about-cloudtest-page h3,
.about-cloudtest-page p {
    margin: 0;
    font-family: inherit;
}

.about-cloudtest-page .container {
    width: min(var(--ac-container), calc(100% - var(--ac-page-gap)));
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.about-cloudtest-page .section {
    position: relative;
    padding: var(--ac-section-y) 0;
}

.about-cloudtest-page .section.soft {
    background:
        radial-gradient(circle at 0 0, rgba(106, 73, 242, 0.055), transparent 26%),
        linear-gradient(180deg, rgba(246, 244, 254, 0.66), rgba(255, 255, 255, 0));
}

.about-cloudtest-page .eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    min-height: auto;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--ac-brand);
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
}

.about-cloudtest-page .eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ac-brand), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
}

.about-cloudtest-page .hero-copy h1,
.about-cloudtest-page .section-head h2,
.about-cloudtest-page .story-panel h2,
.about-cloudtest-page .cta-copy h2,
.about-cloudtest-page .manifesto-head strong,
.about-cloudtest-page .metric strong,
.about-cloudtest-page .story-panel strong,
.about-cloudtest-page .pillar-card h3,
.about-cloudtest-page .grid-card h3,
.about-cloudtest-page .timeline-card h3,
.about-cloudtest-page .compare-card h3,
.about-cloudtest-page .manifesto-card strong {
    color: var(--ac-title);
    font-weight: 700;
    letter-spacing: -0.035em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.about-cloudtest-page .hero-copy h1 {
    margin: 18px 0 16px;
    max-width: 780px;
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.06;
}

.about-cloudtest-page .hero-copy h1 span {
    display: inline;
    color: var(--ac-brand);
}

.about-cloudtest-page .section-head h2,
.about-cloudtest-page .story-panel h2,
.about-cloudtest-page .cta-copy h2 {
    margin: 14px 0 12px;
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
}

.about-cloudtest-page .section-head p,
.about-cloudtest-page .hero-copy p,
.about-cloudtest-page .manifesto-head p,
.about-cloudtest-page .metric p,
.about-cloudtest-page .story-panel p,
.about-cloudtest-page .pillar-card p,
.about-cloudtest-page .grid-card p,
.about-cloudtest-page .timeline-card p,
.about-cloudtest-page .compare-card p,
.about-cloudtest-page .cta-copy p,
.about-cloudtest-page .manifesto-card p,
.about-cloudtest-page .list-check div,
.about-cloudtest-page .bullet-list div {
    margin: 0;
    color: var(--ac-text);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.about-cloudtest-page .hero-copy p {
    max-width: 660px;
    font-size: 16px;
    line-height: 1.76;
    margin-bottom: 24px;
}

.about-cloudtest-page .section-head {
    display: grid;
    gap: 0;
    max-width: 820px;
    margin-bottom: clamp(24px, 2.8vw, 36px);
}

.about-cloudtest-page .section-head p {
    max-width: 760px;
}

/* Buttons */
.about-cloudtest-page .hero-actions,
.about-cloudtest-page .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.about-cloudtest-page .hero-actions {
    margin-bottom: 24px;
}

.about-cloudtest-page .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    white-space: normal;
    transition: var(--ac-transition);
}

.about-cloudtest-page .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
}

.about-cloudtest-page .btn:hover {
    transform: translateY(-3px);
}

.about-cloudtest-page .btn:hover::before {
    transform: scaleX(1);
}

.about-cloudtest-page .btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--ac-brand), var(--ac-brand-2));
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.24);
}

.about-cloudtest-page .btn-primary::before {
    background: linear-gradient(135deg, var(--ac-title), var(--ac-brand));
}

.about-cloudtest-page .btn-primary:hover {
    color: #fff;
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.30);
}

.about-cloudtest-page .btn-secondary {
    color: var(--ac-brand);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
}

.about-cloudtest-page .btn-secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
}

.about-cloudtest-page .hero-tags,
.about-cloudtest-page .tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.about-cloudtest-page .hero-tags span,
.about-cloudtest-page .tag-row span,
.about-cloudtest-page .manifesto-label,
.about-cloudtest-page .signal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.10);
    color: var(--ac-brand);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
}

.about-cloudtest-page .manifesto-board,
.about-cloudtest-page .metric,
.about-cloudtest-page .story-panel,
.about-cloudtest-page .pillar-card,
.about-cloudtest-page .grid-card,
.about-cloudtest-page .timeline-card,
.about-cloudtest-page .compare-card,
.about-cloudtest-page .cta-shell,
.about-cloudtest-page .manifesto-card,
.about-cloudtest-page .story-points div,
.about-cloudtest-page .list-check div,
.about-cloudtest-page .bullet-list div {
    background: var(--ac-surface);
    border: 1px solid var(--ac-line);
    box-shadow: var(--ac-shadow-md);
    backdrop-filter: blur(14px);
    transition: var(--ac-transition);
}

.about-cloudtest-page .manifesto-board:hover,
.about-cloudtest-page .metric:hover,
.about-cloudtest-page .story-panel:hover,
.about-cloudtest-page .pillar-card:hover,
.about-cloudtest-page .grid-card:hover,
.about-cloudtest-page .timeline-card:hover,
.about-cloudtest-page .compare-card:hover,
.about-cloudtest-page .cta-shell:hover,
.about-cloudtest-page .manifesto-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ac-shadow-lg);
    border-color: var(--ac-line-strong);
}

/* Hero */
.about-cloudtest-page .hero {
    position: relative;
    padding: clamp(116px, 8vw, 138px) 0 clamp(42px, 5vw, 64px);
}

.about-cloudtest-page .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.about-cloudtest-page .hero-copy {
    min-width: 0;
}

.about-cloudtest-page .manifesto-board {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border-radius: var(--ac-radius-xl);
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .09), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,243,255,.92));
}

.about-cloudtest-page .manifesto-board::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -70px;
    bottom: -84px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    pointer-events: none;
}

.about-cloudtest-page .manifesto-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.about-cloudtest-page .manifesto-head strong {
    display: block;
    margin-bottom: 7px;
    font-size: 18px;
    line-height: 1.35;
}

.about-cloudtest-page .manifesto-head p {
    font-size: 14px;
    line-height: 1.62;
}

.about-cloudtest-page .signal {
    flex: 0 0 auto;
    white-space: normal;
}

.about-cloudtest-page .manifesto-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.about-cloudtest-page .manifesto-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 175px;
    padding: 18px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(106,73,242,.06), transparent 34%),
        rgba(255,255,255,.88);
    box-shadow: var(--ac-shadow-sm);
}

.about-cloudtest-page .manifesto-card strong {
    display: block;
    margin-bottom: 7px;
    font-size: 16.5px;
    line-height: 1.35;
}

.about-cloudtest-page .manifesto-card p {
    font-size: 13.5px;
    line-height: 1.62;
}

.about-cloudtest-page .manifesto-label {
    align-self: flex-start;
    margin-top: 13px;
}

.about-cloudtest-page .metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: clamp(24px, 3vw, 34px);
}

.about-cloudtest-page .metric {
    min-width: 0;
    padding: 20px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%),
        rgba(255, 255, 255, 0.90);
}

.about-cloudtest-page .metric strong {
    display: block;
    margin-bottom: 8px;
    color: var(--ac-title);
    font-size: 22px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.about-cloudtest-page .metric p {
    font-size: 13.2px;
    line-height: 1.58;
}

/* Story */
.about-cloudtest-page .story-layout {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 22px;
    align-items: stretch;
}

.about-cloudtest-page .story-panel {
    display: grid;
    align-content: start;
    padding: 30px;
    border-radius: var(--ac-radius-xl);
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,243,255,.92));
}

.about-cloudtest-page .story-panel > p {
    margin-top: 4px;
}

.about-cloudtest-page .story-points {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.about-cloudtest-page .story-points div {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.84);
    box-shadow: var(--ac-shadow-sm);
}

.about-cloudtest-page .story-points strong {
    display: block;
    margin-bottom: 5px;
    color: var(--ac-title);
    font-size: 15.5px;
    line-height: 1.35;
    font-weight: 800;
}

.about-cloudtest-page .story-points p {
    font-size: 13.5px;
    line-height: 1.62;
}

.about-cloudtest-page .pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.about-cloudtest-page .pillar-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: var(--ac-radius-lg);
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .07), transparent 34%),
        rgba(255,255,255,.90);
}

.about-cloudtest-page .pillar-card::before,
.about-cloudtest-page .timeline-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(106,73,242,.04), transparent 52%, rgba(106,73,242,.06));
    pointer-events: none;
}

.about-cloudtest-page .icon-card,
.about-cloudtest-page .step-number,
.about-cloudtest-page .compare-icon {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(106,73,242,.14), rgba(223,218,243,.96));
    color: var(--ac-brand);
    box-shadow: 0 12px 26px rgba(106, 73, 242, .10);
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.about-cloudtest-page .pillar-card h3,
.about-cloudtest-page .pillar-card p,
.about-cloudtest-page .pillar-card .tag-row {
    position: relative;
    z-index: 1;
}

.about-cloudtest-page .pillar-card h3,
.about-cloudtest-page .grid-card h3,
.about-cloudtest-page .timeline-card h3,
.about-cloudtest-page .compare-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.32;
}

.about-cloudtest-page .pillar-card p,
.about-cloudtest-page .grid-card p,
.about-cloudtest-page .timeline-card p,
.about-cloudtest-page .compare-card p {
    font-size: 14px;
    line-height: 1.65;
}

.about-cloudtest-page .tag-row {
    margin-top: 16px;
}

/* Principle cards */
.about-cloudtest-page .grid-two,
.about-cloudtest-page .compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.about-cloudtest-page .grid-card,
.about-cloudtest-page .compare-card {
    padding: 26px;
    border-radius: var(--ac-radius-lg);
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .07), transparent 34%),
        rgba(255,255,255,.90);
}

.about-cloudtest-page .list-check,
.about-cloudtest-page .bullet-list {
    display: grid;
    gap: 11px;
    margin-top: 18px;
}

.about-cloudtest-page .list-check div,
.about-cloudtest-page .bullet-list div {
    position: relative;
    min-height: 44px;
    padding: 12px 12px 12px 42px;
    border-radius: 16px;
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(106,73,242,.09);
    box-shadow: var(--ac-shadow-sm);
    font-size: 13.5px;
    line-height: 1.58;
}

.about-cloudtest-page .list-check div::before,
.about-cloudtest-page .bullet-list div::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--ac-brand);
    box-shadow: 0 0 0 6px rgba(106, 73, 242, .09);
}

/* Journey */
.about-cloudtest-page .timeline-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.about-cloudtest-page .timeline-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: var(--ac-radius-lg);
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .07), transparent 34%),
        rgba(255,255,255,.90);
}

.about-cloudtest-page .timeline-card h3,
.about-cloudtest-page .timeline-card p,
.about-cloudtest-page .step-number {
    position: relative;
    z-index: 1;
}

/* Compare */
.about-cloudtest-page .compare-card.bad {
    background:
        radial-gradient(circle at 100% 0, rgba(50, 35, 111, .04), transparent 34%),
        rgba(255,255,255,.92);
}

.about-cloudtest-page .compare-card.good {
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .10), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,244,254,.94));
    border-color: rgba(106,73,242,.18);
}

.about-cloudtest-page .compare-top {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 18px;
}

.about-cloudtest-page .compare-icon {
    margin: 0;
    width: 50px;
    height: 50px;
}

.about-cloudtest-page .bad .compare-icon {
    background: rgba(50,35,111,.08);
    color: var(--ac-title);
}

.about-cloudtest-page .good .compare-icon {
    background: linear-gradient(135deg, rgba(106,73,242,.14), rgba(223,218,243,.96));
    color: var(--ac-brand);
}

/* CTA */
.about-cloudtest-page .cta-shell {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 3vw, 34px);
    border-radius: var(--ac-radius-xl);
    background:
        radial-gradient(circle at right top, rgba(255,255,255,0.14), transparent 28%),
        linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    color: #fff;
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
}

.about-cloudtest-page .cta-shell::before,
.about-cloudtest-page .cta-shell::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    opacity: .24;
}

.about-cloudtest-page .cta-shell::before {
    width: 300px;
    height: 300px;
    right: -100px;
    top: -100px;
    background: radial-gradient(circle, rgba(255,255,255,.56), rgba(255,255,255,0));
}

.about-cloudtest-page .cta-shell::after {
    width: 240px;
    height: 240px;
    left: -90px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(255,255,255,.30), rgba(255,255,255,0));
}

.about-cloudtest-page .cta-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
}

.about-cloudtest-page .cta-copy h2,
.about-cloudtest-page .cta-copy p {
    color: #fff;
}

.about-cloudtest-page .cta-copy p {
    max-width: 760px;
    color: rgba(255,255,255,.82);
}

.about-cloudtest-page .cta-copy .eyebrow {
    color: #fff;
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.16);
    box-shadow: none;
}

.about-cloudtest-page .cta-copy .eyebrow::before {
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255,255,255,.12);
}

.about-cloudtest-page .cta-actions {
    justify-content: flex-end;
}

.about-cloudtest-page .cta-actions .btn-primary {
    background: #fff;
    color: var(--ac-title);
    box-shadow: 0 18px 38px rgba(0,0,0,.10);
}

.about-cloudtest-page .cta-actions .btn-secondary {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.22);
    box-shadow: none;
}

.about-cloudtest-page [data-empty="true"] {
    display: none !important;
}

.about-cloudtest-page .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
}

.about-cloudtest-page .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Tablet */
@media (max-width: 1180px) {
    :root {
        --ac-page-gap: 34px;
        --ac-section-y: 58px;
    }

    .about-cloudtest-page .hero-grid,
    .about-cloudtest-page .story-layout,
    .about-cloudtest-page .cta-grid {
        grid-template-columns: 1fr;
    }

    .about-cloudtest-page .hero-copy {
        max-width: 900px;
    }

    .about-cloudtest-page .manifesto-grid,
    .about-cloudtest-page .metrics-grid,
    .about-cloudtest-page .timeline-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-cloudtest-page .cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 991px) {
    :root {
        --ac-page-gap: 30px;
        --ac-section-y: 54px;
    }

    .about-cloudtest-page .grid-two,
    .about-cloudtest-page .compare-grid {
        grid-template-columns: 1fr;
    }

    .about-cloudtest-page .pillars-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 767px) {
    :root {
        --ac-page-gap: 24px;
        --ac-section-y: 46px;
    }

    .about-cloudtest-page {
        padding-bottom: 74px;
    }

    .about-cloudtest-page .container {
        width: min(var(--ac-container), calc(100% - var(--ac-page-gap)));
    }

    .about-cloudtest-page .section {
        padding: var(--ac-section-y) 0;
    }

    .about-cloudtest-page .hero {
        padding: 96px 0 34px;
    }

    .about-cloudtest-page .hero-copy,
    .about-cloudtest-page .section-head,
    .about-cloudtest-page .story-panel,
    .about-cloudtest-page .grid-card,
    .about-cloudtest-page .cta-copy {
        text-align: center;
        justify-items: center;
    }

    .about-cloudtest-page .hero-copy h1 {
        margin: 14px 0 12px;
        font-size: clamp(30px, 9.3vw, 42px);
        line-height: 1.1;
        max-width: none;
    }

    .about-cloudtest-page .section-head h2,
    .about-cloudtest-page .story-panel h2,
    .about-cloudtest-page .cta-copy h2 {
        font-size: clamp(24px, 7.4vw, 34px);
        line-height: 1.16;
        max-width: none;
    }

    .about-cloudtest-page .section-head p,
    .about-cloudtest-page .hero-copy p,
    .about-cloudtest-page .manifesto-head p,
    .about-cloudtest-page .metric p,
    .about-cloudtest-page .story-panel p,
    .about-cloudtest-page .pillar-card p,
    .about-cloudtest-page .grid-card p,
    .about-cloudtest-page .timeline-card p,
    .about-cloudtest-page .compare-card p,
    .about-cloudtest-page .cta-copy p,
    .about-cloudtest-page .manifesto-card p {
        font-size: 14px;
        line-height: 1.62;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .about-cloudtest-page .eyebrow {
        padding: 8px 12px;
        gap: 8px;
        font-size: 9.5px;
        letter-spacing: .075em;
        margin-left: auto;
        margin-right: auto;
    }

    .about-cloudtest-page .eyebrow::before {
        width: 7px;
        height: 7px;
    }

    .about-cloudtest-page .hero-actions,
    .about-cloudtest-page .cta-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .about-cloudtest-page .btn {
        width: 100%;
        min-width: 0;
        min-height: 50px;
        padding: 13px 16px;
        border-radius: 14px;
        font-size: 14px;
    }

    .about-cloudtest-page .hero-tags,
    .about-cloudtest-page .tag-row {
        justify-content: center;
        gap: 8px;
    }

    .about-cloudtest-page .hero-tags span,
    .about-cloudtest-page .tag-row span,
    .about-cloudtest-page .manifesto-label,
    .about-cloudtest-page .signal {
        min-height: 32px;
        padding: 7px 10px;
        font-size: 11.5px;
    }

    .about-cloudtest-page .manifesto-board,
    .about-cloudtest-page .story-panel,
    .about-cloudtest-page .grid-card,
    .about-cloudtest-page .compare-card,
    .about-cloudtest-page .cta-shell {
        padding: 16px;
        border-radius: 22px;
    }

    .about-cloudtest-page .manifesto-head {
        display: grid;
        justify-items: center;
        text-align: center;
        gap: 12px;
    }

    .about-cloudtest-page .manifesto-grid,
    .about-cloudtest-page .metrics-grid,
    .about-cloudtest-page .pillars-grid,
    .about-cloudtest-page .timeline-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .about-cloudtest-page .manifesto-card {
        min-height: auto;
        padding: 15px;
        border-radius: 18px;
        text-align: center;
        align-items: center;
    }

    .about-cloudtest-page .manifesto-label {
        align-self: center;
    }

    .about-cloudtest-page .metric {
        display: grid;
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 15px;
        border-radius: 18px;
        text-align: left;
    }

    .about-cloudtest-page .metric strong {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        margin: 0;
        padding: 8px 10px;
        border-radius: 14px;
        background: rgba(106, 73, 242, .09);
        color: var(--ac-title);
        font-size: 13.5px;
        line-height: 1.15;
        text-align: center;
        word-break: keep-all;
        overflow-wrap: normal;
        hyphens: none;
    }

    .about-cloudtest-page .metric p {
        font-size: 12.8px;
        line-height: 1.52;
        text-align: left;
    }

    .about-cloudtest-page .story-points {
        width: 100%;
    }

    .about-cloudtest-page .story-points div {
        padding: 14px;
        border-radius: 18px;
        text-align: center;
    }

    .about-cloudtest-page .pillar-card,
    .about-cloudtest-page .timeline-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px 12px;
        align-items: center;
        padding: 15px;
        border-radius: 18px;
        text-align: left;
    }

    .about-cloudtest-page .icon-card,
    .about-cloudtest-page .step-number {
        width: 40px;
        height: 40px;
        margin: 0;
        border-radius: 13px;
        font-size: 13px;
    }

    .about-cloudtest-page .pillar-card h3,
    .about-cloudtest-page .timeline-card h3 {
        margin: 0;
        font-size: 15.5px;
        line-height: 1.3;
        text-align: left;
    }

    .about-cloudtest-page .pillar-card p,
    .about-cloudtest-page .timeline-card p,
    .about-cloudtest-page .pillar-card .tag-row {
        grid-column: 1 / -1;
    }

    .about-cloudtest-page .pillar-card p,
    .about-cloudtest-page .timeline-card p {
        margin: 0;
        font-size: 13.5px;
        line-height: 1.58;
        text-align: left;
    }

    .about-cloudtest-page .pillar-card .tag-row {
        margin-top: 2px;
        justify-content: flex-start;
    }

    .about-cloudtest-page .list-check div,
    .about-cloudtest-page .bullet-list div {
        padding: 12px 12px 12px 40px;
        border-radius: 16px;
        font-size: 13.5px;
        line-height: 1.58;
        text-align: left;
    }

    .about-cloudtest-page .list-check div::before,
    .about-cloudtest-page .bullet-list div::before {
        left: 15px;
    }

    .about-cloudtest-page .compare-top {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 11px;
        align-items: center;
        text-align: left;
    }

    .about-cloudtest-page .compare-icon {
        width: 40px;
        height: 40px;
        border-radius: 13px;
        font-size: 17px;
    }

    .about-cloudtest-page .compare-card h3 {
        margin: 0 0 5px;
        font-size: 15.5px;
        line-height: 1.3;
        text-align: left;
    }

    .about-cloudtest-page .compare-card p {
        text-align: left;
        font-size: 13.5px;
        line-height: 1.58;
    }

    .about-cloudtest-page .cta-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .about-cloudtest-page .cta-actions {
        justify-content: stretch;
    }
}

@media (max-width: 430px) {
    :root {
        --ac-page-gap: 22px;
        --ac-section-y: 42px;
    }

    .about-cloudtest-page .hero {
        padding-top: 88px;
        padding-bottom: 30px;
    }

    .about-cloudtest-page .hero-copy h1 {
        font-size: clamp(27px, 8.8vw, 36px);
    }

    .about-cloudtest-page .section-head h2,
    .about-cloudtest-page .story-panel h2,
    .about-cloudtest-page .cta-copy h2 {
        font-size: clamp(22px, 7vw, 30px);
    }

    .about-cloudtest-page .manifesto-board,
    .about-cloudtest-page .story-panel,
    .about-cloudtest-page .grid-card,
    .about-cloudtest-page .compare-card,
    .about-cloudtest-page .cta-shell,
    .about-cloudtest-page .metric,
    .about-cloudtest-page .pillar-card,
    .about-cloudtest-page .timeline-card {
        padding: 14px;
        border-radius: 18px;
    }

    .about-cloudtest-page .metric {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .about-cloudtest-page .metric strong {
        min-height: 38px;
        font-size: 12.5px;
    }

    .about-cloudtest-page .pillar-card,
    .about-cloudtest-page .timeline-card {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 11px;
    }

    .about-cloudtest-page .pillar-card h3,
    .about-cloudtest-page .timeline-card h3,
    .about-cloudtest-page .compare-card h3 {
        font-size: 15px;
    }
}

@media (max-width: 360px) {
    :root {
        --ac-page-gap: 18px;
    }

    .about-cloudtest-page .hero {
        padding-top: 82px;
    }

    .about-cloudtest-page .hero-copy h1 {
        font-size: 25px;
    }

    .about-cloudtest-page .eyebrow {
        font-size: 8.5px;
        letter-spacing: .055em;
        padding: 7px 10px;
    }

    .about-cloudtest-page .metric {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-cloudtest-page .metric strong {
        width: fit-content;
        margin: 0 auto;
    }

    .about-cloudtest-page .metric p {
        text-align: center;
    }
}

@media (hover: none) {
    .about-cloudtest-page .btn:hover,
    .about-cloudtest-page .manifesto-board:hover,
    .about-cloudtest-page .metric:hover,
    .about-cloudtest-page .story-panel:hover,
    .about-cloudtest-page .pillar-card:hover,
    .about-cloudtest-page .grid-card:hover,
    .about-cloudtest-page .timeline-card:hover,
    .about-cloudtest-page .compare-card:hover,
    .about-cloudtest-page .cta-shell:hover,
    .about-cloudtest-page .manifesto-card:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .about-cloudtest-page *,
    .about-cloudtest-page *::before,
    .about-cloudtest-page *::after,
    .about-cloudtest-page .reveal {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .about-cloudtest-page .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/*===================================================================================
    34. About CloudTest CSS End
===================================================================================*/


/*===================================================================================
    35. Careers at CloudTest CSS Start
===================================================================================*/

/*-----------------------------------------------------------------------------------
    35.1 Careers Root Variables Start
-----------------------------------------------------------------------------------*/

:root {
    --cc-bg: #f7f3ff;
    --cc-bg-soft: #fcfbff;
    --cc-surface: rgba(255, 255, 255, 0.94);
    --cc-surface-soft: rgba(255, 255, 255, 0.88);
    --cc-title: #32236F;
    --cc-text: rgba(62, 63, 102, 0.78);
    --cc-muted: rgba(62, 63, 102, 0.62);
    --cc-brand: #6A49F2;
    --cc-brand-2: #8A70FF;
    --cc-brand-soft: rgba(106, 73, 242, 0.08);
    --cc-line: rgba(106, 73, 242, 0.12);
    --cc-line-strong: rgba(106, 73, 242, 0.20);
    --cc-shadow-sm: 0 10px 28px rgba(50, 35, 111, 0.06);
    --cc-shadow-md: 0 16px 42px rgba(50, 35, 111, 0.085);
    --cc-shadow-lg: 0 28px 72px rgba(50, 35, 111, 0.15);
    --cc-shadow-deep: 0 34px 86px rgba(50, 35, 111, 0.18);
    --cc-radius-xl: 34px;
    --cc-radius-lg: 26px;
    --cc-radius-md: 20px;
    --cc-radius-sm: 16px;
    --cc-wrap: 1220px;
    --cc-page-gap: 44px;
    --cc-section-y: clamp(46px, 4.8vw, 68px);
    --cc-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

/*-----------------------------------------------------------------------------------
    35.1 Careers Root Variables End
-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
    35.2 Careers Base Wrapper Start
-----------------------------------------------------------------------------------*/

.careers-cloudtest-page,
.careers-cloudtest-page *,
.careers-cloudtest-page *::before,
.careers-cloudtest-page *::after {
    box-sizing: border-box;
}

.careers-cloudtest-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    padding: 0 0 clamp(58px, 6vw, 96px);
    color: var(--cc-text);
    background:
        radial-gradient(circle at 0% 10%, rgba(106, 73, 242, 0.10), transparent 24%),
        radial-gradient(circle at 100% 8%, rgba(223, 218, 243, 0.92), transparent 23%),
        linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.careers-cloudtest-page::before,
.careers-cloudtest-page::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    opacity: .72;
}

.careers-cloudtest-page::before {
    width: 300px;
    height: 300px;
    top: 92px;
    left: -120px;
    background: rgba(106, 73, 242, 0.13);
}

.careers-cloudtest-page::after {
    width: 350px;
    height: 350px;
    right: -140px;
    top: 360px;
    background: rgba(223, 218, 243, 0.92);
}

.careers-cloudtest-page a {
    color: inherit;
    text-decoration: none;
}

.careers-cloudtest-page img,
.careers-cloudtest-page svg {
    display: block;
    max-width: 100%;
}

.careers-cloudtest-page h1,
.careers-cloudtest-page h2,
.careers-cloudtest-page h3,
.careers-cloudtest-page p {
    margin: 0;
    font-family: inherit;
}

.careers-cloudtest-page .cc-shell {
    width: min(var(--cc-wrap), calc(100% - var(--cc-page-gap)));
    margin: 0 auto;
    position: relative;
    z-index: 1;
    min-width: 0;
}

.careers-cloudtest-page .cc-section {
    position: relative;
    padding: var(--cc-section-y) 0;
}

.careers-cloudtest-page .cc-hidden {
    display: none !important;
}

/*-----------------------------------------------------------------------------------
    35.2 Careers Base Wrapper End
-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
    35.3 Careers Typography And Buttons Start
-----------------------------------------------------------------------------------*/

.careers-cloudtest-page .cc-eyebrow,
.careers-cloudtest-page .cc-kicker,
.careers-cloudtest-page .cc-inline-pill,
.careers-cloudtest-page .cc-chip,
.careers-cloudtest-page .cc-score-pill,
.careers-cloudtest-page .cc-signal-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
}

.careers-cloudtest-page .cc-eyebrow {
    gap: 9px;
    width: fit-content;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--cc-brand);
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 700;
}

.careers-cloudtest-page .cc-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cc-brand), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
    flex: 0 0 auto;
}

.careers-cloudtest-page .cc-head {
    display: grid;
    gap: 14px;
    max-width: 820px;
    margin-bottom: clamp(24px, 2.8vw, 36px);
}

.careers-cloudtest-page .cc-head h2,
.careers-cloudtest-page .cc-hero-copy h1,
.careers-cloudtest-page .cc-final-copy h2 {
    margin: 0;
    color: var(--cc-title);
    font-weight: 700;
    letter-spacing: -0.045em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.careers-cloudtest-page .cc-hero-copy h1 {
    margin-top: 18px;
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.06;
    max-width: 820px;
}

.careers-cloudtest-page .cc-head h2,
.careers-cloudtest-page .cc-final-copy h2 {
    font-size: clamp(30px, 3.65vw, 46px);
    line-height: 1.12;
}

.careers-cloudtest-page .cc-copy,
.careers-cloudtest-page .cc-head p,
.careers-cloudtest-page .cc-card p,
.careers-cloudtest-page .cc-role-card p,
.careers-cloudtest-page .cc-stage-card p,
.careers-cloudtest-page .cc-outcome-card p,
.careers-cloudtest-page .cc-muted,
.careers-cloudtest-page .cc-note,
.careers-cloudtest-page p,
.careers-cloudtest-page li,
.careers-cloudtest-page span,
.careers-cloudtest-page small {
    color: var(--cc-text);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.careers-cloudtest-page .cc-head p {
    max-width: 760px;
}

.careers-cloudtest-page .cc-hero-copy p {
    margin-top: 18px;
    max-width: 680px;
    font-size: 16px;
    line-height: 1.76;
}

.careers-cloudtest-page .cc-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.careers-cloudtest-page .cc-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    transition: var(--cc-transition);
    cursor: pointer;
}

.careers-cloudtest-page .cc-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
}

.careers-cloudtest-page .cc-btn:hover {
    transform: translateY(-3px);
}

.careers-cloudtest-page .cc-btn:hover::before {
    transform: scaleX(1);
}

.careers-cloudtest-page .cc-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--cc-brand), var(--cc-brand-2));
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.24);
}

.careers-cloudtest-page .cc-btn-primary::before {
    background: linear-gradient(135deg, var(--cc-title), var(--cc-brand));
}

.careers-cloudtest-page .cc-btn-primary:hover {
    color: #fff;
    box-shadow: 0 24px 46px rgba(106, 73, 242, 0.30);
}

.careers-cloudtest-page .cc-btn-secondary {
    color: var(--cc-brand);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(106, 73, 242, 0.16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, 0.07);
    backdrop-filter: blur(10px);
}

.careers-cloudtest-page .cc-btn-secondary::before {
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.06), rgba(106, 73, 242, 0.14));
}

.careers-cloudtest-page .cc-chip-row,
.careers-cloudtest-page .cc-inline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.careers-cloudtest-page .cc-chip-row {
    margin-top: 22px;
}

.careers-cloudtest-page .cc-chip,
.careers-cloudtest-page .cc-inline-pill,
.careers-cloudtest-page .cc-kicker {
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.10);
    color: var(--cc-brand);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.careers-cloudtest-page .cc-chip {
    color: var(--cc-title);
    background: rgba(255,255,255,.90);
    box-shadow: var(--cc-shadow-sm);
}

.careers-cloudtest-page .cc-kicker {
    width: fit-content;
}

/*-----------------------------------------------------------------------------------
    35.3 Careers Typography And Buttons End
-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
    35.4 Careers Common Cards Start
-----------------------------------------------------------------------------------*/

.careers-cloudtest-page .cc-glass,
.careers-cloudtest-page .cc-card,
.careers-cloudtest-page .cc-mosaic-card,
.careers-cloudtest-page .cc-role-card,
.careers-cloudtest-page .cc-stage-card,
.careers-cloudtest-page .cc-outcome-card,
.careers-cloudtest-page .cc-stat-box,
.careers-cloudtest-page .cc-preview-box,
.careers-cloudtest-page .cc-signal-card,
.careers-cloudtest-page .cc-dark-panel,
.careers-cloudtest-page .cc-final-card {
    min-width: 0;
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    box-shadow: var(--cc-shadow-md);
    backdrop-filter: blur(14px);
    transition: var(--cc-transition);
}

.careers-cloudtest-page .cc-card:hover,
.careers-cloudtest-page .cc-role-card:hover,
.careers-cloudtest-page .cc-stage-card:hover,
.careers-cloudtest-page .cc-outcome-card:hover,
.careers-cloudtest-page .cc-mosaic-card:hover,
.careers-cloudtest-page .cc-stat-box:hover,
.careers-cloudtest-page .cc-signal-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cc-shadow-lg);
    border-color: var(--cc-line-strong);
}

.careers-cloudtest-page .cc-grid-3,
.careers-cloudtest-page .cc-outcome-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.careers-cloudtest-page .cc-card,
.careers-cloudtest-page .cc-stage-card,
.careers-cloudtest-page .cc-outcome-card {
    padding: 22px;
    border-radius: var(--cc-radius-lg);
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .07), transparent 34%),
        rgba(255,255,255,.90);
}

.careers-cloudtest-page .cc-mosaic-card h3,
.careers-cloudtest-page .cc-card h3,
.careers-cloudtest-page .cc-role-card h3,
.careers-cloudtest-page .cc-stage-card h3,
.careers-cloudtest-page .cc-outcome-card h3,
.careers-cloudtest-page .cc-dark-panel h3,
.careers-cloudtest-page .cc-signal-card h3 {
    margin: 12px 0 10px;
    color: var(--cc-title);
    font-size: 18px;
    line-height: 1.34;
    font-weight: 800;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.careers-cloudtest-page .cc-mosaic-card p,
.careers-cloudtest-page .cc-card p,
.careers-cloudtest-page .cc-role-card p,
.careers-cloudtest-page .cc-stage-card p,
.careers-cloudtest-page .cc-outcome-card p,
.careers-cloudtest-page .cc-signal-card p {
    font-size: 14px;
    line-height: 1.65;
}

/*-----------------------------------------------------------------------------------
    35.4 Careers Common Cards End
-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
    35.5 Careers Hero And Mosaic Start
-----------------------------------------------------------------------------------*/

.careers-cloudtest-page .cc-hero {
    padding: clamp(116px, 8vw, 138px) 0 clamp(42px, 5vw, 64px);
}

.careers-cloudtest-page .cc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    min-width: 0;
}

.careers-cloudtest-page .cc-hero-copy {
    padding: 0;
    min-width: 0;
    max-width: 760px;
}

.careers-cloudtest-page .cc-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 26px;
}

.careers-cloudtest-page .cc-stat-box {
    padding: 18px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .08), transparent 34%),
        rgba(255,255,255,.90);
}

.careers-cloudtest-page .cc-stat-box strong {
    display: block;
    margin-bottom: 7px;
    color: var(--cc-title);
    font-size: 18px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.careers-cloudtest-page .cc-stat-box span {
    display: block;
    font-size: 12.8px;
    line-height: 1.55;
}

.careers-cloudtest-page .cc-mosaic,
.careers-cloudtest-page .cc-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
    min-width: 0;
}

.careers-cloudtest-page .cc-mosaic-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: var(--cc-radius-lg);
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .07), transparent 34%),
        rgba(255,255,255,.90);
}

.careers-cloudtest-page .cc-mosaic-card::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -54px;
    bottom: -62px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(106, 73, 242, 0.12), transparent 72%);
    pointer-events: none;
}

.careers-cloudtest-page .cc-mosaic-card[data-size="featured"] {
    grid-column: span 7;
    background:
        radial-gradient(circle at 100% 0, rgba(255,255,255,.14), transparent 28%),
        linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    color: #fff;
    box-shadow: var(--cc-shadow-deep);
    border-color: rgba(255,255,255,.12);
}

.careers-cloudtest-page .cc-mosaic-card[data-size="stack"] {
    grid-column: span 5;
}

.careers-cloudtest-page .cc-mosaic-card[data-size="wide"] {
    grid-column: span 12;
}

.careers-cloudtest-page .cc-mosaic-card[data-size="featured"] h3 {
    color: #fff;
}

.careers-cloudtest-page .cc-mosaic-card[data-size="featured"] p,
.careers-cloudtest-page .cc-mosaic-card[data-size="featured"] .cc-note,
.careers-cloudtest-page .cc-mosaic-card[data-size="featured"] .cc-signal-line span {
    color: rgba(255,255,255,.76);
}

.careers-cloudtest-page .cc-mosaic-card[data-size="featured"] .cc-kicker,
.careers-cloudtest-page .cc-mosaic-card[data-size="featured"] .cc-inline-pill {
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.14);
}

/*-----------------------------------------------------------------------------------
    35.5 Careers Hero And Mosaic End
-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
    35.6 Careers Signal Lists And Roles Start
-----------------------------------------------------------------------------------*/

.careers-cloudtest-page .cc-signal-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.careers-cloudtest-page .cc-signal-line {
    display: grid;
    gap: 8px;
}

.careers-cloudtest-page .cc-signal-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    line-height: 1.45;
}

.careers-cloudtest-page .cc-signal-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.10);
    overflow: hidden;
}

.careers-cloudtest-page .cc-mosaic-card[data-size="featured"] .cc-signal-track {
    background: rgba(255,255,255,.14);
}

.careers-cloudtest-page .cc-signal-fill {
    max-width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cc-brand), #aa9cff);
}

.careers-cloudtest-page .cc-mosaic-card[data-size="featured"] .cc-signal-fill {
    background: linear-gradient(90deg, #ffffff, #b9acff);
}

.careers-cloudtest-page .cc-preview-grid {
    display: grid;
    gap: 14px;
}

.careers-cloudtest-page .cc-preview-box {
    padding: 15px;
    border-radius: 18px;
    background: rgba(255,255,255,.82);
    box-shadow: var(--cc-shadow-sm);
}

.careers-cloudtest-page .cc-preview-box strong {
    display: block;
    color: var(--cc-title);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 800;
}

.careers-cloudtest-page .cc-preview-box span {
    display: block;
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.58;
}

.careers-cloudtest-page .cc-list {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.careers-cloudtest-page .cc-list li {
    position: relative;
    padding-left: 22px;
    color: var(--cc-text);
    font-size: 14px;
    line-height: 1.65;
}

.careers-cloudtest-page .cc-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .78em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cc-brand);
    box-shadow: 0 0 0 5px rgba(106,73,242,.09);
}

.careers-cloudtest-page .cc-role-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    padding: 24px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .09), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(249,246,255,.95) 100%);
}

.careers-cloudtest-page .cc-role-card::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -70px;
    top: -90px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(106, 73, 242, .11), transparent 74%);
    pointer-events: none;
}

.careers-cloudtest-page .cc-role-card[data-size="wide"] {
    grid-column: span 7;
}

.careers-cloudtest-page .cc-role-card[data-size="compact"] {
    grid-column: span 5;
}

.careers-cloudtest-page .cc-role-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    min-width: 0;
    margin-bottom: 4px;
}

.careers-cloudtest-page .cc-role-top h3 {
    margin-top: 10px;
    font-size: 17px;
    line-height: 1.28;
}

.careers-cloudtest-page .cc-score-pill {
    flex: 0 0 auto;
    min-width: 100px;
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #47327e 0%, #584098 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(71, 50, 126, .18);
}

.careers-cloudtest-page .cc-role-card p {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.68;
}

.careers-cloudtest-page .cc-meta-grid,
.careers-cloudtest-page .cc-outcome-meta {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.careers-cloudtest-page .cc-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(106, 73, 242, .10);
}

.careers-cloudtest-page .cc-line:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.careers-cloudtest-page .cc-line span {
    font-size: 13px;
    line-height: 1.45;
}

.careers-cloudtest-page .cc-line strong {
    color: var(--cc-title);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    text-align: right;
}

.careers-cloudtest-page .cc-role-card .cc-inline-meta {
    margin-top: 16px;
    gap: 10px;
}

.careers-cloudtest-page .cc-role-card .cc-inline-pill {
    background: rgba(106,73,242,.08);
    border-color: rgba(106,73,242,.10);
    color: var(--cc-brand);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

/*-----------------------------------------------------------------------------------
    35.6 Careers Signal Lists And Roles End
-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
    35.7 Careers Timeline And Dark Panel Start
-----------------------------------------------------------------------------------*/

.careers-cloudtest-page .cc-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.careers-cloudtest-page .cc-timeline::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 34px;
    height: 2px;
    background: linear-gradient(90deg, rgba(106,73,242,.26), rgba(50,35,111,.08));
    z-index: 0;
}

.careers-cloudtest-page .cc-stage-card {
    position: relative;
    z-index: 1;
}

.careers-cloudtest-page .cc-stage-number {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--cc-brand), var(--cc-brand-2));
    color: #fff;
    box-shadow: 0 14px 28px rgba(106,73,242,.20);
    font-size: 13px;
    font-weight: 800;
}

.careers-cloudtest-page .cc-stage-foot {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed rgba(106,73,242,.16);
    color: var(--cc-muted);
    font-size: 13px;
    line-height: 1.62;
}

.careers-cloudtest-page .cc-signals-layout {
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    gap: 22px;
    align-items: stretch;
}

.careers-cloudtest-page .cc-dark-panel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 26px;
    border-radius: var(--cc-radius-lg);
    background:
        radial-gradient(circle at 100% 0, rgba(255,255,255,.14), transparent 28%),
        linear-gradient(135deg, #1d1546 0%, #352177 52%, #5b37ea 100%);
    color: #fff;
    box-shadow: var(--cc-shadow-deep);
    border-color: rgba(255,255,255,.12);
    min-height: 100%;
}

.careers-cloudtest-page .cc-dark-panel h3 {
    color: #fff;
    margin: 0;
}

.careers-cloudtest-page .cc-dark-panel p,
.careers-cloudtest-page .cc-dark-panel .cc-mini-metric span {
    color: rgba(255,255,255,.76);
}

.careers-cloudtest-page .cc-mini-grid {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.careers-cloudtest-page .cc-mini-metric {
    padding: 15px;
    border-radius: 18px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.12);
}

.careers-cloudtest-page .cc-mini-metric strong {
    display: block;
    color: #fff;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
}

.careers-cloudtest-page .cc-mini-metric span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.58;
}

.careers-cloudtest-page .cc-signal-card {
    padding: 22px;
    border-radius: var(--cc-radius-lg);
    background:
        radial-gradient(circle at 100% 0, rgba(106, 73, 242, .07), transparent 34%),
        rgba(255,255,255,.90);
}

.careers-cloudtest-page .cc-signal-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.careers-cloudtest-page .cc-signal-value {
    min-width: 76px;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(106, 73, 242, 0.08);
    color: var(--cc-brand);
    font-size: 13px;
    font-weight: 800;
}

/*-----------------------------------------------------------------------------------
    35.7 Careers Timeline And Dark Panel End
-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
    35.8 Careers Illustration And Final CTA Start
-----------------------------------------------------------------------------------*/

.careers-cloudtest-page .cc-dark-illustration {
    position: relative;
    min-height: 360px;
    margin-top: 22px;
    padding: 24px;
    border-radius: 28px;
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,.18), transparent 24%),
        radial-gradient(circle at 86% 12%, rgba(255,255,255,.14), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 44px rgba(0,0,0,.12);
}

.careers-cloudtest-page .cc-dark-illustration::before {
    content: "";
    position: absolute;
    inset: 28px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.10);
    background:
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: .34;
    pointer-events: none;
}

.careers-cloudtest-page .cc-dark-illustration__glow {
    position: absolute;
    width: 210px;
    height: 210px;
    right: -80px;
    top: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0));
    pointer-events: none;
}

.careers-cloudtest-page .cc-dark-illustration__card {
    position: absolute;
    z-index: 1;
    display: grid;
    gap: 7px;
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 16px 30px rgba(0,0,0,.10);
    backdrop-filter: blur(12px);
}

.careers-cloudtest-page .cc-dark-illustration__card strong {
    color: #fff;
    font-size: 14px;
    line-height: 1.32;
    font-weight: 800;
}

.careers-cloudtest-page .cc-dark-illustration__card small {
    color: rgba(255,255,255,.72);
    font-size: 11.5px;
    line-height: 1.4;
}

.careers-cloudtest-page .cc-dark-illustration__tag {
    display: inline-flex;
    width: fit-content;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.careers-cloudtest-page .cc-dark-illustration__card--one {
    left: 22px;
    top: 22px;
    width: min(250px, calc(50% - 30px));
}

.careers-cloudtest-page .cc-dark-illustration__card--two {
    right: 22px;
    top: 72px;
    width: min(245px, calc(50% - 30px));
}

.careers-cloudtest-page .cc-dark-illustration__chart {
    position: absolute;
    z-index: 1;
    left: 22px;
    right: 22px;
    bottom: 22px;
    padding: 22px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.065));
    border: 1px solid rgba(255,255,255,.14);
}

.careers-cloudtest-page .cc-dark-illustration__bars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
    height: 96px;
    margin-bottom: 16px;
}

.careers-cloudtest-page .cc-dark-illustration__bar {
    border-radius: 16px 16px 10px 10px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(203,191,255,.56));
    box-shadow: 0 12px 24px rgba(0,0,0,.10);
}

.careers-cloudtest-page .cc-dark-illustration__bar:nth-child(1) { height: 42px; }
.careers-cloudtest-page .cc-dark-illustration__bar:nth-child(2) { height: 66px; }
.careers-cloudtest-page .cc-dark-illustration__bar:nth-child(3) { height: 88px; }
.careers-cloudtest-page .cc-dark-illustration__bar:nth-child(4) { height: 56px; }

.careers-cloudtest-page .cc-dark-illustration__caption {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.careers-cloudtest-page .cc-dark-illustration__caption strong {
    color: #fff;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
}

.careers-cloudtest-page .cc-dark-illustration__caption span {
    max-width: 300px;
    color: rgba(255,255,255,.74);
    font-size: 12px;
    line-height: 1.5;
    text-align: right;
}

.careers-cloudtest-page .cc-final-wrap {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 3vw, 34px);
    border-radius: var(--cc-radius-xl);
    background:
        radial-gradient(circle at right top, rgba(255,255,255,0.14), transparent 28%),
        linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    color: #fff;
    box-shadow: 0 30px 70px rgba(50, 35, 111, 0.22);
}

.careers-cloudtest-page .cc-final-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .42fr);
    gap: 28px;
    align-items: center;
}

.careers-cloudtest-page .cc-final-copy h2,
.careers-cloudtest-page .cc-final-copy p {
    color: #fff;
}

.careers-cloudtest-page .cc-final-copy p {
    max-width: 720px;
    color: rgba(255,255,255,.82);
}

.careers-cloudtest-page .cc-final-copy .cc-eyebrow {
    color: #fff;
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.16);
    box-shadow: none;
}

.careers-cloudtest-page .cc-final-copy .cc-eyebrow::before {
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255,255,255,.12);
}

.careers-cloudtest-page .cc-final-card {
    justify-self: stretch;
    width: 100%;
    padding: 22px;
    border-radius: 24px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: none;
    color: #fff;
}

.careers-cloudtest-page .cc-final-note {
    margin-top: 10px;
    color: rgba(255,255,255,.76);
    font-size: 13.5px;
    line-height: 1.7;
}

.careers-cloudtest-page .cc-final-card .cc-action-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
    margin-top: 18px;
}

.careers-cloudtest-page .cc-final-card .cc-btn {
    width: 100%;
}

.careers-cloudtest-page .cc-final-card .cc-btn-primary {
    background: #fff;
    color: var(--cc-title);
    box-shadow: 0 18px 38px rgba(0,0,0,.10);
}

.careers-cloudtest-page .cc-final-card .cc-btn-secondary {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.22);
    box-shadow: none;
}

/*-----------------------------------------------------------------------------------
    35.8 Careers Illustration And Final CTA End
-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
    35.9 Careers Responsive CSS Start
-----------------------------------------------------------------------------------*/

@media (max-width: 1120px) {
    :root {
        --cc-page-gap: 34px;
        --cc-section-y: 58px;
    }

    .careers-cloudtest-page .cc-hero-grid,
    .careers-cloudtest-page .cc-signals-layout,
    .careers-cloudtest-page .cc-final-grid {
        grid-template-columns: 1fr;
    }

    .careers-cloudtest-page .cc-grid-3,
    .careers-cloudtest-page .cc-outcome-grid,
    .careers-cloudtest-page .cc-timeline,
    .careers-cloudtest-page .cc-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .careers-cloudtest-page .cc-timeline::before {
        display: none;
    }

    .careers-cloudtest-page .cc-role-card[data-size="wide"],
    .careers-cloudtest-page .cc-role-card[data-size="compact"],
    .careers-cloudtest-page .cc-mosaic-card[data-size="featured"],
    .careers-cloudtest-page .cc-mosaic-card[data-size="stack"] {
        grid-column: span 6;
    }
}

@media (max-width: 860px) {
    :root {
        --cc-page-gap: 30px;
        --cc-section-y: 54px;
    }

    .careers-cloudtest-page .cc-grid-3,
    .careers-cloudtest-page .cc-outcome-grid,
    .careers-cloudtest-page .cc-timeline,
    .careers-cloudtest-page .cc-stat-row {
        grid-template-columns: 1fr;
    }

    .careers-cloudtest-page .cc-mosaic-card[data-size="featured"],
    .careers-cloudtest-page .cc-mosaic-card[data-size="stack"],
    .careers-cloudtest-page .cc-mosaic-card[data-size="wide"],
    .careers-cloudtest-page .cc-role-card[data-size="wide"],
    .careers-cloudtest-page .cc-role-card[data-size="compact"] {
        grid-column: span 12;
    }

    .careers-cloudtest-page .cc-dark-illustration {
        min-height: 220px;
    }
}

@media (max-width: 680px) {
    :root {
        --cc-page-gap: 24px;
        --cc-section-y: 46px;
    }

    .careers-cloudtest-page {
        padding-bottom: 74px;
    }

    .careers-cloudtest-page .cc-shell {
        width: min(var(--cc-wrap), calc(100% - var(--cc-page-gap)));
    }

    .careers-cloudtest-page .cc-section {
        padding: var(--cc-section-y) 0;
    }

    .careers-cloudtest-page .cc-hero {
        padding: 96px 0 34px;
    }

    .careers-cloudtest-page .cc-head {
        justify-items: center;
        text-align: center;
        margin-bottom: 22px;
    }

    .careers-cloudtest-page .cc-hero-copy,
    .careers-cloudtest-page .cc-hero-copy p {
        max-width: none;
        text-align: center;
    }

    .careers-cloudtest-page .cc-hero-copy h1 {
        font-size: clamp(30px, 9.3vw, 42px);
        line-height: 1.1;
    }

    .careers-cloudtest-page .cc-head h2,
    .careers-cloudtest-page .cc-final-copy h2 {
        font-size: clamp(24px, 7.4vw, 34px);
        line-height: 1.16;
    }

    .careers-cloudtest-page .cc-action-row {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 11px;
        justify-items: stretch;
    }

    .careers-cloudtest-page .cc-btn {
        width: 100%;
        min-height: 50px;
        padding: 13px 16px;
        border-radius: 14px;
        font-size: 14px;
    }

    .careers-cloudtest-page .cc-chip-row {
        justify-content: center;
        gap: 8px;
    }

    .careers-cloudtest-page .cc-chip,
    .careers-cloudtest-page .cc-inline-pill,
    .careers-cloudtest-page .cc-kicker,
    .careers-cloudtest-page .cc-eyebrow {
        padding: 8px 12px;
        gap: 8px;
        font-size: 9.5px;
        letter-spacing: .075em;
        line-height: 1.25;
    }

    .careers-cloudtest-page .cc-mosaic,
    .careers-cloudtest-page .cc-bento {
        gap: 14px;
    }

    .careers-cloudtest-page .cc-mosaic-card,
    .careers-cloudtest-page .cc-card,
    .careers-cloudtest-page .cc-role-card,
    .careers-cloudtest-page .cc-stage-card,
    .careers-cloudtest-page .cc-outcome-card,
    .careers-cloudtest-page .cc-dark-panel,
    .careers-cloudtest-page .cc-signal-card,
    .careers-cloudtest-page .cc-final-wrap,
    .careers-cloudtest-page .cc-final-card {
        padding: 16px;
        border-radius: 22px;
    }

    .careers-cloudtest-page .cc-mosaic-card,
    .careers-cloudtest-page .cc-role-card,
    .careers-cloudtest-page .cc-outcome-card {
        text-align: center;
    }

    .careers-cloudtest-page .cc-preview-box {
        padding: 14px;
        border-radius: 16px;
        text-align: center;
    }

    .careers-cloudtest-page .cc-list {
        gap: 9px;
    }

    .careers-cloudtest-page .cc-list li {
        padding: 11px 12px 11px 40px;
        border-radius: 16px;
        background: rgba(255,255,255,.72);
        border: 1px solid rgba(106,73,242,.09);
        font-size: 13.5px;
        line-height: 1.58;
        text-align: left;
    }

    .careers-cloudtest-page .cc-list li::before {
        left: 15px;
    }

    .careers-cloudtest-page .cc-role-top {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 10px;
        text-align: center;
    }

    .careers-cloudtest-page .cc-role-top h3,
    .careers-cloudtest-page .cc-card h3,
    .careers-cloudtest-page .cc-mosaic-card h3,
    .careers-cloudtest-page .cc-outcome-card h3,
    .careers-cloudtest-page .cc-dark-panel h3,
    .careers-cloudtest-page .cc-signal-card h3 {
        font-size: 16px;
        line-height: 1.32;
        text-align: center;
    }

    .careers-cloudtest-page .cc-line {
        grid-template-columns: 1fr;
        gap: 5px;
        text-align: center;
    }

    .careers-cloudtest-page .cc-line span,
    .careers-cloudtest-page .cc-line strong {
        text-align: center;
        font-size: 13px;
    }

    .careers-cloudtest-page .cc-stage-number {
        display: none;
    }

    .careers-cloudtest-page .cc-stage-card {
        display: block;
        text-align: left;
        padding: 18px 16px;
    }

    .careers-cloudtest-page .cc-stage-card .cc-kicker {
        display: inline-flex;
        margin: 0 0 10px !important;
        justify-self: start;
    }

    .careers-cloudtest-page .cc-stage-card h3 {
        margin: 0 0 10px;
        font-size: 17px;
        line-height: 1.3;
        text-align: left;
    }

    .careers-cloudtest-page .cc-stage-foot {
        margin-top: 12px;
        padding-top: 12px;
    }

    .careers-cloudtest-page .cc-signal-top {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .careers-cloudtest-page .cc-signal-card .cc-signal-track {
        margin-top: 12px;
    }

    .careers-cloudtest-page .cc-dark-panel {
        text-align: center;
    }

    .careers-cloudtest-page .cc-mini-metric {
        padding: 14px;
        border-radius: 16px;
        text-align: center;
    }

    .careers-cloudtest-page .cc-dark-illustration {
        min-height: 205px;
        padding: 14px;
        border-radius: 20px;
    }

    .careers-cloudtest-page .cc-dark-illustration__card--one {
        left: 14px;
        top: 14px;
        width: calc(100% - 28px);
        max-width: none;
    }

    .careers-cloudtest-page .cc-dark-illustration__card--two {
        right: 14px;
        top: 86px;
        width: calc(100% - 56px);
        max-width: none;
    }

    .careers-cloudtest-page .cc-dark-illustration__chart {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 14px;
    }

    .careers-cloudtest-page .cc-dark-illustration__bars {
        height: 60px;
        gap: 8px;
    }

    .careers-cloudtest-page .cc-dark-illustration__caption {
        display: grid;
        gap: 6px;
    }

    .careers-cloudtest-page .cc-dark-illustration__caption span {
        max-width: none;
        text-align: left;
    }

    .careers-cloudtest-page .cc-final-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 430px) {
    :root {
        --cc-page-gap: 22px;
        --cc-section-y: 42px;
    }

    .careers-cloudtest-page .cc-hero {
        padding-top: 88px;
        padding-bottom: 30px;
    }

    .careers-cloudtest-page .cc-hero-copy h1 {
        font-size: clamp(27px, 8.8vw, 36px);
    }

    .careers-cloudtest-page .cc-head h2,
    .careers-cloudtest-page .cc-final-copy h2 {
        font-size: clamp(22px, 7vw, 30px);
    }

    .careers-cloudtest-page .cc-stat-box {
        grid-template-columns: 78px minmax(0, 1fr);
        padding: 13px;
        border-radius: 16px;
    }

    .careers-cloudtest-page .cc-stat-box strong {
        min-height: 38px;
        font-size: 12.5px;
    }

    .careers-cloudtest-page .cc-mosaic-card,
    .careers-cloudtest-page .cc-card,
    .careers-cloudtest-page .cc-role-card,
    .careers-cloudtest-page .cc-stage-card,
    .careers-cloudtest-page .cc-outcome-card,
    .careers-cloudtest-page .cc-dark-panel,
    .careers-cloudtest-page .cc-signal-card,
    .careers-cloudtest-page .cc-final-wrap,
    .careers-cloudtest-page .cc-final-card {
        padding: 14px;
        border-radius: 18px;
    }

    .careers-cloudtest-page .cc-stage-card {
        padding: 16px 14px;
    }
}

@media (max-width: 360px) {
    :root {
        --cc-page-gap: 18px;
    }

    .careers-cloudtest-page .cc-hero-copy h1 {
        font-size: 25px;
    }

    .careers-cloudtest-page .cc-eyebrow,
    .careers-cloudtest-page .cc-chip,
    .careers-cloudtest-page .cc-inline-pill,
    .careers-cloudtest-page .cc-kicker {
        font-size: 8.5px;
        letter-spacing: .055em;
        padding: 7px 10px;
    }
}

/*-----------------------------------------------------------------------------------
    35.9 Careers Responsive CSS End
-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
    35.10 Careers Motion And Reveal Start
-----------------------------------------------------------------------------------*/

.careers-cloudtest-page .reveal,
.careers-cloudtest-page .cc-reveal,
.careers-cloudtest-page [data-reveal].visible,
.careers-cloudtest-page [data-reveal].is-visible,
.careers-cloudtest-page .reveal.visible,
.careers-cloudtest-page .reveal.is-visible,
.careers-cloudtest-page .cc-reveal.visible,
.careers-cloudtest-page .cc-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (hover: none) {
    .careers-cloudtest-page .cc-btn:hover,
    .careers-cloudtest-page .cc-card:hover,
    .careers-cloudtest-page .cc-role-card:hover,
    .careers-cloudtest-page .cc-stage-card:hover,
    .careers-cloudtest-page .cc-outcome-card:hover,
    .careers-cloudtest-page .cc-mosaic-card:hover,
    .careers-cloudtest-page .cc-stat-box:hover,
    .careers-cloudtest-page .cc-signal-card:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .careers-cloudtest-page *,
    .careers-cloudtest-page *::before,
    .careers-cloudtest-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .careers-cloudtest-page [data-reveal],
    .careers-cloudtest-page .reveal,
    .careers-cloudtest-page .cc-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .careers-cloudtest-page [data-reveal] {
        animation: ccFadeUp .78s ease forwards;
    }

    .careers-cloudtest-page [data-reveal="2"] {
        animation-delay: .08s;
    }

    .careers-cloudtest-page [data-reveal="3"] {
        animation-delay: .16s;
    }

    .careers-cloudtest-page [data-reveal="4"] {
        animation-delay: .24s;
    }

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

/*-----------------------------------------------------------------------------------
    35.10 Careers Motion And Reveal End
-----------------------------------------------------------------------------------*/

/*===================================================================================
    35. Careers at CloudTest CSS End
===================================================================================*/






/*===================================================================================
    36. Partner Program CSS Start
===================================================================================*/

:root {
    --ctpp-purple: #6A49F2;
    --ctpp-purple-2: #8A70FF;
    --ctpp-purple-dark: #32236F;
    --ctpp-ink: #24223A;
    --ctpp-text: rgba(62, 63, 102, 0.78);
    --ctpp-muted: rgba(62, 63, 102, 0.62);
    --ctpp-bg: #FCFBFF;
    --ctpp-soft: #F6F4FE;
    --ctpp-card: rgba(255, 255, 255, 0.92);
    --ctpp-border: rgba(106, 73, 242, 0.14);
    --ctpp-border-strong: rgba(106, 73, 242, 0.24);
    --ctpp-shadow-sm: 0 10px 28px rgba(50, 35, 111, 0.06);
    --ctpp-shadow: 0 18px 48px rgba(50, 35, 111, 0.09);
    --ctpp-shadow-lg: 0 28px 72px rgba(50, 35, 111, 0.14);
    --ctpp-shadow-deep: 0 34px 90px rgba(50, 35, 111, 0.18);
    --ctpp-radius-xl: 36px;
    --ctpp-radius-lg: 28px;
    --ctpp-radius-md: 22px;
    --ctpp-radius-sm: 16px;
    --ctpp-container: 1180px;
    --ctpp-page-gap: 44px;
    --ctpp-section-y: clamp(54px, 5.2vw, 82px);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 5% 6%, rgba(106, 73, 242, 0.12), transparent 27%),
        radial-gradient(circle at 95% 8%, rgba(223, 218, 243, 0.94), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fcfbff 45%, #f7f3ff 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ctpp-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.ctpp-page,
.ctpp-page *,
.ctpp-page *::before,
.ctpp-page *::after {
    box-sizing: border-box;
}

.ctpp-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 320px;
    padding: clamp(108px, 8vw, 136px) 0 clamp(62px, 6vw, 96px);
    background:
        radial-gradient(circle at 0% 9%, rgba(106, 73, 242, 0.11), transparent 28%),
        radial-gradient(circle at 100% 7%, rgba(223, 218, 243, 0.92), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(252,251,255,.96) 44%, rgba(247,243,255,.98) 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ctpp-text);
}

.ctpp-page::before,
.ctpp-page::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(95px);
    opacity: .74;
}

.ctpp-page::before {
    width: 330px;
    height: 330px;
    top: 110px;
    left: -140px;
    background: rgba(106, 73, 242, 0.14);
}

.ctpp-page::after {
    width: 390px;
    height: 390px;
    right: -160px;
    top: 390px;
    background: rgba(223, 218, 243, 0.95);
}

.ctpp-page a {
    color: inherit;
    text-decoration: none;
}

.ctpp-page h1,
.ctpp-page h2,
.ctpp-page h3,
.ctpp-page p {
    margin: 0;
    font-family: inherit;
}

.ctpp-container {
    width: min(var(--ctpp-container), calc(100% - var(--ctpp-page-gap)));
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ctpp-section {
    position: relative;
    padding: var(--ctpp-section-y) 0;
}

.ctpp-section.compact {
    padding-top: clamp(34px, 3.4vw, 52px);
}

.ctpp-section.soft {
    background:
        radial-gradient(circle at 7% 0%, rgba(106, 73, 242, 0.055), transparent 28%),
        linear-gradient(180deg, rgba(246,244,254,.68), rgba(255,255,255,0));
}

.ctpp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    gap: 9px;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.08);
    border: 1px solid rgba(106, 73, 242, 0.14);
    color: var(--ctpp-purple);
    box-shadow: 0 10px 24px rgba(106, 73, 242, 0.06);
    backdrop-filter: blur(12px);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 800;
    text-align: center;
}

.ctpp-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ctpp-purple), #16BDF5);
    box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.10);
}

.ctpp-hero-title,
.ctpp-head h2,
.ctpp-card h3,
.ctpp-type-card h3,
.ctpp-step-card h3,
.ctpp-toolkit h3,
.ctpp-console-card h3,
.ctpp-cta h2 {
    color: var(--ctpp-purple-dark);
    font-weight: 800;
    letter-spacing: -0.045em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.ctpp-hero-title {
    max-width: 860px;
    font-size: clamp(38px, 5.4vw, 68px);
    line-height: 1.04;
}

.ctpp-hero-title span,
.ctpp-head h2 span {
    color: var(--ctpp-purple);
}

.ctpp-head h2,
.ctpp-cta h2 {
    font-size: clamp(30px, 3.75vw, 48px);
    line-height: 1.12;
}

.ctpp-subtitle,
.ctpp-head p,
.ctpp-card p,
.ctpp-type-card p,
.ctpp-step-card p,
.ctpp-toolkit p,
.ctpp-console-card p,
.ctpp-bar p,
.ctpp-cta p,
.ctpp-point,
.ctpp-mini-card p,
.ctpp-list li {
    color: var(--ctpp-text);
    font-size: 15.5px;
    line-height: 1.72;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.ctpp-subtitle {
    max-width: 690px;
    font-size: 16px;
    line-height: 1.78;
}

.ctpp-head {
    display: grid;
    gap: 14px;
    max-width: 830px;
    margin-bottom: clamp(26px, 3vw, 38px);
}

.ctpp-head.center {
    margin-inline: auto;
    text-align: center;
    justify-items: center;
}

.ctpp-head p {
    max-width: 780px;
}

.ctpp-btn-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.ctpp-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 178px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 15px;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 800;
    text-align: center;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

.ctpp-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: inherit;
}

.ctpp-btn:hover {
    transform: translateY(-3px);
}

.ctpp-btn:hover::before {
    transform: scaleX(1);
}

.ctpp-btn.primary {
    color: #fff;
    background: linear-gradient(135deg, var(--ctpp-purple), var(--ctpp-purple-2));
    box-shadow: 0 18px 36px rgba(106, 73, 242, 0.24);
}

.ctpp-btn.primary::before {
    background: linear-gradient(135deg, var(--ctpp-purple-dark), var(--ctpp-purple));
}

.ctpp-btn.secondary {
    color: var(--ctpp-purple);
    background: rgba(255,255,255,.94);
    border-color: rgba(106, 73, 242, .16);
    box-shadow: 0 12px 26px rgba(50, 35, 111, .07);
    backdrop-filter: blur(10px);
}

.ctpp-btn.secondary::before {
    background: linear-gradient(135deg, rgba(106,73,242,.06), rgba(106,73,242,.14));
}

.ctpp-pill-row,
.ctpp-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ctpp-pill,
.ctpp-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(50,35,111,.08);
    color: var(--ctpp-purple-dark);
    box-shadow: var(--ctpp-shadow-sm);
    font-size: 12.5px;
    line-height: 1.25;
    font-weight: 700;
    text-align: center;
}

.ctpp-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 999px;
    background: var(--ctpp-purple);
    box-shadow: 0 0 0 5px rgba(106,73,242,.10);
}

/* Partner Program Hero Start */
.ctpp-hero {
    padding-top: 0;
    padding-bottom: clamp(36px, 5vw, 62px);
}

.ctpp-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 28px;
    padding: 18px 20px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 0 0, rgba(106,73,242,.07), transparent 34%),
        rgba(255,255,255,.82);
    border: 1px solid var(--ctpp-border);
    box-shadow: var(--ctpp-shadow-sm);
    backdrop-filter: blur(14px);
}

.ctpp-topbar p {
    color: var(--ctpp-text);
    font-size: 14px;
    line-height: 1.65;
}

.ctpp-topbar strong {
    color: var(--ctpp-purple-dark);
}

.ctpp-topbar .ctpp-pill-row {
    justify-content: flex-end;
}

.ctpp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr);
    gap: clamp(30px, 4vw, 58px);
    align-items: center;
}

.ctpp-hero-copy {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.ctpp-hero-visual {
    position: relative;
    min-width: 0;
}

.ctpp-partner-hub {
    position: relative;
    min-height: 620px;
    padding: clamp(22px, 2.6vw, 30px);
    border-radius: var(--ctpp-radius-xl);
    background:
        radial-gradient(circle at 90% 10%, rgba(255,255,255,.18), transparent 28%),
        radial-gradient(circle at 12% 100%, rgba(138,112,255,.28), transparent 42%),
        linear-gradient(135deg, #1d1546 0%, #352177 50%, #5b37ea 100%);
    box-shadow: var(--ctpp-shadow-deep);
    overflow: hidden;
    color: #fff;
}

.ctpp-partner-hub::before {
    content: "";
    position: absolute;
    inset: 24px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: .5;
    pointer-events: none;
}

.ctpp-hub-header,
.ctpp-hub-center,
.ctpp-hub-card,
.ctpp-hub-metrics {
    position: relative;
    z-index: 1;
}

.ctpp-hub-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.13);
}

.ctpp-hub-header h3 {
    color: #fff;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.ctpp-hub-header p {
    margin-top: 8px;
    max-width: 42ch;
    color: rgba(255,255,255,.74);
    font-size: 13px;
    line-height: 1.62;
}

.ctpp-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 9px 12px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.14);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ctpp-hub-map {
    position: relative;
    min-height: 360px;
    margin-top: 22px;
}

.ctpp-hub-center {
    position: absolute;
    inset: 50%;
    width: min(230px, 46%);
    min-height: 128px;
    transform: translate(-50%, -50%);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 22px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 25%, rgba(255,255,255,.24), transparent 62%),
        rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    text-align: center;
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 54px rgba(0,0,0,.14);
}

.ctpp-hub-center strong {
    color: #fff;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
}

.ctpp-hub-center span {
    color: rgba(255,255,255,.72);
    font-size: 12px;
    line-height: 1.45;
}

.ctpp-hub-card {
    position: absolute;
    display: grid;
    gap: 7px;
    width: min(210px, 38%);
    padding: 16px;
    border-radius: 22px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 42px rgba(0,0,0,.12);
}

.ctpp-hub-card small {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.12);
    font-size: 10px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ctpp-hub-card strong {
    color: #fff;
    font-size: 14.5px;
    line-height: 1.32;
    font-weight: 800;
}

.ctpp-hub-card p {
    color: rgba(255,255,255,.72);
    font-size: 12px;
    line-height: 1.52;
}

.ctpp-hub-card.one {
    left: 0;
    top: 12px;
}

.ctpp-hub-card.two {
    right: 0;
    top: 66px;
}

.ctpp-hub-card.three {
    left: 20px;
    bottom: 18px;
}

.ctpp-hub-card.four {
    right: 18px;
    bottom: 0;
}

.ctpp-hub-line {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.24), rgba(255,255,255,.04));
    transform-origin: left center;
    z-index: 0;
}

.ctpp-hub-line.l1 { transform: rotate(205deg); }
.ctpp-hub-line.l2 { transform: rotate(326deg); }
.ctpp-hub-line.l3 { transform: rotate(148deg); }
.ctpp-hub-line.l4 { transform: rotate(28deg); }

.ctpp-hub-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin-top: 16px;
}

.ctpp-hub-metric {
    padding: 15px;
    border-radius: 18px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.12);
}

.ctpp-hub-metric strong {
    display: block;
    margin-bottom: 7px;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.ctpp-hub-metric span {
    display: block;
    color: rgba(255,255,255,.72);
    font-size: 11.5px;
    line-height: 1.45;
}
/* Partner Program Hero End */

/* Partner Program Cards Start */
.ctpp-card,
.ctpp-type-card,
.ctpp-step-card,
.ctpp-toolkit,
.ctpp-console-card,
.ctpp-bar,
.ctpp-cta-card,
.ctpp-mini-card {
    background:
        radial-gradient(circle at 100% 0, rgba(106,73,242,.07), transparent 34%),
        var(--ctpp-card);
    border: 1px solid var(--ctpp-border);
    box-shadow: var(--ctpp-shadow);
    backdrop-filter: blur(14px);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.ctpp-card:hover,
.ctpp-type-card:hover,
.ctpp-step-card:hover,
.ctpp-toolkit:hover,
.ctpp-console-card:hover,
.ctpp-mini-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ctpp-shadow-lg);
    border-color: var(--ctpp-border-strong);
}

.ctpp-grid-3,
.ctpp-type-grid,
.ctpp-step-grid,
.ctpp-tool-grid {
    display: grid;
    gap: 18px;
    align-items: stretch;
}

.ctpp-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ctpp-type-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ctpp-step-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ctpp-tool-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
}

.ctpp-card,
.ctpp-type-card,
.ctpp-step-card,
.ctpp-mini-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: 24px;
    border-radius: var(--ctpp-radius-lg);
}

.ctpp-card::before,
.ctpp-type-card::before,
.ctpp-step-card::before,
.ctpp-mini-card::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    right: -70px;
    bottom: -78px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(106,73,242,.10), transparent 70%);
    pointer-events: none;
}

.ctpp-icon,
.ctpp-step-no {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(135deg, var(--ctpp-purple), var(--ctpp-purple-2));
    box-shadow: 0 14px 28px rgba(106,73,242,.20);
    font-size: 18px;
    font-weight: 800;
}

.ctpp-card h3,
.ctpp-type-card h3,
.ctpp-step-card h3,
.ctpp-mini-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.32;
}

.ctpp-card p,
.ctpp-type-card p,
.ctpp-step-card p,
.ctpp-mini-card p {
    position: relative;
    z-index: 1;
    font-size: 14px;
    line-height: 1.66;
}

.ctpp-tag-row {
    position: relative;
    z-index: 1;
    margin-top: 18px;
}

.ctpp-tag {
    min-height: 34px;
    padding: 7px 11px;
    color: var(--ctpp-purple);
    background: rgba(106,73,242,.08);
    border-color: rgba(106,73,242,.10);
    box-shadow: none;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
}

.ctpp-step-card {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 10px 13px;
    align-items: center;
}

.ctpp-step-no {
    grid-column: 1;
    grid-row: 1 / 3;
    margin: 0;
}

.ctpp-step-card .ctpp-tag {
    grid-column: 2;
    justify-self: start;
}

.ctpp-step-card h3,
.ctpp-step-card p {
    grid-column: 1 / -1;
}
/* Partner Program Cards End */

/* Partner Program Toolkit Start */
.ctpp-toolkit {
    display: grid;
    gap: 18px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--ctpp-radius-xl);
}

.ctpp-toolkit-head {
    display: grid;
    gap: 12px;
    max-width: 780px;
}

.ctpp-toolkit h3 {
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.14;
}

.ctpp-toolkit p {
    max-width: 720px;
}

.ctpp-bar-list {
    display: grid;
    gap: 14px;
}

.ctpp-bar {
    display: grid;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
    box-shadow: none;
    background: rgba(246,244,254,.72);
}

.ctpp-bar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ctpp-bar-head strong {
    color: var(--ctpp-purple-dark);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 800;
}

.ctpp-bar-head span {
    color: var(--ctpp-purple);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
}

.ctpp-track {
    position: relative;
    width: 100%;
    height: 11px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(106,73,242,.12);
}

.ctpp-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w);
    min-width: 20px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ctpp-purple), var(--ctpp-purple-2));
}

.ctpp-console-card {
    padding: 24px;
    border-radius: var(--ctpp-radius-lg);
}

.ctpp-console-card h3 {
    margin-bottom: 14px;
    font-size: 22px;
    line-height: 1.3;
}

.ctpp-list {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.ctpp-list li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    font-size: 13.5px;
    line-height: 1.58;
}

.ctpp-list li::before {
    content: "";
    width: 9px;
    height: 9px;
    margin-top: .58em;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ctpp-purple), var(--ctpp-purple-2));
    box-shadow: 0 0 0 6px rgba(106,73,242,.08);
}
/* Partner Program Toolkit End */

/* Partner Program CTA Start */
.ctpp-cta-shell {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 3vw, 38px);
    border-radius: var(--ctpp-radius-xl);
    color: #fff;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.20), transparent 32%),
        linear-gradient(135deg, #1d1546 0%, #352177 48%, #5b37ea 100%);
    box-shadow: var(--ctpp-shadow-deep);
}

.ctpp-cta-shell::before,
.ctpp-cta-shell::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    opacity: .24;
}

.ctpp-cta-shell::before {
    width: 310px;
    height: 310px;
    right: -110px;
    top: -110px;
    background: radial-gradient(circle, rgba(255,255,255,.56), rgba(255,255,255,0));
}

.ctpp-cta-shell::after {
    width: 250px;
    height: 250px;
    left: -100px;
    bottom: -100px;
    background: radial-gradient(circle, rgba(255,255,255,.30), rgba(255,255,255,0));
}

.ctpp-cta-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    gap: 28px;
    align-items: center;
}

.ctpp-cta {
    display: grid;
    gap: 16px;
}

.ctpp-cta h2,
.ctpp-cta p {
    color: #fff;
}

.ctpp-cta p {
    max-width: 720px;
    color: rgba(255,255,255,.84);
}

.ctpp-cta .ctpp-badge {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.16);
    box-shadow: none;
}

.ctpp-cta .ctpp-badge::before {
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255,255,255,.12);
}

.ctpp-cta .ctpp-btn.primary {
    background: #fff;
    color: var(--ctpp-purple-dark);
    box-shadow: 0 18px 38px rgba(0,0,0,.10);
}

.ctpp-cta .ctpp-btn.secondary {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.22);
    box-shadow: none;
}

.ctpp-cta-card {
    display: grid;
    gap: 14px;
    padding: 22px;
    border-radius: 24px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: none;
    color: #fff;
    backdrop-filter: blur(12px);
}

.ctpp-cta-card strong {
    color: #fff;
    font-size: 17px;
    line-height: 1.45;
    font-weight: 800;
}

.ctpp-cta-card .ctpp-list li {
    color: rgba(255,255,255,.84);
}

.ctpp-cta-card .ctpp-list li::before {
    background: rgba(255,255,255,.94);
    box-shadow: 0 0 0 6px rgba(255,255,255,.08);
}
/* Partner Program CTA End */

/* Partner Program Reveal Start */
.ctpp-reveal {
    opacity: 1;
    transform: none;
    transition: opacity .65s ease, transform .65s ease;
}

.ctpp-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Partner Program Reveal End */

/* Partner Program Responsive Start */
@media (max-width: 1180px) {
    :root {
        --ctpp-page-gap: 34px;
        --ctpp-section-y: 64px;
    }

    .ctpp-hero-grid,
    .ctpp-tool-grid,
    .ctpp-cta-grid {
        grid-template-columns: 1fr;
    }

    .ctpp-hero-copy {
        max-width: 920px;
    }

    .ctpp-type-grid,
    .ctpp-step-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ctpp-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ctpp-partner-hub {
        min-height: 560px;
    }
}

@media (max-width: 920px) {
    :root {
        --ctpp-page-gap: 30px;
        --ctpp-section-y: 56px;
    }

    .ctpp-topbar {
        grid-template-columns: 1fr;
    }

    .ctpp-topbar .ctpp-pill-row {
        justify-content: flex-start;
    }

    .ctpp-hub-metrics {
        grid-template-columns: 1fr;
    }

    .ctpp-hub-metric {
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
    }

    .ctpp-hub-metric strong {
        margin: 0;
    }
}

@media (max-width: 680px) {
    :root {
        --ctpp-page-gap: 24px;
        --ctpp-section-y: 46px;
    }

    .ctpp-page {
        padding-top: 92px;
        padding-bottom: 74px;
    }

    .ctpp-container {
        width: min(var(--ctpp-container), calc(100% - var(--ctpp-page-gap)));
    }

    .ctpp-section {
        padding: var(--ctpp-section-y) 0;
    }

    .ctpp-hero {
        padding-bottom: 32px;
    }

    .ctpp-hero-copy,
    .ctpp-head,
    .ctpp-toolkit-head,
    .ctpp-cta {
        text-align: center;
        justify-items: center;
    }

    .ctpp-hero-title {
        font-size: clamp(30px, 9.3vw, 42px);
        line-height: 1.1;
        max-width: none;
    }

    .ctpp-head h2,
    .ctpp-toolkit h3,
    .ctpp-cta h2 {
        font-size: clamp(24px, 7.4vw, 34px);
        line-height: 1.16;
        max-width: none;
    }

    .ctpp-subtitle,
    .ctpp-head p,
    .ctpp-card p,
    .ctpp-type-card p,
    .ctpp-step-card p,
    .ctpp-toolkit p,
    .ctpp-console-card p,
    .ctpp-bar p,
    .ctpp-cta p,
    .ctpp-mini-card p,
    .ctpp-topbar p {
        font-size: 14px;
        line-height: 1.62;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .ctpp-badge {
        padding: 8px 12px;
        gap: 8px;
        font-size: 9.5px;
        letter-spacing: .075em;
        margin-left: auto;
        margin-right: auto;
    }

    .ctpp-badge::before {
        width: 7px;
        height: 7px;
        flex-basis: 7px;
    }

    .ctpp-topbar {
        padding: 15px;
        border-radius: 18px;
        text-align: center;
    }

    .ctpp-topbar .ctpp-pill-row,
    .ctpp-pill-row,
    .ctpp-tag-row {
        justify-content: center;
        gap: 8px;
    }

    .ctpp-pill,
    .ctpp-tag {
        min-height: 32px;
        padding: 7px 10px;
        font-size: 11.5px;
    }

    .ctpp-btn-row {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .ctpp-btn {
        width: 100%;
        min-width: 0;
        min-height: 50px;
        padding: 13px 16px;
        border-radius: 14px;
        font-size: 14px;
    }

    .ctpp-partner-hub {
        min-height: auto;
        display: grid;
        gap: 14px;
        padding: 16px;
        border-radius: 24px;
    }

    .ctpp-partner-hub::before {
        inset: 14px;
        border-radius: 20px;
        background-size: 34px 34px;
    }

    .ctpp-hub-header {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .ctpp-hub-header p {
        text-align: center;
    }

    .ctpp-hub-map {
        min-height: auto;
        display: grid;
        gap: 12px;
        margin-top: 0;
    }

    .ctpp-hub-line {
        display: none;
    }

    .ctpp-hub-center,
    .ctpp-hub-card {
        position: relative;
        inset: auto;
        width: 100%;
        transform: none;
        padding: 15px;
        border-radius: 18px;
        text-align: center;
    }

    .ctpp-hub-card {
        justify-items: center;
    }

    .ctpp-hub-card small {
        margin-inline: auto;
    }

    .ctpp-hub-metrics {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ctpp-hub-metric {
        grid-template-columns: 78px minmax(0, 1fr);
        padding: 13px;
        border-radius: 16px;
        text-align: left;
    }

    .ctpp-hub-metric strong {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 8px 10px;
        border-radius: 14px;
        background: rgba(255,255,255,.10);
        font-size: 15px;
        text-align: center;
    }

    .ctpp-hub-metric span {
        text-align: left;
    }

    .ctpp-grid-3,
    .ctpp-type-grid,
    .ctpp-step-grid,
    .ctpp-tool-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ctpp-card,
    .ctpp-type-card,
    .ctpp-step-card,
    .ctpp-toolkit,
    .ctpp-console-card,
    .ctpp-cta-shell,
    .ctpp-cta-card,
    .ctpp-mini-card {
        padding: 16px;
        border-radius: 22px;
    }

    .ctpp-card,
    .ctpp-type-card,
    .ctpp-mini-card {
        text-align: center;
        justify-items: center;
    }

    .ctpp-icon {
        width: 44px;
        height: 44px;
        margin: 0 auto 14px;
        border-radius: 15px;
        font-size: 16px;
    }

    .ctpp-card h3,
    .ctpp-type-card h3,
    .ctpp-mini-card h3,
    .ctpp-console-card h3 {
        font-size: 16px;
        line-height: 1.32;
        text-align: center;
    }

    .ctpp-step-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 8px 12px;
        text-align: left;
    }

    .ctpp-step-no {
        width: 40px;
        height: 40px;
        border-radius: 13px;
        font-size: 13px;
    }

    .ctpp-step-card .ctpp-tag {
        justify-self: start;
    }

    .ctpp-step-card h3,
    .ctpp-step-card p {
        text-align: left;
        margin: 0;
    }

    .ctpp-step-card h3 {
        font-size: 15.5px;
    }

    .ctpp-step-card p {
        font-size: 13.5px;
        line-height: 1.58;
    }

    .ctpp-list {
        width: 100%;
    }

    .ctpp-list li {
        min-height: 46px;
        padding: 12px 13px;
        border-radius: 16px;
        background: rgba(255,255,255,.76);
        border: 1px solid rgba(106,73,242,.09);
        box-shadow: 0 8px 20px rgba(50,35,111,.045);
        font-size: 13px;
        line-height: 1.55;
        text-align: left;
    }

    .ctpp-console-card .ctpp-list li {
        background: rgba(246,244,254,.72);
    }

    .ctpp-bar {
        padding: 14px;
        border-radius: 16px;
    }

    .ctpp-bar-head {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 6px;
        text-align: center;
    }

    .ctpp-bar p {
        text-align: center;
        font-size: 13px;
    }

    .ctpp-cta-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ctpp-cta-card {
        text-align: left;
    }

    .ctpp-cta-card strong {
        text-align: center;
    }

    .ctpp-cta-card .ctpp-list li {
        background: rgba(255,255,255,.09);
        border-color: rgba(255,255,255,.12);
    }
}

@media (max-width: 430px) {
    :root {
        --ctpp-page-gap: 22px;
        --ctpp-section-y: 42px;
    }

    .ctpp-page {
        padding-top: 86px;
    }

    .ctpp-hero-title {
        font-size: clamp(27px, 8.8vw, 36px);
    }

    .ctpp-head h2,
    .ctpp-toolkit h3,
    .ctpp-cta h2 {
        font-size: clamp(22px, 7vw, 30px);
    }

    .ctpp-badge {
        font-size: 8.5px;
        letter-spacing: .06em;
        padding: 7px 10px;
    }

    .ctpp-card,
    .ctpp-type-card,
    .ctpp-step-card,
    .ctpp-toolkit,
    .ctpp-console-card,
    .ctpp-cta-shell,
    .ctpp-cta-card,
    .ctpp-mini-card,
    .ctpp-partner-hub {
        padding: 14px;
        border-radius: 18px;
    }

    .ctpp-hub-metric {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ctpp-hub-metric strong {
        width: fit-content;
        margin: 0 auto;
    }

    .ctpp-hub-metric span {
        text-align: center;
    }
}

@media (max-width: 360px) {
    :root {
        --ctpp-page-gap: 18px;
    }

    .ctpp-hero-title {
        font-size: 25px;
    }

    .ctpp-pill,
    .ctpp-tag {
        font-size: 10.8px;
    }
}

@media (hover: none) {
    .ctpp-btn:hover,
    .ctpp-card:hover,
    .ctpp-type-card:hover,
    .ctpp-step-card:hover,
    .ctpp-toolkit:hover,
    .ctpp-console-card:hover,
    .ctpp-mini-card:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .ctpp-page *,
    .ctpp-page *::before,
    .ctpp-page *::after,
    .ctpp-reveal {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .ctpp-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}
/* Partner Program Responsive End */

/*===================================================================================
    36. Partner Program CSS End
===================================================================================*/


/*===================================================================================
    37. Access Account CSS Start
===================================================================================*/

.ct-simple-login {
    --ct-primary: #6A49F2;
    --ct-primary-dark: #32236F;
    --ct-secondary: #8A70FF;
    --ct-ink: #202033;
    --ct-text: #24223A;
    --ct-text-soft: #62677D;
    --ct-muted: #7A7D93;
    --ct-white: #ffffff;
    --ct-surface: rgba(255, 255, 255, 0.94);
    --ct-border: rgba(106, 73, 242, 0.14);
    --ct-border-strong: rgba(106, 73, 242, 0.24);
    --ct-shadow-sm: 0 12px 30px rgba(50, 35, 111, 0.06);
    --ct-shadow-md: 0 22px 56px rgba(50, 35, 111, 0.10);
    --ct-shadow-lg: 0 34px 90px rgba(50, 35, 111, 0.16);
    --ct-radius-xl: 34px;
    --ct-radius-lg: 26px;
    --ct-radius-md: 20px;
    --ct-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease, color .28s ease;

    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-width: 320px;
    padding: clamp(108px, 8vw, 136px) 18px clamp(56px, 6vw, 90px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 7% 7%, rgba(106, 73, 242, 0.15), transparent 28%),
        radial-gradient(circle at 93% 9%, rgba(223, 218, 243, 0.92), transparent 30%),
        radial-gradient(circle at 12% 92%, rgba(106, 73, 242, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fcfbff 44%, #f7f3ff 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ct-text-soft);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.ct-simple-login,
.ct-simple-login *,
.ct-simple-login *::before,
.ct-simple-login *::after {
    box-sizing: border-box;
}

.ct-simple-login::before,
.ct-simple-login::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(90px);
    opacity: .76;
}

.ct-simple-login::before {
    width: 340px;
    height: 340px;
    left: -150px;
    top: 110px;
    background: rgba(106, 73, 242, 0.16);
}

.ct-simple-login::after {
    width: 390px;
    height: 390px;
    right: -165px;
    bottom: 8%;
    background: rgba(223, 218, 243, 0.95);
}

.ct-simple-login a {
    color: inherit;
    text-decoration: none;
}

.ct-simple-login .ct-simple-login-wrap {
    position: relative;
    z-index: 1;
    width: min(980px, 100%);
    margin-inline: auto;
}

.ct-simple-login .ct-simple-login-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: clamp(28px, 4vw, 48px);
    text-align: center;
    border-radius: var(--ct-radius-xl);
    border: 1px solid var(--ct-border);
    background:
        radial-gradient(circle at 100% 0%, rgba(106, 73, 242, 0.10), transparent 34%),
        radial-gradient(circle at 0% 100%, rgba(223, 218, 243, 0.65), transparent 40%),
        var(--ct-surface);
    box-shadow: var(--ct-shadow-lg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.ct-simple-login .ct-simple-login-card::before {
    content: "";
    position: absolute;
    width: 270px;
    height: 270px;
    top: -120px;
    left: -110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(106, 73, 242, 0.16), transparent 70%);
    pointer-events: none;
}

.ct-simple-login .ct-simple-login-card::after {
    content: "CloudTest";
    position: absolute;
    right: clamp(18px, 3vw, 36px);
    bottom: clamp(10px, 2vw, 22px);
    color: rgba(106, 73, 242, 0.045);
    font-size: clamp(52px, 9vw, 118px);
    line-height: .9;
    font-weight: 800;
    letter-spacing: -0.08em;
    pointer-events: none;
}

.ct-simple-login .ct-simple-login-title {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto 14px;
    color: var(--ct-primary-dark);
    font-size: clamp(32px, 4.8vw, 56px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.ct-simple-login .ct-simple-login-title span {
    background: linear-gradient(90deg, var(--ct-primary), var(--ct-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ct-simple-login .ct-simple-login-desc {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto clamp(24px, 3vw, 34px);
    color: var(--ct-text-soft);
    font-size: 15.5px;
    line-height: 1.76;
    font-weight: 400;
}

.ct-simple-login .ct-simple-login-options {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 10px;
}

.ct-simple-login .ct-simple-login-option {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: clamp(22px, 2.6vw, 30px);
    border-radius: var(--ct-radius-lg);
    border: 1px solid rgba(106, 73, 242, 0.12);
    background:
        radial-gradient(circle at 100% 0%, rgba(106, 73, 242, 0.075), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(252,251,255,.92));
    box-shadow: var(--ct-shadow-sm);
    transition: var(--ct-transition);
}

.ct-simple-login .ct-simple-login-option::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(135deg, rgba(106, 73, 242, 0.08), transparent 62%);
    opacity: 0;
    transition: opacity .28s ease;
}

.ct-simple-login .ct-simple-login-option::after {
    content: "";
    position: absolute;
    right: -58px;
    bottom: -68px;
    z-index: -1;
    width: 155px;
    height: 155px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(106, 73, 242, .12), transparent 72%);
    pointer-events: none;
}

.ct-simple-login .ct-simple-login-option:hover {
    transform: translateY(-6px);
    border-color: var(--ct-border-strong);
    box-shadow: 0 28px 58px rgba(106, 73, 242, 0.15);
}

.ct-simple-login .ct-simple-login-option:hover::before {
    opacity: 1;
}

.ct-simple-login .ct-simple-login-option h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    color: var(--ct-primary-dark);
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.ct-simple-login .ct-simple-login-option h3::before {
    content: "";
    display: inline-flex;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ct-primary), #16BDF5);
    box-shadow: 0 0 0 6px rgba(106, 73, 242, 0.09);
    vertical-align: middle;
}

.ct-simple-login .ct-simple-login-option p {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    margin: 0 0 22px;
    color: var(--ct-text-soft);
    font-size: 14.5px;
    line-height: 1.72;
    font-weight: 400;
}

.ct-simple-login .ct-simple-login-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    border-radius: 15px;
    color: var(--ct-white);
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 800;
    background: linear-gradient(135deg, var(--ct-primary), var(--ct-secondary));
    box-shadow: 0 16px 32px rgba(106, 73, 242, 0.22);
    transition: var(--ct-transition);
    text-align: center;
}

.ct-simple-login .ct-simple-login-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--ct-primary-dark), var(--ct-primary));
    opacity: 0;
    transition: opacity .28s ease;
    z-index: -1;
}

.ct-simple-login .ct-simple-login-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .28s ease;
}

.ct-simple-login .ct-simple-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 38px rgba(106, 73, 242, 0.28);
    color: #fff;
}

.ct-simple-login .ct-simple-login-btn:hover::before {
    opacity: 1;
}

.ct-simple-login .ct-simple-login-btn:hover svg {
    transform: translateX(3px);
}

.ct-simple-login .ct-simple-login-bottom {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.07);
    border: 1px solid rgba(106, 73, 242, 0.10);
    color: var(--ct-text-soft);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}

.ct-simple-login .ct-simple-login-bottom a {
    color: var(--ct-primary);
    font-weight: 800;
}

.ct-simple-login .ct-simple-login-bottom a:hover {
    color: var(--ct-primary-dark);
}

@media (max-width: 991px) {
    .ct-simple-login {
        padding: 98px 16px 70px;
        align-items: flex-start;
    }

    .ct-simple-login .ct-simple-login-wrap {
        max-width: 820px;
    }

    .ct-simple-login .ct-simple-login-card {
        border-radius: 28px;
    }
}

@media (max-width: 767px) {
    .ct-simple-login {
        padding: 86px 12px 62px;
    }

    .ct-simple-login .ct-simple-login-card {
        padding: 22px 16px;
        border-radius: 22px;
    }

    .ct-simple-login .ct-simple-login-card::after {
        display: none;
    }

    .ct-simple-login .ct-simple-login-title {
        font-size: clamp(28px, 8.8vw, 38px);
        line-height: 1.12;
        letter-spacing: -0.045em;
    }

    .ct-simple-login .ct-simple-login-desc {
        max-width: none;
        margin-bottom: 22px;
        font-size: 13.8px;
        line-height: 1.62;
    }

    .ct-simple-login .ct-simple-login-options {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ct-simple-login .ct-simple-login-option {
        align-items: stretch;
        padding: 18px;
        border-radius: 20px;
        text-align: center;
    }

    .ct-simple-login .ct-simple-login-option h3 {
        margin-bottom: 8px;
        font-size: 18px;
        line-height: 1.3;
        text-align: center;
    }

    .ct-simple-login .ct-simple-login-option h3::before {
        width: 9px;
        height: 9px;
        margin-right: 8px;
        box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.09);
    }

    .ct-simple-login .ct-simple-login-option p {
        margin-bottom: 18px;
        font-size: 13.5px;
        line-height: 1.58;
        text-align: center;
    }

    .ct-simple-login .ct-simple-login-btn {
        min-height: 50px;
        padding: 13px 16px;
        border-radius: 14px;
        font-size: 13.8px;
    }

    .ct-simple-login .ct-simple-login-bottom {
        width: 100%;
        margin-top: 18px;
        border-radius: 16px;
        padding: 11px 12px;
        font-size: 13px;
        line-height: 1.45;
    }
}

@media (max-width: 420px) {
    .ct-simple-login {
        padding-left: 9px;
        padding-right: 9px;
        padding-top: 80px;
    }

    .ct-simple-login .ct-simple-login-card {
        padding: 18px 12px;
        border-radius: 18px;
    }

    .ct-simple-login .ct-simple-login-title {
        font-size: 25px;
    }

    .ct-simple-login .ct-simple-login-desc {
        font-size: 13px;
    }

    .ct-simple-login .ct-simple-login-option {
        padding: 15px;
        border-radius: 17px;
    }

    .ct-simple-login .ct-simple-login-option h3 {
        font-size: 16px;
    }

    .ct-simple-login .ct-simple-login-option p {
        font-size: 12.8px;
    }
}

@media (hover: none) {
    .ct-simple-login .ct-simple-login-option:hover,
    .ct-simple-login .ct-simple-login-btn:hover {
        transform: none;
    }

    .ct-simple-login .ct-simple-login-btn:hover svg {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ct-simple-login,
    .ct-simple-login *,
    .ct-simple-login *::before,
    .ct-simple-login *::after {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/*===================================================================================
    37. Access Account CSS End
===================================================================================*/


/*===================================================================================
    38. Create Account CSS Start
===================================================================================*/

/* ================= CLOUDTEST SIGNUP - RESPONSIVE POLISHED UI ================= */
.ct-simple-signup {
    --ct-primary: #6A49F2;
    --ct-primary-2: #8B70FF;
    --ct-primary-3: #A993FF;
    --ct-dark: #32236F;
    --ct-ink: #211E39;
    --ct-text: #24223A;
    --ct-muted: #62677D;
    --ct-soft-muted: #7B8095;
    --ct-white: #FFFFFF;
    --ct-surface: rgba(255, 255, 255, 0.94);
    --ct-surface-strong: rgba(255, 255, 255, 0.98);
    --ct-border: rgba(106, 73, 242, 0.14);
    --ct-border-strong: rgba(106, 73, 242, 0.24);
    --ct-shadow-sm: 0 12px 30px rgba(50, 35, 111, 0.06);
    --ct-shadow-md: 0 22px 56px rgba(50, 35, 111, 0.10);
    --ct-shadow-lg: 0 34px 90px rgba(50, 35, 111, 0.16);
    --ct-radius-xl: 36px;
    --ct-radius-lg: 28px;
    --ct-radius-md: 20px;
    --ct-radius-sm: 16px;
    --ct-transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease, color .28s ease;

    position: relative;
    isolation: isolate;
    min-width: 320px;
    min-height: 100vh;
    width: 100%;
    padding: clamp(108px, 8vw, 138px) clamp(14px, 2.8vw, 30px) clamp(58px, 6vw, 92px) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 8%, rgba(106, 73, 242, 0.16), transparent 28%),
        radial-gradient(circle at 92% 10%, rgba(223, 218, 243, 0.96), transparent 30%),
        radial-gradient(circle at 12% 92%, rgba(106, 73, 242, 0.08), transparent 30%),
        linear-gradient(180deg, #FFFFFF 0%, #FCFBFF 43%, #F7F3FF 100%);
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ct-muted);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.ct-simple-signup,
.ct-simple-signup *,
.ct-simple-signup *::before,
.ct-simple-signup *::after {
    box-sizing: border-box;
}

.ct-simple-signup::before,
.ct-simple-signup::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
    border-radius: 999px;
    filter: blur(92px);
    opacity: .78;
}

.ct-simple-signup::before {
    width: 360px;
    height: 360px;
    top: 106px;
    left: -160px;
    background: rgba(106, 73, 242, 0.17);
}

.ct-simple-signup::after {
    width: 420px;
    height: 420px;
    right: -180px;
    bottom: 8%;
    background: rgba(223, 218, 243, 0.98);
}

.ct-simple-signup a {
    color: inherit;
    text-decoration: none;
}

.ct-simple-signup .ct-simple-wrap {
    position: relative;
    z-index: 1;
    width: min(1040px, 100%);
    max-width: none;
    margin: 0 auto;
}

.ct-simple-signup .ct-simple-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: clamp(28px, 4.2vw, 52px);
    text-align: center;
    border-radius: var(--ct-radius-xl);
    border: 1px solid var(--ct-border);
    background:
        radial-gradient(circle at 100% 0%, rgba(106, 73, 242, 0.12), transparent 34%),
        radial-gradient(circle at 0% 100%, rgba(223, 218, 243, 0.70), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
    box-shadow: var(--ct-shadow-lg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.ct-simple-signup .ct-simple-card::before {
    content: "";
    position: absolute;
    width: 290px;
    height: 290px;
    top: -130px;
    left: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(106, 73, 242, 0.16), transparent 70%);
    pointer-events: none;
}

.ct-simple-signup .ct-simple-card::after {
    content: "CloudTest";
    position: absolute;
    right: clamp(18px, 3vw, 38px);
    bottom: clamp(10px, 2vw, 22px);
    color: rgba(106, 73, 242, 0.045);
    font-size: clamp(54px, 9vw, 122px);
    line-height: .9;
    font-weight: 800;
    letter-spacing: -0.08em;
    pointer-events: none;
}

.ct-simple-signup .ct-simple-title {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto 14px;
    color: var(--ct-dark);
    font-size: clamp(34px, 5vw, 60px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.ct-simple-signup .ct-simple-title span {
    background: linear-gradient(90deg, var(--ct-primary), var(--ct-primary-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ct-simple-signup .ct-simple-desc {
    position: relative;
    z-index: 1;
    max-width: 740px;
    margin: 0 auto clamp(24px, 3.2vw, 36px);
    color: var(--ct-muted);
    font-size: 15.5px;
    line-height: 1.78;
    font-weight: 400;
}

.ct-simple-signup .ct-simple-options {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 22px);
    margin-top: 8px;
}

.ct-simple-signup .ct-simple-option {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: clamp(22px, 2.8vw, 32px);
    border-radius: var(--ct-radius-lg);
    border: 1px solid rgba(106, 73, 242, 0.13);
    background:
        radial-gradient(circle at 100% 0%, rgba(106, 73, 242, 0.085), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.99), rgba(252,251,255,.94));
    box-shadow: var(--ct-shadow-sm);
    transition: var(--ct-transition);
}

.ct-simple-signup .ct-simple-option::before {
    /* content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.085), transparent 64%);
    opacity: 0;
    transition: opacity .28s ease; */
	content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(135deg, rgba(106, 73, 242, 0.08), transparent 62%);
    opacity: 0;
    transition: opacity .28s ease;
}

.ct-simple-signup .ct-simple-option::after {
    content: "";
    position: absolute;
    right: -58px;
    bottom: -68px;
    z-index: -1;
    width: 168px;
    height: 168px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(106, 73, 242, .13), transparent 72%);
    pointer-events: none;
}

.ct-simple-signup .ct-simple-option:hover {
    transform: translateY(-6px);
    border-color: var(--ct-border-strong);
    box-shadow: 0 30px 62px rgba(106, 73, 242, 0.15);
}

.ct-simple-signup .ct-simple-option:hover::before {
    opacity: 1;
}

/* Adds visual identity even if the icon markup is commented in your HTML */
.ct-simple-signup .ct-simple-option h3 {
    /* position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    color: var(--ct-dark);
    font-size: clamp(20px, 2.25vw, 26px);
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.04em;
    text-wrap: balance; */
	position: relative;
    z-index: 1;
    margin: 0 0 10px;
    color: var(--ct-primary-dark);
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.ct-simple-signup .ct-simple-option h3::before {
    /* content: "";
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 15px;
    background:
        radial-gradient(circle at 28% 25%, rgba(255,255,255,.62), transparent 28%),
        linear-gradient(135deg, var(--ct-primary), var(--ct-primary-2));
    box-shadow: 0 14px 28px rgba(106, 73, 242, 0.18); */
	content: "";
    display: inline-flex;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ct-primary), #16BDF5);
    box-shadow: 0 0 0 6px rgba(106, 73, 242, 0.09);
    vertical-align: middle;
}

.ct-simple-signup .ct-simple-option:first-child h3::after,
.ct-simple-signup .ct-simple-option:nth-child(2) h3::after {
    /* position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-52%);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.02em; */
}

.ct-simple-signup .ct-simple-option:first-child h3::after {
    /* content: "C"; */
}

.ct-simple-signup .ct-simple-option:nth-child(2) h3::after {
    /* content: "D"; */
}

.ct-simple-signup .ct-simple-icon {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    background: linear-gradient(135deg, var(--ct-primary), var(--ct-primary-2));
    box-shadow: 0 14px 28px rgba(106, 73, 242, 0.18);
}

.ct-simple-signup .ct-simple-icon svg {
    width: 26px;
    height: 26px;
    stroke: #ffffff;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ct-simple-signup .ct-simple-option p {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    margin: 0 0 22px;
    color: var(--ct-muted);
    font-size: 14.5px;
    line-height: 1.72;
    font-weight: 400;
}

.ct-simple-signup .ct-simple-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    border-radius: 15px;
    color: var(--ct-white);
    font-size: 14.5px;
    line-height: 1.2;
    font-weight: 800;
    background: linear-gradient(135deg, var(--ct-primary), var(--ct-primary-2));
    box-shadow: 0 16px 32px rgba(106, 73, 242, 0.23);
    transition: var(--ct-transition);
    text-align: center;
}

.ct-simple-signup .ct-simple-btn::before {
    /* content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--ct-dark), var(--ct-primary));
    opacity: 0;
    transition: opacity .28s ease; */
	    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--ct-primary-dark), var(--ct-primary));
    opacity: 0;
    transition: opacity .28s ease;
    z-index: -1;
}

.ct-simple-signup .ct-simple-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .28s ease;
}

.ct-simple-signup .ct-simple-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 40px rgba(106, 73, 242, 0.30);
    color: #fff;
}

.ct-simple-signup .ct-simple-btn:hover::before {
    opacity: 1;
}

.ct-simple-signup .ct-simple-btn:hover svg {
    transform: translateX(3px);
}

.ct-simple-signup .ct-simple-bottom {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: clamp(20px, 2.6vw, 30px);
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(106, 73, 242, 0.075);
    border: 1px solid rgba(106, 73, 242, 0.11);
    color: var(--ct-muted);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}

.ct-simple-signup .ct-simple-bottom a {
    color: var(--ct-primary);
    font-weight: 800;
}

.ct-simple-signup .ct-simple-bottom a:hover {
    color: var(--ct-dark);
}

/* Tablet */
@media (max-width: 991px) {
    .ct-simple-signup {
        align-items: flex-start;
        padding: 98px 16px 72px !important;
    }

    .ct-simple-signup .ct-simple-wrap {
        max-width: 820px;
    }

    .ct-simple-signup .ct-simple-card {
        border-radius: 30px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .ct-simple-signup {
        padding: 86px 12px 62px !important;
    }

    .ct-simple-signup .ct-simple-card {
        padding: 22px 16px;
        border-radius: 22px;
    }

    .ct-simple-signup .ct-simple-card::after {
        display: none;
    }

    .ct-simple-signup .ct-simple-title {
        font-size: clamp(28px, 8.8vw, 38px);
        line-height: 1.12;
        letter-spacing: -0.045em;
    }

    .ct-simple-signup .ct-simple-desc {
        max-width: none;
        margin-bottom: 22px;
        font-size: 13.8px;
        line-height: 1.62;
    }

    .ct-simple-signup .ct-simple-options {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ct-simple-signup .ct-simple-option {
        align-items: stretch;
        padding: 18px;
        border-radius: 20px;
        text-align: center;
    }

    .ct-simple-signup .ct-simple-option h3 {
        justify-content: center;
        margin-bottom: 8px;
        font-size: 18px;
        line-height: 1.3;
        text-align: center;
    }

    .ct-simple-signup .ct-simple-option h3::before {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 14px;
    }

    .ct-simple-signup .ct-simple-option:first-child h3::after,
    .ct-simple-signup .ct-simple-option:nth-child(2) h3::after {
        left: calc(50% - 52px);
        font-size: 14px;
    }

    .ct-simple-signup .ct-simple-option p {
        margin-bottom: 18px;
        font-size: 13.5px;
        line-height: 1.58;
        text-align: center;
    }

    .ct-simple-signup .ct-simple-btn {
        min-height: 50px;
        padding: 13px 16px;
        border-radius: 14px;
        font-size: 13.8px;
    }

    .ct-simple-signup .ct-simple-bottom {
        width: 100%;
        margin-top: 18px;
        border-radius: 16px;
        padding: 11px 12px;
        font-size: 13px;
        line-height: 1.45;
    }
}

/* Small mobile */
@media (max-width: 420px) {
    .ct-simple-signup {
        padding-left: 9px !important;
        padding-right: 9px !important;
        padding-top: 80px !important;
    }

    .ct-simple-signup .ct-simple-card {
        padding: 18px 12px;
        border-radius: 18px;
    }

    .ct-simple-signup .ct-simple-title {
        font-size: 25px;
    }

    .ct-simple-signup .ct-simple-desc {
        font-size: 13px;
    }

    .ct-simple-signup .ct-simple-option {
        padding: 15px;
        border-radius: 17px;
    }

    .ct-simple-signup .ct-simple-option h3 {
        font-size: 16px;
        gap: 9px;
    }

    .ct-simple-signup .ct-simple-option h3::before {
        /* width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 12px; */
		width: 9px;
        height: 9px;
        margin-right: 8px;
        box-shadow: 0 0 0 5px rgba(106, 73, 242, 0.09);
    }

    .ct-simple-signup .ct-simple-option:first-child h3::after,
    .ct-simple-signup .ct-simple-option:nth-child(2) h3::after {
        left: calc(50% - 46px);
        font-size: 13px;
    }

    .ct-simple-signup .ct-simple-option p {
        font-size: 12.8px;
    }
}

@media (hover: none) {
    .ct-simple-signup .ct-simple-option:hover,
    .ct-simple-signup .ct-simple-btn:hover {
        transform: none;
    }

    .ct-simple-signup .ct-simple-btn:hover svg {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ct-simple-signup,
    .ct-simple-signup *,
    .ct-simple-signup *::before,
    .ct-simple-signup *::after {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/*===================================================================================
    38. Create Account CSS End
===================================================================================*/

/*===================================================================================
    39. Footer CSS Start
===================================================================================*/

.ctpro-footer-wrap {
    --ctpro-brand: #6842f4;
    --ctpro-brand-2: #7d5cff;
    --ctpro-brand-3: #5f3bed;
    --ctpro-footer-top: #261b59;
    --ctpro-footer-mid: #1b1443;
    --ctpro-footer-bottom: #120d2f;
    --ctpro-text: #ffffff;
    --ctpro-text-soft: rgba(255, 255, 255, 0.82);
    --ctpro-text-muted: rgba(255, 255, 255, 0.64);
    --ctpro-shell: 1170px;
    --ctpro-radius-xl: 30px;
    --ctpro-radius-lg: 18px;
    --ctpro-shadow-cta: 0 30px 70px rgba(68, 37, 180, 0.28);
    --ctpro-shadow-btn: 0 16px 28px rgba(36, 18, 108, 0.16);
    position: relative;
    overflow: visible;
    background: transparent;
  }

  .ctpro-footer-wrap *,
  .ctpro-footer-wrap *::before,
  .ctpro-footer-wrap *::after {
    box-sizing: border-box;
  }

  .ctpro-footer-wrap a {
    text-decoration: none;
  }

  .ctpro-footer-shell {
    width: min(var(--ctpro-shell), calc(100% - 32px));
    margin: 0 auto;
  }

  /* =========================
     CTA overlap area
  ========================= */
  .ctpro-footer-cta-band {
    position: relative;
    z-index: 3;
    margin-bottom: -88px;
  }

  .ctpro-footer-cta-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(200px, 250px);
    gap: clamp(20px, 3vw, 28px);
    align-items: center;
    min-height: 228px;
    padding: 32px 34px;
    border-radius: 18px;
    background: linear-gradient(135deg, #6842f4 0%, #7d5cff 46%, #5f3bed 100%);
    box-shadow: var(--ctpro-shadow-cta);
    margin-bottom: -125px;
  }

  .ctpro-footer-cta-card::before,
  .ctpro-footer-cta-card::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
  }

  .ctpro-footer-cta-card::before {
    width: 320px;
    height: 320px;
    top: -165px;
    right: -120px;
    background: rgba(255, 255, 255, 0.12);
  }

  .ctpro-footer-cta-card::after {
    width: 220px;
    height: 220px;
    left: -95px;
    bottom: -115px;
    background: rgba(255, 255, 255, 0.08);
  }

  .ctpro-footer-cta-copy,
  .ctpro-footer-cta-action {
    position: relative;
    z-index: 1;
  }

  .ctpro-footer-cta-copy {
    /* max-width: 640px; */
  }

  .ctpro-footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    backdrop-filter: blur(10px);
  }

  .ctpro-footer-badge svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex: 0 0 auto;
  }

  .ctpro-footer-cta-copy h2 {
    margin: 0 0 12px;
    /* max-width: 520px; */
    color: #fff;
    font-size: clamp(2rem, 2.5vw, 3rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 700;
    text-wrap: balance;
  }

  .ctpro-footer-cta-copy p {
    margin: 0;
    /* max-width: 610px; */
    color: rgba(255, 255, 255, 0.84);
    font-size: 12px;
    line-height: 1.7;
    font-weight: 500;
  }

  .ctpro-footer-points {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .ctpro-footer-points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
  }

  .ctpro-footer-points svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex: 0 0 auto;
  }

  .ctpro-footer-cta-action {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .ctpro-footer-cta-btn {
    width: min(100%, 420px);
    max-width: 420px;
    min-height: 62px;
    padding: 16px 26px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #efeaff 100%);
    color: #4422c8;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ctpro-shadow-btn);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-align: center;
  }

  .ctpro-footer-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(36, 18, 108, 0.22);
  }

  /* =========================
     Footer main
  ========================= */
  .ctpro-footer-main {
    position: relative;
    z-index: 1;
    padding-top: 175px;
    background:
      radial-gradient(circle at 12% 0%, rgba(104, 66, 244, 0.18), transparent 24%),
      radial-gradient(circle at 88% 12%, rgba(141, 117, 255, 0.12), transparent 22%),
      linear-gradient(180deg, #241a54 0%, #1a1341 42%, #120d2f 100%);
  }

  .ctpro-footer-main::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 10%, rgba(255,255,255,0.03), transparent 38%);
    pointer-events: none;
  }

  .ctpro-footer-top {
    position: relative;
    z-index: 1;
    padding: 0 0 40px;
  }

  .ctpro-footer-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }

  .ctpro-footer-col h3 {
    position: relative;
    margin: 0 0 22px;
    padding-bottom: 12px;
    color: #fff;
    font-size: 23px;
    font-weight: 700;
  }

  .ctpro-footer-col h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6842f4, #a792ff);
    box-shadow: 0 0 18px rgba(104, 66, 244, 0.30);
  }

  .ctpro-footer-links,
  .ctpro-footer-social {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .ctpro-footer-links li {
    /* margin-bottom: 16px; */
  }

  .ctpro-footer-links li:last-child {
    margin-bottom: 0;
  }

  .ctpro-footer-links a {
    display: inline-flex;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    line-height: 1.45;
    transition: color 0.25s ease, transform 0.25s ease;
  }

  .ctpro-footer-links a:hover {
    color: #ffffff;
    transform: translateX(4px);
  }

  /* =========================
     Footer bottom row
  ========================= */
  .ctpro-footer-bottom {
    position: relative;
    z-index: 1;
    padding: 20px 0 24px;
    background: rgba(10, 8, 27, 0.16);
  }

  .ctpro-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  .ctpro-footer-copy,
  .ctpro-footer-dev {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.6;
    flex: 1 1 0;
  }

  .ctpro-footer-copy {
    text-align: left;
  }

  .ctpro-footer-dev {
    text-align: right;
  }

  .ctpro-footer-dev a {
    color: #fff;
    font-weight: 600;
  }

  .ctpro-footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
  }

  .ctpro-footer-social a {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  }

  .ctpro-footer-social a:hover {
    transform: translateY(-4px);
    background: linear-gradient(135deg, #6842f4, #8f79ff);
    box-shadow: 0 16px 28px rgba(104, 66, 244, 0.24);
  }

  .ctpro-footer-social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }

  /* =========================
     Unique back to top
  ========================= */
  .ctpro-backtop {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, #6842f4 0%, #8b74ff 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 40px rgba(104, 66, 244, 0.30);
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.96);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }

  .ctpro-backtop::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 19px;
    background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
  }

  .ctpro-backtop::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 26px;
    background: radial-gradient(circle, rgba(104, 66, 244, 0.22) 0%, transparent 72%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .ctpro-backtop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  .ctpro-backtop:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px rgba(104, 66, 244, 0.36);
  }

  .ctpro-backtop:hover::after {
    opacity: 1;
  }

  .ctpro-backtop svg {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* =========================
     Responsive
  ========================= */
  @media (max-width: 1199px) {
    .ctpro-footer-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
    }

    .ctpro-footer-cta-card {
      grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
      gap: 22px;
    }
  }

  @media (max-width: 991px) {
    .ctpro-footer-cta-band {
      margin-bottom: -72px;
    }

    .ctpro-footer-cta-card {
      grid-template-columns: 1fr;
      gap: 22px;
      min-height: auto;
      padding: 28px 24px 30px;
      text-align: left;
    }

    .ctpro-footer-cta-copy h2,
    .ctpro-footer-cta-copy p {
      max-width: 100%;
    }

    .ctpro-footer-cta-action {
      justify-content: center;
    }

    .ctpro-footer-cta-btn {
      width: 100%;
      max-width: 100%;
    }

    .ctpro-footer-main {
      padding-top: 116px;
    }

    .ctpro-footer-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
    }
  }

  @media (max-width: 767px) {
    .ctpro-footer-links a
    {
        font-size:15px;
    }
    .ctpro-footer-shell {
      width: min(100% - 20px, 1170px);
    }

    .ctpro-footer-cta-band {
      /* margin-bottom: -50px; */
      margin-bottom: 0px;
    }

    .ctpro-footer-cta-card {
      padding: 22px 18px 24px;
      border-radius: 24px;
      gap: 18px;
    }

    .ctpro-footer-cta-card::before {
      width: 220px;
      height: 220px;
      top: -110px;
      right: -90px;
    }

    .ctpro-footer-cta-card::after {
      width: 150px;
      height: 150px;
      left: -70px;
      bottom: -70px;
    }

    .ctpro-footer-badge {
      font-size: 12px;
      margin-bottom: 14px;
    }

    .ctpro-footer-cta-copy h2 {
      font-size: 2.05rem;
      line-height: 1.08;
    }

    .ctpro-footer-cta-copy p {
      font-size: 14px;
      line-height: 1.72;
    }

    .ctpro-footer-points {
      gap: 8px;
    }

    .ctpro-footer-points li {
      width: 100%;
      justify-content: flex-start;
      white-space: normal;
      line-height: 1.35;
    }

    .ctpro-footer-cta-action {
      justify-content: center;
    }

    .ctpro-footer-cta-btn {
      min-height: 56px;
      border-radius: 14px;
    }

    .ctpro-footer-main {
      padding-top: 144px;
    }

    .ctpro-footer-grid {
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .ctpro-footer-col {
      text-align: center;
    }

    .ctpro-footer-col h3::after {
      left: 50%;
      transform: translateX(-50%);
    }

    .ctpro-footer-links li {
      text-align: center;
    }

    .ctpro-footer-links a {
      justify-content: center;
    }

    .ctpro-footer-bottom-inner {
      flex-direction: column;
      text-align: center;
    }

    .ctpro-footer-copy,
    .ctpro-footer-dev {
      text-align: center;
      width: 100%;
      flex: unset;
    }

    .ctpro-backtop {
      right: 14px;
      bottom: 14px;
      width: 52px;
      height: 52px;
      border-radius: 18px;
    }

    .ctpro-backtop::before {
      border-radius: 17px;
    }
  }

/*===================================================================================
    39. Footer CSS End
===================================================================================*/