/* START — Clickin - Homepage Styles */


/* END — Clickin - Homepage Styles */
/* START — HERO SECTION CSS */


/* START — DOTTED BORDER "CURRENT" ANIMATION */

@keyframes dotted-current-y {
    from { background-position-y: 0; }
    to { background-position-y: 6px; }
}

@keyframes dotted-current-x {
    from { background-position-x: 0; }
    to { background-position-x: 6px; }
}


/* END — DOTTED BORDER "CURRENT" ANIMATION */
/* START — HERO BLUR-IN ANIMATION */

.technical-grid-box {
    opacity: 0;
    animation: heroSmoothBlur 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: opacity, filter, transform;
}

@keyframes heroSmoothBlur {
    0% { opacity: 0; filter: blur(24px); transform: scale(0.95); }
    100% { opacity: 1; filter: none; transform: none; }
}

/* START — STEP-BY-STEP REVEAL INSIDE THE HERO */

.hero-title,
.hero-description,
.hero-cta-group {
    animation: heroSmoothBlur 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: opacity, filter, transform;
}

.hero-title {
    animation-delay: 0s;
}

.hero-description {
    animation-delay: 0.1s;
}

.hero-cta-group {
    animation-delay: 0.2s;
}


/* END — STEP-BY-STEP REVEAL INSIDE THE HERO */
/* END — HERO BLUR-IN ANIMATION */


/* START — HERO SECTION */

.hero-section {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 60px;
    padding-bottom: 50px;
    background-color: var(--bg-primary, #FFFFFF);
}

[data-theme="dark"] .hero-section {
    background-color: var(--bg-primary, #000000);
}


/* END — HERO SECTION */
/* START — HERO CONTAINER */

.hero-container {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 22px;
    padding-right: 22px;
}

@media (max-width: 768px) {
    .hero-container {
        padding-left: 15px;
        padding-right: 15px;
    }
}


/* END — HERO CONTAINER */
/* START — TECHNICAL GRID BOX */

.technical-grid-box {
    position: relative;
    width: calc(100% - 200px);
    margin-left: 100px;
    margin-right: 100px;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

@media (max-width: 1024px) {
    .technical-grid-box {
        width: calc(100% - 100px);
        margin-left: 50px;
        margin-right: 50px;
    }

    .hero-section {
        min-height: auto;
        padding-top: 40px;
        padding-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .technical-grid-box {
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        grid-template-columns: 1fr 6fr 1fr;
    }
}


/* END — TECHNICAL GRID BOX */
/* START — OUTER LEFT / RIGHT LINES (technical-grid-box) */

.technical-grid-box::before,
.technical-grid-box::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    pointer-events: none;
    z-index: 5;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.22) 0,
        rgba(0, 0, 0, 0.22) 2px,
        transparent 2px,
        transparent 6px
    );
    background-repeat: no-repeat;
    background-size: 1px 100%;
}

.technical-grid-box::before {
    left: -1px;
    animation: dotted-current-y 2.5s linear infinite;
}

.technical-grid-box::after {
    right: -1px;
    animation: dotted-current-y 2.5s linear infinite reverse;
}

[data-theme="dark"] .technical-grid-box::before,
[data-theme="dark"] .technical-grid-box::after {
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.22) 0,
        rgba(255, 255, 255, 0.22) 2px,
        transparent 2px,
        transparent 6px
    );
}


/* END — OUTER LEFT / RIGHT LINES (technical-grid-box) */
/* START — BASE GRID CELL */

.grid-cell {
    position: relative;
    min-height: 45px;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.22) 0,
        rgba(0, 0, 0, 0.22) 2px,
        transparent 2px,
        transparent 6px
    );
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 1px 100%;
    animation: dotted-current-y 2.5s linear infinite;
}


/* END — BASE GRID CELL */
/* START — SPANNING CELLS */

.grid-cell-span {
    position: relative;
    grid-column: 1 / span 3;
}


/* END — SPANNING CELLS */
/* START — RIGHTMOST COLUMN CELLS */

.technical-grid-box > .top-cell:nth-child(3),
.technical-grid-box > .button-cell:nth-child(8),
.technical-grid-box > .bottom-cell:nth-child(11) {
    background-image: none;
}


/* END — RIGHTMOST COLUMN CELLS */
/* START — HORIZONTAL GRID BORDERS */

.grid-cell::after,
.grid-cell-span::after {
    content: '';
    position: absolute;
    left: -90px;
    width: calc(100% + 180px);
    bottom: 0;
    height: 1px;
    background-image: repeating-linear-gradient(
        to right,
        rgba(0, 0, 0, 0.22) 0,
        rgba(0, 0, 0, 0.22) 2px,
        transparent 2px,
        transparent 6px
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    animation: dotted-current-x 2.5s linear infinite;
    pointer-events: none;
    box-sizing: border-box;
}


/* END — HORIZONTAL GRID BORDERS */
/* START — MULTI-CELL ROW SEAM FIX (top row + button row) */

.technical-grid-box > .top-cell:nth-child(1)::after,
.technical-grid-box > .button-cell:nth-child(6)::after {
    left: -90px;
    width: calc(100% + 90px);
}

.technical-grid-box > .top-cell:nth-child(2)::after,
.technical-grid-box > .button-cell:nth-child(7)::after {
    left: 0;
    width: 100%;
}

.technical-grid-box > .top-cell:nth-child(3)::after,
.technical-grid-box > .button-cell:nth-child(8)::after {
    left: 0;
    width: calc(100% + 90px);
}


/* END — MULTI-CELL ROW SEAM FIX (top row + button row) */
/* START — TOP ROW */

.top-cell {
    height: 65px;
}


/* END — TOP ROW */
/* START — HEADING */

.heading-cell {
    padding: 14px 20px;
    text-align: center;
}

.hero-content-box {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}


/* END — HEADING */
/* START — DESCRIPTION */

.desc-cell {
    padding: 28px 40px;
    text-align: center;
    position: relative;
}

.desc-cell::after {
    content: '';
    position: absolute;
    left: -90px;
    width: calc(100% + 180px);
    bottom: 0;
    height: 1px;
    background-image: repeating-linear-gradient(
        to right,
        rgba(0, 0, 0, 0.22) 0,
        rgba(0, 0, 0, 0.22) 2px,
        transparent 2px,
        transparent 6px
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    animation: dotted-current-x 2.5s linear infinite;
    z-index: 3;
    box-sizing: border-box;
}


/* END — DESCRIPTION */
/* START — BUTTON ROW */

.button-cell {
    padding: 45px 10px;
}

.center-cell {
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* END — BUTTON ROW */
/* START — BOTTOM ROW */

.bottom-cell {
    height: 55px;
}

.bottom-cell::after {
    display: none;
}


/* END — BOTTOM ROW */
/* START — DARK THEME GRID */

[data-theme="dark"] .grid-cell {
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.22) 0,
        rgba(255, 255, 255, 0.22) 2px,
        transparent 2px,
        transparent 6px
    );
}

[data-theme="dark"] .grid-cell::after,
[data-theme="dark"] .grid-cell-span::after {
    background-image: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.22) 0,
        rgba(255, 255, 255, 0.22) 2px,
        transparent 2px,
        transparent 6px
    );
}

[data-theme="dark"] .desc-cell::after {
    background-image: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.22) 0,
        rgba(255, 255, 255, 0.22) 2px,
        transparent 2px,
        transparent 6px
    );
}


/* END — DARK THEME GRID */
/* START — HERO TYPOGRAPHY */

.hero-title {
    font-family: var(
        --font-primary,
        system-ui,
        -apple-system,
        sans-serif
    );

    font-size: clamp(33px, 5.8vw, 50px);
    font-weight: 650;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--text-heading, #111111);
    margin: 0;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

[data-theme="dark"] .hero-title {
    color: var(--text-heading, #FFFFFF);
}


/* END — HERO TYPOGRAPHY */
/* START — HERO DESCRIPTION TYPOGRAPHY */

.hero-description {
    font-family: var(
        --font-primary,
        system-ui,
        -apple-system,
        sans-serif
    );

    font-size: 15px;
    line-height: 1.6;
    color: var(--text-body, #555555);
    margin: 0 auto;
    max-width: 650px;
}

[data-theme="dark"] .hero-description {
    color: var(--text-body, #A0A0A0);
}


/* END — HERO DESCRIPTION TYPOGRAPHY */
/* START — CTA GROUP */

.hero-cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}


/* END — CTA GROUP */
/* START — CTA BUTTONS */

.hero-cta-group .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: var(
        --font-primary,
        system-ui,
        -apple-system,
        sans-serif
    );

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

    padding: 14px 28px;

    min-width: 175px;
    height: 50px;

    border-radius: 6px;

    text-decoration: none;

    transition: all 0.2s ease;

    box-sizing: border-box;
}


/* END — CTA BUTTONS */
/* START — PRIMARY BUTTON */

.hero-cta-group .btn-primary {
    background-color: var(--accent-color, #6B4FE0);
    color: #FFFFFF;
}


/* END — PRIMARY BUTTON */
/* START — SECONDARY BUTTON */

.hero-cta-group .btn-secondary {
    background-color: transparent;
    color: var(--text-heading, #111111);
    border: 1px solid var(--border-color, #D1D5DB);
}

[data-theme="dark"] .hero-cta-group .btn-secondary {
    color: var(--text-heading, #FFFFFF);
    border-color: rgba(255, 255, 255, 0.2);
}


/* END — SECONDARY BUTTON */
/* START — DESKTOP FADE SYSTEM */

@media (min-width: 769px) {


    
/* END — DESKTOP FADE SYSTEM */
/* START — HORIZONTAL — LEFT OUTER END */

    .technical-grid-box > .top-cell:nth-child(1)::after,
    .technical-grid-box > .button-cell:nth-child(6)::after {

        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            rgba(0, 0, 0, 0.30) 5px,
            rgba(0, 0, 0, 0.70) 10px,
            #000 18px,
            #000 100%
        );

        mask-image: linear-gradient(
            to right,
            transparent 0,
            rgba(0, 0, 0, 0.30) 5px,
            rgba(0, 0, 0, 0.70) 10px,
            #000 18px,
            #000 100%
        );
    }


    
/* END — HORIZONTAL — LEFT OUTER END */
/* START — HORIZONTAL — RIGHT OUTER END */

    .technical-grid-box > .top-cell:nth-child(3)::after,
    .technical-grid-box > .button-cell:nth-child(8)::after {

        -webkit-mask-image: linear-gradient(
            to left,
            transparent 0,
            rgba(0, 0, 0, 0.30) 5px,
            rgba(0, 0, 0, 0.70) 10px,
            #000 18px,
            #000 100%
        );

        mask-image: linear-gradient(
            to left,
            transparent 0,
            rgba(0, 0, 0, 0.30) 5px,
            rgba(0, 0, 0, 0.70) 10px,
            #000 18px,
            #000 100%
        );
    }


    
/* END — HORIZONTAL — RIGHT OUTER END */
/* START — HORIZONTAL — HEADING */

    .technical-grid-box > .heading-cell::after {

        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            rgba(0, 0, 0, 0.30) 5px,
            rgba(0, 0, 0, 0.70) 10px,
            #000 18px,
            #000 calc(100% - 18px),
            rgba(0, 0, 0, 0.70) calc(100% - 10px),
            rgba(0, 0, 0, 0.30) calc(100% - 5px),
            transparent 100%
        );

        mask-image: linear-gradient(
            to right,
            transparent 0,
            rgba(0, 0, 0, 0.30) 5px,
            rgba(0, 0, 0, 0.70) 10px,
            #000 18px,
            #000 calc(100% - 18px),
            rgba(0, 0, 0, 0.70) calc(100% - 10px),
            rgba(0, 0, 0, 0.30) calc(100% - 5px),
            transparent 100%
        );
    }


    
/* END — HORIZONTAL — HEADING */
/* START — HORIZONTAL — DESCRIPTION */

    .technical-grid-box > .desc-cell::after {

        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            rgba(0, 0, 0, 0.30) 5px,
            rgba(0, 0, 0, 0.70) 10px,
            #000 18px,
            #000 calc(100% - 18px),
            rgba(0, 0, 0, 0.70) calc(100% - 10px),
            rgba(0, 0, 0, 0.30) calc(100% - 5px),
            transparent 100%
        );

        mask-image: linear-gradient(
            to right,
            transparent 0,
            rgba(0, 0, 0, 0.30) 5px,
            rgba(0, 0, 0, 0.70) 10px,
            #000 18px,
            #000 calc(100% - 18px),
            rgba(0, 0, 0, 0.70) calc(100% - 10px),
            rgba(0, 0, 0, 0.30) calc(100% - 5px),
            transparent 100%
        );
    }


    
/* END — HORIZONTAL — DESCRIPTION */
/* START — OUTER LEFT / RIGHT VERTICAL LINES — TOP & BOTTOM FADE */

    .technical-grid-box::before,
    .technical-grid-box::after {
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0,
            #000 18px,
            #000 calc(100% - 18px),
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 0,
            #000 18px,
            #000 calc(100% - 18px),
            transparent 100%
        );
    }


    
/* END — OUTER LEFT / RIGHT VERTICAL LINES — TOP & BOTTOM FADE */
/* START — TOP ROW — SMALL VERTICAL DIVIDERS */

    .technical-grid-box > .top-cell:nth-child(1)::before,
    .technical-grid-box > .top-cell:nth-child(2)::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 18px;
        pointer-events: none;
        z-index: 5;
        background: linear-gradient(to bottom, var(--bg-primary, #FFFFFF) 0%, transparent 100%);
    }

    [data-theme="dark"] .technical-grid-box > .top-cell:nth-child(1)::before,
    [data-theme="dark"] .technical-grid-box > .top-cell:nth-child(2)::before {
        background: linear-gradient(to bottom, var(--bg-primary, #000000) 0%, transparent 100%);
    }


    
/* END — TOP ROW — SMALL VERTICAL DIVIDERS */
/* START — BUTTON ROW — NO VERTICAL FADE */

    .technical-grid-box > .button-cell:nth-child(6)::before,
    .technical-grid-box > .button-cell:nth-child(7)::before {
        content: none;
    }


    
/* END — BUTTON ROW — NO VERTICAL FADE */
/* START — BOTTOM ROW — SMALL VERTICAL DIVIDERS */

    .technical-grid-box > .bottom-cell:nth-child(9)::before,
    .technical-grid-box > .bottom-cell:nth-child(10)::before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 1px;
        height: 18px;
        pointer-events: none;
        z-index: 5;
        background: linear-gradient(to bottom, transparent 0%, var(--bg-primary, #FFFFFF) 100%);
    }

    [data-theme="dark"] .technical-grid-box > .bottom-cell:nth-child(9)::before,
    [data-theme="dark"] .technical-grid-box > .bottom-cell:nth-child(10)::before {
        background: linear-gradient(to bottom, transparent 0%, var(--bg-primary, #000000) 100%);
    }

}


/* END — BOTTOM ROW — SMALL VERTICAL DIVIDERS */
/* START — MOBILE */

@media (max-width: 768px) { 
 
    .hero-title {
        font-size: 30px;
    }

    
/* END — MOBILE */
/* START — HERO */ 
 
    .hero-section { 
        min-height: auto; 
        height: auto; 
        padding-top: 0; 
        padding-bottom: 0; 
        margin-top: 0; 
        align-items: flex-start; 
    }

    .hero-container {
        padding-top: 0;
        margin-top: 0;
    }


    
/* END — HERO */
/* START — GRID BOX */

    .technical-grid-box {
        width: calc(100% - 40px);

        margin-left: 20px;
        margin-right: 20px;

        margin-top: 40px;
    }


    
/* END — GRID BOX */
/* START — REMOVE INTERNAL VERTICAL DIVIDERS */

    .technical-grid-box > .grid-cell,
    .technical-grid-box > .top-cell,
    .technical-grid-box > .button-cell,
    .technical-grid-box > .center-cell,
    .technical-grid-box > .bottom-cell {
        background-image: none;
    }


    
/* END — REMOVE INTERNAL VERTICAL DIVIDERS */
/* START — FULL-WIDTH HORIZONTAL BORDERS */

    .grid-cell::after,
    .grid-cell-span::after {
        left: -35px;
        width: calc(100% + 70px);
    }

    .desc-cell::after {
        left: -35px;
        width: calc(100% + 70px);
    }

    .technical-grid-box > .top-cell:nth-child(1)::after,
    .technical-grid-box > .button-cell:nth-child(6)::after {
        left: -35px;
        width: calc(100% + 35px);
    }

    .technical-grid-box > .top-cell:nth-child(2)::after,
    .technical-grid-box > .button-cell:nth-child(7)::after {
        left: 0;
        width: 100%;
    }

    .technical-grid-box > .top-cell:nth-child(3)::after,
    .technical-grid-box > .button-cell:nth-child(8)::after {
        left: 0;
        width: calc(100% + 35px);
    }


    
/* END — FULL-WIDTH HORIZONTAL BORDERS */
/* START — EQUAL ROW HEIGHT (heading / description / buttons) */

    .heading-cell,
    .desc-cell {
        min-height: 120px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .technical-grid-box > .button-cell,
    .technical-grid-box > .center-cell {
        min-height: 120px;
        width: 100%;
        box-sizing: border-box;
    }


    
/* END — EQUAL ROW HEIGHT (heading / description / buttons) */
/* START — MOBILE BUTTON ROW */

    .hero-cta-group {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 8px;
        width: 100%;
    }


    
/* END — MOBILE BUTTON ROW */
/* START — MOBILE BUTTON SIZE */

    .hero-cta-group .btn {
        min-width: 0;
        width: auto;
        flex: 1 1 0;
        height: 44px;
        padding: 10px 8px;
        font-size: clamp(10px, 3.2vw, 13px);
        line-height: 1;
        border-radius: 6px;
        white-space: nowrap;
        text-align: center;
    }

}

/* END — MOBILE BUTTON SIZE */
/* START — HERO PERFORMANCE GUARD */
/* START — The dotted "current" lines (17 animated elements) repaint on the */

.technical-grid-box::before,
.technical-grid-box::after,
.grid-cell,
.grid-cell::after,
.grid-cell-span::after,
.desc-cell::after {
    animation-delay: 0.8s;
}


/* END — The dotted "current" lines (17 animated elements) repaint on the */
/* END — HERO PERFORMANCE GUARD */
/* ==========================================================
   END — HERO SECTION CSS
   ========================================================== */



/* ==========================================================
   START — CLIENT MARQUEE SECTION CSS
   ========================================================== */

.clickin-marquee-section {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    color: var(--color-heading);
    font-family: var(--font-primary);
    contain: layout style paint;
}


/* ==========================================================
   LIGHT THEME
   Outer marquee area stays pure white
   ========================================================== */

html[data-theme="light"] .clickin-marquee-section,
html[data-theme="light"] .clickin-marquee-wrapper {
    background: #FFFFFF;
}


/* ==========================================================
   MARQUEE WRAPPER
   ========================================================== */

.clickin-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    background: transparent;
    padding: 12px 0;
    padding-top: 20px;
    contain: layout style paint;
}


/* ==========================================================
   MARQUEE TRACK
   ========================================================== */

.clickin-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;

    animation: clickinMarqueeScroll 30s linear infinite;

    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.clickin-marquee-track:hover {
    animation-play-state: paused;
}


/* ==========================================================
   MARQUEE ITEM
   ========================================================== */

.clickin-marquee-item {
    display: flex;
    align-items: center;

    padding: 0 22px;

    flex-shrink: 0;

    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    line-height: 1.4;

    white-space: nowrap;

    color: var(--color-heading);

    transition: color 0.3s ease;
}

.clickin-marquee-item:hover {
    color: var(--color-accent);
}


/* ==========================================================
   MARQUEE ANIMATION
   ========================================================== */

@keyframes clickinMarqueeScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}


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

@media (max-width: 768px) {

    .clickin-marquee-wrapper {
        padding: 10px 0;
        padding-top: 20px;
    }

    .clickin-marquee-item {
        font-size: 14px;
        padding: 0 18px;
    }
}


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

@media (max-width: 480px) {

    .clickin-marquee-wrapper {
        padding-top: 20px;
        padding-bottom: 8px;
    }

    .clickin-marquee-item {
        font-size: 13px;
        padding: 0 14px;
    }
}


/* ==========================================================
   START — MARQUEE BLUR-IN ANIMATION
   Same premium smooth blur as the hero: same easing, blur
   24px -> 0, scale 0.95 -> 1, opacity 0 -> 1.
   It opens right after the hero buttons in the same step
   pattern (heading 0s, description 0.1s, buttons 0.2s,
   marquee 0.3s, each 0.6s). It is applied to the wrapper only, so the
   scrolling track and its own animation are not touched.
   ========================================================== */

@keyframes clickinMarqueeBlurIn {
    0% { opacity: 0; filter: blur(24px); transform: scale(0.95); }
    100% { opacity: 1; filter: none; transform: none; }
}

.clickin-marquee-wrapper {
    animation: clickinMarqueeBlurIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* ==========================================================
   END — MARQUEE BLUR-IN ANIMATION
   ========================================================== */


/* ==========================================================
   END — CLIENT MARQUEE SECTION CSS
   ========================================================== */


/* ==========================================================
   START — WHY IT MATTERS SECTION CSS
   ========================================================== */

.home-why-section {
    width: 100%;

    padding-top: var(--section-padding-y, 30px);
    padding-bottom: var(--section-padding-y, 30px);

    background: var(--color-bg);
    color: var(--color-body);

    box-sizing: border-box;
}


/* ==========================================================
   LIGHT THEME — WHITE OUTER BACKGROUND + BOTTOM DIVIDER
   ========================================================== */

html[data-theme="light"] .home-why-section {
    background: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
}


/* ==========================================================
   CONTAINER
   ========================================================== */

.home-why-container {
    width: 100%;
    max-width: var(--container-width, 1180px);

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--container-padding-x, 22px);
    padding-right: var(--container-padding-x, 22px);

    box-sizing: border-box;
}


/* ==========================================================
   SECTION HEADER
   ========================================================== */

.home-why-header {
    max-width: 760px;
    margin-bottom: 36px;
}

.home-why-eyebrow {
    display: block;

    margin-bottom: 12px;

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--label-weight, 500);
    line-height: 1.4;

    letter-spacing: 0.10em;
    text-transform: uppercase;

    color: var(--color-accent);
}

.home-why-title {
    margin: 0;
    max-width: 760px;

    font-family: var(--font-primary);
    font-size: 40px;
    font-weight: var(--heading-weight, 600);
    line-height: var(--heading-line-height, 1.15);
    letter-spacing: var(--heading-letter-spacing, -0.025em);

    color: var(--color-heading);

    overflow-wrap: break-word;
}

.home-why-subline {
    margin: 12px 0 0;
    max-width: 700px;

    font-family: var(--font-primary);
    font-size: var(--body-size, 15px);
    font-weight: var(--body-weight, 400);
    line-height: var(--body-line-height, 1.6);

    color: var(--color-body);

    overflow-wrap: break-word;
}


/* ==========================================================
   PROBLEM CARDS
   ========================================================== */

.home-why-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 16px;

    width: 100%;
}

.home-why-card {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    padding: 28px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: 10px;

    box-sizing: border-box;

    position: relative;

    transition: border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Soft hover glow — shadow lives on a pseudo-element and only
   its opacity changes, so the hover stays light and smooth. */
.home-why-card::after {
    content: '';

    position: absolute;
    inset: 0;

    border-radius: inherit;

    box-shadow: var(--shadow-md);

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {

    .home-why-card:hover {
        border-color: var(--color-border-hover);
    }

    .home-why-card:hover::after {
        opacity: 1;
    }

    .home-why-card:hover .home-why-icon {
        border-color: var(--color-border-hover);
    }
}


/* ==========================================================
   ICON
   ========================================================== */

.home-why-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    margin-bottom: 24px;

    background: var(--color-surface-soft);
    color: var(--color-accent);

    border: 1px solid var(--color-border);
    border-radius: 8px;

    box-sizing: border-box;

    transition: border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-why-icon svg {
    display: block;

    width: 20px;
    height: 20px;

    color: currentColor;
}


/* ==========================================================
   CARD TYPOGRAPHY
   ========================================================== */

.home-why-card-title {
    margin: 0;

    font-family: var(--font-primary);
    font-size: 21px;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.3;
    letter-spacing: -0.02em;

    color: var(--color-heading);

    overflow-wrap: break-word;
}

.home-why-card-text {
    margin: 12px 0 0;

    font-family: var(--font-primary);
    font-size: var(--body-size, 15px);
    font-weight: var(--body-weight, 400);
    line-height: var(--body-line-height, 1.6);

    color: var(--color-secondary);

    overflow-wrap: break-word;
}


/* ==========================================================
   SECTION CTA — TEXT + ARROW
   ========================================================== */

.home-why-cta {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    width: 100%;

    margin-top: 36px;
}

.home-why-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    gap: 8px;

    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;

    font-family: var(--font-primary);
    font-size: var(--button-text-size, 14px);
    font-weight: var(--button-weight, 600);
    line-height: var(--button-line-height, 1.4);

    color: var(--color-heading);
    text-decoration: none;

    cursor: pointer;

    transition:
        color var(--transition-normal),
        gap var(--transition-normal);
}

.home-why-cta-label {
    position: relative;

    display: inline-block;
}

.home-why-cta-arrow {
    display: block;
    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    color: var(--color-accent);

    transition:
        transform var(--transition-fast),
        color var(--transition-normal);
}

.home-why-cta-link:hover {
    color: var(--color-accent);
}

.home-why-cta-link:hover .home-why-cta-label {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.home-why-cta-link:hover .home-why-cta-arrow {
    transform: translateX(3px);
    color: var(--color-accent);
}

.home-why-cta-link:focus-visible {
    outline: var(--focus-width, 2px) solid var(--color-focus);
    outline-offset: var(--focus-offset, 2px);

    border-radius: var(--radius-sm, 6px);
}


/* ==========================================================
   TABLET — 768px TO 1023px
   ========================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    .home-why-section {
        padding-top: var(--section-padding-y, 30px);
        padding-bottom: var(--section-padding-y, 30px);
    }

    .home-why-container {
        padding-left: var(--container-padding-x, 22px);
        padding-right: var(--container-padding-x, 22px);
    }

    .home-why-title {
        font-size: 34px;
    }

    .home-why-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .home-why-card {
        padding: 24px;
        border-radius: 12px;
    }

    .home-why-cta {
        margin-top: 30px;
    }
}


/* ==========================================================
   MOBILE — 0px TO 767px
   ========================================================== */

@media (max-width: 767px) {

    .home-why-section {
        padding-top: var(--section-padding-y-mobile, 20px);
        padding-bottom: var(--section-padding-y-mobile, 20px);
    }

    .home-why-container {
        padding-left: var(--container-padding-x-mobile, 15px);
        padding-right: var(--container-padding-x-mobile, 15px);
    }

    .home-why-header {
        margin-bottom: 28px;
    }

    .home-why-title {
        font-size: 24px;
        line-height: 1.22;
    }

    .home-why-subline {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.6;
    }

    .home-why-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .home-why-card {
        padding: 24px;
        border-radius: 14px;
    }

    .home-why-icon {
        margin-bottom: 20px;
        border-radius: 8px;
    }

    .home-why-card-title {
        font-size: 20px;
    }

    .home-why-card-text {
        font-size: 14px;
    }

    .home-why-cta {
        margin-top: 28px;
        justify-content: flex-start;
    }

    .home-why-cta-link {
        font-size: 14px;
        gap: 8px;
    }
}


/* ==========================================================
   START — WHY BLUR-IN ANIMATION
   Same premium smooth blur as the hero, same easing, quicker,
   blur 24px -> 0, scale 0.95 -> 1, opacity 0 -> 1.

   1) HEADER: label, heading and description open one by one
      on page load, right after the marquee (marquee 0.3s,
      label 0.4s, heading 0.5s, description 0.6s), each 0.6s
      with the same blur-in.
   2) CARDS: revealed one by one on first scroll into view.
      The .why-pending / .why-reveal classes are added and
      removed by home-why-reveal.js. .why-reveal is removed
      right after the animation ends, so nothing is left on
      the card once it has appeared.
   ========================================================== */

@keyframes homeWhySmoothBlur {
    0% { opacity: 0; filter: blur(24px); transform: scale(0.95); }
    100% { opacity: 1; filter: none; transform: none; }
}

.home-why-eyebrow,
.home-why-title,
.home-why-subline {
    animation: homeWhySmoothBlur 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-why-eyebrow {
    animation-delay: 0.4s;
}

.home-why-title {
    animation-delay: 0.5s;
}

.home-why-subline {
    animation-delay: 0.6s;
}

.home-why-card.why-pending {
    opacity: 0;
}

.home-why-card.why-reveal {
    animation: homeWhySmoothBlur 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Mobile: cards reveal faster (same blur-in, shorter duration) */
@media (max-width: 767px) {
    .home-why-card.why-reveal {
        animation-duration: 0.6s;
    }
}

/* Reduced-motion devices (phone "Reduce motion" / "Remove animations"):
   no blur or zoom, only a soft fade — cards still appear one by one. */
@keyframes homeWhyFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .home-why-eyebrow,
    .home-why-title,
    .home-why-subline,
    .home-why-card.why-reveal {
        animation-name: homeWhyFadeIn;
        animation-duration: 0.5s;
    }
}


/* ==========================================================
   END — WHY BLUR-IN ANIMATION
   ========================================================== */


/* ==========================================================
   END — WHY IT MATTERS SECTION CSS
   ========================================================== */

/* ==========================================================
   START — SERVICES SECTION CSS
   ========================================================== */

.home-services-section {
    width: 100%;

    /*
     * Top padding halved, bottom padding unchanged. Left/right
     * padding stays on the container below, unchanged.
     *
     * No background and no text colour are set on this outer
     * section on purpose — it must show the page's own system
     * background/theme, not a colour we apply here.
     */
    padding-top: calc(var(--section-padding-y, 30px) / 2);
    padding-bottom: var(--section-padding-y, 30px);

    box-sizing: border-box;
}

.home-services-container {
    width: 100%;
    max-width: var(--container-width, 1180px);

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--container-padding-x, 22px);
    padding-right: var(--container-padding-x, 22px);

    box-sizing: border-box;
}


/* ==========================================================
   SECTION HEADER
   ========================================================== */

.home-services-header {
    max-width: 760px;
    margin-bottom: 36px;
}

.home-services-eyebrow {
    display: block;

    margin-bottom: 12px;

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--label-weight, 500);
    line-height: 1.4;
    letter-spacing: 0.10em;
    text-transform: uppercase;

    color: var(--color-accent);
}

.home-services-title {
    margin: 0;
    max-width: 760px;

    font-family: var(--font-primary);
    font-size: 40px;
    font-weight: var(--heading-weight, 600);
    line-height: var(--heading-line-height, 1.15);
    letter-spacing: var(--heading-letter-spacing, -0.025em);

    color: var(--color-heading);

    overflow-wrap: break-word;
}

.home-services-subline {
    margin: 12px 0 0;
    max-width: 680px;

    font-family: var(--font-primary);
    font-size: var(--body-size, 15px);
    font-weight: var(--body-weight, 400);
    line-height: var(--body-line-height, 1.6);

    color: var(--color-body);

    overflow-wrap: break-word;
}


/* ==========================================================
   SERVICE CARDS GRID
   Desktop and tablet: one row, three cards.
   Mobile: overridden further down into a peeking carousel.
   ========================================================== */

.home-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;

    width: 100%;
}


/* ==========================================================
   SERVICE CARD
   Fixed brand colour per card (set below by position), does
   NOT change with the light/dark theme. No border, no shadow
   anywhere on this card — clean, solid colour with only a
   small hover lift.
   ========================================================== */

.home-service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    padding: 24px;

    /* fixed brand colour, not a theme variable */
    background: var(--home-service-solid);

    border: 0;
    border-radius: 10px;
    box-shadow: none;

    overflow: hidden;

    box-sizing: border-box;

    /*
     * Visible by default everywhere. The "hidden until it
     * scrolls into view" state below is scoped to tablet and
     * desktop ONLY (see the 768px+ media query further down).
     * On mobile the cards sit in a horizontally peeking
     * carousel, and a peeking card is only partly on screen —
     * it would never cross the reveal threshold and would stay
     * invisible forever, which is exactly the bug this avoids.
     */
    opacity: 1;
    transform: none;

    transition:
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        filter var(--transition-normal, 200ms ease);
}

@media (hover: hover) and (pointer: fine) {

    .home-service-card:hover {
        transform: translateY(-3px);
        box-shadow: none;

        filter: brightness(1.05);
    }
}

/*
 * Scroll-reveal starting state — tablet and desktop only.
 * home.js adds the "js-reveal" class to the section and then
 * "is-visible" to each card once it enters the viewport.
 * The cards are hidden ONLY when "js-reveal" exists, so if
 * JavaScript fails to load, the cards stay visible.
 */
@media (min-width: 768px) {

    .home-services-section.js-reveal .home-service-card:not(.is-visible) {
        opacity: 0;
        transform: translateY(16px);
    }
}


/*
 * Card content sits above the card background.
 */
.home-service-card > *:not(.home-service-wave) {
    position: relative;
    z-index: 1;
}


/*
 * Fixed per-card brand colours and a staggered reveal delay.
 * These colours are intentionally NOT theme variables, so
 * they stay the same in light and dark mode, and if the
 * theme changes automatically.
 */

.home-services-grid > .home-service-card:nth-child(1) {
    --home-service-solid: #6B4FE0; /* Website Design & Development — purple */
    transition-delay: 0ms;
}

.home-services-grid > .home-service-card:nth-child(2) {
    --home-service-solid: #03624C; /* Technical & On-Page SEO — deep green */
    transition-delay: 90ms;
}

.home-services-grid > .home-service-card:nth-child(3) {
    --home-service-solid: #D95C44; /* Off-Page SEO & Digital Marketing — coral */
    transition-delay: 180ms;
}


/* ==========================================================
   START — SERVICES HOVER FIX
   The 90ms / 180ms stagger above is only meant for the
   scroll reveal. On hover the card now responds instantly.
   (Must stay below the nth-child rules above.)
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

    .home-services-grid > .home-service-card:hover {
        transition-delay: 0ms;
    }
}


/* ==========================================================
   END — SERVICES HOVER FIX
   ========================================================== */


/*
 * Card 3 (coral) is a lighter background, so its text is pushed
 * to full white for readability. Cards 1 and 2 are dark enough
 * and keep the softer white tones.
 */

.home-services-grid > .home-service-card:nth-child(3) .home-service-outcome {
    color: #FFFFFF;
}

.home-services-grid > .home-service-card:nth-child(3) .home-service-list li {
    color: rgba(255, 255, 255, 0.96);
}

.home-services-grid > .home-service-card:nth-child(3) .home-service-code {
    color: rgba(255, 255, 255, 0.92);
}

.home-services-grid > .home-service-card:nth-child(3) .home-service-link-text {
    border-bottom-color: rgba(255, 255, 255, 0.7);
}


/* ==========================================================
   Cards are clean, solid colour — no inner animation layer.
   Safety: if the old wave <div> is still present in the HTML,
   it stays hidden.
   ========================================================== */

.home-service-wave {
    display: none;
}


/* ==========================================================
   PLAIN-TEXT REFERENCE CODE — top-left corner (ITC-1 etc), all devices.
   Just text. No chip, no background, no border.
   ========================================================== */

.home-service-code {
    display: block;
    margin: 0;

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.09em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.72);
}


/* ==========================================================
   CARD TOP ROW — reference code, aligned left
   ========================================================== */

.home-service-card-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100%;

    margin-bottom: 12px;
}


/* ==========================================================
   CARD ICON
   ========================================================== */

.home-service-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;

    box-sizing: border-box;
}

.home-service-icon svg {
    display: block;

    width: 20px;
    height: 20px;

    color: currentColor;
}


/* ==========================================================
   CARD FOOTER — bottom-left: icon, gap, pipe (same height as
   the icon), then a one/two word tag.
   ========================================================== */

.home-service-footer {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: auto;
    padding-top: 18px;
}

.home-service-pipe {
    display: block;
    flex: 0 0 1px;

    width: 1px;
    height: 40px;

    background: rgba(255, 255, 255, 0.35);
}

.home-service-tag {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.3;
    letter-spacing: -0.01em;

    color: #FFFFFF;
}


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

.home-service-card-title {
    margin: 0;

    font-family: var(--font-primary);
    font-size: 21px;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.3;
    letter-spacing: -0.02em;

    color: #FFFFFF;

    overflow-wrap: break-word;
}


/* ==========================================================
   OUTCOME TEXT
   ========================================================== */

.home-service-outcome {
    margin: 12px 0 0;

    font-family: var(--font-primary);
    font-size: var(--body-size, 15px);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.6;

    color: rgba(255, 255, 255, 0.92);

    overflow-wrap: break-word;
}


/* ==========================================================
   CARD BULLET LIST
   ========================================================== */

.home-service-list {
    display: grid;
    gap: 10px;

    margin: 18px 0 0;
    padding: 0;

    list-style: none;
}

.home-service-list li {
    position: relative;

    margin: 0;
    padding-left: 18px;

    font-family: var(--font-primary);
    font-size: var(--description-size, 14px);
    font-weight: var(--description-weight, 400);
    line-height: var(--description-line-height, 1.55);

    color: rgba(255, 255, 255, 0.82);

    overflow-wrap: break-word;
}

.home-service-list li::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0.68em;

    width: 5px;
    height: 5px;

    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
}


/* ==========================================================
   SERVICE LINK
   Colour pinned with !important on every state on purpose:
   the site's global link/hover styles were winning the
   cascade here and turning the text invisible against these
   solid brand backgrounds. This guarantees it stays white no
   matter what the global theme does to <a> tags.
   ========================================================== */

.home-service-link,
.home-service-link:link,
.home-service-link:visited,
.home-service-link:hover,
.home-service-link:active,
.home-service-link:focus {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    align-self: flex-start;

    margin-top: 18px;

    font-family: var(--font-primary);
    font-size: var(--button-text-size, 14px);
    font-weight: var(--button-weight, 600);
    line-height: var(--button-line-height, 1.4);

    color: #FFFFFF !important;

    text-decoration: none;

    background: transparent;
    border: 0;
}

.home-service-link-text {
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    padding-bottom: 2px;

    transition: border-color var(--transition-normal, 200ms ease);
}

.home-service-link:hover .home-service-link-text,
.home-service-link:focus-visible .home-service-link-text {
    border-color: #FFFFFF;
}

.home-service-link-arrow {
    display: block;
    flex: 0 0 15px;

    width: 15px;
    height: 15px;

    color: #FFFFFF !important;

    transition: transform var(--transition-fast, 150ms ease);
}

.home-service-link:hover .home-service-link-arrow,
.home-service-link:focus-visible .home-service-link-arrow {
    transform: translateX(3px);
}

.home-service-link:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;

    border-radius: 3px;
}


/* ==========================================================
   SECTION CTA — text, underline, and a plain arrow (no circle)
   Stays on the site theme colours (this sits outside the
   coloured cards, so it keeps following the existing system).
   ========================================================== */

.home-services-cta {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    width: 100%;
    margin-top: 30px;
}

.home-services-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    gap: 8px;

    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;

    font-family: var(--font-primary);
    font-size: var(--button-text-size, 14px);
    font-weight: var(--button-weight, 600);
    line-height: var(--button-line-height, 1.4);

    color: var(--color-heading);
    text-decoration: none;

    cursor: pointer;

    transition: color var(--transition-normal);
}

.home-services-cta-button:hover {
    background: transparent;
    border: 0;

    color: var(--color-accent);
}

.home-services-cta-text {
    border-bottom: 1px solid currentColor;
    opacity: 0.55;
    padding-bottom: 2px;

    transition: opacity var(--transition-normal, 200ms ease);
}

.home-services-cta-button:hover .home-services-cta-text,
.home-services-cta-button:focus-visible .home-services-cta-text {
    opacity: 1;
}

.home-services-cta-arrow {
    display: block;
    flex: 0 0 16px;

    width: 16px;
    height: 16px;

    color: var(--color-accent);

    transition: transform var(--transition-fast);
}

.home-services-cta-button:hover .home-services-cta-arrow,
.home-services-cta-button:focus-visible .home-services-cta-arrow {
    transform: translateX(4px);
}

.home-services-cta-button:focus-visible {
    outline: var(--focus-width, 2px) solid var(--color-focus);
    outline-offset: var(--focus-offset, 2px);

    border-radius: var(--radius-sm, 6px);
}


/* ==========================================================
   TABLET — 768px TO 1023px
   Still one row, three cards — only sizing gets tighter.
   ========================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    .home-services-section {
        padding-top: calc(var(--section-padding-y, 30px) / 2);
        padding-bottom: var(--section-padding-y, 30px);
    }

    .home-services-container {
        padding-left: 22px;
        padding-right: 22px;
    }

    .home-services-title {
        font-size: 34px;
    }

    .home-services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .home-service-card {
        padding: 20px;
        border-radius: 12px;
    }

    .home-service-code {
        font-size: 10px;
    }

    .home-service-card-top {
        margin-bottom: 14px;
    }

    .home-service-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .home-service-icon svg {
        width: 18px;
        height: 18px;
    }

    .home-service-footer {
        gap: 10px;
        padding-top: 18px;
    }

    .home-service-pipe {
        height: 36px;
    }

    .home-service-tag {
        font-size: 13px;
    }

    .home-service-card-title {
        font-size: 18px;
    }

    .home-service-outcome {
        font-size: 13px;
        margin-top: 10px;
    }

    .home-service-list {
        margin-top: 18px;
        gap: 10px;
    }

    .home-service-list li {
        font-size: 12.5px;
    }

    .home-service-link,
    .home-service-link:link,
    .home-service-link:visited,
    .home-service-link:hover,
    .home-service-link:active,
    .home-service-link:focus {
        margin-top: 18px;
        font-size: 13px;
    }

    .home-services-cta {
        margin-top: 28px;
    }

}


/* ==========================================================  
   MOBILE — 0px TO 767px  
   Peeking carousel, bled to the true screen edge.  
   The next card remains slightly visible on the right so  
   users can naturally understand that the section is swipeable.  
   ========================================================== */  
  
@media (max-width: 767px) {  
  
    .home-services-section {  
        padding-top: calc(var(--section-padding-y-mobile, 20px) / 2);  
        padding-bottom: var(--section-padding-y-mobile, 20px);  
    }  
  
    .home-services-container {  
        padding-left: var(--container-padding-x-mobile, 15px);  
        padding-right: var(--container-padding-x-mobile, 15px);  
    }  
  
    .home-services-header {  
        margin-bottom: 28px;  
    }  
  
    .home-services-title {  
        font-size: 24px;  
        line-height: 1.18;  
    }  
  
    .home-services-subline {  
        margin-top: 12px;  
        font-size: 14px;  
        line-height: 1.6;  
    }  
  
    /* ======================================================  
       MOBILE HORIZONTAL CAROUSEL  
       ====================================================== */  
  
    .home-services-grid {  
        display: flex;  
        grid-template-columns: none;  
  
        gap: 14px;  
  
        width: auto;  
        max-width: none;  
  
        margin-left: calc(var(--container-padding-x-mobile, 15px) * -1);  
        margin-right: calc(var(--container-padding-x-mobile, 15px) * -1);  
  
        padding-left: var(--container-padding-x-mobile, 15px);  
        padding-right: var(--container-padding-x-mobile, 15px);  
  
        overflow-x: auto;  
        overscroll-behavior-x: contain;  
        scroll-snap-type: x mandatory;  
        scroll-padding-left: var(--container-padding-x-mobile, 15px);  
  
        -webkit-overflow-scrolling: touch;  
  
        scrollbar-width: none;  
        -ms-overflow-style: none;  
    }  
  
    .home-services-grid::-webkit-scrollbar {  
        display: none;  
        height: 0;  
    }  
  
    /* ======================================================  
       MOBILE CARD  
       
       Slightly narrower than the viewport so the next card  
       naturally remains visible by a small amount on the right.  
       No indicator, dots or extra navigation added.  
       ====================================================== */  
  
    .home-service-card {  
        flex: 0 0 min(350px, calc(100vw - 50px));  
        max-width: min(350px, calc(100vw - 50px));  
  
        scroll-snap-align: start;  
        scroll-snap-stop: always;  
  
        padding: 14px 20px;  
        border-radius: 14px;  
    }  
  
    .home-service-card-top {  
        margin-bottom: 12px;  
    }  
  
    .home-service-footer {  
        padding-top: 16px;  
    }  
  
    .home-service-card-title {  
        font-size: 20px;  
        line-height: 1.2;  
    }  
  
    .home-service-outcome {  
        font-size: 14px;  
        line-height: 1.5;  
    }  
  
    .home-service-list {  
        margin-top: 16px;  
    }  
  
    .home-service-link,  
    .home-service-link:link,  
    .home-service-link:visited,  
    .home-service-link:hover,  
    .home-service-link:active,  
    .home-service-link:focus {  
        margin-top: 16px;  
    }  
  
    .home-services-cta {  
        margin-top: 24px;  
        justify-content: flex-start;  
    }  
  
    .home-services-cta-button {  
        font-size: 14px;  
        gap: 8px;  
    }  
  
}  
  
  
/* ==========================================================  
   LARGER MOBILE PHONES — 390px TO 767px  
   Keep larger phones from making the card look too square.  
   Adds approximately 20px total vertical height.  
   ========================================================== */  
  
@media (min-width: 390px) and (max-width: 767px) {  
  
    .home-service-card {  
        padding: 24px 20px;  
    }  
  
}  
  
  
/* ==========================================================  
   REDUCED MOTION  
   ========================================================== */  
  
@media (prefers-reduced-motion: reduce) {  
  
    .home-service-card {  
        opacity: 1;  
        transform: none;  
        transition: none;  
    }  
  
    .home-services-cta-arrow,  
    .home-service-link-arrow,  
    .home-services-cta-text,  
    .home-service-link-text {  
        transition: none;  
    }  
  
    .home-service-card:hover {  
        transform: none;  
        filter: none;  
    }  
  
    .home-services-cta-button:hover .home-services-cta-arrow,  
    .home-service-link:hover .home-service-link-arrow {  
        transform: none;  
    }  
  
}  
  
  
/* ==========================================================  
   END — SERVICES SECTION CSS  
   ========================================================== */
   

/* ============================================================
   START — CLICKIN HOMEPAGE CASE STUDIES CSS
   ============================================================ */

/* ============================================================
   01 — SECTION
   ============================================================ */

.home-case-studies-section {
    position: relative;

    width: 100%;
    margin: 0;

    padding-top: calc(var(--section-padding-y, 30px) / 2);
    padding-bottom: calc(var(--section-padding-y, 30px) / 2);

    background: var(--color-bg);
    color: var(--color-body);

    box-sizing: border-box;

    /*
     * Theme-safe fallbacks (site variables only).
     */
    --home-case-study-tint: transparent;
    --home-case-study-tint-strong: var(--color-surface-soft);
    --home-case-study-line-accent: var(--color-border-hover);
}

/*
 * Accent tints, derived from the same site variables,
 * so light and dark mode both follow the theme.
 */
@supports (color: color-mix(in srgb, red, blue)) {

    .home-case-studies-section {
        --home-case-study-tint: color-mix(in srgb, var(--color-accent) 10%, transparent);
        --home-case-study-tint-strong: color-mix(in srgb, var(--color-accent) 18%, transparent);
        --home-case-study-line-accent: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
    }
}


/* ============================================================
   02 — CONTAINER
   ============================================================ */

.home-case-studies-container {
    width: 100%;
    max-width: var(--container-width, 1180px);

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--container-padding-x, 22px);
    padding-right: var(--container-padding-x, 22px);

    box-sizing: border-box;
}


/* ============================================================
   03 — HEADER
   ============================================================ */

.home-case-studies-header {
    max-width: 100%;

    margin: 0 0 30px;
}


/* ============================================================
   04 — HEADER META ROW
   ============================================================ */

.home-case-studies-heading-row {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 14px;
}


/* ============================================================
   05 — EYEBROW
   ============================================================ */

.home-case-studies-eyebrow {
    flex: 0 0 auto;

    font-family: var(--font-primary);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.13em;
    text-transform: uppercase;

    color: var(--color-accent);
}


/* ============================================================
   06 — HEADER LINE
   ============================================================ */

.home-case-studies-heading-line {
    display: block;

    width: 42px;
    height: 1px;

    flex: 0 0 42px;

    background: linear-gradient(
        to right,
        var(--home-case-study-line-accent),
        var(--color-border)
    );
}


/* ============================================================
   07 — HEADER NOTE
   ============================================================ */

.home-case-studies-heading-note {
    font-family: var(--font-primary);

    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;

    letter-spacing: 0.04em;

    color: var(--color-secondary);
}


/* ============================================================
   08 — MAIN HEADING
   ============================================================ */

.home-case-studies-title {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    font-family: var(--font-primary);

    /*
     * Desktop = 40px
     */
    font-size: 40px;

    font-weight: var(--heading-weight, 600);
    line-height: var(--heading-line-height, 1.15);

    letter-spacing: var(--heading-letter-spacing, -0.025em);

    color: var(--color-heading);

    white-space: nowrap;
}


/* ============================================================
   09 — SUBLINE
   ============================================================ */

.home-case-studies-subline {
    max-width: 620px;

    margin: 14px 0 0;
    padding: 0;

    font-family: var(--font-primary);

    font-size: var(--body-size, 15px);
    font-weight: var(--body-weight, 400);
    line-height: 1.65;

    color: var(--color-secondary);

    text-wrap: balance;
}


/* ============================================================
   10 — CASE STUDIES LIST
   ============================================================ */

.home-case-studies-list {
    display: flex;
    flex-direction: column;

    width: 100%;

    gap: 18px;
}


/* ============================================================
   11 — CASE STUDY CARD
   ============================================================ */

.home-case-study {
    position: relative;

    display: grid;

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

    min-width: 0;
    margin: 0;

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg, 12px);

    overflow: hidden;

    box-sizing: border-box;

    /*
     * Keeps the hover glow behind the content.
     */
    isolation: isolate;

    transition:
        transform var(--transition-normal, 180ms ease),
        border-color var(--transition-normal, 180ms ease),
        box-shadow var(--transition-normal, 180ms ease);
}


/* ============================================================
   12 — CARD GLOW (behind content)
   ============================================================ */

.home-case-study::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background: radial-gradient(
        90% 120% at 0% 0%,
        var(--home-case-study-tint),
        transparent 60%
    );

    opacity: 0.55;

    pointer-events: none;

    transition: opacity var(--transition-normal, 180ms ease);
}


/* ============================================================
   13 — CARD HOVER
   ============================================================ */

.home-case-study:hover {
    border-color: var(--home-case-study-line-accent);
}

.home-case-study:hover::before {
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {

    .home-case-study:hover {
        transform: translateY(-3px);

        box-shadow: var(--shadow-md);
    }
}


/* ============================================================
   14 — CARD INDEX
   ============================================================ */

.home-case-study-index {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 14px;

    padding-top: 28px;

    font-family: var(--font-primary);

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.08em;

    color: var(--color-secondary);

    border-right: 1px solid var(--color-border);

    box-sizing: border-box;

    transition: color var(--transition-fast, 150ms ease);
}

.home-case-study-index::after {
    content: "";

    flex: 1 1 auto;

    width: 1px;
    margin-bottom: 26px;

    background: linear-gradient(
        to bottom,
        var(--color-border-hover),
        transparent
    );

    opacity: 0.7;

    transition: background var(--transition-normal, 180ms ease);
}

.home-case-study:hover .home-case-study-index {
    color: var(--color-accent);
}

.home-case-study:hover .home-case-study-index::after {
    background: linear-gradient(
        to bottom,
        var(--color-accent),
        transparent
    );
}


/* ============================================================
   15 — VISUAL COLUMN
   ============================================================ */

.home-case-study-visual {
    position: relative;

    display: flex;
    align-items: center;

    min-width: 0;

    padding: 14px;

    box-sizing: border-box;
}


/* ============================================================
   16 — IMAGE LINK (BROWSER FRAME)
   ============================================================ */

.home-case-study-image-link {
    position: relative;

    display: block;

    width: 100%;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius-lg, 12px) - 3px);

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

    text-decoration: none;

    box-sizing: border-box;

    transition: border-color var(--transition-normal, 180ms ease);
}

.home-case-study:hover .home-case-study-image-link {
    border-color: var(--color-border-hover);
}

.home-case-study-image-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}


/* ============================================================
   17 — BROWSER BAR
   ============================================================ */

.home-case-study-browser {
    display: flex;
    align-items: center;

    gap: 14px;

    height: 34px;

    padding: 0 12px;

    border-bottom: 1px solid var(--color-border);

    background: var(--color-surface);

    box-sizing: border-box;
}

.home-case-study-browser-dots {
    display: block;

    flex: 0 0 auto;

    width: 6px;
    height: 6px;

    margin-right: 24px;

    border-radius: 50%;

    background: var(--color-border-hover);

    box-shadow:
        12px 0 0 var(--color-border-hover),
        24px 0 0 var(--color-border-hover);
}

.home-case-study-browser-url {
    display: block;

    min-width: 0;
    max-width: 100%;

    padding: 3px 12px;

    border: 1px solid var(--color-border);
    border-radius: 999px;

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

    font-family: var(--font-primary);

    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;

    letter-spacing: 0.02em;

    color: var(--color-secondary);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================================
   18 — IMAGE
   ============================================================ */

.home-case-study-image-link img {
    display: block;

    width: 100%;
    height: auto;
    max-width: 100%;

    /*
     * The complete screenshot always stays visible.
     * No cropping.
     */
    max-height: 440px;
    object-fit: contain;
    object-position: top center;

    transition: transform 500ms cubic-bezier(.2, .7, .2, 1);
}

@media (hover: hover) and (pointer: fine) {

    .home-case-study:hover .home-case-study-image-link img {
        transform: scale(1.015);
    }
}


/* ============================================================
   19 — IMAGE ARROW
   ============================================================ */

.home-case-study-image-arrow {
    position: absolute;

    right: 12px;
    bottom: 12px;

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

    width: 34px;
    height: 34px;

    border: 1px solid var(--color-border-hover);
    border-radius: 50%;

    background: var(--color-surface);

    color: var(--color-accent);

    opacity: 0;

    transform: translateY(5px);

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.home-case-study:hover .home-case-study-image-arrow,
.home-case-study-image-link:focus-visible .home-case-study-image-arrow {
    opacity: 1;

    transform: translateY(0);
}

.home-case-study-image-arrow svg {
    display: block;

    width: 15px;
    height: 15px;
}


/* ============================================================
   20 — CONTENT COLUMN
   ============================================================ */

.home-case-study-content {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 30px 30px 28px;

    box-sizing: border-box;
}


/* ============================================================
   21 — CLIENT META
   ============================================================ */

.home-case-study-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 18px;
}

.home-case-study-client {
    font-family: var(--font-primary);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.025em;

    color: var(--color-heading);
}

.home-case-study-separator {
    font-family: var(--font-primary);

    font-size: 11px;
    line-height: 1;

    color: var(--color-border-hover);
}

.home-case-study-industry {
    font-family: var(--font-primary);

    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;

    letter-spacing: 0.04em;
    text-transform: uppercase;

    color: var(--color-secondary);
}


/* ============================================================
   22 — CARD HEADING
   ============================================================ */

.home-case-study-title {
    max-width: 520px;

    margin: 0;
    padding: 0;

    font-family: var(--font-primary);

    font-size: clamp(22px, 2.1vw, 29px);
    font-weight: var(--heading-weight, 700);
    line-height: 1.12;

    letter-spacing: -0.035em;

    color: var(--color-heading);

    text-wrap: balance;
}


/* ============================================================
   23 — DESCRIPTION
   ============================================================ */

.home-case-study-description {
    max-width: 520px;

    margin: 14px 0 0;
    padding: 0;

    font-family: var(--font-primary);

    font-size: 13px;
    font-weight: var(--body-weight, 400);
    line-height: 1.65;

    color: var(--color-secondary);
}


/* ============================================================
   24 — DETAILS
   ============================================================ */

.home-case-study-details {
    display: grid;

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

    gap: 22px;

    margin-top: 26px;
    padding-top: 20px;

    border-top: 1px solid var(--color-border);
}


/* ============================================================
   25 — DETAIL BLOCK
   ============================================================ */

.home-case-study-detail {
    min-width: 0;
}


/* ============================================================
   26 — DETAIL LABEL
   ============================================================ */

.home-case-study-label {
    display: block;

    margin-bottom: 10px;

    font-family: var(--font-primary);

    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: var(--color-accent);
}


/* ============================================================
   27 — DETAIL LIST
   ============================================================ */

.home-case-study-list {
    display: grid;

    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* ============================================================
   28 — DETAIL LIST ITEM
   ============================================================ */

.home-case-study-list li {
    position: relative;

    margin: 0;
    padding: 0 0 0 16px;

    font-family: var(--font-primary);

    font-size: 12px;
    font-weight: var(--body-weight, 400);
    line-height: 1.5;

    color: var(--color-body);
}


/* ============================================================
   29 — LIST MARK
   ============================================================ */

.home-case-study-list li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0.68em;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--color-accent);

    box-shadow: 0 0 0 3px var(--home-case-study-tint);

    transform: translateY(-50%);
}


/* ============================================================
   30 — PENDING RESULTS
   ============================================================ */

.home-case-study-pending {
    position: relative;

    margin: 0;
    padding: 10px 12px 10px 28px;

    border: 1px dashed var(--color-border-hover);
    border-radius: 8px;

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

    font-family: var(--font-primary);

    font-size: 12px;
    font-weight: var(--body-weight, 400);
    line-height: 1.55;

    color: var(--color-secondary);
}

.home-case-study-pending::before {
    content: "";

    position: absolute;

    left: 12px;
    top: 17px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--color-accent);

    transform: translateY(-50%);
}


/* ============================================================
   31 — INDIVIDUAL WEBSITE LINK
   ============================================================ */

.home-case-study-link {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    width: fit-content;

    margin-top: auto;
    padding-top: 24px;

    font-family: var(--font-primary);

    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;

    color: var(--color-heading);

    text-decoration: none;

    transition: color var(--transition-fast, 150ms ease);
}

.home-case-study-link:hover {
    color: var(--color-accent);
}

.home-case-study-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;

    border-radius: 3px;
}

.home-case-study-link svg {
    display: block;

    flex: 0 0 26px;

    width: 26px;
    height: 26px;

    padding: 6px;

    border: 1px solid var(--color-border-hover);
    border-radius: 50%;

    box-sizing: border-box;

    stroke: currentColor;

    transition:
        border-color var(--transition-fast, 150ms ease),
        background var(--transition-fast, 150ms ease),
        transform var(--transition-fast, 150ms ease);
}

.home-case-study-link:hover svg {
    border-color: var(--color-accent);

    background: var(--home-case-study-tint-strong);

    transform: translateX(3px);
}


/* ============================================================
   32 — FOOTER CTA
   ============================================================ */

.home-case-studies-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: 100%;

    margin-top: 26px;
}

.home-case-studies-view-all {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    font-family: var(--font-primary);

    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;

    color: var(--color-heading);

    text-decoration: none;

    transition: color var(--transition-fast, 150ms ease);
}

.home-case-studies-view-all:hover {
    color: var(--color-accent);
}

.home-case-studies-view-all:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;

    border-radius: 3px;
}

.home-case-studies-view-all svg {
    display: block;

    flex: 0 0 26px;

    width: 26px;
    height: 26px;

    padding: 6px;

    border: 1px solid var(--color-border-hover);
    border-radius: 50%;

    box-sizing: border-box;

    stroke: currentColor;

    transition:
        border-color var(--transition-fast, 150ms ease),
        background var(--transition-fast, 150ms ease),
        transform var(--transition-fast, 150ms ease);
}

.home-case-studies-view-all:hover svg {
    border-color: var(--color-accent);

    background: var(--home-case-study-tint-strong);

    transform: translateX(3px);
}


/* ============================================================
   33 — MOTION (only when the visitor allows motion)
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

    /*
     * Status dot in "Results" gently pulses.
     * Opacity only, so it stays cheap.
     */
    .home-case-study-pending::before {
        animation: home-case-study-pulse 2.4s ease-in-out infinite;
    }

    @keyframes home-case-study-pulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.3;
        }
    }

    /*
     * Cards ease in as they enter the viewport.
     * Browsers without scroll-driven animation simply
     * show the cards normally.
     */
    @supports (animation-timeline: view()) {

        .home-case-study {
            animation: home-case-study-enter linear backwards;
            animation-timeline: view();
            animation-range: entry 0% entry 30%;
        }

        @keyframes home-case-study-enter {

            from {
                opacity: 0;
                translate: 0 14px;
            }

            to {
                opacity: 1;
                translate: 0 0;
            }
        }
    }
}


/* ============================================================
   34 — TABLET
   768px — 1023px
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

    .home-case-studies-section {
        padding-top: calc(var(--section-padding-y, 30px) / 2);
        padding-bottom: calc(var(--section-padding-y, 30px) / 2);
    }


    .home-case-studies-container {
        padding-left: var(--container-padding-x, 22px);
        padding-right: var(--container-padding-x, 22px);
    }


    .home-case-studies-header {
        margin-bottom: 26px;
    }


    .home-case-studies-title {
        /*
         * Tablet = 34px
         */
        font-size: 34px;
        line-height: 1.15;
    }


    .home-case-study {
        grid-template-columns:
            46px
            minmax(0, 0.9fr)
            minmax(0, 1fr);
    }


    .home-case-study-content {
        padding: 26px 24px;
    }


    .home-case-study-details {
        grid-template-columns: 1fr;

        gap: 18px;
    }
}


/* ============================================================
   35 — MOBILE
   0px — 767px
   ============================================================ */

@media (max-width: 767px) {

    .home-case-studies-section {
        padding-top: calc(var(--section-padding-y-mobile, 20px) / 2);
        padding-bottom: calc(var(--section-padding-y-mobile, 20px) / 2);
    }


    .home-case-studies-container {
        padding-left: var(--container-padding-x-mobile, 15px);
        padding-right: var(--container-padding-x-mobile, 15px);
    }


    .home-case-studies-header {
        margin-bottom: 24px;
    }


    .home-case-studies-heading-row {
        gap: 9px;

        margin-bottom: 12px;
    }


    .home-case-studies-heading-line {
        width: 26px;
        flex-basis: 26px;
    }


    .home-case-studies-heading-note {
        font-size: 9px;
    }


    .home-case-studies-title {
        /*
         * Slimmer on mobile and always on one line.
         * Scales with the screen width.
         */
        font-size: clamp(19px, 5.6vw, 26px);
        line-height: 1.2;
        letter-spacing: -0.025em;

        white-space: nowrap;
    }


    .home-case-studies-subline {
        margin-top: 12px;

        font-size: 14px;
        line-height: 1.6;
    }


    .home-case-studies-list {
        gap: 14px;
    }


    .home-case-study {
        display: block;

        border-radius: var(--radius-md, 14px);
    }


    /*
     * Index becomes a small badge in the corner.
     */
    .home-case-study-index {
        position: absolute;

        z-index: 3;

        top: 17px;
        right: 22px;

        flex-direction: row;

        width: 32px;
        height: 22px;

        padding: 0;
        gap: 0;

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

        border: 1px solid var(--color-border);
        border-radius: 999px;

        background: var(--color-surface-soft);
    }


    .home-case-study-index::after {
        display: none;
    }


    .home-case-study-visual {
        padding: 10px;
    }


    .home-case-study-image-link {
        border-radius: 10px;
    }


    .home-case-study-browser {
        height: 32px;

        padding: 0 10px;
    }


    .home-case-study-browser-url {
        /*
         * Leaves room for the index badge.
         */
        max-width: calc(100% - 84px);
    }


    .home-case-study-image-arrow {
        right: 10px;
        bottom: 10px;

        width: 32px;
        height: 32px;

        opacity: 1;
        transform: none;
    }


    .home-case-study-content {
        padding: 20px 20px 22px;
    }


    .home-case-study-meta {
        margin-bottom: 14px;
    }


    .home-case-study-title {
        font-size: 21px;

        line-height: 1.14;
    }


    .home-case-study-description {
        margin-top: 12px;

        font-size: 13px;
        line-height: 1.62;
    }


    .home-case-study-details {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-top: 20px;
        padding-top: 17px;
    }


    .home-case-study-link {
        padding-top: 20px;

        font-size: 12px;
    }


    .home-case-studies-footer {
        justify-content: flex-start;

        margin-top: 20px;
    }


    .home-case-studies-view-all {
        font-size: 12px;
    }
}


/* ============================================================
   36 — SMALL MOBILE
   ============================================================ */

@media (max-width: 380px) {

    .home-case-study-content {
        padding: 18px;
    }


    .home-case-study-title {
        font-size: 19px;
    }


    .home-case-study-description {
        font-size: 12px;
    }


    .home-case-study-list li,
    .home-case-study-pending {
        font-size: 11px;
    }
}


/* ============================================================
   37 — VERY SMALL SCREENS
   Only if the heading cannot fit, let it wrap safely.
   ============================================================ */

@media (max-width: 340px) {

    .home-case-studies-title {
        white-space: normal;
    }
}


/* ============================================================
   38 — REDUCED MOTION
   ============================================================ */

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

    .home-case-study,
    .home-case-study::before,
    .home-case-study-image-link img,
    .home-case-study-image-arrow,
    .home-case-study-link,
    .home-case-study-link svg,
    .home-case-studies-view-all,
    .home-case-studies-view-all svg {
        transition: none;
    }


    .home-case-study:hover {
        transform: none;
    }


    .home-case-study:hover .home-case-study-image-link img {
        transform: none;
    }
}


/* ============================================================
   END — CLICKIN HOMEPAGE CASE STUDIES CSS
   ============================================================ */
/* ============================================================
   START — CLICKIN HOMEPAGE PROCESS SECTION CSS
   ============================================================ */


/* ============================================================
   01 — SECTION
   ============================================================ */

.home-process-section {
    position: relative;

    width: 100%;
    margin: 0;

    padding-top: calc(var(--section-padding-y, 30px) / 2);
    padding-bottom: calc(var(--section-padding-y, 30px) / 2);

    background: var(--color-bg);
    color: var(--color-body);

    box-sizing: border-box;

    /*
     * Theme-safe fallbacks (site variables only).
     */
    --home-process-tint: transparent;
    --home-process-tint-strong: var(--color-surface-soft);
    --home-process-line-accent: var(--color-border-hover);
}

/*
 * Accent tints, derived from the same site variables,
 * so light and dark mode both follow the theme.
 */
@supports (color: color-mix(in srgb, red, blue)) {

    .home-process-section {
        --home-process-tint: color-mix(in srgb, var(--color-accent) 10%, transparent);
        --home-process-tint-strong: color-mix(in srgb, var(--color-accent) 16%, transparent);
        --home-process-line-accent: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
    }
}


/* ============================================================
   02 — CONTAINER
   ============================================================ */

.home-process-container {
    width: 100%;
    max-width: var(--container-width, 1180px);

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--container-padding-x, 22px);
    padding-right: var(--container-padding-x, 22px);

    box-sizing: border-box;
}


/* ============================================================
   03 — HEADER
   ============================================================ */

.home-process-header {
    max-width: 760px;

    margin: 0 0 34px;
    padding: 0;
}


/* ============================================================
   04 — EYEBROW
   ============================================================ */

.home-process-eyebrow {
    display: block;

    margin-bottom: 12px;

    font-family: var(--font-primary);

    font-size: 11px;
    font-weight: var(--label-weight, 500);
    line-height: 1.4;

    letter-spacing: 0.10em;
    text-transform: uppercase;

    color: var(--color-accent);
}


/* ============================================================
   05 — MAIN HEADING
   ============================================================ */

.home-process-title {
    margin: 0;
    padding: 0;
    max-width: 760px;

    font-family: var(--font-primary);

    /*
     * Desktop = 40px
     */
    font-size: 40px;
    font-weight: var(--heading-weight, 600);
    line-height: var(--heading-line-height, 1.15);
    letter-spacing: var(--heading-letter-spacing, -0.025em);

    color: var(--color-heading);

    overflow-wrap: break-word;
}


/* ============================================================
   06 — SUBLINE
   ============================================================ */

.home-process-subline {
    max-width: 700px;

    margin: 12px 0 0;
    padding: 0;

    font-family: var(--font-primary);

    font-size: var(--body-size, 15px);
    font-weight: var(--body-weight, 400);
    line-height: var(--body-line-height, 1.6);

    color: var(--color-secondary);

    overflow-wrap: break-word;
}


/* ============================================================
   07 — PROCESS GRID
   ============================================================ */

.home-process-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    width: 100%;
}


/* ============================================================
   08 — CONNECTING RAIL (desktop only)
   Sits behind the cards, at the vertical centre of the step
   badges. It only becomes visible in the gaps between cards,
   which reads as a rail linking the four steps together.
   ============================================================ */

.home-process-grid::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: 0;
    right: 0;

    /*
     * card padding-top (28px) + half the badge height (17px)
     */
    top: 45px;

    height: 1px;

    background: linear-gradient(
        to right,
        transparent,
        var(--home-process-line-accent) 6%,
        var(--home-process-line-accent) 94%,
        transparent
    );

    pointer-events: none;
}


/* ============================================================
   09 — PROCESS CARD
   ============================================================ */

.home-process-card {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 100%;

    padding: 28px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);

    box-sizing: border-box;

    isolation: isolate;

    transition:
        transform var(--transition-normal, 180ms ease),
        border-color var(--transition-normal, 180ms ease),
        box-shadow var(--transition-normal, 180ms ease);
}


/* ============================================================
   10 — CARD GLOW (behind content, on hover)
   ============================================================ */

.home-process-card::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background: radial-gradient(
        90% 120% at 0% 0%,
        var(--home-process-tint),
        transparent 60%
    );

    opacity: 0;

    pointer-events: none;

    transition: opacity var(--transition-normal, 180ms ease);
}


/* ============================================================
   11 — CARD HOVER
   ============================================================ */

.home-process-card:hover {
    border-color: var(--home-process-line-accent);
}

.home-process-card:hover::before {
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {

    .home-process-card:hover {
        transform: translateY(-3px);

        box-shadow: var(--shadow-md);
    }
}


/* ============================================================
   12 — CARD TOP
   ============================================================ */

.home-process-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin-bottom: 26px;
}


/* ============================================================
   13 — STEP NUMBER (badge)
   ============================================================ */

.home-process-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

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

    border: 1px solid var(--color-border);
    border-radius: 50%;

    font-family: var(--font-primary);

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.02em;

    color: var(--color-secondary);

    box-sizing: border-box;

    transition:
        color var(--transition-normal, 180ms ease),
        border-color var(--transition-normal, 180ms ease),
        background var(--transition-normal, 180ms ease);
}

.home-process-card:hover .home-process-number {
    border-color: var(--color-accent);

    background: var(--home-process-tint-strong);

    color: var(--color-accent);
}


/* ============================================================
   14 — ICON
   ============================================================ */

.home-process-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    background: var(--home-process-tint);

    border: 1px solid var(--color-border);
    border-radius: 9px;

    color: var(--color-accent);

    box-sizing: border-box;

    transition: border-color var(--transition-normal, 180ms ease);
}

.home-process-card:hover .home-process-icon {
    border-color: var(--home-process-line-accent);
}

.home-process-icon svg {
    display: block;

    width: 19px;
    height: 19px;
}


/* ============================================================
   15 — STEP TITLE
   ============================================================ */

.home-process-step-title {
    margin: 0;
    padding: 0;

    font-family: var(--font-primary);

    font-size: 21px;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.3;

    letter-spacing: -0.02em;

    color: var(--color-heading);

    overflow-wrap: break-word;
}


/* ============================================================
   16 — STEP DESCRIPTION
   ============================================================ */

.home-process-step-text {
    margin: 12px 0 0;
    padding: 0;

    font-family: var(--font-primary);

    font-size: var(--body-size, 15px);
    font-weight: var(--body-weight, 400);
    line-height: var(--body-line-height, 1.6);

    color: var(--color-secondary);

    overflow-wrap: break-word;
}


/* ============================================================
   17 — TIMELINE
   ============================================================ */

.home-process-timeline {
    display: flex;
    flex-direction: column;

    gap: 6px;

    margin-top: auto;
    padding-top: 22px;

    border-top: 1px solid var(--color-border);
}


.home-process-timeline-label {
    font-family: var(--font-primary);

    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.11em;
    text-transform: uppercase;

    color: var(--color-accent);
}


.home-process-timeline-value {
    font-family: var(--font-primary);

    font-size: 12px;
    font-weight: var(--body-weight, 400);
    line-height: 1.5;

    color: var(--color-secondary);
}


/* ============================================================
   18 — TIMELINE NOTE
   ============================================================ */

.home-process-note {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    max-width: 760px;

    margin-top: 24px;
    padding: 16px 18px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);

    box-sizing: border-box;
}


.home-process-note-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    flex: 0 0 26px;

    background: var(--home-process-tint);

    border: 1px solid var(--color-border);
    border-radius: 50%;

    color: var(--color-accent);

    box-sizing: border-box;
}


.home-process-note-icon svg {
    display: block;

    width: 15px;
    height: 15px;
}


.home-process-note p {
    margin: 0;
    padding: 0;

    font-family: var(--font-primary);

    font-size: 12px;
    font-weight: var(--body-weight, 400);
    line-height: 1.55;

    color: var(--color-secondary);
}


.home-process-note strong {
    font-weight: 600;
    color: var(--color-body);
}


/* ============================================================
   19 — CTA
   ============================================================ */

.home-process-cta {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100%;

    margin-top: 28px;
}


.home-process-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    gap: 10px;

    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;

    font-family: var(--font-primary);

    font-size: var(--button-text-size, 14px);
    font-weight: var(--button-weight, 600);
    line-height: var(--button-line-height, 1.4);

    color: var(--color-heading);

    text-decoration: none;

    cursor: pointer;

    transition: color var(--transition-normal, 180ms ease);
}


.home-process-cta-link:hover {
    color: var(--color-accent);
}


.home-process-cta-link:focus-visible {
    outline: var(--focus-width, 2px) solid var(--color-focus, var(--color-accent));
    outline-offset: var(--focus-offset, 2px);

    border-radius: var(--radius-sm, 6px);
}


.home-process-cta-link svg {
    display: block;

    width: 26px;
    height: 26px;

    padding: 6px;

    flex: 0 0 26px;

    border: 1px solid var(--color-border-hover);
    border-radius: 50%;

    box-sizing: border-box;

    color: currentColor;

    transition:
        border-color var(--transition-fast, 150ms ease),
        background var(--transition-fast, 150ms ease),
        transform var(--transition-fast, 150ms ease);
}


.home-process-cta-link:hover svg {
    border-color: var(--color-accent);

    background: var(--home-process-tint-strong);

    transform: translateX(3px);
}


/* ============================================================
   20 — MOTION (only when the visitor allows motion)
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

    /*
     * Cards ease in as they enter the viewport.
     * Browsers without scroll-driven animation simply
     * show the cards normally.
     */
    @supports (animation-timeline: view()) {

        .home-process-card {
            animation: home-process-enter linear backwards;
            animation-timeline: view();
            animation-range: entry 0% entry 30%;
        }

        @keyframes home-process-enter {

            from {
                opacity: 0;
                translate: 0 14px;
            }

            to {
                opacity: 1;
                translate: 0 0;
            }
        }
    }
}


/* ============================================================
   21 — TABLET
   768px — 1023px
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

    .home-process-section {
        padding-top: calc(var(--section-padding-y, 30px) / 2);
        padding-bottom: calc(var(--section-padding-y, 30px) / 2);
    }


    .home-process-container {
        padding-left: var(--container-padding-x, 22px);
        padding-right: var(--container-padding-x, 22px);
    }


    .home-process-header {
        margin-bottom: 28px;
    }


    .home-process-title {
        /*
         * Tablet = 34px
         */
        font-size: 34px;
        line-height: 1.15;
    }


    .home-process-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;
    }


    .home-process-grid::before {
        content: none;
    }


    .home-process-card {
        padding: 24px;
    }


    .home-process-card-top {
        margin-bottom: 22px;
    }


    .home-process-note {
        margin-top: 20px;
    }


    .home-process-cta {
        margin-top: 28px;
    }
}


/* ============================================================
   22 — MOBILE
   0px — 767px
   ============================================================ */

@media (max-width: 767px) {

    .home-process-section {
        padding-top: calc(var(--section-padding-y-mobile, 20px) / 2);
        padding-bottom: calc(var(--section-padding-y-mobile, 20px) / 2);
    }


    .home-process-container {
        padding-left: var(--container-padding-x-mobile, 15px);
        padding-right: var(--container-padding-x-mobile, 15px);
    }


    .home-process-header {
        margin-bottom: 26px;
    }


    .home-process-title {
        /*
         * Slimmer on mobile. This heading is longer than a
         * short tagline, so it wraps naturally instead of
         * being forced onto one line.
         */
        font-size: clamp(22px, 6vw, 28px);
        line-height: 1.24;
        letter-spacing: -0.02em;
    }


    .home-process-subline {
        margin-top: 12px;

        font-size: 14px;
        line-height: 1.6;
    }


    .home-process-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .home-process-grid::before {
        content: none;
    }


    .home-process-card {
        padding: 24px;

        border-radius: var(--radius-md, 14px);
    }


    .home-process-card-top {
        margin-bottom: 20px;
    }


    .home-process-number {
        width: 32px;
        height: 32px;

        flex-basis: 32px;
    }


    .home-process-icon {
        width: 36px;
        height: 36px;

        flex-basis: 36px;

        border-radius: 8px;
    }


    .home-process-icon svg {
        width: 18px;
        height: 18px;
    }


    .home-process-step-title {
        font-size: 20px;
    }


    .home-process-step-text {
        margin-top: 11px;

        font-size: 14px;
        line-height: 1.6;
    }


    .home-process-timeline {
        padding-top: 20px;
    }


    .home-process-timeline-value {
        font-size: 12px;
    }


    .home-process-note {
        margin-top: 18px;

        gap: 10px;

        padding: 14px 16px;
    }


    .home-process-note p {
        font-size: 12px;
        line-height: 1.55;
    }


    .home-process-cta {
        margin-top: 26px;
    }


    .home-process-cta-link {
        font-size: 14px;
    }
}


/* ============================================================
   23 — SMALL MOBILE
   ============================================================ */

@media (max-width: 380px) {

    .home-process-card {
        padding: 20px;
    }


    .home-process-step-title {
        font-size: 19px;
    }


    .home-process-step-text {
        font-size: 13px;
    }
}


/* ============================================================
   24 — REDUCED MOTION
   ============================================================ */

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

    .home-process-card,
    .home-process-card::before,
    .home-process-number,
    .home-process-icon,
    .home-process-cta-link,
    .home-process-cta-link svg {
        transition: none;
    }


    .home-process-card:hover {
        transform: none;
    }


    .home-process-cta-link:hover svg {
        transform: none;
    }
}


/* ============================================================
   END — CLICKIN HOMEPAGE PROCESS SECTION CSS
   ============================================================ */  

/* ============================================================
   START — CLICKIN HOMEPAGE NUMBERS SECTION CSS
   ============================================================ */

.home-numbers-section {
    width: 100%;
    margin: 0;
    padding: 20px 0;
    background: var(--color-bg);
    color: var(--color-body);
    box-sizing: border-box;
}

.home-numbers-container {
    width: 100%;
    max-width: var(--container-width, 1180px);
    margin: 0 auto;
    padding-left: var(--container-padding-x, 22px);
    padding-right: var(--container-padding-x, 22px);
    box-sizing: border-box;
}

.home-numbers-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    box-sizing: border-box;
}

.home-number-item {
    min-width: 0;
    padding: 24px 26px;
    box-sizing: border-box;
}

.home-number-item + .home-number-item {
    border-left: 1px solid var(--color-border);
}


/* ============================================================
   COUNTER VALUE
   ============================================================ */

.home-number-value {
    display: flex;
    align-items: center;
    min-height: 42px;
    margin: 0;

    font-family: var(--font-primary);
    font-size: 42px;
    font-weight: var(--heading-weight, 600);
    line-height: 1;
    letter-spacing: -0.04em;

    color: var(--color-heading);

    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;

    box-sizing: border-box;
}

.home-number-value-text {
    font-size: 34px;
    letter-spacing: -0.035em;
}


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

.home-number-title {
    margin: 13px 0 0;

    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
    letter-spacing: -0.01em;

    color: var(--color-heading);

    overflow-wrap: break-word;
}


/* ============================================================
   SUPPORTING TEXT
   ============================================================ */

.home-number-support {
    margin: 4px 0 0;

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: var(--body-weight, 400);
    line-height: 1.45;

    color: var(--color-secondary);

    overflow-wrap: break-word;
}


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

@media (min-width: 768px) and (max-width: 1023px) {

    .home-numbers-section {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .home-numbers-container {
        padding-left: var(--container-padding-x, 22px);
        padding-right: var(--container-padding-x, 22px);
    }

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

    .home-number-item {
        padding: 22px;
    }

    .home-number-item:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--color-border);
    }

    .home-number-item:nth-child(4) {
        border-top: 1px solid var(--color-border);
    }

    .home-number-value {
        min-height: 38px;
        font-size: 38px;
    }

    .home-number-value-text {
        font-size: 31px;
    }
}


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

@media (max-width: 767px) {

    .home-numbers-section {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .home-numbers-container {
        padding-left: var(--container-padding-x-mobile, 15px);
        padding-right: var(--container-padding-x-mobile, 15px);
    }

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

    .home-number-item {
        padding: 20px 15px;
    }

    .home-number-item + .home-number-item {
        border-left: 1px solid var(--color-border);
    }

    .home-number-item:nth-child(3),
    .home-number-item:nth-child(4) {
        border-top: 1px solid var(--color-border);
    }

    .home-number-item:nth-child(3) {
        border-left: 0;
    }

    .home-number-value {
        min-height: 34px;
        font-size: 34px;
        letter-spacing: -0.04em;
    }

    .home-number-value-text {
        min-height: 27px;
        font-size: 27px;
        letter-spacing: -0.03em;
    }

    .home-number-title {
        margin-top: 11px;
        font-size: 13px;
        line-height: 1.4;
    }

    .home-number-support {
        font-size: 11px;
        line-height: 1.45;
    }
}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 380px) {

    .home-number-item {
        padding: 18px 12px;
    }

    .home-number-value {
        min-height: 31px;
        font-size: 31px;
    }

    .home-number-value-text {
        min-height: 24px;
        font-size: 24px;
    }

    .home-number-title {
        font-size: 12px;
    }

    .home-number-support {
        font-size: 10.5px;
    }
}


/* ============================================================
   END — CLICKIN HOMEPAGE NUMBERS SECTION CSS
   ============================================================ */
/* ============================================================
   START — CLICKIN HOMEPAGE GUARANTEE SECTION CSS
   ============================================================ */

.home-guarantee-section {
    width: 100%;
    margin: 0;
    padding: 20px 0;
    background: var(--color-bg);
    color: var(--color-body);
    box-sizing: border-box;
}

.home-guarantee-container {
    width: 100%;
    max-width: var(--container-width, 1180px);
    margin: 0 auto;
    padding-left: var(--container-padding-x, 22px);
    padding-right: var(--container-padding-x, 22px);
    box-sizing: border-box;
}


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

.home-guarantee-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: 64px;
    row-gap: 28px;
    align-items: start;
}


/* ============================================================
   HEADING
   ============================================================ */

.home-guarantee-heading {
    min-width: 0;
}

.home-guarantee-eyebrow {
    display: block;
    margin: 0 0 11px;

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--label-weight, 500);
    line-height: 1.4;
    letter-spacing: 0.10em;
    text-transform: uppercase;

    color: var(--color-accent);
}

.home-guarantee-title {
    margin: 0;
    max-width: 620px;

    font-family: var(--font-primary);
    font-size: 40px;
    font-weight: var(--heading-weight, 600);
    line-height: var(--heading-line-height, 1.15);
    letter-spacing: var(--heading-letter-spacing, -0.025em);

    color: var(--color-heading);

    overflow-wrap: break-word;
}

.home-guarantee-title span {
    color: var(--color-accent);
}

.home-guarantee-intro {
    max-width: 520px;
    margin: 13px 0 0;

    font-family: var(--font-primary);
    font-size: var(--body-size, 15px);
    font-weight: var(--body-weight, 400);
    line-height: var(--body-line-height, 1.6);

    color: var(--color-secondary);

    overflow-wrap: break-word;
}


/* ============================================================
   GUARANTEE DETAILS
   ============================================================ */

.home-guarantee-details {
    display: flex;
    flex-direction: column;

    border-top: 1px solid var(--color-border);
}

.home-guarantee-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 16px;

    padding: 18px 0;

    border-bottom: 1px solid var(--color-border);

    box-sizing: border-box;
}

.home-guarantee-index {
    padding-top: 2px;

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;

    color: var(--color-accent);
}

.home-guarantee-item-content {
    min-width: 0;
}

.home-guarantee-item-title {
    margin: 0;

    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
    letter-spacing: -0.015em;

    color: var(--color-heading);

    overflow-wrap: break-word;
}

.home-guarantee-item-text {
    max-width: 620px;
    margin: 6px 0 0;

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: var(--body-weight, 400);
    line-height: 1.55;

    color: var(--color-secondary);

    overflow-wrap: break-word;
}


/* ============================================================
   CTA
   ============================================================ */

.home-guarantee-action {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    gap: 14px;

    padding-top: 2px;
}

.home-guarantee-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 40px;
    padding: 0 16px;

    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md, 9px);

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    /*
     * Explicit text color prevents theme/anchor
     * styles from making the text disappear.
     */
    color: #FFFFFF !important;

    text-decoration: none !important;

    box-sizing: border-box;

    transition:
        transform 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.home-guarantee-button span {
    color: #FFFFFF !important;
}

.home-guarantee-button svg {
    display: block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;

    color: #FFFFFF;

    transition:
        transform 160ms ease;
}

.home-guarantee-button:hover {
    transform: translateY(-1px);

    background: var(--color-accent);
    border-color: var(--color-accent);

    color: #FFFFFF !important;

    box-shadow:
        0 6px 18px rgb(124 92 255 / 18%);
}

.home-guarantee-button:hover span {
    color: #FFFFFF !important;
}

.home-guarantee-button:hover svg {
    transform: translateX(3px);
}

.home-guarantee-button:active {
    transform: translateY(0);
}

.home-guarantee-button:focus-visible {
    outline:
        var(--focus-width, 2px)
        solid
        var(--color-focus);

    outline-offset: 3px;
}

.home-guarantee-note {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--body-weight, 400);
    line-height: 1.4;

    color: var(--color-secondary);
}


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

@media (min-width: 768px) and (max-width: 1023px) {

    .home-guarantee-section {
        padding: 20px 0;
    }

    .home-guarantee-container {
        padding-left: var(--container-padding-x, 22px);
        padding-right: var(--container-padding-x, 22px);
    }

    .home-guarantee-layout {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        column-gap: 40px;
        row-gap: 24px;
    }

    .home-guarantee-title {
        font-size: 34px;
        line-height: 1.15;
    }

    .home-guarantee-intro {
        font-size: 14px;
    }
}


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

@media (max-width: 767px) {

    .home-guarantee-section {
        padding: 20px 0;
    }

    .home-guarantee-container {
        padding-left: var(--container-padding-x-mobile, 15px);
        padding-right: var(--container-padding-x-mobile, 15px);
    }

    .home-guarantee-layout {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    .home-guarantee-title {
        font-size: 30px;
        line-height: 1.18;
    }

    .home-guarantee-intro {
        margin-top: 11px;
        font-size: 14px;
        line-height: 1.55;
    }

    .home-guarantee-item {
        grid-template-columns: 26px minmax(0, 1fr);
        column-gap: 12px;
        padding: 16px 0;
    }

    .home-guarantee-item-title {
        font-size: 15px;
    }

    .home-guarantee-item-text {
        margin-top: 5px;
        font-size: 12.5px;
        line-height: 1.55;
    }

    .home-guarantee-action {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .home-guarantee-button {
        min-height: 40px;
        padding: 0 15px;
    }
}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 380px) {

    .home-guarantee-title {
        font-size: 30px;
    }

    .home-guarantee-item-title {
        font-size: 14px;
    }

    .home-guarantee-item-text {
        font-size: 12px;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    .home-guarantee-button,
    .home-guarantee-button svg {
        transition: none;
    }

    .home-guarantee-button:hover {
        transform: none;
    }

    .home-guarantee-button:hover svg {
        transform: none;
    }
}


/* ============================================================
   END — CLICKIN HOMEPAGE GUARANTEE SECTION CSS
   ============================================================ */

/* ============================================================
   START — CLICKIN HOMEPAGE PRICING / PACKAGES SECTION CSS
   ============================================================ */

.home-pricing-section {
    width: 100%;
    margin: 0;
    padding: 20px 0;
    background: var(--color-bg);
    color: var(--color-body);
    box-sizing: border-box;
}

.home-pricing-container {
    width: 100%;
    max-width: var(--container-width, 1180px);
    margin: 0 auto;
    padding-left: var(--container-padding-x, 22px);
    padding-right: var(--container-padding-x, 22px);
    box-sizing: border-box;
}


/* ============================================================
   MAIN BLOCK
   ============================================================ */

.home-pricing-block {
    display: grid;

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

    align-items: center;

    gap: 48px;

    padding: 30px 0;

    border-top:
        1px solid var(--color-border);

    border-bottom:
        1px solid var(--color-border);

    box-sizing: border-box;
}


/* ============================================================
   CONTENT
   ============================================================ */

.home-pricing-main {
    min-width: 0;
    max-width: 760px;
}

.home-pricing-eyebrow {
    display: block;
    margin: 0 0 11px;

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--label-weight, 500);
    line-height: 1.4;
    letter-spacing: 0.10em;
    text-transform: uppercase;

    color: var(--color-accent);
}

.home-pricing-title {
    margin: 0;

    font-family: var(--font-primary);
    font-size: 40px;
    font-weight: var(--heading-weight, 600);
    line-height: var(--heading-line-height, 1.15);
    letter-spacing: var(--heading-letter-spacing, -0.025em);

    color: var(--color-heading);

    overflow-wrap: break-word;
}

.home-pricing-description {
    max-width: 650px;
    margin: 12px 0 0;

    font-family: var(--font-primary);
    font-size: var(--body-size, 15px);
    font-weight: var(--body-weight, 400);
    line-height: var(--body-line-height, 1.6);

    color: var(--color-secondary);

    overflow-wrap: break-word;
}


/* ============================================================
   ACTION
   ============================================================ */

.home-pricing-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    flex: 0 0 auto;
}

.home-pricing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 42px;
    padding: 0 17px;

    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md, 9px);

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    color: #FFFFFF !important;
    text-decoration: none !important;

    white-space: nowrap;

    box-sizing: border-box;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        filter 160ms ease;
}

.home-pricing-button span {
    color: #FFFFFF !important;
}

.home-pricing-button svg {
    display: block;

    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    color: #FFFFFF;

    transition:
        transform 160ms ease;
}

.home-pricing-button:hover {
    transform: translateY(-1px);

    color: #FFFFFF !important;

    filter: brightness(1.05);

    box-shadow:
        0 7px 20px rgb(124 92 255 / 18%);
}

.home-pricing-button:hover span {
    color: #FFFFFF !important;
}

.home-pricing-button:hover svg {
    transform: translateX(3px);
}

.home-pricing-button:active {
    transform: translateY(0);
}

.home-pricing-button:focus-visible {
    outline:
        var(--focus-width, 2px)
        solid
        var(--color-focus);

    outline-offset: 3px;
}

.home-pricing-note {
    margin-top: 8px;

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--body-weight, 400);
    line-height: 1.4;

    color: var(--color-secondary);
}


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

@media (min-width: 768px) and (max-width: 1023px) {

    .home-pricing-section {
        padding: 20px 0;
    }

    .home-pricing-container {
        padding-left: var(--container-padding-x, 22px);
        padding-right: var(--container-padding-x, 22px);
    }

    .home-pricing-block {
        gap: 32px;
        padding: 26px 0;
    }

    .home-pricing-title {
        font-size: 34px;
        line-height: 1.15;
    }

    .home-pricing-description {
        font-size: 14px;
    }
}


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

@media (max-width: 767px) {

    .home-pricing-section {
        padding: 20px 0;
    }

    .home-pricing-container {
        padding-left: var(--container-padding-x-mobile, 15px);
        padding-right: var(--container-padding-x-mobile, 15px);
    }

    .home-pricing-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 20px;

        padding: 24px 0;
    }

    .home-pricing-title {
        font-size: 30px;
        line-height: 1.18;
    }

    .home-pricing-description {
        margin-top: 11px;

        font-size: 14px;
        line-height: 1.55;
    }

    .home-pricing-action {
        width: 100%;
    }

    .home-pricing-button {
        min-height: 42px;
        padding: 0 16px;

        font-size: 13px;
    }

    .home-pricing-note {
        font-size: 10.5px;
    }
}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 380px) {

    .home-pricing-title {
        font-size: 30px;
    }

    .home-pricing-description {
        font-size: 13px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    .home-pricing-button,
    .home-pricing-button svg {
        transition: none;
    }

    .home-pricing-button:hover {
        transform: none;
    }

    .home-pricing-button:hover svg {
        transform: none;
    }

}


/* ============================================================
   END — CLICKIN HOMEPAGE PRICING / PACKAGES SECTION CSS
   ============================================================ */
   
/* ============================================================
   START — CLICKIN HOMEPAGE FAQ + BLOG SECTION CSS
   ============================================================ */

.home-faq-blog-section {
    width: 100%;
    margin: 0;
    padding: 20px 0;
    background: var(--color-bg);
    color: var(--color-body);
    box-sizing: border-box;
}

.home-faq-blog-container {
    width: 100%;
    max-width: var(--container-width, 1180px);
    margin: 0 auto;
    padding-left: var(--container-padding-x, 22px);
    padding-right: var(--container-padding-x, 22px);
    box-sizing: border-box;
}


/* ============================================================
   FAQ ROW
   ============================================================ */

.home-faq-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    padding:
        18px 0;

    border-top:
        1px solid var(--color-border);

    border-bottom:
        1px solid var(--color-border);

    box-sizing: border-box;
}

.home-faq-copy {
    min-width: 0;
}

.home-faq-eyebrow {
    display: block;
    margin: 0 0 5px;

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--label-weight, 500);
    line-height: 1.4;
    letter-spacing: 0.10em;
    text-transform: uppercase;

    color: var(--color-accent);
}

.home-faq-title {
    margin: 0;

    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: var(--heading-weight, 600);
    line-height: 1.3;
    letter-spacing: -0.02em;

    color: var(--color-heading);
}

.home-faq-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    flex: 0 0 auto;

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    color: var(--color-heading);
    text-decoration: none;

    transition:
        color 160ms ease,
        gap 160ms ease;
}

.home-faq-link svg {
    display: block;

    width: 15px;
    height: 15px;

    color: var(--color-accent);

    transition:
        transform 160ms ease;
}

.home-faq-link:hover {
    color: var(--color-accent);
    gap: 10px;
}

.home-faq-link:hover svg {
    transform: translateX(2px);
}

.home-faq-link:focus-visible {
    outline:
        var(--focus-width, 2px)
        solid
        var(--color-focus);

    outline-offset: 3px;

    border-radius:
        var(--radius-sm, 6px);
}


/* ============================================================
   BLOG SECTION
   ============================================================ */

.home-blog-section {
    width: 100%;
    padding-top: 28px;
}

.home-blog-header {
    max-width: 560px;
    margin-bottom: 20px;
}

.home-blog-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 11px;

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: var(--color-accent);
}

.home-blog-badge::before {
    content: "";

    width: 20px;
    height: 1px;

    flex: 0 0 20px;

    background: var(--color-accent);
}

.home-blog-heading {
    margin: 0;

    font-family: var(--font-primary);
    font-size: 40px;
    font-weight: var(--heading-weight, 600);
    line-height: var(--heading-line-height, 1.15);
    letter-spacing: var(--heading-letter-spacing, -0.025em);

    color: var(--color-heading);
}

.home-blog-subtext {
    max-width: 560px;

    margin: 11px 0 0;

    font-family: var(--font-primary);
    font-size: var(--body-size, 15px);
    font-weight: var(--body-weight, 400);
    line-height: var(--body-line-height, 1.6);

    color: var(--color-secondary);

    overflow-wrap: break-word;
}


/* ============================================================
   LATEST POST
   ============================================================ */

.home-latest-post {
    width: 100%;
    margin: 0;
}

.home-post-box {
    display: flex;
    flex-direction: row;

    width: 100%;

    background: var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-lg, 12px);

    overflow: hidden;

    box-sizing: border-box;

    transition:
        border-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.home-post-box:hover {
    border-color:
        var(--color-border-hover);

    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-md);
}


/* ============================================================
   POST IMAGE
   ============================================================ */

.home-post-thumb {
    display: block;

    width: 42%;

    flex: 0 0 42%;

    aspect-ratio: auto;

    overflow: hidden;

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

    text-decoration: none;
}

.home-post-thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 400ms ease;
}

.home-post-box:hover .home-post-thumb img {
    transform:
        scale(1.025);
}


/* ============================================================
   IMAGE FALLBACK
   ============================================================ */

.home-post-image-fallback {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    min-height: 240px;

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

    color:
        var(--color-accent);

    font-family:
        var(--font-primary);

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

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* ============================================================
   POST CONTENT
   ============================================================ */

.home-post-content {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    width: 58%;

    padding:
        28px 32px;

    overflow: hidden;

    box-sizing: border-box;
}


/*
 * Subtle accent atmosphere.
 * Uses the existing accent variable.
 */

.home-post-content::before {
    content: "";

    position: absolute;

    top: -100px;
    right: -80px;

    width: 260px;
    height: 260px;

    background:
        radial-gradient(
            circle,
            rgb(124 92 255 / 10%),
            transparent 70%
        );

    filter:
        blur(28px);

    pointer-events: none;
}


/*
 * Very subtle grid texture.
 */

.home-post-content::after {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgb(255 255 255 / 2.5%) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgb(255 255 255 / 2.5%) 1px,
            transparent 1px
        );

    background-size:
        26px 26px;

    mask-image:
        radial-gradient(
            ellipse 90% 100% at 100% 0%,
            black 20%,
            transparent 75%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse 90% 100% at 100% 0%,
            black 20%,
            transparent 75%
        );

    pointer-events: none;
}


/* ============================================================
   POST TEXT
   ============================================================ */

.home-post-eyebrow,
.home-post-title,
.home-post-read {
    position: relative;
    z-index: 1;
}

.home-post-eyebrow {
    margin: 0;

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.09em;
    text-transform: uppercase;

    color: var(--color-secondary);
}

.home-post-title {
    margin: 9px 0 0;

    font-family: var(--font-primary);
    font-size: 19px;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
    letter-spacing: -0.015em;

    color: var(--color-heading);

    overflow-wrap: break-word;
}

.home-post-read {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 16px;

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    color: var(--color-heading);

    text-decoration: none;

    transition:
        color 160ms ease,
        gap 160ms ease;
}

.home-post-read svg {
    display: block;

    width: 15px;
    height: 15px;

    color: var(--color-accent);

    transition:
        transform 160ms ease;
}

.home-post-read:hover {
    color: var(--color-accent);
    gap: 11px;
}

.home-post-read:hover svg {
    transform:
        translateX(2px);
}

.home-post-read:focus-visible {
    outline:
        var(--focus-width, 2px)
        solid
        var(--color-focus);

    outline-offset: 3px;

    border-radius:
        var(--radius-sm, 6px);
}


/* ============================================================
   LOADING STATE
   ============================================================ */

.home-blog-loading {
    display: flex;
    align-items: center;
    gap: 9px;

    min-height: 20px;

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: var(--body-weight, 400);

    color: var(--color-secondary);
}

.home-blog-loading-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--color-accent);

    animation:
        homeBlogPulse 1.2s ease-in-out infinite;
}

@keyframes homeBlogPulse {

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

    50% {
        opacity: 1;
        transform: scale(1);
    }

}


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

@media (min-width: 768px) and (max-width: 1023px) {

    .home-faq-blog-section {
        padding: 20px 0;
    }

    .home-faq-blog-container {
        padding-left: var(--container-padding-x, 22px);
        padding-right: var(--container-padding-x, 22px);
    }

    .home-blog-heading {
        font-size: 34px;
        line-height: 1.15;
    }

    .home-post-content {
        padding:
            24px 26px;
    }

    .home-post-title {
        font-size: 17px;
    }

}


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

@media (max-width: 767px) {

    .home-faq-blog-section {
        padding: 20px 0;
    }

    .home-faq-blog-container {
        padding-left:
            var(--container-padding-x-mobile, 15px);

        padding-right:
            var(--container-padding-x-mobile, 15px);
    }


    /* FAQ */

    .home-faq-row {
        gap: 16px;
        padding: 15px 0;
    }

    .home-faq-title {
        font-size: 16px;
    }

    .home-faq-link {
        font-size: 12px;
    }


    /* BLOG */

    .home-blog-section {
        padding-top: 24px;
    }

    .home-blog-header {
        margin-bottom: 18px;
    }

    .home-blog-heading {
        font-size: 30px;
        line-height: 1.18;
    }

    .home-blog-subtext {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.55;
    }


    /* POST */

    .home-post-box {
        flex-direction: column;
    }

    .home-post-thumb {
        width: 100%;
        flex-basis: auto;
        aspect-ratio: 16 / 9;
    }

    .home-post-content {
        width: 100%;
        padding: 20px;
    }

    .home-post-title {
        font-size: 16px;
    }

    .home-post-read {
        margin-top: 14px;
        font-size: 12.5px;
    }

}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 380px) {

    .home-blog-heading {
        font-size: 30px;
    }

    .home-post-content {
        padding: 18px;
    }

    .home-post-title {
        font-size: 15px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    .home-faq-link,
    .home-faq-link svg,
    .home-post-box,
    .home-post-thumb img,
    .home-post-read,
    .home-post-read svg {
        transition: none;
    }

    .home-post-box:hover {
        transform: none;
    }

    .home-post-box:hover .home-post-thumb img {
        transform: none;
    }

    .home-blog-loading-dot {
        animation: none;
    }

}


/* ============================================================
   END — CLICKIN HOMEPAGE FAQ + BLOG SECTION CSS
   ============================================================ */
   
/* ============================================================
   START — CLICKIN HOMEPAGE FINAL CTA + CONTACT SECTION CSS
   ============================================================ */

/* ------------------------------------------------------------
   SECTION
   ------------------------------------------------------------ */

.home-final-cta-section {
    width: 100%;
    margin: 0;
    padding: 22px 0;

    background: var(--color-bg);
    color: var(--color-body);

    box-sizing: border-box;
}

.home-final-cta-container {
    width: 100%;
    max-width: var(--container-width, 1180px);

    margin: 0 auto;
    padding-left: var(--container-padding-x, 22px);
    padding-right: var(--container-padding-x, 22px);

    box-sizing: border-box;
}


/* ------------------------------------------------------------
   MAIN CTA
   ------------------------------------------------------------ */

.home-final-cta-block {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 72px 30px 68px;

    text-align: center;

    background: var(--color-bg);

    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);

    box-sizing: border-box;
}


/* ------------------------------------------------------------
   VERY SUBTLE ACCENT LINE
   ------------------------------------------------------------ */

.home-final-cta-block::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 64px;
    height: 1px;

    transform: translateX(-50%);

    background: var(--color-accent);

    opacity: 0.9;

    pointer-events: none;
}


/* ------------------------------------------------------------
   EYEBROW
   ------------------------------------------------------------ */

.home-final-cta-eyebrow {
    position: relative;
    z-index: 1;

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

    margin: 0 0 18px;

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: var(--color-accent);
}


/* ------------------------------------------------------------
   TITLE
   ------------------------------------------------------------ */

.home-final-cta-title {
    position: relative;
    z-index: 1;

    max-width: 820px;

    margin: 0;

    font-family: var(--font-primary);
    font-size: 48px;
    font-weight: var(--heading-weight, 600);
    line-height: 1.08;
    letter-spacing: -0.035em;

    color: var(--color-heading);

    text-wrap: balance;
    overflow-wrap: break-word;
}

.home-final-cta-title span {
    display: block;
    color: var(--color-accent);
}


/* ------------------------------------------------------------
   DESCRIPTION
   ------------------------------------------------------------ */

.home-final-cta-description {
    position: relative;
    z-index: 1;

    max-width: 570px;

    margin: 20px 0 0;

    font-family: var(--font-primary);
    font-size: var(--body-size, 15px);
    font-weight: var(--body-weight, 400);
    line-height: 1.65;

    color: var(--color-secondary);

    text-wrap: balance;
    overflow-wrap: break-word;
}


/* ------------------------------------------------------------
   ACTIONS
   ------------------------------------------------------------ */

.home-final-cta-actions {
    position: relative;
    z-index: 1;

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

    gap: 10px;

    margin-top: 30px;
}


/* ------------------------------------------------------------
   PRIMARY CTA
   ------------------------------------------------------------ */

.home-final-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 44px;

    padding: 0 18px;

    background: var(--color-accent);

    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md, 9px);

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    color: #FFFFFF !important;

    text-decoration: none !important;

    box-sizing: border-box;

    box-shadow:
        0 1px 2px rgb(0 0 0 / 12%),
        0 4px 14px rgb(124 92 255 / 12%);

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        filter 160ms ease;
}

.home-final-cta-primary span {
    color: #FFFFFF !important;
}

.home-final-cta-primary svg {
    display: block;

    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    color: #FFFFFF;

    transition:
        transform 160ms ease;
}

.home-final-cta-primary:hover {
    transform: translateY(-1px);

    background: var(--color-accent);
    border-color: var(--color-accent);

    color: #FFFFFF !important;

    filter: brightness(1.04);

    box-shadow:
        0 2px 4px rgb(0 0 0 / 14%),
        0 8px 22px rgb(124 92 255 / 18%);
}

.home-final-cta-primary:hover span {
    color: #FFFFFF !important;
}

.home-final-cta-primary:hover svg {
    transform: translateX(3px);
}

.home-final-cta-primary:active {
    transform: translateY(0);
}

.home-final-cta-primary:focus-visible {
    outline:
        var(--focus-width, 2px)
        solid
        var(--color-focus);

    outline-offset: 3px;
}


/* ------------------------------------------------------------
   SECONDARY CTA
   ------------------------------------------------------------ */

.home-final-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 0 18px;

    background: transparent;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 9px);

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    color: var(--color-heading);

    text-decoration: none;

    box-sizing: border-box;

    transition:
        color 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease,
        transform 160ms ease;
}

.home-final-cta-secondary:hover {
    color: var(--color-heading);

    border-color: var(--color-border-hover);

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

    transform: translateY(-1px);
}

.home-final-cta-secondary:focus-visible {
    outline:
        var(--focus-width, 2px)
        solid
        var(--color-focus);

    outline-offset: 3px;
}


/* ------------------------------------------------------------
   NOTE
   ------------------------------------------------------------ */

.home-final-cta-note {
    position: relative;
    z-index: 1;

    margin: 14px 0 0;

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--body-weight, 400);
    line-height: 1.4;

    color: var(--color-secondary);

    opacity: 0.82;
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1023px) {

    .home-final-cta-section {
        padding: 20px 0;
    }

    .home-final-cta-container {
        padding-left: var(--container-padding-x, 22px);
        padding-right: var(--container-padding-x, 22px);
    }

    .home-final-cta-block {
        padding: 58px 24px 54px;
    }

    .home-final-cta-title {
        max-width: 700px;

        font-size: 40px;
        line-height: 1.1;
        letter-spacing: -0.03em;
    }

}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    .home-final-cta-section {
        padding: 18px 0;
    }

    .home-final-cta-container {
        padding-left: var(--container-padding-x-mobile, 15px);
        padding-right: var(--container-padding-x-mobile, 15px);
    }

    .home-final-cta-block {
        padding: 48px 8px 46px;
    }

    .home-final-cta-block::before {
        width: 52px;
    }

    .home-final-cta-eyebrow {
        margin-bottom: 15px;

        font-size: 9px;
        letter-spacing: 0.13em;
    }

    .home-final-cta-title {
        max-width: 520px;

        font-size: 32px;
        line-height: 1.12;
        letter-spacing: -0.03em;
    }

    .home-final-cta-description {
        max-width: 430px;

        margin-top: 16px;

        font-size: 14px;
        line-height: 1.6;
    }

    .home-final-cta-actions {
        width: 100%;

        flex-direction: column;

        gap: 8px;

        margin-top: 25px;
    }

    .home-final-cta-primary,
    .home-final-cta-secondary {
        width: 100%;
        max-width: 300px;
    }

    .home-final-cta-note {
        max-width: 300px;

        margin-top: 12px;

        font-size: 10px;
    }

}


/* ------------------------------------------------------------
   VERY SMALL MOBILE
   ------------------------------------------------------------ */

@media (max-width: 380px) {

    .home-final-cta-block {
        padding: 42px 4px 40px;
    }

    .home-final-cta-title {
        font-size: 30px;
    }

    .home-final-cta-description {
        font-size: 13.5px;
    }

}


/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */

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

    .home-final-cta-primary,
    .home-final-cta-primary svg,
    .home-final-cta-secondary {
        transition: none;
    }

    .home-final-cta-primary:hover,
    .home-final-cta-secondary:hover {
        transform: none;
    }

    .home-final-cta-primary:hover svg {
        transform: none;
    }

}


/* ============================================================
   END — CLICKIN HOMEPAGE FINAL CTA + CONTACT SECTION CSS
   ============================================================ */