:root {
    --navy: #0d1234;
    --navy-2: #080b24;
    --blue: #3564ef;
    --blue-2: #1e4fd7;
    --cyan: #35e1d0;
    --violet: #7459ff;
    --text: #151b36;
    --muted: #6f7691;
    --soft: #f4f7fb;
    --line: rgba(23, 34, 82, 0.1);
    --shadow: 0 28px 80px rgba(20, 32, 82, 0.14);
}

* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: Inter, system-ui, sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, #fff, #f7f9ff);
    overflow-x: hidden;
}
a {
    text-decoration: none;
    color: inherit;
}
img {
    /* display: block; */
    /* max-width: 100%; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}
button {
    font: inherit;
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 4px;
    z-index: 9999;
    background: linear-gradient(90deg, var(--cyan), var(--blue), var(--violet));
}
.cursor-dot,
.cursor-ring {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 9998;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.cursor-dot {
    width: 7px;
    height: 7px;
    background: var(--blue);
}
.cursor-ring {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(53, 100, 239, 0.45);
    transition: 0.2s;
}
.cursor-ring.active {
    width: 58px;
    height: 58px;
    border-color: var(--cyan);
}

.topbar {
    background: var(--navy-2);
    color: white;
    padding: 8px 20px;
    font-size: 12px;
}
.topbar-inner {
    width: min(1180px, 100%);
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}
.topbar span {
    color: rgba(255, 255, 255, 0.72);
}

.site-header {
    position: fixed;
    top: 32px;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 12px 0;
    transition: 0.35s;
}
.site-header.scrolled {
    top: 0;
    padding: 8px 0;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 40px rgba(15, 23, 70, 0.08);
}
.nav-shell {
    width: min(1180px, calc(100% - 36px));
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 55px rgba(9, 18, 70, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.95);
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 800 19px Manrope;
    color: var(--navy);
}
.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: white;
    background: linear-gradient(135deg, var(--blue), var(--violet));
    transform: rotate(-7deg);
}
.desktop-nav {
    display: flex;
    gap: 8px;
}
.desktop-nav a {
    padding: 10px 13px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #35405e;
    transition: 0.25s;
}
.desktop-nav a:hover,
.desktop-nav a.active {
    color: white;
    background: linear-gradient(135deg, var(--blue), var(--violet));
    transform: translateY(-2px);
}
.quote-btn {
    padding: 12px 18px;
    border-radius: 12px;
    color: white;
    font-size: 13px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--blue), var(--violet));
    box-shadow: 0 12px 28px rgba(53, 100, 239, 0.28);
}

.menu-btn {
    display: none;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 14px;
    background: var(--navy);
    position: relative;
}

.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 9, 30, 0.52);
    backdrop-filter: blur(5px);
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}
.mobile-overlay.show {
    opacity: 1;
    visibility: visible;
}
.mobile-drawer {
    width: min(88vw, 360px);
    height: 100%;
    padding: 28px;
    background: linear-gradient(180deg, #fff, #f3f6ff);
    transform: translateX(-105%);
    transition: 0.45s;
}
.mobile-overlay.show .mobile-drawer {
    transform: none;
}
.mobile-links {
    display: grid;
    gap: 10px;
    margin-top: 32px;
}
.mobile-links a {
    padding: 15px 16px;
    border-radius: 14px;
    background: white;
    border: 1px solid var(--line);
    font-weight: 700;
}

/* =========================================================
   TECH SUPPORT IMAGE HERO
========================================================= */
.rctechimg-hero-section {
    --rctechimg-primary: #5d62ff;
    --rctechimg-secondary: #7b48ff;
    --rctechimg-dark: #08113d;
    --rctechimg-text: #dfe7ff;
    position: relative;
    overflow: hidden;
    min-height: 680px;
    display: flex;
    align-items: center;
    padding: 146px 0px 80px 0;
    background: radial-gradient(
            circle at 12% 30%,
            rgba(42, 168, 255, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 20%,
            rgba(115, 77, 255, 0.20),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #07103a 0%,
            #091346 48%,
            #07103b 100%
        );
}


/* GLOWS */

.rctechimg-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.rctechimg-glow-one {
    width: 350px;
    height: 350px;

    left: -140px;
    top: 80px;

    background: rgba(47, 173, 255, 0.16);

    animation: rctechimgGlowOne 7s ease-in-out infinite;
}

.rctechimg-glow-two {
    width: 420px;
    height: 420px;

    right: -160px;
    bottom: -100px;

    background: rgba(118, 76, 255, 0.18);

    animation: rctechimgGlowTwo 8s ease-in-out infinite;
}

@keyframes rctechimgGlowOne {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(20px, -15px);
    }
}

@keyframes rctechimgGlowTwo {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-20px, 20px);
    }
}


/* SUBTLE GRID */

.rctechimg-grid {
    position: absolute;
    inset: 0;

    opacity: 0.08;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.08) 1px,
            transparent 1px
        );

    background-size: 40px 40px;

    pointer-events: none;
}


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

.rctechimg-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

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

    align-items: center;

    gap: 75px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.rctechimg-content {
    max-width: 590px;
}


/* LABEL */

.rctechimg-label {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    padding: 8px 14px;

    border-radius: 50px;

    color: #e2e8ff;

    background:
        rgba(255,255,255,0.06);

    border:
        1px solid rgba(255,255,255,0.14);

    backdrop-filter: blur(10px);

    font-size: 11px;

    font-weight: 700;
}


.rctechimg-label span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #78c1ff;

    box-shadow:
        0 0 0 5px
        rgba(120,193,255,0.10);

    animation:
        rctechimgDotPulse 2s infinite;
}


@keyframes rctechimgDotPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px
            rgba(120,193,255,0.12);
    }

    50% {
        box-shadow:
            0 0 0 8px
            rgba(120,193,255,0.02);
    }

}


/* TITLE */

.rctechimg-title {
    margin: 0;

    color: #f3f7ff;

    font-size:
        clamp(42px, 4.8vw, 43px);

    font-weight: 800;

    line-height: 1.04;

    letter-spacing: -2px;
}


.rctechimg-title span {
    display: block;

    margin-top: 7px;

    background:
        linear-gradient(
            90deg,
            #7fc9ff,
            #7f63ff 55%,
            #b898ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* =========================================================
   ROTATING TEXT
========================================================= */

.rctechimg-rotating {
    display: flex;

    align-items: center;

    gap: 8px;

    height: 32px;

    margin-top: 24px;

    color: #e8edff;

    font-size: 15px;

    font-weight: 600;
}


.rctechimg-prefix {
    white-space: nowrap;
}


.rctechimg-word-window {
    height: 24px;

    overflow: hidden;
}


.rctechimg-word-list {
    display: flex;

    flex-direction: column;

    color: #939bff;

    font-weight: 750;

    animation:
        rctechimgWordRotate
        12s cubic-bezier(.65,0,.35,1)
        infinite;
}


.rctechimg-word-list > span {
    height: 24px;

    display: flex;

    align-items: center;

    white-space: nowrap;
}


@keyframes rctechimgWordRotate {

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

    21%,
    37% {
        transform: translateY(-24px);
    }

    42%,
    58% {
        transform: translateY(-48px);
    }

    63%,
    79% {
        transform: translateY(-72px);
    }

    84%,
    100% {
        transform: translateY(-96px);
    }

}


/* DESCRIPTION */

.rctechimg-description {
    max-width: 555px;

    margin: 18px 0 29px;

    color:
        rgba(230,236,255,0.72);

    font-size: 15px;

    line-height: 1.8;
}


/* FEATURES */

.rctechimg-features {
    display: flex;

    flex-wrap: wrap;

    gap: 14px 22px;
}


.rctechimg-feature {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #dde5ff;

    font-size: 12px;

    font-weight: 600;
}


.rctechimg-check {
    width: 26px;
    height: 26px;

    display: flex;

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

    border-radius: 8px;

    background:
        rgba(255,255,255,0.08);

    border:
        1px solid rgba(255,255,255,0.06);
}


.rctechimg-check svg {
    width: 13px;
    height: 13px;

    fill: none;

    stroke: #929aff;

    stroke-width: 2.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.rctechimg-visual {
    position: relative;

    min-height: 500px;

    display: flex;

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


.rctechimg-image-wrap {
    position: relative;

    width: 100%;
    max-width: 470px;

    height: 500px;

    overflow: hidden;

    border-radius: 34px;

    border:
        1px solid rgba(255,255,255,0.14);

    box-shadow:
        0 35px 80px
        rgba(3, 8, 35, 0.35);

    transform:
        rotate(1.2deg);

    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease;
}


.rctechimg-image-wrap:hover {
    transform:
        rotate(0deg)
        translateY(-5px);

    box-shadow:
        0 42px 95px
        rgba(3, 8, 35, 0.42);
}


.rctechimg-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}


.rctechimg-image-wrap:hover
.rctechimg-image {
    transform:
        scale(1.045);
}


/* IMAGE COLOR OVERLAY */

.rctechimg-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(9,18,62,0.06) 0%,
            rgba(9,18,62,0.08) 45%,
            rgba(8,15,53,0.30) 100%
        );

    pointer-events: none;
}


/* SUBTLE BLUE LIGHT OVER IMAGE */

.rctechimg-image-glow {
    position: absolute;

    width: 260px;
    height: 260px;

    right: -90px;
    top: -70px;

    border-radius: 50%;

    background:
        rgba(109, 84, 255, 0.22);

    filter:
        blur(70px);

    pointer-events: none;
}


/* IMAGE DECORATIVE BACK SHAPE */

.rctechimg-visual::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 430px;

    border-radius: 35px;

    background:
        linear-gradient(
            135deg,
            rgba(98,105,255,0.22),
            rgba(104,74,255,0.06)
        );

    transform:
        translate(35px, 25px)
        rotate(5deg);

    z-index: -1;
}


/* SMALL DECORATIVE LINE */

.rctechimg-visual::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    left: 5px;
    bottom: 20px;

    border-left:
        1px solid rgba(255,255,255,0.16);

    border-bottom:
        1px solid rgba(255,255,255,0.16);

    border-radius:
        0 0 0 35px;

    opacity: 0.65;
}


/* =========================================================
   LOAD ANIMATIONS
========================================================= */

.rctechimg-reveal {
    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity 0.75s ease,
        transform 0.75s
        cubic-bezier(.2,.7,.2,1);
}


.rctechimg-hero-section.rctechimg-loaded
.rctechimg-reveal {
    opacity: 1;

    transform:
        translateY(0);
}


.rctechimg-delay-1 {
    transition-delay: 0.08s;
}


.rctechimg-delay-2 {
    transition-delay: 0.16s;
}


.rctechimg-delay-3 {
    transition-delay: 0.24s;
}


.rctechimg-delay-4 {
    transition-delay: 0.32s;
}


.rctechimg-delay-5 {
    transition-delay: 0.40s;
}


/* RIGHT IMAGE REVEAL */

.rctechimg-visual-reveal {
    opacity: 0;

    transform:
        translateX(40px)
        scale(0.97);

    transition:
        opacity 0.9s ease,
        transform 0.9s
        cubic-bezier(.2,.7,.2,1);
}


.rctechimg-hero-section.rctechimg-loaded
.rctechimg-visual-reveal {
    opacity: 1;

    transform:
        translateX(0)
        scale(1);

    transition-delay: 0.20s;
}


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

@media (max-width: 991px) {

    .rctechimg-hero-section {
        min-height: auto;

        padding:
            80px 20px;
    }


    .rctechimg-container {
        grid-template-columns:
            1fr 0.9fr;

        gap: 45px;
    }


    .rctechimg-title {
        font-size:
            clamp(38px,5vw,50px);
    }


    .rctechimg-image-wrap {
        height: 430px;
    }

}


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

@media (max-width: 767px) {

    .rctechimg-hero-section {
        padding:
            65px 18px;
    }


    .rctechimg-container {
        grid-template-columns: 1fr;

        gap: 50px;
    }

.rctechimg-content {
    max-width: 100%;
    margin-top: 70px;
}


    .rctechimg-title {
        font-size: 39px;

        letter-spacing: -1.3px;
    }


    .rctechimg-visual {
        min-height: auto;
    }


    .rctechimg-image-wrap {
        max-width: 100%;

        height: 430px;

        transform: none;
    }


    .rctechimg-visual::before {
        width: 85%;
        height: 90%;

        transform:
            translate(20px, 20px)
            rotate(3deg);
    }

}


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

@media (max-width: 480px) {

    .rctechimg-hero-section {
        padding:
            55px 15px;
    }


    .rctechimg-title {
        font-size: 33px;

        line-height: 1.08;
    }


    .rctechimg-rotating {
        font-size: 12.5px;
    }


    .rctechimg-description {
        font-size: 13px;
    }


    .rctechimg-features {
        gap: 11px 14px;
    }


    .rctechimg-feature {
        font-size: 10.5px;
    }


    .rctechimg-image-wrap {
        height: 340px;

        border-radius: 24px;
    }

}


/* REDUCED MOTION */

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

    .rctechimg-hero-section *,
    .rctechimg-hero-section *::before,
    .rctechimg-hero-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}
/* =====================================
   MAIN PAGE
===================================== */

.service-page-section {
    position: relative;
    padding: 70px 20px;
    background:
        radial-gradient(
            circle at 5% 30%,
            rgba(74, 97, 255, .08),
            transparent 25%
        ),
        #f8f9fc;
}


.service-page-container {
    width: min(1240px, 100%);
    margin: auto;
    gap: 28px;
    align-items: start;
}


.service-content {
    min-width: 0;
}


/* =====================================
   TYPES BOX
===================================== */

.web-types-box {
    padding: 48px;
    border-radius: 30px;

    background: #ffffff;

    border: 1px solid #e6e9f2;

    box-shadow:
        0 25px 60px
        rgba(32, 43, 85, .055);
}


.web-types-heading {
    margin-bottom: 32px;
}


.section-label {
    display: block;

    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.7px;

    color: #5b68ff;
}


.web-types-heading h2 {
    margin: 0;

    font-size: clamp(34px, 4vw, 48px);

    line-height: 1.08;

    letter-spacing: -2px;

    color: #19233f;
}


/* =====================================
   TYPES GRID
===================================== */

.web-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}


.web-type-card {
    position: relative;

    min-height: 265px;

    padding: 28px;

    overflow: hidden;

    border-radius: 22px;

    border: 1px solid #e5e8f1;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fafbff
        );

    transition:
        transform .4s cubic-bezier(.16,1,.3,1),
        box-shadow .4s ease,
        border-color .4s ease;
}


.web-type-card::before {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -70px;
    top: -70px;

    border-radius: 50%;

    background:
        rgba(86, 101, 255, .08);

    transition: transform .5s ease;
}


.web-type-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(84, 99, 255, .25);

    box-shadow:
        0 20px 40px
        rgba(31, 42, 85, .09);
}


.web-type-card:hover::before {
    transform: scale(1.5);
}


.card-number {
    position: absolute;

    top: 20px;
    right: 20px;

    font-size: 11px;

    font-weight: 700;

    color: #a4abc0;
}


.type-icon {
    width: 52px;
    height: 52px;

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

    margin-bottom: 24px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #4a64ff,
            #7658ff
        );

    box-shadow:
        0 12px 25px
        rgba(79, 84, 255, .22);
}


.type-icon svg {
    width: 22px;

    fill: none;

    stroke: #fff;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.web-type-card h3 {
    margin: 0 0 10px;

    font-size: 18px;

    color: #202a47;
}


.web-type-card p {
    margin: 0 0 20px;

    color: #7d87a2;

    font-size: 13px;

    line-height: 1.65;
}


.type-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    color: #5365ff;

    font-size: 12px;

    font-weight: 700;
}


.type-link span {
    transition: transform .3s ease;
}


.type-link:hover span {
    transform: translateX(5px);
}


/* =====================================
   STATS
===================================== */

.service-stats {
    display: grid;

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

    gap: 14px;

    margin-top: 22px;
}


.stat-card {
    position: relative;

    padding: 26px 24px;

    overflow: hidden;

    border-radius: 20px;

    background: #fff;

    border: 1px solid #e4e7f0;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.stat-card::before {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    right: -60px;
    top: -65px;

    border-radius: 50%;

    background:
        rgba(89, 103, 255, .08);
}


.stat-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 35px
        rgba(33, 44, 88, .08);
}


.stat-card h3 {
    margin: 0;

    font-size: 28px;

    color: #192441;
}


.stat-card p {
    margin: 5px 0 0;

    color: #808aa7;

    font-size: 13px;
}


/* =====================================
   FEATURE SECTION
===================================== */

.service-feature-section {
    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 22px;

    margin-top: 22px;
}


/* IMAGE */

.service-image-wrap {
    position: relative;

    padding-top: 16px;
}


.image-badge {
    position: absolute;

    top: 0;
    left: 20px;

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px 14px;

    border-radius: 30px;

    background: #fff;

    box-shadow:
        0 10px 25px
        rgba(30, 41, 85, .12);

    font-size: 11px;

    font-weight: 700;

    color: #394461;
}


.badge-dot {
    width: 9px;
    height: 9px;

    position: relative;

    border-radius: 50%;

    background: #5d6cff;
}


.badge-dot::after {
    content: "";

    position: absolute;

    inset: -5px;

    border: 1px solid #5d6cff;

    border-radius: 50%;

    animation: pulseBadge 1.8s infinite;
}


@keyframes pulseBadge {

    from {
        transform: scale(.5);
        opacity: 1;
    }

    to {
        transform: scale(1.7);
        opacity: 0;
    }

}


.service-image-card {
    position: relative;

    height: 470px;

    overflow: hidden;

    border-radius: 26px;

    box-shadow:
        0 25px 50px
        rgba(24, 34, 72, .13);
}


.service-image-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .9s ease;
}


.service-image-card:hover img {
    transform: scale(1.06);
}


.image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 25%,
            rgba(12, 18, 45, .08) 50%,
            rgba(10, 16, 42, .88) 100%
        );
}


.image-text {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 28px;

    color: white;
}


.image-text span {
    display: block;

    margin-bottom: 8px;

    font-size: 10px;

    letter-spacing: 1.5px;

    color: rgba(255,255,255,.78);
}


.image-text h3 {
    margin: 0;

    max-width: 330px;

    font-size: 26px;

    line-height: 1.18;
}


/* =====================================
   BENEFITS
===================================== */

.service-benefits {
    padding: 40px;

    border-radius: 26px;

    background: #fff;

    border: 1px solid #e5e8f1;
}


.service-benefits h2 {
    margin: 0 0 24px;

    font-size: 32px;

    line-height: 1.2;

    letter-spacing: -1px;

    color: #192441;
}


.service-benefits h2 span {
    display: block;

    color: #5667ff;
}


.benefit-list {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.benefit-item {
    display: flex;

    gap: 13px;

    padding: 14px;

    border-radius: 14px;

    transition:
        transform .3s ease,
        background .3s ease;
}


.benefit-item:hover {
    transform: translateX(6px);

    background: #f5f6ff;
}


.check-icon {
    width: 36px;
    height: 36px;

    min-width: 36px;

    display: flex;

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

    border-radius: 11px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #5268ff,
            #7959ff
        );

    font-size: 15px;

    font-weight: 700;
}


.benefit-item h4 {
    margin: 0 0 4px;

    color: #202a48;

    font-size: 14px;
}


.benefit-item p {
    margin: 0;

    color: #858ea9;

    font-size: 12px;

    line-height: 1.5;
}


/* =====================================
   CTA
===================================== */

.service-cta {
    position: relative;

    display: flex;

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

    gap: 25px;

    margin-top: 22px;

    padding: 34px 38px;

    overflow: hidden;

    border-radius: 25px;

    background:
        linear-gradient(
            110deg,
            #192a50,
            #263d6b
        );
}


.service-cta::before {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: 80px;
    top: -170px;

    border-radius: 50%;

    background:
        rgba(87, 88, 255, .3);
}


.service-cta > div,
.cta-button {
    position: relative;
    z-index: 2;
}


.service-cta span {
    font-size: 10px;

    letter-spacing: 1.4px;

    color: #9faaca;
}


.service-cta h2 {
    margin: 6px 0 0;

    max-width: 470px;

    color: white;

    font-size: 23px;

    line-height: 1.2;
}


.cta-button {
    min-width: 155px;

    display: flex;

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

    gap: 12px;

    padding: 15px 20px;

    border-radius: 30px;

    text-decoration: none;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #5168ff,
            #8058ff
        );

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.cta-button span {
    color: #fff;

    font-size: 16px;
}


.cta-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 30px
        rgba(83, 86, 255, .3);
}


/* =====================================
   SIDEBAR
===================================== */

.service-sidebar {
    position: relative;
}


.sidebar-box {
    position: sticky;

    top: 25px;

    padding: 28px 22px;

    border-radius: 27px;

    background:
        rgba(255,255,255,.95);

    border:
        1px solid #e5e8f1;

    box-shadow:
        0 25px 60px
        rgba(31, 42, 82, .07);
}


.sidebar-small-title {
    display: block;

    margin-bottom: 5px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;

    color: #5868ff;
}


.sidebar-box h2 {
    margin: 0 0 22px;

    font-size: 27px;

    color: #192441;
}


.sidebar-nav {
    display: flex;

    flex-direction: column;

    gap: 9px;
}


.sidebar-item {
    position: relative;

    min-height: 58px;

    display: flex;

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

    padding: 0 17px;

    overflow: hidden;

    border-radius: 15px;

    border: 1px solid #e5e8f0;

    background: #fff;

    text-decoration: none;

    color: #26304d;

    font-size: 13px;

    font-weight: 600;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.sidebar-item::before {
    content: "";

    position: absolute;

    inset: 0;

    transform: translateX(-102%);

    background:
        linear-gradient(
            120deg,
            #4262ff,
            #7758ff
        );

    transition:
        transform .45s cubic-bezier(.16,1,.3,1);
}


.sidebar-item span {
    position: relative;

    z-index: 2;
}


.sidebar-item:hover::before,
.sidebar-item.active::before {
    transform: translateX(0);
}


.sidebar-item:hover,
.sidebar-item.active {
    color: white;

    transform: translateX(5px);

    box-shadow:
        0 12px 25px
        rgba(81, 87, 255, .18);
}


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

.web-types-box,
.stat-card,
.service-feature-section,
.service-cta,
.sidebar-box {
    opacity: 0;

    transform: translateY(35px);

    animation:
        pageReveal .75s ease forwards;
}


.web-types-box {
    animation-delay: .05s;
}

.stat-card:nth-child(1) {
    animation-delay: .12s;
}

.stat-card:nth-child(2) {
    animation-delay: .2s;
}

.stat-card:nth-child(3) {
    animation-delay: .28s;
}

.service-feature-section {
    animation-delay: .32s;
}

.service-cta {
    animation-delay: .4s;
}

.sidebar-box {
    animation-delay: .15s;
}


@keyframes pageReveal {

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* =====================================
   RESPONSIVE
===================================== */

@media (max-width: 1050px) {

    .service-page-container {
        grid-template-columns: 1fr;
    }

    .service-sidebar {
        order: -1;
    }

    .sidebar-box {
        position: relative;
        top: 0;
    }

    .sidebar-nav {
        display: grid;

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

}


@media (max-width: 800px) {

    .web-types-box {
        padding: 34px 24px;
    }

    .web-types-grid {
        grid-template-columns: 1fr;
    }

    .service-feature-section {
        grid-template-columns: 1fr;
    }

    .service-stats {
        grid-template-columns: 1fr;
    }

    .service-image-card {
        height: 420px;
    }

}


@media (max-width: 650px) {

    .service-page-section {
        padding: 45px 14px;
    }

    .web-types-heading h2 {
        font-size: 34px;
        letter-spacing: -1.5px;
    }

    .sidebar-nav {
        grid-template-columns: 1fr;
    }

    .service-benefits {
        padding: 30px 20px;
    }

    .service-cta {
        flex-direction: column;

        align-items: flex-start;

        padding: 28px 22px;
    }

    .cta-button {
        width: 100%;
    }

}


@media (max-width: 450px) {

    .web-types-box {
        padding: 28px 16px;
    }

    .web-type-card {
        padding: 23px 20px;
    }

    .service-image-card {
        height: 370px;
    }

}
/*---------------------------------------------------------------------*/


/* =========================================
   HORIZONTAL DESIGN PROCESS
========================================= */

.horizontal-process-section {
    position: relative;
    padding: 30px 0;
}


.horizontal-process-wrap {
    position: relative;

    padding: 55px 38px 38px;

    overflow: hidden;

    border-radius: 30px;

    border: 1px solid #e5e8f2;

    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(82, 101, 255, .08),
            transparent 24%
        ),
        radial-gradient(
            circle at 95% 80%,
            rgba(126, 85, 255, .07),
            transparent 25%
        ),
        #ffffff;

    box-shadow:
        0 28px 65px
        rgba(31, 42, 82, .055);
}


/* subtle grid */

.horizontal-process-wrap::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: .35;

    background-image:
        linear-gradient(
            rgba(70, 87, 160, .03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(70, 87, 160, .03) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    pointer-events: none;
}


/* =========================================
   HEADING
========================================= */

.horizontal-process-head {
    position: relative;

    z-index: 2;

    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}


.process-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #5969ff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.7px;
}


.horizontal-process-head h2 {
    margin: 0;

    color: #182340;

    font-size:
        clamp(36px, 5vw, 52px);

    line-height: 1.08;

    letter-spacing: -2.2px;
}


.horizontal-process-head h2 span {
    display: inline-block;

    background:
        linear-gradient(
            90deg,
            #4d65ff,
            #8259ff
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.horizontal-process-head p {
    max-width: 600px;

    margin: 16px auto 0;

    color: #7d87a2;

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================
   PROCESS ROW
========================================= */

.horizontal-process-row {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: center;

    gap: 0;
}


/* =========================================
   STEP
========================================= */

.horizontal-step {
    min-width: 0;

    opacity: 0;

    transform:
        translateY(35px)
        scale(.97);

    transition:
        opacity .8s
        cubic-bezier(.16,1,.3,1),
        transform .8s
        cubic-bezier(.16,1,.3,1);
}


.horizontal-step.process-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================
   STEP CARD
========================================= */

.horizontal-step-card {
    position: relative;

    min-height: 340px;

    padding: 27px 24px;

    overflow: hidden;

    border-radius: 23px;

    border: 1px solid #e4e8f1;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fafbff
        );

    box-shadow:
        0 18px 38px
        rgba(32, 43, 84, .055);

    transition:
        transform .42s
        cubic-bezier(.16,1,.3,1),
        box-shadow .42s ease,
        border-color .42s ease;
}


/* decorative glow */

.horizontal-step-card::before {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -95px;
    top: -95px;

    border-radius: 50%;

    background:
        rgba(83, 99, 255, .08);

    transition:
        transform .55s ease;
}


/* shine */

.horizontal-step-card::after {
    content: "";

    position: absolute;

    inset: 0;

    transform:
        translateX(-130%);

    background:
        linear-gradient(
            110deg,
            transparent 25%,
            rgba(255,255,255,.82) 50%,
            transparent 75%
        );

    transition:
        transform .8s ease;

    pointer-events: none;
}


.horizontal-step-card:hover {
    transform: translateY(-10px);

    border-color:
        rgba(84, 99, 255, .26);

    box-shadow:
        0 28px 55px
        rgba(34, 45, 90, .10);
}


.horizontal-step-card:hover::before {
    transform: scale(1.7);
}


.horizontal-step-card:hover::after {
    transform: translateX(130%);
}


/* =========================================
   TOP
========================================= */

.step-top {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;
}


/* icon */

.step-icon {
    width: 54px;
    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #4c65ff,
            #7e59ff
        );

    box-shadow:
        0 13px 28px
        rgba(81, 87, 255, .23);

    transition:
        transform .4s ease;
}


.horizontal-step-card:hover
.step-icon {
    transform:
        rotate(-8deg)
        scale(1.08);
}


.step-icon svg {
    width: 23px;

    fill: none;

    stroke: #fff;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* number */

.step-number {
    font-size: 36px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -2px;

    color:
        rgba(66, 77, 125, .10);
}


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

.step-label {
    position: relative;

    z-index: 2;

    display: block;

    margin-bottom: 7px;

    color: #5969ff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.horizontal-step-card h3 {
    position: relative;

    z-index: 2;

    margin: 0 0 12px;

    min-height: 54px;

    color: #1e2846;

    font-size: 21px;

    line-height: 1.22;

    letter-spacing: -.7px;
}


.horizontal-step-card p {
    position: relative;

    z-index: 2;

    margin: 0;

    color: #7c86a1;

    font-size: 12.5px;

    line-height: 1.7;
}


/* =========================================
   TAGS
========================================= */

.step-tags {
    position: absolute;

    left: 24px;
    right: 24px;
    bottom: 24px;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.step-tags span {
    padding: 6px 10px;

    border-radius: 50px;

    background: #f1f3fa;

    color: #77809b;

    font-size: 9px;

    font-weight: 600;

    transition:
        background .3s ease,
        color .3s ease;
}


.horizontal-step-card:hover
.step-tags span {
    background: #edefFF;

    color: #5967ed;
}


/* =========================================
   ARROWS
========================================= */

.process-arrow {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100%;
}


.arrow-line {
    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 2px;

    background: #e4e7f3;

    transform:
        translateY(-50%)
        scaleX(0);

    transform-origin: left;

    transition:
        transform .9s
        cubic-bezier(.16,1,.3,1);
}


.process-arrow.arrow-visible
.arrow-line {
    transform:
        translateY(-50%)
        scaleX(1);
}


.arrow-circle {
    position: relative;

    z-index: 2;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff;

    border:
        1px solid
        rgba(86,101,255,.20);

    box-shadow:
        0 10px 25px
        rgba(40,51,100,.10);

    color: #5868ff;

    opacity: 0;

    transform:
        scale(.5);

    transition:
        opacity .5s ease,
        transform .5s
        cubic-bezier(.16,1,.3,1);

    transition-delay: .45s;
}


.process-arrow.arrow-visible
.arrow-circle {
    opacity: 1;

    transform:
        scale(1);
}


.arrow-circle svg {
    width: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* subtle pulse */

.arrow-circle::before {
    content: "";

    position: absolute;

    inset: -6px;

    border-radius: 50%;

    border:
        1px solid
        rgba(87,103,255,.17);

    animation:
        arrowPulse 2.3s infinite;
}


@keyframes arrowPulse {

    0% {
        transform: scale(.8);
        opacity: .7;
    }

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

}


/* =========================================
   FINAL STEP SPECIAL
========================================= */

.final-step {
    border-color:
        rgba(84,99,255,.18);
}


.final-step::before {
    background:
        rgba(115, 80, 255, .10);
}


/* =========================================
   BOTTOM CTA
========================================= */

.horizontal-process-cta {
    position: relative;

    z-index: 2;

    margin-top: 45px;

    padding: 30px 34px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    overflow: hidden;

    border-radius: 23px;

    background:
        linear-gradient(
            115deg,
            #19294f,
            #273d6b
        );
}


.horizontal-process-cta::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: 100px;
    top: -185px;

    border-radius: 50%;

    background:
        rgba(93, 88, 255, .30);
}


.horizontal-process-cta > div,
.horizontal-process-btn {
    position: relative;

    z-index: 2;
}


.horizontal-process-cta > div > span {
    display: block;

    margin-bottom: 6px;

    color: #a7b1ce;

    font-size: 10px;

    letter-spacing: 1.3px;
}


.horizontal-process-cta h3 {
    max-width: 550px;

    margin: 0;

    color: #fff;

    font-size: 21px;

    line-height: 1.3;
}


.horizontal-process-btn {
    min-width: 180px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    padding: 14px 20px;

    border-radius: 100px;

    background:
        linear-gradient(
            135deg,
            #5269ff,
            #8059ff
        );

    color: #fff;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .7px;

    box-shadow:
        0 14px 32px
        rgba(81,87,255,.25);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


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

    box-shadow:
        0 18px 38px
        rgba(81,87,255,.38);
}


.horizontal-process-btn svg {
    width: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


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

@media (max-width: 1100px) {

    .horizontal-process-row {
        grid-template-columns:
            1fr 55px
            1fr;
    }


    .horizontal-step:nth-of-type(1) {
        grid-column: 1;
    }


    .process-arrow:nth-of-type(2) {
        grid-column: 2;
    }


    .horizontal-step:nth-of-type(3) {
        grid-column: 3;
    }


    .process-arrow:nth-of-type(4),
    .horizontal-step:nth-of-type(5),
    .process-arrow:nth-of-type(6),
    .horizontal-step:nth-of-type(7) {
        margin-top: 25px;
    }

}


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

@media (max-width: 850px) {

    .horizontal-process-wrap {
        padding: 40px 22px;
    }


    .horizontal-process-head {
        text-align: left;

        margin-bottom: 40px;
    }


    .horizontal-process-row {
        display: flex;

        flex-direction: column;

        gap: 0;
    }


    .horizontal-step {
        width: 100%;
    }


    .horizontal-step-card {
        min-height: 300px;
    }


    .process-arrow {
        width: 100%;

        height: 75px;

        transform: rotate(90deg);
    }


    .arrow-line {
        left: calc(50% - 35px);

        right: auto;

        width: 70px;
    }


    .horizontal-process-cta {
        flex-direction: column;

        align-items: flex-start;
    }


    .horizontal-process-btn {
        width: 100%;
    }

}


@media (max-width: 520px) {

    .horizontal-process-wrap {
        padding:
            32px 15px;

        border-radius: 24px;
    }


    .horizontal-process-head h2 {
        font-size: 34px;

        letter-spacing: -1.5px;
    }


    .horizontal-step-card {
        padding: 23px 20px;

        min-height: 305px;
    }


    .step-tags {
        left: 20px;

        right: 20px;

        bottom: 20px;
    }


    .horizontal-process-cta {
        padding: 25px 21px;
    }

}



/* ==========================================
   FEATURES & BENEFITS CLEAN
========================================== */

.fb-clean-section {
    position: relative;

    padding: 75px 20px;

    background: #fafbfe;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


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

.fb-clean-container {
    width: min(1220px, 100%);

    margin: 0 auto;

    display: grid;

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

    gap: 75px;

    align-items: center;
}


/* ==========================================
   LEFT IMAGE
========================================== */

.fb-clean-image-wrap {
    position: relative;
}


.fb-clean-image-reveal {
    position: relative;

    height: 480px;

    overflow: hidden;

    border-radius: 30px;

    opacity: 0;

    transform:
        translateX(-40px)
        scale(.97);

    transition:
        opacity .9s cubic-bezier(.16,1,.3,1),
        transform .9s cubic-bezier(.16,1,.3,1);

    box-shadow:
        0 30px 65px
        rgba(25, 36, 76, .14);
}


.fb-clean-image-reveal.visible {
    opacity: 1;

    transform:
        translateX(0)
        scale(1);
}


.fb-clean-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.08);

    transition:
        transform 1.4s
        cubic-bezier(.16,1,.3,1);
}


.fb-clean-image-reveal.visible
.fb-clean-image {
    transform: scale(1);
}


.fb-clean-image-reveal:hover
.fb-clean-image {
    transform: scale(1.05);
}


/* overlay */

.fb-clean-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 30%,
            rgba(10, 16, 40, .12) 55%,
            rgba(10, 16, 40, .88) 100%
        );
}


/* image content */

.fb-clean-image-content {
    position: absolute;

    left: 38px;
    right: 38px;
    bottom: 38px;

    color: #fff;
}


.fb-clean-image-content span {
    display: block;

    margin-bottom: 9px;

    color:
        rgba(255,255,255,.70);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.fb-clean-image-content h3 {
    max-width: 450px;

    margin: 0;

    font-size:
        clamp(27px, 3vw, 38px);

    line-height: 1.13;

    letter-spacing: -1.2px;
}


/* ==========================================
   RIGHT CONTENT
========================================== */

.fb-clean-content {
    position: relative;
}


/* heading */

.fb-clean-heading {
    margin-bottom: 40px;
}


.fb-clean-label {
    display: block;

    margin-bottom: 10px;

    color: #5868ff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.7px;
}


.fb-clean-heading h2 {
    max-width: 520px;

    margin: 0;

    color: #192440;

    font-size:
        clamp(40px, 5vw, 56px);

    line-height: 1.04;

    letter-spacing: -2.4px;
}


.fb-clean-heading h2 span {
    display: block;

    margin-top: 4px;

    color: #5868ff;
}


.fb-clean-heading p {
    max-width: 520px;

    margin: 20px 0 0;

    color: #7c86a1;

    font-size: 14px;

    line-height: 1.8;
}


/* ==========================================
   FEATURE ROW
========================================== */

.fb-clean-item {
    position: relative;

    display: grid;

    grid-template-columns:
        48px 1fr;

    gap: 18px;

    padding: 25px 0;

    border-top:
        1px solid #dde2ec;

    opacity: 0;

    transform: translateY(28px);

    transition:
        opacity .7s
        cubic-bezier(.16,1,.3,1),
        transform .7s
        cubic-bezier(.16,1,.3,1);
}


.fb-clean-item:last-of-type {
    border-bottom:
        1px solid #dde2ec;
}


.fb-clean-item.visible {
    opacity: 1;

    transform: translateY(0);
}


/* animated divider */

.fb-clean-item::after {
    content: "";

    position: absolute;

    left: 0;
    top: -1px;

    width: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #5168ff,
            #805aff
        );

    transition:
        width .5s
        cubic-bezier(.16,1,.3,1);
}


.fb-clean-item:hover::after {
    width: 100%;
}


/* number */

.fb-clean-number {
    padding-top: 5px;

    color: #a5adbf;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    transition:
        color .3s ease;
}


.fb-clean-item:hover
.fb-clean-number {
    color: #5868ff;
}


/* title */

.fb-clean-title-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;
}


.fb-clean-title-row h3 {
    margin: 0;

    color: #202a47;

    font-size: 21px;

    line-height: 1.2;

    letter-spacing: -.6px;

    transition:
        color .3s ease,
        transform .35s
        cubic-bezier(.16,1,.3,1);
}


.fb-clean-item:hover
.fb-clean-title-row h3 {
    color: #5364f0;

    transform: translateX(5px);
}


/* arrow */

.fb-clean-arrow {
    color: #9ba3b8;

    font-size: 20px;

    transition:
        color .3s ease,
        transform .4s
        cubic-bezier(.16,1,.3,1);
}


.fb-clean-item:hover
.fb-clean-arrow {
    color: #5868ff;

    transform:
        translate(3px,-3px)
        rotate(45deg);
}


/* description */

.fb-clean-item-content p {
    margin: 10px 0 0;

    color: #808aa3;

    font-size: 12.5px;

    line-height: 1.65;
}


/* benefit */

.fb-clean-benefit {
    display: block;

    margin-top: 10px;

    color: #5967e7;

    font-size: 10px;

    font-weight: 700;

    opacity: .75;

    transition:
        opacity .3s ease,
        letter-spacing .3s ease;
}


.fb-clean-item:hover
.fb-clean-benefit {
    opacity: 1;

    letter-spacing: .2px;
}


/* ==========================================
   BOTTOM CTA
========================================== */

.fb-clean-bottom {
    margin-top: 34px;

    padding-top: 26px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 25px;
}


.fb-clean-bottom > div > span {
    display: block;

    margin-bottom: 5px;

    color: #8b94ab;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


.fb-clean-bottom h4 {
    max-width: 360px;

    margin: 0;

    color: #202a47;

    font-size: 17px;

    line-height: 1.35;
}


/* button */

.fb-clean-btn {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 10px 0;

    color: #5365f4;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .8px;

    border-bottom:
        1px solid #5365f4;

    transition:
        gap .3s ease;
}


.fb-clean-btn:hover {
    gap: 15px;
}


.fb-clean-btn svg {
    width: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ==========================================
   REVEAL
========================================== */

.fb-clean-reveal {
    opacity: 0;

    transform: translateY(28px);

    transition:
        opacity .75s
        cubic-bezier(.16,1,.3,1),
        transform .75s
        cubic-bezier(.16,1,.3,1);
}


.fb-clean-reveal.visible {
    opacity: 1;

    transform: translateY(0);
}


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

@media (max-width: 1000px) {

    .fb-clean-container {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .fb-clean-image-reveal {
        height: 600px;
    }


    .fb-clean-content {
        max-width: 760px;

        margin: auto;
    }

}


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

@media (max-width: 650px) {

    .fb-clean-section {
        padding: 55px 15px;
    }


    .fb-clean-container {
        gap: 42px;
    }


    .fb-clean-image-reveal {
        height: 470px;

        border-radius: 22px;
    }


    .fb-clean-image-content {
        left: 23px;
        right: 23px;
        bottom: 25px;
    }


    .fb-clean-image-content h3 {
        font-size: 27px;
    }


    .fb-clean-heading {
        margin-bottom: 30px;
    }


    .fb-clean-heading h2 {
        font-size: 37px;

        letter-spacing: -1.7px;
    }


    .fb-clean-item {
        grid-template-columns:
            34px 1fr;

        gap: 10px;

        padding: 22px 0;
    }


    .fb-clean-title-row h3 {
        font-size: 19px;
    }


    .fb-clean-bottom {
        flex-direction: column;

        align-items: flex-start;
    }

}


















.faq-list {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}
.faq-item {
    border-radius: 16px;
    background: white;
    border: 1px solid rgba(23, 34, 82, 0.08);
    box-shadow: 0 14px 35px rgba(29, 42, 96, 0.06);
    overflow: hidden;
}
.faq-question {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 800;
    color: var(--text);
    cursor: pointer;
}
.faq-question span:last-child {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #edf2ff;
    color: var(--blue);
    transition: 0.3s;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 0 20px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.75;
}
.faq-item.open .faq-answer {
    max-height: 220px;
    padding-bottom: 18px;
}
.faq-item.open .faq-question span:last-child {
    transform: rotate(45deg);
    background: var(--blue);
    color: white;
}

footer {
    background: var(--navy-2);
    color: white;
    padding: 72px 20px 26px;
    position: relative;
    overflow: hidden;
}
.footer-grid {
    width: min(1160px, 100%);
    margin: auto;
    display: grid;
    grid-template-columns: 1.1fr 0.8fr 0.8fr 1.2fr;
    gap: 46px;
}
footer h4 {
    font: 700 16px Manrope;
    margin: 0 0 20px;
}
footer p,
footer a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    line-height: 1.9;
}
footer a {
    display: block;
    transition: 0.2s;
}
footer a:hover {
    color: white;
    transform: translateX(4px);
}
.footer-bottom {
    width: min(1160px, 100%);
    margin: 46px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.back-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 16px;
    color: white;
    background: linear-gradient(135deg, var(--blue), var(--violet));
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: 0.3s;
}
.back-top.show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.reveal {
    opacity: 0;
    filter: blur(9px);
    transition:
        opacity 0.9s,
        transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.9s;
}
.reveal-left {
    transform: translateX(-80px);
}
.reveal-right {
    transform: translateX(80px);
}
.reveal-up {
    transform: translateY(70px);
}
.reveal.show {
    opacity: 1;
    filter: none;
    transform: none;
}

@media (max-width: 960px) {
    .topbar {
        display: none;
    }
    .site-header {
        top: 0;
    }
    .desktop-nav,
    .quote-btn {
        display: none;
    }
    .menu-btn {
        display: block;
    }
    .content-grid {
        grid-template-columns: 1fr;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .cursor-dot,
    .cursor-ring {
        display: none;
    }
}
@media (max-width: 620px) {
    .nav-shell {
        width: calc(100% - 20px);
    }
    .hero {
        min-height: 470px;
        padding-top: 135px;
    }
    .section {
        padding: 72px 14px;
    }
    .main-card,
    .sidebar-card {
        padding: 22px;
        border-radius: 24px;
    }
    .hero-media {
        height: 340px;
    }
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}


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

/* =========================
   SERVICES MARQUEE SECTION
========================= */

.services-marquee-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 70px 0;

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(94, 75, 255, 0.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(89, 53, 255, 0.10),
            transparent 35%
        ),
        #ffffff;
}


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

.services-marquee-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}


/* =========================
   EACH MARQUEE ROW
========================= */

.services-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;

    /* subtle edge fade */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
    );
}


/* =========================
   MOVING TRACK
========================= */

.services-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 18px;

    will-change: transform;
}


/* TOP ROW - LEFT */
.marquee-left .services-track {
    animation: serviceScrollLeft 45s linear infinite;
}


/* BOTTOM ROW - RIGHT */
.marquee-right .services-track {
    animation: serviceScrollRight 50s linear infinite;
}


/* =========================
   IMPORTANT:
   HOVER PAR POORI ROW STOP
========================= */

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


/* =========================
   SERVICE BOX
========================= */

.service-pill {
    position: relative;

    min-width: max-content;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    padding: 22px 30px;

    border-radius: 18px;

    border: 1px solid rgba(78, 73, 139, 0.22);

    background: rgba(255, 255, 255, 0.72);

    color: #131a42;

    font-family: inherit;
    font-size: 17px;
    font-weight: 600;

    line-height: 1.2;
    text-decoration: none;

    box-shadow:
        0 6px 22px rgba(35, 44, 100, 0.035);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease;
}


/* =========================
   ARROW
========================= */

.service-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #6254ff;

    font-size: 22px;
    font-weight: 700;

    transition:
        transform 0.35s ease,
        color 0.35s ease;
}


/* =========================
   CARD HOVER
========================= */

.service-pill:hover {
    transform: translateY(-3px);

    color: #ffffff;

    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            #5c55ff 0%,
            #5841e9 52%,
            #742be6 100%
        );

    box-shadow:
        0 14px 35px rgba(91, 74, 255, 0.23);
}


.service-pill:hover .service-arrow {
    color: #ffffff;
    transform: translate(4px, -4px);
}


/* subtle shine */
.service-pill::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.22),
        transparent 70%
    );

    transform: translateX(-120%);

    transition: transform 0.7s ease;

    pointer-events: none;
}


.service-pill:hover::before {
    transform: translateX(120%);
}


/* =========================
   ANIMATIONS
========================= */

@keyframes serviceScrollLeft {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - 9px));
    }

}


@keyframes serviceScrollRight {

    from {
        transform: translateX(calc(-50% - 9px));
    }

    to {
        transform: translateX(0);
    }

}


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

@media (max-width: 991px) {

    .services-marquee-section {
        padding: 55px 0;
    }

    .services-marquee-wrap {
        gap: 18px;
    }

    .services-track {
        gap: 14px;
    }

    .service-pill {
        padding: 19px 25px;

        border-radius: 16px;

        font-size: 15px;

        gap: 12px;
    }

    .service-arrow {
        font-size: 19px;
    }

}


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

@media (max-width: 575px) {

    .services-marquee-section {
        padding: 45px 0;
    }

    .services-marquee-wrap {
        gap: 14px;
    }

    .services-track {
        gap: 11px;
    }

    .service-pill {
        padding: 16px 20px;

        font-size: 14px;

        border-radius: 13px;

        gap: 9px;
    }

    .service-arrow {
        font-size: 17px;
    }

    .marquee-left .services-track {
        animation-duration: 35s;
    }

    .marquee-right .services-track {
        animation-duration: 38s;
    }

}


/* =========================
   REDUCED MOTION
========================= */

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

    .services-track {
        animation-play-state: paused !important;
    }

}


.web-types-heading {
    margin-bottom: 32px;
    text-align: center;
}

/* ==========================================================
   PROBLEM + SOLUTION SECTION
========================================================== */

.problem-solution-section {
    --primary: #5d56ff;
    --primary-dark: #4038dd;
    --primary-light: #7b75ff;

    --secondary: #842cf5;

    --dark: #10183e;
    --dark-2: #17214c;

    --text: #46516f;
    --muted: #747e98;

    --light-bg: #f7f8ff;
    --border: rgba(74, 79, 145, 0.13);

    position: relative;
    overflow: hidden;

    padding: 100px 20px;

    background:
        radial-gradient(
            circle at 5% 25%,
            rgba(93, 86, 255, 0.09),
            transparent 28%
        ),
        radial-gradient(
            circle at 95% 75%,
            rgba(132, 44, 245, 0.08),
            transparent 30%
        ),
        #ffffff;

    font-family: inherit;
}


/* ==========================================================
   BACKGROUND
========================================================== */

.ps-bg-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;
}

.ps-glow-one {
    width: 300px;
    height: 300px;

    left: -160px;
    top: 200px;

    background: rgba(94, 87, 255, 0.12);
}

.ps-glow-two {
    width: 360px;
    height: 360px;

    right: -180px;
    bottom: -100px;

    background: rgba(132, 44, 245, 0.10);
}


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

.ps-container {
    position: relative;
    z-index: 2;

    max-width: 1180px;

    margin: 0 auto;
}


/* ==========================================================
   HEADING
========================================================== */

.ps-heading {
    max-width: 780px;

    margin: 0 auto 55px;

    text-align: center;
}


/* BADGE */

.ps-badge {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 18px;

    padding: 7px 13px;

    color: var(--primary);

    background: rgba(93, 86, 255, 0.06);

    border: 1px solid rgba(93, 86, 255, 0.16);

    border-radius: 100px;

    font-size: 12px;
    font-weight: 700;
}


.ps-badge-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--primary);

    box-shadow:
        0 0 0 4px rgba(93, 86, 255, 0.10);

    animation: psDotPulse 2s infinite;
}


@keyframes psDotPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 3px rgba(93, 86, 255, 0.10);
    }

    50% {
        box-shadow:
            0 0 0 7px rgba(93, 86, 255, 0.02);
    }
}


/* TITLE */

.ps-heading h2 {
    margin: 0;

    color: var(--dark);

    font-size: clamp(34px, 4vw, 52px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.8px;
}


.ps-heading h2 span {
    display: block;

    margin-top: 3px;

    color: var(--primary);
}


/* DESCRIPTION */

.ps-heading p {
    max-width: 690px;

    margin: 18px auto 0;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.75;
}


/* ==========================================================
   CONTENT GRID
========================================================== */

.ps-content {
    display: grid;

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

    align-items: center;

    gap: 25px;
}


/* ==========================================================
   COMMON CARD
========================================================== */

.ps-problem-card,
.ps-solution-card {
    position: relative;

    min-height: 470px;

    padding: 30px;

    border-radius: 24px;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.ps-problem-card:hover,
.ps-solution-card:hover {
    transform: translateY(-6px);
}


/* ==========================================================
   LEFT CARD
========================================================== */

.ps-problem-card {
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,1),
            rgba(248,249,255,0.96)
        );

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

    box-shadow:
        0 20px 55px rgba(21, 31, 77, 0.07);
}


.ps-problem-card:hover {
    box-shadow:
        0 28px 70px rgba(21, 31, 77, 0.11);
}


.ps-left-decoration {
    position: absolute;

    width: 140px;
    height: 140px;

    left: -70px;
    bottom: -80px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(93, 86, 255, 0.06),
            transparent
        );

    pointer-events: none;
}


/* ==========================================================
   CARD HEADINGS
========================================================== */

.ps-card-heading {
    position: relative;

    z-index: 2;

    margin-bottom: 25px;
}


.ps-small-title {
    display: inline-block;

    margin-bottom: 8px;

    color: var(--primary);

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}


.ps-card-heading h3 {
    margin: 0;

    color: var(--dark);

    font-size: 25px;

    font-weight: 750;

    line-height: 1.17;

    letter-spacing: -0.6px;
}


.ps-card-heading h3 span {
    display: block;

    color: var(--primary);
}


/* ==========================================================
   LEFT PROBLEM ITEMS
========================================================== */

.ps-problem-list {
    display: flex;

    flex-direction: column;

    gap: 11px;
}


.ps-problem-item {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 15px 15px;

    background: #ffffff;

    border: 1px solid rgba(55, 68, 121, 0.10);

    border-radius: 13px;

    box-shadow:
        0 5px 18px rgba(28, 37, 78, 0.025);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.ps-problem-item:hover {
    transform: translateX(5px);

    border-color: rgba(93, 86, 255, 0.24);

    box-shadow:
        0 10px 28px rgba(93, 86, 255, 0.08);
}


/* ICON */

.ps-problem-icon {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(93, 86, 255, 0.12),
            rgba(132, 44, 245, 0.06)
        );
}


.ps-problem-icon svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: var(--primary);

    stroke-width: 2.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* TEXT */

.ps-problem-text h4,
.ps-solution-text h4 {
    margin: 0 0 4px;

    font-size: 13px;

    font-weight: 750;
}


.ps-problem-text h4 {
    color: var(--dark);
}


.ps-problem-text p {
    margin: 0;

    color: var(--muted);

    font-size: 10.5px;

    line-height: 1.5;
}


/* ==========================================================
   CENTER CONNECTOR
========================================================== */

.ps-connector {
    height: 400px;

    display: flex;

    flex-direction: column;

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


.ps-line {
    width: 1px;

    flex: 1;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(93, 86, 255, 0.35),
            rgba(93, 86, 255, 0.12)
        );
}


.ps-line-bottom {
    background:
        linear-gradient(
            to bottom,
            rgba(93, 86, 255, 0.12),
            rgba(93, 86, 255, 0.35),
            transparent
        );
}


/* ARROW */

.ps-arrow-wrap {
    position: relative;

    margin: 13px 0 7px;
}


.ps-arrow-circle {
    position: relative;

    z-index: 2;

    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    box-shadow:
        0 10px 30px rgba(93, 86, 255, 0.30);

    animation:
        psArrowMove 2.2s ease-in-out infinite;
}


.ps-arrow-circle svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: #fff;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.ps-arrow-ring {
    position: absolute;

    inset: -7px;

    border: 1px solid rgba(93, 86, 255, 0.25);

    border-radius: 50%;

    animation: psRingPulse 2.2s ease-out infinite;
}


@keyframes psArrowMove {

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

    50% {
        transform: translateX(5px);
    }
}


@keyframes psRingPulse {

    0% {
        transform: scale(0.86);
        opacity: 0.9;
    }

    70% {
        transform: scale(1.25);
        opacity: 0;
    }

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


/* CONNECTOR TEXT */

.ps-direction-text {
    margin-bottom: 8px;

    text-align: center;

    color: var(--muted);

    font-size: 7px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.6px;
}


.ps-direction-text span {
    display: block;

    color: var(--primary);
}


/* ==========================================================
   RIGHT CARD
========================================================== */

.ps-solution-card {
    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(132, 44, 245, 0.27),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #171c50 0%,
            #10163e 48%,
            #181448 100%
        );

    border:
        1px solid rgba(122, 115, 255, 0.25);

    box-shadow:
        0 25px 60px rgba(25, 21, 82, 0.22);
}


.ps-solution-card:hover {
    box-shadow:
        0 32px 80px rgba(42, 35, 131, 0.29);
}


.ps-solution-shine {
    position: absolute;

    width: 180px;
    height: 500px;

    top: -170px;
    left: -250px;

    transform: rotate(25deg);

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, 0.05),
            transparent
        );

    animation: psShine 7s infinite;
}


@keyframes psShine {

    0%,
    55% {
        left: -250px;
    }

    80%,
    100% {
        left: 650px;
    }
}


/* RIGHT HEADING */

.ps-solution-card .ps-small-title {
    color: #9b96ff;
}


.ps-solution-card .ps-card-heading h3 {
    color: #ffffff;
}


.ps-solution-card .ps-card-heading h3 span {
    color: #938dff;
}


/* ==========================================================
   SOLUTION ITEMS
========================================================== */

.ps-solution-list {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 11px;
}


.ps-solution-item {
    display: flex;

    gap: 14px;

    align-items: center;

    padding: 14px;

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 12px;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}


.ps-solution-item:hover {
    transform: translateX(5px);

    background:
        rgba(255, 255, 255, 0.075);

    border-color:
        rgba(135, 127, 255, 0.35);
}


/* NUMBER */

.ps-step-number {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 9px;

    color: #aaa6ff;

    background:
        rgba(112, 105, 255, 0.12);

    border:
        1px solid rgba(133, 126, 255, 0.10);

    font-size: 10px;

    font-weight: 800;
}


.ps-solution-text h4 {
    color: #ffffff;
}


.ps-solution-text p {
    margin: 0;

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

    font-size: 10.5px;

    line-height: 1.5;
}


/* ==========================================================
   CTA
========================================================== */

.ps-cta {
    position: relative;
    z-index: 3;

    display: flex;

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

    gap: 20px;

    margin-top: 20px;

    padding: 14px 15px 14px 17px;

    color: #ffffff;

    text-decoration: none;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    box-shadow:
        0 12px 32px rgba(93, 86, 255, 0.25);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.ps-cta:hover {
    transform: translateY(-3px);

    box-shadow:
        0 17px 40px rgba(93, 86, 255, 0.36);
}


.ps-cta-text {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.ps-cta-text small {
    opacity: 0.72;

    font-size: 8px;
}


.ps-cta-text strong {
    font-size: 12px;

    font-weight: 750;
}


/* CTA ARROW */

.ps-cta-arrow {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;

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

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.15);

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.ps-cta:hover .ps-cta-arrow {
    transform: translateX(4px);

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


.ps-cta-arrow svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: #ffffff;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   INITIAL ANIMATION STATES
========================================================== */

.reveal-up,
.reveal-left,
.reveal-right,
.reveal-center {
    opacity: 0;

    transition:
        opacity 0.8s cubic-bezier(.2,.7,.2,1),
        transform 0.8s cubic-bezier(.2,.7,.2,1);
}


.reveal-up {
    transform: translateY(35px);
}


.reveal-left {
    transform: translateX(-45px);
}


.reveal-right {
    transform: translateX(45px);
}


.reveal-center {
    transform: scale(0.85);
}


/* ACTIVE STATE */

.problem-solution-section.ps-visible .reveal-up,
.problem-solution-section.ps-visible .reveal-left,
.problem-solution-section.ps-visible .reveal-right,
.problem-solution-section.ps-visible .reveal-center {
    opacity: 1;

    transform:
        translateX(0)
        translateY(0)
        scale(1);
}


/* DIFFERENT DELAYS */

.problem-solution-section.ps-visible .reveal-left {
    transition-delay: 0.18s;
}

.problem-solution-section.ps-visible .reveal-center {
    transition-delay: 0.38s;
}

.problem-solution-section.ps-visible .reveal-right {
    transition-delay: 0.48s;
}


/* ==========================================================
   STAGGER ITEMS
========================================================== */

.stagger-item {
    opacity: 0;

    transform: translateY(16px);

    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}


.problem-solution-section.ps-visible
.ps-problem-card .stagger-item:nth-child(1) {
    transition-delay: 0.45s;
}

.problem-solution-section.ps-visible
.ps-problem-card .stagger-item:nth-child(2) {
    transition-delay: 0.55s;
}

.problem-solution-section.ps-visible
.ps-problem-card .stagger-item:nth-child(3) {
    transition-delay: 0.65s;
}

.problem-solution-section.ps-visible
.ps-problem-card .stagger-item:nth-child(4) {
    transition-delay: 0.75s;
}


.problem-solution-section.ps-visible
.ps-solution-card .stagger-item:nth-child(1) {
    transition-delay: 0.70s;
}

.problem-solution-section.ps-visible
.ps-solution-card .stagger-item:nth-child(2) {
    transition-delay: 0.82s;
}

.problem-solution-section.ps-visible
.ps-solution-card .stagger-item:nth-child(3) {
    transition-delay: 0.94s;
}


.problem-solution-section.ps-visible .stagger-item {
    opacity: 1;

    transform: translateY(0);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .problem-solution-section {
        padding: 80px 20px;
    }


    .ps-content {
        grid-template-columns:
            minmax(0, 1fr)
            65px
            minmax(0, 1fr);

        gap: 15px;
    }


    .ps-problem-card,
    .ps-solution-card {
        padding: 23px;

        border-radius: 20px;
    }


    .ps-card-heading h3 {
        font-size: 21px;
    }


    .ps-problem-item,
    .ps-solution-item {
        gap: 10px;

        padding: 12px;
    }

}


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

@media (max-width: 767px) {

    .problem-solution-section {
        padding: 65px 16px;
    }


    .ps-heading {
        margin-bottom: 38px;
    }


    .ps-heading h2 {
        font-size: 34px;

        letter-spacing: -1px;
    }


    .ps-heading p {
        font-size: 14px;
    }


    .ps-content {
        display: flex;

        flex-direction: column;

        gap: 0;
    }


    .ps-problem-card,
    .ps-solution-card {
        width: 100%;

        min-height: auto;

        box-sizing: border-box;
    }


    /* CONNECTOR VERTICAL */

    .ps-connector {
        height: 115px;

        width: 100%;

        flex-direction: row;

        position: relative;
    }


    .ps-line {
        height: 1px;

        width: auto;

        flex: 1;

        background:
            linear-gradient(
                to right,
                transparent,
                rgba(93, 86, 255, 0.35)
            );
    }


    .ps-line-bottom {
        background:
            linear-gradient(
                to right,
                rgba(93, 86, 255, 0.35),
                transparent
            );
    }


    .ps-arrow-wrap {
        margin: 0 12px;
    }


    .ps-direction-text {
        position: absolute;

        bottom: 10px;

        left: 50%;

        transform: translateX(-50%);
    }


    .ps-arrow-circle {
        transform: rotate(90deg);
    }


    @keyframes psArrowMove {

        0%,
        100% {
            transform:
                rotate(90deg)
                translateX(0);
        }

        50% {
            transform:
                rotate(90deg)
                translateX(5px);
        }
    }

}


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

@media (max-width: 480px) {

    .problem-solution-section {
        padding: 55px 14px;
    }


    .ps-heading h2 {
        font-size: 29px;
    }


    .ps-card-heading h3 {
        font-size: 22px;
    }


    .ps-problem-card,
    .ps-solution-card {
        padding: 20px;
    }


    .ps-problem-item,
    .ps-solution-item {
        padding: 13px;
    }


    .ps-problem-text p,
    .ps-solution-text p {
        font-size: 10px;
    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}

/* ================================================
   EVERYDAY TECH SECTION
================================================ */

.everyday-tech-section {
    --tech-primary: #5d56ff;
    --tech-secondary: #842cf5;
    --tech-dark: #11183f;
    --tech-text: #4f5974;
    --tech-muted: #7b849c;

    position: relative;

    overflow: hidden;

    padding: 90px 20px;

    background:
        radial-gradient(
            circle at 95% 25%,
            rgba(93, 86, 255, 0.08),
            transparent 28%
        ),
        #ffffff;
}


/* CONTAINER */

.everyday-tech-container {
    max-width: 1180px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    align-items: center;

    gap: 75px;
}


/* ================================================
   LEFT CONTENT
================================================ */

.everyday-tech-content {
    max-width: 520px;
}


/* SMALL LABEL */

.everyday-tech-label {
    display: inline-block;

    margin-bottom: 15px;

    color: var(--tech-primary);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.7px;
}


/* HEADING */

.everyday-tech-content h2 {
    margin: 0;

    color: var(--tech-dark);

    font-size: clamp(30px, 3vw, 40px);

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -1px;
}


.everyday-tech-content h2 span {
    display: block;

    margin-top: 4px;

    color: var(--tech-primary);
}


/* DESCRIPTION */

.everyday-tech-desc {
    margin: 18px 0 28px;

    color: var(--tech-muted);

    font-size: 14px;

    line-height: 1.75;
}


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

.everyday-tech-points {
    display: flex;

    flex-direction: column;

    gap: 18px;
}


.everyday-tech-point {
    display: flex;

    align-items: flex-start;

    gap: 14px;
}


/* CHECK ICON */

.tech-check {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: flex;

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

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(93, 86, 255, 0.12),
            rgba(132, 44, 245, 0.06)
        );
}


.tech-check svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke: var(--tech-primary);

    stroke-width: 2.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* POINT TEXT */

.everyday-tech-point h4 {
    margin: 0 0 4px;

    color: var(--tech-dark);

    font-size: 14px;

    font-weight: 750;
}


.everyday-tech-point p {
    margin: 0;

    color: var(--tech-muted);

    font-size: 11.5px;

    line-height: 1.6;
}


/* ================================================
   RIGHT IMAGE
================================================ */

.everyday-tech-image-wrap {
    position: relative;
}


.everyday-tech-image-box {
    position: relative;

    overflow: hidden;

    min-height: 400px;

    border-radius: 26px;

    background: #f4f5ff;

    box-shadow:
        0 25px 65px rgba(31, 38, 91, 0.12);
}


/* IMAGE */

.everyday-tech-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s ease;
}


.everyday-tech-image-box:hover
.everyday-tech-image {
    transform: scale(1.04);
}


/* LIGHT OVERLAY */

.everyday-tech-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(17,24,63,0.34),
            transparent 45%
        );

    pointer-events: none;
}


/* FLOATING TAG */

.everyday-tech-image-tag {
    position: absolute;

    left: 22px;
    bottom: 22px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 11px 14px;

    border-radius: 12px;

    color: var(--tech-dark);

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

    border:
        1px solid rgba(255,255,255,0.55);

    box-shadow:
        0 12px 30px rgba(20,25,70,0.12);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    font-size: 10px;

    font-weight: 700;

    animation:
        techTagFloat 4s ease-in-out infinite;
}


.everyday-tech-image-tag span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--tech-primary);

    box-shadow:
        0 0 0 4px rgba(93,86,255,0.10);
}


@keyframes techTagFloat {

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

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

}


/* ================================================
   SCROLL ANIMATION
================================================ */

.tech-reveal-left,
.tech-reveal-right {
    opacity: 0;

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.2,.7,.2,1);
}


.tech-reveal-left {
    transform: translateX(-35px);
}


.tech-reveal-right {
    transform: translateX(35px);
}


.everyday-tech-section.tech-visible
.tech-reveal-left,
.everyday-tech-section.tech-visible
.tech-reveal-right {
    opacity: 1;

    transform: translateX(0);
}


.everyday-tech-section.tech-visible
.tech-reveal-right {
    transition-delay: 0.12s;
}


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

@media (max-width: 991px) {

    .everyday-tech-section {
        padding: 75px 20px;
    }


    .everyday-tech-container {
        gap: 45px;
    }


    .everyday-tech-image-box {
        min-height: 420px;
    }

}


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

@media (max-width: 767px) {

    .everyday-tech-section {
        padding: 65px 18px;
    }


    .everyday-tech-container {
        grid-template-columns: 1fr;

        gap: 42px;
    }


    .everyday-tech-content {
        max-width: 100%;
    }


    .everyday-tech-content h2 {
        font-size: 31px;
    }


    .everyday-tech-image-box {
        min-height: 390px;

        border-radius: 20px;
    }

}


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

@media (max-width: 480px) {

    .everyday-tech-section {
        padding: 55px 16px;
    }


    .everyday-tech-content h2 {
        font-size: 28px;
    }


    .everyday-tech-desc {
        font-size: 13px;
    }


    .everyday-tech-image-box {
        min-height: 330px;
    }


    .everyday-tech-image-tag {
        left: 15px;
        bottom: 15px;

        padding: 9px 11px;

        font-size: 9px;
    }

}

.fb-clean-image-reveal img {
    background-size: cover;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.everyday-tech-image-box img {
    background-size: cover;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================
   TECH SUPPORT FAQ SECTION
========================================================= */

.techsupport-faq-section {
    --techsupport-faq-primary: #5d56ff;
    --techsupport-faq-secondary: #842cf5;
    --techsupport-faq-dark: #11183f;
    --techsupport-faq-text: #4f5974;
    --techsupport-faq-muted: #7c849d;
    --techsupport-faq-border: rgba(67, 74, 137, 0.13);

    position: relative;
    overflow: hidden;

    padding: 90px 20px;

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(93, 86, 255, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 96% 90%,
            rgba(132, 44, 245, 0.05),
            transparent 30%
        ),
        #ffffff;
}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.techsupport-faq-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;
}


.techsupport-faq-glow-left {
    width: 280px;
    height: 280px;

    left: -150px;
    top: 80px;

    background:
        rgba(93, 86, 255, 0.10);
}


.techsupport-faq-glow-right {
    width: 300px;
    height: 300px;

    right: -150px;
    bottom: -100px;

    background:
        rgba(132, 44, 245, 0.07);
}


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

.techsupport-faq-container {
    position: relative;
    z-index: 2;

    max-width: 1180px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(280px, 0.75fr)
        minmax(0, 1.25fr);

    align-items: start;

    gap: 80px;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.techsupport-faq-intro {
    position: sticky;

    top: 100px;

    max-width: 410px;
}


.techsupport-faq-label {
    display: inline-block;

    margin-bottom: 14px;

    color:
        var(--techsupport-faq-primary);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.8px;
}


/* HEADING */

.techsupport-faq-heading {
    margin: 0;

    color:
        var(--techsupport-faq-dark);

    font-size:
        clamp(29px, 3vw, 39px);

    line-height: 1.16;

    font-weight: 800;

    letter-spacing: -1px;
}


.techsupport-faq-heading span {
    display: block;

    margin-top: 4px;

    color:
        var(--techsupport-faq-primary);
}


/* DESCRIPTION */

.techsupport-faq-description {
    margin: 17px 0 0;

    max-width: 390px;

    color:
        var(--techsupport-faq-muted);

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   FAQ LIST
========================================================= */

.techsupport-faq-list {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


/* =========================================================
   FAQ ITEM
========================================================= */

.techsupport-faq-item {
    position: relative;

    overflow: hidden;

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.95);

    border:
        1px solid
        var(--techsupport-faq-border);

    box-shadow:
        0 6px 22px
        rgba(28, 35, 90, 0.035);

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}


.techsupport-faq-item:hover {
    transform: translateY(-2px);

    border-color:
        rgba(93, 86, 255, 0.20);

    box-shadow:
        0 12px 32px
        rgba(28, 35, 90, 0.07);
}


/* ACTIVE ITEM */

.techsupport-faq-item.techsupport-faq-active {
    border-color:
        rgba(93, 86, 255, 0.26);

    box-shadow:
        0 14px 38px
        rgba(93, 86, 255, 0.08);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,1),
            rgba(248,248,255,0.95)
        );
}


/* ACTIVE LEFT LINE */

.techsupport-faq-item.techsupport-faq-active::before {
    content: "";

    position: absolute;

    left: 0;
    top: 18px;
    bottom: 18px;

    width: 3px;

    border-radius:
        0 10px 10px 0;

    background:
        linear-gradient(
            to bottom,
            var(--techsupport-faq-primary),
            var(--techsupport-faq-secondary)
        );
}


/* =========================================================
   QUESTION
========================================================= */

.techsupport-faq-question {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding:
        20px 21px;

    border: 0;

    outline: 0;

    background: transparent;

    cursor: pointer;

    text-align: left;

    font-family: inherit;

    color:
        var(--techsupport-faq-dark);

    font-size: 14px;

    font-weight: 700;

    line-height: 1.45;

    transition:
        color 0.3s ease;
}


.techsupport-faq-item.techsupport-faq-active
.techsupport-faq-question {
    color:
        var(--techsupport-faq-primary);
}


/* =========================================================
   PLUS / MINUS ICON
========================================================= */

.techsupport-faq-icon {
    position: relative;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: block;

    border-radius: 10px;

    background:
        rgba(93, 86, 255, 0.07);

    transition:
        background 0.3s ease,
        transform 0.35s ease;
}


/* HORIZONTAL */

.techsupport-faq-icon::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 13px;
    height: 2px;

    border-radius: 10px;

    background:
        var(--techsupport-faq-primary);

    transform:
        translate(-50%, -50%);
}


/* VERTICAL */

.techsupport-faq-icon::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 2px;
    height: 13px;

    border-radius: 10px;

    background:
        var(--techsupport-faq-primary);

    transform:
        translate(-50%, -50%);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


/* ACTIVE ICON */

.techsupport-faq-item.techsupport-faq-active
.techsupport-faq-icon {
    transform: rotate(180deg);

    background:
        linear-gradient(
            135deg,
            var(--techsupport-faq-primary),
            var(--techsupport-faq-secondary)
        );
}


.techsupport-faq-item.techsupport-faq-active
.techsupport-faq-icon::before {
    background: #ffffff;
}


.techsupport-faq-item.techsupport-faq-active
.techsupport-faq-icon::after {
    opacity: 0;

    background: #ffffff;

    transform:
        translate(-50%, -50%)
        rotate(90deg);
}


/* =========================================================
   ANSWER
========================================================= */

.techsupport-faq-answer {
    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height 0.42s
        cubic-bezier(.2,.7,.2,1),
        opacity 0.25s ease;
}


.techsupport-faq-item.techsupport-faq-active
.techsupport-faq-answer {
    opacity: 1;
}


.techsupport-faq-answer-inner {
    position: relative;

    margin:
        0 21px;

    padding:
        0 55px 20px 0;

    color:
        var(--techsupport-faq-muted);

    font-size: 12.5px;

    line-height: 1.75;
}


/* ANSWER DIVIDER */

.techsupport-faq-item.techsupport-faq-active
.techsupport-faq-answer-inner::before {
    content: "";

    display: block;

    width: 100%;

    height: 1px;

    margin-bottom: 15px;

    background:
        linear-gradient(
            to right,
            rgba(93, 86, 255, 0.15),
            transparent
        );
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.techsupport-faq-reveal-left,
.techsupport-faq-reveal-right {
    opacity: 0;

    transition:
        opacity 0.8s ease,
        transform 0.8s
        cubic-bezier(.2,.7,.2,1);
}


.techsupport-faq-reveal-left {
    transform:
        translateX(-32px);
}


.techsupport-faq-reveal-right {
    transform:
        translateX(32px);
}


.techsupport-faq-section.techsupport-faq-visible
.techsupport-faq-reveal-left,
.techsupport-faq-section.techsupport-faq-visible
.techsupport-faq-reveal-right {
    opacity: 1;

    transform:
        translateX(0);
}


.techsupport-faq-section.techsupport-faq-visible
.techsupport-faq-reveal-right {
    transition-delay: 0.12s;
}


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

@media (max-width: 991px) {

    .techsupport-faq-section {
        padding:
            75px 20px;
    }


    .techsupport-faq-container {
        grid-template-columns:
            0.8fr 1.2fr;

        gap: 45px;
    }


    .techsupport-faq-intro {
        position: static;
    }

}


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

@media (max-width: 767px) {

    .techsupport-faq-section {
        padding:
            65px 18px;
    }


    .techsupport-faq-container {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .techsupport-faq-intro {
        max-width: 100%;
    }


    .techsupport-faq-heading {
        font-size: 30px;
    }


    .techsupport-faq-description {
        max-width: 100%;
    }


    .techsupport-faq-question {
        padding:
            18px 17px;

        font-size: 13px;

        gap: 15px;
    }


    .techsupport-faq-answer-inner {
        margin:
            0 17px;

        padding:
            0 35px 18px 0;
    }

}


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

@media (max-width: 480px) {

    .techsupport-faq-section {
        padding:
            55px 15px;
    }


    .techsupport-faq-heading {
        font-size: 27px;
    }


    .techsupport-faq-description {
        font-size: 13px;
    }


    .techsupport-faq-item {
        border-radius: 14px;
    }


    .techsupport-faq-question {
        padding:
            16px 14px;

        font-size: 12.5px;

        line-height: 1.5;
    }


    .techsupport-faq-icon {
        width: 30px;
        height: 30px;

        flex-basis: 30px;

        border-radius: 9px;
    }


    .techsupport-faq-answer-inner {
        margin:
            0 14px;

        padding:
            0 15px 17px 0;

        font-size: 11.5px;
    }

}