/* ==========================================================================
   AI BARBER – AI Grooming & Style Advisor
   Main Stylesheet  |  Prefix: bab_
   --------------------------------------------------------------------------
   01. Design Tokens (CSS Variables)
   02. Base / Reset
   03. Typography Helpers
   04. Buttons
   05. Utilities & Section Heading
   06. Preloader
   07. Header / Navigation
   08. Hero
   09. AI Features Bento Grid
   10. Statistics
   11. About Studio
   12. Premium Services
   13. Trending Hairstyles (Masonry)
   14. AI Trend Prediction 2026
   15. AI Grooming Dashboard Preview
   16. Video Tutorials
   17. Team
   18. Testimonials
   19. Pricing
   20. Latest Articles (Blog)
   21. CTA Booking
   22. Footer
   23. Back To Top
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
    --bab_primary: #FF4034;
    --bab_secondary: #FF4034;
    --bab_dark: #0b0c10;
    --bab_dark_light: #0f1115;
    --bab_dark_card: #16171a;
    --bab_border: rgba(255, 255, 255, .08);
    --bab_white: #FFFFFF;
    --bab_text: #BFC5D2;
    --bab_gradient: linear-gradient(135deg, #ff4234ac, #ff42349b);

    /* Extended tokens */
    --bab_heading_font: 'Manrope', 'Outfit', sans-serif;
    --bab_body_font: 'Inter', sans-serif;
    --bab_radius_sm: 14px;
    --bab_radius: 20px;
    --bab_radius_lg: 28px;
    --bab_radius_xl: 36px;
    --bab_shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
    --bab_shadow_glow: 0 0 50px -10px rgba(255, 38, 0, 0.301);
    --bab_glass: rgba(255, 255, 255, .04);
    --bab_glass_strong: rgba(255, 255, 255, .07);
    --bab_ease: cubic-bezier(.22, 1, .36, 1);
    --bab_container: 1580px;
}

/* ==========================================================================
   02. BASE / RESET
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.bi-scissors::before {
    display: none !important;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* NOTE: do NOT set overflow-x here — any overflow value other than
       visible on html/body breaks position:sticky (the feature stacking).
       Horizontal overflow is contained per-section via overflow:hidden. */
    max-width: 100%;
}

body {
    font-family: var(--bab_body_font);
    background-color: var(--bab_dark);
    color: var(--bab_text);
    font-size: 16px;
    line-height: 1.7;
    max-width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color .3s var(--bab_ease);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

section {
    position: relative;
    overflow: hidden;
}

::selection {
    background: var(--bab_primary);
    color: #fff;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bab_dark);
}

::-webkit-scrollbar-thumb {
    background: #2a2f3a;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bab_primary);
}

/* ==========================================================================
   03. TYPOGRAPHY HELPERS
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--bab_heading_font);
    color: var(--bab_white);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.bab_h1 {
    font-size: clamp(2.6rem, 5.5vw, 4.4rem);
    font-weight: 800;
}

.bab_h2 {
    font-size: 30px;
    font-weight: 600;
}

.bab_h3 {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.bab_text_gradient {
    background: rgb(255 0 0 / 64%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bab_lead {
    font-size: 1.12rem;
    color: var(--bab_text);
    max-width: 560px;
}
@media(max-width: 576px){
    .bab_h2{
        font-size: 20px !important;
    }
}
/* ==========================================================================
   04. BUTTONS
   ========================================================================== */
.bab_btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    font-family: var(--bab_heading_font);
    font-weight: 600;
    font-size: .98rem;
    border-radius: 1px;
    overflow: hidden;
    transition: transform .35s var(--bab_ease), box-shadow .35s var(--bab_ease);
    white-space: nowrap;
}

.bab_btn i {
    font-size: 1.05rem;
    transition: transform .35s var(--bab_ease);
}

.bab_btn:hover i {
    transform: translateX(4px);
}

.bab_btn_primary {
    background: var(--bab_gradient);
    color: #fff;
    box-shadow: 0 12px 30px -10px rgba(255, 38, 0, 0.123);
}

.bab_btn_primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -10px rgba(255, 42, 0, 0.546);
    color: #fff;
}

.bab_btn_outline {
    background: var(--bab_glass);
    color: var(--bab_white);
    border: 1px solid var(--bab_border);
    backdrop-filter: blur(10px);
}

.bab_btn_outline:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 138, 0, .5);
    color: var(--bab_white);
    background: var(--bab_glass_strong);
}

/* Ripple effect span (added via jQuery) */
.bab_ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    transform: scale(0);
    animation: bab_ripple_anim .6s linear;
    pointer-events: none;
}

@keyframes bab_ripple_anim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ==========================================================================
   05. UTILITIES & SECTION HEADING
   ========================================================================== */
.bab_section {
    padding: 90px 0;
    /* contain glow/decoration overflow per-section so we don't need
       overflow-x on html/body (which would break the sticky stacking).
       #bab_features is .bab_section_sm, so it is NOT clipped here. */
    overflow-x: clip;
}

.bab_section_sm {
    padding: 80px 0;
}

.bab_container {
    max-width: var(--bab_container);
    margin: 0 auto;
    padding: 0 24px;
}

.bab_badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    font-family: var(--bab_heading_font);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bab_secondary);
    background: rgba(255, 138, 0, .08);
    border: 1px solid rgba(255, 138, 0, .22);
    border-radius: 50px;
}

.bab_badge i {
    font-size: .95rem;
}

.bab_section_head {
    max-width: 570px;
    margin: 0 auto 60px;
    text-align: center;
}

.bab_section_head .bab_badge {
    margin-bottom: 18px;
}

.bab_section_head h2 {
    margin-bottom: 16px;
}

.bab_section_head p {
    margin: 0 auto;
}

.bab_glass_card {
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius);
    backdrop-filter: blur(12px);
}

/* Decorative glow blobs */
.bab_glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}

.bab_glow_primary {
    background: rgba(255, 138, 0, .35);
}

.bab_glow_secondary {
    background: rgba(255, 179, 71, .22);
}

/* ==========================================================================
   06. PRELOADER
   ========================================================================== */
.bab_preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bab_dark);
    transition: opacity .6s ease, visibility .6s ease;
}

.bab_preloader.bab_hide {
    opacity: 0;
    visibility: hidden;
}

.bab_preloader_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}

/* spinning gradient ring with a scissor mark in the centre */
.bab_preloader_ring {
    position: relative;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: conic-gradient(var(--bab_primary), #FF4034, rgba(255, 138, 0, .05), var(--bab_primary));
    animation: bab_spin 1.1s linear infinite;
    display: grid;
    place-items: center;
}

.bab_preloader_ring::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--bab_dark);
}

.bab_preloader_scissor {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    color: var(--bab_primary);
    animation: bab_pre_pulse 1.1s ease-in-out infinite;
}

.bab_preloader_logo {
    font-family: var(--bab_heading_font);
    font-weight: 800;
    font-size: 1.7rem;
    color: #fff;
    letter-spacing: -.01em;
}

/* slim indeterminate progress bar */
.bab_preloader_bar {
    position: relative;
    width: 150px;
    height: 3px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.bab_preloader_bar span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    border-radius: 50px;
    background: var(--bab_gradient);
    animation: bab_pre_load 1.3s ease-in-out infinite;
}

@keyframes bab_spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes bab_pre_pulse {

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

    50% {
        transform: scale(.82);
        opacity: .65;
    }
}

@keyframes bab_pre_load {
    0% {
        left: -40%;
    }

    100% {
        left: 100%;
    }
}

/* ==========================================================================
   07. HEADER / NAVIGATION
   ========================================================================== */
.bab_header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 4px 0;
    transition: padding .4s var(--bab_ease), background .4s var(--bab_ease), box-shadow .4s var(--bab_ease);
    background: rgba(15, 17, 23, .85);
    backdrop-filter: blur(18px);
}

.bab_header.bab_sticky {
    padding: 4px 0;
    background: rgba(15, 17, 23, .85);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--bab_border);
    box-shadow: 0 10px 40px -15px rgba(0, 0, 0, .8);
}

.bab_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.bab_logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--bab_heading_font);
    font-weight: 800;
    font-size: 1.35rem;
    color: #fff;
    flex-shrink: 0;
}

.bab_logo_mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: var(--bab_gradient);
    border-radius: 12px;
    font-size: 1.2rem;
    box-shadow: var(--bab_shadow_glow);
}

.bab_logo span {
    color: var(--bab_primary);
}

.bab_menu {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
}

.bab_menu>li {
    position: relative;
}

.bab_menu>li>a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 16px;
    font-family: var(--bab_heading_font);
    font-weight: 500;
    font-size: .96rem;
    color: var(--bab_text);
    border-radius: 10px;
}

.bab_menu>li>a:hover,
.bab_menu>li.bab_active>a {
    color: var(--bab_white);
}

.bab_menu>li>a .bab_caret {
    font-size: .7rem;
    transition: transform .3s var(--bab_ease);
}

.bab_menu>li:hover>a .bab_caret {
    transform: rotate(180deg);
}

/* Dropdown */
.bab_dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    padding: 10px;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius_sm);
    box-shadow: var(--bab_shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .35s var(--bab_ease);
}

.bab_menu>li:hover>.bab_dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(10px);
}

.bab_dropdown li a {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .92rem;
    color: var(--bab_text);
    transition: all 0.3s ease-in-out;
}

.bab_dropdown li a:hover {
    color: #fff;
    background: var(--bab_glass);
    padding-left: 20px;
}

.bab_nav_actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.bab_nav_actions .bab_btn {
    padding: 12px 24px;
    font-size: .92rem;
}

/* Mobile toggler */
.bab_menu_toggle {
    display: none;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--bab_glass);
    border: 1px solid var(--bab_border);
    color: #fff;
    font-size: 1.3rem;
    align-items: center;
    justify-content: center;
}

/* Mobile off-canvas */
.bab_mobile_menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    z-index: 1100;
    background: var(--bab_dark_light);
    border-left: 1px solid var(--bab_border);
    padding: 28px 24px;
    overflow-y: auto;
    transition: right .45s var(--bab_ease);
}

.bab_mobile_nav {
    padding-left: 0;
    margin-left: 0;
}

.bab_mobile_menu.bab_open {
    left: 0;
}

.bab_mobile_overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease;
}

.bab_mobile_overlay.bab_open {
    opacity: 1;
    visibility: visible;
}

.bab_mobile_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}

.bab_mobile_close {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--bab_glass);
    border: 1px solid var(--bab_border);
    color: #fff;
    font-size: 1.2rem;
}

.bab_mobile_nav li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px;
    font-family: var(--bab_heading_font);
    font-weight: 500;
    color: var(--bab_text);
    border-bottom: 1px solid var(--bab_border);
}

.bab_mobile_nav li a:hover {
    color: #fff;
}

.bab_mobile_submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--bab_ease);
}

.bab_mobile_submenu.bab_open {
    max-height: 400px;
}

.bab_mobile_submenu li a {
    padding-left: 18px;
    font-size: .9rem;
    font-weight: 400;
}

.bab_mobile_menu .bab_btn {
    width: 100%;
    justify-content: center;
    margin-top: 24px;
}

/* ==========================================================================
   08. HERO
   ========================================================================== */
.bab_hero {
    position: relative;
    padding: 180px 0 110px;
    overflow: hidden;
}

.bab_hero_bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bab_hero_bg .bab_glow_primary {
    width: 620px;
    height: 620px;
    top: -180px;
    right: -120px;
}

.bab_hero_bg .bab_glow_secondary {
    width: 480px;
    height: 480px;
    bottom: -180px;
    left: -140px;
}

.bab_hero_grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.bab_hero_content .bab_badge {
    margin-bottom: 24px;
}

.bab_hero_content h1 {
    margin-bottom: 22px;
}

.bab_hero_content .bab_lead {
    margin-bottom: 36px;
}

.bab_hero_cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 44px;
}

.bab_hero_clients {
    display: grid;
    align-items: center;
    gap: 18px;
    grid-template-columns: 158px 1fr;
}

.bab_avatars {
    display: flex;
}

.bab_avatars img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid var(--bab_dark);
    object-fit: cover;
    margin-left: -14px;
}

.bab_avatars img:first-child {
    margin-left: 0;
}

.bab_clients_meta strong {
    display: block;
    color: #fff;
    font-family: var(--bab_heading_font);
    font-size: 1.05rem;
}

.bab_clients_meta span {
    font-size: .88rem;
}

.bab_clients_meta .bab_stars {
    color: var(--bab_primary);
}

/* Hero Visual */
.bab_hero_visual {
    position: relative;
    z-index: 2;
}

.bab_hero_image {
    position: relative;
    border-radius: var(--bab_radius_xl);
    overflow: hidden;
    border: 1px solid var(--bab_border);
    box-shadow: var(--bab_shadow);
}

.bab_hero_image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(15, 17, 23, .55));
}

.bab_hero_image img {
    width: 100%;
    aspect-ratio: 4 / 4.6;
    object-fit: cover;
}

/* Floating cards */
.bab_float_card {
    position: absolute;
    padding: 16px 18px;
    background: rgba(29, 33, 43, .82);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius_sm);
    backdrop-filter: blur(14px);
    box-shadow: var(--bab_shadow);
    z-index: 3;
}

.bab_float_analytics {
    top: 40px;
    left: -42px;
    width: 220px;
}

.bab_float_beard {
    bottom: 90px;
    right: -38px;
    width: 210px;
}

.bab_float_style {
    bottom: -26px;
    left: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bab_float_card .bab_fc_top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.bab_float_card .bab_fc_icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 138, 0, .15);
    color: var(--bab_primary);
    font-size: 1.05rem;
}

.bab_float_card .bab_fc_label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bab_float_card .bab_fc_value {
    font-family: var(--bab_heading_font);
    font-weight: 700;
    color: #fff;
    font-size: 1.25rem;
}

/* mini bar chart */
.bab_mini_bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 42px;
}

.bab_mini_bars span {
    flex: 1;
    background: var(--bab_gradient);
    border-radius: 4px 4px 0 0;
    opacity: .85;
}

.bab_progress_ring {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.bab_float_style .bab_fc_value {
    font-size: 1.4rem;
    line-height: 1;
}

.bab_float_style .bab_fc_label {
    margin-bottom: 2px;
}

/* ==========================================================================
   09. AI FEATURES BENTO GRID
   ========================================================================== */
.bab_bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.bab_bento_card {
    position: relative;
    padding: 32px;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius_lg);
    overflow: hidden;
    transition: transform .4s var(--bab_ease), border-color .4s var(--bab_ease);
}

.bab_bento_card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(400px circle at var(--bab_mx, 50%) var(--bab_my, 0%), rgba(255, 138, 0, .12), transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
}

.bab_bento_card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 138, 0, .35);
}

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

.bab_bento_card.bab_span2 {
    grid-column: span 2;
}

.bab_bento_icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 138, 0, .12);
    color: var(--bab_primary);
    font-size: 1.5rem;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
}

.bab_bento_card h3 {
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.bab_bento_card p {
    font-size: .96rem;
    position: relative;
    z-index: 1;
}

.bab_bento_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    position: relative;
    z-index: 1;
}

.bab_bento_tags span {
    padding: 6px 14px;
    font-size: .8rem;
    border-radius: 50px;
    background: var(--bab_glass);
    border: 1px solid var(--bab_border);
    color: var(--bab_text);
}

.bab_bento_card .bab_bento_link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-family: var(--bab_heading_font);
    font-weight: 600;
    color: var(--bab_primary);
    position: relative;
    z-index: 1;
}

.bab_bento_card .bab_bento_link i {
    transition: transform .3s var(--bab_ease);
}

.bab_bento_card .bab_bento_link:hover i {
    transform: translateX(5px);
}

/* feature card with visual */
.bab_bento_visual {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.bab_score_circle {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
}

.bab_bento_meta strong {
    display: block;
    font-family: var(--bab_heading_font);
    font-size: 1.8rem;
    color: #fff;
}

/* ==========================================================================
   10. STATISTICS
   ========================================================================== */
.bab_stats {
    position: relative;
}

.bab_stats_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.bab_stat_card {
    text-align: center;
    padding: 40px 24px;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius_lg);
    transition: transform .4s var(--bab_ease), border-color .4s var(--bab_ease);
}

.bab_stat_card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 138, 0, .35);
}

.bab_stat_icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 138, 0, .12);
    color: var(--bab_primary);
    font-size: 1.4rem;
}

.bab_stat_number {
    font-family: var(--bab_heading_font);
    font-weight: 800;
    font-size: 2.8rem;
    color: #fff;
    line-height: 1;
    margin-bottom: 8px;
}

.bab_stat_number .bab_stat_suffix {
    color: var(--bab_primary);
}

.bab_stat_label {
    font-family: var(--bab_heading_font);
    font-weight: 500;
    color: var(--bab_text);
}

/* ==========================================================================
   11. ABOUT STUDIO
   ========================================================================== */
.bab_about_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.bab_about_images {
    position: relative;
}

.bab_about_img_main {
    border-radius: var(--bab_radius_lg);
    overflow: hidden;
    border: 1px solid var(--bab_border);
    box-shadow: var(--bab_shadow);
}

.bab_about_img_main img {
    width: 100%;
    aspect-ratio: 4 / 4.3;
    object-fit: cover;
}

.bab_about_img_sub {
    position: absolute;
    bottom: -36px;
    right: -28px;
    width: 200px;
    border-radius: var(--bab_radius);
    overflow: hidden;
    border: 4px solid var(--bab_dark);
    box-shadow: var(--bab_shadow);
}

.bab_about_img_sub img {
    aspect-ratio: 1/1;
    object-fit: cover;
}

.bab_about_exp {
    position: absolute;
    top: -28px;
    left: -28px;
    padding: 22px 26px;
    background: var(--bab_gradient);
    border-radius: var(--bab_radius);
    box-shadow: var(--bab_shadow_glow);
    text-align: center;
}

.bab_about_exp strong {
    display: block;
    font-family: var(--bab_heading_font);
    font-weight: 800;
    font-size: 2.4rem;
    color: #fff;
    line-height: 1;
}

.bab_about_exp span {
    font-size: .82rem;
    color: rgba(255, 255, 255, .9);
    font-weight: 500;
}

.bab_about_content .bab_badge {
    margin-bottom: 20px;
}

.bab_about_content h2 {
    margin-bottom: 20px;
}

.bab_about_content>p {
    margin-bottom: 28px;
}

.bab_about_list {
    display: grid;
    gap: 16px;
    margin-bottom: 34px;
    margin-left: 0;
    padding-left: 0;
}

.bab_about_list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.bab_about_list li i {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 138, 0, .12);
    color: var(--bab_primary);
    font-size: .95rem;
    margin-top: 2px;
}

.bab_about_list li strong {
    display: block;
    color: #fff;
    font-family: var(--bab_heading_font);
}

/* ==========================================================================
   12. PREMIUM SERVICES
   ========================================================================== */
.bab_services_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bab_service_card {
    position: relative;
    padding: 36px 30px;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius_lg);
    overflow: hidden;
    transition: transform .4s var(--bab_ease), border-color .4s var(--bab_ease);
}

.bab_service_card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--bab_gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--bab_ease);
}

.bab_service_card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 138, 0, .3);
}

.bab_service_card:hover::after {
    transform: scaleX(1);
}

.bab_service_num {
    position: absolute;
    top: 26px;
    right: 30px;
    font-family: var(--bab_heading_font);
    font-weight: 800;
    font-size: 2.6rem;
    color: rgba(255, 255, 255, .05);
}

.bab_service_icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: var(--bab_gradient);
    color: #fff;
    font-size: 1.7rem;
    margin-bottom: 24px;
    box-shadow: 0 10px 24px -8px rgba(255, 138, 0, .5);
}

.bab_service_card h3 {
    margin-bottom: 12px;
}

.bab_service_card p {
    font-size: .95rem;
    margin-bottom: 20px;
}

.bab_service_price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid var(--bab_border);
}

.bab_service_price strong {
    font-family: var(--bab_heading_font);
    color: #fff;
    font-size: 1.3rem;
}

.bab_service_price strong small {
    font-size: .8rem;
    color: var(--bab_text);
    font-weight: 400;
}

.bab_service_price a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--bab_glass);
    border: 1px solid var(--bab_border);
    color: #fff;
    transition: all .3s var(--bab_ease);
}

.bab_service_price a:hover {
    background: var(--bab_gradient);
    transform: rotate(-45deg);
}

/* ==========================================================================
   13. TRENDING HAIRSTYLES (MASONRY)
   ========================================================================== */
.bab_filter_bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 44px;
}

.bab_filter_btn {
    padding: 11px 24px;
    font-family: var(--bab_heading_font);
    font-weight: 500;
    font-size: .92rem;
    color: var(--bab_text);
    background: var(--bab_glass);
    border: 1px solid var(--bab_border);
    border-radius: 50px;
    transition: all .3s var(--bab_ease);
}

.bab_filter_btn:hover,
.bab_filter_btn.bab_active {
    color: #fff;
    background: var(--bab_gradient);
    border-color: transparent;
}

.bab_gallery_grid {
    margin: 0 -8px;
}

/* Isotope column sizer – defines the masonry column width (one column). */
.bab_gallery_sizer {
    width: 25%;
}

.bab_gallery_item {
    width: 25%;
    padding: 8px;
}

.bab_gallery_inner {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--bab_border);
    background: var(--bab_dark_card);
    /* uniform tile height → grid always packs to a flat bottom edge */
    aspect-ratio: 4 / 5;
}

.bab_gallery_inner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .7s var(--bab_ease);
}

.bab_gallery_inner:hover img {
    transform: scale(1.08);
}

.bab_gallery_overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px;
    background: linear-gradient(180deg, transparent 40%, rgba(15, 17, 23, .9));
    opacity: 0;
    transition: opacity .4s var(--bab_ease);
}

.bab_gallery_inner:hover .bab_gallery_overlay {
    opacity: 1;
}

.bab_gallery_overlay span {
    font-size: .8rem;
    color: var(--bab_primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    transform: translateY(12px);
    transition: transform .4s var(--bab_ease);
}

.bab_gallery_overlay h4 {
    font-family: var(--bab_heading_font);
    color: #fff;
    font-size: 1.2rem;
    margin-top: 4px;
    transform: translateY(12px);
    transition: transform .4s .05s var(--bab_ease);
}

.bab_gallery_inner:hover .bab_gallery_overlay span,
.bab_gallery_inner:hover .bab_gallery_overlay h4 {
    transform: translateY(0);
}

.bab_gallery_zoom {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 138, 0, .9);
    color: #fff;
    font-size: 1.1rem;
    transform: scale(0);
    transition: transform .4s var(--bab_ease);
}

.bab_gallery_inner:hover .bab_gallery_zoom {
    transform: scale(1);
}

/* ==========================================================================
   14. AI TREND PREDICTION 2026
   ========================================================================== */
.bab_trend {
    background: var(--bab_dark_light);
}

.bab_trend_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bab_trend_card {
    position: relative;
    padding: 28px;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius_lg);
    overflow: hidden;
    transition: transform .4s var(--bab_ease), border-color .4s var(--bab_ease);
}

.bab_trend_card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 138, 0, .3);
}

.bab_trend_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.bab_viral_badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background: var(--bab_gradient);
    border-radius: 50px;
}

.bab_trend_rank {
    font-family: var(--bab_heading_font);
    font-weight: 800;
    font-size: 1.6rem;
    color: rgba(255, 255, 255, .12);
}

.bab_trend_card h3 {
    margin-bottom: 8px;
}

.bab_trend_card>p {
    font-size: .92rem;
    margin-bottom: 22px;
}

.bab_confidence {
    margin-bottom: 18px;
}

.bab_confidence_head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: .85rem;
}

.bab_confidence_head strong {
    color: var(--bab_primary);
    font-family: var(--bab_heading_font);
}

.bab_progress_track {
    height: 8px;
    background: var(--bab_glass);
    border-radius: 50px;
    overflow: hidden;
}

.bab_progress_fill {
    height: 100%;
    width: 0;
    background: var(--bab_gradient);
    border-radius: 50px;
    transition: width 1.4s var(--bab_ease);
}

.bab_trend_stats {
    display: flex;
    gap: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--bab_border);
}

.bab_trend_stats div span {
    font-size: .78rem;
    display: block;
}

.bab_trend_stats div strong {
    font-family: var(--bab_heading_font);
    color: #fff;
    font-size: 1.1rem;
}

/* ==========================================================================
   15. AI GROOMING DASHBOARD PREVIEW
   ========================================================================== */
.bab_dashboard {
    position: relative;
    overflow: hidden;
}

.bab_dash_panel {
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius_xl);
    padding: 28px;
    box-shadow: var(--bab_shadow);
}

.bab_dash_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 22px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--bab_border);
}

.bab_dash_head .bab_dash_user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bab_dash_user img {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: cover;
}

.bab_dash_user strong {
    display: block;
    color: #fff;
    font-family: var(--bab_heading_font);
}

.bab_dash_user span {
    font-size: .82rem;
}

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

.bab_dash_tabs span {
    padding: 8px 16px;
    font-size: .85rem;
    border-radius: 10px;
    background: var(--bab_glass);
    color: var(--bab_text);
}

.bab_dash_tabs span.bab_active {
    background: rgba(255, 138, 0, .15);
    color: var(--bab_primary);
}

.bab_dash_body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.bab_dash_widget {
    padding: 22px;
    background: var(--bab_dark_light);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius);
}

.bab_dash_widget.bab_w2 {
    grid-column: span 2;
}

.bab_widget_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bab_widget_top span {
    font-size: .85rem;
}

.bab_widget_top i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 138, 0, .12);
    color: var(--bab_primary);
}

.bab_widget_value {
    font-family: var(--bab_heading_font);
    font-weight: 700;
    font-size: 2rem;
    color: #fff;
    line-height: 1;
    margin-bottom: 6px;
}

.bab_widget_trend {
    font-size: .82rem;
    color: #4ade80;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* dashboard chart bars */
.bab_dash_chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 130px;
    margin-top: 20px;
}

.bab_dash_chart .bab_bar {
    flex: 1;
    background: var(--bab_glass);
    border-radius: 8px 8px 0 0;
    position: relative;
    overflow: hidden;
}

.bab_dash_chart .bab_bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--bab_h, 50%);
    background: var(--bab_gradient);
    border-radius: 8px 8px 0 0;
}

/* circular progress in widget */
.bab_widget_ring {
    display: flex;
    align-items: center;
    gap: 18px;
}

.bab_widget_ring svg {
    width: 92px;
    height: 92px;
}

.bab_ring_text {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--bab_heading_font);
    font-weight: 700;
    color: #fff;
    font-size: 1.2rem;
}

.bab_ring_wrap {
    position: relative;
    width: 92px;
    height: 92px;
    flex-shrink: 0;
}

/* ==========================================================================
   16. VIDEO TUTORIALS
   ========================================================================== */
.bab_video_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bab_video_card {
    position: relative;
    border-radius: var(--bab_radius_lg);
    overflow: hidden;
    border: 1px solid var(--bab_border);
}

.bab_video_card img {
    width: 100%;
    aspect-ratio: 16/11;
    object-fit: cover;
    transition: transform .7s var(--bab_ease);
}

.bab_video_card:hover img {
    transform: scale(1.07);
}

.bab_video_card .bab_video_mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 17, 23, .1), rgba(15, 17, 23, .85));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
}

.bab_video_play {
    align-self: center;
    margin: auto;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bab_gradient);
    color: #fff;
    font-size: 1.5rem;
    position: relative;
}

.bab_video_play::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(255, 138, 0, .5);
    animation: bab_pulse 2s ease-out infinite;
}

@keyframes bab_pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.bab_video_tag {
    align-self: flex-start;
    padding: 6px 14px;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    background: rgba(15, 17, 23, .6);
    border: 1px solid var(--bab_border);
    border-radius: 50px;
    backdrop-filter: blur(8px);
}

.bab_video_info h4 {
    font-family: var(--bab_heading_font);
    color: #fff;
    font-size: 1.15rem;
    margin-bottom: 6px;
}

.bab_video_info span {
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   17. TEAM
   ========================================================================== */
.bab_team_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.bab_team_card {
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius_lg);
    overflow: hidden;
    transition: transform .4s var(--bab_ease), border-color .4s var(--bab_ease);
}

.bab_team_card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 138, 0, .3);
}

.bab_team_photo {
    position: relative;
    overflow: hidden;
}

.bab_team_photo img {
    width: 100%;
    aspect-ratio: 1/1.1;
    object-fit: cover;
    transition: transform .7s var(--bab_ease);
}

.bab_team_card:hover .bab_team_photo img {
    transform: scale(1.07);
}

.bab_team_social {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: all .4s var(--bab_ease);
}

.bab_team_card:hover .bab_team_social {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.bab_team_social a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(29, 33, 43, .85);
    border: 1px solid var(--bab_border);
    color: #fff;
    backdrop-filter: blur(8px);
}

.bab_team_social a:hover {
    background: var(--bab_gradient);
}

.bab_team_info {
    padding: 22px;
    text-align: center;
}

.bab_team_info h4 {
    font-family: var(--bab_heading_font);
    color: #fff;
    font-size: 1.15rem;
}

.bab_team_info span {
    color: var(--bab_primary);
    font-size: .88rem;
    font-weight: 500;
}

.bab_team_skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 14px;
}

.bab_team_skills span {
    padding: 5px 12px;
    font-size: .76rem;
    color: var(--bab_text);
    background: var(--bab_glass);
    border: 1px solid var(--bab_border);
    border-radius: 50px;
}

/* ==========================================================================
   18. TESTIMONIALS
   ========================================================================== */
.bab_testi {
    /* background: var(--bab_dark_light); */
    overflow: hidden;
}

.bab_testi_slider {
    padding: 10px;
}

.bab_testi_card {
    padding: 34px;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius_lg);
    height: 350px;
    transition: transform .4s var(--bab_ease), border-color .4s var(--bab_ease);
}

.swiper-slide-active .bab_testi_card {
    border-color: rgba(255, 138, 0, .3);
}

.bab_testi_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.bab_testi_quote {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 138, 0, .12);
    color: var(--bab_primary);
    font-size: 1.4rem;
}

.bab_testi_stars {
    color: var(--bab_primary);
    font-size: 1rem;
}

.bab_testi_card p {
    color: var(--bab_text);
    font-size: 14px;
    margin-bottom: 26px;
}

.bab_testi_author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 22px;
    border-top: 1px solid var(--bab_border);
}

.bab_testi_author img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
}

.bab_testi_author strong {
    display: block;
    color: #fff;
    font-family: var(--bab_heading_font);
}

.bab_testi_author span {
    font-size: .85rem;
}

.bab_testi_nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}

.bab_testi_nav button {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--bab_glass);
    border: 1px solid var(--bab_border);
    color: #fff;
    font-size: 1.1rem;
    transition: all .3s var(--bab_ease);
}

.bab_testi_nav button:hover {
    background: var(--bab_gradient);
    border-color: transparent;
}

/* ==========================================================================
   19. PRICING
   ========================================================================== */
.bab_pricing_toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 50px;
}

.bab_pricing_toggle span {
    font-family: var(--bab_heading_font);
    font-weight: 500;
    color: var(--bab_text);
}

.bab_pricing_toggle span.bab_active {
    color: #fff;
}

.bab_toggle_switch {
    width: 58px;
    height: 30px;
    border-radius: 50px;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    position: relative;
    cursor: pointer;
}

.bab_toggle_switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bab_gradient);
    transition: left .35s var(--bab_ease);
}

.bab_toggle_switch.bab_yearly::after {
    left: 31px;
}

.bab_save_badge {
    padding: 4px 12px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--bab_primary);
    background: rgba(255, 138, 0, .12);
    border-radius: 50px;
}

.bab_pricing_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: center;
}

.bab_price_card {
    position: relative;
    padding: 40px 34px;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius_lg);
    transition: transform .4s var(--bab_ease), border-color .4s var(--bab_ease);
}

.bab_price_card:hover {
    transform: translateY(-8px);
}

.bab_price_card.bab_popular {
    border-color: rgba(255, 138, 0, .5);
    background: linear-gradient(180deg, rgba(255, 138, 0, .06), var(--bab_dark_card));
    box-shadow: var(--bab_shadow_glow);
}

.bab_popular_badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 20px;
    font-family: var(--bab_heading_font);
    font-weight: 600;
    font-size: .8rem;
    color: #fff;
    background: var(--bab_gradient);
    border-radius: 50px;
    box-shadow: var(--bab_shadow_glow);
    animation: bab_badge_pulse 2.5s ease-in-out infinite;
}

@keyframes bab_badge_pulse {

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

    50% {
        transform: translateX(-50%) scale(1.06);
    }
}

.bab_price_plan {
    font-family: var(--bab_heading_font);
    font-weight: 600;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 6px;
}

.bab_price_desc {
    font-size: .9rem;
    margin-bottom: 26px;
}

.bab_price_amount {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin-bottom: 30px;
}

.bab_price_amount .bab_currency {
    font-family: var(--bab_heading_font);
    font-weight: 600;
    color: #fff;
    font-size: 1.4rem;
}

.bab_price_amount .bab_value {
    font-family: var(--bab_heading_font);
    font-weight: 800;
    color: #fff;
    font-size: 3.4rem;
    line-height: 1;
}

.bab_price_amount .bab_period {
    color: var(--bab_text);
    font-size: .95rem;
    margin-bottom: 8px;
}

.bab_price_features {
    display: grid;
    gap: 14px;
    margin-bottom: 32px;
}

.bab_price_features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .94rem;
}

.bab_price_features li i {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 138, 0, .12);
    color: var(--bab_primary);
    font-size: .7rem;
}

.bab_price_features li.bab_off {
    color: rgba(191, 197, 210, .4);
}

.bab_price_features li.bab_off i {
    background: var(--bab_glass);
    color: rgba(191, 197, 210, .4);
}

/* ==========================================================================
   24. AI FEATURE SECTIONS (6 unique split layouts)
   ========================================================================== */
.bab_feat {
    position: relative;
    overflow: hidden;
}

/* uniform page background so every feature box sits on the same tone */
.bab_feat_alt {
    background: transparent;
}

/* tighter vertical rhythm — the box provides its own padding */
.bab_feat {
    padding: 28px 0;
}

.bab_feat:first-of-type {
    padding-top: 8px;
}

.bab_feat .bab_glow {
    z-index: 0;
}

/* each feature is wrapped in its own rounded card */
.bab_feat_split {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius_xl);
    padding: 56px;
    box-shadow: var(--bab_shadow);
    margin-bottom: 40px;
}

.bab_feat_split.bab_reverse .bab_feat_media {
    order: -1;
}

/* ---- sticky stacking: each feature box sticks under the header and the
   next box scrolls up over it. Uses position:sticky so the section keeps
   its normal height — the section below never overlaps. ---- */
#bab_features .bab_feat_split {
    position: sticky;
    margin-bottom: 60px;
    /* crisp top edge + shadow gap so each stacked card reads clearly */
    border-top: 1px solid rgba(255, 255, 255, .12);
    box-shadow:
        0 -18px 44px -22px rgba(0, 0, 0, .85),
        0 34px 70px -28px rgba(0, 0, 0, .8);
}

#bab_features .bab_feat_split:nth-child(2) {
    top: 76px;
}

#bab_features .bab_feat_split:nth-child(3) {
    top: 118px;
}

#bab_features .bab_feat_split:nth-child(4) {
    top: 140px;
}

#bab_features .bab_feat_split:nth-child(5) {
    top: 162px;
}

#bab_features .bab_feat_split:nth-child(6) {
    top: 184px;
}

#bab_features .bab_feat_split:nth-child(7) {
    top: 206px;
}

#bab_features .bab_feat_split:last-child {
    margin-bottom: 0;
}

/* ---- content side ---- */
.bab_feat_chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 8px 16px 8px 8px;
    border-radius: 50px;
    background: var(--bab_glass);
    border: 1px solid var(--bab_border);
    font-family: var(--bab_heading_font);
    font-weight: 600;
    font-size: .82rem;
    color: var(--bab_text);
}

.bab_feat_chip b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bab_gradient);
    color: #fff;
    font-size: .78rem;
}

.bab_feat_content h2 {
    margin-bottom: 18px;
}

.bab_feat_content>p {
    margin-bottom: 26px;
    max-width: 520px;
}

.bab_feat_list {
    display: grid;
    gap: 16px;
    margin-bottom: 34px;
    margin-left: 0;
    padding-left: 0;
}

.bab_feat_list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.bab_feat_list li i {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(255, 138, 0, .12);
    color: var(--bab_primary);
    font-size: 1.05rem;
}

.bab_feat_list li strong {
    display: block;
    font-size: 14px;
    color: #fff;
    font-family: var(--bab_heading_font);
    font-weight: 500;
    margin-bottom: 2px;
}

.bab_feat_list li span {
    font-size: 13px;
}

/* ---- media / mockup panel ---- */
.bab_feat_media {
    position: relative;
}

.bab_mock {
    position: relative;
    z-index: 1;
    padding: 26px;
    background: var(--bab_dark);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius_lg);
    box-shadow: var(--bab_shadow);
}

.bab_mock_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.bab_mock_head h4 {
    font-family: var(--bab_heading_font);
    color: #fff;
    font-size: 1.05rem;
}

.bab_mock_pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--bab_primary);
    background: rgba(255, 138, 0, .12);
    border-radius: 50px;
}

.bab_mock_dots {
    display: flex;
    gap: 6px;
}

.bab_mock_dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bab_border);
}

.bab_mock_dots span:first-child {
    background: #FF4034;
}

/* floating mini badge on a mockup */
.bab_mock_badge {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(29, 33, 43, .9);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius_sm);
    backdrop-filter: blur(14px);
    box-shadow: var(--bab_shadow);
    animation: bab_float_y 3.2s ease-in-out infinite;
}

@keyframes bab_float_y {

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

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

.bab_mock_badge .bab_mb_icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--bab_gradient);
    color: #fff;
    font-size: 1.1rem;
}

.bab_mock_badge .bab_mb_val {
    font-family: var(--bab_heading_font);
    font-weight: 700;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
}

.bab_mock_badge .bab_mb_lbl {
    font-size: .74rem;
}

/* 10. AI GROOMING ASSISTANT CHAT UI */

.bab_chat {
    max-width: 760px;
    margin: 0 auto;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius_xl);
    overflow: hidden;
    box-shadow: var(--bab_shadow);
}

.bab_chat_head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--bab_border);
    background: var(--bab_dark_light);
}

.bab_chat_avatar {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--bab_gradient);
    color: #fff;
    font-size: 1.3rem;
}

.bab_chat_head strong {
    display: block;
    color: #fff;
    font-family: var(--bab_heading_font);
}

.bab_chat_head span {
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bab_chat_head span::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .2);
}

.bab_chat_body {
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-height: 460px;
    overflow-y: auto;
}

.bab_chat_msg {
    display: flex;
    gap: 12px;
    max-width: 80%;
}

.bab_chat_msg .bab_msg_av {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 1rem;
}

.bab_chat_msg.bab_ai .bab_msg_av {
    background: rgba(255, 138, 0, .15);
    color: var(--bab_primary);
}

.bab_chat_msg.bab_user {
    margin-left: auto;
    flex-direction: row-reverse;
}

.bab_chat_msg.bab_user .bab_msg_av {
    background: var(--bab_glass);
    color: #fff;
}

.bab_msg_bubble {
    padding: 14px 18px;
    border-radius: 16px;
    font-size: .94rem;
    line-height: 1.6;
}

.bab_chat_msg.bab_ai .bab_msg_bubble {
    background: var(--bab_dark_light);
    border: 1px solid var(--bab_border);
    border-top-left-radius: 4px;
    color: var(--bab_text);
}

.bab_chat_msg.bab_user .bab_msg_bubble {
    background: var(--bab_gradient);
    border-top-right-radius: 4px;
    color: #fff;
}

/* typing indicator */
.bab_typing {
    display: flex;
    gap: 5px;
    padding: 16px 18px;
}

.bab_typing span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bab_primary);
    animation: bab_typing 1.2s infinite ease-in-out;
}

.bab_typing span:nth-child(2) {
    animation-delay: .2s;
}

.bab_typing span:nth-child(3) {
    animation-delay: .4s;
}

@keyframes bab_typing {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: .4;
    }

    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

.bab_chat_foot {
    display: flex;
    gap: 12px;
    padding: 18px 24px;
    border-top: 1px solid var(--bab_border);
    background: var(--bab_dark_light);
}

.bab_chat_foot input {
    flex: 1;
    padding: 13px 18px;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: 50px;
    color: #fff;
    font-family: inherit;
    outline: none;
}

.bab_chat_foot input:focus {
    border-color: rgba(255, 138, 0, .5);
}

.bab_chat_send {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bab_gradient);
    color: #fff;
    font-size: 1.2rem;
    transition: transform .3s var(--bab_ease);
}

.bab_chat_send:hover {
    transform: scale(1.08);
}

.bab_chat_suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.bab_chat_suggest button {
    padding: 8px 14px;
    font-size: .82rem;
    border-radius: 50px;
    background: var(--bab_glass);
    border: 1px solid var(--bab_border);
    color: var(--bab_text);
    transition: all .3s var(--bab_ease);
}

.bab_chat_suggest button:hover {
    color: #fff;
    border-color: rgba(255, 138, 0, .4);
}

/* ---------- 1. Recommender mockup ---------- */
.bab_reco_row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: var(--bab_radius_sm);
    background: var(--bab_dark_light);
    border: 1px solid var(--bab_border);
    margin-bottom: 12px;
    transition: border-color .3s var(--bab_ease), transform .3s var(--bab_ease);
}

.bab_feat_alt .bab_reco_row {
    background: var(--bab_dark_card);
}

.bab_reco_row:hover {
    transform: translateX(4px);
    border-color: rgba(255, 138, 0, .35);
}

.bab_reco_row.bab_top {
    border-color: rgba(255, 138, 0, .5);
    box-shadow: 0 0 24px -10px rgba(255, 138, 0, .5);
}

.bab_reco_row img {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.bab_reco_info {
    flex: 1;
    min-width: 0;
}

.bab_reco_info strong {
    display: block;
    color: #fff;
    font-family: var(--bab_heading_font);
    font-size: .96rem;
}

.bab_reco_info span {
    font-size: .8rem;
}

.bab_reco_match {
    text-align: right;
    flex-shrink: 0;
}

.bab_reco_match b {
    font-family: var(--bab_heading_font);
    color: var(--bab_primary);
    font-size: 1.05rem;
}

.bab_reco_match .bab_progress_track {
    width: 70px;
    height: 6px;
    margin-top: 5px;
}

/* ---------- 2. Face scan mockup ---------- */
.bab_scan_wrap {
    position: relative;
    border-radius: var(--bab_radius_lg);
    overflow: hidden;
}

.bab_scan_wrap img {
    width: 100%;
    aspect-ratio: 4/4.2;
    object-fit: cover;
    display: block;
}

.bab_scan_wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(15, 17, 23, .85));
}

.bab_scan_grid {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image:
        linear-gradient(rgba(255, 138, 0, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 138, 0, .12) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: .5;
}

.bab_scan_line {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bab_primary), transparent);
    box-shadow: 0 0 18px 3px rgba(255, 138, 0, .6);
    animation: bab_scan 3s ease-in-out infinite;
}

@keyframes bab_scan {

    0%,
    100% {
        top: 4%;
    }

    50% {
        top: 92%;
    }
}

.bab_scan_dot {
    position: absolute;
    z-index: 4;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bab_primary);
    background: rgba(255, 138, 0, .25);
    box-shadow: 0 0 0 4px rgba(255, 138, 0, .12);
}

.bab_scan_result {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: rgba(15, 17, 23, .7);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius_sm);
    backdrop-filter: blur(10px);
}

.bab_scan_result strong {
    display: block;
    color: #fff;
    font-family: var(--bab_heading_font);
}

.bab_scan_result span {
    font-size: .8rem;
}

.bab_scan_result .bab_scan_conf {
    color: var(--bab_primary);
    font-family: var(--bab_heading_font);
    font-weight: 700;
    font-size: 1.3rem;
}

/* ---------- 3. Beard finder mockup ---------- */
.bab_beard_row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--bab_radius_sm);
    background: var(--bab_dark_light);
    border: 1px solid var(--bab_border);
    margin-bottom: 12px;
}

.bab_feat_alt .bab_beard_row {
    background: var(--bab_dark_card);
}

.bab_beard_row .bab_beard_ico {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 138, 0, .12);
    color: var(--bab_primary);
    font-size: 1.2rem;
}

.bab_beard_row.bab_top .bab_beard_ico {
    background: var(--bab_gradient);
    color: #fff;
}

.bab_beard_data {
    flex: 1;
}

.bab_beard_data .bab_beard_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.bab_beard_data strong {
    color: #fff;
    font-family: var(--bab_heading_font);
    font-size: .95rem;
}

.bab_beard_data b {
    color: var(--bab_primary);
    font-family: var(--bab_heading_font);
}

.bab_beard_best {
    margin-left: 8px;
    padding: 3px 10px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background: var(--bab_gradient);
    border-radius: 50px;
}

/* ---------- 4. Match score mockup ---------- */
.bab_scoremock_grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 30px;
    align-items: center;
}

.bab_scoremock_ring {
    position: relative;
    width: 168px;
    height: 168px;
}

.bab_scoremock_ring svg {
    width: 168px;
    height: 168px;
}

.bab_scoremock_ring .bab_ring_text {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--bab_heading_font);
    font-weight: 800;
    color: #fff;
    font-size: 2.4rem;
}

.bab_compat_row {
    margin-bottom: 18px;
}

.bab_compat_row:last-child {
    margin-bottom: 0;
}

.bab_compat_top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
}

.bab_compat_top span {
    font-size: .88rem;
    color: #fff;
    font-family: var(--bab_heading_font);
    font-weight: 500;
}

.bab_compat_top b {
    color: var(--bab_primary);
    font-family: var(--bab_heading_font);
}

/* ---------- 5. Trend radar mockup ---------- */
.bab_radar_top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 18px;
}

.bab_radar_top .bab_radar_big {
    font-family: var(--bab_heading_font);
    font-weight: 800;
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
}

.bab_radar_top .bab_radar_big small {
    font-size: 1rem;
    color: #4ade80;
    font-weight: 600;
}

.bab_radar_chart {
    position: relative;
    height: 130px;
    margin-bottom: 22px;
}

.bab_radar_chart svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.bab_radar_tags {
    display: grid;
    gap: 10px;
}

.bab_radar_tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-radius: var(--bab_radius_sm);
    background: var(--bab_dark_light);
    border: 1px solid var(--bab_border);
}

.bab_feat_alt .bab_radar_tag {
    background: var(--bab_dark_card);
}

.bab_radar_tag .bab_rt_name {
    color: #fff;
    font-family: var(--bab_heading_font);
    font-weight: 500;
    font-size: .9rem;
}

.bab_radar_tag .bab_rt_meta {
    font-size: .8rem;
}

/* ---------- 6. Color advisor mockup ---------- */
.bab_skin_bar {
    height: 16px;
    border-radius: 50px;
    margin: 8px 0 6px;
    background: linear-gradient(90deg, #f1c9a5, #e0a878, #c68642, #8d5524);
    position: relative;
}

.bab_skin_bar {
    cursor: pointer;
}

.bab_skin_marker {
    position: absolute;
    top: 50%;
    left: 62%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--bab_primary);
    box-shadow: 0 0 0 4px rgba(255, 138, 0, .2);
    cursor: grab;
    transition: left .1s ease;
}

.bab_skin_marker:active {
    cursor: grabbing;
}

.bab_skin_labels {
    display: flex;
    justify-content: space-between;
    font-size: .76rem;
    margin-bottom: 22px;
}

.bab_swatch_grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}

.bab_swatch {
    aspect-ratio: 1/1;
    border-radius: 14px;
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    transition: transform .3s var(--bab_ease), border-color .3s var(--bab_ease);
}

.bab_swatch:hover {
    transform: translateY(-4px) scale(1.05);
}

.bab_swatch.bab_active {
    border-color: #fff;
}

.bab_swatch.bab_active::after {
    content: '\2713';
    /* ✓ standard unicode checkmark */
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.bab_color_pick {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--bab_radius_sm);
    background: var(--bab_dark_light);
    border: 1px solid var(--bab_border);
}

.bab_feat_alt .bab_color_pick {
    background: var(--bab_dark_card);
}

.bab_color_pick .bab_cp_dot {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
}

.bab_color_pick strong {
    display: block;
    color: #fff;
    font-family: var(--bab_heading_font);
}

.bab_color_pick span {
    font-size: .82rem;
}

.bab_color_pick b {
    margin-left: auto;
    color: var(--bab_primary);
    font-family: var(--bab_heading_font);
}

/* ---- interactive controls inside mockups ---- */
.bab_mock_tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bab_mock_run {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--bab_glass);
    border: 1px solid var(--bab_border);
    color: var(--bab_primary);
    font-size: 1rem;
    transition: transform .5s var(--bab_ease), background .3s var(--bab_ease), color .3s var(--bab_ease), border-color .3s var(--bab_ease);
}

.bab_mock_run:hover {
    background: var(--bab_gradient);
    color: #fff;
    border-color: transparent;
    transform: rotate(180deg);
}

.bab_mock_run.bab_spin i {
    animation: bab_spin .8s linear;
}

.bab_reco_row,
.bab_beard_row {
    cursor: pointer;
}

.bab_scan_wrap {
    cursor: pointer;
}

.bab_swatch {
    cursor: pointer;
}

/* ==========================================================================
   25. SECTION DIVIDERS (auto-injected between homepage sections)
   ========================================================================== */
.bab_divider {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    z-index: 9;
}

.bab_divider::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
}

.bab_divider_mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    color: var(--bab_primary);
    font-size: 1.05rem;
    box-shadow: 0 0 26px -6px rgba(255, 138, 0, .45);
    transition: transform .6s var(--bab_ease), color .3s var(--bab_ease);
}

.bab_divider:hover .bab_divider_mark {
    transform: translate(-50%, -50%) rotate(180deg);
    color: var(--bab_secondary);
}

.bab_divider_mark::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid rgb(255 39 0 / 32%);
}

/* ==========================================================================
   26. HERO FLOATING BARBER ICONS
   ========================================================================== */
.bab_hero_icons {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.bab_hero_icon {
    position: absolute;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: rgba(29, 33, 43, .55);
    border: 1px solid var(--bab_border);
    color: var(--bab_primary);
    font-size: 1.5rem;
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 36px -12px rgba(0, 0, 0, .6);
    animation: bab_float_y 5s ease-in-out infinite;
}

.bab_hero_icon::after {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 138, 0, .35), transparent 70%);
    z-index: -1;
    opacity: .7;
}

.bab_hero_icon.bab_hi_grad {
    background: var(--bab_gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--bab_shadow_glow);
}

.bab_hero_icon.bab_hi_sm {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    border-radius: 16px;
}

.bab_hero_icon.bab_hi_lg {
    width: 76px;
    height: 76px;
    font-size: 1.8rem;
    border-radius: 24px;
}

/* ==========================================================================
   27. FACE ANALYZER — UPLOAD & COMPARE SLIDER
   ========================================================================== */
.bab_cmp {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 4.2;
    border-radius: var(--bab_radius_lg);
    overflow: hidden;
    border: 1px solid var(--bab_border);
    cursor: ew-resize;
    user-select: none;
}

.bab_cmp_layer {
    position: absolute;
    inset: 0;
}

.bab_cmp_layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bab_cmp_after {
    z-index: 1;
}

.bab_cmp_before {
    z-index: 2;
    clip-path: inset(0 50% 0 0);
}

.bab_cmp_handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background: var(--bab_primary);
    z-index: 4;
    transform: translateX(-50%);
}

.bab_cmp_handle::after {
    content: '\2194';
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bab_gradient);
    color: #fff;
    font-size: 1.15rem;
    box-shadow: var(--bab_shadow_glow);
}

.bab_cmp_label {
    position: absolute;
    top: 16px;
    z-index: 5;
    padding: 6px 14px;
    font-size: .76rem;
    font-weight: 600;
    color: #fff;
    background: rgba(15, 17, 23, .65);
    border: 1px solid var(--bab_border);
    border-radius: 50px;
    backdrop-filter: blur(8px);
}

.bab_cmp_before_lbl {
    left: 16px;
}

.bab_cmp_after_lbl {
    right: 16px;
}

.bab_cmp_upload {
    cursor: pointer;
}

.bab_cmp_upload input {
    display: none;
}

/* ==========================================================================
   28. HEADING SCROLL REVEAL (GSAP-driven, homepage section heads)
   --------------------------------------------------------------------------
   NOTE: the hide is applied by JS (gsap.set) — NOT via CSS — so that if the
   script ever fails the headings stay visible instead of disappearing.
   ========================================================================== */
.bab_head_anim>* {
    will-change: transform, opacity;
}

/* ==========================================================================
   29. CENTERED HERO + BACKGROUND IMAGE + ANIMATED GRADIENT
   ========================================================================== */
.bab_hero_center {
    min-height: 100vh;
    display: flex;
    align-items: center;
    text-align: center;
    padding: 150px 0 120px;
}

.bab_hero_bg_img {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bab_hero_bg_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bab_hero_overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at 50% 32%, rgba(15, 17, 23, .42), rgba(15, 17, 23, .86) 72%),
        linear-gradient(180deg, rgba(15, 17, 23, .72) 0%, rgba(15, 17, 23, .80) 55%, var(--bab_dark) 100%);
}

.bab_hero_center .bab_hero_bg {
    z-index: 1;
}

.bab_hero_center .bab_hero_icons {
    z-index: 2;
}

.bab_hero_center .bab_container {
    position: relative;
    z-index: 3;
}

.bab_hero_center_inner {
    max-width: 880px;
    margin: 0 auto;
}

.bab_hero_center_inner .bab_lead {
    margin-left: auto;
    margin-right: auto;
}

.bab_hero_center .bab_hero_cta {
    justify-content: center;
}

.bab_hero_center .bab_hero_clients {
    justify-content: center;
}

/* ==========================================================================
   29b. SPLIT HERO (content left + barber visual right)
   ========================================================================== */
.bab_hero_split {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 220px 0 220px;
}

/* wider hero container to match the reference */
.bab_hero_split .bab_container {
    max-width: 1580px;
    padding: 0 40px;
    width: 100%;
}

.bab_hero_split .bab_hero_bg_img img {
    /* object-position: center top; */
    /* transform: scale(1.12); */
    transform-origin: top center;
    object-position: bottom center;
}

/* bold condensed uppercase headline (matches reference) */
.bab_hero_split .bab_h1 {
    font-family: 'Anton', var(--bab_heading_font);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 75px;
    line-height: 1.2;
    letter-spacing: .5px;
    margin-bottom: 26px;
}

.bab_hero_split .bab_h1 .bab_text_gradient {
    display: inline-block;
}

.bab_hero_split .bab_hero_overlay {
    background:
        radial-gradient(ellipse at 72% 38%, rgba(255, 138, 0, .14), transparent 55%),
        linear-gradient(90deg, var(--bab_dark) 6%, rgba(15, 17, 23, .82) 46%, rgba(15, 17, 23, .55) 100%),
        linear-gradient(180deg, rgba(15, 17, 23, .55) 0%, rgba(15, 17, 23, .35) 55%, rgba(15, 17, 23, .80) 88%, var(--bab_dark) 100%);
}

.bab_hero_split .bab_hero_bg {
    z-index: 1;
}

.bab_hero_split .bab_container {
    position: relative;
    z-index: 3;
}

.bab_hero_split_grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 40px;
    align-items: center;
}

/* ---- Left content tweaks ---- */
.bab_hero_split .bab_hero_content {
    text-align: left;
}

.bab_hero_split .bab_hero_content .bab_lead {
    max-width: 560px;
}

.bab_hero_split .bab_hero_cta {
    align-items: center;
    margin-bottom: 40px;
}

/* play button + meta */
.bab_hero_play {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #fff;
}

.bab_play_btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 1.4rem;
    color: var(--bab_dark);
    background: var(--bab_gradient);
    box-shadow: 0 0 0 0 rgba(255, 138, 0, .5);
    animation: bab_play_pulse 2.2s ease-out infinite;
    transition: transform .3s var(--bab_ease);
}

.bab_hero_play:hover .bab_play_btn {
    transform: scale(1.08);
}

.bab_play_meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.bab_play_meta strong {
    font-family: var(--bab_heading_font);
    font-size: 1.05rem;
}

.bab_play_meta small {
    font-size: .82rem;
    color: var(--bab_text);
}

@keyframes bab_play_pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 138, 0, .45);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(255, 138, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 138, 0, 0);
    }
}

/* social proof row */
.bab_hero_proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
    padding: 18px 22px;
    background: rgba(29, 33, 43, .55);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius);
    backdrop-filter: blur(12px);
    max-width: 650px;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
}

.bab_hero_split .bab_avatars img,
.bab_hero_split .bab_avatar_count {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--bab_dark_card);
    margin-left: -14px;
}

.bab_hero_split .bab_avatars img:first-child {
    margin-left: 0;
}

.bab_avatar_count {
    display: grid;
    place-items: center;
    background: var(--bab_gradient);
    color: var(--bab_dark);
    font-family: var(--bab_heading_font);
    font-weight: 700;
    font-size: .82rem;
}

.bab_hero_review {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 26px;
    border-left: 1px solid var(--bab_border);
}

.bab_google_mark {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.bab_google_mark svg {
    display: block;
}

.bab_review_meta strong {
    display: block;
    color: #fff;
    font-family: var(--bab_heading_font);
    font-size: 1.2rem;
}

.bab_review_meta strong small {
    font-size: .82rem;
    color: var(--bab_text);
    font-weight: 400;
}

.bab_review_meta .bab_stars {
    color: var(--bab_primary);
    font-size: .82rem;
    letter-spacing: 2px;
}

/* ---- Right visual ---- */
.bab_hero_visual {
    position: relative;
    z-index: 2;
}

.bab_hero_figure {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 580px;
}

/* solid orange disc behind the barber */
.bab_hero_circle {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #E8920F 0%, #C77A0A 62%, rgba(199, 122, 10, .85) 78%, transparent 86%);
}

/* thin outline ring arcing around the figure */
.bab_hero_ring {
    position: absolute;
    bottom: -3%;
    left: 50%;
    transform: translateX(-50%);
    width: 520px;
    height: 520px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .14);
}

.bab_hero_figure img {
    position: relative;
    z-index: 2;
    width: auto;
    max-width: 100%;
    max-height: 640px;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55));
}

/* dotted decorations */
.bab_hero_dots {
    position: absolute;
    width: 110px;
    height: 80px;
    background-image: radial-gradient(rgba(255, 255, 255, .28) 2px, transparent 2.4px);
    background-size: 18px 18px;
    opacity: .7;
    pointer-events: none;
    z-index: 1;
}

.bab_dots_tr {
    top: 6%;
    right: 0;
}

.bab_dots_bl {
    bottom: 10%;
    left: 4%;
    width: 90px;
    height: 70px;
}

/* curved bottom divider — overlaps the section below */
.bab_hero_split {
    position: relative;
    z-index: 2;
}

.bab_hero_curve {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 5;
    line-height: 0;
    pointer-events: none;
}

.bab_hero_curve svg {
    width: 100%;
    height: 96px;
    display: block;
}

/* pull the AI Capabilities section up so it tucks under the curve.
   (no z-index here: the hero is positioned above it already, and a stacking
   context would let the GSAP-pinned cards bleed over the next section) */
#bab_features {
    position: relative;
    margin-top: -70px;
    padding-top: 130px;
    overflow: unset;
}

/* floating stat cards */
.bab_stat_float {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(20, 23, 31, .72);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius);
    backdrop-filter: blur(14px);
    box-shadow: var(--bab_shadow);
    animation: bab_float 5s ease-in-out infinite;
}

.bab_sf_icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 1.15rem;
    color: var(--bab_primary);
    background: rgba(255, 138, 0, .14);
}

.bab_stat_float strong {
    display: block;
    color: #fff;
    font-family: var(--bab_heading_font);
    font-size: 1.5rem;
    line-height: 1;
}

.bab_stat_float span {
    font-size: .82rem;
    color: var(--bab_text);
}

.bab_sf_1 {
    top: 12%;
    right: 0;
    animation-delay: 0s;
}

.bab_sf_2 {
    top: 46%;
    right: -4%;
    animation-delay: .9s;
}

.bab_sf_3 {
    bottom: 10%;
    right: 4%;
    animation-delay: 1.6s;
}

@keyframes bab_float {

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

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

/* scroll-down indicator */
.bab_hero_scroll {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: var(--bab_heading_font);
    font-size: .72rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--bab_text);
}

.bab_hero_scroll:hover {
    color: var(--bab_primary);
}

.bab_hero_scroll::after {
    content: '';
    width: 1px;
    height: 46px;
    background: linear-gradient(var(--bab_primary), transparent);
    animation: bab_scrolldown 1.8s ease-in-out infinite;
}

@keyframes bab_scrolldown {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }

    45% {
        transform: scaleY(1);
        transform-origin: top;
    }

    55% {
        transform: scaleY(1);
        transform-origin: bottom;
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

/* animated colour-shifting gradient heading */
.bab_grad_anim {
    background: linear-gradient(90deg, #FF4034, #FF4034, #f1efee, #FF4034, #FF4034);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: bab_grad_shift 6s linear infinite;
}

@keyframes bab_grad_shift {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 250% 50%;
    }
}

/* ==========================================================================
   30. HOW IT WORKS · VIRTUAL TRY-ON · BEFORE/AFTER · FAQ
   ========================================================================== */

/* ---- How It Works timeline ---- */
.bab_timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    position: relative;
}

.bab_timeline::before {
    content: '';
    position: absolute;
    top: 92px;
    left: 13%;
    right: 13%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 138, 0, .5), transparent);
    z-index: 0;
}

.bab_step {
    position: relative;
    z-index: 1;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius);
    padding: 36px 26px 30px;
    text-align: center;
    transition: transform .35s var(--bab_ease), border-color .35s var(--bab_ease);
}

.bab_step:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 55, 0, 0.304);
}

.bab_step_num {
    position: absolute;
    top: 14px;
    right: 20px;
    font-family: var(--bab_heading_font);
    font-size: 2.4rem;
    font-weight: 800;
    color: rgba(255, 255, 255, .06);
    line-height: 1;
}

.bab_step_icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    font-size: 1.8rem;
    color: #fff;
    background: #faf5f538;
    box-shadow: var(--bab_shadow_glow);
}

.bab_step h3 {
    margin-bottom: 10px;
    font-size: 1.25rem;
}

.bab_step p {
    font-size: .94rem;
}

/* ============================================================
   Virtual Try-On (cloned dashboard)
============================================================ */
.bab_tryon_grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 50px;
    align-items: start;
}

/* ---- Left column ---- */
.bab_tryon_content {
    padding-top: 14px;
    min-width: 0;
}

.bab_tryon_content .bab_badge {
    margin-bottom: 22px;
}

.bab_tryon_title {
    font-family: var(--bab_font_head, 'Outfit', sans-serif);
    font-weight: 800;
    line-height: 1.04;
    font-size: clamp(2.2rem, 3.4vw, 3.5rem);
    margin-bottom: 18px;
}

.bab_tryon_lead {
    margin-bottom: 30px;
    max-width: 460px;
    color: var(--bab_muted, #9aa3b2);
}

.bab_tryon_actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.bab_tryon_actions .bab_btn_primary {
    padding: 15px 26px;
}

.bab_tryon_upload {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 22px;
    border-radius: 14px;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    color: #fff;
    cursor: pointer;
    transition: border-color .3s var(--bab_ease), transform .3s var(--bab_ease);
}

.bab_tryon_upload:hover {
    border-color: var(--bab_primary);
    transform: translateY(-2px);
}

.bab_tryon_upico {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: rgba(255, 138, 0, .12);
    color: var(--bab_primary);
    font-size: 1.1rem;
}

.bab_tryon_uptxt {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
    font-size: .82rem;
    color: var(--bab_muted, #9aa3b2);
}

.bab_tryon_uptxt strong {
    color: #fff;
    font-size: .96rem;
}

.bab_tryon_trust {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: 16px;
    max-width: 380px;
}

.bab_tryon_avatars {
    display: flex;
}

.bab_tryon_avatars img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bab_dark_card);
    margin-left: -12px;
}

.bab_tryon_avatars img:first-child {
    margin-left: 0;
}

.bab_tryon_trust_txt {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.bab_tryon_trust_txt strong {
    font-size: 1.05rem;
    color: var(--bab_primary);
}

.bab_tryon_trust_txt strong span {
    color: #fff;
}

.bab_tryon_trust_txt>span {
    font-size: .82rem;
    color: var(--bab_muted, #9aa3b2);
}

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

.bab_tryon_features li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    transition: border-color .3s var(--bab_ease), transform .3s var(--bab_ease);
}

.bab_tryon_features li:hover {
    border-color: rgba(255, 138, 0, .45);
    transform: translateX(4px);
}

.bab_tryon_fic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    background: rgba(255, 138, 0, .12);
    color: var(--bab_primary);
}

.bab_tryon_features li div {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.bab_tryon_features li strong {
    font-size: .98rem;
}

.bab_tryon_features li span {
    font-size: .84rem;
    color: var(--bab_muted, #9aa3b2);
}

/* ---- Right column window ---- */
.bab_tryon_visual {
    position: relative;
    min-width: 0;
}

.bab_tryon_window {
    position: relative;
    background: linear-gradient(160deg, rgba(29, 33, 43, .92), rgba(15, 17, 23, .96));
    border: 1px solid var(--bab_border);
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
}

/* preview */
.bab_tryon_preview {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: radial-gradient(circle at 50% 45%, #2a2118, #0c0e13 70%);
    border: 1px solid rgba(255, 138, 0, .25);
}

.bab_tryon_rings {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 360px;
    height: 360px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(circle, transparent 30%, rgba(255, 138, 0, .06) 31%, transparent 33%),
        radial-gradient(circle, transparent 45%, rgba(255, 138, 0, .08) 46%, transparent 48%),
        radial-gradient(circle, transparent 60%, rgba(255, 138, 0, .05) 61%, transparent 63%);
    animation: bab_tryspin 18s linear infinite;
}

@keyframes bab_tryspin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.bab_tryon_ba {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.bab_tryon_ba img {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: auto;
    max-width: none;
    transform: translateX(-50%);
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}

.bab_tryon_before {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: inset(0 50% 0 0);
}

.bab_tryon_before img {
    filter: grayscale(.9) brightness(.72) contrast(1.05);
}

.bab_tryon_divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    z-index: 4;
    background: rgba(255, 255, 255, .85);
    transform: translateX(-50%);
}

.bab_tryon_handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    grid-auto-flow: column;
    place-items: center;
    gap: 2px;
    background: var(--bab_dark);
    border: 2px solid #fff;
    color: #fff;
    font-size: .7rem;
    cursor: ew-resize;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}

.bab_tryon_lbl {
    position: absolute;
    top: 14px;
    z-index: 5;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: .76rem;
    font-weight: 600;
}

.bab_tryon_lbl_before {
    left: 14px;
    background: rgba(15, 17, 23, .8);
    border: 1px solid var(--bab_border);
    color: #fff;
    backdrop-filter: blur(8px);
}

.bab_tryon_lbl_after {
    right: 14px;
    background: var(--bab_gradient);
    color: #fff;
    box-shadow: var(--bab_shadow_glow);
}

/* floating analysis cards */
.bab_tryon_acards {
    position: absolute;
    left: 14px;
    top: 52px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bab_tryon_acard {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 13px;
    min-width: 132px;
    background: rgba(18, 21, 28, .82);
    backdrop-filter: blur(10px);
    border: 1px solid var(--bab_border);
}

.bab_tryon_aic {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: .9rem;
    background: rgba(255, 138, 0, .14);
    color: var(--bab_primary);
}

.bab_tryon_aring {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: .64rem;
    font-weight: 700;
    color: #fff;
    background: conic-gradient(#34d399 0 96%, rgba(255, 255, 255, .12) 0);
    box-shadow: inset 0 0 0 3px rgba(18, 21, 28, .9);
}

.bab_tryon_acard div {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.bab_tryon_acard span {
    font-size: .68rem;
    color: var(--bab_muted, #9aa3b2);
}

.bab_tryon_acard strong {
    font-size: .92rem;
    color: #fff;
}

.bab_tryon_green {
    color: #34d399 !important;
}

/* right metrics */
.bab_tryon_metrics {
    position: absolute;
    right: 14px;
    top: 52px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 200px;
}

.bab_tryon_metric {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border-radius: 12px;
    background: rgba(18, 21, 28, .82);
    backdrop-filter: blur(10px);
    border: 1px solid var(--bab_border);
}

.bab_tryon_mic {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: .8rem;
    background: rgba(255, 138, 0, .14);
    color: var(--bab_primary);
}

.bab_tryon_mbar {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.bab_tryon_mbar span {
    font-size: .72rem;
    color: #dfe3ea;
}

.bab_tryon_mtrack {
    display: block;
    height: 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}

.bab_tryon_mfill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 5px;
    background: var(--bab_gradient);
    transition: width 1.3s cubic-bezier(.2, .8, .2, 1);
}

.bab_tryon_metric b {
    font-size: .78rem;
    color: var(--bab_primary);
    flex-shrink: 0;
}

/* controls */
.bab_tryon_ctrls {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 5;
    display: flex;
    gap: 8px;
}

.bab_tryon_hd {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: .74rem;
    color: #fff;
    background: rgba(18, 21, 28, .82);
    backdrop-filter: blur(10px);
    border: 1px solid var(--bab_border);
    cursor: pointer;
}

.bab_tryon_switch {
    width: 28px;
    height: 16px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .18);
    position: relative;
    transition: background .3s;
}

.bab_tryon_switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: left .25s var(--bab_ease);
}

.bab_tryon_hd.bab_active .bab_tryon_switch {
    background: var(--bab_primary);
}

.bab_tryon_hd.bab_active .bab_tryon_switch::after {
    left: 14px;
}

.bab_tryon_full {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: .8rem;
    color: #fff;
    cursor: pointer;
    background: rgba(18, 21, 28, .82);
    backdrop-filter: blur(10px);
    border: 1px solid var(--bab_border);
    transition: border-color .3s, color .3s;
}

.bab_tryon_full:hover {
    border-color: var(--bab_primary);
    color: var(--bab_primary);
}

/* tabs */
.bab_tryon_tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.bab_tryon_tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 10px;
    border-radius: 13px;
    font-size: .9rem;
    font-weight: 600;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    color: var(--bab_muted, #9aa3b2);
    cursor: pointer;
    transition: all .3s var(--bab_ease);
}

.bab_tryon_tab i {
    font-size: 1rem;
}

.bab_tryon_tab:hover {
    color: #fff;
    border-color: rgba(255, 138, 0, .4);
}

.bab_tryon_tab.bab_active {
    color: var(--bab_primary);
    background: rgba(255, 138, 0, .1);
    border-color: var(--bab_primary);
    box-shadow: 0 0 22px -6px rgba(255, 138, 0, .55);
}

/* panels / carousel */
.bab_tryon_panels {
    margin-top: 14px;
    min-width: 0;
}

.bab_tryon_panel {
    display: none;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bab_tryon_panel.bab_active {
    display: flex;
}

.bab_tryon_track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    flex: 1;
    min-width: 0;
    padding: 4px 2px 10px;
    scrollbar-width: none;
}

.bab_tryon_track::-webkit-scrollbar {
    display: none;
}

.bab_tryon_card {
    position: relative;
    flex: 0 0 92px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
}

.bab_tryon_cimg {
    display: block;
    height: 100px;
    border-radius: 13px;
    overflow: hidden;
    border: 2px solid var(--bab_border);
    margin-bottom: 7px;
    transition: border-color .3s var(--bab_ease), box-shadow .3s var(--bab_ease);
}

.bab_tryon_cimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bab_tryon_card:hover .bab_tryon_cimg {
    border-color: rgba(255, 138, 0, .5);
}

.bab_tryon_cname {
    font-size: .76rem;
    color: var(--bab_muted, #9aa3b2);
    transition: color .3s;
}

.bab_tryon_card.bab_active .bab_tryon_cimg {
    border-color: var(--bab_primary);
    box-shadow: 0 0 18px -4px rgba(255, 138, 0, .7);
}

.bab_tryon_card.bab_active .bab_tryon_cname {
    color: var(--bab_primary);
    font-weight: 600;
}

.bab_tryon_card.bab_active .bab_tryon_cimg::after {
    content: "\F26E";
    font-family: "bootstrap-icons";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .68rem;
    color: #fff;
    background: var(--bab_primary);
}

.bab_tryon_arrow {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .85rem;
    color: #fff;
    cursor: pointer;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    transition: border-color .3s, color .3s, background .3s;
}

.bab_tryon_arrow:hover {
    border-color: var(--bab_primary);
    color: var(--bab_primary);
}

/* colour swatches */
.bab_tryon_swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    padding: 8px 0;
    width: 100%;
}

.bab_tryon_sw {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: center;
}

.bab_tryon_swc {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 8px;
    border: 2px solid var(--bab_border);
    position: relative;
    transition: box-shadow .3s var(--bab_ease), border-color .3s var(--bab_ease);
}

.bab_tryon_swn {
    font-size: .78rem;
    color: var(--bab_muted, #9aa3b2);
}

.bab_tryon_sw:hover .bab_tryon_swc {
    border-color: rgba(255, 138, 0, .6);
}

.bab_tryon_sw.bab_active .bab_tryon_swc {
    border-color: var(--bab_primary);
    box-shadow: 0 0 0 4px rgba(255, 138, 0, .25);
}

.bab_tryon_sw.bab_active .bab_tryon_swc::after {
    content: "\F26E";
    font-family: "bootstrap-icons";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .72rem;
    color: #fff;
    background: var(--bab_primary);
}

.bab_tryon_sw.bab_active .bab_tryon_swn {
    color: var(--bab_primary);
    font-weight: 600;
}

/* benefits strip (full width) */
.bab_tryon_benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 32px;
    padding: 22px 26px;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: 22px;
}

.bab_tryon_benefit {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bab_tryon_benefit+.bab_tryon_benefit {
    border-left: 1px solid var(--bab_border);
    padding-left: 14px;
}

.bab_tryon_bic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    background: rgba(255, 138, 0, .12);
    color: var(--bab_primary);
}

.bab_tryon_benefit div {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.bab_tryon_benefit strong {
    font-size: .92rem;
    color: var(--bab_primary);
}

.bab_tryon_benefit span {
    font-size: .78rem;
    color: var(--bab_muted, #9aa3b2);
}

/* ---- Before & After slider ---- */
.bab_ba_slider {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: var(--bab_radius_lg);
    overflow: hidden;
    border: 1px solid var(--bab_border);
    box-shadow: var(--bab_shadow);
    cursor: ew-resize;
    user-select: none;
    aspect-ratio: 16 / 9;
}

.bab_ba_slider img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.bab_ba_before {
    position: absolute;
    inset: 0;
    clip-path: inset(0 50% 0 0);
    z-index: 2;
}

.bab_ba_before img {
    filter: grayscale(.85) brightness(.78) contrast(.95);
}

.bab_ba_lbl {
    position: absolute;
    bottom: 18px;
    z-index: 3;
    padding: 6px 16px;
    border-radius: 50px;
    font-family: var(--bab_heading_font);
    font-size: .8rem;
    font-weight: 600;
    background: rgba(15, 17, 23, .72);
    backdrop-filter: blur(8px);
    border: 1px solid var(--bab_border);
    color: #fff;
}

.bab_ba_lbl_before {
    left: 18px;
}

.bab_ba_lbl_after {
    right: 18px;
    color: var(--bab_primary);
}

.bab_ba_handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    background: var(--bab_primary);
    z-index: 4;
}

.bab_ba_handle i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bab_gradient);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: var(--bab_shadow_glow);
}

/* ---- FAQ accordion ---- */
.bab_accordion {
    max-width: 1160px !important;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.bab_acc_item {
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: var(--bab_radius);
    overflow: hidden;
    transition: border-color .3s var(--bab_ease);
}

.bab_acc_item.bab_open {
    border-color: rgba(255, 138, 0, .4);
}

.bab_acc_head {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--bab_heading_font);
    font-weight: 600;
    font-size: 1.08rem;
    color: #fff;
}

.bab_acc_icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 138, 0, .12);
    color: var(--bab_primary);
    transition: transform .35s var(--bab_ease), background .35s var(--bab_ease), color .35s var(--bab_ease);
}

.bab_acc_item.bab_open .bab_acc_icon {
    transform: rotate(135deg);
    background: var(--bab_gradient);
    color: #fff;
}

.bab_acc_body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--bab_ease);
}

.bab_acc_inner {
    padding: 0 26px 24px;
}

.bab_acc_inner p {
    color: var(--bab_text);
    margin: 0;
}

.bab_price_card .bab_btn {
    width: 100%;
    justify-content: center;
}

/* ==========================================================================
   20. LATEST ARTICLES (BLOG)
   ========================================================================== */
.bab_blog_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.bab_blog_card {
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: 5px;
    overflow: hidden;
    transition: transform .4s var(--bab_ease), border-color .4s var(--bab_ease);
}

.bab_blog_card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 138, 0, .3);
}

.bab_blog_thumb {
    position: relative;
    overflow: hidden;
}

.bab_blog_thumb img {
    width: 100%;
    height: 250px;
    aspect-ratio: 16/10;
    object-fit: cover;
    transition: transform .7s var(--bab_ease);
}

.bab_blog_card:hover .bab_blog_thumb img {
    transform: scale(1.07);
}

.bab_blog_cat {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 6px 14px;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    background: var(--bab_gradient);
    border-radius: 50px;
}

.bab_blog_body {
    padding: 18px;
    text-align: center;
}

.bab_blog_meta {
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
    font-size: .82rem;
}

.bab_blog_meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bab_blog_meta i {
    color: var(--bab_primary);
}

.bab_blog_body h3 {
    font-size: 1.25rem;
    margin-bottom: 14px;
    transition: color .3s var(--bab_ease);
}

.bab_blog_card:hover .bab_blog_body h3 {
    color: var(--bab_primary);
}

.bab_blog_body p {
    font-size: .94rem;
    margin-bottom: 20px;
}

.bab_blog_foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid var(--bab_border);
}

.bab_blog_author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bab_blog_author img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.bab_blog_author strong {
    color: #fff;
    font-size: .88rem;
    font-family: var(--bab_heading_font);
}

.bab_blog_foot .bab_blog_read {
    color: var(--bab_primary);
    font-family: var(--bab_heading_font);
    font-weight: 600;
    font-size: .88rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bab_blog_read i {
    transition: transform .3s var(--bab_ease);
}

.bab_blog_read:hover i {
    transform: translateX(4px);
}

/* ==========================================================================
   21. CTA BOOKING
   ========================================================================== */
.bab_cta {
    position: relative;
}

.bab_cta_inner {
    position: relative;
    padding: 80px 60px;
    background: var(--bab_gradient);
    border-radius: var(--bab_radius_xl);
    overflow: hidden;
    text-align: center;
}

.bab_cta_inner::before,
.bab_cta_inner::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}

.bab_cta_inner::before {
    width: 360px;
    height: 360px;
    top: -160px;
    left: -100px;
}

.bab_cta_inner::after {
    width: 300px;
    height: 300px;
    bottom: -160px;
    right: -80px;
}

.bab_cta_shape {
    position: absolute;
    color: rgba(255, 255, 255, .14);
    font-size: 2.4rem;
    z-index: 1;
}

.bab_cta_content {
    position: relative;
    z-index: 2;
}

.bab_cta_content .bab_badge {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
    margin-bottom: 22px;
}

.bab_cta_content h2 {
    color: #fff;
    margin-bottom: 18px;
}

.bab_cta_content p {
    color: rgba(255, 255, 255, .92);
    max-width: 560px;
    margin: 0 auto 36px;
}

.bab_cta_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.bab_cta .bab_btn_primary {
    background: var(--bab_dark);
    color: #fff;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5);
}

.bab_cta .bab_btn_primary:hover {
    background: var(--bab_dark_card);
}

.bab_cta .bab_btn_outline {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

/* ==========================================================================
   22. FOOTER
   ========================================================================== */
.bab_footer {
    position: relative;
    padding: 90px 0 0;
    background: var(--bab_dark_light);
    border-top: 1px solid var(--bab_border);
    overflow: hidden;
}

.bab_footer_grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: 40px;
    padding-bottom: 60px;
}

.bab_footer_about .bab_logo {
    margin-bottom: 22px;
}

.bab_footer_about p {
    font-size: .95rem;
    margin-bottom: 24px;
    max-width: 320px;
}

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

.bab_footer_social a {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--bab_glass);
    border: 1px solid var(--bab_border);
    color: #fff;
    transition: all .3s var(--bab_ease);
}

.bab_footer_social a:hover {
    background: var(--bab_gradient);
    transform: translateY(-3px);
    border-color: transparent;
}

.bab_footer_col h5 {
    font-family: var(--bab_heading_font);
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 22px;
}

.bab_footer_col ul {
    display: grid;
    gap: 12px;
    margin-left: 0;
    padding-left: 0;
}

.bab_footer_col ul a {
    font-size: .94rem;
    color: var(--bab_text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .3s var(--bab_ease);
}

.bab_footer_col ul a:hover {
    color: var(--bab_primary);
    padding-left: 6px;
}

.bab_footer_news p {
    font-size: .94rem;
    margin-bottom: 18px;
}

.bab_news_form {
    position: relative;
    margin-bottom: 16px;
}

.bab_news_form input {
    width: 100%;
    padding: 15px 56px 15px 18px;
    background: var(--bab_dark_card);
    border: 1px solid var(--bab_border);
    border-radius: 50px;
    color: #fff;
    font-family: inherit;
    font-size: .92rem;
    outline: none;
    transition: border-color .3s ease;
}

.bab_news_form input:focus {
    border-color: rgba(255, 138, 0, .5);
}

.bab_news_form input::placeholder {
    color: rgba(191, 197, 210, .55);
}

.bab_news_form button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bab_gradient);
    color: #fff;
    font-size: 1.1rem;
    transition: transform .3s var(--bab_ease);
}

.bab_news_form button:hover {
    transform: scale(1.08);
}

.bab_footer_news small {
    font-size: .8rem;
    color: rgba(191, 197, 210, .6);
}

.bab_footer_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 26px 0;
    border-top: 1px solid var(--bab_border);
}

.bab_footer_bottom p {
    font-size: .9rem;
}

.bab_footer_bottom p a {
    color: var(--bab_primary);
}

.bab_footer_links {
    display: flex;
    gap: 24px;
}

.bab_footer_links a {
    font-size: .9rem;
}

.bab_footer_links a:hover {
    color: var(--bab_primary);
}

/* ==========================================================================
   23. BACK TO TOP
   ========================================================================== */
.bab_back_top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 52px;
    height: 52px;
    z-index: 900;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--bab_gradient);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: var(--bab_shadow_glow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all .4s var(--bab_ease);
}

.bab_back_top.bab_show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bab_back_top:hover {
    transform: translateY(-4px);
}

/* AOS-free fallback reveal (used by jQuery bab_reveal) */
.bab_reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s var(--bab_ease), transform .8s var(--bab_ease);
}

.bab_reveal.bab_in {
    opacity: 1;
    transform: translateY(0);
}