* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

header {
    height: 80px;

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

    padding: 0 70px;

    background-color: white;

    border-bottom: 1px solid #eeeeee;
}

.logo {
    font-size: 25px;
    font-weight: bold;
}

nav {
    display: flex;
    gap: 30px;
}

nav a {
    color: #111827;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

header button {
    border: none;

    padding: 13px 25px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #2563EB,
        #7C3AED
    );

    color: white;

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

    cursor: pointer;
}/* HERO SECTION */

section {
    min-height: 600px;

    padding: 100px 70px;

    background-color: #ffffff;
}

section h1 {
    font-size: 60px;
    line-height: 1.1;

    color: #111827;

    max-width: 700px;

    margin-bottom: 25px;
}

section p {
    font-size: 18px;
    line-height: 1.7;

    color: #475569;

    max-width: 650px;

    margin-bottom: 30px;
}

section button {
    border: none;

    padding: 16px 28px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #2563EB,
        #7C3AED
    );

    color: white;

    font-size: 16px;
    font-weight: bold;

    cursor: pointer;
}/* =========================
   HERO SECTION
========================= */

.hero {
    min-height: 85vh;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 60px;
    padding: 80px 8%;
    position: relative;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-tag {
    display: inline-block;
    padding: 10px 18px;
    margin-bottom: 22px;

    background: rgba(37, 99, 235, 0.08);
    color: #2563EB;

    border-radius: 50px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.hero h1 {
    max-width: 760px;

    font-size: clamp(52px, 6vw, 86px);
    line-height: 1.02;
    letter-spacing: -4px;

    color: #111827;
    margin-bottom: 26px;
}

.hero h1 span {
    display: block;

    background: linear-gradient(
        90deg,
        #2563EB,
        #7C3AED
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-content p {
    max-width: 620px;

    font-size: 18px;
    line-height: 1.7;

    color: #64748B;

    margin-bottom: 34px;
}


/* HERO BUTTONS */

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
}

.primary-btn,
.secondary-btn {
    display: inline-block;

    padding: 15px 26px;

    border-radius: 12px;

    text-decoration: none;
    font-size: 15px;
    font-weight: 600;

    transition: all 0.3s ease;
}

.primary-btn {
    background: linear-gradient(
        90deg,
        #2563EB,
        #7C3AED
    );

    color: white;

    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
}

.primary-btn:hover {
    transform: translateY(-4px);

    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.35);
}

.secondary-btn {
    background: white;

    color: #111827;

    border: 1px solid #E2E8F0;
}

.secondary-btn:hover {
    transform: translateY(-4px);

    border-color: #2563EB;
}


/* HERO VISUAL */

.hero-visual {
    position: relative;

    height: 520px;

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

.gradient-orb {
    width: 350px;
    height: 350px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #2563EB,
            #7C3AED,
            #EC4899
        );

    box-shadow:
        0 40px 100px rgba(124, 58, 237, 0.25);

    animation: orbFloat 5s ease-in-out infinite;
}


/* FLOATING CARDS */

.floating-card {
    position: absolute;

    width: 210px;

    padding: 22px;

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

    backdrop-filter: blur(18px);

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

    border-radius: 20px;

    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.15);

    z-index: 3;

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

.floating-card strong {
    display: block;

    font-size: 32px;

    color: #111827;

    margin-bottom: 5px;
}

.floating-card span {
    font-size: 14px;

    color: #64748B;
}

.card-1 {
    top: 75px;
    left: 0;
}

.card-2 {
    right: 0;
    bottom: 75px;

    animation-delay: 1s;
}


/* ANIMATIONS */

@keyframes orbFloat {

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

    50% {
        transform: translateY(-18px) rotate(6deg);
    }
}

@keyframes cardFloat {

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

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


/* RESPONSIVE */

@media (max-width: 900px) {

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

        text-align: center;

        padding-top: 70px;
    }

    .hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-visual {
        height: 420px;
    }
}

@media (max-width: 600px) {

    .hero {
        padding: 55px 20px;
    }

    .hero h1 {
        font-size: 46px;
        letter-spacing: -2px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .gradient-orb {
        width: 250px;
        height: 250px;
    }

    .floating-card {
        width: 170px;
        padding: 18px;
    }
}/* =========================
   STEP 3D - HERO POLISH
========================= */

.hero {
    min-height: calc(100vh - 94px);
    padding-top: 55px;
    padding-bottom: 55px;
}

.hero-content {
    max-width: 760px;
}

.hero h1 {
    font-size: clamp(58px, 5.7vw, 84px);
}

.hero-visual {
    height: 500px;
}

.gradient-orb {
    width: 335px;
    height: 335px;

    box-shadow:
        0 35px 90px rgba(124, 58, 237, 0.22),
        0 0 100px rgba(37, 99, 235, 0.08);
}

.card-1 {
    top: 70px;
    left: 5px;
}

.card-2 {
    right: 5px;
    bottom: 70px;
}/* =========================
   HEADER LOGO
========================= */

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 185px;
    height: 58px;
    object-fit: contain;
    display: block;
}/* =========================
   STEP 5 - HERO ENTRANCE MOTION
========================= */

.hero-content {
    animation: heroContentReveal 1s ease forwards;
}

.hero-visual {
    animation: heroVisualReveal 1.2s ease forwards;
}

@keyframes heroContentReveal {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes heroVisualReveal {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}/* =========================
   STEP 5C - BACKGROUND MOTION
========================= */

.bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}

.blob-1 {
    width: 320px;
    height: 320px;
    background: #2563EB;
    top: -80px;
    left: -100px;
    animation: blobMoveOne 9s ease-in-out infinite;
}

.blob-2 {
    width: 360px;
    height: 360px;
    background: #7C3AED;
    right: -120px;
    bottom: -120px;
    animation: blobMoveTwo 11s ease-in-out infinite;
}

@keyframes blobMoveOne {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(80px, 40px) scale(1.15);
    }
}

@keyframes blobMoveTwo {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-70px, -40px) scale(1.12);
    }
}


/* CURSOR GLOW */

.cursor-glow {
    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(99, 102, 241, 0.16) 0%,
        rgba(124, 58, 237, 0.08) 35%,
        transparent 70%
    );

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

    pointer-events: none;

    z-index: 1;

    opacity: 0;

    transition: opacity 0.25s ease;
}

.hero:hover .cursor-glow {
    opacity: 1;
}

.hero-content,
.hero-visual {
    position: relative;
    z-index: 2;
}/* =========================
   STEP 5D - NAVBAR MICRO INTERACTIONS
========================= */

nav a {
    position: relative;
    text-decoration: none;
    transition: color 0.3s ease;
}

nav a::after {
    content: "";
    position: absolute;

    left: 50%;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: linear-gradient(
        90deg,
        #2563EB,
        #7C3AED
    );

    border-radius: 10px;

    transform: translateX(-50%);

    transition: width 0.3s ease;
}

nav a:hover {
    color: #2563EB;
}

nav a:hover::after {
    width: 100%;
}


/* HEADER LET'S TALK BUTTON */

header button {
    position: relative;
    overflow: hidden;

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

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

    box-shadow:
        0 12px 30px rgba(37, 99, 235, 0.28);
}

header button::before {
    content: "";

    position: absolute;
    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );

    transform: skewX(-20deg);

    transition: left 0.6s ease;
}

header button:hover::before {
    left: 140%;
}


/* HERO BUTTON MICRO INTERACTION */

.primary-btn,
.secondary-btn {
    position: relative;
    overflow: hidden;
}

.primary-btn::before {
    content: "";

    position: absolute;
    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );

    transform: skewX(-20deg);

    transition: left 0.6s ease;
}

.primary-btn:hover::before {
    left: 140%;
}

.secondary-btn:hover {
    color: #2563EB;

    box-shadow:
        0 10px 30px rgba(37, 99, 235, 0.10);
}/* =========================
   STEP 6B - SERVICES SECTION
========================= */

.services {
    position: relative;
    padding: 120px 8%;
    background: #F8FAFC;
    overflow: hidden;
}


/* SECTION HEADING */

.services-heading {
    max-width: 850px;
    margin-bottom: 70px;
}

.section-tag {
    display: inline-block;
    margin-bottom: 18px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #2563EB;
}

.services-heading h2 {
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.08;
    letter-spacing: -3px;

    color: #111827;

    margin-bottom: 22px;
}

.services-heading h2 span {
    background: linear-gradient(
        90deg,
        #2563EB,
        #7C3AED
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.services-heading p {
    max-width: 650px;

    font-size: 18px;
    line-height: 1.7;

    color: #64748B;
}


/* SERVICES GRID */

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


/* SERVICE CARD */

.service-card {
    position: relative;

    min-height: 320px;

    padding: 38px;

    display: flex;
    flex-direction: column;

    background: #FFFFFF;

    border: 1px solid #E2E8F0;
    border-radius: 26px;

    overflow: hidden;

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


/* GRADIENT GLOW */

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

    position: absolute;

    width: 220px;
    height: 220px;

    right: -100px;
    top: -100px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #2563EB,
        #7C3AED
    );

    opacity: 0;

    filter: blur(20px);

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

    pointer-events: none;
}

.service-card:hover::before {
    opacity: 0.10;
    transform: scale(1.4);
}

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

    border-color: rgba(37, 99, 235, 0.25);

    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.10);
}


/* SERVICE NUMBER */

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

    width: 48px;
    height: 48px;

    margin-bottom: 45px;

    border-radius: 14px;

    background: #EEF2FF;

    color: #2563EB;

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


/* CARD TITLE */

.service-card h3 {
    position: relative;
    z-index: 2;

    font-size: 27px;
    line-height: 1.2;

    color: #111827;

    margin-bottom: 15px;
}


/* CARD DESCRIPTION */

.service-card p {
    position: relative;
    z-index: 2;

    max-width: 520px;

    font-size: 16px;
    line-height: 1.7;

    color: #64748B;

    margin-bottom: 28px;
}


/* CARD LINK */

.service-card a {
    position: relative;
    z-index: 2;

    margin-top: auto;

    width: fit-content;

    text-decoration: none;

    color: #111827;

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

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

.service-card:hover a {
    color: #2563EB;
    transform: translateX(6px);
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .services {
        padding: 90px 6%;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .services {
        padding: 75px 20px;
    }

    .services-heading h2 {
        font-size: 42px;
        letter-spacing: -2px;
    }

    .service-card {
        min-height: 290px;
        padding: 28px;
    }

}/* =========================
   STEP 6C - SERVICES POLISH
========================= */

.services-heading {
    max-width: 780px;
}

.services-heading h2 {
    max-width: 760px;
}

.service-card {
    min-height: 300px;
}

.service-number {
    margin-bottom: 36px;
}.service-card {
    opacity: 0;
    transform: translateY(40px);
}

.service-card.show {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}/* =========================
   STEP 7 - WHY US SECTION
========================= */

.why-us {
    position: relative;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;

    padding: 130px 8%;

    background: #FFFFFF;

    overflow: hidden;
}


/* LEFT SIDE */

.why-us-left {
    position: sticky;
    top: 130px;

    align-self: start;

    max-width: 600px;
}

.why-us-left h2 {
    font-size: clamp(46px, 5vw, 72px);
    line-height: 1.05;
    letter-spacing: -3px;

    color: #111827;

    margin-bottom: 26px;
}

.why-us-left h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #2563EB,
        #7C3AED
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.why-us-left > p {
    max-width: 560px;

    font-size: 18px;
    line-height: 1.75;

    color: #64748B;

    margin-bottom: 40px;
}


/* HIGHLIGHT BOX */

.why-us-highlight {
    max-width: 520px;

    padding: 26px;

    background: #F8FAFC;

    border: 1px solid #E2E8F0;
    border-radius: 22px;
}

.why-us-highlight strong {
    display: block;

    font-size: 18px;

    color: #111827;

    margin-bottom: 8px;
}

.why-us-highlight span {
    font-size: 15px;
    line-height: 1.7;

    color: #64748B;
}


/* RIGHT SIDE GRID */

.why-us-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}


/* WHY CARD */

.why-card {
    position: relative;

    min-height: 280px;

    padding: 32px;

    display: flex;
    flex-direction: column;

    border-radius: 26px;

    background: #F8FAFC;

    border: 1px solid #E2E8F0;

    overflow: hidden;

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

.why-card:nth-child(2),
.why-card:nth-child(4) {
    transform: translateY(45px);
}

.why-card:hover {
    transform: translateY(-8px);

    background: #FFFFFF;

    box-shadow:
        0 28px 70px rgba(15, 23, 42, 0.10);
}

.why-card:nth-child(2):hover,
.why-card:nth-child(4):hover {
    transform: translateY(37px);
}


/* NUMBER */

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

    width: 48px;
    height: 48px;

    margin-bottom: auto;

    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #2563EB,
        #7C3AED
    );

    color: #FFFFFF;

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


/* TITLE */

.why-card h3 {
    margin-top: 55px;
    margin-bottom: 12px;

    font-size: 24px;
    line-height: 1.25;

    color: #111827;
}


/* DESCRIPTION */

.why-card p {
    font-size: 15px;
    line-height: 1.7;

    color: #64748B;
}


/* DECORATIVE BACKGROUND */

.why-us::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    right: -220px;
    top: 80px;

    background: linear-gradient(
        135deg,
        #2563EB,
        #7C3AED
    );

    filter: blur(110px);

    opacity: 0.08;

    pointer-events: none;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .why-us {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .why-us-left {
        position: relative;
        top: 0;
    }

}

@media (max-width: 700px) {

    .why-us {
        padding: 90px 20px;
    }

    .why-us-grid {
        grid-template-columns: 1fr;
    }

    .why-card:nth-child(2),
    .why-card:nth-child(4) {
        transform: none;
    }

    .why-card:nth-child(2):hover,
    .why-card:nth-child(4):hover {
        transform: translateY(-8px);
    }

}/* =========================
   STEP 7C - WHY US REVEAL
========================= */

.why-us-left {
    opacity: 0;
    transform: translateX(-40px);
}

.why-us-left.show {
    opacity: 1;
    transform: translateX(0);

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

.why-card {
    opacity: 0;
}

.why-card.show {
    opacity: 1;

    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        box-shadow 0.4s ease,
        background 0.4s ease;
}/* =========================
   STEP 8 - RESULTS SECTION
========================= */

.results-section {
    position: relative;
    padding: 120px 8%;
    background: #111827;
    overflow: hidden;
}

.results-top {
    max-width: 850px;
    margin-bottom: 75px;
}

.results-section .section-tag {
    color: #818CF8;
}

.results-top h2 {
    font-size: clamp(46px, 5vw, 72px);
    line-height: 1.05;
    letter-spacing: -3px;

    color: #FFFFFF;

    margin-bottom: 24px;
}

.results-top h2 span {
    background: linear-gradient(
        90deg,
        #60A5FA,
        #8B5CF6
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.results-top p {
    max-width: 650px;

    font-size: 18px;
    line-height: 1.7;

    color: #94A3B8;
}


/* STATS GRID */

.results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}


/* RESULT ITEM */

.result-item {
    position: relative;

    padding: 55px 35px;

    border-right: 1px solid rgba(255, 255, 255, 0.12);

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

.result-item:last-child {
    border-right: none;
}

.result-item:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-6px);
}

.result-number {
    margin-bottom: 16px;

    font-size: clamp(52px, 5vw, 76px);
    line-height: 1;

    font-weight: 700;
    letter-spacing: -3px;

    color: #FFFFFF;
}

.result-number .counter {
    background: linear-gradient(
        90deg,
        #60A5FA,
        #8B5CF6
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.result-item p {
    font-size: 15px;
    line-height: 1.6;

    color: #94A3B8;
}


/* BACKGROUND GLOW */

.results-section::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -200px;
    top: -200px;

    border-radius: 50%;

    background: #7C3AED;

    filter: blur(150px);

    opacity: 0.15;

    pointer-events: none;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .results-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .result-item:nth-child(2) {
        border-right: none;
    }

    .result-item:nth-child(1),
    .result-item:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

}

@media (max-width: 600px) {

    .results-section {
        padding: 90px 20px;
    }

    .results-grid {
        grid-template-columns: 1fr;
    }

    .result-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .result-item:last-child {
        border-bottom: none;
    }

}/* =========================
   STEP 9 - PROCESS SECTION
========================= */

.process-section {
    position: relative;
    padding: 130px 8%;
    background: #FFFFFF;
    overflow: hidden;
}


/* HEADING */

.process-heading {
    max-width: 820px;
    margin-bottom: 90px;
}

.process-heading h2 {
    font-size: clamp(46px, 5vw, 72px);
    line-height: 1.05;
    letter-spacing: -3px;

    color: #111827;

    margin-bottom: 24px;
}

.process-heading h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #2563EB,
        #7C3AED
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.process-heading p {
    max-width: 620px;

    font-size: 18px;
    line-height: 1.7;

    color: #64748B;
}


/* TIMELINE */

.process-timeline {
    position: relative;

    max-width: 1100px;

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


/* CENTER LINE */

.process-line {
    position: absolute;

    left: 50%;
    top: 0;

    width: 2px;
    height: 100%;

    transform: translateX(-50%);

    background: #E2E8F0;
}

.process-line-progress {
    width: 100%;
    height: 0;

    border-radius: 10px;

    background: linear-gradient(
        180deg,
        #2563EB,
        #7C3AED
    );

    transition: height 0.2s linear;
}


/* PROCESS STEP */

.process-step {
    position: relative;

    display: grid;
    grid-template-columns: 1fr 90px 1fr;

    align-items: center;

    min-height: 270px;

    opacity: 0;

    transform: translateY(35px);

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

.process-step.show {
    opacity: 1;
    transform: translateY(0);
}


/* ALTERNATING CARDS */

.process-step:nth-of-type(even) .process-content {
    grid-column: 1;
    grid-row: 1;

    text-align: right;
}

.process-step:nth-of-type(odd) .process-content {
    grid-column: 3;
}


/* DOT */

.process-dot {
    grid-column: 2;
    grid-row: 1;

    position: relative;
    z-index: 3;

    width: 66px;
    height: 66px;

    margin: auto;

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

    border-radius: 50%;

    background: #FFFFFF;

    border: 2px solid #E2E8F0;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.08);

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

.process-dot span {
    font-size: 14px;
    font-weight: 700;

    color: #2563EB;
}

.process-step:hover .process-dot {
    transform: scale(1.12);

    border-color: #7C3AED;

    box-shadow:
        0 12px 35px rgba(124, 58, 237, 0.20);
}


/* CONTENT */

.process-content {
    padding: 32px;

    border-radius: 24px;

    background: #F8FAFC;

    border: 1px solid #E2E8F0;

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

.process-content:hover {
    background: #FFFFFF;

    transform: translateY(-6px);

    box-shadow:
        0 25px 60px rgba(15, 23, 42, 0.09);
}

.process-small {
    display: block;

    margin-bottom: 12px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #7C3AED;
}

.process-content h3 {
    margin-bottom: 12px;

    font-size: 25px;

    color: #111827;
}

.process-content p {
    font-size: 15px;
    line-height: 1.7;

    color: #64748B;
}


/* BACKGROUND GLOW */

.process-section::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    left: -250px;
    top: 300px;

    border-radius: 50%;

    background: #2563EB;

    filter: blur(140px);

    opacity: 0.07;

    pointer-events: none;
}


/* RESPONSIVE */

@media (max-width: 800px) {

    .process-section {
        padding: 90px 20px;
    }

    .process-heading {
        margin-bottom: 60px;
    }

    .process-line {
        left: 32px;
    }

    .process-step {
        display: grid;

        grid-template-columns: 65px 1fr;

        min-height: auto;

        margin-bottom: 35px;
    }

    .process-dot {
        grid-column: 1;
        grid-row: 1;

        width: 54px;
        height: 54px;

        margin: 0;
    }

    .process-step:nth-of-type(even) .process-content,
    .process-step:nth-of-type(odd) .process-content {

        grid-column: 2;
        grid-row: 1;

        text-align: left;
    }

}/* =========================
   STEP 10 - INDUSTRIES
========================= */

.industries-section {
    position: relative;
    padding: 130px 8%;
    background: #F8FAFC;
    overflow: hidden;
}


/* HEADING */

.industries-heading {
    max-width: 850px;
    margin-bottom: 75px;
}

.industries-heading h2 {
    font-size: clamp(46px, 5vw, 72px);
    line-height: 1.05;
    letter-spacing: -3px;

    color: #111827;

    margin-bottom: 24px;
}

.industries-heading h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #2563EB,
        #7C3AED
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.industries-heading p {
    max-width: 650px;

    font-size: 18px;
    line-height: 1.7;

    color: #64748B;
}


/* GRID */

.industries-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
}


/* INDUSTRY CARD */

.industry-card {
    position: relative;

    min-height: 190px;

    display: grid;
    grid-template-columns: 65px 1fr 50px;
    align-items: center;

    gap: 20px;

    padding: 30px 32px;

    background: #FFFFFF;

    border: 1px solid #E2E8F0;
    border-radius: 24px;

    overflow: hidden;

    cursor: pointer;

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


/* HOVER GRADIENT */

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

    position: absolute;

    inset: 0;

    background: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.07),
        rgba(124, 58, 237, 0.08)
    );

    opacity: 0;

    transition: opacity 0.4s ease;

    pointer-events: none;
}

.industry-card:hover::before {
    opacity: 1;
}

.industry-card:hover {
    transform: translateY(-8px);

    border-color: rgba(37, 99, 235, 0.25);

    box-shadow:
        0 25px 60px rgba(15, 23, 42, 0.09);
}


/* NUMBER */

.industry-number {
    position: relative;
    z-index: 2;

    width: 52px;
    height: 52px;

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

    border-radius: 15px;

    background: #EEF2FF;

    color: #2563EB;

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


/* CONTENT */

.industry-content {
    position: relative;
    z-index: 2;
}

.industry-content h3 {
    margin-bottom: 10px;

    font-size: 24px;

    color: #111827;
}

.industry-content p {
    max-width: 480px;

    font-size: 15px;
    line-height: 1.65;

    color: #64748B;
}


/* ARROW */

.industry-arrow {
    position: relative;
    z-index: 2;

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

    width: 44px;
    height: 44px;

    border-radius: 50%;

    background: #F1F5F9;

    color: #111827;

    font-size: 19px;

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        color 0.4s ease;
}

.industry-card:hover .industry-arrow {
    transform: rotate(45deg);

    background: linear-gradient(
        135deg,
        #2563EB,
        #7C3AED
    );

    color: #FFFFFF;
}


/* BACKGROUND GLOW */

.industries-section::after {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -230px;
    bottom: -200px;

    border-radius: 50%;

    background: #7C3AED;

    filter: blur(140px);

    opacity: 0.08;

    pointer-events: none;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .industries-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .industries-section {
        padding: 90px 20px;
    }

    .industry-card {
        grid-template-columns: 52px 1fr;
        padding: 25px;
    }

    .industry-arrow {
        display: none;
    }

    .industry-content h3 {
        font-size: 21px;
    }

}/* INDUSTRY REVEAL */

.industry-card {
    opacity: 0;
    transform: translateY(35px);
}

.industry-card.show {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}/* =========================
   STEP 11 - TESTIMONIALS
========================= */

.testimonials-section {
    position: relative;
    padding: 130px 8%;
    background: #FFFFFF;
    overflow: hidden;
}


/* HEADING */

.testimonials-heading {
    max-width: 850px;
    margin-bottom: 75px;
}

.testimonials-heading h2 {
    font-size: clamp(46px, 5vw, 72px);
    line-height: 1.05;
    letter-spacing: -3px;

    color: #111827;

    margin-bottom: 24px;
}

.testimonials-heading h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #2563EB,
        #7C3AED
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.testimonials-heading p {
    max-width: 650px;

    font-size: 18px;
    line-height: 1.7;

    color: #64748B;
}


/* GRID */

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;

    margin-bottom: 70px;
}


/* CARD */

.testimonial-card {
    position: relative;

    min-height: 360px;

    padding: 34px;

    display: flex;
    flex-direction: column;

    background: #F8FAFC;

    border: 1px solid #E2E8F0;
    border-radius: 26px;

    overflow: hidden;

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

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

    border-color: rgba(37, 99, 235, 0.25);

    box-shadow:
        0 28px 70px rgba(15, 23, 42, 0.10);
}


/* FEATURED CARD */

.featured-testimonial {
    background: #111827;
    border-color: #111827;

    transform: translateY(-25px);
}

.featured-testimonial:hover {
    transform: translateY(-35px);
}

.featured-testimonial .testimonial-text,
.featured-testimonial .testimonial-client h4 {
    color: #FFFFFF;
}

.featured-testimonial .testimonial-client span {
    color: #94A3B8;
}


/* STARS */

.testimonial-stars {
    margin-bottom: 30px;

    font-size: 18px;
    letter-spacing: 4px;

    color: #F59E0B;
}


/* QUOTE */

.testimonial-text {
    flex: 1;

    font-size: 18px;
    line-height: 1.8;

    color: #334155;
}


/* CLIENT */

.testimonial-client {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 35px;
}

.client-avatar {
    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #2563EB,
        #7C3AED
    );

    color: #FFFFFF;

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

.testimonial-client h4 {
    margin-bottom: 4px;

    font-size: 15px;

    color: #111827;
}

.testimonial-client span {
    font-size: 13px;

    color: #64748B;
}


/* TRUST STRIP */

.trust-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 32px 40px;

    background: #F8FAFC;

    border: 1px solid #E2E8F0;
    border-radius: 24px;
}

.trust-item {
    flex: 1;

    text-align: center;
}

.trust-item strong {
    display: block;

    margin-bottom: 5px;

    font-size: 30px;

    color: #111827;
}

.trust-item span {
    font-size: 13px;

    color: #64748B;
}

.trust-line {
    width: 1px;
    height: 45px;

    background: #E2E8F0;
}


/* BACKGROUND GLOW */

.testimonials-section::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -230px;
    bottom: -180px;

    border-radius: 50%;

    background: #2563EB;

    filter: blur(140px);

    opacity: 0.07;

    pointer-events: none;
}


/* RESPONSIVE */

@media (max-width: 950px) {

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .featured-testimonial {
        transform: none;
    }

    .featured-testimonial:hover {
        transform: translateY(-10px);
    }

}

@media (max-width: 650px) {

    .testimonials-section {
        padding: 90px 20px;
    }

    .trust-strip {
        flex-direction: column;
        gap: 25px;
    }

    .trust-line {
        width: 70%;
        height: 1px;
    }

}.testimonial-card {
    opacity: 0;
}

.testimonial-card.show {
    opacity: 1;

    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}/* =========================
   STEP 12 - CONTACT SECTION
========================= */

.contact-section {
    position: relative;
    padding: 130px 8%;
    background: #111827;
    overflow: hidden;
}

.contact-wrap {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 80px;

    align-items: center;
}


/* LEFT SIDE */

.contact-left {
    max-width: 610px;
}

.contact-section .section-tag {
    color: #818CF8;
}

.contact-left h2 {
    font-size: clamp(48px, 5vw, 76px);
    line-height: 1.03;
    letter-spacing: -3px;

    color: #FFFFFF;

    margin-bottom: 25px;
}

.contact-left h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #60A5FA,
        #8B5CF6
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-left > p {
    max-width: 560px;

    font-size: 18px;
    line-height: 1.75;

    color: #94A3B8;

    margin-bottom: 42px;
}


/* POINTS */

.contact-points {
    display: flex;
    flex-direction: column;

    gap: 22px;
}

.contact-point {
    display: flex;
    align-items: center;

    gap: 20px;
}

.contact-point span {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    border-radius: 12px;

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

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

    color: #818CF8;

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

.contact-point p {
    margin: 0;
    color: #CBD5E1;
    font-size: 15px;
    line-height: 1.4;
}


/* CONTACT CARD */

.contact-card {
    padding: 38px;

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

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

    border-radius: 30px;

    backdrop-filter: blur(18px);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.20);
}


/* FORM */

.contact-form {
    display: flex;
    flex-direction: column;

    gap: 22px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;

    gap: 9px;
}

.form-group label {
    color: #E2E8F0;

    font-size: 13px;
    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    padding: 15px 16px;

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

    border-radius: 13px;

    outline: none;

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

    color: #FFFFFF;

    font-family: inherit;
    font-size: 14px;

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

.form-group textarea {
    resize: vertical;

    min-height: 130px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #64748B;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #6366F1;

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

    box-shadow:
        0 0 0 4px rgba(99, 102, 241, 0.10);
}

.form-group select option {
    color: #111827;
}


/* SUBMIT BUTTON */

.contact-submit {
    width: 100%;

    margin-top: 5px;

    padding: 17px 22px;

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

    gap: 10px;

    border: none;
    border-radius: 14px;

    background: linear-gradient(
        90deg,
        #2563EB,
        #7C3AED
    );

    color: #FFFFFF;

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

    cursor: pointer;

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

.contact-submit span {
    transition: transform 0.3s ease;
}

.contact-submit:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 45px rgba(99, 102, 241, 0.30);
}

.contact-submit:hover span {
    transform: translate(4px, -4px);
}


/* BACKGROUND GLOWS */

.contact-section::before,
.contact-section::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    filter: blur(150px);

    pointer-events: none;
}

.contact-section::before {
    width: 500px;
    height: 500px;

    left: -250px;
    bottom: -220px;

    background: #2563EB;

    opacity: 0.18;
}

.contact-section::after {
    width: 500px;
    height: 500px;

    right: -230px;
    top: -220px;

    background: #7C3AED;

    opacity: 0.18;
}


/* RESPONSIVE */

@media (max-width: 950px) {

    .contact-wrap {
        grid-template-columns: 1fr;

        gap: 60px;
    }

}

@media (max-width: 650px) {

    .contact-section {
        padding: 90px 20px;
    }

    .contact-card {
        padding: 25px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

}.contact-left,
.contact-card {
    opacity: 0;
}

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

.contact-card {
    transform: translateX(35px);
}

.contact-left.show,
.contact-card.show {
    opacity: 1;
    transform: translateX(0);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}/* =========================
   STEP 13 - FOOTER
========================= */

.site-footer {
    padding: 80px 8% 30px;

    background: #0B1120;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* TOP AREA */

.footer-top {
    display: grid;

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

    gap: 60px;

    padding-bottom: 60px;
}


/* BRAND */

.footer-brand {
    max-width: 360px;
}

.footer-logo {
    width: 180px;
    height: auto;

    display: block;

    margin-bottom: 24px;
}

.footer-brand p {
    font-size: 15px;
    line-height: 1.8;

    color: #94A3B8;
}


/* COLUMNS */

.footer-column {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.footer-column h4 {
    margin-bottom: 8px;

    font-size: 15px;

    color: #FFFFFF;
}

.footer-column a {
    width: fit-content;

    text-decoration: none;

    color: #94A3B8;

    font-size: 14px;

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

.footer-column a:hover {
    color: #818CF8;

    transform: translateX(5px);
}


/* BOTTOM */

.footer-bottom {
    padding-top: 28px;

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

    gap: 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom p {
    font-size: 13px;

    color: #64748B;
}

.footer-legal {
    display: flex;

    gap: 24px;
}

.footer-legal a {
    text-decoration: none;

    font-size: 13px;

    color: #64748B;

    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: #818CF8;
}


/* RESPONSIVE */

@media (max-width: 950px) {

    .footer-top {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .site-footer {
        padding: 70px 20px 25px;
    }

    .footer-top {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;
    }

    .footer-legal {
        flex-wrap: wrap;
    }

}/* =========================
   FOOTER CONTACT
========================= */

.footer-contact-item {
    margin-bottom: 18px;
}

.footer-contact-item span {
    display: block;

    margin-bottom: 5px;

    color: #64748B;

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

    letter-spacing: 1px;
    text-transform: uppercase;
}

.footer-contact-item p,
.footer-contact-item a {
    color: #94A3B8;

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

    text-decoration: none;
}

.footer-contact-item a:hover {
    color: #818CF8;
}


/* SOCIAL AREA */

.footer-social {
    padding: 25px 0;

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

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-social > p {
    color: #94A3B8;

    font-size: 14px;
    font-weight: 600;
}

.social-icons {
    display: flex;

    gap: 10px;
}

.social-icons a {
    width: 42px;
    height: 42px;

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

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;

    color: #CBD5E1;

    text-decoration: none;
    font-size: 13px;
    font-weight: 700;

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

.social-icons a:hover {
    transform: translateY(-4px);

    background: #6366F1;

    border-color: #6366F1;

    color: #FFFFFF;
}.footer-brand-social {
    margin-top: 30px;
}

.follow-title {
    margin: 0 0 16px !important;
    color: #CBD5E1 !important;
    font-size: 14px !important;
    font-weight: 600;
}

.footer-brand .social-icons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-brand .social-icons a {
    width: 46px;
    height: 46px;

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

    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;

    color: #FFFFFF;

    transition: 0.3s ease;
}

.footer-brand .social-icons svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.footer-brand .social-icons a:hover {
    transform: translateY(-5px);

    background: linear-gradient(
        135deg,
        #2563EB,
        #7C3AED
    );

    border-color: #6366F1;
}.social-icons a svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex-shrink: 0;
}/* =========================
   STEP 14A - HEADER CTA
========================= */

.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 24px;

    border-radius: 8px;

    background: linear-gradient(
        90deg,
        #2563EB,
        #7C3AED
    );

    color: #FFFFFF;

    text-decoration: none;
    font-size: 14px;
    font-weight: 600;

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

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

    box-shadow:
        0 12px 30px rgba(37, 99, 235, 0.28);
}html {
    scroll-behavior: smooth;
}section {
    scroll-margin-top: 100px;
}/* =========================
   STEP 14B - STICKY GLASS HEADER
========================= */

header {
    position: sticky;
    top: 0;
    z-index: 999;

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

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

    border-bottom: 1px solid rgba(226, 232, 240, 0.7);

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}header.header-scrolled {
    background: rgba(255, 255, 255, 0.94);

    border-bottom-color: rgba(226, 232, 240, 0.9);

    box-shadow:
        0 10px 35px rgba(15, 23, 42, 0.08);
}/* =========================
   STEP 14C - MOBILE MENU
========================= */

.menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border: none;
    border-radius: 10px;

    background: transparent;

    cursor: pointer;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;

    box-shadow: none;
}

.menu-toggle span {
    width: 22px;
    height: 2px;

    border-radius: 10px;

    background: #111827;

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


/* HAMBURGER TO X */

.menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


@media (max-width: 900px) {

    header {
        position: sticky;
    }

    .menu-toggle {
        display: flex;
        margin-left: auto;
    }

    header nav {
        position: absolute;

        top: calc(100% + 10px);
        left: 6%;
        right: 6%;

        display: flex;
        flex-direction: column;

        padding: 20px;

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

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

        border: 1px solid #E2E8F0;
        border-radius: 18px;

        box-shadow:
            0 20px 50px rgba(15, 23, 42, 0.12);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-12px);

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

    header nav.active {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }

    header nav a {
        width: 100%;

        padding: 13px 10px;

        border-bottom: 1px solid #F1F5F9;
    }

    header nav a:last-child {
        border-bottom: none;
    }

    header nav a::after {
        display: none;
    }

    .header-cta {
        margin-left: 12px;
    }

}


@media (max-width: 600px) {

    header {
        padding-left: 20px;
        padding-right: 20px;
    }

    .logo img {
        width: 150px;
        height: 50px;
    }

    .header-cta {
        display: none;
    }

    header nav {
        left: 20px;
        right: 20px;
    }

}/* ========================================
   MOBILE - SERVICES SECTION POLISH
======================================== */

@media (max-width: 600px) {

    .services {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .services-heading {
        margin-bottom: 45px;
    }

}/* ========================================
   MOBILE - WHY US SECTION POLISH
======================================== */

@media (max-width: 600px) {

    .why-us {
        padding-top: 70px;
        padding-bottom: 70px;
        gap: 40px;
    }

    .why-us-left > p {
        margin-bottom: 28px;
    }

    .why-us-highlight {
        padding: 22px;
    }

    .why-us-grid {
        gap: 18px;
    }

    .why-card {
        min-height: 250px;
        padding: 26px;
    }

}/* ========================================
   MOBILE - RESULTS SECTION POLISH
======================================== */

@media (max-width: 600px) {

    .results-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .results-top {
        margin-bottom: 40px;
    }

    .results-grid {
        grid-template-columns: 1fr;
    }

    .result-item {
        padding: 38px 20px;
    }

    .result-number {
        margin-bottom: 10px;
    }

    .result-item p {
        margin: 0;
    }

}/* ========================================
   MOBILE - PROCESS SECTION POLISH
======================================== */

@media (max-width: 600px) {

    .process-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .process-heading {
        margin-bottom: 45px;
    }

    .process-step {
        margin-bottom: 28px;
    }

    .process-content {
        padding: 26px 24px;
    }

    .process-content h3 {
        font-size: 23px;
    }

    .process-content p {
        font-size: 14px;
        line-height: 1.65;
    }

}/* ========================================
   MOBILE - INDUSTRIES SECTION POLISH
======================================== */

@media (max-width: 600px) {

    .industries-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .industries-heading {
        margin-bottom: 45px;
    }

    .industry-card {
        padding: 22px;
        gap: 16px;
    }

    .industry-content h3 {
        font-size: 22px;
    }

    .industry-content p {
        font-size: 14px;
        line-height: 1.6;
    }

}/* ========================================
   MOBILE - TESTIMONIAL SECTION POLISH
======================================== */

@media (max-width: 600px) {

    .testimonials-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .testimonials-heading {
        margin-bottom: 40px;
    }

    .testimonials-grid {
        gap: 18px;
    }

    .testimonial-card {
        min-height: auto;
        padding: 26px 24px;
    }

    .testimonial-text {
        font-size: 16px;
        line-height: 1.7;
    }

}/* ========================================
   MOBILE - CONTACT SECTION POLISH
======================================== */

@media (max-width: 600px) {

    .contact-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .contact-wrap {
        gap: 35px;
    }

    .contact-left > p {
        margin-bottom: 30px;
    }

    .contact-points {
        gap: 18px;
    }

    .contact-card {
        margin-top: 0;
        padding: 24px 20px;
    }

}/* ========================================
   MOBILE - FOOTER POLISH
======================================== */

@media (max-width: 600px) {

    .site-footer {
        padding-top: 60px;
        padding-bottom: 24px;
    }

    .footer-top {
        gap: 32px;
        padding-bottom: 35px;
    }

    .footer-social {
        padding-top: 22px;
        padding-bottom: 22px;
    }

    .social-icons {
        gap: 8px;
        flex-wrap: wrap;
    }

    .social-icons a {
        width: 42px;
        height: 42px;
    }

    .footer-column {
        gap: 12px;
    }

}/* ========================================
   MOBILE FULLSCREEN NAVIGATION
======================================== */

@media (max-width: 900px) {

    body.menu-open {
        overflow: hidden;
    }

    header {
        z-index: 9999;
    }

    header nav {
        position: fixed;

        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        height: calc(100vh - 80px);

        padding: 45px 28px;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        gap: 0;

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

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

        border: none;
        border-radius: 0;

        box-shadow: none;

        opacity: 0;
        visibility: hidden;

        transform: translateY(-15px);

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

        overflow-y: auto;
    }

    header nav.active {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }

    header nav a {
        width: 100%;

        padding: 20px 5px;

        color: #111827;

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

        border-bottom: 1px solid #E2E8F0;

        transition:
            color 0.3s ease,
            padding-left 0.3s ease;
    }

    header nav a:hover {
        color: #2563EB;

        padding-left: 12px;
    }

    header nav a:last-child {
        border-bottom: none;
    }

    header nav a::after {
        display: none;
    }

}@media (max-width: 600px) {

    header nav {
        top: 80px;
        height: calc(100dvh - 80px);

        padding: 38px 24px;
    }

    header nav a {
        font-size: 24px;
        padding: 18px 4px;
    }

    .menu-toggle.active {
        background: #F8FAFC;
    }

}/* ========================================
   MOBILE MENU FINAL POLISH
======================================== */

@media (max-width: 900px) {

    header nav {
        background: #FFFFFF;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

}/* ========================================
   TABLET - HERO POLISH
======================================== */

@media (min-width: 601px) and (max-width: 900px) {

    .hero {
        padding-top: 55px;
        padding-bottom: 55px;
        gap: 35px;
    }

    .hero-visual {
        height: 380px;
    }

    .gradient-orb {
        width: 300px;
        height: 300px;
    }

}/* ========================================
   BLOG PAGE - HERO
======================================== */

.blog-hero {
    position: relative;

    min-height: 620px;

    display: flex;
    align-items: center;

    padding: 120px 8%;

    background: #F8FAFC;

    overflow: hidden;
}

.blog-hero-content {
    position: relative;
    z-index: 2;

    max-width: 850px;
}

.blog-hero h1 {
    max-width: 850px;

    margin-bottom: 26px;

    font-size: clamp(54px, 6vw, 88px);
    line-height: 1.02;
    letter-spacing: -4px;

    color: #111827;
}

.blog-hero h1 span {
    display: block;

    background: linear-gradient(
        90deg,
        #2563EB,
        #7C3AED
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.blog-hero p {
    max-width: 650px;

    margin: 0;

    font-size: 18px;
    line-height: 1.75;

    color: #64748B;
}


/* BACKGROUND GLOW */

.blog-hero-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    right: -150px;
    top: -180px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #2563EB,
        #7C3AED
    );

    filter: blur(130px);

    opacity: 0.14;

    pointer-events: none;
}


/* TABLET */

@media (max-width: 900px) {

    .blog-hero {
        min-height: 540px;

        padding: 90px 6%;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .blog-hero {
        min-height: 500px;

        padding: 75px 20px;
    }

    .blog-hero h1 {
        font-size: 46px;
        letter-spacing: -2px;
    }

    .blog-hero p {
        font-size: 16px;
    }

}/* ========================================
   BLOG PAGE
======================================== */

/* BLOG HERO */

.blog-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 140px 8% 100px;
    overflow: hidden;
    background: #ffffff;
}

.blog-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.blog-hero .section-tag {
    display: inline-block;
    margin-bottom: 22px;
    color: #5266f5;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
}

.blog-hero h1 {
    margin: 0;
    font-size: clamp(48px, 6vw, 78px);
    line-height: 1.05;
    letter-spacing: -3px;
    color: #101425;
}

.blog-hero h1 span {
    display: block;
    background: linear-gradient(90deg, #5266f5, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blog-hero p {
    max-width: 680px;
    margin: 30px auto 0;
    font-size: 19px;
    line-height: 1.8;
    color: #64748b;
}

.blog-hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(99, 102, 241, 0.13),
        transparent 65%
    );
    pointer-events: none;
}


/* ========================================
   FEATURED BLOG
======================================== */

.featured-blog {
    padding: 110px 8%;
    background: #f8faff;
}

.featured-blog-card {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
    background: #ffffff;
    border: 1px solid #e4e8f1;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(30, 41, 59, 0.07);
}

.featured-blog-image {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(96, 165, 250, 0.65),
            transparent 35%
        ),
        linear-gradient(135deg, #5266f5, #7c3aed);
}

.featured-blog-image::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
}

.featured-blog-image::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 45px;
    transform: rotate(30deg);
}

.featured-placeholder {
    position: relative;
    z-index: 2;
    padding: 14px 22px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 100px;
    backdrop-filter: blur(10px);
}

.featured-blog-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 65px;
}

.blog-category {
    display: inline-block;
    margin-bottom: 20px;
    color: #5266f5;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.featured-blog-content h2 {
    margin: 0 0 22px;
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: -1.5px;
    color: #101425;
}

.featured-blog-content > p {
    margin: 0;
    font-size: 17px;
    line-height: 1.8;
    color: #64748b;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    color: #7b8498;
    font-size: 14px;
}

.blog-read-btn {
    width: fit-content;
    margin-top: 32px;
    padding: 15px 24px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #5266f5, #7c3aed);
    transition: 0.3s ease;
}

.blog-read-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(82, 102, 245, 0.25);
}


/* ========================================
   LATEST BLOGS
======================================== */

.latest-blogs {
    padding: 120px 8%;
    background: #ffffff;
}

.latest-heading {
    max-width: 1200px;
    margin: 0 auto 65px;
}

.latest-heading .section-tag {
    color: #5266f5;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
}

.latest-heading h2 {
    max-width: 750px;
    margin-top: 18px;
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: -2px;
    color: #101425;
}

.latest-heading h2 span {
    background: linear-gradient(90deg, #5266f5, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blog-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.blog-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e4e8f1;
    border-radius: 25px;
    transition: 0.35s ease;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(30, 41, 59, 0.10);
}

.blog-card-image {
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            circle at 25% 20%,
            rgba(255,255,255,0.2),
            transparent 35%
        ),
        linear-gradient(135deg, #5266f5, #7c3aed);
}

.blog-card-image span {
    color: rgba(255,255,255,0.9);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 4px;
}

.blog-card-content {
    padding: 32px;
}

.blog-card-content .blog-category {
    margin-bottom: 14px;
}

.blog-card-content h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.35;
    color: #101425;
}

.blog-card-content p {
    margin: 18px 0 25px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

.blog-card-content a {
    color: #101425;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.blog-card-content a:hover {
    color: #5266f5;
}


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

@media (max-width: 900px) {

    .blog-hero {
        min-height: 470px;
        padding: 130px 7% 80px;
    }

    .featured-blog {
        padding: 80px 7%;
    }

    .featured-blog-card {
        grid-template-columns: 1fr;
    }

    .featured-blog-image {
        min-height: 360px;
    }

    .featured-blog-content {
        padding: 50px;
    }

    .blog-grid {
        grid-template-columns: 1fr 1fr;
    }

    .latest-blogs {
        padding: 90px 7%;
    }
}


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

@media (max-width: 600px) {

    .blog-hero {
        min-height: 430px;
        padding: 120px 25px 70px;
    }

    .blog-hero h1 {
        font-size: 46px;
        letter-spacing: -2px;
    }

    .blog-hero p {
        font-size: 16px;
    }

    .featured-blog {
        padding: 60px 20px;
    }

    .featured-blog-card {
        border-radius: 24px;
    }

    .featured-blog-image {
        min-height: 280px;
    }

    .featured-blog-content {
        padding: 32px 25px;
    }

    .featured-blog-content h2 {
        font-size: 31px;
    }

    .blog-meta {
        flex-wrap: wrap;
    }

    .latest-blogs {
        padding: 75px 20px;
    }

    .latest-heading {
        margin-bottom: 40px;
    }

    .latest-heading h2 {
        font-size: 38px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .blog-card-image {
        height: 210px;
    }

    .blog-card-content {
        padding: 27px 24px;
    }

}/* BLOG CARD META */

.blog-card-meta {
    margin-bottom: 18px;
    font-size: 13px;
    color: #94A3B8;
}

.blog-card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-card-content p {
    flex-grow: 1;
}

.blog-card-content a {
    width: fit-content;
}/* ========================================
   ARTICLE PAGE
======================================== */

.article-hero {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: center;

    padding: 120px 8%;

    background: #F8FAFC;

    overflow: hidden;
}

.article-hero::after {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -220px;
    top: -220px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #2563EB,
        #7C3AED
    );

    filter: blur(160px);

    opacity: 0.12;

    pointer-events: none;
}

.article-hero-inner {
    position: relative;
    z-index: 2;

    max-width: 1050px;

    margin: 0 auto;

    text-align: center;
}

.back-to-blog {
    display: inline-block;

    margin-bottom: 30px;

    color: #64748B;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;
}

.back-to-blog:hover {
    color: #2563EB;
}

.article-category {
    display: block;

    margin-bottom: 20px;

    color: #5266F5;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.article-hero h1 {
    max-width: 1100px;

    margin: 0 auto 28px;

    font-size: clamp(46px, 5vw, 70px);
    line-height: 1.05;
    letter-spacing: -3px;

    color: #111827;
}

.article-hero h1 span {
    display: block;

    background: linear-gradient(
        90deg,
        #2563EB,
        #7C3AED
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.article-intro {
    max-width: 760px;

    margin: 0 auto;

    color: #64748B;

    font-size: 19px;
    line-height: 1.8;
}

.article-meta {
    display: flex;
    justify-content: center;

    gap: 10px;

    margin-top: 30px;

    color: #94A3B8;

    font-size: 14px;
}


/* ========================================
   ARTICLE BODY
======================================== */

.article-section {
    min-height: auto;

    padding: 100px 8% 130px;

    background: #FFFFFF;
}

.article-layout {
    max-width: 1200px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 260px minmax(0, 760px);

    justify-content: center;

    gap: 80px;
}


/* TABLE OF CONTENTS */

.article-toc {
    position: sticky;

    top: 125px;

    align-self: start;

    display: flex;
    flex-direction: column;

    gap: 13px;

    padding: 25px;

    border: 1px solid #E2E8F0;
    border-radius: 20px;

    background: #F8FAFC;
}

.article-toc > span {
    margin-bottom: 7px;

    color: #94A3B8;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.article-toc a {
    color: #64748B;

    text-decoration: none;

    font-size: 13px;
    line-height: 1.45;

    transition: 0.3s ease;
}

.article-toc a:hover {
    color: #2563EB;

    transform: translateX(4px);
}


/* ARTICLE TYPOGRAPHY */

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

.article-content p {
    max-width: none;

    margin: 0 0 24px;

    color: #475569;

    font-size: 18px;
    line-height: 1.9;
}

.article-content .article-lead {
    color: #1E293B;

    font-size: 21px;
    line-height: 1.75;
}

.article-content h2 {
    margin: 65px 0 22px;

    color: #111827;

    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -1.4px;

    scroll-margin-top: 120px;
}

.article-content h3 {
    margin: 35px 0 13px;

    color: #111827;

    font-size: 24px;
}

.article-content ul {
    margin: 0 0 30px 22px;
}

.article-content li {
    margin-bottom: 10px;

    color: #475569;

    font-size: 17px;
    line-height: 1.7;
}

.article-content strong {
    color: #111827;
}

.article-content blockquote {
    margin: 45px 0;

    padding: 28px 32px;

    border-left: 4px solid #6366F1;
    border-radius: 0 18px 18px 0;

    background: #F8FAFC;

    color: #334155;

    font-size: 19px;
    line-height: 1.8;
}


/* ARTICLE CTA */

.article-cta {
    margin-top: 80px;

    padding: 45px;

    border-radius: 28px;

    background: #111827;
}

.article-cta span {
    display: block;

    margin-bottom: 13px;

    color: #818CF8;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.article-cta h3 {
    max-width: 560px;

    margin: 0 0 25px;

    color: #FFFFFF;

    font-size: 34px;
    line-height: 1.2;
}

.article-cta a {
    display: inline-block;

    padding: 14px 22px;

    border-radius: 12px;

    background: linear-gradient(
        90deg,
        #2563EB,
        #7C3AED
    );

    color: #FFFFFF;

    text-decoration: none;

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

    transition: 0.3s ease;
}

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

    box-shadow:
        0 14px 35px rgba(99, 102, 241, 0.3);
}


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

@media (max-width: 950px) {

    .article-hero {
        min-height: 580px;

        padding: 110px 7% 80px;
    }

    .article-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .article-toc {
        position: relative;

        top: 0;

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

    .article-toc > span {
        grid-column: 1 / -1;
    }

}


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

@media (max-width: 600px) {

    .article-hero {
        min-height: 530px;

        padding: 105px 20px 65px;
    }

    .article-hero h1 {
        font-size: 43px;

        letter-spacing: -2px;
    }

    .article-intro {
        font-size: 16px;
    }

    .article-meta {
        flex-wrap: wrap;
    }

    .article-section {
        padding: 65px 20px 90px;
    }

    .article-layout {
        gap: 35px;
    }

    .article-toc {
        grid-template-columns: 1fr;

        padding: 22px;
    }

    .article-content p {
        font-size: 16px;
        line-height: 1.8;
    }

    .article-content .article-lead {
        font-size: 18px;
    }

    .article-content h2 {
        margin-top: 50px;

        font-size: 30px;
    }

    .article-content h3 {
        font-size: 22px;
    }

    .article-content li {
        font-size: 16px;
    }

    .article-content blockquote {
        padding: 24px;

        font-size: 17px;
    }

    .article-cta {
        margin-top: 60px;

        padding: 30px 25px;
    }

    .article-cta h3 {
        font-size: 28px;
    }

}/* ========================================
   ARTICLE HERO FINAL FIX
======================================== */

/* Category label - less stretched, slightly bigger */
.article-category {
    font-size: 14px;
    font-weight: 800;

    letter-spacing: 1.4px;

    line-height: 1.4;

    margin-bottom: 22px;
}


/* Main article title */
.article-hero h1 {
    max-width: 1120px;

    margin: 0 auto 30px;

    font-size: clamp(46px, 5vw, 70px);

    line-height: 1.10;

    letter-spacing: -2.5px;

    padding-bottom: 8px;

    color: #111827;

    overflow: visible;
}


/* Gradient title line */
.article-hero h1 span {
    display: block;

    padding-bottom: 8px;

    line-height: 1.12;

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}/* ========================================
   ARTICLE HERO SPACING FIX
======================================== */

.article-hero {
    padding-top: 75px;
    padding-bottom: 45px;
}

/* Back to Blog */
.article-back {
    margin-bottom: 28px;
}

/* Category */
.article-category {
    margin-bottom: 20px;
}

/* Main Heading */
.article-hero h1 {
    margin-bottom: 24px;
}

/* Description */
.article-hero-description {
    margin-bottom: 16px;
}

/* Author + Read Time */
.article-meta {
    margin-top: 0;
}/* ========================================
   ARTICLE FEATURED IMAGE
======================================== */

.article-featured-image {
    background: #ffffff;
    padding: 55px 6% 35px;
}

.article-featured-image-inner {
    max-width: 1180px;
    margin: 0 auto;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(17, 24, 39, 0.10);
}

.article-featured-image img {
    display: block;
    width: 100%;
    height: auto;
}


/* TABLET */

@media (max-width: 1024px) {

    .article-featured-image {
        padding: 40px 5% 25px;
    }

}


/* MOBILE */

@media (max-width: 768px) {

    .article-featured-image {
        padding: 28px 20px 20px;
    }

    .article-featured-image-inner {
        border-radius: 18px;
    }

}/* ========================================
   ARTICLE FEATURED IMAGE - FINAL POLISH
======================================== */

.article-featured-image {
    padding: 40px 6% 30px;
    background: #ffffff;
}

.article-featured-image-inner {
    max-width: 1180px;
    margin: 0 auto;

    border-radius: 24px;
    overflow: hidden;

    box-shadow: 0 22px 65px rgba(17, 24, 39, 0.10);
}

.article-featured-image img {
    width: 100%;
    height: 520px;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* TABLET */

@media (max-width: 1024px) {

    .article-featured-image img {
        height: 420px;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .article-featured-image {
        padding: 25px 20px 20px;
    }

    .article-featured-image-inner {
        border-radius: 18px;
    }

    .article-featured-image img {
        height: auto;
        object-fit: contain;
    }

}/* ========================================
   ARTICLE IMAGE - NO CROP FIX
======================================== */

.article-featured-image {
    padding: 40px 6% 35px;
    background: #ffffff;
}

.article-featured-image-inner {
    max-width: 1180px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 22px 65px rgba(17, 24, 39, 0.10);
}

.article-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* TABLET */

@media (max-width: 1024px) {

    .article-featured-image {
        padding: 32px 5% 28px;
    }

    .article-featured-image img {
        width: 100%;
        height: auto;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .article-featured-image {
        padding: 24px 18px 20px;
    }

    .article-featured-image-inner {
        border-radius: 16px;
    }

}/* ========================================
   ARTICLE FEATURED IMAGE - BALANCED SIZE
======================================== */

.article-featured-image {
    padding: 36px 6% 30px;
    background: #ffffff;
}

.article-featured-image-inner {
    max-width: 980px;
    margin: 0 auto;

    border-radius: 24px;
    overflow: hidden;

    box-shadow: 0 20px 55px rgba(17, 24, 39, 0.10);
}

.article-featured-image img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* TABLET */

@media (max-width: 1024px) {

    .article-featured-image-inner {
        max-width: 90%;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .article-featured-image {
        padding: 24px 18px 20px;
    }

    .article-featured-image-inner {
        max-width: 100%;
        border-radius: 16px;
    }

}/* ========================================
   ARTICLE CONTENT - FINAL POLISH
======================================== */

.article-layout {
    max-width: 1240px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 70px;

    align-items: start;
}


/* LEFT - ON THIS PAGE */

.article-toc {
    width: 100%;
    padding: 30px 28px;

    border: 1px solid #e1e5ee;
    border-radius: 20px;

    background: #f8f9fc;

    position: sticky;
    top: 120px;
}

.article-toc > span {
    display: block;
    margin-bottom: 20px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #8c97ae;
}

.article-toc a {
    display: block;
    margin-bottom: 15px;

    font-size: 14px;
    line-height: 1.5;

    color: #65718a;
    text-decoration: none;

    transition: 0.25s ease;
}

.article-toc a:hover {
    color: #5b55ef;
    transform: translateX(4px);
}


/* RIGHT - ARTICLE */

.article-content {
    min-width: 0;
    max-width: 820px;
}

.article-content h2 {
    margin-top: 55px;
    margin-bottom: 20px;

    font-size: 36px;
    line-height: 1.18;

    color: #101522;
}

.article-content h2:first-child {
    margin-top: 0;
}

.article-content h3 {
    margin-top: 35px;
    margin-bottom: 14px;

    font-size: 24px;
    line-height: 1.3;

    color: #101522;
}

.article-content p {
    margin-bottom: 22px;

    font-size: 17px;
    line-height: 1.85;

    color: #59657a;
}


/* TABLET */

@media (max-width: 1024px) {

    .article-layout {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 40px;
    }

}


/* MOBILE */

@media (max-width: 768px) {

    .article-layout {
        display: block;
    }

    .article-toc {
        position: static;
        margin-bottom: 45px;
    }

    .article-content {
        max-width: 100%;
    }

    .article-content h2 {
        font-size: 30px;
    }

    .article-content h3 {
        font-size: 22px;
    }

    .article-content p {
        font-size: 16px;
        line-height: 1.75;
    }

}/* ========================================
   ARTICLE TOC - COMPACT FINAL
======================================== */

.article-toc {
    padding: 24px 26px;
}

.article-toc > span {
    margin-bottom: 16px;

    font-size: 12px;
    letter-spacing: 1.6px;
}

.article-toc a {
    margin-bottom: 11px;

    font-size: 13.5px;
    line-height: 1.35;
}

.article-toc a:last-child {
    margin-bottom: 0;
}/* ========================================
   ON THIS PAGE - ACTIVE UNDERLINE
======================================== */

.article-toc a {
    position: relative;
    display: block;

    width: fit-content;

    color: #65718a;

    padding-bottom: 5px;

    transition: 0.25s ease;
}


/* Active topic text stays same */
.article-toc a.active {
    color: #65718a;
    font-weight: 600;
}


/* Purple line under active topic */
.article-toc a.active::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #5266f5,
        #7c3aed
    );
}/* ========================================
   ON THIS PAGE - ACTIVE UNDERLINE
======================================== */

.article-toc a {
    position: relative;
    display: block;
    width: fit-content;

    padding-bottom: 5px;

    color: #65718a;
}

.article-toc a.active {
    color: #65718a;
    font-weight: 600;
}

.article-toc a.active::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );
}/* ========================================
   ON THIS PAGE - ACTIVE UNDERLINE
======================================== */

.article-toc a {
    position: relative;
    display: block;
    width: fit-content;

    padding-bottom: 5px;

    color: #65718a;
}

.article-toc a.active {
    color: #65718a;
    font-weight: 600;
}

.article-toc a.active::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );
}/* ========================================
   FEATURED BLOG IMAGE - NO CROP
======================================== */

.featured-blog-image {
    overflow: hidden;
    background: #ffffff;

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

    padding: 0;
}

.featured-blog-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain !important;
    object-position: center !important;
}/* ========================================
   BLOG CARD REAL IMAGES
======================================== */

.blog-card-image {
    width: 100%;
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}/* ========================================
   BLOG CARD CTA BUTTON
======================================== */

.blog-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;

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

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #4f63f2,
        #743ee8
    );

    color: #ffffff !important;

    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;

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

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

    box-shadow:
        0 10px 25px rgba(99, 75, 230, 0.25);
}/* ========================================
   BLOG CARD CTA - FINAL FIX
======================================== */

.blog-card {
    display: flex;
    flex-direction: column;
}

.blog-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: auto;
}

.blog-card-content p {
    flex-grow: 0;
}

/* Read Article Button */

.blog-card-content .blog-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;

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

    border-radius: 11px;

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );

    color: #ffffff !important;

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

    text-decoration: none !important;

    box-shadow:
        0 8px 22px rgba(82, 102, 245, 0.18);

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

.blog-card-content .blog-card-btn:hover {
    color: #ffffff !important;

    transform: translateY(-3px);

    box-shadow:
        0 13px 30px rgba(82, 102, 245, 0.28);
}

/* Space above button */

.blog-card-meta {
    margin-bottom: 22px;
}/* ========================================
   ARTICLE COMPARISON TABLE
======================================== */

.article-table-wrap {
    width: 100%;

    margin: 35px 0 45px;

    overflow-x: auto;

    border: 1px solid #E2E8F0;
    border-radius: 18px;
}

.article-table {
    width: 100%;
    min-width: 650px;

    border-collapse: collapse;

    background: #FFFFFF;
}

.article-table th,
.article-table td {
    padding: 17px 20px;

    text-align: left;

    border-bottom: 1px solid #E2E8F0;

    color: #475569;

    font-size: 15px;
    line-height: 1.5;
}

.article-table th {
    color: #111827;

    font-weight: 700;

    background: #F8FAFC;
}

.article-table tbody tr:last-child td {
    border-bottom: none;
}

.article-table tbody tr:hover {
    background: #F8FAFC;
}/* ========================================
   SERVICES SHOWCASE - PREMIUM MOTION UI
======================================== */

.services-showcase {
    position: relative;

    min-height: auto;

    padding: 125px 7%;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #F8FAFF 0%,
            #FFFFFF 48%,
            #F8FAFC 100%
        );
}

.services-showcase-inner {
    position: relative;
    z-index: 2;

    max-width: 1400px;
    margin: 0 auto;
}


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

.services-showcase-head {
    display: grid;
    grid-template-columns: 1.1fr 0.7fr;

    align-items: end;

    gap: 80px;

    margin-bottom: 75px;
}

.services-eyebrow {
    display: inline-block;

    margin-bottom: 20px;

    color: #5266F5;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
}

.services-head-left h2 {
    max-width: 830px;

    margin: 0;

    color: #111827;

    font-size: clamp(54px, 5.6vw, 82px);
    line-height: 1.03;
    letter-spacing: -4px;
}

.services-head-left h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}

.services-head-right {
    padding-bottom: 7px;
}

.services-head-right p {
    max-width: 500px;

    margin: 0;

    color: #64748B;

    font-size: 17px;
    line-height: 1.8;
}

.services-head-line {
    width: 100%;
    height: 1px;

    margin-top: 28px;

    overflow: hidden;

    background: #E2E8F0;
}

.services-head-line span {
    display: block;

    width: 38%;
    height: 100%;

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );

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

@keyframes servicesLineMove {

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

    50% {
        transform: translateX(165%);
    }

}


/* ========================================
   BENTO GRID
======================================== */

.services-bento {
    display: grid;

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

    gap: 22px;
}


/* ========================================
   CARD BASE
======================================== */

.service-bento-card {
    position: relative;

    grid-column: span 4;

    min-height: 410px;

    display: flex;
    flex-direction: column;

    padding: 32px;

    overflow: hidden;

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

    border: 1px solid #E2E8F0;
    border-radius: 28px;

    box-shadow:
        0 16px 45px rgba(15, 23, 42, 0.045);

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

    opacity: 0;
    transform: translateY(45px);

    transition:
        opacity 0.75s ease,
        transform 0.45s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}

.service-bento-card.show {
    opacity: 1;
    transform: translateY(0);
}

.service-bento-card:hover {
    transform: translateY(-10px);

    border-color: rgba(82, 102, 245, 0.32);

    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.11);
}


/* ========================================
   CARD WIDTHS
======================================== */

.service-large {
    grid-column: span 7;
}

.service-featured {
    grid-column: span 5;
}

.service-wide {
    grid-column: span 6;
}


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

.service-top {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.service-index {
    width: 48px;
    height: 48px;

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

    border-radius: 14px;

    background: #EEF2FF;

    color: #5266F5;

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

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

.service-bento-card:hover .service-index {
    transform: rotate(-8deg) scale(1.08);

    color: #FFFFFF;

    background: linear-gradient(
        135deg,
        #5266F5,
        #7C3AED
    );
}


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

.service-icon {
    width: 50px;
    height: 50px;

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

    border-radius: 50%;

    background: #F8FAFC;

    border: 1px solid #E2E8F0;

    color: #111827;

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

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        color 0.4s ease;
}

.service-bento-card:hover .service-icon {
    transform: rotate(45deg);

    color: #FFFFFF;

    background: linear-gradient(
        135deg,
        #5266F5,
        #7C3AED
    );
}


/* ========================================
   BODY
======================================== */

.service-body {
    position: relative;
    z-index: 3;

    margin-top: auto;
}

.service-small {
    display: block;

    margin-bottom: 12px;

    color: #5266F5;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.service-body h3 {
    max-width: 540px;

    margin: 0 0 17px;

    color: #111827;

    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -1.2px;
}

.service-body p {
    max-width: 560px;

    margin: 0;

    color: #64748B;

    font-size: 15px;
    line-height: 1.72;
}


/* ========================================
   SERVICE LINK
======================================== */

.service-link {
    position: relative;
    z-index: 4;

    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-top: 27px;

    color: #111827;

    text-decoration: none;

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

    transition:
        color 0.3s ease;
}

.service-link span {
    transition:
        transform 0.3s ease;
}

.service-link:hover {
    color: #5266F5;
}

.service-link:hover span {
    transform: translate(5px, -5px);
}


/* ========================================
   CARD GLOW
======================================== */

.service-card-glow {
    position: absolute;

    width: 330px;
    height: 330px;

    top: -190px;
    right: -190px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #5266F5,
        #7C3AED
    );

    filter: blur(55px);

    opacity: 0;

    pointer-events: none;

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

.service-bento-card:hover .service-card-glow {
    opacity: 0.13;

    transform: scale(1.45);
}


/* ========================================
   PERFORMANCE MARKETING VISUAL
======================================== */

.performance-visual {
    position: absolute;

    width: 225px;
    height: 225px;

    top: 18px;
    right: -12px;

    z-index: 1;

    pointer-events: none;
}

.performance-ring {
    position: absolute;

    inset: 28px;

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

    border-radius: 50%;

    background:
        conic-gradient(
            #5266F5 0deg,
            #7C3AED 245deg,
            #E8ECFF 245deg
        );

    box-shadow:
        0 15px 45px rgba(99, 102, 241, 0.14);

    animation:
        performanceRingSpin 12s linear infinite;
}

.performance-ring::before {
    content: "";

    position: absolute;

    inset: 17px;

    border-radius: 50%;

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

.performance-ring-inner {
    position: relative;
    z-index: 2;

    text-align: center;

    animation:
        performanceRingCounter 12s linear infinite;
}

.performance-ring-inner strong {
    display: block;

    color: #111827;

    font-size: 28px;
    line-height: 1;
}

.performance-ring-inner span {
    display: block;

    margin-top: 6px;

    color: #64748B;

    font-size: 12px;
}

@keyframes performanceRingSpin {

    to {
        transform: rotate(360deg);
    }

}

@keyframes performanceRingCounter {

    to {
        transform: rotate(-360deg);
    }

}


/* FLOATING DOTS */

.performance-dot {
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #5266F5;

    box-shadow:
        0 0 18px rgba(82, 102, 245, 0.35);

    animation:
        performanceDotFloat 3.5s ease-in-out infinite;
}

.dot-one {
    top: 90px;
    left: 2px;
}

.dot-two {
    right: 8px;
    bottom: 35px;

    animation-delay: 0.8s;
}

.dot-three {
    top: 4px;
    right: 70px;

    animation-delay: 1.4s;
}

@keyframes performanceDotFloat {

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

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

}


/* ========================================
   SOCIAL PLATFORM PILLS
======================================== */

.service-platforms {
    position: relative;
    z-index: 3;

    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 24px;
}

.service-platforms span {
    padding: 8px 13px;

    border-radius: 100px;

    background: #F1F5F9;

    color: #64748B;

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

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

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

    background: #EEF2FF;

    color: #5266F5;
}


/* ========================================
   DARK MEDIA BUYING CARD
======================================== */

.service-dark {
    background:
        linear-gradient(
            135deg,
            #111827,
            #171C35
        );

    border-color:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 22px 60px rgba(15, 23, 42, 0.16);
}

.service-dark .service-index {
    background:
        rgba(255, 255, 255, 0.08);

    color: #FFFFFF;
}

.service-dark .service-icon {
    background:
        rgba(255, 255, 255, 0.08);

    border-color:
        rgba(255, 255, 255, 0.10);

    color: #FFFFFF;
}

.service-dark .service-small {
    color: #818CF8;
}

.service-dark .service-body h3 {
    color: #FFFFFF;
}

.service-dark .service-body p {
    color: #94A3B8;
}

.service-dark .service-link {
    color: #FFFFFF;
}

.service-dark .service-link:hover {
    color: #A5B4FC;
}

.service-dark-glow {
    position: absolute;

    width: 420px;
    height: 420px;

    right: -190px;
    bottom: -230px;

    border-radius: 50%;

    background: #7C3AED;

    filter: blur(110px);

    opacity: 0.30;

    pointer-events: none;
}


/* ========================================
   BACKGROUND MOTION ORBS
======================================== */

.services-bg-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(130px);

    pointer-events: none;

    opacity: 0.10;
}

.services-orb-1 {
    width: 480px;
    height: 480px;

    left: -250px;
    top: 180px;

    background: #5266F5;

    animation:
        servicesOrbOne 10s ease-in-out infinite;
}

.services-orb-2 {
    width: 500px;
    height: 500px;

    right: -270px;
    bottom: 100px;

    background: #7C3AED;

    animation:
        servicesOrbTwo 12s ease-in-out infinite;
}

@keyframes servicesOrbOne {

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

    50% {
        transform: translate(110px, 65px);
    }

}

@keyframes servicesOrbTwo {

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

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

}


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

@media (max-width: 1000px) {

    .services-showcase {
        padding: 100px 6%;
    }

    .services-showcase-head {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .services-head-right {
        max-width: 650px;
    }

    .service-bento-card,
    .service-large,
    .service-featured,
    .service-wide {
        grid-column: span 6;
    }

}


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

@media (max-width: 700px) {

    .services-showcase {
        padding: 80px 20px;
    }

    .services-showcase-head {
        margin-bottom: 45px;
    }

    .services-eyebrow {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .services-head-left h2 {
        font-size: 46px;
        letter-spacing: -2px;
    }

    .services-head-right p {
        font-size: 16px;
    }

    .services-bento {
        display: block;
    }

    .service-bento-card {
        min-height: 350px;

        margin-bottom: 18px;

        padding: 26px;

        border-radius: 24px;
    }

    .service-body h3 {
        font-size: 28px;
    }

    .service-body p {
        font-size: 14px;
    }

    .performance-visual {
        width: 165px;
        height: 165px;
    }

    .performance-ring {
        inset: 22px;
    }

}


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

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

    .services-bg-orb,
    .performance-ring,
    .performance-ring-inner,
    .performance-dot,
    .services-head-line span {
        animation: none;
    }

    .service-bento-card {
        opacity: 1;
        transform: none;
    }

}/* ========================================
   SEO SERVICE - ANIMATED RANKING WIDGET
======================================== */

.seo-card {
    position: relative;
}


/* MAIN SEO VISUAL */

.seo-visual {
    position: absolute;

    width: 245px;
    height: 185px;

    top: 28px;
    right: 28px;

    z-index: 2;

    pointer-events: none;
}


/* RANKING CARD */

.seo-ranking-card {
    position: absolute;

    top: 0;
    right: 0;

    width: 155px;

    padding: 18px;

    border-radius: 20px;

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

    border: 1px solid #E2E8F0;

    box-shadow:
        0 18px 45px
        rgba(15, 23, 42, 0.10);

    backdrop-filter: blur(12px);

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

.seo-rank-label {
    display: block;

    margin-bottom: 7px;

    color: #64748B;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.seo-ranking-card strong {
    display: block;

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

    color: #111827;

    letter-spacing: -2px;
}

.seo-rank-growth {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 9px;
}

.seo-rank-growth span {
    width: 24px;
    height: 24px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #5266F5,
            #7C3AED
        );

    color: #FFFFFF;

    font-size: 12px;

    animation:
        seoArrowRise
        2s ease-in-out infinite;
}

.seo-rank-growth small {
    color: #64748B;

    font-size: 10px;
    font-weight: 600;
}


/* SEARCH BAR */

.seo-search-bar {
    position: absolute;

    left: 0;
    bottom: 10px;

    width: 185px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 11px 14px;

    border-radius: 100px;

    background: #FFFFFF;

    border: 1px solid #E2E8F0;

    box-shadow:
        0 15px 35px
        rgba(15, 23, 42, 0.07);

    color: #475569;

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

    animation:
        seoSearchFloat
        4.5s ease-in-out infinite;
}

.seo-search-icon {
    width: 27px;
    height: 27px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #EEF2FF;

    color: #5266F5;

    font-size: 16px;
}


/* FLOATING DOTS */

.seo-float-dot {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #5266F5;

    box-shadow:
        0 0 16px
        rgba(82, 102, 245, 0.35);

    animation:
        seoDotMove
        3s ease-in-out infinite;
}

.seo-dot-1 {
    top: 18px;
    left: 35px;
}

.seo-dot-2 {
    top: 80px;
    left: 8px;

    width: 6px;
    height: 6px;

    animation-delay: .7s;

    background: #7C3AED;
}

.seo-dot-3 {
    bottom: 8px;
    right: 22px;

    width: 7px;
    height: 7px;

    animation-delay: 1.3s;
}


/* ANIMATIONS */

@keyframes seoCardFloat {

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

    50% {
        transform:
            translateY(-8px)
            rotate(1deg);
    }

}

@keyframes seoSearchFloat {

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

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

}

@keyframes seoArrowRise {

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

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

}

@keyframes seoDotMove {

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

    50% {
        transform:
            translateY(-10px)
            scale(1.25);
    }

}


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

@media (max-width: 1000px) {

    .seo-visual {
        width: 200px;
        right: 20px;
    }

    .seo-ranking-card {
        width: 140px;
    }

}


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

@media (max-width: 700px) {

    .seo-visual {
        width: 150px;
        height: 135px;

        top: 22px;
        right: 18px;
    }

    .seo-ranking-card {
        width: 112px;

        padding: 13px;
    }

    .seo-ranking-card strong {
        font-size: 32px;
    }

    .seo-rank-label {
        font-size: 7px;
    }

    .seo-rank-growth small {
        display: none;
    }

    .seo-search-bar {
        width: 140px;

        padding: 8px 10px;

        font-size: 8px;
    }

    .seo-search-icon {
        width: 23px;
        height: 23px;
    }

}


/* ACCESSIBILITY */

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

    .seo-ranking-card,
    .seo-search-bar,
    .seo-rank-growth span,
    .seo-float-dot {
        animation: none;
    }

}/* ========================================
   GOOGLE ADS - CAMPAIGN WIDGET
======================================== */

.google-ads-card {
    position: relative;
}


/* WIDGET POSITION */

.google-ads-visual {
    position: absolute;

    top: 25px;
    right: 25px;

    width: 185px;

    z-index: 3;

    pointer-events: none;
}


/* MAIN WIDGET */

.google-campaign-widget {
    padding: 17px;

    border-radius: 19px;

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

    border: 1px solid #E2E8F0;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.09);

    backdrop-filter: blur(12px);

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


/* TOP */

.google-widget-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #64748B;

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

    letter-spacing: 1.2px;
}


/* LIVE */

.google-live {
    display: flex;
    align-items: center;

    gap: 5px;

    color: #5266F5;

    font-size: 7px;
}

.google-live i {
    width: 6px;
    height: 6px;

    display: block;

    border-radius: 50%;

    background: #5266F5;

    box-shadow:
        0 0 0 rgba(82, 102, 245, 0.5);

    animation:
        googleLivePulse
        1.8s infinite;
}


/* METRIC */

.google-metric-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-top: 13px;
}

.google-metric-row small {
    display: block;

    margin-bottom: 3px;

    color: #94A3B8;

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

.google-metric-row strong {
    display: block;

    color: #111827;

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

    letter-spacing: -1px;
}


/* GROWTH BADGE */

.google-growth {
    padding: 6px 8px;

    border-radius: 100px;

    background: #EEF2FF;

    color: #5266F5;

    font-size: 8px;
    font-weight: 800;
}


/* ========================================
   MINI CHART
======================================== */

.google-chart {
    height: 52px;

    display: flex;
    align-items: flex-end;

    gap: 6px;

    margin-top: 16px;

    padding-top: 5px;

    border-top: 1px solid #F1F5F9;
}

.google-chart span {
    width: 100%;

    height: var(--height);

    min-height: 5px;

    display: block;

    border-radius: 5px 5px 2px 2px;

    background:
        linear-gradient(
            180deg,
            #5266F5,
            #7C3AED
        );

    transform-origin: bottom;

    animation:
        googleBarMove
        2.8s ease-in-out infinite;
}


/* DIFFERENT BAR TIMINGS */

.google-chart span:nth-child(2) {
    animation-delay: .15s;
}

.google-chart span:nth-child(3) {
    animation-delay: .3s;
}

.google-chart span:nth-child(4) {
    animation-delay: .45s;
}

.google-chart span:nth-child(5) {
    animation-delay: .6s;
}

.google-chart span:nth-child(6) {
    animation-delay: .75s;
}

.google-chart span:nth-child(7) {
    animation-delay: .9s;
}


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

@keyframes googleWidgetFloat {

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

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

}


@keyframes googleBarMove {

    0%,
    100% {
        transform: scaleY(.72);
        opacity: .65;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }

}


@keyframes googleLivePulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(82, 102, 245, .45);
    }

    70% {
        box-shadow:
            0 0 0 7px rgba(82, 102, 245, 0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(82, 102, 245, 0);
    }

}


/* ========================================
   GOOGLE ADS MOBILE
======================================== */

@media (max-width: 700px) {

    .google-ads-visual {
        width: 145px;

        top: 20px;
        right: 18px;
    }

    .google-campaign-widget {
        padding: 13px;

        border-radius: 16px;
    }

    .google-metric-row strong {
        font-size: 23px;
    }

    .google-chart {
        height: 38px;

        gap: 4px;

        margin-top: 11px;
    }

    .google-growth {
        font-size: 7px;

        padding: 5px 6px;
    }

}


/* REDUCED MOTION */

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

    .google-campaign-widget,
    .google-chart span,
    .google-live i {
        animation: none;
    }

}/* =========================================================
   FINAL SERVICES SHOWCASE - ALL 10 WIDGETS
========================================================= */

.services-showcase {
    position: relative;
    min-height: auto;
    padding: 120px 7%;
    overflow: hidden;
    background: linear-gradient(
        180deg,
        #F8FAFF 0%,
        #FFFFFF 48%,
        #F8FAFC 100%
    );
}

.services-showcase-head {
    position: relative;
    z-index: 2;

    max-width: 1400px;
    margin: 0 auto 70px;

    display: grid;
    grid-template-columns: 1.1fr 0.7fr;
    gap: 80px;
    align-items: end;
}

.services-showcase-head h2 {
    margin: 0;
    max-width: 800px;

    font-size: clamp(52px, 5.5vw, 82px);
    line-height: 1.03;
    letter-spacing: -4px;

    color: #111827;
}

.services-showcase-head h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.services-showcase-head > p {
    max-width: 520px;
    margin: 0;

    color: #64748B;

    font-size: 17px;
    line-height: 1.8;
}


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

.services-bento-grid {
    position: relative;
    z-index: 2;

    max-width: 1400px;
    margin: 0 auto;

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

    gap: 22px;
}


/* =========================================================
   BASE CARD
========================================================= */

.service-bento-card {
    position: relative;

    min-height: 430px;

    padding: 32px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

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

    border: 1px solid #E2E8F0;
    border-radius: 28px;

    box-shadow:
        0 15px 45px rgba(15, 23, 42, 0.045);

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

    opacity: 0;
    transform: translateY(38px);

    transition:
        opacity 0.7s ease,
        transform 0.45s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.service-bento-card.show {
    opacity: 1;
    transform: translateY(0);
}

.service-bento-card:hover {
    transform: translateY(-9px);

    border-color: rgba(82, 102, 245, 0.28);

    box-shadow:
        0 28px 70px rgba(15, 23, 42, 0.11);
}


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

.service-top,
.service-body,
.service-link {
    position: relative;
    z-index: 4;
}

.service-index {
    width: 48px;
    height: 48px;

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

    border-radius: 14px;

    background: #EEF2FF;

    color: #5266F5;

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

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

.service-bento-card:hover .service-index {
    transform: rotate(-7deg) scale(1.07);

    color: #FFFFFF;

    background: linear-gradient(
        135deg,
        #5266F5,
        #7C3AED
    );
}

.service-body {
    margin-top: auto;
}

.service-small {
    display: block;

    margin-bottom: 12px;

    color: #5266F5;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.service-body h3 {
    max-width: 530px;

    margin: 0 0 16px;

    color: #111827;

    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -1.2px;
}

.service-body p {
    max-width: 580px;

    margin: 0;

    color: #64748B;

    font-size: 15px;
    line-height: 1.72;
}

.service-link {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-top: 26px;

    color: #111827;

    text-decoration: none;

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

.service-link span {
    transition: transform 0.3s ease;
}

.service-link:hover {
    color: #5266F5;
}

.service-link:hover span {
    transform: translate(5px, -5px);
}


/* =========================================================
   COMMON CURSOR GLOW
========================================================= */

.service-card-glow {
    position: absolute;

    width: 330px;
    height: 330px;

    right: -180px;
    top: -180px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #5266F5,
        #7C3AED
    );

    filter: blur(60px);

    opacity: 0;

    pointer-events: none;

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

.service-bento-card:hover .service-card-glow {
    opacity: 0.13;
    transform: scale(1.35);
}


/* =========================================================
   01 SEO
========================================================= */

.seo-visual {
    position: absolute;

    top: 28px;
    right: 28px;

    width: 245px;
    height: 180px;

    z-index: 3;

    pointer-events: none;
}

.seo-ranking-card {
    position: absolute;

    right: 0;
    top: 0;

    width: 155px;

    padding: 17px;

    border-radius: 19px;

    background: #FFFFFF;
    border: 1px solid #E2E8F0;

    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.09);

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

.seo-rank-label {
    display: block;

    margin-bottom: 7px;

    color: #64748B;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.seo-ranking-card strong {
    display: block;

    color: #111827;

    font-size: 42px;
    line-height: 1;
}

.seo-rank-growth {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-top: 9px;
}

.seo-rank-growth span {
    width: 24px;
    height: 24px;

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

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #5266F5,
        #7C3AED
    );

    color: #FFFFFF;
}

.seo-rank-growth small {
    color: #64748B;
    font-size: 10px;
}

.seo-search-bar {
    position: absolute;

    left: 0;
    bottom: 8px;

    width: 185px;

    padding: 10px 13px;

    display: flex;
    align-items: center;

    gap: 8px;

    border-radius: 100px;

    background: #FFFFFF;
    border: 1px solid #E2E8F0;

    box-shadow:
        0 15px 35px rgba(15, 23, 42, 0.07);

    color: #475569;

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

    animation: seoSearch 4.5s ease-in-out infinite;
}

.seo-search-icon {
    width: 27px;
    height: 27px;

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

    border-radius: 50%;

    background: #EEF2FF;

    color: #5266F5;
}

.seo-float-dot {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #5266F5;

    animation: floatingDot 3s ease-in-out infinite;
}

.seo-dot-1 {
    top: 22px;
    left: 28px;
}

.seo-dot-2 {
    top: 80px;
    left: 2px;

    animation-delay: 0.6s;
}

.seo-dot-3 {
    right: 18px;
    bottom: 4px;

    animation-delay: 1.2s;
}


/* =========================================================
   02 PERFORMANCE
========================================================= */

.performance-visual {
    position: absolute;

    top: 28px;
    right: 35px;

    width: 180px;
    height: 180px;

    z-index: 3;

    pointer-events: none;
}

.performance-ring {
    position: relative;

    width: 155px;
    height: 155px;

    animation:
        widgetFloat 4.2s ease-in-out infinite;
}

.performance-ring svg {
    width: 100%;
    height: 100%;

    transform: rotate(-90deg);
}

.performance-ring circle {
    fill: none;

    stroke-width: 10;

    stroke-linecap: round;
}

.performance-ring-bg {
    stroke: #E8ECFF;
}

.performance-ring-progress {
    stroke: url(#none);
    stroke: #6366F1;

    stroke-dasharray: 302;
    stroke-dashoffset: 95;

    animation:
        ringPulse 3.2s ease-in-out infinite;
}

.performance-ring-text {
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.performance-ring-text strong {
    color: #111827;

    font-size: 27px;
}

.performance-ring-text span {
    margin-top: 4px;

    color: #64748B;

    font-size: 11px;
}

.performance-dot {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #7C3AED;

    animation:
        floatingDot 3s ease-in-out infinite;
}

.dot-one {
    left: -5px;
    top: 60px;
}

.dot-two {
    right: 4px;
    bottom: 15px;

    animation-delay: .8s;
}

.dot-three {
    right: 55px;
    top: -5px;

    animation-delay: 1.5s;
}


/* =========================================================
   03 GOOGLE ADS
========================================================= */

.google-ads-visual {
    position: absolute;

    top: 26px;
    right: 28px;

    width: 190px;

    z-index: 3;

    pointer-events: none;
}

.google-campaign-widget {
    padding: 17px;

    border-radius: 19px;

    background: #FFFFFF;
    border: 1px solid #E2E8F0;

    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.09);

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

.google-widget-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    color: #64748B;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.google-live {
    display: flex;
    align-items: center;

    gap: 5px;

    color: #5266F5;
}

.google-live i {
    width: 6px;
    height: 6px;

    display: block;

    border-radius: 50%;

    background: #5266F5;

    animation: livePulse 1.8s infinite;
}

.google-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    margin-top: 13px;
}

.google-metric-row small {
    display: block;

    margin-bottom: 4px;

    color: #94A3B8;

    font-size: 8px;
}

.google-metric-row strong {
    color: #111827;

    font-size: 28px;
}

.google-growth {
    padding: 6px 8px;

    border-radius: 100px;

    background: #EEF2FF;

    color: #5266F5;

    font-size: 8px;
    font-weight: 800;
}

.google-chart {
    height: 52px;

    display: flex;
    align-items: flex-end;

    gap: 6px;

    margin-top: 15px;
}

.google-chart span {
    flex: 1;

    height: var(--height);

    min-height: 5px;

    border-radius: 5px 5px 2px 2px;

    background: linear-gradient(
        180deg,
        #5266F5,
        #7C3AED
    );

    animation:
        chartBar 2.8s ease-in-out infinite;
}


/* =========================================================
   04 SOCIAL MEDIA
========================================================= */

.social-visual {
    position: absolute;

    top: 28px;
    right: 28px;

    width: 205px;
    height: 160px;

    z-index: 3;

    pointer-events: none;
}

.social-main-widget {
    width: 155px;

    padding: 16px;

    border-radius: 19px;

    background: #FFFFFF;
    border: 1px solid #E2E8F0;

    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.08);

    animation:
        widgetFloat 4.5s ease-in-out infinite;
}

.social-widget-head {
    display: flex;
    justify-content: space-between;

    color: #64748B;

    font-size: 7px;
    font-weight: 800;
}

.social-status {
    color: #5266F5;
}

.social-main-widget strong {
    display: block;

    margin-top: 12px;

    color: #111827;

    font-size: 27px;
}

.social-mini-line {
    position: relative;

    height: 28px;

    margin-top: 10px;

    overflow: hidden;
}

.social-mini-line span {
    position: absolute;

    left: 0;
    bottom: 6px;

    width: 100%;
    height: 2px;

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );

    transform: rotate(-9deg);

    animation:
        socialLine 2.8s ease-in-out infinite;
}

.social-reaction {
    position: absolute;

    min-width: 55px;

    display: flex;
    align-items: center;

    gap: 5px;

    padding: 8px 10px;

    border-radius: 100px;

    background: #FFFFFF;
    border: 1px solid #E2E8F0;

    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.07);

    color: #5266F5;

    font-size: 11px;

    animation:
        reactionFloat 3.2s ease-in-out infinite;
}

.social-reaction span {
    color: #64748B;
    font-size: 8px;
}

.social-like {
    right: 0;
    top: 7px;
}

.social-comment {
    right: -6px;
    top: 58px;

    animation-delay: .6s;
}

.social-share {
    right: 18px;
    bottom: 4px;

    animation-delay: 1.2s;
}

.service-pills {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 19px;
}

.service-pills span {
    padding: 7px 11px;

    border-radius: 100px;

    background: #F1F5F9;

    color: #64748B;

    font-size: 10px;
    font-weight: 600;
}


/* =========================================================
   05 META ADS
========================================================= */

.meta-visual {
    position: absolute;

    top: 25px;
    right: 28px;

    width: 200px;
    height: 170px;

    z-index: 3;

    pointer-events: none;
}

.meta-orbit {
    position: absolute;

    width: 115px;
    height: 115px;

    right: 0;
    top: 0;

    border: 1px dashed #CBD5E1;

    border-radius: 50%;

    animation:
        orbitRotate 9s linear infinite;
}

.meta-center {
    position: absolute;

    inset: 35px;

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

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #5266F5,
        #7C3AED
    );

    color: #FFFFFF;

    font-size: 21px;
}

.meta-person {
    position: absolute;

    color: #5266F5;

    font-size: 12px;
}

.meta-person-one {
    top: -5px;
    left: 50%;
}

.meta-person-two {
    bottom: 8px;
    right: -5px;
}

.meta-person-three {
    left: -5px;
    bottom: 20px;
}

.meta-stat {
    position: absolute;

    left: 0;
    bottom: 4px;

    width: 125px;

    padding: 13px;

    border-radius: 16px;

    background: #FFFFFF;
    border: 1px solid #E2E8F0;

    box-shadow:
        0 15px 32px rgba(15, 23, 42, 0.08);

    animation:
        widgetFloat 4.2s ease-in-out infinite;
}

.meta-stat span,
.meta-stat small {
    display: block;

    color: #64748B;

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

.meta-stat strong {
    display: block;

    margin: 5px 0;

    color: #111827;

    font-size: 24px;
}

.meta-stat small {
    color: #5266F5;
}


/* =========================================================
   06 AFFILIATE
========================================================= */

.affiliate-visual {
    position: absolute;

    top: 35px;
    right: 30px;

    width: 260px;

    display: flex;
    align-items: center;

    z-index: 3;

    pointer-events: none;
}

.affiliate-node {
    width: 70px;
    height: 70px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #FFFFFF;
    border: 1px solid #E2E8F0;

    box-shadow:
        0 15px 34px rgba(15, 23, 42, 0.08);

    animation:
        affiliateNode 3.8s ease-in-out infinite;
}

.affiliate-node span {
    color: #5266F5;

    font-size: 20px;
    font-weight: 800;
}

.affiliate-node small {
    margin-top: 3px;

    color: #64748B;

    font-size: 7px;
    font-weight: 800;
}

.affiliate-flow {
    position: relative;

    flex: 1;

    height: 2px;

    overflow: hidden;

    background: #E2E8F0;
}

.affiliate-flow i {
    position: absolute;

    width: 20px;
    height: 2px;

    left: -20px;

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );

    animation:
        affiliateFlow 2s linear infinite;
}


/* =========================================================
   07 LEAD GENERATION
========================================================= */

.lead-visual {
    position: absolute;

    top: 28px;
    right: 28px;

    width: 205px;
    height: 160px;

    z-index: 3;

    pointer-events: none;
}

.lead-counter {
    position: absolute;

    right: 0;
    top: 0;

    width: 130px;

    padding: 14px;

    border-radius: 17px;

    background: #FFFFFF;
    border: 1px solid #E2E8F0;

    box-shadow:
        0 15px 35px rgba(15, 23, 42, 0.08);

    animation:
        widgetFloat 4.2s ease-in-out infinite;
}

.lead-counter > span,
.lead-counter small {
    display: block;

    color: #64748B;

    font-size: 7px;
    font-weight: 800;
}

.lead-counter strong {
    display: block;

    margin: 5px 0;

    color: #111827;

    font-size: 25px;
}

.lead-funnel {
    position: absolute;

    left: 3px;
    bottom: 2px;

    width: 95px;
    height: 90px;
}

.lead-funnel span {
    display: block;

    height: 15px;

    margin: 5px auto;

    border-radius: 5px;

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );
}

.funnel-one {
    width: 90px;
}

.funnel-two {
    width: 65px;
}

.funnel-three {
    width: 38px;
}

.lead-funnel i {
    position: absolute;

    width: 8px;
    height: 8px;

    bottom: 0;
    left: 44px;

    border-radius: 50%;

    background: #5266F5;

    animation:
        leadDrop 2s ease-in-out infinite;
}


/* =========================================================
   08 MEDIA BUYING
========================================================= */

.service-dark {
    background: linear-gradient(
        135deg,
        #111827,
        #171C35
    );

    border-color: rgba(255, 255, 255, 0.08);
}

.service-dark .service-index {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.service-dark .service-small {
    color: #818CF8;
}

.service-dark .service-body h3,
.service-dark .service-link {
    color: #FFFFFF;
}

.service-dark .service-body p {
    color: #94A3B8;
}

.media-visual {
    position: absolute;

    top: 27px;
    right: 30px;

    width: 215px;
    height: 160px;

    z-index: 3;

    pointer-events: none;
}

.media-reach-card {
    position: absolute;

    right: 0;
    top: 0;

    width: 125px;

    padding: 14px;

    border-radius: 16px;

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

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

    backdrop-filter: blur(10px);

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

.media-reach-card span,
.media-reach-card small {
    display: block;

    color: #94A3B8;

    font-size: 7px;
}

.media-reach-card strong {
    display: block;

    margin: 6px 0;

    color: #FFFFFF;

    font-size: 25px;
}

.media-bars {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 120px;
    height: 80px;

    display: flex;
    align-items: flex-end;

    gap: 8px;
}

.media-bars > div {
    flex: 1;

    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.media-bars span {
    height: var(--media-height);

    border-radius: 5px 5px 2px 2px;

    background: linear-gradient(
        180deg,
        #60A5FA,
        #8B5CF6
    );

    animation:
        chartBar 2.8s ease-in-out infinite;
}

.media-bars small {
    margin-top: 5px;

    text-align: center;

    color: #64748B;

    font-size: 6px;
}


/* =========================================================
   09 APP DEVELOPMENT
========================================================= */

.app-visual {
    position: absolute;

    top: 22px;
    right: 35px;

    width: 170px;
    height: 190px;

    z-index: 3;

    pointer-events: none;
}

.app-phone {
    width: 92px;
    height: 170px;

    margin-left: auto;

    padding: 7px;

    border-radius: 20px;

    background: #111827;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.16);

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

.app-speaker {
    width: 24px;
    height: 3px;

    margin: 1px auto 6px;

    border-radius: 10px;

    background: #475569;
}

.app-screen {
    height: 146px;

    padding: 9px;

    border-radius: 14px;

    background: #F8FAFC;
}

.app-screen-head {
    display: flex;
    justify-content: space-between;
}

.app-screen-head span,
.app-screen-head i {
    width: 20px;
    height: 5px;

    border-radius: 10px;

    background: #CBD5E1;
}

.app-screen-head i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #5266F5;
}

.app-screen-chart {
    position: relative;

    height: 47px;

    margin-top: 14px;

    border-radius: 9px;

    background: #EEF2FF;
}

.app-screen-chart span {
    position: absolute;

    left: 8px;
    right: 8px;
    bottom: 13px;

    height: 2px;

    transform: rotate(-12deg);

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );
}

.app-screen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 6px;

    margin-top: 9px;
}

.app-screen-grid i {
    height: 25px;

    border-radius: 7px;

    background: #E2E8F0;
}

.app-floating-icon {
    position: absolute;

    width: 34px;
    height: 34px;

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

    border-radius: 10px;

    background: #FFFFFF;
    border: 1px solid #E2E8F0;

    color: #5266F5;

    box-shadow:
        0 12px 25px rgba(15, 23, 42, 0.08);

    animation:
        reactionFloat 3s ease-in-out infinite;
}

.app-icon-one {
    left: 10px;
    top: 45px;
}

.app-icon-two {
    left: 23px;
    bottom: 18px;

    animation-delay: 1s;
}


/* =========================================================
   10 WEB DEVELOPMENT
========================================================= */

.web-visual {
    position: absolute;

    top: 30px;
    right: 28px;

    width: 230px;
    height: 170px;

    z-index: 3;

    pointer-events: none;
}

.web-browser {
    width: 200px;

    overflow: hidden;

    border-radius: 15px;

    background: #FFFFFF;
    border: 1px solid #E2E8F0;

    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.09);

    animation:
        browserFloat 4.2s ease-in-out infinite;
}

.browser-top {
    height: 28px;

    padding: 0 9px;

    display: flex;
    align-items: center;

    gap: 9px;

    background: #F8FAFC;

    border-bottom: 1px solid #E2E8F0;
}

.browser-dots {
    display: flex;

    gap: 3px;
}

.browser-dots i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #CBD5E1;
}

.browser-top > span {
    color: #94A3B8;

    font-size: 7px;
}

.browser-content {
    height: 105px;

    display: grid;
    grid-template-columns: 40px 1fr;
}

.browser-sidebar {
    padding: 11px 8px;

    background: #F8FAFC;
}

.browser-sidebar span {
    display: block;

    height: 5px;

    margin-bottom: 7px;

    border-radius: 10px;

    background: #CBD5E1;
}

.browser-main {
    padding: 13px;
}

.browser-title {
    display: block;

    width: 70%;
    height: 7px;

    border-radius: 10px;

    background: #5266F5;
}

.browser-row {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 6px;

    margin-top: 12px;
}

.browser-row i {
    height: 37px;

    border-radius: 7px;

    background: #EEF2FF;
}

.browser-lines {
    margin-top: 10px;
}

.browser-lines span {
    display: block;

    width: 100%;
    height: 4px;

    margin-bottom: 5px;

    border-radius: 10px;

    background: #E2E8F0;
}

.browser-lines span:nth-child(2) {
    width: 78%;
}

.browser-lines span:nth-child(3) {
    width: 55%;
}

.web-code-badge {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 48px;
    height: 48px;

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

    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #5266F5,
        #7C3AED
    );

    color: #FFFFFF;

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

    box-shadow:
        0 12px 30px rgba(82,102,245,0.25);

    animation:
        reactionFloat 3.4s ease-in-out infinite;
}


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

.services-bg-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(130px);

    pointer-events: none;

    opacity: .09;
}

.services-orb-one {
    width: 480px;
    height: 480px;

    left: -250px;
    top: 150px;

    background: #5266F5;

    animation:
        backgroundOrbOne 10s ease-in-out infinite;
}

.services-orb-two {
    width: 500px;
    height: 500px;

    right: -260px;
    bottom: 100px;

    background: #7C3AED;

    animation:
        backgroundOrbTwo 12s ease-in-out infinite;
}


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

@keyframes seoFloat {

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

}

@keyframes seoSearch {

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

}

@keyframes widgetFloat {

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

}

@keyframes floatingDot {

    50% {
        transform:
            translateY(-10px)
            scale(1.2);
    }

}

@keyframes ringPulse {

    50% {
        stroke-dashoffset: 55;
    }

}

@keyframes livePulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(82,102,245,.45);
    }

    70% {
        box-shadow:
            0 0 0 7px rgba(82,102,245,0);
    }

}

@keyframes chartBar {

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

}

@keyframes socialLine {

    50% {
        transform:
            rotate(-4deg)
            scaleX(.82);
    }

}

@keyframes reactionFloat {

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

}

@keyframes orbitRotate {

    to {
        transform: rotate(360deg);
    }

}

@keyframes affiliateNode {

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

}

@keyframes affiliateFlow {

    to {
        left: 100%;
    }

}

@keyframes leadDrop {

    50% {
        transform: translateY(7px);
    }

}

@keyframes phoneFloat {

    50% {
        transform:
            translateY(-8px)
            rotate(1deg);
    }

}

@keyframes browserFloat {

    50% {
        transform:
            translateY(-7px)
            rotate(-1deg);
    }

}

@keyframes backgroundOrbOne {

    50% {
        transform:
            translate(100px, 60px);
    }

}

@keyframes backgroundOrbTwo {

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

}


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

@media (max-width: 1000px) {

    .services-showcase {
        padding: 95px 6%;
    }

    .services-showcase-head {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .services-showcase-head > p {
        max-width: 700px;
    }

}


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

@media (max-width: 700px) {

    .services-showcase {
        padding: 75px 20px;
    }

    .services-showcase-head {
        margin-bottom: 45px;
    }

    .services-showcase-head h2 {
        font-size: 45px;
        letter-spacing: -2px;
    }

    .services-showcase-head > p {
        font-size: 15px;
    }

    .services-bento-grid {
        grid-template-columns: 1fr;
    }

    .service-bento-card {
        min-height: 380px;

        padding: 25px;

        border-radius: 23px;
    }

    .service-body h3 {
        font-size: 28px;
    }

    .service-body p {
        font-size: 14px;
    }

    .seo-visual,
    .performance-visual,
    .google-ads-visual,
    .social-visual,
    .meta-visual,
    .affiliate-visual,
    .lead-visual,
    .media-visual,
    .app-visual,
    .web-visual {
        transform: scale(.8);
        transform-origin: top right;

        right: 8px;
    }

}


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

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

    .service-bento-card {
        opacity: 1;
        transform: none;
    }

    .services-showcase * {
        animation: none !important;
    }

}/* ========================================
   SERVICES GRID FINAL LAYOUT FIX
======================================== */

.services-bento-grid {
    display: grid;

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

    gap: 22px;
}


/* DEFAULT CARDS */

.service-bento-card {
    grid-column: span 4;

    min-height: 410px;
}


/* LARGE TOP CARDS */

.seo-card {
    grid-column: span 7;
}

.performance-card {
    grid-column: span 5;
}


/* GOOGLE / SOCIAL / META */

.google-ads-card,
.social-card,
.meta-card {
    grid-column: span 4;
}


/* AFFILIATE + LEADS */

.affiliate-card {
    grid-column: span 7;
}

.lead-card {
    grid-column: span 5;
}


/* MEDIA BUYING */

.media-card {
    grid-column: span 12;

    min-height: 360px;
}


/* APP + WEB */

.app-card,
.web-card {
    grid-column: span 6;
}


/* TABLET */

@media (max-width: 1000px) {

    .seo-card,
    .performance-card,
    .google-ads-card,
    .social-card,
    .meta-card,
    .affiliate-card,
    .lead-card,
    .media-card,
    .app-card,
    .web-card {
        grid-column: span 6;
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .services-bento-grid {
        grid-template-columns: 1fr;
    }

    .seo-card,
    .performance-card,
    .google-ads-card,
    .social-card,
    .meta-card,
    .affiliate-card,
    .lead-card,
    .media-card,
    .app-card,
    .web-card {
        grid-column: auto;
    }

}/* =========================================
   GREEN LIVE DOT - SECTION TAGS
========================================= */

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Green glowing dot */
.section-tag::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    flex-shrink: 0;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.12),
        0 0 10px rgba(34, 197, 94, 0.65);

    animation: sectionStatusPulse 2s ease-in-out infinite;
}

/* Pulse animation */
@keyframes sectionStatusPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 3px rgba(34, 197, 94, 0.10),
            0 0 7px rgba(34, 197, 94, 0.45);

        transform: scale(1);
    }

    50% {
        box-shadow:
            0 0 0 6px rgba(34, 197, 94, 0.05),
            0 0 14px rgba(34, 197, 94, 0.85);

        transform: scale(1.15);
    }
}/* =========================================
   HERO TAG GREEN LIVE DOT
========================================= */

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.hero-tag::before {
    content: "";
    width: 8px;
    height: 8px;
    flex-shrink: 0;

    background: #22c55e;
    border-radius: 50%;

    box-shadow:
        0 0 0 5px rgba(34, 197, 94, 0.10),
        0 0 10px rgba(34, 197, 94, 0.75);

    animation: heroLivePulse 2s ease-in-out infinite;
}

@keyframes heroLivePulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 0 0 5px rgba(34, 197, 94, 0.10),
            0 0 8px rgba(34, 197, 94, 0.65);
    }

    50% {
        opacity: 0.75;
        transform: scale(1.25);
        box-shadow:
            0 0 0 8px rgba(34, 197, 94, 0.05),
            0 0 14px rgba(34, 197, 94, 0.9);
    }
}/* =========================================
   SECTION TAG - PREMIUM STATUS PILL
========================================= */

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    width: fit-content;

    padding: 10px 18px;

    background: rgba(91, 92, 240, 0.06);

    border: 1px solid rgba(91, 92, 240, 0.18);

    border-radius: 999px;

    color: #5364e8;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;

    box-shadow:
        0 6px 20px rgba(79, 70, 229, 0.05);

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


/* GREEN LIVE DOT */

.section-tag::before {
    content: "";

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    background: #22c55e;

    border-radius: 50%;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.10),
        0 0 10px rgba(34, 197, 94, 0.65);

    animation: sectionStatusPulse 2s ease-in-out infinite;
}


/* SUBTLE HOVER */

.section-tag:hover {
    transform: translateY(-2px);

    border-color: rgba(91, 92, 240, 0.35);

    box-shadow:
        0 10px 25px rgba(79, 70, 229, 0.10);
}


/* GREEN LIGHT ANIMATION */

@keyframes sectionStatusPulse {

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

        box-shadow:
            0 0 0 3px rgba(34, 197, 94, 0.10),
            0 0 8px rgba(34, 197, 94, 0.55);
    }

    50% {
        transform: scale(1.18);

        box-shadow:
            0 0 0 6px rgba(34, 197, 94, 0.04),
            0 0 14px rgba(34, 197, 94, 0.85);
    }
}/* =========================================================
   PREMIUM AFFYADS FOOTER
========================================================= */

.site-footer {
    position: relative;
    overflow: hidden;

    padding: 95px 7% 35px;

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(82, 102, 245, 0.14),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 80%,
            rgba(124, 58, 237, 0.16),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0B1020 0%,
            #101528 48%,
            #17132F 100%
        );

    color: #FFFFFF;
}


/* =========================================================
   TOP GRADIENT SHINE
========================================================= */

.footer-shine-line {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    overflow: hidden;

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

.footer-shine-line::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 100%;

    left: -260px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #6366F1,
            #A855F7,
            transparent
        );

    animation:
        footerShine 6s linear infinite;
}

@keyframes footerShine {

    to {
        left: 100%;
    }

}


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

.footer-top {
    position: relative;
    z-index: 5;

    max-width: 1450px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.35fr .75fr .95fr 1fr;

    gap: 75px;
}


/* =========================================================
   BRAND
========================================================= */

.footer-brand {
    max-width: 390px;
}

.footer-logo {
    width: 185px;
    height: auto;

    display: block;

    margin-bottom: 30px;
}

.footer-brand > p {
    margin: 0;

    color: #AAB4CD;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   STATUS PILL
========================================================= */

.footer-status {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 24px;

    padding: 8px 13px;

    border:
        1px solid rgba(129, 140, 248, .15);

    border-radius: 100px;

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

    color: #A5B4FC;

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

    letter-spacing: 1px;
}

.footer-live-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22C55E;

    box-shadow:
        0 0 10px rgba(34,197,94,.8);

    animation:
        footerLivePulse 2s ease-in-out infinite;
}

@keyframes footerLivePulse {

    50% {
        transform: scale(1.3);

        box-shadow:
            0 0 0 6px rgba(34,197,94,.05),
            0 0 13px rgba(34,197,94,.9);
    }

}


/* =========================================================
   SOCIAL
========================================================= */

.footer-brand-social {
    margin-top: 38px;
}

.follow-title {
    margin-bottom: 18px !important;

    color: #FFFFFF !important;

    font-size: 14px !important;
    font-weight: 700;
}

.social-icons {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}

.social-icons a {
    position: relative;

    width: 47px;
    height: 47px;

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

    border-radius: 50%;

    color: #FFFFFF;

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

    border:
        1px solid rgba(255,255,255,.13);

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

.social-icons svg {
    width: 18px;
    height: 18px;

    fill: currentColor;
}

.social-icons a:hover {
    transform:
        translateY(-5px)
        scale(1.04);

    background:
        linear-gradient(
            135deg,
            #5266F5,
            #7C3AED
        );

    border-color:
        rgba(129,140,248,.8);

    box-shadow:
        0 12px 28px rgba(99,102,241,.25);
}


/* =========================================================
   COLUMNS
========================================================= */

.footer-column {
    position: relative;
}

.footer-column h4 {
    position: relative;

    margin: 0 0 25px;

    color: #FFFFFF;

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

.footer-column h4::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -9px;

    width: 25px;
    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #5266F5,
            #A855F7
        );
}


/* LINKS */

.footer-column > a {
    position: relative;

    width: fit-content;

    display: block;

    margin-bottom: 15px;

    color: #AAB4CD;

    text-decoration: none;

    font-size: 14px;

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

.footer-column > a::before {
    content: "→";

    position: absolute;

    left: -17px;

    opacity: 0;

    color: #818CF8;

    transition:
        opacity .3s ease,
        left .3s ease;
}

.footer-column > a:hover {
    color: #FFFFFF;

    transform: translateX(8px);
}

.footer-column > a:hover::before {
    left: -13px;

    opacity: 1;
}


/* =========================================================
   CONTACT
========================================================= */

.footer-contact-item {
    margin-bottom: 26px;
}

.footer-contact-item > span {
    display: block;

    margin-bottom: 8px;

    color: #7C8AAA;

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

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.footer-contact-item p,
.footer-contact-item a {
    margin: 0;

    color: #AAB4CD;

    font-size: 14px;
    line-height: 1.75;

    text-decoration: none;

    transition: color .3s ease;
}

.footer-contact-item a:hover {
    color: #A5B4FC;
}


/* =========================================================
   LARGE WATERMARK
========================================================= */

.footer-watermark {
    position: absolute;

    left: 6%;
    bottom: 55px;

    z-index: 1;

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

    font-size: clamp(80px, 11vw, 180px);
    font-weight: 900;

    letter-spacing: -6px;

    white-space: nowrap;

    user-select: none;

    pointer-events: none;
}


/* =========================================================
   GLOW ORBS
========================================================= */

.footer-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;
}

.footer-glow-one {
    width: 420px;
    height: 420px;

    top: -220px;
    left: -150px;

    background:
        rgba(82,102,245,.25);

    animation:
        footerGlowOne 10s ease-in-out infinite;
}

.footer-glow-two {
    width: 440px;
    height: 440px;

    right: -180px;
    bottom: -220px;

    background:
        rgba(124,58,237,.23);

    animation:
        footerGlowTwo 12s ease-in-out infinite;
}

@keyframes footerGlowOne {

    50% {
        transform:
            translate(80px, 60px);
    }

}

@keyframes footerGlowTwo {

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

}


/* =========================================================
   PARTICLES
========================================================= */

.footer-particle {
    position: absolute;

    z-index: 2;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #818CF8;

    box-shadow:
        0 0 14px rgba(129,140,248,.8);

    opacity: .45;

    animation:
        footerParticleFloat 5s ease-in-out infinite;
}

.particle-one {
    left: 8%;
    top: 18%;
}

.particle-two {
    left: 48%;
    top: 13%;

    animation-delay: .9s;
}

.particle-three {
    right: 22%;
    top: 29%;

    animation-delay: 1.7s;
}

.particle-four {
    right: 8%;
    bottom: 24%;

    animation-delay: 2.4s;
}

@keyframes footerParticleFloat {

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

        opacity: .85;
    }

}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
    position: relative;
    z-index: 5;

    max-width: 1450px;

    margin: 75px auto 0;

    padding-top: 28px;

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

    border-top:
        1px solid rgba(255,255,255,.08);
}

.footer-bottom p {
    margin: 0;

    color: #77839F;

    font-size: 13px;
}

.footer-legal {
    display: flex;

    gap: 28px;
}

.footer-legal a {
    color: #77839F;

    text-decoration: none;

    font-size: 13px;

    transition: color .3s ease;
}

.footer-legal a:hover {
    color: #A5B4FC;
}


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

@media (max-width: 1000px) {

    .footer-top {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 55px;
    }

}


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

@media (max-width: 650px) {

    .site-footer {
        padding:
            75px 22px 30px;
    }

    .footer-top {
        grid-template-columns: 1fr;

        gap: 48px;
    }

    .footer-bottom {
        margin-top: 55px;

        align-items: flex-start;
        flex-direction: column;

        gap: 18px;
    }

    .footer-legal {
        flex-wrap: wrap;

        gap: 16px;
    }

    .footer-watermark {
        display: none;
    }

}


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

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

    .footer-glow,
    .footer-particle,
    .footer-shine-line::after,
    .footer-live-dot {
        animation: none;
    }

}/* =========================================================
   FOOTER FINAL GLOW POSITION + WATERMARK POLISH
========================================================= */

/* Keep footer bottom dark */
.site-footer {
    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(37, 99, 235, 0.22),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 0%,
            rgba(124, 58, 237, 0.24),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #101528 0%,
            #0D1222 55%,
            #090D18 100%
        );
}


/* BLUE GLOW - ONLY UPPER LEFT */
.footer-glow-one {
    width: 420px;
    height: 420px;

    top: -250px;
    left: -120px;

    background: rgba(37, 99, 235, 0.28);

    filter: blur(120px);

    opacity: 0.9;
}


/* PURPLE GLOW - ONLY UPPER RIGHT */
.footer-glow-two {
    width: 440px;
    height: 440px;

    top: -260px;
    right: -130px;

    bottom: auto;

    background: rgba(124, 58, 237, 0.28);

    filter: blur(125px);

    opacity: 0.9;
}


/* WATERMARK - MORE VISIBLE + SUBTLE GLOW */
.footer-watermark {
    color: transparent;

    -webkit-text-stroke:
        1px rgba(129, 140, 248, 0.20);

    text-shadow:
        0 0 18px rgba(79, 70, 229, 0.10),
        0 0 32px rgba(124, 58, 237, 0.08);

    opacity: 1;
}


/* OPTIONAL: slightly brighter left-to-right feel */
.footer-watermark::selection {
    background: transparent;
}


/* Keep particles subtle */
.footer-particle {
    opacity: 0.35;
}


/* Slightly brighter upper particles */
.particle-one,
.particle-two,
.particle-three {
    opacity: 0.50;
}


/* Bottom particle reduced */
.particle-four {
    opacity: 0.18;
}/* =========================================================
   FOOTER FINAL CORRECTION
========================================================= */


/* ========================================
   1. REMOVE ALL FLOATING DOTS / PARTICLES
======================================== */

.footer-particle {
    display: none !important;
}


/* ========================================
   2. KEEP GLOWS ONLY AT UPPER CORNERS
======================================== */

.footer-glow-one {
    width: 430px;
    height: 430px;

    top: -255px;
    left: -130px;

    background: rgba(37, 99, 235, 0.25);

    filter: blur(125px);

    opacity: 0.9;
}

.footer-glow-two {
    width: 450px;
    height: 450px;

    top: -270px;
    right: -135px;

    bottom: auto;

    background: rgba(124, 58, 237, 0.26);

    filter: blur(130px);

    opacity: 0.9;
}


/* ========================================
   3. KEEP LOWER FOOTER DARK
======================================== */

.site-footer {
    background:
        radial-gradient(
            circle at 7% 0%,
            rgba(37, 99, 235, 0.18),
            transparent 27%
        ),
        radial-gradient(
            circle at 93% 0%,
            rgba(124, 58, 237, 0.20),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #101528 0%,
            #0D1222 48%,
            #090D18 100%
        );
}


/* ========================================
   4. WATERMARK - BACK TO ORIGINAL STYLE
======================================== */

.footer-watermark {
    position: absolute;

    left: 6%;
    right: 6%;

    bottom: 72px;

    width: auto;

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

    -webkit-text-stroke: 0;

    text-shadow:
        0 0 15px rgba(82, 102, 245, 0.07),
        0 0 24px rgba(124, 58, 237, 0.06);

    font-size: clamp(75px, 10vw, 165px);
    font-weight: 900;

    letter-spacing: -5px;

    white-space: nowrap;

    overflow: visible;

    opacity: 1;

    pointer-events: none;
    user-select: none;

    z-index: 1;
}


/* ========================================
   5. PREVENT WATERMARK FROM CUTTING
======================================== */

.site-footer {
    overflow-x: hidden;
}

.footer-watermark {
    transform: scaleX(0.92);
    transform-origin: left center;
}


/* ========================================
   6. SOCIAL ICONS - MOVE SLIGHTLY DOWN
======================================== */

.footer-brand-social {
    margin-top: 48px;
}

.follow-title {
    margin-bottom: 20px !important;
}

.social-icons {
    margin-top: 6px;
}


/* ========================================
   7. SOCIAL ICON POSITION / CLEAN SPACING
======================================== */

.social-icons a {
    width: 48px;
    height: 48px;

    margin-top: 2px;
}


/* ========================================
   8. KEEP FOOTER CONTENT ABOVE WATERMARK
======================================== */

.footer-top,
.footer-bottom {
    position: relative;
    z-index: 5;
}


/* ========================================
   9. BOTTOM AREA SHOULD STAY CLEAN
======================================== */

.footer-bottom {
    background: transparent;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}


/* ========================================
   MOBILE WATERMARK SAFETY
======================================== */

@media (max-width: 900px) {

    .footer-watermark {
        font-size: 90px;

        left: 4%;
        right: 4%;

        transform: scaleX(0.88);

        bottom: 85px;
    }

}


@media (max-width: 650px) {

    .footer-watermark {
        display: none;
    }

    .footer-brand-social {
        margin-top: 38px;
    }

}/* FOOTER WATERMARK — CENTER + LOWER */

.footer-watermark {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 100% !important;

    margin: 65px auto 0 !important;

    text-align: center;

    transform: none !important;

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

    -webkit-text-stroke: 0 !important;

    text-shadow:
        0 0 14px rgba(82, 102, 245, 0.09),
        0 0 24px rgba(124, 58, 237, 0.07);

    font-size: clamp(70px, 9vw, 150px);
    font-weight: 900;

    line-height: 0.9;
    letter-spacing: -4px;

    white-space: nowrap;

    z-index: 2;
    pointer-events: none;
}


/* Footer content always above watermark */

.footer-top {
    position: relative;
    z-index: 5;
}


/* Bottom bar watermark ke neeche */

.footer-bottom {
    position: relative;
    z-index: 5;

    margin-top: 55px;
}


/* MOBILE */

@media (max-width: 650px) {

    .footer-watermark {
        display: none;
    }

}/* =========================================================
   FOOTER - FINAL WATERMARK + SPACING FIX
========================================================= */

/* 1. REMOVE ALL FLOATING DOTS / PARTICLES */

.footer-particle,
.particle-one,
.particle-two,
.particle-three,
.particle-four {
    display: none !important;
}


/* 2. FOOTER CONTENT NORMAL HEIGHT */

.site-footer {
    padding-bottom: 32px;
}


/* 3. WATERMARK - CENTERED + LOWER THAN SOCIAL ICONS */

.footer-watermark {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    display: block;

    width: 100%;

    margin: 75px auto 0 !important;

    padding: 0 4%;

    text-align: center;

    transform: none !important;

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

    -webkit-text-stroke: 0 !important;

    font-size: clamp(72px, 9vw, 150px);
    font-weight: 900;

    line-height: 0.9;
    letter-spacing: -4px;

    white-space: nowrap;

    overflow: visible;

    opacity: 1;

    z-index: 2;

    pointer-events: none;
    user-select: none;

    /* Very subtle 1–2% glow */
    text-shadow:
        0 0 10px rgba(82, 102, 245, 0.025),
        0 0 18px rgba(124, 58, 237, 0.02);
}


/* 4. SOCIAL SECTION SHOULD STAY ABOVE */

.footer-brand-social {
    position: relative;
    z-index: 5;

    margin-top: 44px;
}


/* 5. REDUCE EXTRA EMPTY SPACE */

.footer-top {
    margin-bottom: 0 !important;
}


/* 6. BOTTOM BAR CLOSER TO WATERMARK */

.footer-bottom {
    position: relative;
    z-index: 5;

    margin-top: 42px !important;

    padding-top: 26px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}


/* 7. WATERMARK SHOULD NEVER CUT */

.site-footer {
    overflow-x: hidden;
}


/* 8. KEEP BOTTOM DARK */

.site-footer {
    background:
        radial-gradient(
            circle at 7% 0%,
            rgba(37, 99, 235, 0.18),
            transparent 27%
        ),
        radial-gradient(
            circle at 93% 0%,
            rgba(124, 58, 237, 0.20),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #101528 0%,
            #0D1222 48%,
            #090D18 100%
        );
}


/* 9. MOBILE */

@media (max-width: 900px) {

    .footer-watermark {
        margin-top: 60px !important;

        font-size: clamp(58px, 10vw, 95px);

        letter-spacing: -3px;
    }

}


@media (max-width: 650px) {

    .footer-watermark {
        display: none;
    }

    .footer-bottom {
        margin-top: 48px !important;
    }

}/* =========================================================
   FOOTER - FINAL WATERMARK + SPACING FIX
========================================================= */

/* 1. REMOVE ALL FLOATING DOTS / PARTICLES */

.footer-particle,
.particle-one,
.particle-two,
.particle-three,
.particle-four {
    display: none !important;
}


/* 2. FOOTER CONTENT NORMAL HEIGHT */

.site-footer {
    padding-bottom: 32px;
}


/* 3. WATERMARK - CENTERED + LOWER THAN SOCIAL ICONS */

.footer-watermark {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    display: block;

    width: 100%;

    margin: 75px auto 0 !important;

    padding: 0 4%;

    text-align: center;

    transform: none !important;

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

    -webkit-text-stroke: 0 !important;

    font-size: clamp(72px, 9vw, 150px);
    font-weight: 900;

    line-height: 0.9;
    letter-spacing: -4px;

    white-space: nowrap;

    overflow: visible;

    opacity: 1;

    z-index: 2;

    pointer-events: none;
    user-select: none;

    /* Very subtle 1–2% glow */
    text-shadow:
        0 0 10px rgba(82, 102, 245, 0.025),
        0 0 18px rgba(124, 58, 237, 0.02);
}


/* 4. SOCIAL SECTION SHOULD STAY ABOVE */

.footer-brand-social {
    position: relative;
    z-index: 5;

    margin-top: 44px;
}


/* 5. REDUCE EXTRA EMPTY SPACE */

.footer-top {
    margin-bottom: 0 !important;
}


/* 6. BOTTOM BAR CLOSER TO WATERMARK */

.footer-bottom {
    position: relative;
    z-index: 5;

    margin-top: 42px !important;

    padding-top: 26px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}


/* 7. WATERMARK SHOULD NEVER CUT */

.site-footer {
    overflow-x: hidden;
}


/* 8. KEEP BOTTOM DARK */

.site-footer {
    background:
        radial-gradient(
            circle at 7% 0%,
            rgba(37, 99, 235, 0.18),
            transparent 27%
        ),
        radial-gradient(
            circle at 93% 0%,
            rgba(124, 58, 237, 0.20),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #101528 0%,
            #0D1222 48%,
            #090D18 100%
        );
}


/* 9. MOBILE */

@media (max-width: 900px) {

    .footer-watermark {
        margin-top: 60px !important;

        font-size: clamp(58px, 10vw, 95px);

        letter-spacing: -3px;
    }

}


@media (max-width: 650px) {

    .footer-watermark {
        display: none;
    }

    .footer-bottom {
        margin-top: 48px !important;
    }

}/* =========================================================
   FOOTER - ABSOLUTE FINAL POSITION FIX
========================================================= */

/* REMOVE EVERY FOOTER PARTICLE / DOT */

.footer-particle,
.particle-one,
.particle-two,
.particle-three,
.particle-four {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}


/* FOOTER MAIN SPACING */

.site-footer {
    padding-bottom: 30px !important;
}


/* CONTENT AREA */

.footer-top {
    position: relative;
    z-index: 5;

    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}


/* SOCIAL AREA */

.footer-brand-social {
    position: relative;
    z-index: 5;

    margin-top: 44px !important;
}


/* =========================================================
   WATERMARK
========================================================= */

.footer-watermark {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    display: block !important;

    width: 100% !important;

    /* THIS CONTROLS GAP AFTER MAIN FOOTER CONTENT */
    margin: 35px auto 0 !important;

    padding: 0 !important;

    text-align: center !important;

    transform: none !important;

    color: rgba(255, 255, 255, 0.025) !important;

    -webkit-text-stroke: 0 !important;

    font-size: clamp(72px, 9vw, 145px) !important;
    font-weight: 900 !important;

    line-height: 0.9 !important;
    letter-spacing: -4px !important;

    white-space: nowrap !important;

    overflow: visible !important;

    opacity: 1 !important;

    pointer-events: none;

    z-index: 2;

    /* ONLY VERY LIGHT GLOW */
    text-shadow:
        0 0 8px rgba(82, 102, 245, 0.025),
        0 0 15px rgba(124, 58, 237, 0.018) !important;
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.footer-bottom {
    position: relative;
    z-index: 5;

    margin-top: 32px !important;

    padding-top: 25px !important;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}


/* TABLET */

@media (max-width: 900px) {

    .footer-watermark {
        margin-top: 40px !important;

        font-size: clamp(58px, 10vw, 95px) !important;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .footer-watermark {
        display: none !important;
    }

}/* =========================================================
   PRIVACY POLICY PAGE
========================================================= */


/* =========================================================
   HERO
========================================================= */

.legal-hero {
    position: relative;

    min-height: 560px;

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

    padding: 110px 8% 90px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #F8FAFF 0%,
            #FFFFFF 100%
        );

    text-align: center;
}


.legal-hero-inner {
    position: relative;
    z-index: 3;

    max-width: 900px;

    margin: 0 auto;
}


.legal-hero .section-tag {
    margin-bottom: 26px;
}


.legal-hero h1 {
    max-width: 900px;

    margin: 0 auto 28px;

    font-size: clamp(56px, 6vw, 88px);
    line-height: 1;
    letter-spacing: -4px;

    color: #111827;
}


.legal-hero h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #5266F5,
            #7C3AED
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.legal-hero-inner > p {
    max-width: 720px;

    margin: 0 auto;

    color: #64748B;

    font-size: 18px;
    line-height: 1.8;
}


/* LAST UPDATED */

.legal-updated {
    width: fit-content;

    margin: 30px auto 0;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 10px 16px;

    border-radius: 100px;

    background: #FFFFFF;

    border: 1px solid #E2E8F0;

    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.05);

    color: #64748B;

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


.legal-updated > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22C55E;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.08),
        0 0 9px rgba(34, 197, 94, 0.55);

    animation:
        legalStatusPulse 2s ease-in-out infinite;
}


@keyframes legalStatusPulse {

    50% {
        transform: scale(1.15);

        box-shadow:
            0 0 0 7px rgba(34, 197, 94, 0.04),
            0 0 13px rgba(34, 197, 94, 0.75);
    }

}


/* HERO BACKGROUND GLOWS */

.legal-hero-glow {
    position: absolute;

    width: 440px;
    height: 440px;

    border-radius: 50%;

    filter: blur(140px);

    pointer-events: none;

    opacity: 0.11;
}


.legal-glow-left {
    left: -220px;
    top: -180px;

    background: #5266F5;
}


.legal-glow-right {
    right: -220px;
    bottom: -200px;

    background: #7C3AED;
}



/* =========================================================
   MAIN LEGAL SECTION
========================================================= */

.legal-section {
    min-height: auto;

    padding: 110px 8% 130px;

    background: #FFFFFF;
}


.legal-layout {
    max-width: 1250px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 270px minmax(0, 820px);

    justify-content: center;

    gap: 75px;

    align-items: start;
}



/* =========================================================
   LEFT TABLE OF CONTENTS
========================================================= */

.legal-toc {
    position: sticky;

    top: 120px;

    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 26px;

    border: 1px solid #E2E8F0;
    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            #FAFBFF 0%,
            #F8FAFC 100%
        );

    box-shadow:
        0 14px 35px rgba(15, 23, 42, 0.04);
}


.legal-toc-title {
    display: block;

    margin-bottom: 13px;

    color: #94A3B8;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
}


.legal-toc a {
    position: relative;

    display: block;

    padding: 9px 11px;

    border-radius: 9px;

    color: #64748B;

    text-decoration: none;

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

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


.legal-toc a:hover {
    color: #5266F5;

    background: #EEF2FF;

    transform: translateX(4px);
}



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

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


.legal-block {
    position: relative;

    min-height: auto;

    padding: 0 0 60px;

    margin-bottom: 60px;

    background: transparent;

    border-bottom: 1px solid #E8ECF3;

    scroll-margin-top: 120px;
}


.legal-block:last-of-type {
    margin-bottom: 0;
}


/* NUMBER */

.legal-number {
    width: 42px;
    height: 42px;

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

    margin-bottom: 20px;

    border-radius: 12px;

    background: #EEF2FF;

    color: #5266F5;

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

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


.legal-block:hover .legal-number {
    transform: rotate(-5deg);

    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #5266F5,
            #7C3AED
        );
}


/* HEADINGS */

.legal-block h2 {
    max-width: 700px;

    margin: 0 0 22px;

    color: #111827;

    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -1.4px;
}


.legal-block h3 {
    margin: 34px 0 14px;

    color: #111827;

    font-size: 22px;
    line-height: 1.35;
}


/* PARAGRAPHS */

.legal-block > p,
.legal-content > p {
    max-width: none;

    margin: 0 0 20px;

    color: #566278;

    font-size: 16px;
    line-height: 1.85;
}


/* LISTS */

.legal-block ul {
    margin: 24px 0 30px;

    padding-left: 0;

    list-style: none;
}


.legal-block li {
    position: relative;

    margin-bottom: 14px;

    padding-left: 28px;

    color: #566278;

    font-size: 16px;
    line-height: 1.7;
}


.legal-block li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 1px;

    width: 18px;
    height: 18px;

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

    border-radius: 50%;

    background: #EEF2FF;

    color: #5266F5;

    font-size: 10px;
    font-weight: 800;
}



/* =========================================================
   NOTE BOX
========================================================= */

.legal-note {
    margin-top: 35px;

    padding: 26px 28px;

    border: 1px solid rgba(82, 102, 245, 0.14);

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(82, 102, 245, 0.055),
            rgba(124, 58, 237, 0.035)
        );
}


.legal-note strong {
    display: block;

    margin-bottom: 9px;

    color: #5266F5;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}


.legal-note p {
    margin: 0;

    color: #566278;

    font-size: 15px;
    line-height: 1.75;
}



/* =========================================================
   CONTACT CARD
========================================================= */

.legal-contact-card {
    margin-top: 35px;

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

    gap: 14px;
}


.legal-contact-card > div {
    padding: 22px;

    border: 1px solid #E2E8F0;
    border-radius: 18px;

    background: #F8FAFC;

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


.legal-contact-card > div:hover {
    transform: translateY(-4px);

    background: #FFFFFF;

    border-color:
        rgba(82, 102, 245, 0.25);

    box-shadow:
        0 14px 35px rgba(15, 23, 42, 0.07);
}


.legal-contact-card span {
    display: block;

    margin-bottom: 8px;

    color: #94A3B8;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}


.legal-contact-card strong,
.legal-contact-card a {
    color: #111827;

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

    text-decoration: none;
}


.legal-contact-card a:hover {
    color: #5266F5;
}


.legal-contact-card p {
    margin: 0;

    color: #64748B;

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



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

.legal-cta {
    position: relative;

    margin-top: 75px;

    padding: 48px;

    overflow: hidden;

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(124, 58, 237, 0.28),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #111827,
            #171C35
        );

    box-shadow:
        0 25px 65px rgba(15, 23, 42, 0.14);
}


.legal-cta::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -100px;
    bottom: -120px;

    border-radius: 50%;

    background: #5266F5;

    filter: blur(90px);

    opacity: 0.20;

    pointer-events: none;
}


.legal-cta > span {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 13px;

    color: #A5B4FC;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}


.legal-cta h3 {
    position: relative;
    z-index: 2;

    max-width: 600px;

    margin: 0 0 14px;

    color: #FFFFFF;

    font-size: 34px;
    line-height: 1.2;
}


.legal-cta p {
    position: relative;
    z-index: 2;

    max-width: 580px;

    margin: 0 0 28px;

    color: #94A3B8;

    font-size: 15px;
    line-height: 1.7;
}


.legal-cta > a {
    position: relative;
    z-index: 2;

    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 14px 22px;

    border-radius: 12px;

    background:
        linear-gradient(
            90deg,
            #5266F5,
            #7C3AED
        );

    color: #FFFFFF;

    text-decoration: none;

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

    box-shadow:
        0 10px 28px rgba(82, 102, 245, 0.24);

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


.legal-cta > a span {
    transition: transform 0.3s ease;
}


.legal-cta > a:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 36px rgba(82, 102, 245, 0.34);
}


.legal-cta > a:hover span {
    transform: translateX(5px);
}



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

@media (max-width: 1000px) {

    .legal-hero {
        min-height: 500px;

        padding: 95px 6% 75px;
    }


    .legal-layout {
        grid-template-columns: 220px minmax(0, 1fr);

        gap: 45px;
    }


    .legal-section {
        padding:
            90px 6% 110px;
    }

}



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

@media (max-width: 780px) {

    .legal-layout {
        display: block;
    }


    .legal-toc {
        position: relative;

        top: auto;

        margin-bottom: 60px;

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

        gap: 7px;
    }


    .legal-toc-title {
        grid-column: 1 / -1;
    }


    .legal-hero h1 {
        letter-spacing: -3px;
    }

}



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

@media (max-width: 600px) {

    .legal-hero {
        min-height: 470px;

        padding:
            90px 20px 65px;
    }


    .legal-hero h1 {
        font-size: 48px;

        letter-spacing: -2px;
    }


    .legal-hero-inner > p {
        font-size: 16px;
        line-height: 1.7;
    }


    .legal-updated {
        margin-top: 24px;

        font-size: 11px;
    }


    .legal-section {
        padding:
            70px 20px 90px;
    }


    .legal-toc {
        grid-template-columns: 1fr;

        margin-bottom: 45px;

        padding: 22px;
    }


    .legal-block {
        padding-bottom: 45px;

        margin-bottom: 45px;
    }


    .legal-block h2 {
        font-size: 30px;

        letter-spacing: -1px;
    }


    .legal-block h3 {
        font-size: 21px;
    }


    .legal-block > p {
        font-size: 15.5px;
        line-height: 1.75;
    }


    .legal-block li {
        font-size: 15px;
    }


    .legal-note {
        padding: 22px;
    }


    .legal-contact-card {
        grid-template-columns: 1fr;
    }


    .legal-cta {
        margin-top: 55px;

        padding: 32px 25px;

        border-radius: 23px;
    }


    .legal-cta h3 {
        font-size: 28px;
    }

}



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

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

    .legal-updated > span {
        animation: none;
    }

}/* =========================================================
   PRIVACY POLICY - FINAL FIXES
========================================================= */


/* FIX: Policy ka "y" cut na ho */

.legal-hero h1 {
    line-height: 1.08;
    padding-bottom: 10px;
    overflow: visible;
}

.legal-hero h1 span {
    line-height: 1.08;
    padding-bottom: 8px;
}


/* =========================================================
   ON THIS PAGE - PILL DESIGN
========================================================= */

.legal-toc-title {
    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 18px;

    padding: 9px 15px;

    border-radius: 999px;

    border: 1px solid rgba(82, 102, 245, 0.18);

    background:
        linear-gradient(
            135deg,
            rgba(82, 102, 245, 0.07),
            rgba(124, 58, 237, 0.04)
        );

    color: #5266F5;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;

    box-shadow:
        0 5px 18px rgba(82, 102, 245, 0.05);
}


/* GREEN LIVE DOT */

.legal-toc-title::before {
    content: "";

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #65D36E;

    box-shadow:
        0 0 0 5px rgba(101, 211, 110, 0.09),
        0 0 10px rgba(101, 211, 110, 0.55);

    animation:
        tocGreenPulse 2s ease-in-out infinite;
}


@keyframes tocGreenPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(101, 211, 110, 0.08),
            0 0 8px rgba(101, 211, 110, 0.45);
    }

    50% {
        box-shadow:
            0 0 0 7px rgba(101, 211, 110, 0.04),
            0 0 13px rgba(101, 211, 110, 0.7);
    }

}/* =========================================================
   PRIVACY POLICY - ACTIVE TOC ITEM
========================================================= */

.legal-toc a {
    position: relative;
}

/* Active topic */
.legal-toc a.active {
    color: #5266F5;
    font-weight: 700;

    background: rgba(82, 102, 245, 0.07);

    transform: translateX(4px);
}

/* Purple indicator */
.legal-toc a.active::before {
    content: "";

    position: absolute;

    left: -8px;
    top: 50%;

    width: 3px;
    height: 18px;

    transform: translateY(-50%);

    border-radius: 10px;

    background: linear-gradient(
        180deg,
        #5266F5,
        #7C3AED
    );

    box-shadow:
        0 0 10px rgba(82, 102, 245, 0.22);
}/* =========================================================
   ALL BLOG ARTICLES - FINAL "ON THIS PAGE" DESIGN
========================================================= */


/* ---------------------------------------------------------
   ON THIS PAGE LABEL - ROUNDED PILL
--------------------------------------------------------- */

.article-toc > span {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 20px;

    padding: 9px 15px;

    border-radius: 999px;

    border: 1px solid rgba(82, 102, 245, 0.18);

    background:
        linear-gradient(
            135deg,
            rgba(82, 102, 245, 0.07),
            rgba(124, 58, 237, 0.04)
        );

    color: #5266F5;

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

    letter-spacing: 1.5px;

    box-shadow:
        0 5px 18px rgba(82, 102, 245, 0.05);
}


/* ---------------------------------------------------------
   GREEN LIVE DOT
--------------------------------------------------------- */

.article-toc > span::before {
    content: "";

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #65D36E;

    box-shadow:
        0 0 0 4px rgba(101, 211, 110, 0.08),
        0 0 9px rgba(101, 211, 110, 0.55);

    animation:
        articleTocGreenPulse 2s ease-in-out infinite;
}


@keyframes articleTocGreenPulse {

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

        box-shadow:
            0 0 0 4px rgba(101, 211, 110, 0.08),
            0 0 8px rgba(101, 211, 110, 0.45);
    }

    50% {
        transform: scale(1.15);

        box-shadow:
            0 0 0 7px rgba(101, 211, 110, 0.04),
            0 0 13px rgba(101, 211, 110, 0.70);
    }

}


/* =========================================================
   TOC LINKS
========================================================= */

.article-toc a {
    position: relative;

    display: block;

    width: 100%;

    margin-bottom: 5px;

    padding: 10px 14px;

    border-radius: 12px;

    color: #65718A;

    text-decoration: none;

    font-size: 13.5px;
    line-height: 1.4;

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


/* ---------------------------------------------------------
   REMOVE OLD ACTIVE UNDERLINE
--------------------------------------------------------- */

.article-toc a.active::after {
    display: none !important;
}


/* =========================================================
   ACTIVE SCROLL ITEM
========================================================= */

.article-toc a.active {
    color: #5266F5 !important;

    font-weight: 700;

    background:
        rgba(82, 102, 245, 0.07);

    transform: translateX(4px);
}


/* LEFT PURPLE ACTIVE BAR */

.article-toc a.active::before {
    content: "";

    position: absolute;

    left: -8px;
    top: 50%;

    width: 3px;
    height: 18px;

    transform: translateY(-50%);

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            #5266F5,
            #7C3AED
        );

    box-shadow:
        0 0 10px rgba(82, 102, 245, 0.22);
}


/* =========================================================
   NORMAL HOVER
========================================================= */

.article-toc a:not(.active):hover {
    color: #5266F5;

    background:
        rgba(82, 102, 245, 0.04);

    transform: translateX(4px);
}


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

@media (max-width: 768px) {

    .article-toc > span {
        margin-bottom: 16px;

        padding: 8px 13px;

        font-size: 9.5px;
    }

    .article-toc a {
        padding: 9px 12px;
    }

}


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

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

    .article-toc > span::before {
        animation: none;
    }

}/* TERMS / LEGAL INLINE LINK */

.legal-inline-link {
    display: inline-flex;
    align-items: center;

    margin-top: 8px;

    color: #5266F5;

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

    text-decoration: none;

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

.legal-inline-link:hover {
    color: #7C3AED;
    transform: translateX(5px);
}/* =========================================================
   SEO SERVICE PAGE
========================================================= */


/* =========================================================
   HERO
========================================================= */

.service-page-hero {
    position: relative;

    min-height: 760px;

    display: flex;
    align-items: center;

    padding: 105px 7% 95px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #F8FAFF 0%,
            #FFFFFF 100%
        );
}


.service-page-hero-inner {
    position: relative;
    z-index: 3;

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

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    gap: 85px;

    align-items: center;
}


/* =========================================================
   HERO LEFT
========================================================= */

.service-page-hero-content {
    max-width: 720px;
}


.service-page-hero-content .section-tag {
    margin-bottom: 25px;
}


.service-page-hero-content h1 {
    max-width: 760px;

    margin: 0 0 28px;

    color: #111827;

    font-size: clamp(56px, 5.5vw, 82px);
    line-height: 1.03;
    letter-spacing: -4px;
}


.service-page-hero-content h1 span {
    display: block;

    padding-bottom: 6px;

    background:
        linear-gradient(
            90deg,
            #5266F5,
            #7C3AED
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.service-page-hero-content > p {
    max-width: 650px;

    margin: 0 0 34px;

    color: #64748B;

    font-size: 18px;
    line-height: 1.8;
}


/* HERO BUTTONS */

.service-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 14px;
}


/* HERO POINTS */

.service-hero-points {
    display: flex;
    flex-wrap: wrap;

    gap: 11px;

    margin-top: 28px;
}


.service-hero-points span {
    padding: 8px 12px;

    border: 1px solid #E2E8F0;
    border-radius: 100px;

    background: #FFFFFF;

    color: #64748B;

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

    box-shadow:
        0 7px 18px rgba(15, 23, 42, 0.04);
}


/* =========================================================
   HERO BACKGROUND GLOWS
========================================================= */

.service-hero-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(150px);

    pointer-events: none;
}


.service-hero-glow-left {
    left: -250px;
    top: -180px;

    background: rgba(82, 102, 245, 0.16);
}


.service-hero-glow-right {
    right: -230px;
    bottom: -220px;

    background: rgba(124, 58, 237, 0.16);
}



/* =========================================================
   SEO HERO VISUAL
========================================================= */

.seo-service-visual {
    position: relative;

    min-height: 520px;

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


/* MAIN DASHBOARD */

.seo-service-dashboard {
    position: relative;

    width: min(100%, 470px);

    padding: 28px;

    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 28px;

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

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

    box-shadow:
        0 28px 80px rgba(15, 23, 42, 0.11);

    animation:
        seoDashboardFloat 5s ease-in-out infinite;
}


/* TOP */

.seo-dashboard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}


.seo-dashboard-top > div:first-child span {
    display: block;

    margin-bottom: 6px;

    color: #94A3B8;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}


.seo-dashboard-top > div:first-child strong {
    color: #111827;

    font-size: 19px;
}


/* LIVE STATUS */

.seo-live-status {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 7px 10px;

    border-radius: 100px;

    background: #EEF2FF;

    color: #5266F5;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.7px;
}


.seo-live-status i {
    width: 6px;
    height: 6px;

    display: block;

    border-radius: 50%;

    background: #22C55E;

    box-shadow:
        0 0 0 0 rgba(34, 197, 94, 0.35);

    animation:
        seoServiceLivePulse 1.8s ease-out infinite;
}


/* METRICS */

.seo-dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 14px;

    margin-top: 26px;
}


.seo-dashboard-metric {
    padding: 18px;

    border-radius: 18px;

    background: #F8FAFC;

    border: 1px solid #E8ECF3;
}


.seo-dashboard-metric > span {
    display: block;

    color: #94A3B8;

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


.seo-dashboard-metric strong {
    display: block;

    margin: 7px 0 5px;

    color: #111827;

    font-size: 30px;
    line-height: 1;
}


.seo-dashboard-metric small {
    color: #5266F5;

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


/* CHART */

.seo-service-chart {
    height: 150px;

    display: flex;
    align-items: flex-end;

    gap: 11px;

    margin-top: 28px;

    padding: 22px 18px 0;

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            rgba(238, 242, 255, 0.5),
            rgba(248, 250, 252, 0.25)
        );

    border: 1px solid #EEF2F7;
}


.seo-service-chart span {
    flex: 1;

    height: var(--seo-bar);

    min-height: 12px;

    border-radius: 8px 8px 3px 3px;

    background:
        linear-gradient(
            180deg,
            #5266F5,
            #7C3AED
        );

    transform-origin: bottom;

    animation:
        seoServiceBarPulse 3s ease-in-out infinite;
}


.seo-service-chart span:nth-child(2) {
    animation-delay: .15s;
}

.seo-service-chart span:nth-child(3) {
    animation-delay: .3s;
}

.seo-service-chart span:nth-child(4) {
    animation-delay: .45s;
}

.seo-service-chart span:nth-child(5) {
    animation-delay: .6s;
}

.seo-service-chart span:nth-child(6) {
    animation-delay: .75s;
}

.seo-service-chart span:nth-child(7) {
    animation-delay: .9s;
}


/* DASHBOARD LABELS */

.seo-dashboard-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 8px;

    margin-top: 15px;
}


.seo-dashboard-bottom span {
    color: #94A3B8;

    text-align: center;

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


/* FLOATING RANK CARD */

.seo-service-rank-card {
    position: absolute;

    top: 15px;
    right: -15px;

    width: 145px;

    padding: 17px;

    border-radius: 18px;

    background: #FFFFFF;

    border: 1px solid #E2E8F0;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.10);

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


.seo-service-rank-card > span {
    display: block;

    margin-bottom: 8px;

    color: #94A3B8;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
}


.seo-service-rank-card strong {
    display: block;

    color: #111827;

    font-size: 40px;
    line-height: 1;
}


.seo-service-rank-card small {
    display: block;

    margin-top: 8px;

    color: #5266F5;

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


/* FLOATING SEARCH */

.seo-service-search {
    position: absolute;

    left: -15px;
    bottom: 42px;

    min-width: 190px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px 15px;

    border-radius: 100px;

    background: #FFFFFF;

    border: 1px solid #E2E8F0;

    box-shadow:
        0 15px 38px rgba(15, 23, 42, 0.08);

    color: #64748B;

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

    animation:
        seoSearchSlide 4.4s ease-in-out infinite;
}


.seo-service-search > span {
    width: 28px;
    height: 28px;

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

    border-radius: 50%;

    background: #EEF2FF;

    color: #5266F5;

    font-size: 16px;
}



/* =========================================================
   CONTENT SECTION
========================================================= */

.service-content-section {
    padding-top: 105px;
}


.service-article-content > section {
    scroll-margin-top: 120px;
}


/* NUMBER LABEL */

.service-content-number {
    width: 43px;
    height: 43px;

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

    margin-bottom: 20px;

    border-radius: 12px;

    background: #EEF2FF;

    color: #5266F5;

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

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


.service-article-content > section:hover .service-content-number {
    transform:
        rotate(-5deg)
        scale(1.04);

    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #5266F5,
            #7C3AED
        );
}


/* SECTIONS */

.service-article-content > section {
    padding-bottom: 58px;

    margin-bottom: 58px;

    border-bottom: 1px solid #E8ECF3;
}


.service-article-content > section:last-of-type {
    margin-bottom: 0;
}



/* =========================================================
   SEO SERVICE DETAIL CARDS
========================================================= */

.service-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

    margin-top: 34px;
}


.service-detail-card {
    padding: 24px;

    border: 1px solid #E2E8F0;
    border-radius: 20px;

    background: #F8FAFC;

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


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

    background: #FFFFFF;

    border-color:
        rgba(82, 102, 245, 0.25);

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.08);
}


.service-detail-card > span {
    width: 36px;
    height: 36px;

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

    margin-bottom: 22px;

    border-radius: 10px;

    background: #EEF2FF;

    color: #5266F5;

    font-size: 10px;
    font-weight: 800;
}


.service-detail-card h3 {
    margin: 0 0 10px;

    font-size: 20px;
}


.service-detail-card p {
    margin: 0;

    color: #64748B;

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



/* =========================================================
   SEO PROCESS
========================================================= */

.seo-process-list {
    display: flex;
    flex-direction: column;

    gap: 13px;

    margin-top: 35px;
}


.seo-process-item {
    display: grid;
    grid-template-columns: 48px 1fr;

    gap: 18px;

    align-items: start;

    padding: 21px;

    border-radius: 18px;

    border: 1px solid #E2E8F0;

    background: #F8FAFC;

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


.seo-process-item:hover {
    transform: translateX(5px);

    background: #FFFFFF;

    border-color:
        rgba(82, 102, 245, 0.22);
}


.seo-process-item > span {
    width: 42px;
    height: 42px;

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

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #5266F5,
            #7C3AED
        );

    color: #FFFFFF;

    font-size: 10px;
    font-weight: 800;
}


.seo-process-item h3 {
    margin: 2px 0 6px;

    font-size: 19px;
}


.seo-process-item p {
    margin: 0;

    color: #64748B;

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



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

.seo-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 14px;

    margin-top: 35px;
}


.seo-benefits-grid > div {
    position: relative;

    padding: 24px;

    overflow: hidden;

    border: 1px solid #E2E8F0;
    border-radius: 20px;

    background: #FFFFFF;

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


.seo-benefits-grid > div::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -55px;
    top: -55px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #5266F5,
            #7C3AED
        );

    filter: blur(25px);

    opacity: 0;

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


.seo-benefits-grid > div:hover {
    transform: translateY(-5px);

    border-color:
        rgba(82, 102, 245, 0.25);

    box-shadow:
        0 17px 40px rgba(15, 23, 42, 0.07);
}


.seo-benefits-grid > div:hover::after {
    opacity: 0.09;

    transform: scale(1.3);
}


.seo-benefits-grid strong {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 10px;

    color: #111827;

    font-size: 18px;
}


.seo-benefits-grid p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #64748B;

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



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

.service-faq {
    display: flex;
    flex-direction: column;

    gap: 12px;

    margin-top: 35px;
}


.service-faq details {
    overflow: hidden;

    border: 1px solid #E2E8F0;
    border-radius: 18px;

    background: #F8FAFC;

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


.service-faq details[open] {
    background: #FFFFFF;

    border-color:
        rgba(82, 102, 245, 0.22);

    box-shadow:
        0 12px 35px rgba(15, 23, 42, 0.06);
}


.service-faq summary {
    position: relative;

    padding: 20px 55px 20px 22px;

    cursor: pointer;

    list-style: none;

    color: #111827;

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


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


.service-faq summary::after {
    content: "+";

    position: absolute;

    right: 22px;
    top: 50%;

    width: 28px;
    height: 28px;

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

    transform: translateY(-50%);

    border-radius: 50%;

    background: #EEF2FF;

    color: #5266F5;

    font-size: 17px;

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


.service-faq details[open] summary::after {
    content: "−";

    transform:
        translateY(-50%)
        rotate(180deg);

    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #5266F5,
            #7C3AED
        );
}


.service-faq details p {
    margin: 0;

    padding: 0 22px 22px;

    color: #64748B;

    font-size: 14.5px;
    line-height: 1.75;
}



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

.service-final-cta p {
    max-width: 580px;

    margin: 0 0 28px;

    color: #94A3B8;

    font-size: 15px;
    line-height: 1.7;
}



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

@keyframes seoDashboardFloat {

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

    50% {
        transform:
            translateY(-8px)
            rotate(.4deg);
    }

}


@keyframes seoRankFloat {

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

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

}


@keyframes seoSearchSlide {

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

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

}


@keyframes seoServiceBarPulse {

    0%,
    100% {
        transform: scaleY(.78);

        opacity: .72;
    }

    50% {
        transform: scaleY(1);

        opacity: 1;
    }

}


@keyframes seoServiceLivePulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(34, 197, 94, .4);
    }

    70% {
        box-shadow:
            0 0 0 7px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(34, 197, 94, 0);
    }

}



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

@media (max-width: 1050px) {

    .service-page-hero {
        min-height: auto;

        padding:
            90px 6% 95px;
    }


    .service-page-hero-inner {
        grid-template-columns: 1fr;

        gap: 65px;
    }


    .service-page-hero-content {
        max-width: 800px;
    }


    .seo-service-visual {
        width: 100%;
        max-width: 650px;

        margin: 0 auto;
    }

}



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

@media (max-width: 700px) {

    .service-page-hero {
        padding:
            75px 20px 80px;
    }


    .service-page-hero-inner {
        gap: 48px;
    }


    .service-page-hero-content h1 {
        font-size: 47px;

        letter-spacing: -2px;
    }


    .service-page-hero-content > p {
        font-size: 16px;
        line-height: 1.7;
    }


    .service-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }


    .service-hero-actions a {
        width: 100%;

        text-align: center;
    }


    .seo-service-visual {
        min-height: 420px;
    }


    .seo-service-dashboard {
        width: 100%;

        padding: 20px;

        border-radius: 22px;
    }


    .seo-dashboard-metrics {
        grid-template-columns: 1fr;
    }


    .seo-service-chart {
        height: 115px;

        gap: 7px;

        padding-left: 10px;
        padding-right: 10px;
    }


    .seo-service-rank-card {
        width: 115px;

        top: -22px;
        right: 3px;

        padding: 13px;
    }


    .seo-service-rank-card strong {
        font-size: 31px;
    }


    .seo-service-search {
        left: 0;
        bottom: -15px;

        min-width: 165px;
    }


    .service-detail-grid,
    .seo-benefits-grid {
        grid-template-columns: 1fr;
    }


    .service-detail-card,
    .seo-benefits-grid > div {
        padding: 21px;
    }


    .service-content-section {
        padding-top: 75px;
    }

}



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

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

    .seo-service-dashboard,
    .seo-service-rank-card,
    .seo-service-search,
    .seo-service-chart span,
    .seo-live-status i {
        animation: none;
    }

}/* =========================================================
   SEO SERVICE PAGE - HERO / CONTENT GAP FIX
========================================================= */

/* Hero ko unnecessary fixed height lene se roko */
.service-page-hero {
    min-height: auto !important;

    padding-top: 90px !important;
    padding-bottom: 80px !important;
}


/* SEO visual ko bhi unnecessary height na lene do */
.seo-service-visual {
    min-height: 480px;
}


/* Content ko hero ke closer lao */
.service-content-section {
    padding-top: 80px !important;
}


/* Article section ke default extra spacing ko control karo */
.service-content-section.article-section {
    margin-top: 0 !important;
}


/* First content section alignment */
.service-article-content > section:first-child {
    padding-top: 0;
    margin-top: 0;
}


/* ON THIS PAGE ko content ke top ke saath align rakho */
.service-content-section .article-toc {
    align-self: start;
}/* =========================================================
   SEO SERVICE PAGE - CONTENT SPACING FIX
========================================================= */

/* Har SEO section ki excessive height/gap remove */
.service-article-content > section {
    min-height: auto !important;
    height: auto !important;

    margin-top: 0 !important;
    margin-bottom: 45px !important;

    padding-top: 0 !important;
    padding-bottom: 55px !important;
}


/* Sections ke beech clean divider */
.service-article-content > section:not(:last-child) {
    border-bottom: 1px solid #E8ECF3;
}


/* Next section immediately divider ke baad start ho */
.service-article-content > section + section {
    margin-top: 0 !important;
    padding-top: 45px !important;
}


/* Number ke neeche controlled spacing */
.service-content-number {
    margin-bottom: 20px !important;
}


/* Heading spacing */
.service-article-content > section > h2 {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}


/* Paragraph spacing */
.service-article-content > section > p {
    margin-top: 0;
    margin-bottom: 20px;
}


/* ON THIS PAGE sticky hi rahe */
.service-content-section .article-toc {
    position: sticky;
    top: 120px;

    align-self: start;
}


/* Anchor click / scroll spy header ke neeche stop kare */
.service-article-content > section {
    scroll-margin-top: 125px;
}/* =========================================================
   PERFORMANCE MARKETING SERVICE PAGE
========================================================= */


/* =========================================================
   HERO VISUAL AREA
========================================================= */

.pm-service-visual {
    position: relative;

    min-height: 500px;

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


/* =========================================================
   MAIN DASHBOARD
========================================================= */

.pm-dashboard {
    position: relative;

    width: min(100%, 475px);

    padding: 28px;

    border-radius: 28px;

    border:
        1px solid rgba(226, 232, 240, 0.92);

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

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

    box-shadow:
        0 28px 80px rgba(15, 23, 42, 0.11);

    animation:
        pmDashboardFloat 5s ease-in-out infinite;
}


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

.pm-dashboard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}


.pm-dashboard-top > div:first-child > span {
    display: block;

    margin-bottom: 6px;

    color: #94A3B8;

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

    letter-spacing: 1.4px;
}


.pm-dashboard-top > div:first-child > strong {
    color: #111827;

    font-size: 19px;
}


/* =========================================================
   LIVE STATUS
========================================================= */

.pm-live-status {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    border-radius: 100px;

    background: #EEF2FF;

    color: #5266F5;

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

    letter-spacing: 0.7px;
}


.pm-live-status i {
    width: 6px;
    height: 6px;

    display: block;

    border-radius: 50%;

    background: #22C55E;

    animation:
        pmLivePulse 1.8s ease-out infinite;
}


/* =========================================================
   METRICS
========================================================= */

.pm-metric-grid {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);

    gap: 11px;

    margin-top: 27px;
}


.pm-metric {
    padding: 17px 14px;

    border-radius: 17px;

    background: #F8FAFC;

    border: 1px solid #E8ECF3;

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


.pm-metric:hover {
    transform: translateY(-4px);

    background: #FFFFFF;

    border-color:
        rgba(82, 102, 245, 0.22);
}


.pm-metric > span {
    display: block;

    color: #94A3B8;

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


.pm-metric strong {
    display: block;

    margin: 7px 0 5px;

    color: #111827;

    font-size: 25px;
    line-height: 1;
}


.pm-metric small {
    color: #5266F5;

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


/* =========================================================
   PERFORMANCE CHART
========================================================= */

.pm-chart {
    height: 155px;

    display: flex;
    align-items: flex-end;

    gap: 11px;

    margin-top: 28px;

    padding:
        22px 18px 0;

    border-radius: 20px;

    border:
        1px solid #EEF2F7;

    background:
        linear-gradient(
            180deg,
            rgba(238, 242, 255, 0.55),
            rgba(248, 250, 252, 0.25)
        );
}


.pm-chart-bar {
    flex: 1;

    height: var(--pm-height);

    min-height: 15px;

    border-radius:
        8px 8px 3px 3px;

    background:
        linear-gradient(
            180deg,
            #5266F5,
            #7C3AED
        );

    transform-origin: bottom;

    animation:
        pmChartGrowth 3.2s
        ease-in-out infinite;
}


.pm-chart-bar:nth-child(2) {
    animation-delay: .12s;
}

.pm-chart-bar:nth-child(3) {
    animation-delay: .24s;
}

.pm-chart-bar:nth-child(4) {
    animation-delay: .36s;
}

.pm-chart-bar:nth-child(5) {
    animation-delay: .48s;
}

.pm-chart-bar:nth-child(6) {
    animation-delay: .60s;
}

.pm-chart-bar:nth-child(7) {
    animation-delay: .72s;
}


/* CHART LABELS */

.pm-chart-labels {
    display: grid;
    grid-template-columns:
        repeat(7, 1fr);

    gap: 8px;

    margin-top: 10px;

    text-align: center;
}


.pm-chart-labels span {
    color: #94A3B8;

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


/* =========================================================
   FLOATING REVENUE CARD
========================================================= */

.pm-revenue-card {
    position: absolute;

    top: 15px;
    right: -18px;

    width: 150px;

    padding: 18px;

    border-radius: 18px;

    background: #FFFFFF;

    border:
        1px solid #E2E8F0;

    box-shadow:
        0 18px 45px
        rgba(15, 23, 42, 0.10);

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


.pm-revenue-card > span {
    display: block;

    margin-bottom: 8px;

    color: #94A3B8;

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

    letter-spacing: 1.1px;
}


.pm-revenue-card strong {
    display: block;

    color: #111827;

    font-size: 38px;
    line-height: 1;
}


.pm-revenue-card small {
    display: block;

    margin-top: 8px;

    color: #5266F5;

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


/* =========================================================
   FLOATING FUNNEL
========================================================= */

.pm-funnel-card {
    position: absolute;

    left: -18px;
    bottom: 28px;

    width: 165px;

    padding: 17px;

    border-radius: 18px;

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

    border:
        1px solid #E2E8F0;

    box-shadow:
        0 18px 45px
        rgba(15,23,42,.09);

    animation:
        pmFunnelFloat 4.5s
        ease-in-out infinite;
}


.pm-funnel-title {
    display: block;

    margin-bottom: 13px;

    color: #94A3B8;

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

    letter-spacing: 1px;
}


.pm-funnel-bars {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 4px;

    margin-bottom: 10px;
}


.pm-funnel-bars i {
    display: block;

    height: 6px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #5266F5,
            #7C3AED
        );
}


.pm-funnel-bars i:nth-child(1) {
    width: 85%;
}

.pm-funnel-bars i:nth-child(2) {
    width: 65%;
}

.pm-funnel-bars i:nth-child(3) {
    width: 45%;
}

.pm-funnel-bars i:nth-child(4) {
    width: 25%;
}


.pm-funnel-card strong {
    display: block;

    color: #111827;

    font-size: 23px;
}


.pm-funnel-card small {
    color: #64748B;

    font-size: 8px;
    font-weight: 600;
}


/* =========================================================
   PERFORMANCE HERO GLOW TWEAK
========================================================= */

.performance-service-hero
.service-hero-glow-left {
    background:
        rgba(82, 102, 245, 0.14);
}


.performance-service-hero
.service-hero-glow-right {
    background:
        rgba(124, 58, 237, 0.17);
}


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

@keyframes pmDashboardFloat {

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

    50% {
        transform:
            translateY(-8px)
            rotate(.35deg);
    }

}


@keyframes pmRevenueFloat {

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

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

}


@keyframes pmFunnelFloat {

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

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

}


@keyframes pmChartGrowth {

    0%,
    100% {
        transform:
            scaleY(.76);

        opacity: .72;
    }

    50% {
        transform:
            scaleY(1);

        opacity: 1;
    }

}


@keyframes pmLivePulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(34,197,94,.42);
    }

    70% {
        box-shadow:
            0 0 0 7px
            rgba(34,197,94,0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(34,197,94,0);
    }

}


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

@media (max-width: 1050px) {

    .pm-service-visual {
        width: 100%;
        max-width: 650px;

        margin: 0 auto;
    }

}


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

@media (max-width: 700px) {

    .pm-service-visual {
        min-height: 450px;
    }


    .pm-dashboard {
        width: 100%;

        padding: 20px;

        border-radius: 22px;
    }


    .pm-metric-grid {
        grid-template-columns:
            repeat(3, 1fr);

        gap: 7px;
    }


    .pm-metric {
        padding:
            14px 9px;
    }


    .pm-metric strong {
        font-size: 20px;
    }


    .pm-chart {
        height: 120px;

        gap: 6px;

        padding-left: 10px;
        padding-right: 10px;
    }


    .pm-revenue-card {
        top: -22px;
        right: 2px;

        width: 120px;

        padding: 13px;
    }


    .pm-revenue-card strong {
        font-size: 30px;
    }


    .pm-funnel-card {
        left: 0;
        bottom: -20px;

        width: 145px;
    }

}


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

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

    .pm-dashboard,
    .pm-revenue-card,
    .pm-funnel-card,
    .pm-chart-bar,
    .pm-live-status i {
        animation: none;
    }

}/* =========================================================
   GOOGLE ADS SERVICE PAGE
========================================================= */


/* =========================================================
   VISUAL AREA
========================================================= */

.ga-service-visual {
    position: relative;

    min-height: 510px;

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


/* =========================================================
   MAIN DASHBOARD
========================================================= */

.ga-dashboard {
    position: relative;

    width: min(100%, 475px);

    padding: 27px;

    border-radius: 28px;

    border:
        1px solid rgba(226, 232, 240, 0.92);

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

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

    box-shadow:
        0 28px 80px rgba(15, 23, 42, 0.11);

    animation:
        gaDashboardFloat 5s ease-in-out infinite;
}


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

.ga-dashboard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}


.ga-dashboard-top > div:first-child > span {
    display: block;

    margin-bottom: 6px;

    color: #94A3B8;

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

    letter-spacing: 1.3px;
}


.ga-dashboard-top > div:first-child > strong {
    color: #111827;

    font-size: 19px;
}


/* LIVE */

.ga-live-status {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    border-radius: 100px;

    background:
        rgba(34, 197, 94, 0.08);

    color: #16A34A;

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

    letter-spacing: 0.7px;
}


.ga-live-status i {
    width: 6px;
    height: 6px;

    display: block;

    border-radius: 50%;

    background: #22C55E;

    animation:
        gaLivePulse 1.8s ease-out infinite;
}


/* =========================================================
   METRICS
========================================================= */

.ga-metric-grid {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    margin-top: 25px;
}


.ga-metric {
    padding: 15px 13px;

    border-radius: 16px;

    border:
        1px solid #E8ECF3;

    background: #F8FAFC;

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


.ga-metric:hover {
    transform: translateY(-4px);

    background: #FFFFFF;

    border-color:
        rgba(82, 102, 245, 0.22);
}


.ga-metric > span {
    display: block;

    color: #94A3B8;

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


.ga-metric strong {
    display: block;

    margin: 7px 0 5px;

    color: #111827;

    font-size: 22px;
    line-height: 1;
}


.ga-metric small {
    color: #5266F5;

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


/* =========================================================
   SEARCH AD PREVIEW
========================================================= */

.ga-search-preview {
    position: relative;

    margin-top: 20px;

    padding: 18px;

    border-radius: 18px;

    border:
        1px solid #E2E8F0;

    background: #FFFFFF;

    box-shadow:
        0 9px 25px rgba(15, 23, 42, 0.04);
}


.ga-search-head {
    display: flex;
    align-items: center;

    gap: 10px;
}


.ga-search-mark {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

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

    border-radius: 50%;

    background: #EEF2FF;

    color: #2563EB;

    font-size: 16px;
    font-weight: 800;
}


.ga-search-head strong {
    display: block;

    color: #111827;

    font-size: 10px;
}


.ga-search-head small {
    display: block;

    margin-top: 2px;

    color: #64748B;

    font-size: 8px;
}


.ga-ad-label {
    display: inline-block;

    margin-top: 13px;

    padding: 3px 6px;

    border-radius: 5px;

    background:
        rgba(34, 197, 94, 0.1);

    color: #16A34A;

    font-size: 7px;
    font-weight: 800;
}


.ga-search-preview h3 {
    margin: 8px 0 6px;

    color: #1D4ED8;

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


.ga-search-preview p {
    margin: 0;

    color: #64748B;

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


/* =========================================================
   MINI PERFORMANCE CHART
========================================================= */

.ga-performance-chart {
    height: 92px;

    display: flex;
    align-items: flex-end;

    gap: 9px;

    margin-top: 19px;

    padding:
        14px 14px 0;

    border-radius: 16px;

    border:
        1px solid #EEF2F7;

    background:
        linear-gradient(
            180deg,
            rgba(238, 242, 255, 0.55),
            rgba(248, 250, 252, 0.2)
        );
}


.ga-performance-chart span {
    flex: 1;

    height: var(--ga-bar);

    min-height: 10px;

    border-radius:
        7px 7px 2px 2px;

    background:
        linear-gradient(
            180deg,
            #3B82F6,
            #7C3AED
        );

    transform-origin: bottom;

    animation:
        gaBarGrowth 3.2s ease-in-out infinite;
}


.ga-performance-chart span:nth-child(2) {
    animation-delay: .12s;
}

.ga-performance-chart span:nth-child(3) {
    animation-delay: .24s;
}

.ga-performance-chart span:nth-child(4) {
    animation-delay: .36s;
}

.ga-performance-chart span:nth-child(5) {
    animation-delay: .48s;
}

.ga-performance-chart span:nth-child(6) {
    animation-delay: .60s;
}

.ga-performance-chart span:nth-child(7) {
    animation-delay: .72s;
}


/* =========================================================
   QUALITY SCORE CARD
========================================================= */

.ga-quality-card {
    position: absolute;

    top: 22px;
    right: -18px;

    width: 135px;

    padding: 16px;

    border-radius: 18px;

    border:
        1px solid #E2E8F0;

    background: #FFFFFF;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.10);

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


.ga-quality-card > span {
    display: block;

    margin-bottom: 8px;

    color: #94A3B8;

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

    letter-spacing: 1px;
}


.ga-quality-card strong {
    display: block;

    color: #111827;

    font-size: 31px;
    line-height: 1;
}


.ga-quality-card small {
    display: block;

    margin-top: 7px;

    color: #22C55E;

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


/* =========================================================
   KEYWORD CARD
========================================================= */

.ga-keyword-card {
    position: absolute;

    left: -23px;
    bottom: 38px;

    width: 175px;

    padding: 15px;

    border-radius: 17px;

    border:
        1px solid #E2E8F0;

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

    box-shadow:
        0 17px 42px rgba(15, 23, 42, 0.09);

    animation:
        gaKeywordFloat 4.5s ease-in-out infinite;
}


.ga-keyword-card > span {
    display: block;

    margin-bottom: 7px;

    color: #94A3B8;

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

    letter-spacing: 1px;
}


.ga-keyword-card strong {
    display: block;

    color: #111827;

    font-size: 13px;
}


.ga-keyword-card small {
    display: inline-block;

    margin-top: 7px;

    padding: 4px 7px;

    border-radius: 100px;

    background: #EEF2FF;

    color: #5266F5;

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


/* =========================================================
   HERO GLOW
========================================================= */

.google-service-hero
.service-hero-glow-left {
    background:
        rgba(59, 130, 246, 0.14);
}


.google-service-hero
.service-hero-glow-right {
    background:
        rgba(124, 58, 237, 0.15);
}


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

@keyframes gaDashboardFloat {

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

    50% {
        transform:
            translateY(-8px)
            rotate(.35deg);
    }

}


@keyframes gaQualityFloat {

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

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

}


@keyframes gaKeywordFloat {

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

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

}


@keyframes gaBarGrowth {

    0%,
    100% {
        transform:
            scaleY(.76);

        opacity: .72;
    }

    50% {
        transform:
            scaleY(1);

        opacity: 1;
    }

}


@keyframes gaLivePulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(34, 197, 94, .42);
    }

    70% {
        box-shadow:
            0 0 0 7px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(34, 197, 94, 0);
    }

}


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

@media (max-width: 1050px) {

    .ga-service-visual {
        width: 100%;
        max-width: 650px;

        margin: 0 auto;
    }

}


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

@media (max-width: 700px) {

    .ga-service-visual {
        min-height: 470px;
    }


    .ga-dashboard {
        width: 100%;

        padding: 20px;

        border-radius: 22px;
    }


    .ga-metric-grid {
        grid-template-columns:
            repeat(3, 1fr);

        gap: 6px;
    }


    .ga-metric {
        padding:
            13px 8px;
    }


    .ga-metric strong {
        font-size: 17px;
    }


    .ga-search-preview {
        padding: 15px;
    }


    .ga-performance-chart {
        height: 75px;

        gap: 5px;

        padding-left: 8px;
        padding-right: 8px;
    }


    .ga-quality-card {
        width: 108px;

        top: -22px;
        right: 2px;

        padding: 12px;
    }


    .ga-quality-card strong {
        font-size: 25px;
    }


    .ga-keyword-card {
        left: 0;
        bottom: -20px;

        width: 150px;
    }

}


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

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

    .ga-dashboard,
    .ga-quality-card,
    .ga-keyword-card,
    .ga-performance-chart span,
    .ga-live-status i {
        animation: none;
    }

}/* =========================================================
   AFFYADS MEDIA
   REMAINING 7 SERVICE PAGES - FULL & FINAL CSS

   Applies To:
   1. Social Media Marketing
   2. Meta Ads
   3. Affiliate Marketing
   4. Lead Generation
   5. Media Buying
   6. App Development
   7. Web Development
========================================================= */


/* =========================================================
   SHARED HERO POLISH
========================================================= */

.shared-service-hero {
    position: relative;

    overflow: hidden;
}


/* subtle bottom transition */

.shared-service-hero::after {
    content: "";

    position: absolute;

    left: 8%;
    right: 8%;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(82, 102, 245, 0.14),
            transparent
        );
}



/* =========================================================
   SHARED VISUAL AREA
========================================================= */

.shared-service-visual {
    position: relative;

    min-height: 500px;

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

    isolation: isolate;
}


/* soft visual glow */

.shared-service-visual::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(82, 102, 245, 0.13),
            rgba(124, 58, 237, 0.05) 45%,
            transparent 72%
        );

    filter: blur(35px);

    z-index: -1;

    pointer-events: none;

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



/* =========================================================
   SHARED DASHBOARD
========================================================= */

.shared-service-dashboard {
    position: relative;

    width: min(100%, 470px);

    padding: 28px;

    overflow: hidden;

    border:
        1px solid rgba(226, 232, 240, 0.92);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.96),
            rgba(248,250,255,0.90)
        );

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

    box-shadow:
        0 28px 80px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.9);

    animation:
        sharedDashboardFloat 5.5s ease-in-out infinite;

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


.shared-service-dashboard:hover {
    border-color:
        rgba(82, 102, 245, 0.20);

    box-shadow:
        0 34px 90px rgba(15, 23, 42, 0.13),
        0 0 45px rgba(82, 102, 245, 0.05);
}


/* dashboard shine */

.shared-service-dashboard::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 450px;

    top: -150px;
    left: -240px;

    transform: rotate(24deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.65),
            transparent
        );

    pointer-events: none;

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



/* =========================================================
   DASHBOARD HEADER
========================================================= */

.shared-dashboard-head {
    position: relative;
    z-index: 2;

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

    gap: 15px;
}


.shared-dashboard-head > span {
    color: #94A3B8;

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

    letter-spacing: 1.35px;
}


/* ACTIVE / LIVE PILL */

.shared-dashboard-head > b {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 7px 10px;

    border-radius: 100px;

    background:
        rgba(82, 102, 245, 0.08);

    color: #5266F5;

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

    letter-spacing: 0.6px;
}


.shared-dashboard-head > b::before {
    content: "";

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #22C55E;

    box-shadow:
        0 0 0 4px rgba(34,197,94,0.08),
        0 0 9px rgba(34,197,94,0.45);

    animation:
        sharedGreenPulse 1.9s ease-in-out infinite;
}



/* =========================================================
   BIG PRIMARY METRIC
========================================================= */

.shared-big-metric {
    position: relative;
    z-index: 2;

    margin-top: 27px;

    padding: 22px;

    border-radius: 20px;

    border:
        1px solid #E8ECF3;

    background:
        linear-gradient(
            145deg,
            #F8FAFC,
            #FBFCFF
        );

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


.shared-big-metric:hover {
    transform: translateY(-3px);

    background: #FFFFFF;

    border-color:
        rgba(82, 102, 245, 0.18);
}


.shared-big-metric small {
    display: block;

    color: #94A3B8;

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

    letter-spacing: 1px;
}


.shared-big-metric strong {
    display: block;

    margin: 8px 0 6px;

    color: #111827;

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

    letter-spacing: -1.6px;
}


.shared-big-metric em {
    display: block;

    color: #5266F5;

    font-size: 9px;
    font-style: normal;
    font-weight: 700;
}



/* =========================================================
   SMALL METRIC CARDS
========================================================= */

.shared-stat-grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 10px;

    margin-top: 15px;
}


.shared-stat-grid > div {
    padding: 15px 12px;

    border:
        1px solid #E8ECF3;

    border-radius: 16px;

    background: #F8FAFC;

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


.shared-stat-grid > div:hover {
    transform: translateY(-4px);

    background: #FFFFFF;

    border-color:
        rgba(82, 102, 245, 0.18);

    box-shadow:
        0 10px 26px rgba(15,23,42,0.05);
}


.shared-stat-grid span {
    display: block;

    color: #94A3B8;

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


.shared-stat-grid strong {
    display: block;

    margin-top: 5px;

    color: #111827;

    font-size: 18px;
    line-height: 1.15;
}



/* =========================================================
   SOCIAL MEDIA BAR CHART
========================================================= */

.shared-bars {
    position: relative;
    z-index: 2;

    height: 125px;

    display: flex;
    align-items: flex-end;

    gap: 11px;

    margin-top: 22px;

    padding:
        18px 16px 0;

    border:
        1px solid #EEF2F7;

    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(238,242,255,0.52),
            rgba(248,250,252,0.18)
        );
}


.shared-bars i {
    flex: 1;

    height: var(--h);

    min-height: 10px;

    border-radius:
        7px 7px 2px 2px;

    background:
        linear-gradient(
            180deg,
            #5266F5,
            #7C3AED
        );

    transform-origin: bottom;

    box-shadow:
        0 5px 14px rgba(82,102,245,0.10);

    animation:
        sharedBarPulse 3s ease-in-out infinite;
}


.shared-bars i:nth-child(2) {
    animation-delay: 0.15s;
}

.shared-bars i:nth-child(3) {
    animation-delay: 0.30s;
}

.shared-bars i:nth-child(4) {
    animation-delay: 0.45s;
}

.shared-bars i:nth-child(5) {
    animation-delay: 0.60s;
}



/* =========================================================
   META ADS RING
========================================================= */

.shared-ring {
    position: relative;

    width: 150px;
    height: 150px;

    display: grid;
    place-items: center;

    margin:
        27px auto 0;

    border-radius: 50%;

    background:
        conic-gradient(
            #5266F5 0 50%,
            #7C3AED 50% 68%,
            #EEF2FF 68% 100%
        );

    box-shadow:
        0 15px 35px rgba(82,102,245,0.08);

    animation:
        sharedRingFloat 4.5s ease-in-out infinite;
}


.shared-ring::before {
    content: "";

    position: absolute;

    inset: 15px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F8FAFF
        );

    box-shadow:
        inset 0 0 0 1px #EEF2F7;
}


.shared-ring span {
    position: relative;
    z-index: 2;

    color: #111827;

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

    letter-spacing: -1px;
}



/* =========================================================
   AFFILIATE NETWORK VISUAL
========================================================= */

.shared-network {
    position: relative;

    width: 235px;
    height: 185px;

    margin:
        25px auto 5px;
}


/* center */

.shared-network > span {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #5266F5,
            #7C3AED
        );

    color: #FFFFFF;

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

    box-shadow:
        0 15px 38px rgba(82,102,245,0.25);

    z-index: 3;

    animation:
        sharedNetworkCore 3.5s ease-in-out infinite;
}


/* connector ring */

.shared-network::before {
    content: "";

    position: absolute;

    width: 145px;
    height: 145px;

    left: 50%;
    top: 50%;

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

    border:
        1px dashed rgba(82,102,245,0.23);

    border-radius: 50%;

    animation:
        sharedNetworkSpin 18s linear infinite;
}


/* partners */

.shared-network i {
    position: absolute;

    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(82,102,245,0.08);

    border-radius: 50%;

    background: #EEF2FF;

    color: #5266F5;

    font-size: 9px;
    font-style: normal;
    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(15,23,42,0.05);

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


.shared-network i:nth-of-type(1) {
    left: 10px;
    top: 17px;
}


.shared-network i:nth-of-type(2) {
    right: 10px;
    top: 17px;

    animation-delay: .5s;
}


.shared-network i:nth-of-type(3) {
    left: 15px;
    bottom: 14px;

    animation-delay: 1s;
}


.shared-network i:nth-of-type(4) {
    right: 15px;
    bottom: 14px;

    animation-delay: 1.5s;
}



/* =========================================================
   LEAD GENERATION FUNNEL
========================================================= */

.shared-funnel {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 8px;

    margin-top: 27px;
}


.shared-funnel i {
    display: block;

    height: 12px;

    border-radius: 100px;

    background:
        linear-gradient(
            90deg,
            #5266F5,
            #7C3AED
        );

    box-shadow:
        0 6px 16px rgba(82,102,245,0.10);

    animation:
        sharedFunnelPulse 3s ease-in-out infinite;
}


.shared-funnel i:nth-child(1) {
    width: 88%;
}


.shared-funnel i:nth-child(2) {
    width: 68%;

    animation-delay: .15s;
}


.shared-funnel i:nth-child(3) {
    width: 48%;

    animation-delay: .30s;
}


.shared-funnel i:nth-child(4) {
    width: 28%;

    animation-delay: .45s;
}



/* =========================================================
   MEDIA BUYING CHANNEL BARS
========================================================= */

.shared-channel-list {
    display: flex;
    flex-direction: column;

    gap: 15px;

    margin-top: 27px;
}


.shared-channel-list > div {
    display: grid;

    grid-template-columns:
        72px 1fr;

    align-items: center;

    gap: 12px;
}


.shared-channel-list span {
    color: #64748B;

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


.shared-channel-list i {
    position: relative;

    display: block;

    width: var(--w);
    height: 10px;

    border-radius: 100px;

    background:
        linear-gradient(
            90deg,
            #5266F5,
            #7C3AED
        );

    box-shadow:
        0 4px 12px rgba(82,102,245,0.10);

    transform-origin: left;

    animation:
        sharedMediaBar 3.5s ease-in-out infinite;
}


.shared-channel-list i::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    top: 50%;
    right: 4px;

    transform:
        translateY(-50%);

    border-radius: 50%;

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



/* =========================================================
   FLOATING DATA CARDS
========================================================= */

.shared-float-card {
    position: absolute;
    z-index: 8;

    min-width: 125px;

    padding:
        15px 17px;

    border:
        1px solid rgba(226,232,240,0.92);

    border-radius: 17px;

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

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

    box-shadow:
        0 18px 45px rgba(15,23,42,0.10);

    animation:
        sharedFloat 4.2s ease-in-out infinite;
}


.shared-float-card strong {
    display: block;

    color: #111827;

    font-size: 20px;
    line-height: 1.1;
}


.shared-float-card span {
    display: block;

    margin-top: 5px;

    color: #64748B;

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


/* positions */

.float-a {
    top: 24px;
    right: -10px;
}


.float-b {
    left: -12px;
    bottom: 30px;

    animation-delay: .8s;
}



/* =========================================================
   APP DEVELOPMENT PHONE
========================================================= */

.shared-phone {
    position: relative;

    width: 265px;
    height: 500px;

    padding: 12px;

    overflow: hidden;

    border-radius: 42px;

    background:
        linear-gradient(
            145deg,
            #111827,
            #222A3B
        );

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

    box-shadow:
        0 30px 75px rgba(15,23,42,0.20);

    animation:
        sharedPhoneFloat 5s ease-in-out infinite;
}


/* side glow */

.shared-phone::after {
    content: "";

    position: absolute;

    width: 80px;
    height: 300px;

    right: -50px;
    top: 80px;

    transform: rotate(-12deg);

    background:
        rgba(124,58,237,0.30);

    filter: blur(40px);

    pointer-events: none;
}


.shared-phone-notch {
    position: absolute;

    top: 13px;
    left: 50%;

    width: 90px;
    height: 22px;

    transform:
        translateX(-50%);

    border-radius:
        0 0 14px 14px;

    background: #111827;

    z-index: 4;
}


.shared-phone-screen {
    position: relative;

    width: 100%;
    height: 100%;

    padding:
        48px 18px 18px;

    overflow: hidden;

    border-radius: 32px;

    background:
        linear-gradient(
            180deg,
            #F8FAFF,
            #FFFFFF
        );
}


/* header line */

.phone-line {
    width: 65%;
    height: 12px;

    border-radius: 100px;

    background:
        linear-gradient(
            90deg,
            #5266F5,
            #7C3AED
        );

    animation:
        phoneLinePulse 3s ease-in-out infinite;
}


/* app hero */

.phone-hero {
    position: relative;

    height: 130px;

    margin-top: 22px;

    overflow: hidden;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(82,102,245,0.14),
            rgba(124,58,237,0.14)
        );
}


.phone-hero::before {
    content: "";

    position: absolute;

    width: 115px;
    height: 115px;

    right: -25px;
    bottom: -35px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #5266F5,
            #7C3AED
        );

    opacity: .12;
}


.phone-hero::after {
    content: "";

    position: absolute;

    width: 75px;
    height: 8px;

    left: 20px;
    top: 30px;

    border-radius: 20px;

    background: #5266F5;

    box-shadow:
        0 20px 0 rgba(82,102,245,0.20),
        0 40px 0 rgba(82,102,245,0.10);
}


.phone-grid {
    display: grid;

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

    gap: 12px;

    margin-top: 18px;
}


.phone-grid i {
    height: 92px;

    border:
        1px solid rgba(82,102,245,0.05);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #EEF2FF,
            #F8FAFF
        );

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


.phone-grid i:hover {
    transform:
        translateY(-4px);

    background: #E7ECFF;
}



/* =========================================================
   WEB DEVELOPMENT BROWSER
========================================================= */

.shared-browser {
    position: relative;

    width: min(100%, 500px);

    overflow: hidden;

    border:
        1px solid #E2E8F0;

    border-radius: 25px;

    background: #FFFFFF;

    box-shadow:
        0 28px 75px rgba(15,23,42,0.13);

    animation:
        sharedBrowserFloat 5s ease-in-out infinite;
}


/* browser shine */

.shared-browser::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 500px;

    left: -200px;
    top: -100px;

    transform: rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    animation:
        browserShine 8s ease-in-out infinite;

    pointer-events: none;
}


.browser-top {
    height: 48px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        0 18px;

    background: #F8FAFC;

    border-bottom:
        1px solid #E8ECF3;
}


.browser-top i {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #CBD5E1;
}


.browser-top i:first-child {
    background: #F87171;
}


.browser-top i:nth-child(2) {
    background: #FBBF24;
}


.browser-top i:nth-child(3) {
    background: #4ADE80;
}


.browser-top span {
    margin-left: 10px;

    padding:
        7px 14px;

    border-radius: 20px;

    background: #FFFFFF;

    border:
        1px solid #EEF2F7;

    color: #94A3B8;

    font-size: 8px;
    font-weight: 600;
}


.browser-body {
    display: grid;

    grid-template-columns:
        72px 1fr;

    min-height: 310px;
}


.browser-body aside {
    padding:
        20px 14px;

    background: #F8FAFC;

    border-right:
        1px solid #EEF2F7;
}


.browser-body aside i {
    display: block;

    height: 9px;

    margin-bottom: 13px;

    border-radius: 10px;

    background: #CBD5E1;
}


.browser-body aside i:first-child {
    background: #5266F5;
}


.browser-body main {
    padding: 24px;
}


.browser-title {
    width: 55%;
    height: 16px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #5266F5,
            #7C3AED
        );
}


.browser-cards {
    display: grid;

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

    gap: 10px;

    margin-top: 25px;
}


.browser-cards i {
    height: 92px;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #EEF2FF,
            #F8FAFC
        );

    border:
        1px solid rgba(82,102,245,0.05);

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


.browser-cards i:nth-child(2) {
    animation-delay: .4s;
}


.browser-cards i:nth-child(3) {
    animation-delay: .8s;
}


.browser-lines {
    margin-top: 25px;
}


.browser-lines span {
    display: block;

    height: 8px;

    margin-bottom: 10px;

    border-radius: 10px;

    background: #E2E8F0;
}


.browser-lines span:nth-child(1) {
    width: 90%;
}


.browser-lines span:nth-child(2) {
    width: 75%;
}


.browser-lines span:nth-child(3) {
    width: 60%;
}



/* =========================================================
   COMMON SERVICE CONTENT SAFETY
========================================================= */

.shared-service-hero +
.service-content-section {
    margin-top: 0 !important;
}


/* same spacing as finalized SEO page */

.shared-service-hero
~ .service-content-section
.service-article-content > section {
    min-height: auto !important;

    height: auto !important;

    margin:
        0 0 45px !important;

    padding:
        0 0 55px !important;

    border-bottom:
        1px solid #E8ECF3;

    scroll-margin-top: 125px;
}


.shared-service-hero
~ .service-content-section
.service-article-content > section + section {
    padding-top:
        45px !important;
}


/* Sticky TOC */

.shared-service-hero
~ .service-content-section
.article-toc {
    position: sticky;

    top: 120px;

    align-self: start;
}



/* =========================================================
   SERVICE CONTENT CARDS - EXTRA POLISH
========================================================= */

.shared-service-hero
~ .service-content-section
.service-detail-card {
    position: relative;

    overflow: hidden;
}


.shared-service-hero
~ .service-content-section
.service-detail-card::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #5266F5,
            #7C3AED
        );

    filter: blur(30px);

    opacity: 0;

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


.shared-service-hero
~ .service-content-section
.service-detail-card:hover::after {
    opacity: .08;

    transform:
        scale(1.4);
}



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

@keyframes sharedDashboardFloat {

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

    50% {
        transform:
            translateY(-8px)
            rotate(.25deg);
    }

}


@keyframes sharedDashboardShine {

    0%,
    65% {
        left: -240px;
    }

    100% {
        left: 650px;
    }

}


@keyframes sharedVisualGlow {

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

        opacity: .8;
    }

    50% {
        transform:
            scale(1.08)
            translateY(-8px);

        opacity: 1;
    }

}


@keyframes sharedGreenPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(34,197,94,.07),
            0 0 7px rgba(34,197,94,.40);
    }

    50% {
        box-shadow:
            0 0 0 7px rgba(34,197,94,.03),
            0 0 13px rgba(34,197,94,.65);
    }

}


@keyframes sharedBarPulse {

    0%,
    100% {
        transform:
            scaleY(.78);

        opacity: .72;
    }

    50% {
        transform:
            scaleY(1);

        opacity: 1;
    }

}


@keyframes sharedRingFloat {

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

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

}


@keyframes sharedNetworkCore {

    0%,
    100% {
        box-shadow:
            0 15px 38px rgba(82,102,245,.22);
    }

    50% {
        box-shadow:
            0 18px 45px rgba(82,102,245,.36);
    }

}


@keyframes sharedNetworkSpin {

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

}


@keyframes sharedPartnerFloat {

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

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

}


@keyframes sharedFunnelPulse {

    0%,
    100% {
        transform:
            scaleX(.92);

        opacity: .78;
    }

    50% {
        transform:
            scaleX(1);

        opacity: 1;
    }

}


@keyframes sharedMediaBar {

    0%,
    100% {
        transform:
            scaleX(.86);

        opacity: .75;
    }

    50% {
        transform:
            scaleX(1);

        opacity: 1;
    }

}


@keyframes sharedFloat {

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

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

}


@keyframes sharedPhoneFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-9px)
            rotate(1deg);
    }

}


@keyframes phoneLinePulse {

    0%,
    100% {
        width: 65%;
    }

    50% {
        width: 78%;
    }

}


@keyframes sharedBrowserFloat {

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

    50% {
        transform:
            translateY(-8px)
            rotate(.3deg);
    }

}


@keyframes browserShine {

    0%,
    65% {
        left: -200px;
    }

    100% {
        left: 700px;
    }

}


@keyframes browserCardPulse {

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

        background:
            #EEF2FF;
    }

    50% {
        transform:
            translateY(-4px);

        background:
            #E6EAFF;
    }

}



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

@media (max-width: 1050px) {

    .shared-service-visual {
        width: 100%;
        max-width: 650px;

        margin: 0 auto;
    }


    .shared-service-dashboard {
        max-width: 500px;
    }


    .shared-browser {
        max-width: 520px;
    }

}



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

@media (max-width: 700px) {

    .shared-service-visual {
        min-height: 440px;

        padding-top: 15px;
    }


    /* DASHBOARD */

    .shared-service-dashboard {
        width: 100%;

        padding: 20px;

        border-radius: 22px;
    }


    .shared-big-metric {
        padding: 18px;
    }


    .shared-big-metric strong {
        font-size: 34px;
    }


    .shared-stat-grid {
        gap: 6px;
    }


    .shared-stat-grid > div {
        padding:
            12px 8px;
    }


    .shared-stat-grid strong {
        font-size: 15px;
    }


    /* SOCIAL BARS */

    .shared-bars {
        height: 105px;

        gap: 7px;

        padding-left: 10px;
        padding-right: 10px;
    }


    /* META */

    .shared-ring {
        width: 125px;
        height: 125px;
    }


    .shared-ring span {
        font-size: 23px;
    }


    /* AFFILIATE */

    .shared-network {
        transform:
            scale(.90);

        margin-top: 15px;
    }


    /* MEDIA */

    .shared-channel-list > div {
        grid-template-columns:
            60px 1fr;
    }


    /* FLOAT CARDS */

    .shared-float-card {
        min-width: 105px;

        padding:
            12px 14px;
    }


    .shared-float-card strong {
        font-size: 17px;
    }


    .float-a {
        top: -5px;
        right: 0;
    }


    .float-b {
        left: 0;
        bottom: 5px;
    }


    /* APP */

    .shared-phone {
        width: 225px;
        height: 430px;

        border-radius: 36px;
    }


    .shared-phone-screen {
        border-radius: 27px;
    }


    .phone-hero {
        height: 105px;
    }


    .phone-grid i {
        height: 75px;
    }


    /* WEB */

    .shared-browser {
        width: 100%;

        border-radius: 20px;
    }


    .browser-body {
        grid-template-columns:
            55px 1fr;

        min-height: 260px;
    }


    .browser-body aside {
        padding:
            18px 10px;
    }


    .browser-body main {
        padding: 18px;
    }


    .browser-cards {
        gap: 7px;
    }


    .browser-cards i {
        height: 72px;
    }


    /* CONTENT */

    .shared-service-hero
    ~ .service-content-section
    .service-article-content > section {
        margin-bottom:
            35px !important;

        padding-bottom:
            45px !important;
    }


    .shared-service-hero
    ~ .service-content-section
    .service-article-content > section + section {
        padding-top:
            35px !important;
    }

}



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

@media (max-width: 480px) {

    .shared-service-visual {
        min-height: 410px;
    }


    .shared-dashboard-head {
        align-items: flex-start;
    }


    .shared-dashboard-head > span {
        max-width: 150px;
    }


    .shared-big-metric strong {
        font-size: 31px;
    }


    .shared-stat-grid strong {
        font-size: 14px;
    }


    .shared-phone {
        width: 205px;
        height: 395px;
    }


    .browser-top span {
        max-width: 140px;

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

}



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

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

    .shared-service-dashboard,
    .shared-service-dashboard::before,
    .shared-service-visual::before,
    .shared-dashboard-head > b::before,
    .shared-bars i,
    .shared-ring,
    .shared-network::before,
    .shared-network > span,
    .shared-network i,
    .shared-funnel i,
    .shared-channel-list i,
    .shared-float-card,
    .shared-phone,
    .phone-line,
    .shared-browser,
    .shared-browser::after,
    .browser-cards i {
        animation: none !important;
    }

}/* =========================================
   FOOTER DEVELOPER CREDIT
========================================= */

.footer-credit {
    margin-left: 12px;
    padding-left: 12px;

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

    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

@media (max-width: 700px) {

    .footer-credit {
        display: block;

        margin-left: 0;
        margin-top: 6px;

        padding-left: 0;

        border-left: none;
    }
}/* =========================================================
   AFFYADS MEDIA
   DISCLAIMER PAGE - FINAL CSS
========================================================= */


/* =========================================================
   DISCLAIMER HERO
========================================================= */

.privacy-hero {
    position: relative;
    min-height: 540px;

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

    padding: 105px 8% 90px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(37, 99, 235, 0.09),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 15%,
            rgba(124, 58, 237, 0.09),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #F8FAFF 0%,
            #FFFFFF 100%
        );

    text-align: center;
}


/* CONTENT */

.privacy-hero-content {
    position: relative;
    z-index: 3;

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

    margin: 0 auto;
}


/* TAG */

.privacy-tag {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    width: fit-content;

    margin-bottom: 26px;

    padding: 10px 18px;

    border:
        1px solid rgba(82, 102, 245, 0.18);

    border-radius: 999px;

    background:
        rgba(82, 102, 245, 0.055);

    color: #5266F5;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
}


/* GREEN LIVE DOT */

.privacy-tag::before {
    content: "";

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #22C55E;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.08),
        0 0 10px rgba(34, 197, 94, 0.55);

    animation:
        disclaimerTagPulse 2s ease-in-out infinite;
}


@keyframes disclaimerTagPulse {

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

        box-shadow:
            0 0 0 4px rgba(34, 197, 94, 0.08),
            0 0 9px rgba(34, 197, 94, 0.5);
    }

    50% {
        transform: scale(1.18);

        box-shadow:
            0 0 0 7px rgba(34, 197, 94, 0.035),
            0 0 14px rgba(34, 197, 94, 0.75);
    }

}


/* HERO HEADING */

.privacy-hero h1 {
    max-width: 900px;

    margin: 0 auto 27px;

    color: #111827;

    font-size: clamp(56px, 6vw, 88px);
    font-weight: 800;

    line-height: 1.01;

    letter-spacing: -4px;
}


.privacy-hero h1 span {
    display: block;

    margin-top: 5px;

    background:
        linear-gradient(
            90deg,
            #5266F5,
            #7C3AED
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* HERO DESCRIPTION */

.privacy-hero-content > p {
    max-width: 730px;

    margin: 0 auto;

    color: #64748B;

    font-size: 18px;
    line-height: 1.8;
}


/* LAST UPDATED */

.privacy-updated {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    width: fit-content;

    margin: 30px auto 0;

    padding: 10px 16px;

    border: 1px solid #E2E8F0;
    border-radius: 999px;

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

    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.05);

    color: #64748B;

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


.privacy-updated > span {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #22C55E;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.08),
        0 0 10px rgba(34, 197, 94, 0.55);
}



/* =========================================================
   HERO GLOWS
========================================================= */

.privacy-hero-glow {
    position: absolute;

    width: 440px;
    height: 440px;

    border-radius: 50%;

    filter: blur(130px);

    pointer-events: none;

    opacity: 0.12;
}


.privacy-glow-left {
    top: -190px;
    left: -210px;

    background: #5266F5;

    animation:
        disclaimerGlowLeft 10s ease-in-out infinite;
}


.privacy-glow-right {
    right: -220px;
    bottom: -210px;

    background: #7C3AED;

    animation:
        disclaimerGlowRight 12s ease-in-out infinite;
}


@keyframes disclaimerGlowLeft {

    50% {
        transform: translate(60px, 40px);
    }

}


@keyframes disclaimerGlowRight {

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

}



/* =========================================================
   DISCLAIMER CONTENT SECTION
========================================================= */

.privacy-content-section {
    position: relative;

    min-height: auto;

    padding: 105px 8% 125px;

    background: #FFFFFF;
}



/* =========================================================
   DISCLAIMER LAYOUT
========================================================= */

.privacy-layout {
    width: 100%;
    max-width: 1240px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        275px minmax(0, 820px);

    justify-content: center;

    align-items: start;

    gap: 75px;
}



/* =========================================================
   LEFT - ON THIS PAGE
========================================================= */

.privacy-toc {
    position: sticky;

    top: 110px;

    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 26px;

    border: 1px solid #E2E8F0;
    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            #FBFCFF 0%,
            #F8FAFC 100%
        );

    box-shadow:
        0 16px 40px rgba(15, 23, 42, 0.045);
}


/* TOC TITLE */

.privacy-toc-title {
    display: block;

    margin-bottom: 14px;

    color: #94A3B8;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
}


/* TOC LINKS */

.privacy-toc a {
    position: relative;

    display: block;

    width: 100%;

    padding: 9px 11px;

    border-radius: 9px;

    color: #64748B;

    text-decoration: none;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.4;

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


.privacy-toc a:hover {
    color: #5266F5;

    background: #EEF2FF;

    transform: translateX(4px);
}


/* ACTIVE */

.privacy-toc a.active {
    color: #5266F5;

    font-weight: 700;

    background:
        rgba(82, 102, 245, 0.08);
}


.privacy-toc a.active::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 3px;
    height: 18px;

    transform: translateY(-50%);

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            #5266F5,
            #7C3AED
        );
}



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

.privacy-content {
    min-width: 0;
    width: 100%;
}


/* INDIVIDUAL SECTIONS */

.privacy-content > section {
    min-height: auto;

    margin: 0 0 58px;

    padding: 0 0 58px;

    background: transparent;

    border-bottom:
        1px solid #E8ECF3;

    scroll-margin-top: 110px;
}


.privacy-content > section:last-child {
    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: none;
}



/* =========================================================
   SECTION NUMBER
========================================================= */

.privacy-number {
    width: 43px;
    height: 43px;

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

    margin-bottom: 20px;

    border-radius: 12px;

    background: #EEF2FF;

    color: #5266F5;

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

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


.privacy-content > section:hover .privacy-number {
    transform:
        rotate(-5deg)
        scale(1.04);

    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #5266F5,
            #7C3AED
        );
}



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

.privacy-content h2 {
    max-width: 760px;

    margin: 0 0 22px;

    color: #111827;

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

    line-height: 1.2;

    letter-spacing: -1.4px;
}


.privacy-content h3 {
    margin: 34px 0 14px;

    color: #111827;

    font-size: 22px;

    line-height: 1.35;
}


.privacy-content p {
    max-width: none;

    margin: 0 0 20px;

    color: #566278;

    font-size: 16px;

    line-height: 1.85;
}


.privacy-content strong {
    color: #111827;
}



/* =========================================================
   LISTS
========================================================= */

.privacy-content ul {
    margin: 25px 0 30px;

    padding: 0;

    list-style: none;
}


.privacy-content li {
    position: relative;

    margin-bottom: 14px;

    padding-left: 30px;

    color: #566278;

    font-size: 16px;

    line-height: 1.7;
}


.privacy-content li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 2px;

    width: 18px;
    height: 18px;

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

    border-radius: 50%;

    background: #EEF2FF;

    color: #5266F5;

    font-size: 10px;
    font-weight: 800;
}



/* =========================================================
   IMPORTANT NOTE BOX
========================================================= */

.privacy-note {
    position: relative;

    margin-top: 32px;

    padding: 25px 27px 25px 30px;

    overflow: hidden;

    border:
        1px solid rgba(82, 102, 245, 0.16);

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            rgba(82, 102, 245, 0.055),
            rgba(124, 58, 237, 0.035)
        );
}


.privacy-note::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    background:
        linear-gradient(
            180deg,
            #5266F5,
            #7C3AED
        );
}


.privacy-note strong {
    display: block;

    margin-bottom: 8px;

    color: #5266F5;

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

    letter-spacing: 0.4px;
}


.privacy-note p {
    margin: 0;

    color: #566278;

    font-size: 15px;

    line-height: 1.75;
}



/* =========================================================
   CONTACT CARD
========================================================= */

.privacy-contact-card {
    margin-top: 34px;

    display: grid;

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

    gap: 15px;
}


.privacy-contact-card > div {
    position: relative;

    padding: 22px;

    overflow: hidden;

    border: 1px solid #E2E8F0;
    border-radius: 18px;

    background: #F8FAFC;

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


.privacy-contact-card > div:hover {
    transform: translateY(-4px);

    border-color:
        rgba(82, 102, 245, 0.25);

    background: #FFFFFF;

    box-shadow:
        0 15px 38px rgba(15, 23, 42, 0.075);
}


/* ADDRESS FULL WIDTH */

.privacy-contact-card > div:last-child {
    grid-column: 1 / -1;
}


/* LABEL */

.privacy-contact-card span {
    display: block;

    margin-bottom: 9px;

    color: #94A3B8;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


/* LINKS */

.privacy-contact-card a {
    color: #111827;

    text-decoration: none;

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

    transition: color 0.3s ease;
}


.privacy-contact-card a:hover {
    color: #5266F5;
}


/* ADDRESS */

.privacy-contact-card p {
    margin: 0;

    color: #64748B;

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



/* =========================================================
   SMOOTH SCROLL TARGET
========================================================= */

#general-information,
#no-guarantees,
#marketing-results,
#third-party-platforms,
#affiliate-marketing,
#external-links,
#professional-advice,
#accuracy-information,
#limitation-liability,
#testimonials,
#changes,
#contact {
    scroll-margin-top: 105px;
}



/* =========================================================
   FOOTER CREDIT
   Keep same text shade as copyright
========================================================= */

.footer-credit {
    margin-left: 12px;

    padding-left: 12px;

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

    color: inherit;

    font-size: inherit;

    font-weight: 400;
}



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

@media (max-width: 1050px) {

    .privacy-content-section {
        padding-left: 6%;
        padding-right: 6%;
    }


    .privacy-layout {
        grid-template-columns:
            235px minmax(0, 1fr);

        gap: 45px;
    }


    .privacy-toc {
        padding: 22px;
    }


    .privacy-content h2 {
        font-size: 33px;
    }

}



/* =========================================================
   TABLET / MOBILE STACK
========================================================= */

@media (max-width: 850px) {

    .privacy-hero {
        min-height: 500px;

        padding:
            90px
            6%
            75px;
    }


    .privacy-content-section {
        padding:
            75px
            6%
            95px;
    }


    .privacy-layout {
        display: block;
    }


    .privacy-toc {
        position: relative;

        top: auto;

        margin-bottom: 55px;

        display: grid;

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

        gap: 5px;
    }


    .privacy-toc-title {
        grid-column: 1 / -1;
    }


    .privacy-content > section {
        margin-bottom: 50px;

        padding-bottom: 50px;
    }

}



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

@media (max-width: 600px) {

    .privacy-hero {
        min-height: auto;

        padding:
            75px
            20px
            65px;
    }


    .privacy-tag {
        margin-bottom: 21px;

        padding: 9px 14px;

        font-size: 10px;

        letter-spacing: 1.3px;
    }


    .privacy-hero h1 {
        margin-bottom: 22px;

        font-size: 46px;

        line-height: 1.04;

        letter-spacing: -2.2px;
    }


    .privacy-hero-content > p {
        font-size: 15px;

        line-height: 1.75;
    }


    .privacy-updated {
        margin-top: 24px;

        padding: 9px 13px;

        font-size: 11px;
    }


    .privacy-content-section {
        padding:
            60px
            20px
            80px;
    }


    .privacy-toc {
        grid-template-columns: 1fr;

        margin-bottom: 48px;

        padding: 20px;

        border-radius: 18px;
    }


    .privacy-toc a {
        padding: 9px 10px;

        font-size: 12.5px;
    }


    .privacy-content > section {
        margin-bottom: 44px;

        padding-bottom: 44px;
    }


    .privacy-number {
        width: 39px;
        height: 39px;

        margin-bottom: 17px;
    }


    .privacy-content h2 {
        margin-bottom: 18px;

        font-size: 29px;

        line-height: 1.2;

        letter-spacing: -0.8px;
    }


    .privacy-content p {
        margin-bottom: 18px;

        font-size: 15px;

        line-height: 1.8;
    }


    .privacy-content li {
        padding-left: 27px;

        font-size: 15px;

        line-height: 1.65;
    }


    .privacy-note {
        margin-top: 26px;

        padding:
            22px
            20px
            22px
            24px;

        border-radius: 16px;
    }


    .privacy-contact-card {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .privacy-contact-card > div:last-child {
        grid-column: auto;
    }


    .privacy-contact-card > div {
        padding: 20px;
    }


    .footer-credit {
        display: block;

        margin-left: 0;

        margin-top: 6px;

        padding-left: 0;

        border-left: none;
    }

}



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

@media (max-width: 420px) {

    .privacy-hero {
        padding-left: 16px;
        padding-right: 16px;
    }


    .privacy-hero h1 {
        font-size: 40px;
    }


    .privacy-content-section {
        padding-left: 16px;
        padding-right: 16px;
    }


    .privacy-content h2 {
        font-size: 27px;
    }


    .privacy-content p,
    .privacy-content li {
        font-size: 14.5px;
    }


    .privacy-toc {
        padding: 17px;
    }

}



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

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

    .privacy-tag::before,
    .privacy-glow-left,
    .privacy-glow-right {
        animation: none !important;
    }


    .privacy-number,
    .privacy-toc a,
    .privacy-contact-card > div {
        transition: none;
    }

}/* =========================================================
   ON THIS PAGE BADGE
========================================================= */

.privacy-toc-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    width: fit-content;

    margin: 0 auto 20px;

    padding: 9px 16px;

    border: 1px solid rgba(82, 102, 245, 0.18);

    border-radius: 999px;

    background: rgba(82, 102, 245, 0.055);

    color: #5266F5;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;

    text-align: center;

    box-shadow:
        0 8px 24px rgba(82, 102, 245, 0.06);
}


/* GREEN DOT */

.privacy-toc-title::before {
    content: "";

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #22C55E;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.08),
        0 0 10px rgba(34, 197, 94, 0.55);
}/* =========================================================
   ON THIS PAGE BADGE - SAME AS OTHER PAGES
========================================================= */

.privacy-toc-title {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    gap: 9px;

    width: fit-content;

    margin: 0 0 20px 0;

    padding: 9px 16px;

    border: 1px solid rgba(82, 102, 245, 0.18);
    border-radius: 999px;

    background: rgba(82, 102, 245, 0.055);

    color: #5266F5;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;

    white-space: nowrap;

    box-shadow:
        0 8px 24px rgba(82, 102, 245, 0.06);
}


/* GREEN DOT */

.privacy-toc-title::before {
    content: "";

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #22C55E;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.08),
        0 0 10px rgba(34, 197, 94, 0.55);
}/* =========================================
   BLOG BADGE GREEN DOT
========================================= */

.blog-tag::before {
    content: "";

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #22C55E;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.08),
        0 0 10px rgba(34, 197, 94, 0.55);
}/* =========================================
   BLOG HERO BADGE GREEN DOT
========================================= */

.blog-hero .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.blog-hero .section-tag::before {
    content: "";

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #22C55E;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.08),
        0 0 10px rgba(34, 197, 94, 0.55);
}/* =========================================================
   OUR IMPACT - CLEAN PREMIUM FINAL DESIGN
========================================================= */

.impact-section {
    position: relative;
    overflow: hidden;

    padding: 90px 8% 95px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(99, 102, 241, 0.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #111827 0%,
            #0f172a 100%
        );

    color: #ffffff;
}


.impact-inner {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;
}


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

.impact-heading {
    max-width: 820px;

    margin-bottom: 58px;
}


.impact-tag {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    width: fit-content;

    margin-bottom: 22px;

    padding: 8px 15px;

    border: 1px solid rgba(99, 102, 241, 0.24);
    border-radius: 999px;

    background: rgba(99, 102, 241, 0.06);

    color: #a5b4fc;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
}


.impact-tag::before {
    content: "";

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.08),
        0 0 10px rgba(34, 197, 94, 0.5);
}


.impact-heading h2 {
    margin: 0 0 22px;

    color: #ffffff;

    font-size: clamp(44px, 4.6vw, 68px);
    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -2.4px;
}


.impact-heading h2 span {
    display: block;

    margin-top: 3px;

    background: linear-gradient(
        90deg,
        #818cf8,
        #8b5cf6
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.impact-heading p {
    max-width: 700px;

    margin: 0;

    color: #94a3b8;

    font-size: 16px;
    line-height: 1.75;
}


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

.impact-stats {
    position: relative;

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

    border-top: 1px solid rgba(148, 163, 184, 0.18);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}


/* =========================================================
   INDIVIDUAL STAT
========================================================= */

.impact-stat {
    position: relative;

    min-height: 270px;

    padding: 30px 28px 32px;

    border-right: 1px solid rgba(148, 163, 184, 0.18);

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


.impact-stat:last-child {
    border-right: none;
}


.impact-stat:hover {
    background: rgba(255, 255, 255, 0.025);

    transform: translateY(-4px);
}


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

.impact-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 38px;
}


.impact-stat-index {
    color: #64748b;

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

    letter-spacing: 1.4px;
}


.impact-stat-icon {
    width: 38px;
    height: 38px;

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

    border: 1px solid rgba(99, 102, 241, 0.22);
    border-radius: 50%;

    background: rgba(99, 102, 241, 0.05);

    color: #a5b4fc;

    font-size: 16px;

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


.impact-stat:hover .impact-stat-icon {
    transform: translateY(-2px);

    background: rgba(99, 102, 241, 0.10);

    color: #ffffff;
}


/* =========================================================
   NUMBER
========================================================= */

.impact-number {
    margin-bottom: 17px;

    background: linear-gradient(
        90deg,
        #818cf8,
        #8b5cf6
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-size: clamp(48px, 4vw, 66px);
    font-weight: 800;

    line-height: 1;

    letter-spacing: -1.8px;
}


/* =========================================================
   TITLE & DESCRIPTION
========================================================= */

.impact-stat h3 {
    margin: 0 0 12px;

    color: #ffffff;

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

    line-height: 1.35;
}


.impact-stat p {
    margin: 0;

    max-width: 260px;

    color: #94a3b8;

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


/* =========================================================
   SUBTLE ACTIVE LINE
========================================================= */

.impact-stat::after {
    content: "";

    position: absolute;

    left: 28px;
    bottom: 0;

    width: 0;
    height: 2px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #7c3aed,
        #3b82f6
    );

    transition: width 0.35s ease;
}


.impact-stat:hover::after {
    width: 58px;
}


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

@media (max-width: 1050px) {

    .impact-section {
        padding-left: 6%;
        padding-right: 6%;
    }


    .impact-stats {
        grid-template-columns: repeat(2, 1fr);
    }


    .impact-stat:nth-child(2) {
        border-right: none;
    }


    .impact-stat:nth-child(-n+2) {
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    }

}


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

@media (max-width: 650px) {

    .impact-section {
        padding:
            72px
            20px
            78px;
    }


    .impact-heading {
        margin-bottom: 42px;
    }


    .impact-heading h2 {
        font-size: 42px;

        letter-spacing: -1.6px;
    }


    .impact-heading p {
        font-size: 15px;
    }


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


    .impact-stat {
        min-height: auto;

        padding:
            26px
            20px
            28px;

        border-right: none;
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    }


    .impact-stat:last-child {
        border-bottom: none;
    }


    .impact-stat-top {
        margin-bottom: 26px;
    }


    .impact-number {
        font-size: 52px;
    }


    .impact-stat p {
        max-width: 100%;
    }


    .impact-stat::after {
        left: 20px;
    }

}


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

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

    .impact-stat,
    .impact-stat-icon,
    .impact-stat::after {
        transition: none;
    }

}/* =========================================================
   OUR IMPACT - FINAL POLISH
   Add this at the END of style.css
========================================================= */


/* SECTION THODA COMPACT */

.impact-section {
    padding-top: 78px;
    padding-bottom: 82px;
}


/* =========================================================
   HEADING SIZE REFINEMENT
========================================================= */

.impact-heading {
    max-width: 760px;
    margin-bottom: 48px;
}


.impact-heading h2 {
    font-size: clamp(42px, 4vw, 62px);
    line-height: 1.04;
    letter-spacing: -2px;

    margin-bottom: 20px;
}


.impact-heading h2 span {
    margin-top: 2px;
}


.impact-heading p {
    max-width: 680px;

    font-size: 15px;
    line-height: 1.7;
}


/* OUR IMPACT PILL */

.impact-tag {
    margin-bottom: 20px;
}


/* =========================================================
   STAT AREA
========================================================= */

.impact-stat {
    min-height: 245px;

    padding:
        26px
        28px
        28px;
}


/* =========================================================
   TOP NUMBER + ICON
========================================================= */

.impact-stat-top {
    margin-bottom: 30px;
}


.impact-stat-index {
    font-size: 10px;

    letter-spacing: 1.5px;

    color: #71809a;
}


.impact-stat-icon {
    width: 34px;
    height: 34px;

    font-size: 14px;

    border-color: rgba(99, 102, 241, 0.28);

    background: rgba(99, 102, 241, 0.04);
}


/* =========================================================
   BIG NUMBERS
========================================================= */

.impact-number {
    margin-bottom: 14px;

    font-size: clamp(45px, 3.6vw, 60px);

    letter-spacing: -1.5px;
}


/* =========================================================
   STAT TITLES
========================================================= */

.impact-stat h3 {
    margin-bottom: 9px;

    font-size: 17px;
    line-height: 1.3;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.impact-stat p {
    max-width: 245px;

    font-size: 13px;
    line-height: 1.6;

    color: #8f9bb2;
}


/* =========================================================
   HOVER - VERY SUBTLE
========================================================= */

.impact-stat:hover {
    transform: translateY(-2px);

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


.impact-stat:hover .impact-stat-icon {
    transform: translateY(-1px);
}


/* SMALL GRADIENT LINE */

.impact-stat:hover::after {
    width: 48px;
}


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

@media (max-width: 1050px) {

    .impact-section {
        padding-top: 72px;
        padding-bottom: 76px;
    }

}


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

@media (max-width: 650px) {

    .impact-section {
        padding:
            65px
            20px
            70px;
    }


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


    .impact-heading h2 {
        font-size: 39px;
        letter-spacing: -1.4px;
    }


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


    .impact-stat {
        padding:
            24px
            20px
            26px;
    }


    .impact-stat-top {
        margin-bottom: 24px;
    }


    .impact-number {
        font-size: 48px;
    }


    .impact-stat h3 {
        font-size: 16px;
    }


    .impact-stat p {
        max-width: 100%;
        font-size: 13px;
    }

}.impact-heading h2 {
    font-size: clamp(46px, 4.5vw, 68px);
    line-height: 1.04;
    letter-spacing: -2.2px;
}

.impact-heading p {
    max-width: 720px;
    font-size: 16px;
    line-height: 1.72;
}

.impact-number {
    font-size: clamp(50px, 4vw, 66px);
}

.impact-stat h3 {
    font-size: 18px;
    line-height: 1.35;
}

.impact-stat p {
    max-width: 255px;
    font-size: 14px;
    line-height: 1.65;
}/* =========================================================
   ALL SECTION PILLS - SAME SIZE & TYPOGRAPHY
========================================================= */

.section-tag,
.services-eyebrow,
.impact-tag {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    width: fit-content;

    padding: 10px 18px;

    border-radius: 999px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;

    line-height: 1;

    font-family: Arial, sans-serif;
}/* =========================================================
   PREMIUM PILL NAVIGATION
========================================================= */

.pill-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 6px;

    border: 1px solid #e8ebf3;
    border-radius: 999px;

    background: rgba(248, 250, 252, 0.88);

    box-shadow:
        0 8px 30px rgba(15, 23, 42, 0.04);

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


/* =========================================================
   NAV LINKS
========================================================= */

.pill-nav .nav-pill {
    position: relative;

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

    min-height: 40px;

    padding: 0 17px;

    border: 1px solid transparent;
    border-radius: 999px;

    color: #111827;

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

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

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


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

.pill-nav .nav-pill:hover {
    color: #4f46e5;

    background: #ffffff;

    border-color: rgba(99, 102, 241, 0.18);

    box-shadow:
        0 5px 16px rgba(79, 70, 229, 0.08);

    transform: translateY(-1px);
}


/* =========================================================
   ACTIVE PAGE
========================================================= */

.pill-nav .nav-pill.active {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #4f6df5 0%,
        #6d3eea 100%
    );

    border-color: transparent;

    box-shadow:
        0 7px 18px rgba(79, 70, 229, 0.20);
}


/* ACTIVE HOVER */

.pill-nav .nav-pill.active:hover {
    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 9px 22px rgba(79, 70, 229, 0.25);
}


/* =========================================================
   DESKTOP HEADER BALANCE
========================================================= */

@media (min-width: 901px) {

    header .pill-nav {
        margin-left: auto;
        margin-right: auto;
    }

}


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

@media (max-width: 900px) {

    .pill-nav {
        border: none;
        border-radius: 0;

        padding: 0;

        background: transparent;

        box-shadow: none;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }


    .pill-nav .nav-pill {
        width: 100%;

        min-height: auto;

        justify-content: flex-start;

        padding: 13px 16px;

        border-radius: 12px;

        font-size: 16px;
    }


    .pill-nav .nav-pill.active {
        color: #4f46e5;

        background: rgba(99, 102, 241, 0.08);

        box-shadow: none;
    }


    .pill-nav .nav-pill:hover {
        color: #4f46e5;

        background: rgba(99, 102, 241, 0.06);

        border-color: transparent;

        box-shadow: none;

        transform: none;
    }

}/* NAVBAR FINAL POLISH */

.pill-nav {
    gap: 6px;
    padding: 5px;
}

.pill-nav .nav-pill {
    min-height: 36px;
    padding: 0 15px;

    font-size: 14px;
    font-weight: 500;
}

.pill-nav .nav-pill.active {
    background: linear-gradient(
        135deg,
        #5B6BF5,
        #6D4AE8
    );

    box-shadow:
        0 6px 16px rgba(79, 70, 229, 0.16);
}/* =========================================================
   NAVBAR FINAL POLISH
========================================================= */

.pill-nav {
    gap: 6px;
    padding: 5px;
}

.pill-nav .nav-pill {
    min-height: 36px;
    padding: 0 15px;

    font-size: 14px;
    font-weight: 500;
}

.pill-nav .nav-pill.active {
    font-weight: 500;

    background: linear-gradient(
        135deg,
        #5B6BF5,
        #6D4AE8
    );

    box-shadow:
        0 6px 16px rgba(79, 70, 229, 0.16);
}/* =========================================================
   ABOUT US PAGE - COMPLETE PREMIUM CSS
========================================================= */


/* =========================================================
   ABOUT HERO
========================================================= */

.about-page-hero {
    position: relative;
    min-height: 720px;

    display: flex;
    align-items: center;

    padding: 110px 8% 95px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(82, 102, 245, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(124, 58, 237, 0.10),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #F8FAFF 0%,
            #FFFFFF 100%
        );
}

.about-page-hero-inner {
    position: relative;
    z-index: 2;

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

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    gap: 80px;

    align-items: center;
}

.about-page-hero-copy {
    max-width: 760px;
}

.about-page-hero-copy .section-tag {
    margin-bottom: 24px;
}

.about-page-hero-copy h1 {
    max-width: 820px;

    margin: 0 0 28px;

    color: #111827;

    font-size: clamp(54px, 5.6vw, 82px);
    line-height: 1.03;
    letter-spacing: -3.6px;
}

.about-page-hero-copy h1 span {
    display: block;

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-page-hero-copy > p {
    max-width: 680px;

    margin: 0;

    color: #64748B;

    font-size: 18px;
    line-height: 1.8;
}

.about-page-actions {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-top: 34px;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.about-page-hero-visual {
    position: relative;

    min-height: 460px;

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

.about-visual-main {
    position: relative;
    z-index: 2;

    width: 350px;
    min-height: 350px;

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

    padding: 48px;

    text-align: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #5266F5,
            #7C3AED
        );

    color: #FFFFFF;

    box-shadow:
        0 35px 90px rgba(82, 102, 245, 0.22);

    animation: aboutMainFloat 5s ease-in-out infinite;
}

.about-visual-main::before {
    content: "";

    position: absolute;

    inset: -22px;

    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 50%;
}

.about-visual-main::after {
    content: "";

    position: absolute;

    inset: -52px;

    border: 1px solid rgba(124, 58, 237, 0.10);
    border-radius: 50%;
}

.about-visual-label {
    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;

    opacity: 0.8;
}

.about-visual-main strong {
    display: block;

    margin-bottom: 18px;

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

    letter-spacing: -3px;
}

.about-visual-main p {
    max-width: 240px;

    margin: 0;

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

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

.about-floating-stat {
    position: absolute;
    z-index: 4;

    min-width: 185px;

    padding: 20px 22px;

    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;

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

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

    box-shadow:
        0 18px 50px rgba(15, 23, 42, 0.10);
}

.about-floating-stat strong {
    display: block;

    margin-bottom: 5px;

    color: #111827;

    font-size: 28px;
}

.about-floating-stat span {
    color: #64748B;

    font-size: 13px;
}

.about-stat-one {
    top: 40px;
    left: 15px;

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

.about-stat-two {
    right: 0;
    bottom: 45px;

    animation: aboutStatFloatTwo 4.5s ease-in-out infinite;
}

@keyframes aboutMainFloat {
    50% {
        transform: translateY(-10px);
    }
}

@keyframes aboutStatFloatOne {
    50% {
        transform: translateY(-8px);
    }
}

@keyframes aboutStatFloatTwo {
    50% {
        transform: translateY(8px);
    }
}


/* HERO GLOWS */

.about-page-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(130px);

    pointer-events: none;
}

.about-page-glow-one {
    width: 420px;
    height: 420px;

    left: -210px;
    top: -180px;

    background: rgba(82, 102, 245, 0.16);
}

.about-page-glow-two {
    width: 450px;
    height: 450px;

    right: -220px;
    bottom: -220px;

    background: rgba(124, 58, 237, 0.16);
}


/* =========================================================
   WHO WE ARE
========================================================= */

.about-who-section {
    min-height: auto;

    padding: 120px 8%;

    background: #FFFFFF;
}

.about-who-grid {
    max-width: 1350px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 90px;

    align-items: start;
}

.about-who-heading {
    position: sticky;
    top: 120px;
}

.about-who-heading h2 {
    max-width: 620px;

    margin: 24px 0 0;

    color: #111827;

    font-size: clamp(46px, 4.7vw, 68px);
    line-height: 1.05;
    letter-spacing: -3px;
}

.about-who-heading h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-who-content {
    max-width: 720px;
}

.about-who-content p {
    max-width: none;

    color: #64748B;

    font-size: 17px;
    line-height: 1.85;
}

.about-who-content .about-lead {
    color: #1E293B;

    font-size: 21px;
    line-height: 1.75;
}

.about-mini-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 14px;

    margin-top: 42px;
}

.about-mini-points > div {
    padding: 22px;

    border: 1px solid #E2E8F0;
    border-radius: 18px;

    background: #F8FAFC;

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

.about-mini-points > div:hover {
    transform: translateY(-4px);

    border-color: rgba(82, 102, 245, 0.24);

    box-shadow:
        0 15px 35px rgba(15, 23, 42, 0.06);
}

.about-mini-points span {
    display: block;

    margin-bottom: 18px;

    color: #5266F5;

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

.about-mini-points strong {
    color: #111827;

    font-size: 15px;
}


/* =========================================================
   OUR STORY
========================================================= */

.about-story-section {
    position: relative;

    min-height: auto;

    padding: 120px 8%;

    background: #F8FAFC;
}

.about-story-head {
    max-width: 850px;

    margin: 0 auto 75px;

    text-align: center;
}

.about-story-head h2 {
    margin: 24px 0;

    color: #111827;

    font-size: clamp(46px, 4.8vw, 70px);
    line-height: 1.05;
    letter-spacing: -3px;
}

.about-story-head h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-story-head p {
    max-width: 680px;

    margin: 0 auto;

    color: #64748B;

    font-size: 17px;
    line-height: 1.8;
}

.about-story-timeline {
    max-width: 1100px;

    margin: 0 auto;
}

.about-story-item {
    position: relative;

    display: grid;
    grid-template-columns: 150px 1fr;

    gap: 42px;

    padding: 36px 0;

    border-bottom: 1px solid #E2E8F0;
}

.about-story-item:first-child {
    border-top: 1px solid #E2E8F0;
}

.about-story-year {
    color: #5266F5;

    font-size: 42px;
    font-weight: 800;
    line-height: 1;
}

.about-story-content > span {
    display: block;

    margin-bottom: 10px;

    color: #94A3B8;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.about-story-content h3 {
    margin: 0 0 12px;

    color: #111827;

    font-size: 28px;
    line-height: 1.3;
}

.about-story-content p {
    max-width: 720px;

    margin: 0;

    color: #64748B;

    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   MISSION + VISION
========================================================= */

.about-purpose-section {
    min-height: auto;

    padding: 120px 8%;

    background: #FFFFFF;
}

.about-purpose-head {
    max-width: 850px;

    margin: 0 auto 65px;

    text-align: center;
}

.about-purpose-head h2 {
    margin: 24px 0 0;

    color: #111827;

    font-size: clamp(46px, 4.8vw, 70px);
    line-height: 1.05;
    letter-spacing: -3px;
}

.about-purpose-head h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-purpose-grid {
    max-width: 1200px;

    margin: 0 auto;

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

    gap: 22px;
}

.about-purpose-card {
    position: relative;

    min-height: 420px;

    display: flex;
    flex-direction: column;

    padding: 38px;

    overflow: hidden;

    border: 1px solid #E2E8F0;
    border-radius: 28px;

    background: #F8FAFC;

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

.about-purpose-card:hover {
    transform: translateY(-7px);

    border-color: rgba(82, 102, 245, 0.24);

    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.08);
}

.about-purpose-featured {
    background:
        linear-gradient(
            135deg,
            #111827,
            #171C35
        );

    border-color: #111827;
}

.about-purpose-index {
    width: 48px;
    height: 48px;

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

    margin-bottom: auto;

    border-radius: 14px;

    background: #EEF2FF;

    color: #5266F5;

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

.about-purpose-featured .about-purpose-index {
    background: rgba(255, 255, 255, 0.08);

    color: #FFFFFF;
}

.about-purpose-small {
    display: block;

    margin-top: 70px;
    margin-bottom: 12px;

    color: #5266F5;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.about-purpose-featured .about-purpose-small {
    color: #A5B4FC;
}

.about-purpose-card h3 {
    max-width: 500px;

    margin: 0 0 18px;

    color: #111827;

    font-size: 31px;
    line-height: 1.2;
    letter-spacing: -1px;
}

.about-purpose-featured h3 {
    color: #FFFFFF;
}

.about-purpose-card p {
    max-width: 540px;

    margin: 0;

    color: #64748B;

    font-size: 15px;
    line-height: 1.75;
}

.about-purpose-featured p {
    color: #94A3B8;
}

.about-purpose-line {
    width: 70px;
    height: 2px;

    margin-top: 28px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );
}


/* =========================================================
   WHY AFFYADS MEDIA
========================================================= */

.about-difference-section {
    min-height: auto;

    padding: 120px 8%;

    background: #F8FAFC;
}

.about-difference-heading {
    max-width: 850px;

    margin-bottom: 65px;
}

.about-difference-heading h2 {
    margin: 24px 0;

    color: #111827;

    font-size: clamp(46px, 4.8vw, 70px);
    line-height: 1.05;
    letter-spacing: -3px;
}

.about-difference-heading h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-difference-heading p {
    max-width: 680px;

    margin: 0;

    color: #64748B;

    font-size: 17px;
    line-height: 1.8;
}

.about-difference-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 18px;
}

.about-difference-card {
    min-height: 290px;

    padding: 30px;

    border: 1px solid #E2E8F0;
    border-radius: 24px;

    background: #FFFFFF;

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

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

    border-color: rgba(82, 102, 245, 0.25);

    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.07);
}

.about-difference-number {
    display: inline-flex;

    margin-bottom: 48px;

    color: #5266F5;

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

.about-difference-card h3 {
    margin: 0 0 12px;

    color: #111827;

    font-size: 22px;
    line-height: 1.3;
}

.about-difference-card p {
    margin: 0;

    color: #64748B;

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


/* =========================================================
   OUR APPROACH
========================================================= */

.about-approach-section {
    min-height: auto;

    padding: 120px 8%;

    background: #FFFFFF;
}

.about-approach-head {
    max-width: 850px;

    margin: 0 auto 65px;

    text-align: center;
}

.about-approach-head h2 {
    margin: 24px 0 0;

    color: #111827;

    font-size: clamp(46px, 4.8vw, 70px);
    line-height: 1.05;
    letter-spacing: -3px;
}

.about-approach-head h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #5266F5,
        #7C3AED
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-approach-grid {
    max-width: 1200px;

    margin: 0 auto;

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

    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
}

.about-approach-step {
    min-height: 270px;

    padding: 34px 28px;

    border-right: 1px solid #E2E8F0;
}

.about-approach-step:last-child {
    border-right: none;
}

.about-approach-index {
    display: block;

    margin-bottom: 52px;

    color: #5266F5;

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

.about-approach-step h3 {
    margin: 0 0 12px;

    color: #111827;

    font-size: 22px;
}

.about-approach-step p {
    margin: 0;

    color: #64748B;

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


/* =========================================================
   ABOUT IMPACT
========================================================= */

.about-impact-section {
    min-height: auto;

    padding: 110px 8%;

    background:
        radial-gradient(
            circle at 88% 20%,
            rgba(124, 58, 237, 0.14),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #111827,
            #0F172A
        );

    color: #FFFFFF;
}

.about-impact-inner {
    max-width: 1300px;

    margin: 0 auto;
}

.about-impact-heading {
    max-width: 800px;

    margin-bottom: 60px;
}

.about-impact-heading .section-tag {
    color: #A5B4FC;
}

.about-impact-heading h2 {
    margin: 24px 0 0;

    color: #FFFFFF;

    font-size: clamp(46px, 4.8vw, 70px);
    line-height: 1.05;
    letter-spacing: -3px;
}

.about-impact-heading h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #818CF8,
        #8B5CF6
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-impact-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.about-impact-stat {
    padding: 42px 30px;

    border-right: 1px solid rgba(255,255,255,0.12);
}

.about-impact-stat:last-child {
    border-right: none;
}

.about-impact-stat strong {
    display: block;

    margin-bottom: 12px;

    background: linear-gradient(
        90deg,
        #818CF8,
        #8B5CF6
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    font-size: 58px;
    line-height: 1;
}

.about-impact-stat span {
    color: #CBD5E1;

    font-size: 15px;
}


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

.about-page-cta-section {
    min-height: auto;

    padding: 120px 8%;

    background: #FFFFFF;
}

.about-page-cta {
    position: relative;

    max-width: 1200px;

    margin: 0 auto;

    padding: 70px;

    overflow: hidden;

    border-radius: 34px;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(124, 58, 237, 0.30),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #111827,
            #171C35
        );

    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.14);
}

.about-page-cta .section-tag {
    color: #A5B4FC;
}

.about-page-cta h2 {
    max-width: 820px;

    margin: 24px 0;

    color: #FFFFFF;

    font-size: clamp(46px, 4.8vw, 70px);
    line-height: 1.05;
    letter-spacing: -3px;
}

.about-page-cta h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #818CF8,
        #A855F7
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-page-cta > p {
    max-width: 650px;

    margin: 0;

    color: #94A3B8;

    font-size: 17px;
    line-height: 1.8;
}

.about-page-cta-actions {
    display: flex;
    gap: 16px;

    margin-top: 32px;
}

.about-page-cta .secondary-btn {
    background: rgba(255, 255, 255, 0.06);

    color: #FFFFFF;

    border-color: rgba(255,255,255,0.14);
}


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

@media (max-width: 1000px) {

    .about-page-hero {
        padding-left: 6%;
        padding-right: 6%;
    }

    .about-page-hero-inner {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .about-page-hero-copy {
        max-width: 800px;
    }

    .about-page-hero-visual {
        min-height: 420px;
    }

    .about-who-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .about-who-heading {
        position: relative;
        top: 0;
    }

    .about-purpose-grid {
        grid-template-columns: 1fr;
    }

    .about-difference-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-approach-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-approach-step:nth-child(2) {
        border-right: none;
    }

    .about-approach-step:nth-child(-n+2) {
        border-bottom: 1px solid #E2E8F0;
    }

    .about-impact-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-impact-stat:nth-child(2) {
        border-right: none;
    }

    .about-impact-stat:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255,255,255,0.12);
    }

}


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

@media (max-width: 650px) {

    .about-page-hero {
        min-height: auto;

        padding: 75px 20px 80px;
    }

    .about-page-hero-inner {
        gap: 40px;
    }

    .about-page-hero-copy h1 {
        font-size: 44px;
        letter-spacing: -2px;
    }

    .about-page-hero-copy > p {
        font-size: 16px;
    }

    .about-page-actions,
    .about-page-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .about-page-actions a,
    .about-page-cta-actions a {
        width: 100%;
        text-align: center;
    }

    .about-page-hero-visual {
        min-height: 360px;
    }

    .about-visual-main {
        width: 250px;
        min-height: 250px;

        padding: 30px;
    }

    .about-visual-main strong {
        font-size: 54px;
    }

    .about-visual-main p {
        font-size: 12px;
    }

    .about-floating-stat {
        min-width: 145px;

        padding: 15px 17px;
    }

    .about-floating-stat strong {
        font-size: 23px;
    }

    .about-floating-stat span {
        font-size: 11px;
    }

    .about-stat-one {
        left: 0;
    }

    .about-stat-two {
        right: 0;
    }


    /* WHO */

    .about-who-section,
    .about-story-section,
    .about-purpose-section,
    .about-difference-section,
    .about-approach-section,
    .about-impact-section,
    .about-page-cta-section {
        padding-left: 20px;
        padding-right: 20px;

        padding-top: 75px;
        padding-bottom: 75px;
    }

    .about-who-heading h2,
    .about-story-head h2,
    .about-purpose-head h2,
    .about-difference-heading h2,
    .about-approach-head h2,
    .about-impact-heading h2,
    .about-page-cta h2 {
        font-size: 40px;
        letter-spacing: -1.8px;
    }

    .about-who-content .about-lead {
        font-size: 18px;
    }

    .about-who-content p {
        font-size: 15px;
    }

    .about-mini-points {
        grid-template-columns: 1fr;
    }


    /* STORY */

    .about-story-head {
        text-align: left;
    }

    .about-story-item {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .about-story-year {
        font-size: 34px;
    }

    .about-story-content h3 {
        font-size: 24px;
    }


    /* PURPOSE */

    .about-purpose-head,
    .about-approach-head {
        text-align: left;
    }

    .about-purpose-card {
        min-height: auto;

        padding: 30px 25px;
    }

    .about-purpose-small {
        margin-top: 55px;
    }

    .about-purpose-card h3 {
        font-size: 27px;
    }


    /* DIFFERENCE */

    .about-difference-grid {
        grid-template-columns: 1fr;
    }

    .about-difference-card {
        min-height: auto;

        padding: 26px 24px;
    }

    .about-difference-number {
        margin-bottom: 35px;
    }


    /* APPROACH */

    .about-approach-grid {
        grid-template-columns: 1fr;
    }

    .about-approach-step {
        min-height: auto;

        padding: 28px 0;

        border-right: none;
        border-bottom: 1px solid #E2E8F0;
    }

    .about-approach-step:last-child {
        border-bottom: none;
    }

    .about-approach-index {
        margin-bottom: 30px;
    }


    /* IMPACT */

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

    .about-impact-stat {
        padding: 30px 0;

        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.12);
    }

    .about-impact-stat:last-child {
        border-bottom: none;
    }

    .about-impact-stat strong {
        font-size: 52px;
    }


    /* CTA */

    .about-page-cta {
        padding: 38px 25px;

        border-radius: 26px;
    }

    .about-page-cta > p {
        font-size: 15px;
    }

}


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

@media (max-width: 420px) {

    .about-page-hero-copy h1,
    .about-who-heading h2,
    .about-story-head h2,
    .about-purpose-head h2,
    .about-difference-heading h2,
    .about-approach-head h2,
    .about-impact-heading h2,
    .about-page-cta h2 {
        font-size: 36px;
    }

    .about-visual-main {
        width: 220px;
        min-height: 220px;
    }

    .about-floating-stat {
        transform: scale(0.92);
    }

}


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

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

    .about-visual-main,
    .about-floating-stat {
        animation: none !important;
    }

}/* =========================================================
   ABOUT PAGE - FINAL HEADING POLISH
========================================================= */


/* OUR STORY */

.about-story-head h2 {
    font-size: clamp(42px, 4.2vw, 62px);
    line-height: 1.06;
    letter-spacing: -2.4px;
    overflow: visible;
}

.about-story-head {
    margin-bottom: 62px;
}


/* WHAT DRIVES US */

.about-purpose-head h2 {
    font-size: clamp(42px, 4.2vw, 62px);
    line-height: 1.06;
    letter-spacing: -2.4px;
    overflow: visible;
}


/* FINAL CTA */

.about-page-cta h2 {
    font-size: clamp(42px, 4.2vw, 62px);
    line-height: 1.06;
    letter-spacing: -2.4px;
    overflow: visible;
}

.about-page-cta {
    padding: 60px 65px;
}

.about-page-cta > p {
    max-width: 620px;
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   GRADIENT HEADING DESCENDER FIX
   Prevents g, y, p, j, q from getting cut
========================================================= */

.about-page-hero-copy h1,
.about-who-heading h2,
.about-story-head h2,
.about-purpose-head h2,
.about-difference-heading h2,
.about-approach-head h2,
.about-impact-heading h2,
.about-page-cta h2 {
    overflow: visible;
}

.about-page-hero-copy h1 span,
.about-who-heading h2 span,
.about-story-head h2 span,
.about-purpose-head h2 span,
.about-difference-heading h2 span,
.about-approach-head h2 span,
.about-impact-heading h2 span,
.about-page-cta h2 span {
    display: block;
    line-height: 1.12;
    padding-bottom: 10px;
    overflow: visible;
}/* =========================================================
   INDUSTRIES PAGE
========================================================= */


/* =========================================================
   HERO
========================================================= */

.industries-page-hero {
    position: relative;
    overflow: hidden;

    min-height: 720px;

    display: flex;
    align-items: center;

    padding: 150px 7% 100px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8f9ff 100%
        );
}


.industries-hero-inner {
    position: relative;
    z-index: 2;

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

    margin: 0 auto;
}


.industries-page-hero .section-tag {
    display: inline-block;

    margin-bottom: 24px;
}


.industries-page-hero h1 {
    max-width: 900px;

    margin: 0;

    font-size: clamp(54px, 6vw, 84px);
    line-height: 1.02;
    letter-spacing: -3.8px;

    font-weight: 700;

    color: #111827;
}


.industries-page-hero h1 span {
    display: block;

    line-height: 1.12;
    padding-bottom: 10px;

    background: linear-gradient(
        135deg,
        #2563eb 0%,
        #7c3aed 55%,
        #ec4899 100%
    );

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

    -webkit-text-fill-color: transparent;
    color: transparent;
}


.industries-page-hero > .industries-hero-inner > p {
    max-width: 720px;

    margin: 28px 0 0;

    font-size: 18px;
    line-height: 1.8;

    color: #64748b;
}


.industries-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 14px;

    margin-top: 38px;
}



/* =========================================================
   HERO BACKGROUND GLOWS
========================================================= */

.industries-hero-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(10px);
}


.industries-glow-left {
    width: 460px;
    height: 460px;

    left: -220px;
    top: 130px;

    background: radial-gradient(
        circle,
        rgba(37, 99, 235, 0.15) 0%,
        rgba(37, 99, 235, 0) 70%
    );
}


.industries-glow-right {
    width: 560px;
    height: 560px;

    right: -230px;
    top: 60px;

    background: radial-gradient(
        circle,
        rgba(124, 58, 237, 0.15) 0%,
        rgba(124, 58, 237, 0) 72%
    );
}



/* =========================================================
   INTRO SECTION
========================================================= */

.industries-intro-section {
    padding: 120px 7%;

    background: #ffffff;
}


.industries-intro-inner {
    max-width: 1180px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.1fr 0.8fr;

    gap: 90px;

    align-items: end;
}


.industries-intro-heading h2 {
    margin: 18px 0 0;

    font-size: clamp(44px, 4.8vw, 66px);
    line-height: 1.06;
    letter-spacing: -2.7px;

    color: #111827;

    font-weight: 700;
}


.industries-intro-heading h2 span {
    display: block;

    line-height: 1.12;
    padding-bottom: 8px;

    background: linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

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

    -webkit-text-fill-color: transparent;
    color: transparent;
}


.industries-intro-copy {
    padding-bottom: 4px;
}


.industries-intro-copy p {
    margin: 0 0 18px;

    font-size: 17px;
    line-height: 1.8;

    color: #64748b;
}


.industries-intro-copy p:last-child {
    margin-bottom: 0;
}



/* =========================================================
   INDIVIDUAL INDUSTRY SECTIONS
========================================================= */

.industry-detail-section {
    position: relative;

    padding: 115px 7%;

    background: #ffffff;

    border-top: 1px solid #eef0f6;
}


.industry-detail-section.industry-alt {
    background:
        linear-gradient(
            180deg,
            #f9faff 0%,
            #ffffff 100%
        );
}


.industry-detail-inner {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 150px 1fr;

    gap: 52px;
}


.industry-detail-number {
    position: sticky;
    top: 130px;

    align-self: start;

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

    letter-spacing: -4px;

    font-weight: 700;

    color: transparent;

    -webkit-text-stroke: 1px rgba(91, 107, 245, 0.25);

    user-select: none;
}


.industry-detail-content {
    min-width: 0;
}


.industry-label {
    display: inline-flex;
    align-items: center;

    min-height: 32px;

    padding: 0 14px;

    margin-bottom: 20px;

    border: 1px solid rgba(91, 107, 245, 0.16);

    border-radius: 999px;

    background: rgba(91, 107, 245, 0.06);

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;

    color: #5b6bf5;
}


.industry-detail-content > h2 {
    max-width: 820px;

    margin: 0 0 24px;

    font-size: clamp(42px, 4.6vw, 64px);
    line-height: 1.06;

    letter-spacing: -2.6px;

    font-weight: 700;

    color: #111827;
}


.industry-detail-content > h2 span {
    display: block;

    line-height: 1.12;
    padding-bottom: 8px;

    background: linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

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

    -webkit-text-fill-color: transparent;
    color: transparent;
}


.industry-detail-content > p {
    max-width: 810px;

    margin: 0 0 16px;

    font-size: 17px;
    line-height: 1.8;

    color: #64748b;
}



/* =========================================================
   INDUSTRY FOCUS CARDS
========================================================= */

.industry-focus-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-top: 42px;
}


.industry-focus-grid > div {
    position: relative;
    overflow: hidden;

    min-height: 190px;

    padding: 28px;

    border: 1px solid #e8eaf2;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fafaff 100%
        );

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


.industry-focus-grid > div::before {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -55px;
    bottom: -65px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(91, 107, 245, 0.1),
        transparent 70%
    );

    transition: transform 0.4s ease;
}


.industry-focus-grid > div:hover {
    transform: translateY(-5px);

    border-color: rgba(91, 107, 245, 0.28);

    box-shadow:
        0 18px 45px rgba(30, 41, 59, 0.07);
}


.industry-focus-grid > div:hover::before {
    transform: scale(1.35);
}


.industry-focus-grid > div > span {
    display: block;

    margin-bottom: 22px;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.3px;

    color: #7c3aed;
}


.industry-focus-grid strong {
    display: block;

    margin-bottom: 10px;

    font-size: 20px;
    line-height: 1.3;

    font-weight: 600;

    color: #111827;
}


.industry-focus-grid p {
    position: relative;
    z-index: 1;

    max-width: 390px;

    margin: 0;

    font-size: 15px;
    line-height: 1.7;

    color: #64748b;
}



/* =========================================================
   RELEVANT SERVICES
========================================================= */

.industry-services-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 10px;

    margin-top: 32px;
}


.industry-services-row > span {
    margin-right: 4px;

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

    letter-spacing: 1px;
    text-transform: uppercase;

    color: #94a3b8;
}


.industry-services-row a {
    display: inline-flex;
    align-items: center;

    min-height: 36px;

    padding: 0 14px;

    border: 1px solid #e5e7eb;

    border-radius: 999px;

    background: #ffffff;

    color: #475569;

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;

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


.industry-services-row a:hover {
    transform: translateY(-2px);

    border-color: rgba(91, 107, 245, 0.35);

    color: #5b6bf5;

    box-shadow:
        0 8px 18px rgba(91, 107, 245, 0.08);
}



/* =========================================================
   INDUSTRY PROCESS / APPROACH
========================================================= */

.industries-strategy-section {
    padding: 125px 7%;

    background:
        linear-gradient(
            180deg,
            #f7f8ff 0%,
            #ffffff 100%
        );
}


.industries-strategy-head {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto 58px;
}


.industries-strategy-head h2 {
    max-width: 820px;

    margin: 18px 0 20px;

    font-size: clamp(44px, 4.8vw, 66px);
    line-height: 1.06;

    letter-spacing: -2.7px;

    font-weight: 700;

    color: #111827;
}


.industries-strategy-head h2 span {
    display: block;

    line-height: 1.12;
    padding-bottom: 8px;

    background: linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

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

    -webkit-text-fill-color: transparent;
    color: transparent;
}


.industries-strategy-head > p {
    max-width: 700px;

    margin: 0;

    font-size: 17px;
    line-height: 1.8;

    color: #64748b;
}


.industries-process-grid {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

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

    gap: 14px;
}


.industries-process-card {
    position: relative;
    overflow: hidden;

    min-height: 235px;

    padding: 28px 25px;

    border: 1px solid #e7e9f2;

    border-radius: 22px;

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

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


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

    border-color: rgba(91, 107, 245, 0.28);

    box-shadow:
        0 20px 48px rgba(30, 41, 59, 0.08);
}


.industries-process-card > span {
    display: block;

    margin-bottom: 42px;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;

    color: #7c3aed;
}


.industries-process-card h3 {
    margin: 0 0 10px;

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

    color: #111827;
}


.industries-process-card p {
    margin: 0;

    font-size: 15px;
    line-height: 1.7;

    color: #64748b;
}



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

.industries-page-cta {
    padding: 40px 7% 120px;

    background: #ffffff;
}


.industries-page-cta-inner {
    position: relative;
    overflow: hidden;

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

    margin: 0 auto;

    padding: 76px 70px;

    border-radius: 32px;

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #171a35 50%,
            #20204a 100%
        );

    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.16);
}


.industries-page-cta-inner::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -160px;
    top: -170px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(124, 58, 237, 0.3),
        transparent 68%
    );
}


.industries-page-cta-inner > span {
    position: relative;
    z-index: 1;

    display: inline-block;

    margin-bottom: 18px;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.4px;

    color: #a5b4fc;
}


.industries-page-cta h2 {
    position: relative;
    z-index: 1;

    max-width: 780px;

    margin: 0;

    font-size: clamp(42px, 4.5vw, 62px);
    line-height: 1.06;

    letter-spacing: -2.5px;

    color: #ffffff;

    font-weight: 700;
}


.industries-page-cta h2 span {
    display: block;

    line-height: 1.12;
    padding-bottom: 8px;

    background: linear-gradient(
        135deg,
        #60a5fa,
        #a78bfa,
        #f472b6
    );

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

    -webkit-text-fill-color: transparent;
    color: transparent;
}


.industries-page-cta p {
    position: relative;
    z-index: 1;

    max-width: 660px;

    margin: 22px 0 30px;

    font-size: 16px;
    line-height: 1.8;

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


.industries-page-cta .primary-btn {
    position: relative;
    z-index: 1;
}



/* =========================================================
   ANCHOR SCROLL OFFSET
========================================================= */

#ecommerce,
#education,
#real-estate,
#finance,
#technology,
#health-wellness {
    scroll-margin-top: 105px;
}



/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1024px) {


    .industries-page-hero {
        min-height: auto;

        padding:
            145px 6%
            90px;
    }


    .industries-page-hero h1 {
        max-width: 800px;
    }


    .industries-intro-section,
    .industry-detail-section,
    .industries-strategy-section {
        padding-left: 6%;
        padding-right: 6%;
    }


    .industries-intro-inner {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .industry-detail-inner {
        grid-template-columns: 95px 1fr;

        gap: 35px;
    }


    .industry-detail-number {
        font-size: 58px;
    }


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


    .industries-page-cta {
        padding-left: 6%;
        padding-right: 6%;
    }


}



/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 768px) {


    .industries-page-hero {
        padding:
            125px 22px
            70px;
    }


    .industries-page-hero h1 {
        font-size: clamp(44px, 13vw, 58px);

        line-height: 1.04;

        letter-spacing: -2.6px;
    }


    .industries-page-hero > .industries-hero-inner > p {
        margin-top: 22px;

        font-size: 16px;
        line-height: 1.75;
    }


    .industries-hero-actions {
        align-items: stretch;

        flex-direction: column;

        margin-top: 30px;
    }


    .industries-hero-actions .primary-btn,
    .industries-hero-actions .secondary-btn {
        width: 100%;

        justify-content: center;
    }



    /* INTRO */

    .industries-intro-section {
        padding:
            82px 22px;
    }


    .industries-intro-heading h2 {
        font-size: 42px;
        letter-spacing: -2px;
    }


    .industries-intro-copy p {
        font-size: 16px;
    }



    /* INDUSTRY SECTIONS */

    .industry-detail-section {
        padding:
            82px 22px;
    }


    .industry-detail-inner {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .industry-detail-number {
        position: static;

        font-size: 46px;

        letter-spacing: -2px;
    }


    .industry-detail-content > h2 {
        font-size: 40px;
        line-height: 1.08;

        letter-spacing: -2px;
    }


    .industry-detail-content > p {
        font-size: 16px;
    }


    .industry-focus-grid {
        grid-template-columns: 1fr;

        margin-top: 32px;
    }


    .industry-focus-grid > div {
        min-height: auto;

        padding: 24px;
    }


    .industry-services-row {
        margin-top: 27px;
    }


    .industry-services-row > span {
        flex-basis: 100%;

        margin: 0 0 3px;
    }



    /* PROCESS */

    .industries-strategy-section {
        padding:
            82px 22px;
    }


    .industries-strategy-head {
        margin-bottom: 38px;
    }


    .industries-strategy-head h2 {
        font-size: 42px;

        letter-spacing: -2px;
    }


    .industries-process-grid {
        grid-template-columns: 1fr;
    }


    .industries-process-card {
        min-height: auto;

        padding: 24px;
    }


    .industries-process-card > span {
        margin-bottom: 28px;
    }



    /* CTA */

    .industries-page-cta {
        padding:
            10px 22px
            85px;
    }


    .industries-page-cta-inner {
        padding:
            52px 26px;

        border-radius: 26px;
    }


    .industries-page-cta h2 {
        font-size: 40px;

        letter-spacing: -2px;
    }


}



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

@media (max-width: 480px) {


    .industries-page-hero h1 {
        font-size: 42px;
    }


    .industries-intro-heading h2,
    .industry-detail-content > h2,
    .industries-strategy-head h2,
    .industries-page-cta h2 {
        font-size: 36px;

        letter-spacing: -1.7px;
    }


    .industry-detail-section {
        padding-top: 72px;
        padding-bottom: 72px;
    }


    .industry-focus-grid strong {
        font-size: 19px;
    }


}/* =========================================================
   INDUSTRIES PAGE - HERO FINAL POLISH
   Green Dot + Top Gap Fix
========================================================= */

/* Hero ka extra upper gap kam */
.industries-page-hero {
    padding-top: 105px;
}


/* INDUSTRIES WE SUPPORT pill */
.industries-page-hero .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


/* Green Dot */
.industries-page-hero .section-tag::before {
    content: "";

    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #69d17d;

    box-shadow:
        0 0 0 5px rgba(105, 209, 125, 0.12),
        0 0 12px rgba(105, 209, 125, 0.45);
}


/* Tablet */
@media (max-width: 1024px) {
    .industries-page-hero {
        padding-top: 95px;
    }
}


/* Mobile */
@media (max-width: 768px) {
    .industries-page-hero {
        padding-top: 80px;
    }
}/* =========================================================
   INDUSTRIES PAGE - ALL INDUSTRY LABEL GREEN DOTS
========================================================= */

.industry-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


/* Green Dot */

.industry-label::before {
    content: "";

    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #69d17d;

    box-shadow:
        0 0 0 5px rgba(105, 209, 125, 0.12),
        0 0 12px rgba(105, 209, 125, 0.45);
}/* =========================================================
   INDUSTRIES PAGE - SECTION GAP FIX
========================================================= */

/* WHO WE HELP section ka bottom space kam */
.industries-intro {
    padding-bottom: 70px;
}

/* First E-Commerce section ka upper space kam */
.industry-detail-section:first-of-type {
    padding-top: 70px;
}/* =========================================================
   INDUSTRIES PAGE - WHO WE HELP TO E-COMMERCE GAP FIX
========================================================= */

/* WHO WE HELP section ka bottom gap kam */
.industries-intro-section {
    padding-bottom: 55px;
}


/* E-Commerce section ka top gap kam */
#ecommerce {
    padding-top: 55px;
}/* =========================================================
   INDUSTRIES PAGE - WHO WE HELP FINAL SPACING
========================================================= */

.industries-intro-section {
    padding-top: 60px;
    padding-bottom: 60px;
}


/* First industry section */
#ecommerce {
    padding-top: 70px;
}/* =========================================================
   INDUSTRIES - WHO WE HELP HEIGHT FIX
========================================================= */

.industries-intro-section {
    min-height: auto !important;
    height: auto !important;

    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.industries-intro-inner {
    min-height: 0 !important;
    height: auto !important;
}/* =========================================================
   ALL INDUSTRY SECTIONS - TOP GAP BALANCE
========================================================= */

#ecommerce,
#education,
#real-estate,
#finance,
#technology,
#health-wellness {
    padding-top: 70px;
}/* =========================================================
   OUR APPROACH - TOP GAP FIX
========================================================= */

.industries-strategy-section {
    padding-top: 70px;
}/* =========================================================
   INDUSTRIES WE SUPPORT - TOP GAP REDUCE
========================================================= */

.industries-page-hero {
    padding-top: 50px;
}.industries-page-hero-copy {
    gap: 24px;
}

.industries-page-hero-copy p {
    margin-top: 18px;
}

.industries-page-hero-actions {
    margin-top: 28px;
}/* =========================================================
   INDUSTRIES PAGE HERO - FINAL
========================================================= */

.industries-page-hero {
    padding-top: 50px;
    padding-bottom: 25px;
}


/* INDUSTRIES WE SUPPORT TAG */

.industries-page-hero .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}


/* GREEN DOT */

.industries-page-hero .section-tag::before {
    content: "";

    width: 8px;
    height: 8px;
    flex: 0 0 8px;

    border-radius: 50%;

    background: #69d17d;

    box-shadow:
        0 0 0 5px rgba(105, 209, 125, 0.12),
        0 0 12px rgba(105, 209, 125, 0.45);
}


/* HERO CONTENT SPACING */

.industries-page-hero-copy {
    gap: 18px;
}


/* DESCRIPTION */

.industries-page-hero-copy p {
    margin-top: 10px;
}


/* BUTTONS */

.industries-page-hero-actions {
    margin-top: 18px;
}


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

@media (max-width: 1024px) {

    .industries-page-hero {
        padding-top: 45px;
        padding-bottom: 35px;
    }

}


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

@media (max-width: 768px) {

    .industries-page-hero {
        padding-top: 40px;
        padding-bottom: 30px;
    }

    .industries-page-hero-copy {
        gap: 20px;
    }

    .industries-page-hero-actions {
        margin-top: 24px;
    }

}


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

@media (max-width: 480px) {

    .industries-page-hero {
        padding-top: 35px;
        padding-bottom: 25px;
    }

}/* =========================================================
   INDUSTRIES HERO - DESKTOP HEIGHT FINAL FIX
========================================================= */

.industries-page-hero {
    min-height: auto !important;
    height: auto !important;

    padding-top: 50px !important;
    padding-bottom: 45px !important;
}


/* Tag spacing */
.industries-page-hero .section-tag {
    margin-bottom: 20px;
}


/* Main heading slightly compact */
.industries-page-hero h1 {
    max-width: 900px;

    font-size: clamp(52px, 5.2vw, 74px);
    line-height: 1.01;

    letter-spacing: -3.2px;
}


/* Gradient line */
.industries-page-hero h1 span {
    line-height: 1.07;
    padding-bottom: 6px;
}


/* Description */
.industries-page-hero > .industries-hero-inner > p {
    margin-top: 20px;
}


/* Buttons */
.industries-hero-actions {
    margin-top: 24px;
}/* =========================================================
   INDUSTRIES HERO - FULL SCREEN VIEW FIX
========================================================= */

.industries-page-hero {
    min-height: calc(100vh - 132px) !important;
    box-sizing: border-box;
}/* =========================================================
   INDUSTRIES HERO - FINAL SCREEN + TAG DOT FIX
========================================================= */

/* 1. Hero ko complete first screen tak rakho */
.industries-page-hero {
    min-height: calc(100vh - 80px) !important;
    height: calc(100vh - 80px) !important;
    box-sizing: border-box;

    display: flex;
    align-items: center;
}


/* 2. Green dot aur text ke beech proper gap */
.industries-page-hero .section-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}


/* Agar green dot ::before se bana hua hai */
.industries-page-hero .section-tag::before {
    margin: 0 !important;
    flex-shrink: 0;
}/* =========================================================
   HOME HERO - BRAND GALAXY
========================================================= */

.hero {
    min-height: calc(100vh - 80px);

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    gap: 60px;

    padding: 70px 8%;

    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 45%,
            rgba(82, 102, 245, 0.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 55%,
            rgba(124, 58, 237, 0.10),
            transparent 34%
        ),
        #ffffff;
}


/* LEFT CONTENT */

.hero-content {
    position: relative;
    z-index: 5;
}


/* HERO TAG */

.hero-tag {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    padding: 10px 18px;

    margin-bottom: 28px;

    border-radius: 999px;

    background: rgba(82, 102, 245, 0.06);

    color: #5266F5;

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

    letter-spacing: 1.5px;
}


.hero-tag::before {
    content: "";

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #22C55E;

    box-shadow:
        0 0 0 5px rgba(34, 197, 94, 0.10),
        0 0 12px rgba(34, 197, 94, 0.60);
}


/* HEADING */

.hero h1 {
    max-width: 760px;

    margin: 0 0 28px;

    color: #111827;

    font-size: clamp(58px, 5.8vw, 88px);

    line-height: 1.02;

    letter-spacing: -4px;
}


.hero h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #4567EB,
            #654FE9,
            #A33EC2
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* DESCRIPTION */

.hero-content > p {
    max-width: 650px;

    margin-bottom: 32px;

    color: #64748B;

    font-size: 18px;
    line-height: 1.75;
}


/* BUTTONS */

.hero-buttons {
    display: flex;
    align-items: center;

    gap: 16px;
}


.primary-btn,
.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding: 0 25px;

    border-radius: 12px;

    text-decoration: none;

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

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


.primary-btn {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #4567EB,
            #743BE8
        );

    box-shadow:
        0 14px 32px rgba(82, 102, 245, 0.22);
}


.secondary-btn {
    color: #111827;

    background: #ffffff;

    border: 1px solid #DFE4EE;
}


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


/* =========================================================
   GALAXY AREA
========================================================= */

.brand-galaxy {
    position: relative;

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

    aspect-ratio: 1 / 1;

    margin: 0 auto;

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

    overflow: visible;
}


/* BACK GLOW */

.galaxy-glow {
    position: absolute;

    width: 70%;
    height: 70%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(82, 102, 245, 0.22),
            rgba(124, 58, 237, 0.12) 45%,
            transparent 70%
        );

    filter: blur(28px);

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


/* =========================================================
   CENTER CORE
========================================================= */

.galaxy-core {
    position: absolute;

    width: 220px;
    height: 220px;

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

    border-radius: 50%;

    z-index: 5;

    background:
        radial-gradient(
            circle at 35% 30%,
            #708BFF 0%,
            #5364EC 35%,
            #6F43E8 63%,
            #9B3FC1 100%
        );

    box-shadow:
        0 0 0 9px rgba(255, 255, 255, 0.78),
        0 0 30px rgba(82, 102, 245, 0.42),
        0 0 75px rgba(124, 58, 237, 0.30),
        0 0 125px rgba(82, 102, 245, 0.18);

    animation:
        galaxyCoreFloat 4.5s ease-in-out infinite;
}


.galaxy-core::before {
    content: "";

    position: absolute;

    inset: 14px;

    border-radius: 50%;

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


.core-inner {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #ffffff;

    text-align: center;
}


.core-inner span {
    font-size: 25px;
    font-weight: 800;

    letter-spacing: 1px;
}


.core-inner small {
    margin-top: 4px;

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

    letter-spacing: 3px;

    opacity: 0.85;
}


/* =========================================================
   ORBIT BASE
========================================================= */

.orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    border-radius: 50%;

    transform-origin: center;

    border:
        1px solid rgba(82, 102, 245, 0.23);
}


/* INNER ORBIT */

.orbit-1 {
    width: 390px;
    height: 390px;

    margin-left: -195px;
    margin-top: -195px;

    animation:
        orbitSpinOne 20s linear infinite;
}


/* OUTER ORBIT */

.orbit-2 {
    width: 560px;
    height: 560px;

    margin-left: -280px;
    margin-top: -280px;

    border-style: dashed;

    animation:
        orbitSpinTwo 32s linear infinite reverse;
}


/* =========================================================
   BRAND NODES
========================================================= */

.brand-node {
    position: absolute;

    width: 82px;
    height: 82px;

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

    padding: 10px;

    border-radius: 50%;

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

    border:
        1px solid rgba(226, 232, 240, 0.95);

    box-shadow:
        0 14px 38px rgba(15, 23, 42, 0.12);

    color: #111827;

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

    text-align: center;

    z-index: 6;

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


.brand-node:hover {
    transform: scale(1.10);

    box-shadow:
        0 18px 45px rgba(82, 102, 245, 0.20);
}


/* =========================================================
   ORBIT 1 BRAND POSITIONS
========================================================= */

.node-google {
    top: -41px;
    left: 50%;

    transform: translateX(-50%);
}


.node-meta {
    bottom: -41px;
    left: 50%;

    transform: translateX(-50%);
}


/* =========================================================
   ORBIT 2 BRAND POSITIONS
========================================================= */

.node-amazon {
    left: -41px;
    top: 50%;

    transform: translateY(-50%);
}


.node-linkedin {
    top: 7%;
    right: 6%;
}


.node-shopify {
    bottom: 7%;
    right: 6%;
}


/* =========================================================
   KEEP LOGO TEXT STRAIGHT WHILE ORBIT ROTATES
========================================================= */

.orbit-1 .brand-node {
    animation:
        nodeCounterRotateOne 20s linear infinite;
}


.orbit-2 .brand-node {
    animation:
        nodeCounterRotateTwo 32s linear infinite;
}


/* =========================================================
   GALAXY STARS
========================================================= */

.galaxy-star {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #6366F1;

    box-shadow:
        0 0 12px rgba(99, 102, 241, 0.70);

    animation:
        galaxyStarFloat 3s ease-in-out infinite;
}


.star-1 {
    top: 18%;
    left: 17%;
}


.star-2 {
    top: 33%;
    right: 8%;

    background: #EC4899;

    animation-delay: 0.7s;
}


.star-3 {
    bottom: 16%;
    left: 28%;

    background: #7C3AED;

    animation-delay: 1.3s;
}


.star-4 {
    bottom: 27%;
    right: 18%;

    background: #60A5FA;

    animation-delay: 1.8s;
}


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

@keyframes orbitSpinOne {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes orbitSpinTwo {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes nodeCounterRotateOne {

    from {
        rotate: 0deg;
    }

    to {
        rotate: -360deg;
    }

}


@keyframes nodeCounterRotateTwo {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }

}


@keyframes galaxyCoreFloat {

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

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

}


@keyframes galaxyGlowPulse {

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

    50% {
        transform: scale(1.08);
        opacity: 1;
    }

}


@keyframes galaxyStarFloat {

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

    50% {
        transform: translateY(-10px) scale(1.25);
    }

}


/* =========================================================
   HOVER PAUSE
========================================================= */

.brand-galaxy:hover .orbit-1,
.brand-galaxy:hover .orbit-2,
.brand-galaxy:hover .brand-node {
    animation-play-state: paused;
}


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

@media (max-width: 1050px) {

    .hero {
        gap: 30px;

        padding-left: 6%;
        padding-right: 6%;
    }


    .brand-galaxy {
        max-width: 530px;
    }


    .galaxy-core {
        width: 180px;
        height: 180px;
    }


    .orbit-1 {
        width: 320px;
        height: 320px;

        margin-left: -160px;
        margin-top: -160px;
    }


    .orbit-2 {
        width: 460px;
        height: 460px;

        margin-left: -230px;
        margin-top: -230px;
    }


    .brand-node {
        width: 68px;
        height: 68px;

        font-size: 10px;
    }

}


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

@media (max-width: 768px) {

    .hero {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 55px;

        padding:
            55px 22px
            75px;
    }


    .hero h1 {
        font-size: clamp(48px, 14vw, 70px);

        letter-spacing: -2.5px;
    }


    .hero-content > p {
        font-size: 16px;
    }


    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }


    .primary-btn,
    .secondary-btn {
        width: 100%;
    }


    .brand-galaxy {
        width: min(94vw, 500px);
    }


    .galaxy-core {
        width: 145px;
        height: 145px;
    }


    .core-inner span {
        font-size: 19px;
    }


    .orbit-1 {
        width: 260px;
        height: 260px;

        margin-left: -130px;
        margin-top: -130px;
    }


    .orbit-2 {
        width: 380px;
        height: 380px;

        margin-left: -190px;
        margin-top: -190px;
    }


    .brand-node {
        width: 58px;
        height: 58px;

        font-size: 8px;

        padding: 7px;
    }

}


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

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

    .orbit,
    .brand-node,
    .galaxy-core,
    .galaxy-glow,
    .galaxy-star {
        animation: none !important;
    }

}/* =========================================
   HERO GALAXY - 3D MOUSE EFFECT
========================================= */

.brand-galaxy {
    transition: transform 0.35s ease;
    transform-style: preserve-3d;
    will-change: transform;
}.brand-galaxy:hover .orbit-1,
.brand-galaxy:hover .orbit-2,
.brand-galaxy:hover .brand-node {
    animation-play-state: running !important;
}/* =========================================================
   HOME PERFORMANCE HERO - FINAL UI
   APPEND ONLY
========================================================= */

.performance-home-hero {
    position: relative;

    min-height: calc(100vh - 80px);

    padding: 62px 4.5% 28px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 4% 37%,
            rgba(82, 102, 245, 0.08),
            transparent 29%
        ),
        radial-gradient(
            circle at 92% 36%,
            rgba(124, 58, 237, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FCFDFF 100%
        );
}


/* =========================================================
   MAIN GRID
========================================================= */

.performance-hero-main {
    position: relative;
    z-index: 4;

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

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(440px, 0.85fr)
        minmax(650px, 1.15fr);

    align-items: center;

    gap: 70px;
}


/* =========================================================
   LEFT COPY
========================================================= */

.performance-hero-copy {
    max-width: 640px;
}


/* EYEBROW */

.performance-eyebrow {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 34px;

    padding: 10px 17px;

    border-radius: 100px;

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

    border:
        1px solid #EDF0F6;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, 0.06);

    color: #5266F5;

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

    letter-spacing: 1.1px;
}


.performance-eyebrow span:nth-child(3) {
    color: #7C3AED;
}


.performance-eyebrow span:nth-child(4) {
    color: #F97316;
}


.performance-live-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #22C55E;

    box-shadow:
        0 0 0 5px rgba(34, 197, 94, 0.08),
        0 0 10px rgba(34, 197, 94, 0.55);
}


/* TITLE */

.performance-hero-copy h1 {
    max-width: 620px;

    margin: 0;

    color: #0E1A34;

    font-size: clamp(58px, 5.2vw, 82px);

    font-weight: 750;

    line-height: 1.04;

    letter-spacing: -4px;
}


.performance-hero-copy h1 > span {
    display: inline-block;

    background:
        linear-gradient(
            90deg,
            #2563EB 0%,
            #6366F1 37%,
            #A83CD4 76%,
            #F97316 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

    padding-bottom: 7px;
}


/* SMALL LINE */

.performance-title-line {
    width: 62px;
    height: 3px;

    margin-top: 27px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #2563EB,
            #7C3AED,
            #F97316
        );
}


/* DESCRIPTION */

.performance-hero-copy > p {
    max-width: 570px;

    margin: 30px 0 0;

    color: #62708A;

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   BUTTONS
========================================================= */

.performance-hero-buttons {
    display: flex;
    align-items: center;

    gap: 25px;

    margin-top: 36px;
}


.performance-primary-btn {
    min-height: 58px;

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

    gap: 28px;

    padding: 0 28px;

    border-radius: 13px;

    color: #FFFFFF;

    text-decoration: none;

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

    background:
        linear-gradient(
            135deg,
            #2563EB 0%,
            #6D45EE 62%,
            #A838D8 100%
        );

    box-shadow:
        0 14px 32px rgba(82, 82, 235, 0.22);

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


.performance-primary-btn > span {
    font-size: 21px;

    transition:
        transform 0.3s ease;
}


.performance-primary-btn:hover {
    transform: translateY(-4px);

    box-shadow:
        0 20px 42px rgba(82, 82, 235, 0.30);
}


.performance-primary-btn:hover > span {
    transform: translateX(5px);
}


.performance-play-btn {
    display: inline-flex;
    align-items: center;

    gap: 14px;

    color: #111827;

    text-decoration: none;

    font-size: 14px;
}


.play-circle {
    width: 52px;
    height: 52px;

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

    border-radius: 50%;

    border:
        1px solid #DCE1EB;

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

    color: #2563EB;

    font-size: 12px;

    box-shadow:
        0 9px 25px rgba(15, 23, 42, 0.05);

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


.performance-play-btn:hover .play-circle {
    transform: scale(1.08);

    box-shadow:
        0 12px 30px rgba(82, 102, 245, 0.15);
}



/* =========================================================
   DASHBOARD WRAP
========================================================= */

.performance-dashboard-wrap {
    position: relative;

    width: 100%;

    min-height: 570px;

    perspective: 1400px;
}


/* BACKGROUND SHAPES */

.dashboard-back-shape {
    position: absolute;

    border-radius: 34px;

    pointer-events: none;
}


.shape-one {
    width: 520px;
    height: 390px;

    left: 40px;
    top: 55px;

    background:
        linear-gradient(
            135deg,
            rgba(82, 102, 245, 0.11),
            rgba(124, 58, 237, 0.04)
        );

    transform: rotate(-5deg);
}


.shape-two {
    width: 310px;
    height: 310px;

    right: 0;
    top: 12px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(124, 58, 237, 0.10),
            transparent 70%
        );
}


/* =========================================================
   MAIN DASHBOARD
========================================================= */

.performance-dashboard-card {
    position: absolute;

    width: 75%;

    min-width: 530px;

    right: 65px;
    top: 0;

    z-index: 5;

    overflow: hidden;

    border:
        1px solid rgba(225, 229, 239, 0.95);

    border-radius: 22px;

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

    box-shadow:
        0 28px 70px rgba(24, 34, 70, 0.10);

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

    transform-style: preserve-3d;

    transition:
        transform 0.25s ease;

    will-change: transform;
}


/* HEADER */

.performance-dashboard-header {
    height: 62px;

    padding: 0 25px;

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

    border-bottom:
        1px solid #EEF1F6;
}


.performance-dashboard-header h3 {
    margin: 0;

    color: #111827;

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


.performance-dashboard-header button {
    display: flex;
    align-items: center;

    gap: 7px;

    padding: 8px 11px;

    border:
        1px solid #E5E9F0;

    border-radius: 8px;

    background: #FFFFFF;

    color: #475569;

    font-size: 9px;

    cursor: default;
}



/* =========================================================
   METRICS
========================================================= */

.performance-metrics {
    display: grid;

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

    gap: 8px;

    padding: 20px 25px 7px;
}


.performance-metric {
    min-width: 0;

    padding: 7px;
}


.metric-symbol {
    width: 34px;
    height: 34px;

    margin-bottom: 10px;

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

    border-radius: 10px;

    font-size: 15px;
    font-weight: 800;
}


.metric-purple {
    color: #6D28D9;
    background: #F0EAFF;
}


.metric-blue {
    color: #2563EB;
    background: #EAF0FF;
}


.metric-pink {
    color: #EC4899;
    background: #FCE8F3;
}


.metric-orange {
    color: #F97316;
    background: #FFF0E7;
}


.performance-metric > span {
    display: block;

    overflow: hidden;

    color: #667085;

    font-size: 9px;

    white-space: nowrap;
}


.performance-metric > strong {
    display: block;

    margin-top: 5px;

    color: #121827;

    font-size: 20px;

    letter-spacing: -0.5px;
}


.performance-metric > small {
    display: block;

    margin-top: 4px;

    color: #16A34A;

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



/* =========================================================
   GRAPH
========================================================= */

.performance-graph {
    position: relative;

    height: 245px;

    margin: 4px 25px 20px;

    padding-left: 28px;
}


.graph-grid {
    position: absolute;

    left: 30px;
    right: 0;

    height: 1px;

    background:
        #EEF1F6;
}


.grid-one {
    top: 24%;
}


.grid-two {
    top: 43%;
}


.grid-three {
    top: 62%;
}


.grid-four {
    top: 81%;
}


.graph-y-label {
    position: absolute;

    left: 0;

    color: #94A3B8;

    font-size: 7px;
}


.graph-y-40 {
    top: 21%;
}


.graph-y-30 {
    top: 40%;
}


.graph-y-20 {
    top: 59%;
}


.graph-y-10 {
    top: 78%;
}


.performance-chart-svg {
    position: absolute;

    left: 30px;
    right: 0;
    top: 16px;

    width:
        calc(100% - 30px);

    height:
        calc(100% - 44px);
}


.performance-chart-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;

    animation:
        performanceGraphDraw 2.1s ease forwards;
}


.performance-chart-area {
    opacity: 0;

    animation:
        performanceGraphArea 0.9s ease 1.05s forwards;
}


@keyframes performanceGraphDraw {

    to {
        stroke-dashoffset: 0;
    }

}


@keyframes performanceGraphArea {

    to {
        opacity: 1;
    }

}


/* HIGHLIGHT */

.performance-highlight-point {
    position: absolute;

    left: 63%;
    top: 38%;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #2563EB;

    border:
        3px solid #FFFFFF;

    box-shadow:
        0 0 0 5px rgba(37, 99, 235, 0.15);
}


.performance-chart-tooltip {
    position: absolute;

    left: 65%;
    top: 17%;

    min-width: 95px;

    padding: 9px 11px;

    border-radius: 9px;

    background: #FFFFFF;

    border:
        1px solid #EDF0F5;

    box-shadow:
        0 10px 25px rgba(15, 23, 42, 0.09);
}


.performance-chart-tooltip span {
    display: block;

    color: #64748B;

    font-size: 7px;
}


.performance-chart-tooltip strong {
    display: block;

    margin-top: 2px;

    color: #2563EB;

    font-size: 11px;
}


.graph-x-axis {
    position: absolute;

    left: 30px;
    right: 0;
    bottom: 0;

    display: flex;
    justify-content: space-between;

    color: #94A3B8;

    font-size: 7px;
}



/* =========================================================
   FLOATING CARDS
========================================================= */

.performance-floating-card {
    position: absolute;

    z-index: 10;

    width: 145px;

    padding: 17px;

    border:
        1px solid #E8EBF2;

    border-radius: 16px;

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

    box-shadow:
        0 18px 42px rgba(24, 34, 70, 0.10);

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


.leads-card {
    left: 0;
    top: 150px;

    animation:
        performanceFloatOne 4.2s ease-in-out infinite;
}


.roas-card {
    right: 0;
    top: 200px;

    animation:
        performanceFloatTwo 4.7s ease-in-out infinite;
}


.performance-floating-card > span {
    display: block;

    margin-top: 10px;

    color: #475569;

    font-size: 9px;
}


.performance-floating-card > strong {
    display: block;

    margin-top: 5px;

    color: #111827;

    font-size: 17px;
}


.performance-floating-card > small {
    display: block;

    margin-top: 4px;

    color: #16A34A;

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


.performance-floating-card svg {
    width: 100%;
    height: 28px;

    margin-top: 8px;
}


.floating-card-icon {
    width: 32px;
    height: 32px;

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

    border-radius: 10px;

    font-size: 13px;
}


.leads-icon {
    color: #7C3AED;

    background:
        #F0EAFF;
}


.roas-icon {
    color: #16A34A;

    background:
        #EAF9EF;
}


@keyframes performanceFloatOne {

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

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

}


@keyframes performanceFloatTwo {

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

    50% {
        transform: translateY(8px);
    }

}



/* =========================================================
   BOTTOM DASHBOARD CARDS
========================================================= */

.performance-bottom-card {
    position: absolute;

    z-index: 7;

    bottom: 5px;

    min-height: 190px;

    padding: 20px;

    border:
        1px solid #E8EBF2;

    border-radius: 17px;

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

    box-shadow:
        0 18px 40px rgba(24, 34, 70, 0.08);
}


.performance-bottom-card h4 {
    margin: 0 0 17px;

    color: #111827;

    font-size: 11px;
}


.channels-card {
    left: 80px;

    width: 44%;
}


.campaigns-card {
    right: 40px;

    width: 42%;
}


/* CHANNELS */

.channel-content {
    display: grid;

    grid-template-columns:
        115px 1fr;

    align-items: center;

    gap: 15px;
}


.channel-ring {
    width: 95px;
    height: 95px;

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

    border-radius: 50%;

    background:
        conic-gradient(
            #2563EB 0deg 150deg,
            #7C3AED 150deg 245deg,
            #F97316 245deg 300deg,
            #CBD5E1 300deg 360deg
        );
}


.channel-ring-inner {
    width: 59px;
    height: 59px;

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

    border-radius: 50%;

    background: #FFFFFF;
}


.channel-ring-inner strong {
    color: #172033;

    font-size: 16px;
}


.channel-list {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.channel-list > div {
    display: grid;

    grid-template-columns:
        8px 1fr auto;

    align-items: center;

    gap: 7px;

    font-size: 8px;
}


.channel-list i {
    width: 7px;
    height: 7px;

    border-radius: 50%;
}


.channel-blue {
    background: #2563EB;
}


.channel-purple {
    background: #7C3AED;
}


.channel-orange {
    background: #F97316;
}


.channel-grey {
    background: #CBD5E1;
}


.channel-list span {
    color: #475569;
}


.channel-list strong {
    color: #334155;

    font-size: 8px;
}



/* CAMPAIGNS */

.campaign-row {
    min-height: 37px;

    display: grid;

    grid-template-columns:
        29px 1fr auto 15px;

    align-items: center;

    gap: 8px;

    border-bottom:
        1px solid #F1F3F7;
}


.campaign-row:last-child {
    border-bottom: none;
}


.campaign-icon {
    width: 26px;
    height: 26px;

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

    border-radius: 7px;

    color: #FFFFFF;

    font-size: 9px;
}


.campaign-blue {
    background: #2563EB;
}


.campaign-purple {
    background: #7C3AED;
}


.campaign-orange {
    background: #F97316;
}


.campaign-row p {
    margin: 0;

    color: #334155;

    font-size: 8px;
}


.campaign-active {
    padding: 5px 8px;

    border-radius: 6px;

    background: #E9F9EE;

    color: #16A34A;

    font-size: 7px;
}


.campaign-row > strong {
    color: #64748B;

    font-size: 14px;
}



/* =========================================================
   TRUST STRIP
========================================================= */

.performance-trust-strip {
    position: relative;
    z-index: 6;

    max-width: 1480px;

    min-height: 105px;

    margin: 35px auto 0;

    padding: 20px 40px;

    display: grid;

    grid-template-columns:
        1fr 1px 1fr 1px 1fr 1px 1.15fr;

    align-items: center;

    gap: 28px;

    border:
        1px solid #E8EBF2;

    border-radius: 22px;

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

    box-shadow:
        0 18px 45px rgba(24, 34, 70, 0.06);
}


.performance-trust-divider {
    width: 1px;
    height: 55px;

    background: #E5E9F0;
}


.performance-trust-item {
    display: flex;
    align-items: center;

    gap: 17px;
}


.trust-icon {
    width: 56px;
    height: 56px;

    flex: 0 0 56px;

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

    border-radius: 50%;

    font-size: 20px;
}


.trust-purple {
    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #6366F1,
            #7C3AED
        );
}


.trust-blue {
    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #3B82F6,
            #2563EB
        );
}


.trust-orange {
    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #FB923C,
            #F97316
        );
}


.trust-green {
    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #22C55E,
            #16A34A
        );
}


.performance-trust-item strong {
    display: block;

    color: #2563EB;

    font-size: 27px;

    letter-spacing: -1px;
}


.performance-trust-item:nth-of-type(5) strong {
    color: #F97316;
}


.performance-trust-item span {
    display: block;

    margin-top: 3px;

    color: #64748B;

    font-size: 12px;
}


.performance-trust-item .trust-text {
    color: #111827;

    font-size: 19px;

    letter-spacing: -0.5px;
}



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

.performance-hero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;
}


.performance-glow-left {
    width: 360px;
    height: 360px;

    left: -200px;
    top: 170px;

    background:
        rgba(59, 130, 246, 0.11);
}


.performance-glow-right {
    width: 420px;
    height: 420px;

    right: -190px;
    top: 180px;

    background:
        rgba(124, 58, 237, 0.10);
}



/* =========================================================
   RESPONSIVE - LAPTOP
========================================================= */

@media (max-width: 1250px) {

    .performance-home-hero {
        padding-left: 4%;
        padding-right: 4%;
    }


    .performance-hero-main {
        grid-template-columns:
            0.82fr 1.18fr;

        gap: 35px;
    }


    .performance-dashboard-wrap {
        transform: scale(0.92);

        transform-origin:
            center right;
    }

}



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

@media (max-width: 1000px) {

    .performance-home-hero {
        padding:
            65px 6%
            45px;
    }


    .performance-hero-main {
        display: block;
    }


    .performance-hero-copy {
        max-width: 700px;

        margin: 0 auto 65px;

        text-align: center;
    }


    .performance-eyebrow {
        margin-left: auto;
        margin-right: auto;
    }


    .performance-title-line {
        margin-left: auto;
        margin-right: auto;
    }


    .performance-hero-copy > p {
        margin-left: auto;
        margin-right: auto;
    }


    .performance-hero-buttons {
        justify-content: center;
    }


    .performance-dashboard-wrap {
        max-width: 760px;

        margin: 0 auto;

        transform: none;
    }


    .performance-trust-strip {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 25px;
    }


    .performance-trust-divider {
        display: none;
    }

}



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

@media (max-width: 700px) {

    .performance-home-hero {
        padding:
            50px 20px
            35px;
    }


    .performance-hero-copy {
        margin-bottom: 50px;

        text-align: left;
    }


    .performance-eyebrow {
        margin-left: 0;

        font-size: 10px;

        padding:
            9px 14px;
    }


    .performance-hero-copy h1 {
        font-size: 48px;

        letter-spacing: -2.5px;
    }


    .performance-title-line {
        margin-left: 0;
    }


    .performance-hero-copy > p {
        margin-left: 0;

        font-size: 15px;
    }


    .performance-hero-buttons {
        align-items: stretch;

        flex-direction: column;
    }


    .performance-primary-btn {
        width: 100%;
    }


    .performance-play-btn {
        justify-content: center;
    }


    .performance-dashboard-wrap {
        min-height: auto;
    }


    .performance-dashboard-card {
        position: relative;

        width: 100%;
        min-width: 0;

        right: auto;
        top: auto;
    }


    .performance-metrics {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .performance-floating-card,
    .performance-bottom-card {
        display: none;
    }


    .performance-trust-strip {
        grid-template-columns: 1fr;

        padding:
            24px;
    }

}



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

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

    .performance-chart-line,
    .performance-chart-area,
    .performance-floating-card {
        animation: none !important;
    }

}/* =========================================================
   AFFYADS HOME HERO - FINAL BLUE PURPLE UI
   APPEND ONLY
========================================================= */

.affy-performance-hero {
    position: relative;
    min-height: calc(100vh - 80px);

    padding: 58px 6% 28px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 4% 36%,
            rgba(37, 99, 235, 0.08),
            transparent 29%
        ),
        radial-gradient(
            circle at 94% 54%,
            rgba(124, 58, 237, 0.10),
            transparent 30%
        ),
        #ffffff;
}


/* =========================================================
   HERO GRID
========================================================= */

.affy-hero-grid {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.86fr 1.14fr;

    align-items: center;

    gap: 65px;

    position: relative;
    z-index: 4;
}


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

.affy-hero-content {
    max-width: 650px;
}


.affy-hero-tag {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 30px;

    padding: 10px 17px;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.05);

    border: 1px solid rgba(59, 130, 246, 0.12);

    color: #3B82F6;

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

    letter-spacing: 1.6px;

    box-shadow:
        0 8px 26px rgba(37, 99, 235, 0.05);
}


.affy-green-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: #22C55E;

    box-shadow:
        0 0 0 5px rgba(34, 197, 94, 0.10),
        0 0 12px rgba(34, 197, 94, 0.55);
}


/* HEADING */

.affy-hero-content h1 {
    margin: 0;

    max-width: 640px;

    color: #111827;

    font-size: clamp(60px, 5.1vw, 86px);

    line-height: 1.02;

    letter-spacing: -4px;

    font-weight: 760;
}


.affy-hero-content h1 span {
    display: inline-block;

    background:
        linear-gradient(
            90deg,
            #2563EB 0%,
            #3B82F6 35%,
            #6D28D9 72%,
            #7C3AED 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* TITLE LINE */

.affy-title-line {
    width: 60px;
    height: 3px;

    margin-top: 27px;

    border-radius: 30px;

    background:
        linear-gradient(
            90deg,
            #2563EB,
            #7C3AED
        );
}


/* DESCRIPTION */

.affy-hero-content > p {
    max-width: 590px;

    margin: 29px 0 0;

    color: #64748B;

    font-size: 18px;

    line-height: 1.75;
}


/* =========================================================
   BUTTONS
========================================================= */

.affy-hero-actions {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-top: 34px;
}


.affy-primary-btn,
.affy-secondary-btn {
    min-height: 57px;

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

    gap: 22px;

    padding: 0 27px;

    border-radius: 13px;

    text-decoration: none;

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

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


.affy-primary-btn {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563EB,
            #3B82F6 42%,
            #7C3AED 100%
        );

    box-shadow:
        0 14px 32px rgba(59, 130, 246, 0.22);
}


.affy-secondary-btn {
    color: #111827;

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

    border: 1px solid #DFE4EE;
}


.affy-primary-btn:hover,
.affy-secondary-btn:hover {
    transform: translateY(-3px);
}



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

.affy-dashboard-wrap {
    position: relative;

    width: 100%;

    max-width: 760px;

    min-height: 545px;

    perspective: 1400px;
}


.affy-dashboard-bg {
    position: absolute;

    width: 78%;
    height: 70%;

    top: 15%;
    left: 12%;

    border-radius: 45px;

    background:
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.12),
            rgba(124, 58, 237, 0.09)
        );

    filter: blur(45px);

    transform: rotate(-5deg);
}


/* =========================================================
   DASHBOARD
========================================================= */

.affy-dashboard {
    position: absolute;

    width: 78%;

    right: 55px;
    top: 0;

    padding: 23px;

    border-radius: 24px;

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

    border:
        1px solid rgba(226,232,240,0.92);

    box-shadow:
        0 30px 75px rgba(30, 41, 90, 0.11);

    backdrop-filter: blur(20px);

    transform-style: preserve-3d;

    transition:
        transform 0.28s ease;

    will-change: transform;
}


/* HEADER */

.affy-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}


.affy-dashboard-header > div:first-child > span {
    display: block;

    color: #7C3AED;

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

    letter-spacing: 1.5px;
}


.affy-dashboard-header h3 {
    margin: 4px 0 0;

    color: #111827;

    font-size: 18px;
}


.affy-dashboard-filter {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 7px 10px;

    border: 1px solid #E5E7EB;

    border-radius: 8px;

    color: #64748B;

    font-size: 9px;

    background: #FFFFFF;
}


/* =========================================================
   METRICS
========================================================= */

.affy-metric-grid {
    display: grid;

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

    gap: 10px;
}


.affy-metric {
    min-width: 0;

    padding: 12px;

    border-radius: 14px;

    background: #FFFFFF;

    border: 1px solid #EEF2F7;

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


.affy-metric:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 28px rgba(59, 130, 246, 0.10);
}


.metric-icon {
    width: 34px;
    height: 34px;

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

    margin-bottom: 10px;

    border-radius: 10px;

    font-weight: 800;
}


.icon-blue {
    color: #2563EB;

    background:
        rgba(59, 130, 246, 0.10);
}


.icon-purple {
    color: #7C3AED;

    background:
        rgba(124, 58, 237, 0.10);
}


.affy-metric > span {
    display: block;

    color: #7C8799;

    font-size: 9px;
}


.affy-metric > strong {
    display: block;

    margin-top: 4px;

    color: #111827;

    font-size: 18px;
}


.affy-metric > small {
    display: block;

    margin-top: 3px;

    color: #16A34A;

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


/* =========================================================
   CHART
========================================================= */

.affy-chart-card {
    margin-top: 15px;

    padding: 16px;

    border-radius: 17px;

    border: 1px solid #EEF2F7;

    background: #FFFFFF;
}


.affy-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.affy-chart-header span {
    display: block;

    color: #7C8799;

    font-size: 9px;
}


.affy-chart-header strong {
    display: block;

    margin-top: 3px;

    color: #16A34A;

    font-size: 16px;
}


.affy-chart-range {
    padding: 6px 9px;

    border-radius: 7px;

    background: #F8FAFC;

    color: #64748B;

    font-size: 8px;
}


.affy-chart-area {
    position: relative;

    height: 165px;

    margin-top: 13px;

    overflow: hidden;
}


.chart-grid-line {
    position: absolute;

    left: 0;

    width: 100%;

    height: 1px;

    background: #EEF2F7;
}


.line-a {
    top: 27%;
}


.line-b {
    top: 52%;
}


.line-c {
    top: 77%;
}


.affy-chart-svg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


.affy-chart-line {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;

    animation:
        affyChartDraw 2.1s ease forwards;
}


.affy-chart-fill {
    opacity: 0;

    animation:
        affyFillAppear 0.9s ease 1.1s forwards;
}


@keyframes affyChartDraw {
    to {
        stroke-dashoffset: 0;
    }
}


@keyframes affyFillAppear {
    to {
        opacity: 1;
    }
}


.affy-chart-point {
    position: absolute;

    left: 63%;
    top: 38%;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #2563EB;

    border: 3px solid #FFFFFF;

    box-shadow:
        0 0 0 5px rgba(37,99,235,0.13);
}


.affy-chart-tooltip {
    position: absolute;

    left: 57%;
    top: 9%;

    padding: 8px 11px;

    border-radius: 9px;

    background: #FFFFFF;

    border: 1px solid #EEF2F7;

    box-shadow:
        0 10px 25px rgba(30,41,90,0.09);
}


.affy-chart-tooltip span {
    display: block;

    color: #64748B;

    font-size: 7px;
}


.affy-chart-tooltip strong {
    display: block;

    color: #2563EB;

    margin-top: 2px;

    font-size: 11px;
}


/* =========================================================
   DASHBOARD BOTTOM
========================================================= */

.affy-dashboard-bottom {
    display: grid;

    grid-template-columns: 1fr 1fr auto;

    gap: 10px;

    margin-top: 14px;
}


.affy-mini-card {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px;

    border-radius: 12px;

    border: 1px solid #EEF2F7;

    background: #F8FAFC;
}


.mini-icon {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

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

    border-radius: 9px;
}


.mini-blue {
    color: #2563EB;

    background:
        rgba(59,130,246,0.10);
}


.mini-purple {
    color: #7C3AED;

    background:
        rgba(124,58,237,0.10);
}


.affy-mini-card span {
    display: block;

    color: #7C8799;

    font-size: 8px;
}


.affy-mini-card strong {
    display: block;

    margin-top: 2px;

    color: #111827;

    font-size: 13px;
}


.affy-status-card {
    display: flex;
    align-items: center;

    gap: 7px;

    padding: 0 12px;

    border-radius: 12px;

    background: rgba(34,197,94,0.07);

    color: #16A34A;

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


.status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22C55E;

    animation:
        affyStatusPulse 1.8s infinite;
}


@keyframes affyStatusPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 0 rgba(34,197,94,0.28);
    }

    50% {
        box-shadow:
            0 0 0 7px rgba(34,197,94,0);
    }
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.affy-floating-card {
    position: absolute;

    z-index: 8;

    width: 140px;

    padding: 15px;

    border-radius: 15px;

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

    border:
        1px solid #E8EDF5;

    box-shadow:
        0 17px 40px rgba(30,41,90,0.11);
}


.affy-leads-card {
    left: 0;
    top: 175px;

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


.affy-roas-card {
    right: 0;
    top: 225px;

    animation:
        affyFloatTwo 4.4s ease-in-out infinite;
}


.floating-icon {
    width: 31px;
    height: 31px;

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

    border-radius: 9px;

    color: #7C3AED;

    background:
        rgba(124,58,237,0.10);
}


.affy-floating-card > span {
    display: block;

    margin-top: 9px;

    color: #64748B;

    font-size: 8px;
}


.affy-floating-card > strong {
    display: block;

    margin-top: 4px;

    color: #111827;

    font-size: 17px;
}


.affy-floating-card > small {
    display: block;

    margin-top: 3px;

    color: #16A34A;

    font-size: 8px;
}


@keyframes affyFloatOne {

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

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


@keyframes affyFloatTwo {

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

    50% {
        transform: translateY(8px);
    }
}


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

.affy-hero-stats {
    position: relative;
    z-index: 5;

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

    min-height: 100px;

    margin: 32px auto 0;

    padding: 18px 35px;

    display: grid;
    grid-template-columns:
        1fr 1px 1fr 1px 1fr 1px 1.15fr;

    align-items: center;

    gap: 24px;

    border-radius: 21px;

    border: 1px solid #E8EDF5;

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

    box-shadow:
        0 16px 40px rgba(30,41,90,0.06);
}


.affy-stat-divider {
    width: 1px;
    height: 50px;

    background: #E5EAF2;
}


.affy-stat-item {
    display: flex;
    align-items: center;

    gap: 15px;
}


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

    flex: 0 0 54px;

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

    border-radius: 50%;

    color: #FFFFFF;

    font-size: 18px;
}


.stat-purple {
    background:
        linear-gradient(
            135deg,
            #6D28D9,
            #7C3AED
        );
}


.stat-blue {
    background:
        linear-gradient(
            135deg,
            #2563EB,
            #3B82F6
        );
}


.stat-green {
    background:
        linear-gradient(
            135deg,
            #22C55E,
            #16A34A
        );
}


.affy-stat-item strong {
    display: block;

    color: #2563EB;

    font-size: 25px;

    letter-spacing: -1px;
}


.affy-stat-item:nth-of-type(5) strong {
    color: #7C3AED;
}


.affy-stat-item span {
    display: block;

    margin-top: 3px;

    color: #64748B;

    font-size: 11px;
}


.affy-stat-item .result-text {
    color: #111827;

    font-size: 18px;

    letter-spacing: -0.4px;
}


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

.affy-hero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;
}


.glow-left {
    width: 330px;
    height: 330px;

    left: -170px;
    top: 220px;

    background:
        rgba(37,99,235,0.10);
}


.glow-right {
    width: 420px;
    height: 420px;

    right: -190px;
    top: 200px;

    background:
        rgba(124,58,237,0.11);
}


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

@media (max-width: 1050px) {

    .affy-performance-hero {
        padding:
            60px 5%
            35px;
    }


    .affy-hero-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .affy-hero-content {
        margin: 0 auto;

        text-align: center;
    }


    .affy-hero-tag,
    .affy-title-line {
        margin-left: auto;
        margin-right: auto;
    }


    .affy-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }


    .affy-hero-actions {
        justify-content: center;
    }


    .affy-dashboard-wrap {
        margin: 0 auto;
    }


    .affy-hero-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .affy-stat-divider {
        display: none;
    }
}


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

@media (max-width: 700px) {

    .affy-performance-hero {
        padding:
            48px 20px
            30px;
    }


    .affy-hero-content {
        text-align: left;
    }


    .affy-hero-tag,
    .affy-title-line {
        margin-left: 0;
    }


    .affy-hero-content h1 {
        font-size: 48px;

        letter-spacing: -2.5px;
    }


    .affy-hero-content > p {
        margin-left: 0;

        font-size: 15px;
    }


    .affy-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }


    .affy-primary-btn,
    .affy-secondary-btn {
        width: 100%;
    }


    .affy-dashboard-wrap {
        min-height: auto;
    }


    .affy-dashboard {
        position: relative;

        width: 100%;

        right: auto;
    }


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


    .affy-dashboard-bottom {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .affy-status-card {
        min-height: 45px;
    }


    .affy-floating-card {
        display: none;
    }


    .affy-hero-stats {
        grid-template-columns: 1fr;

        padding: 22px;
    }
}


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

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

    .affy-chart-line,
    .affy-chart-fill,
    .affy-floating-card,
    .status-dot {
        animation: none !important;
    }
}/* =========================================================
   HOME HERO - DESKTOP SCREEN FIT FINAL FIX
========================================================= */

@media (min-width: 1100px) {

    .affy-performance-hero {
        height: calc(100vh - 80px) !important;
        min-height: 760px !important;

        padding-top: 38px !important;
        padding-bottom: 18px !important;

        box-sizing: border-box;
    }


    .affy-hero-grid {
        min-height: 520px;
        gap: 55px !important;
    }


    /* LEFT SIDE */
    .affy-hero-tag {
        margin-bottom: 24px !important;
    }


    .affy-hero-content h1 {
        font-size: clamp(58px, 4.8vw, 82px) !important;
    }


    .affy-title-line {
        margin-top: 22px !important;
    }


    .affy-hero-content > p {
        margin-top: 24px !important;
    }


    .affy-hero-actions {
        margin-top: 28px !important;
    }


    /* RIGHT DASHBOARD */
    .affy-dashboard-wrap {
        min-height: 500px !important;
    }


    .affy-dashboard {
        top: 0 !important;
    }


    .affy-chart-area {
        height: 145px !important;
    }


    /* BOTTOM STATS */
    .affy-hero-stats {
        min-height: 82px !important;

        margin-top: 16px !important;

        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }


    .stat-icon {
        width: 48px !important;
        height: 48px !important;

        flex-basis: 48px !important;
    }


    .affy-stat-divider {
        height: 42px !important;
    }

}/* =========================================================
   AFFYADS FINAL HOME HERO
   ORIGINAL BLUE PURPLE BRAND COLORS
   APPEND ONLY
========================================================= */

.affy-final-hero {
    position: relative;

    min-height: calc(100vh - 80px);

    padding: 65px 6% 35px;

    box-sizing: border-box;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 5% 40%,
            rgba(79, 99, 233, 0.08),
            transparent 29%
        ),
        radial-gradient(
            circle at 94% 55%,
            rgba(108, 78, 235, 0.10),
            transparent 30%
        ),
        #ffffff;
}


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

.affy-final-container {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(500px, 0.88fr)
        minmax(650px, 1.12fr);

    align-items: center;

    gap: 65px;

    position: relative;

    z-index: 4;
}


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

.affy-final-content {
    max-width: 670px;
}


/* TAG */

.affy-final-tag {
    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 11px 19px;

    margin-bottom: 32px;

    border-radius: 999px;

    background:
        rgba(79, 99, 233, 0.055);

    border:
        1px solid rgba(91, 93, 235, 0.10);

    color: #5869E9;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.6px;

    box-shadow:
        0 9px 28px rgba(79, 99, 233, 0.05);
}


.affy-final-green-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: #69CF76;

    box-shadow:
        0 0 0 6px rgba(105, 207, 118, 0.10),
        0 0 12px rgba(105, 207, 118, 0.52);
}


/* TITLE */

.affy-final-content h1 {
    margin: 0;

    max-width: 670px;

    color: #111522;

    font-size:
        clamp(62px, 5.3vw, 88px);

    font-weight: 760;

    line-height: 1.02;

    letter-spacing: -4px;
}


.affy-final-content h1 span {
    display: inline-block;

    background:
        linear-gradient(
            90deg,
            #4F63E9 0%,
            #5865EA 46%,
            #6C4EEB 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* TITLE LINE */

.affy-final-title-line {
    width: 64px;
    height: 3px;

    margin-top: 28px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #4F63E9,
            #6C4EEB
        );
}


/* DESCRIPTION */

.affy-final-content > p {
    max-width: 620px;

    margin: 30px 0 0;

    color: #66758F;

    font-size: 18px;

    line-height: 1.8;
}


/* =========================================================
   BUTTONS
========================================================= */

.affy-final-buttons {
    display: flex;

    align-items: center;

    gap: 17px;

    margin-top: 35px;
}


.affy-final-primary,
.affy-final-secondary {
    min-height: 57px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 23px;

    padding: 0 28px;

    border-radius: 13px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

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


.affy-final-primary {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #4F63E9 0%,
            #5863EA 48%,
            #6C4EEB 100%
        );

    box-shadow:
        0 15px 34px rgba(91, 82, 232, 0.24);
}


.affy-final-secondary {
    color: #111522;

    background: #ffffff;

    border:
        1px solid #DDE3ED;
}


.affy-final-primary:hover,
.affy-final-secondary:hover {
    transform:
        translateY(-3px);
}


.affy-final-primary:hover {
    box-shadow:
        0 20px 42px rgba(91, 82, 232, 0.30);
}



/* =========================================================
   DASHBOARD AREA
========================================================= */

.affy-final-dashboard-area {
    position: relative;

    width: 100%;

    max-width: 780px;

    min-height: 650px;

    perspective: 1400px;
}


.affy-dashboard-soft-shape {
    position: absolute;

    width: 80%;

    height: 65%;

    top: 13%;

    left: 11%;

    border-radius: 45px;

    background:
        linear-gradient(
            135deg,
            rgba(79, 99, 233, 0.12),
            rgba(108, 78, 235, 0.08)
        );

    filter: blur(48px);

    transform:
        rotate(-5deg);
}



/* =========================================================
   MAIN DASHBOARD
========================================================= */

.affy-final-dashboard {
    position: absolute;

    width: 78%;

    right: 60px;

    top: 0;

    padding: 24px;

    border-radius: 23px;

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

    border:
        1px solid #E6EAF2;

    box-shadow:
        0 32px 80px rgba(33, 40, 88, 0.11);

    backdrop-filter:
        blur(20px);

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

    transform-style:
        preserve-3d;

    transition:
        transform 0.3s ease;

    will-change:
        transform;
}


/* HEADER */

.affy-final-dashboard-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 21px;
}


.dashboard-kicker {
    display: block;

    color: #6C4EEB;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.6px;
}


.affy-final-dashboard-header h3 {
    margin: 4px 0 0;

    color: #111522;

    font-size: 19px;
}


.dashboard-month {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 7px 10px;

    border-radius: 8px;

    border:
        1px solid #E5E9F1;

    background: #ffffff;

    color: #66758F;

    font-size: 9px;
}



/* =========================================================
   METRICS
========================================================= */

.affy-final-metrics {
    display: grid;

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

    gap: 11px;
}


.affy-final-metric {
    min-width: 0;

    padding: 13px;

    border:
        1px solid #EEF1F6;

    border-radius: 14px;

    background:
        #ffffff;

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


.affy-final-metric:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 12px 28px rgba(79, 99, 233, 0.10);
}


.final-metric-icon {
    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    margin-bottom: 10px;

    font-weight: 800;
}


.final-blue-icon {
    color: #4F63E9;

    background:
        rgba(79, 99, 233, 0.10);
}


.final-purple-icon {
    color: #6C4EEB;

    background:
        rgba(108, 78, 235, 0.10);
}


.affy-final-metric > span {
    display: block;

    color: #7B879B;

    font-size: 9px;
}


.affy-final-metric > strong {
    display: block;

    margin-top: 5px;

    color: #111522;

    font-size: 18px;
}


.affy-final-metric > small {
    display: block;

    margin-top: 4px;

    color: #59B865;

    font-size: 8px;

    font-weight: 700;
}



/* =========================================================
   CHART
========================================================= */

.affy-final-chart {
    margin-top: 16px;

    padding: 17px;

    border-radius: 17px;

    border:
        1px solid #EEF1F6;

    background:
        #ffffff;
}


.affy-chart-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.affy-chart-top span {
    display: block;

    color: #7C8799;

    font-size: 9px;
}


.affy-chart-top strong {
    display: block;

    margin-top: 3px;

    color: #59B865;

    font-size: 16px;
}


.affy-last-days {
    padding: 6px 9px;

    border-radius: 7px;

    color: #66758F;

    background:
        #F8FAFC;

    font-size: 8px;
}


.affy-final-chart-area {
    position: relative;

    height: 180px;

    margin-top: 14px;

    overflow: hidden;
}


.final-grid-line {
    position: absolute;

    left: 0;

    width: 100%;

    height: 1px;

    background:
        #EEF1F6;
}


.grid-line-1 {
    top: 27%;
}


.grid-line-2 {
    top: 52%;
}


.grid-line-3 {
    top: 77%;
}


.affy-final-chart-svg {
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;
}


.affy-final-chart-line {
    stroke-dasharray:
        1200;

    stroke-dashoffset:
        1200;

    animation:
        affyFinalGraphDraw
        2.6s
        cubic-bezier(.2,.7,.3,1)
        forwards;
}


.affy-final-chart-fill {
    opacity: 0;

    animation:
        affyFinalFill
        1.2s
        ease
        1.1s
        forwards;
}


@keyframes affyFinalGraphDraw {

    to {
        stroke-dashoffset: 0;
    }

}


@keyframes affyFinalFill {

    to {
        opacity: 1;
    }

}


.affy-final-chart-point {
    position: absolute;

    left: 63%;

    top: 37%;

    width: 13px;

    height: 13px;

    border-radius: 50%;

    background:
        #5863EA;

    border:
        3px solid #ffffff;

    box-shadow:
        0 0 0 5px rgba(88, 99, 234, 0.14);

    animation:
        affyPointPulse
        2s ease-in-out infinite;
}


@keyframes affyPointPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 5px rgba(88, 99, 234, 0.12);
    }

    50% {
        box-shadow:
            0 0 0 10px rgba(88, 99, 234, 0.02);
    }

}


.affy-final-tooltip {
    position: absolute;

    left: 57%;

    top: 9%;

    padding: 8px 11px;

    border-radius: 9px;

    background: #ffffff;

    border:
        1px solid #EEF1F6;

    box-shadow:
        0 10px 25px rgba(33, 40, 88, 0.09);

    animation:
        affyTooltipFloat
        3.5s ease-in-out infinite;
}


.affy-final-tooltip span {
    display: block;

    color: #66758F;

    font-size: 7px;
}


.affy-final-tooltip strong {
    display: block;

    margin-top: 2px;

    color: #5863EA;

    font-size: 11px;
}


@keyframes affyTooltipFloat {

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

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

}



/* =========================================================
   DASHBOARD BOTTOM
========================================================= */

.affy-dashboard-bottom {
    display: grid;

    grid-template-columns:
        1fr 1fr auto;

    gap: 10px;

    margin-top: 15px;
}


.affy-bottom-mini {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px;

    border-radius: 12px;

    border:
        1px solid #EEF1F6;

    background:
        #F9FAFC;
}


.affy-bottom-icon {
    width: 31px;

    height: 31px;

    flex: 0 0 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    color:
        #5863EA;

    background:
        rgba(88, 99, 234, 0.10);
}


.affy-bottom-mini span {
    display: block;

    color: #7C8799;

    font-size: 8px;
}


.affy-bottom-mini strong {
    display: block;

    margin-top: 2px;

    color: #111522;

    font-size: 13px;
}


.affy-campaign-status {
    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        0 12px;

    border-radius:
        12px;

    color:
        #5DAE68;

    background:
        rgba(105, 207, 118, 0.08);

    font-size:
        8px;

    font-weight:
        700;
}


.affy-campaign-status > span {
    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        #69CF76;

    animation:
        finalStatusPulse
        1.8s infinite;
}


@keyframes finalStatusPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 0
            rgba(105, 207, 118, 0.26);
    }

    50% {
        box-shadow:
            0 0 0 7px
            rgba(105, 207, 118, 0);
    }

}



/* =========================================================
   FLOATING CARDS
========================================================= */

.affy-final-floating {
    position: absolute;

    z-index: 10;

    width: 145px;

    padding: 16px;

    border-radius: 16px;

    border:
        1px solid #E6EAF2;

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

    box-shadow:
        0 19px 45px
        rgba(33, 40, 88, 0.11);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.affy-floating-leads {
    left: 0;

    top: 175px;

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


.affy-floating-roas {
    right: 0;

    top: 235px;

    animation:
        finalCardFloatTwo
        4.6s ease-in-out infinite;
}


.floating-top-icon {
    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    color:
        #6C4EEB;

    background:
        rgba(108, 78, 235, 0.10);
}


.affy-final-floating > span {
    display: block;

    margin-top: 9px;

    color: #66758F;

    font-size: 8px;
}


.affy-final-floating > strong {
    display: block;

    margin-top: 4px;

    color: #111522;

    font-size: 17px;
}


.affy-final-floating > small {
    display: block;

    margin-top: 3px;

    color: #5DAE68;

    font-size: 8px;
}


.affy-final-floating svg {
    width: 100%;

    height: 27px;

    margin-top: 7px;
}


.mini-motion-line {
    stroke-dasharray:
        180;

    stroke-dashoffset:
        180;

    animation:
        miniGraphDraw
        2.3s ease forwards;
}


@keyframes miniGraphDraw {

    to {
        stroke-dashoffset: 0;
    }

}


@keyframes finalCardFloatOne {

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

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

}


@keyframes finalCardFloatTwo {

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

    50% {
        transform:
            translateY(8px);
    }

}



/* =========================================================
   DECORATIVE DOTS
========================================================= */

.affy-final-dots {
    position: absolute;

    display: grid;

    grid-template-columns:
        repeat(3, 4px);

    gap: 7px;

    opacity: 0.65;
}


.affy-final-dots span {
    width: 4px;

    height: 4px;

    border-radius: 50%;

    background:
        #5863EA;
}


.affy-dots-top {
    right: 40px;

    top: 12px;
}


.affy-dots-bottom {
    left: 5px;

    bottom: 60px;
}



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

.affy-final-glow {
    position: absolute;

    border-radius: 50%;

    filter:
        blur(110px);

    pointer-events: none;
}


.affy-glow-left {
    width: 340px;

    height: 340px;

    left: -180px;

    top: 200px;

    background:
        rgba(79, 99, 233, 0.10);
}


.affy-glow-right {
    width: 450px;

    height: 450px;

    right: -210px;

    top: 190px;

    background:
        rgba(108, 78, 235, 0.11);
}



/* =========================================================
   DESKTOP SCREEN FIT
========================================================= */

@media (min-width: 1100px) {

    .affy-final-hero {
        height:
            calc(100vh - 80px);

        min-height:
            740px;
    }

}



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

@media (max-width: 1099px) {

    .affy-final-hero {
        padding:
            60px 5%
            50px;
    }


    .affy-final-container {
        grid-template-columns:
            1fr;

        gap:
            60px;
    }


    .affy-final-content {
        margin:
            0 auto;

        text-align:
            center;
    }


    .affy-final-tag,
    .affy-final-title-line {
        margin-left:
            auto;

        margin-right:
            auto;
    }


    .affy-final-content > p {
        margin-left:
            auto;

        margin-right:
            auto;
    }


    .affy-final-buttons {
        justify-content:
            center;
    }


    .affy-final-dashboard-area {
        margin:
            0 auto;
    }

}



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

@media (max-width: 700px) {

    .affy-final-hero {
        padding:
            48px 20px
            40px;
    }


    .affy-final-content {
        text-align:
            left;
    }


    .affy-final-tag,
    .affy-final-title-line {
        margin-left:
            0;
    }


    .affy-final-content h1 {
        font-size:
            48px;

        letter-spacing:
            -2.5px;
    }


    .affy-final-content > p {
        margin-left:
            0;

        font-size:
            15px;
    }


    .affy-final-buttons {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .affy-final-primary,
    .affy-final-secondary {
        width:
            100%;
    }


    .affy-final-dashboard-area {
        min-height:
            auto;
    }


    .affy-final-dashboard {
        position:
            relative;

        width:
            100%;

        right:
            auto;

        top:
            auto;
    }


    .affy-final-metrics {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .affy-final-floating,
    .affy-final-dots {
        display:
            none;
    }


    .affy-dashboard-bottom {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .affy-campaign-status {
        min-height:
            45px;
    }

}



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

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

    .affy-final-chart-line,
    .affy-final-chart-fill,
    .affy-final-chart-point,
    .affy-final-tooltip,
    .affy-final-floating,
    .mini-motion-line,
    .affy-campaign-status > span {
        animation:
            none !important;
    }

}/* =====================================================
   AFFYADS EXACT BUTTON COLOR MATCH
   Header Let's Talk = Master Reference
===================================================== */

.affy-final-primary {
    background: linear-gradient(
        135deg,
        #4F63E9 0%,
        #5B56EB 50%,
        #6C3FE8 100%
    ) !important;

    color: #ffffff !important;

    box-shadow:
        0 14px 32px rgba(91, 86, 235, 0.22) !important;
}


/* Customers text same family */

.affy-final-content h1 span {
    background: linear-gradient(
        90deg,
        #4F63E9 0%,
        #565EEB 48%,
        #6C3FE8 100%
    ) !important;

    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}


/* Small underline same gradient */

.affy-final-title-line {
    background: linear-gradient(
        90deg,
        #4F63E9 0%,
        #6C3FE8 100%
    ) !important;
}


/* Primary button hover */

.affy-final-primary:hover {
    background: linear-gradient(
        135deg,
        #485DE6 0%,
        #5751E8 50%,
        #6538E3 100%
    ) !important;

    box-shadow:
        0 18px 38px rgba(91, 86, 235, 0.28) !important;
}/* =========================================
   EXPLORE BUTTON - STRONG TWO COLOR GRADIENT
========================================= */

.affy-final-primary {
    background: linear-gradient(
        90deg,
        #4F63E9 0%,
        #6C3FE8 100%
    ) !important;

    background-color: transparent !important;
    color: #ffffff !important;
}/* =========================================
   CUSTOMERS TEXT - BLUE → PURPLE GRADIENT
========================================= */

.affy-final-content h1 span {
    background: linear-gradient(
        90deg,
        #4F63E9 0%,
        #6C3FE8 100%
    ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}


/* EXPLORE BUTTON - SAME GRADIENT */

.affy-final-primary {
    background: linear-gradient(
        90deg,
        #4F63E9 0%,
        #6C3FE8 100%
    ) !important;

    color: #ffffff !important;
}/* =========================================================
   AFFYADS COLOR SYSTEM - FINAL STANDARD
========================================================= */

:root {
    --affy-blue: #2563EB;
    --affy-purple: #7C3AED;

    --affy-heading: #111827;
    --affy-text: #475569;
    --affy-muted: #64748B;

    --affy-white: #FFFFFF;
    --affy-light: #F8FAFC;
    --affy-border: #E2E8F0;

    --affy-green: #22C55E;

    --affy-gradient: linear-gradient(
        90deg,
        #2563EB 0%,
        #7C3AED 100%
    );
}


/* HEADER CTA */

.header-cta {
    background: var(--affy-gradient) !important;
    color: #FFFFFF !important;
}


/* HERO CUSTOMERS */

.affy-final-content h1 span {
    background: var(--affy-gradient) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}


/* HERO PRIMARY BUTTON */

.affy-final-primary {
    background: var(--affy-gradient) !important;

    color: #FFFFFF !important;

    box-shadow:
        0 12px 30px rgba(37, 99, 235, 0.24) !important;
}


/* HERO SECONDARY BUTTON */

.affy-final-secondary {
    background: #FFFFFF !important;

    color: var(--affy-heading) !important;

    border: 1px solid var(--affy-border) !important;
}


/* HERO TAG */

.affy-final-tag {
    color: var(--affy-blue) !important;

    background:
        rgba(37, 99, 235, 0.08) !important;
}


/* GREEN DOT */

.affy-final-green-dot {
    background: var(--affy-green) !important;
}


/* HERO HEADING */

.affy-final-content h1 {
    color: var(--affy-heading) !important;
}


/* HERO DESCRIPTION */

.affy-final-content > p {
    color: var(--affy-muted) !important;
}


/* TITLE UNDERLINE */

.affy-final-title-line {
    background: var(--affy-gradient) !important;
}


/* DASHBOARD PRIMARY ACCENTS */

.dashboard-kicker,
.affy-final-tooltip strong,
.affy-chart-top strong {
    color: var(--affy-blue) !important;
}


/* DASHBOARD ICONS */

.final-blue-icon,
.affy-bottom-icon {
    color: var(--affy-blue) !important;

    background:
        rgba(37, 99, 235, 0.10) !important;
}


.final-purple-icon,
.floating-top-icon {
    color: var(--affy-purple) !important;

    background:
        rgba(124, 58, 237, 0.10) !important;
}


/* DASHBOARD MAIN TEXT */

.affy-final-dashboard h3,
.affy-final-metric > strong,
.affy-bottom-mini strong,
.affy-final-floating > strong {
    color: var(--affy-heading) !important;
}


/* DASHBOARD MUTED TEXT */

.affy-final-metric > span,
.affy-chart-top span,
.affy-bottom-mini span,
.affy-final-floating > span,
.dashboard-month {
    color: var(--affy-muted) !important;
}


/* POSITIVE METRICS */

.affy-final-metric > small,
.affy-final-floating > small,
.affy-campaign-status {
    color: var(--affy-green) !important;
}/* =========================================================
   WOW HERO - AFFYADS FINAL
========================================================= */

.wow-hero {
    position: relative;
    min-height: calc(100vh - 80px);
    padding: 58px 6% 42px;
    box-sizing: border-box;
    overflow: hidden;

    background:
        radial-gradient(circle at 5% 40%,
        rgba(37, 99, 235, 0.08),
        transparent 29%),

        radial-gradient(circle at 95% 48%,
        rgba(124, 58, 237, 0.10),
        transparent 30%),

        #ffffff;
}

.wow-hero-inner {
    position: relative;
    z-index: 3;

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

    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.86fr 1.14fr;

    gap: 70px;
    align-items: center;
}


/* LEFT */

.wow-hero-copy {
    max-width: 670px;
}

.wow-tag {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 11px;

    padding: 10px 18px;

    margin-bottom: 31px;

    border-radius: 999px;

    border: 1px solid rgba(37, 99, 235, 0.12);

    background: rgba(37, 99, 235, 0.05);

    color: #2563EB;

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

    letter-spacing: 1.6px;

    box-shadow:
        0 8px 28px rgba(37, 99, 235, 0.05);
}

.wow-tag-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #22C55E;

    box-shadow:
        0 0 0 6px rgba(34, 197, 94, 0.10),
        0 0 12px rgba(34, 197, 94, 0.50);
}

.wow-hero-copy h1 {
    margin: 0;

    color: #111827;

    font-size: clamp(62px, 5.2vw, 88px);

    line-height: 1.02;

    font-weight: 760;

    letter-spacing: -4px;
}

.wow-hero-copy h1 span {
    background:
        linear-gradient(
            90deg,
            #2563EB 0%,
            #5266F5 48%,
            #7C3AED 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}

.wow-title-line {
    width: 63px;
    height: 3px;

    margin-top: 27px;

    border-radius: 30px;

    background:
        linear-gradient(
            90deg,
            #2563EB,
            #7C3AED
        );
}

.wow-hero-copy > p {
    max-width: 610px;

    margin: 28px 0 0;

    color: #64748B;

    font-size: 18px;

    line-height: 1.8;
}


/* BUTTONS */

.wow-actions {
    display: flex;
    align-items: center;

    gap: 17px;

    margin-top: 34px;
}

.wow-primary-btn,
.wow-secondary-btn {
    min-height: 57px;

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

    gap: 24px;

    padding: 0 28px;

    border-radius: 13px;

    text-decoration: none;

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

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

.wow-primary-btn {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #2563EB 0%,
            #5266F5 50%,
            #7C3AED 100%
        );

    box-shadow:
        0 15px 34px rgba(82, 102, 245, 0.24);
}

.wow-secondary-btn {
    color: #111827;

    background: #ffffff;

    border: 1px solid #E2E8F0;
}

.wow-primary-btn:hover,
.wow-secondary-btn:hover {
    transform: translateY(-3px);
}


/* RIGHT STAGE */

.wow-dashboard-stage {
    position: relative;

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

    min-height: 600px;

    perspective: 1400px;
}

.wow-dashboard {
    position: absolute;

    width: 78%;

    right: 60px;
    top: 0;

    padding: 24px;

    border-radius: 26px;

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

    border:
        1px solid rgba(226, 232, 240, 0.92);

    box-shadow:
        0 35px 85px rgba(30, 41, 90, 0.12);

    backdrop-filter: blur(20px);

    transform-style: preserve-3d;

    transition: transform 0.28s ease;

    will-change: transform;
}


/* DASH HEADER */

.wow-dashboard-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 21px;
}

.wow-kicker {
    display: block;

    color: #7C3AED;

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

    letter-spacing: 1.7px;
}

.wow-dashboard-head h3 {
    margin: 4px 0 0;

    color: #111827;

    font-size: 19px;
}

.wow-filter {
    padding: 7px 10px;

    border-radius: 8px;

    border: 1px solid #E5E7EB;

    color: #64748B;

    font-size: 9px;

    background: #ffffff;
}


/* METRICS */

.wow-metrics {
    display: grid;

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

    gap: 11px;
}

.wow-metric-card {
    padding: 13px;

    border-radius: 15px;

    background: #ffffff;

    border: 1px solid #EEF2F7;

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

.wow-metric-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 14px 30px rgba(82, 102, 245, 0.10);
}

.wow-metric-icon {
    width: 34px;
    height: 34px;

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

    border-radius: 10px;

    margin-bottom: 10px;

    font-weight: 800;
}

.wow-metric-icon.blue {
    color: #2563EB;
    background: rgba(37, 99, 235, 0.10);
}

.wow-metric-icon.purple {
    color: #7C3AED;
    background: rgba(124, 58, 237, 0.10);
}

.wow-metric-card > span {
    display: block;

    color: #64748B;

    font-size: 9px;
}

.wow-metric-card > strong {
    display: block;

    margin-top: 4px;

    color: #111827;

    font-size: 18px;
}

.wow-metric-card > small {
    display: block;

    margin-top: 3px;

    color: #22C55E;

    font-size: 8px;

    font-weight: 700;
}


/* CHART */

.wow-chart-card {
    margin-top: 16px;

    padding: 17px;

    border-radius: 18px;

    border: 1px solid #EEF2F7;

    background: #ffffff;
}

.wow-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wow-chart-head span {
    display: block;

    color: #64748B;

    font-size: 9px;
}

.wow-chart-head strong {
    display: block;

    margin-top: 3px;

    color: #2563EB;

    font-size: 16px;
}

.wow-chart-range {
    padding: 6px 9px;

    border-radius: 7px;

    background: #F8FAFC;

    color: #64748B;

    font-size: 8px;
}

.wow-chart-area {
    position: relative;

    height: 185px;

    margin-top: 14px;

    overflow: hidden;
}

.wow-grid-line {
    position: absolute;

    left: 0;

    width: 100%;
    height: 1px;

    background: #EEF2F7;
}

.grid-1 {
    top: 27%;
}

.grid-2 {
    top: 52%;
}

.grid-3 {
    top: 77%;
}

.wow-chart-svg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}

.wow-chart-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;

    animation:
        wowGraphDraw
        2.6s
        cubic-bezier(.2,.7,.3,1)
        forwards;
}

.wow-chart-fill {
    opacity: 0;

    animation:
        wowGraphFill
        1.1s ease
        1.05s forwards;
}

@keyframes wowGraphDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes wowGraphFill {
    to {
        opacity: 1;
    }
}

.wow-chart-point {
    position: absolute;

    left: 63%;
    top: 37%;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #5266F5;

    border: 3px solid #ffffff;

    box-shadow:
        0 0 0 6px rgba(82, 102, 245, 0.14);

    animation:
        wowPointPulse
        2s ease-in-out infinite;
}

@keyframes wowPointPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 6px rgba(82, 102, 245, 0.12);
    }

    50% {
        box-shadow:
            0 0 0 11px rgba(82, 102, 245, 0.02);
    }
}

.wow-tooltip {
    position: absolute;

    left: 57%;
    top: 9%;

    padding: 8px 11px;

    border-radius: 9px;

    background: #ffffff;

    border: 1px solid #EEF2F7;

    box-shadow:
        0 10px 25px rgba(30, 41, 90, 0.09);

    animation:
        wowTooltipFloat
        3.5s ease-in-out infinite;
}

.wow-tooltip span {
    display: block;

    color: #64748B;

    font-size: 7px;
}

.wow-tooltip strong {
    display: block;

    margin-top: 2px;

    color: #2563EB;

    font-size: 11px;
}

@keyframes wowTooltipFloat {

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

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


/* FLOAT CARDS */

.wow-float-card {
    position: absolute;

    z-index: 10;

    width: 145px;

    padding: 16px;

    border-radius: 17px;

    border: 1px solid #E6EAF2;

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

    box-shadow:
        0 20px 48px rgba(30,41,90,0.12);

    backdrop-filter: blur(14px);
}

.wow-leads-card {
    left: 0;
    top: 205px;

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

.wow-roas-card {
    right: 0;
    top: 255px;

    animation:
        wowCardTwo
        4.6s ease-in-out infinite;
}

.wow-float-icon {
    width: 32px;
    height: 32px;

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

    border-radius: 9px;

    color: #7C3AED;

    background:
        rgba(124,58,237,0.10);
}

.wow-float-card > span {
    display: block;

    margin-top: 9px;

    color: #64748B;

    font-size: 8px;
}

.wow-float-card > strong {
    display: block;

    margin-top: 4px;

    color: #111827;

    font-size: 17px;
}

.wow-float-card > small {
    display: block;

    margin-top: 3px;

    color: #22C55E;

    font-size: 8px;
}

.wow-float-card svg {
    width: 100%;
    height: 27px;

    margin-top: 7px;
}

.wow-mini-line {
    stroke-dasharray: 180;
    stroke-dashoffset: 180;

    animation:
        wowMiniDraw
        2.2s ease forwards;
}

@keyframes wowMiniDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes wowCardOne {

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

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

@keyframes wowCardTwo {

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

    50% {
        transform: translateY(8px);
    }
}


/* 3D DECORATION */

.wow-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(1px);

    pointer-events: none;
}

.wow-orb-one {
    width: 160px;
    height: 160px;

    left: -15px;
    top: 65px;

    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(255,255,255,0.90),
            rgba(82,102,245,0.28) 30%,
            rgba(124,58,237,0.12) 65%,
            transparent 72%
        );
}

.wow-orb-two {
    width: 210px;
    height: 210px;

    right: -70px;
    bottom: 35px;

    background:
        radial-gradient(
            circle,
            rgba(124,58,237,0.14),
            transparent 70%
        );
}

.wow-floating-ball {
    position: absolute;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #2563EB,
            #7C3AED
        );

    box-shadow:
        0 8px 22px rgba(82,102,245,0.25);
}

.ball-one {
    width: 18px;
    height: 18px;

    left: 45px;
    top: 40px;

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

.ball-two {
    width: 11px;
    height: 11px;

    right: 65px;
    bottom: 70px;

    animation:
        wowBallFloat
        3.7s ease-in-out infinite reverse;
}

@keyframes wowBallFloat {

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

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


/* BACKGROUND GLOW */

.wow-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;
}

.wow-glow-left {
    width: 340px;
    height: 340px;

    left: -180px;
    top: 200px;

    background:
        rgba(37,99,235,0.10);
}

.wow-glow-right {
    width: 450px;
    height: 450px;

    right: -200px;
    top: 170px;

    background:
        rgba(124,58,237,0.11);
}


/* TABLET */

@media (max-width: 1100px) {

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

    .wow-hero-copy {
        margin: 0 auto;

        text-align: center;
    }

    .wow-tag,
    .wow-title-line {
        margin-left: auto;
        margin-right: auto;
    }

    .wow-hero-copy > p {
        margin-left: auto;
        margin-right: auto;
    }

    .wow-actions {
        justify-content: center;
    }

    .wow-dashboard-stage {
        margin: 0 auto;
    }
}


/* MOBILE */

@media (max-width: 700px) {

    .wow-hero {
        padding:
            48px 20px
            40px;
    }

    .wow-hero-copy {
        text-align: left;
    }

    .wow-tag,
    .wow-title-line {
        margin-left: 0;
    }

    .wow-hero-copy h1 {
        font-size: 48px;

        letter-spacing: -2.5px;
    }

    .wow-hero-copy > p {
        margin-left: 0;

        font-size: 15px;
    }

    .wow-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .wow-primary-btn,
    .wow-secondary-btn {
        width: 100%;
    }

    .wow-dashboard-stage {
        min-height: auto;
    }

    .wow-dashboard {
        position: relative;

        width: 100%;

        right: auto;
    }

    .wow-metrics {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .wow-float-card,
    .wow-orb,
    .wow-floating-ball {
        display: none;
    }
}/* =========================================================
   WOW HERO - FINAL POLISH
========================================================= */

.wow-hero {
    padding-top: 46px !important;
    padding-bottom: 28px !important;
}

.wow-hero-inner {
    gap: 55px !important;
}

.wow-tag {
    margin-bottom: 25px !important;
}

.wow-hero-copy h1 {
    font-size: clamp(60px, 5vw, 84px) !important;
    line-height: 1.01 !important;
}

.wow-title-line {
    margin-top: 23px !important;
}

.wow-hero-copy > p {
    margin-top: 24px !important;
}

.wow-actions {
    margin-top: 28px !important;
}


/* dashboard position */

.wow-dashboard-stage {
    transform: translateY(-10px);
}

.wow-dashboard {
    right: 35px !important;
}


/* floating cards */

.wow-leads-card {
    left: -15px !important;
    top: 210px !important;
}

.wow-roas-card {
    right: -20px !important;
    top: 260px !important;
}


/* stronger soft depth */

.wow-dashboard {
    box-shadow:
        0 36px 90px rgba(37, 99, 235, 0.10),
        0 20px 55px rgba(124, 58, 237, 0.08) !important;
}


/* orb upgrade */

.wow-orb-one {
    opacity: 0.82;
    transform: scale(1.1);
}

.wow-orb-two {
    opacity: 0.85;
}


/* add slight glass shine */

.wow-dashboard::before {
    content: "";
    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.95),
            transparent
        );

    pointer-events: none;
}


/* button premium feel */

.wow-primary-btn {
    box-shadow:
        0 16px 34px rgba(37, 99, 235, 0.18),
        0 10px 26px rgba(124, 58, 237, 0.15) !important;
}


/* desktop viewport fit */

@media (min-width: 1200px) {

    .wow-hero {
        height: calc(100vh - 80px);
        min-height: 760px;
    }

}/* =========================================================
   AFFYADS PREMIUM HERO - APPROVED DESIGN
   APPEND ONLY
========================================================= */

.aa-premium-hero {
    position: relative;
    min-height: calc(100vh - 80px);

    padding: 56px 5.5% 32px;

    box-sizing: border-box;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 5% 44%,
            rgba(37, 99, 235, 0.075),
            transparent 29%
        ),
        radial-gradient(
            circle at 93% 50%,
            rgba(124, 58, 237, 0.09),
            transparent 31%
        ),
        #ffffff;
}


/* =========================================================
   HERO SHELL
========================================================= */

.aa-hero-shell {
    position: relative;
    z-index: 5;

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

    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(490px, 0.82fr)
        minmax(700px, 1.18fr);

    align-items: center;

    gap: 65px;
}


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

.aa-hero-copy {
    max-width: 640px;
}


.aa-agency-tag {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 29px;

    padding: 10px 18px;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.055);

    border:
        1px solid rgba(37, 99, 235, 0.12);

    color: #2563EB;

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

    letter-spacing: 1.6px;

    box-shadow:
        0 9px 28px rgba(37, 99, 235, 0.05);
}


.aa-tag-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: #22C55E;

    box-shadow:
        0 0 0 6px rgba(34, 197, 94, 0.10),
        0 0 12px rgba(34, 197, 94, 0.45);
}


.aa-hero-copy h1 {
    margin: 0;

    color: #111827;

    font-size: clamp(60px, 5vw, 84px);

    line-height: 1.03;

    letter-spacing: -4px;

    font-weight: 760;
}


.aa-hero-copy h1 span {
    display: inline-block;

    background:
        linear-gradient(
            90deg,
            #2563EB 0%,
            #5266F5 48%,
            #7C3AED 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.aa-heading-line {
    width: 62px;
    height: 3px;

    margin-top: 25px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #2563EB,
            #7C3AED
        );
}


.aa-hero-copy > p {
    max-width: 590px;

    margin: 27px 0 0;

    color: #64748B;

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   BUTTONS
========================================================= */

.aa-hero-actions {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-top: 32px;
}


.aa-btn-primary,
.aa-btn-secondary {
    min-height: 58px;

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

    gap: 25px;

    padding: 0 29px;

    border-radius: 13px;

    text-decoration: none;

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

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


.aa-btn-primary {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #2563EB 0%,
            #5266F5 50%,
            #7C3AED 100%
        );

    box-shadow:
        0 15px 34px rgba(82, 102, 245, 0.24);
}


.aa-btn-secondary {
    color: #111827;

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

    border: 1px solid #E2E8F0;
}


.aa-btn-primary:hover,
.aa-btn-secondary:hover {
    transform: translateY(-3px);
}



/* =========================================================
   RIGHT STAGE
========================================================= */

.aa-dashboard-stage {
    position: relative;

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

    min-height: 610px;

    perspective: 1600px;
}


/* =========================================================
   MAIN DASHBOARD
========================================================= */

.aa-dashboard {
    position: absolute;

    width: 76%;

    right: 70px;
    top: 0;

    padding: 24px;

    border-radius: 24px;

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

    border:
        1px solid rgba(226, 232, 240, 0.95);

    box-shadow:
        0 30px 70px rgba(30, 41, 90, 0.10),
        0 16px 45px rgba(124, 58, 237, 0.05);

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

    transform:
        rotate(-1.7deg)
        translateY(-4px);

    transform-style: preserve-3d;

    transition:
        transform 0.3s ease;

    will-change: transform;
}


.aa-dashboard::before {
    content: "";

    position: absolute;

    left: 8%;
    right: 8%;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.95),
            transparent
        );
}


/* =========================================================
   DASHBOARD HEADER
========================================================= */

.aa-dashboard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 21px;
}


.aa-live-label {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #5266F5;

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

    letter-spacing: 1.6px;
}


.aa-live-label i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22C55E;
}


.aa-dashboard-top h3 {
    margin: 5px 0 0;

    color: #111827;

    font-size: 19px;
}


.aa-date-filter {
    padding: 8px 11px;

    border-radius: 8px;

    border: 1px solid #E5E7EB;

    background: #ffffff;

    color: #64748B;

    font-size: 9px;
}


/* =========================================================
   METRICS
========================================================= */

.aa-metrics {
    display: grid;

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

    gap: 11px;
}


.aa-metric-card {
    min-width: 0;

    padding: 13px;

    border-radius: 14px;

    background: #ffffff;

    border: 1px solid #EEF2F7;

    box-shadow:
        0 5px 15px rgba(15, 23, 42, 0.02);

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


.aa-metric-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 13px 28px rgba(82, 102, 245, 0.10);
}


.aa-icon {
    width: 34px;
    height: 34px;

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

    margin-bottom: 10px;

    border-radius: 10px;

    font-weight: 800;
}


.aa-icon-blue {
    color: #2563EB;

    background:
        rgba(37, 99, 235, 0.09);
}


.aa-icon-purple {
    color: #7C3AED;

    background:
        rgba(124, 58, 237, 0.09);
}


.aa-metric-card > span {
    display: block;

    color: #64748B;

    font-size: 9px;
}


.aa-metric-card > strong {
    display: block;

    margin-top: 4px;

    color: #111827;

    font-size: 18px;
}


.aa-metric-card > small {
    display: block;

    margin-top: 3px;

    color: #22C55E;

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


/* =========================================================
   CHART
========================================================= */

.aa-chart-panel {
    margin-top: 16px;

    padding: 17px;

    border-radius: 17px;

    background: #ffffff;

    border: 1px solid #EEF2F7;
}


.aa-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.aa-chart-header span {
    display: block;

    color: #64748B;

    font-size: 9px;
}


.aa-chart-header strong {
    display: block;

    margin-top: 3px;

    color: #2563EB;

    font-size: 16px;
}


.aa-range {
    padding: 6px 9px;

    border-radius: 7px;

    background: #F8FAFC;

    color: #64748B !important;

    font-size: 8px !important;
}


.aa-chart-wrap {
    position: relative;

    height: 190px;

    margin-top: 13px;

    overflow: hidden;
}


.aa-chart-grid {
    position: absolute;

    left: 0;

    width: 100%;
    height: 1px;

    background: #EEF2F7;
}


.grid-a {
    top: 20%;
}

.grid-b {
    top: 42%;
}

.grid-c {
    top: 64%;
}

.grid-d {
    top: 86%;
}


.aa-main-chart {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


.aa-chart-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;

    animation:
        aaGraphDraw
        2.6s cubic-bezier(.2,.7,.3,1)
        forwards;
}


.aa-chart-fill {
    opacity: 0;

    animation:
        aaGraphFill
        1.1s ease
        1.05s forwards;
}


@keyframes aaGraphDraw {
    to {
        stroke-dashoffset: 0;
    }
}


@keyframes aaGraphFill {
    to {
        opacity: 1;
    }
}


.aa-chart-marker {
    position: absolute;

    left: 62%;
    top: 38%;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #5266F5;

    border: 3px solid #ffffff;

    box-shadow:
        0 0 0 6px rgba(82, 102, 245, 0.12);

    animation:
        aaMarkerPulse
        2s ease-in-out infinite;
}


@keyframes aaMarkerPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 6px rgba(82, 102, 245, 0.12);
    }

    50% {
        box-shadow:
            0 0 0 12px rgba(82, 102, 245, 0.01);
    }

}


.aa-chart-tooltip {
    position: absolute;

    left: 56%;
    top: 10%;

    padding: 8px 11px;

    border-radius: 9px;

    background: #ffffff;

    border: 1px solid #EEF2F7;

    box-shadow:
        0 10px 25px rgba(30,41,90,0.09);

    animation:
        aaTooltipFloat
        3.5s ease-in-out infinite;
}


.aa-chart-tooltip span {
    display: block;

    color: #64748B;

    font-size: 7px;
}


.aa-chart-tooltip strong {
    display: block;

    margin-top: 2px;

    color: #2563EB;

    font-size: 11px;
}


@keyframes aaTooltipFloat {

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

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

}


/* =========================================================
   FLOATING CARDS
========================================================= */

.aa-floating-card {
    position: absolute;

    z-index: 12;

    width: 145px;

    padding: 16px;

    border-radius: 17px;

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

    border:
        1px solid #E6EAF2;

    box-shadow:
        0 22px 52px rgba(30,41,90,0.12);

    backdrop-filter: blur(14px);
}


.aa-leads-card {
    left: 5px;
    top: 190px;

    animation:
        aaFloatOne
        4.2s ease-in-out infinite;
}


.aa-roas-card {
    right: 0;
    top: 245px;

    animation:
        aaFloatTwo
        4.7s ease-in-out infinite;
}


.aa-floating-icon {
    width: 32px;
    height: 32px;

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

    border-radius: 9px;

    color: #7C3AED;

    background:
        rgba(124,58,237,0.09);
}


.aa-floating-card > span {
    display: block;

    margin-top: 9px;

    color: #64748B;

    font-size: 8px;
}


.aa-floating-card > strong {
    display: block;

    margin-top: 4px;

    color: #111827;

    font-size: 17px;
}


.aa-floating-card > small {
    display: block;

    margin-top: 3px;

    color: #22C55E;

    font-size: 8px;
}


.aa-floating-card svg {
    width: 100%;
    height: 27px;

    margin-top: 7px;
}


.aa-mini-chart {
    stroke-dasharray: 180;
    stroke-dashoffset: 180;

    animation:
        aaMiniDraw
        2.3s ease forwards;
}


@keyframes aaMiniDraw {

    to {
        stroke-dashoffset: 0;
    }

}


@keyframes aaFloatOne {

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

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

}


@keyframes aaFloatTwo {

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

    50% {
        transform: translateY(8px);
    }

}


/* =========================================================
   3D ORB
========================================================= */

.aa-visual-orb {
    position: absolute;

    width: 180px;
    height: 180px;

    left: 15px;
    top: 95px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 36% 32%,
            rgba(255,255,255,0.95),
            rgba(82,102,245,0.30) 30%,
            rgba(124,58,237,0.15) 58%,
            transparent 73%
        );

    filter: blur(0.5px);

    animation:
        aaOrbFloat
        6s ease-in-out infinite;
}


.aa-orb-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(82,102,245,0.15);
}


.ring-one {
    inset: 18px;
}

.ring-two {
    inset: 37px;
}

.ring-three {
    inset: 57px;
}


@keyframes aaOrbFloat {

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

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

}


.aa-blue-ball {
    position: absolute;

    width: 21px;
    height: 21px;

    left: 55px;
    top: 45px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #2563EB,
            #7C3AED
        );

    box-shadow:
        0 10px 24px rgba(82,102,245,0.25);

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


@keyframes aaBallFloat {

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

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

}


/* =========================================================
   PAPER PLANE
========================================================= */

.aa-paper-plane {
    position: absolute;

    right: 12px;
    bottom: 90px;

    width: 48px;
    height: 48px;

    transform:
        rotate(-18deg);

    animation:
        aaPlaneFloat
        4.5s ease-in-out infinite;
}


.aa-paper-plane::before {
    content: "";

    position: absolute;

    width: 0;
    height: 0;

    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;

    border-left:
        36px solid #5266F5;

    filter:
        drop-shadow(
            0 9px 15px rgba(82,102,245,0.20)
        );
}


.aa-paper-plane::after {
    content: "";

    position: absolute;

    left: 8px;
    top: 12px;

    width: 18px;
    height: 2px;

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

    transform:
        rotate(-7deg);
}


@keyframes aaPlaneFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-18deg);
    }

    50% {
        transform:
            translateY(-11px)
            rotate(-13deg);
    }

}


/* =========================================================
   DOT GRID
========================================================= */

.aa-dot-grid {
    position: absolute;

    width: 70px;
    height: 70px;

    opacity: 0.35;

    background-image:
        radial-gradient(
            circle,
            #5266F5 2px,
            transparent 2px
        );

    background-size:
        14px 14px;
}


.aa-dot-grid-one {
    right: 5%;
    top: 85px;
}


.aa-dot-grid-two {
    left: 37%;
    bottom: 55px;
}


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

.aa-bg-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;
}


.aa-glow-left {
    width: 340px;
    height: 340px;

    left: -180px;
    top: 200px;

    background:
        rgba(37,99,235,0.09);
}


.aa-glow-right {
    width: 460px;
    height: 460px;

    right: -220px;
    top: 170px;

    background:
        rgba(124,58,237,0.10);
}


/* =========================================================
   LARGE DESKTOP FIT
========================================================= */

@media (min-width: 1200px) {

    .aa-premium-hero {
        height: calc(100vh - 80px);
        min-height: 760px;
    }

}


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

@media (max-width: 1100px) {

    .aa-premium-hero {
        padding:
            60px 5%
            50px;
    }


    .aa-hero-shell {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .aa-hero-copy {
        margin: 0 auto;

        text-align: center;
    }


    .aa-agency-tag,
    .aa-heading-line {
        margin-left: auto;
        margin-right: auto;
    }


    .aa-hero-copy > p {
        margin-left: auto;
        margin-right: auto;
    }


    .aa-hero-actions {
        justify-content: center;
    }


    .aa-dashboard-stage {
        margin: 0 auto;
    }

}


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

@media (max-width: 700px) {

    .aa-premium-hero {
        padding:
            48px 20px
            40px;
    }


    .aa-hero-copy {
        text-align: left;
    }


    .aa-agency-tag,
    .aa-heading-line {
        margin-left: 0;
    }


    .aa-hero-copy h1 {
        font-size: 48px;

        letter-spacing: -2.5px;
    }


    .aa-hero-copy > p {
        margin-left: 0;

        font-size: 15px;
    }


    .aa-hero-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .aa-btn-primary,
    .aa-btn-secondary {
        width: 100%;
    }


    .aa-dashboard-stage {
        min-height: auto;
    }


    .aa-dashboard {
        position: relative;

        width: 100%;

        right: auto;
        top: auto;

        transform: none;
    }


    .aa-metrics {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .aa-floating-card,
    .aa-visual-orb,
    .aa-blue-ball,
    .aa-paper-plane,
    .aa-dot-grid {
        display: none;
    }

}/* =========================================================
   AFFYADS PREMIUM 3D HERO - FINAL
   APPEND ONLY
========================================================= */

.affy-3d-hero {
    --affy-blue: #2563EB;
    --affy-mid: #5266F5;
    --affy-purple: #7C3AED;
    --affy-dark: #111827;
    --affy-text: #64748B;
    --affy-green: #22C55E;
    --affy-border: #E2E8F0;

    position: relative;

    min-height: calc(100vh - 80px);

    padding:
        48px 5.5%
        28px;

    box-sizing: border-box;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 5% 40%,
            rgba(37, 99, 235, 0.08),
            transparent 29%
        ),
        radial-gradient(
            circle at 94% 48%,
            rgba(124, 58, 237, 0.10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FCFCFF 100%
        );
}


/* =========================================================
   HERO MAIN GRID
========================================================= */

.affy-3d-hero-wrap {
    position: relative;
    z-index: 5;

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

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(470px, 0.80fr)
        minmax(720px, 1.20fr);

    align-items: center;

    gap: 65px;
}


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

.affy-3d-copy {
    position: relative;
    z-index: 8;

    max-width: 630px;
}


.affy-3d-tag {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 11px;

    padding: 10px 18px;

    margin-bottom: 29px;

    border-radius: 999px;

    color: var(--affy-blue);

    background:
        rgba(37, 99, 235, 0.055);

    border:
        1px solid rgba(37, 99, 235, 0.12);

    box-shadow:
        0 10px 28px rgba(37, 99, 235, 0.05);

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

    letter-spacing: 1.6px;
}


.affy-3d-tag-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background:
        var(--affy-green);

    box-shadow:
        0 0 0 6px rgba(34, 197, 94, 0.10),
        0 0 13px rgba(34, 197, 94, 0.45);
}


/* TITLE */

.affy-3d-copy h1 {
    margin: 0;

    max-width: 650px;

    color:
        var(--affy-dark);

    font-size:
        clamp(60px, 5vw, 84px);

    font-weight: 760;

    line-height: 1.025;

    letter-spacing: -4px;
}


.affy-3d-copy h1 span {
    display: inline-block;

    background:
        linear-gradient(
            90deg,
            var(--affy-blue) 0%,
            var(--affy-mid) 48%,
            var(--affy-purple) 100%
        );

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

    -webkit-text-fill-color: transparent;
    color: transparent;
}


.affy-3d-heading-line {
    width: 62px;
    height: 3px;

    margin-top: 25px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--affy-blue),
            var(--affy-purple)
        );
}


.affy-3d-copy > p {
    max-width: 570px;

    margin:
        27px 0 0;

    color:
        var(--affy-text);

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   BUTTONS
========================================================= */

.affy-3d-actions {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-top: 31px;
}


.affy-3d-primary-btn,
.affy-3d-secondary-btn {
    min-height: 57px;

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

    gap: 24px;

    padding:
        0 28px;

    border-radius: 13px;

    text-decoration: none;

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

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


.affy-3d-primary-btn {
    color: #FFFFFF;

    background:
        linear-gradient(
            90deg,
            var(--affy-blue) 0%,
            var(--affy-mid) 50%,
            var(--affy-purple) 100%
        );

    box-shadow:
        0 15px 34px rgba(82, 102, 245, 0.24);
}


.affy-3d-secondary-btn {
    color:
        var(--affy-dark);

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

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


.affy-3d-primary-btn:hover,
.affy-3d-secondary-btn:hover {
    transform:
        translateY(-3px);
}


.affy-3d-primary-btn:hover {
    box-shadow:
        0 19px 42px rgba(82, 102, 245, 0.29);
}


/* =========================================================
   3D STAGE
========================================================= */

.affy-3d-stage {
    position: relative;

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

    min-height: 585px;

    perspective: 1800px;

    transform-style: preserve-3d;
}


/* =========================================================
   STACKED 3D PANELS
========================================================= */

.affy-stack-panel {
    position: absolute;

    width: 73%;
    height: 505px;

    right: 65px;
    top: 12px;

    border-radius: 28px;

    border:
        1px solid rgba(160, 174, 226, 0.22);

    transform-origin:
        center center;

    pointer-events: none;
}


.stack-1 {
    z-index: 1;

    transform:
        translate3d(34px, -14px, -90px)
        rotateY(-4deg)
        rotateZ(-1deg);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.78),
            rgba(124,58,237,0.08)
        );

    box-shadow:
        25px 25px 60px rgba(124,58,237,0.07);
}


.stack-2 {
    z-index: 2;

    transform:
        translate3d(22px, -7px, -55px)
        rotateY(-3deg)
        rotateZ(-0.6deg);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.86),
            rgba(37,99,235,0.06)
        );
}


.stack-3 {
    z-index: 3;

    transform:
        translate3d(11px, -2px, -25px)
        rotateY(-2deg);

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

    box-shadow:
        0 25px 65px rgba(82,102,245,0.08);
}


/* =========================================================
   MAIN DASHBOARD
========================================================= */

.affy-3d-dashboard {
    position: absolute;

    z-index: 8;

    width: 73%;

    right: 78px;
    top: 22px;

    padding: 23px;

    border-radius: 25px;

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

    border:
        1px solid rgba(226,232,240,0.96);

    box-shadow:
        0 32px 80px rgba(35, 45, 90, 0.13),
        0 22px 55px rgba(124,58,237,0.07);

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

    transform:
        rotateX(1deg)
        rotateY(-3.3deg)
        rotateZ(-1.1deg);

    transform-style:
        preserve-3d;

    transition:
        transform 0.22s ease-out;

    will-change:
        transform;
}


.affy-3d-dashboard::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #FFFFFF,
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   DASHBOARD HEAD
========================================================= */

.affy-3d-dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 19px;
}


.affy-live-insights {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color:
        var(--affy-mid);

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

    letter-spacing: 1.6px;
}


.affy-live-insights i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--affy-green);

    box-shadow:
        0 0 9px rgba(34,197,94,0.30);
}


.affy-3d-dashboard-head h3 {
    margin:
        5px 0 0;

    color:
        var(--affy-dark);

    font-size: 19px;
}


.affy-month-filter {
    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        8px 11px;

    border-radius: 8px;

    border:
        1px solid #E5E7EB;

    background:
        #FFFFFF;

    color:
        var(--affy-text);

    font-size: 9px;
}


/* =========================================================
   METRICS
========================================================= */

.affy-3d-metrics {
    display: grid;

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

    gap: 10px;
}


.affy-3d-metric-card {
    min-width: 0;

    padding: 12px;

    border-radius: 14px;

    border:
        1px solid #EEF2F7;

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

    box-shadow:
        0 8px 20px rgba(15,23,42,0.025);

    transform:
        translateZ(12px);

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


.affy-3d-metric-card:hover {
    transform:
        translateZ(28px)
        translateY(-5px);

    box-shadow:
        0 15px 32px rgba(82,102,245,0.11);
}


.affy-metric-icon {
    width: 34px;
    height: 34px;

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

    margin-bottom: 9px;

    border-radius: 10px;

    font-weight: 800;
}


.affy-metric-icon.blue {
    color:
        var(--affy-blue);

    background:
        rgba(37,99,235,0.09);
}


.affy-metric-icon.purple {
    color:
        var(--affy-purple);

    background:
        rgba(124,58,237,0.09);
}


.affy-3d-metric-card > span {
    display: block;

    color:
        var(--affy-text);

    font-size: 8.5px;
}


.affy-3d-metric-card > strong {
    display: block;

    margin-top: 4px;

    color:
        var(--affy-dark);

    font-size: 18px;
}


.affy-3d-metric-card > small {
    display: block;

    margin-top: 3px;

    color:
        var(--affy-green);

    font-size: 8px;

    font-weight: 700;
}


/* =========================================================
   CHART CARD
========================================================= */

.affy-3d-chart-card {
    margin-top: 15px;

    padding: 16px;

    border-radius: 17px;

    border:
        1px solid #EEF2F7;

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

    transform:
        translateZ(10px);
}


.affy-3d-chart-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.affy-3d-chart-top span {
    display: block;

    color:
        var(--affy-text);

    font-size: 9px;
}


.affy-3d-chart-top strong {
    display: block;

    margin-top: 3px;

    color:
        var(--affy-blue);

    font-size: 16px;
}


.affy-chart-days {
    padding:
        6px 9px;

    border-radius: 7px;

    background:
        #F8FAFC;

    color:
        var(--affy-text);

    font-size: 8px;
}


/* =========================================================
   MAIN GRAPH
========================================================= */

.affy-3d-chart-area {
    position: relative;

    height: 190px;

    margin-top: 13px;

    overflow: hidden;
}


.affy-chart-grid {
    position: absolute;

    left: 0;

    width: 100%;
    height: 1px;

    background:
        #EEF2F7;
}


.affy-chart-grid.grid-1 {
    top: 20%;
}


.affy-chart-grid.grid-2 {
    top: 42%;
}


.affy-chart-grid.grid-3 {
    top: 64%;
}


.affy-chart-grid.grid-4 {
    top: 86%;
}


.affy-3d-chart-svg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


.affy-3d-chart-line {
    stroke-dasharray: 1300;
    stroke-dashoffset: 1300;

    filter:
        drop-shadow(
            0 4px 5px rgba(82,102,245,0.16)
        );

    animation:
        affy3DGraphDraw
        2.7s cubic-bezier(.2,.7,.3,1)
        forwards;
}


.affy-3d-chart-fill {
    opacity: 0;

    animation:
        affy3DFillShow
        1.2s ease
        1.05s forwards;
}


@keyframes affy3DGraphDraw {
    to {
        stroke-dashoffset: 0;
    }
}


@keyframes affy3DFillShow {
    to {
        opacity: 1;
    }
}


.affy-3d-chart-point {
    position: absolute;

    left: 63%;
    top: 38%;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background:
        var(--affy-mid);

    border:
        3px solid #FFFFFF;

    box-shadow:
        0 0 0 6px rgba(82,102,245,0.13);

    animation:
        affy3DPointPulse
        2s ease-in-out infinite;
}


@keyframes affy3DPointPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 6px rgba(82,102,245,0.12);
    }

    50% {
        box-shadow:
            0 0 0 12px rgba(82,102,245,0.01);
    }
}


.affy-3d-chart-tooltip {
    position: absolute;

    left: 57%;
    top: 9%;

    padding:
        8px 11px;

    border-radius: 9px;

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

    border:
        1px solid #EEF2F7;

    box-shadow:
        0 12px 28px rgba(30,41,90,0.10);

    transform:
        translateZ(32px);

    animation:
        affy3DTooltipFloat
        3.4s ease-in-out infinite;
}


.affy-3d-chart-tooltip span {
    display: block;

    color:
        var(--affy-text);

    font-size: 7px;
}


.affy-3d-chart-tooltip strong {
    display: block;

    margin-top: 2px;

    color:
        var(--affy-blue);

    font-size: 11px;
}


@keyframes affy3DTooltipFloat {

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

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


/* =========================================================
   FLOATING CARDS
========================================================= */

.affy-3d-floating-card {
    position: absolute;

    z-index: 20;

    width: 150px;

    padding: 16px;

    border-radius: 18px;

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

    border:
        1px solid rgba(226,232,240,0.96);

    box-shadow:
        0 25px 60px rgba(30,41,90,0.15);

    backdrop-filter:
        blur(15px);

    transform-style:
        preserve-3d;

    will-change:
        transform;
}


.affy-3d-leads {
    right: 2px;
    top: 130px;

    transform:
        translateZ(105px)
        rotateY(-5deg)
        rotateZ(2deg);

    animation:
        affyLeadsFloat
        4.2s ease-in-out infinite;
}


.affy-3d-roas {
    right: -12px;
    top: 350px;

    transform:
        translateZ(125px)
        rotateY(-5deg)
        rotateZ(3deg);

    animation:
        affyRoasFloat
        4.8s ease-in-out infinite;
}


.affy-floating-icon {
    width: 33px;
    height: 33px;

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

    border-radius: 10px;

    color:
        var(--affy-purple);

    background:
        rgba(124,58,237,0.09);
}


.affy-3d-floating-card > span {
    display: block;

    margin-top: 9px;

    color:
        var(--affy-text);

    font-size: 8px;
}


.affy-3d-floating-card > strong {
    display: block;

    margin-top: 4px;

    color:
        var(--affy-dark);

    font-size: 19px;
}


.affy-3d-floating-card > small {
    display: block;

    margin-top: 3px;

    color:
        var(--affy-green);

    font-size: 8px;
}


.affy-3d-floating-card svg {
    width: 100%;
    height: 29px;

    margin-top: 8px;
}


.affy-3d-mini-line {
    stroke-dasharray: 190;
    stroke-dashoffset: 190;

    animation:
        affyMiniGraphDraw
        2.3s ease forwards;
}


@keyframes affyMiniGraphDraw {
    to {
        stroke-dashoffset: 0;
    }
}


@keyframes affyLeadsFloat {

    0%,
    100% {
        transform:
            translateZ(105px)
            translateY(0)
            rotateY(-5deg)
            rotateZ(2deg);
    }

    50% {
        transform:
            translateZ(118px)
            translateY(-10px)
            rotateY(-4deg)
            rotateZ(1deg);
    }
}


@keyframes affyRoasFloat {

    0%,
    100% {
        transform:
            translateZ(125px)
            translateY(0)
            rotateY(-5deg)
            rotateZ(3deg);
    }

    50% {
        transform:
            translateZ(138px)
            translateY(9px)
            rotateY(-4deg)
            rotateZ(2deg);
    }
}


/* =========================================================
   3D ORB
========================================================= */

.affy-3d-orb {
    position: absolute;

    z-index: 4;

    width: 190px;
    height: 190px;

    left: -12px;
    top: 120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 32%,
            rgba(255,255,255,0.96) 0%,
            rgba(82,102,245,0.28) 27%,
            rgba(37,99,235,0.28) 44%,
            rgba(124,58,237,0.17) 61%,
            transparent 73%
        );

    box-shadow:
        inset 0 0 45px rgba(255,255,255,0.55),
        0 25px 70px rgba(82,102,245,0.17);

    transform:
        translateZ(-10px);

    animation:
        affyOrbMotion
        6s ease-in-out infinite;
}


.orb-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(82,102,245,0.20);
}


.orb-ring-1 {
    inset: 18px;
}


.orb-ring-2 {
    inset: 38px;
}


.orb-ring-3 {
    inset: 60px;
}


.orb-core {
    position: absolute;

    inset: 75px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--affy-blue),
            var(--affy-purple)
        );

    box-shadow:
        0 0 30px rgba(82,102,245,0.28);
}


@keyframes affyOrbMotion {

    0%,
    100% {
        transform:
            translateZ(-10px)
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateZ(5px)
            translateY(-10px)
            rotate(7deg);
    }
}


/* BALL */

.affy-3d-ball {
    position: absolute;

    z-index: 12;

    width: 22px;
    height: 22px;

    left: 45px;
    top: 55px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            #FFFFFF,
            var(--affy-blue) 35%,
            var(--affy-purple) 100%
        );

    box-shadow:
        0 12px 25px rgba(37,99,235,0.22);

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


@keyframes affyBallMotion {

    0%,
    100% {
        transform:
            translate3d(0,0,40px);
    }

    50% {
        transform:
            translate3d(0,-14px,65px);
    }
}


/* =========================================================
   PAPER PLANE
========================================================= */

.affy-3d-plane {
    position: absolute;

    z-index: 15;

    right: 0;
    bottom: 80px;

    width: 58px;
    height: 50px;

    filter:
        drop-shadow(
            0 13px 18px rgba(37,99,235,0.18)
        );

    animation:
        affyPlaneMotion
        4.7s ease-in-out infinite;
}


.affy-3d-plane::before {
    content: "";

    position: absolute;

    left: 8px;
    top: 8px;

    width: 0;
    height: 0;

    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;

    border-left:
        42px solid var(--affy-blue);

    transform:
        rotate(-18deg);
}


.affy-3d-plane::after {
    content: "";

    position: absolute;

    left: 18px;
    top: 19px;

    width: 24px;
    height: 2px;

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

    transform:
        rotate(-24deg);
}


@keyframes affyPlaneMotion {

    0%,
    100% {
        transform:
            translate3d(0,0,60px)
            rotate(0deg);
    }

    50% {
        transform:
            translate3d(-9px,-12px,80px)
            rotate(5deg);
    }
}


/* =========================================================
   TRUSTED BRANDS STRIP
========================================================= */

.affy-trusted-strip {
    position: relative;
    z-index: 20;

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

    min-height: 92px;

    margin:
        18px auto 0;

    padding:
        16px 24px;

    box-sizing:
        border-box;

    display: grid;

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

    align-items: center;

    gap: 24px;

    overflow: hidden;

    border:
        1px solid #E8ECF4;

    border-radius: 21px;

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

    box-shadow:
        0 18px 44px rgba(30,41,90,0.07);

    backdrop-filter:
        blur(18px);
}


.affy-trusted-title {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding-left: 6px;
}


.affy-trusted-title strong {
    color:
        #334155;

    font-size: 11px;

    letter-spacing:
        1.8px;
}


.affy-trusted-title span {
    color:
        #64748B;

    font-size: 10px;

    letter-spacing:
        1.6px;
}


.affy-trusted-divider {
    width: 1px;
    height: 49px;

    background:
        #E2E8F0;
}


/* MARQUEE VIEWPORT */

.affy-trusted-brands {
    position: relative;

    min-width: 0;

    display: flex;
    align-items: center;

    gap: 62px;

    width: max-content;

    will-change:
        transform;

    animation:
        affyBrandMarquee
        24s linear infinite;
}


/* fade edges */

.affy-trusted-strip::after {
    content: "";

    position: absolute;

    right: 0;
    top: 0;

    width: 80px;
    height: 100%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.97)
        );
}


.affy-brand-item {
    flex: 0 0 auto;

    min-width: 115px;

    color:
        #536077;

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

    white-space:
        nowrap;

    opacity:
        0.74;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        color 0.25s ease;
}


.affy-brand-item:hover {
    opacity: 1;

    color:
        var(--affy-blue);

    transform:
        translateY(-2px);
}


/*
   JS duplicates the brand items once.
   Moving half the total track makes the loop seamless.
*/

@keyframes affyBrandMarquee {

    from {
        transform:
            translateX(0);
    }

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


.affy-trusted-brands:hover {
    animation-play-state:
        paused;
}


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

.affy-3d-glow {
    position: absolute;

    border-radius: 50%;

    filter:
        blur(110px);

    pointer-events: none;
}


.affy-3d-glow.glow-left {
    width: 350px;
    height: 350px;

    left: -190px;
    top: 180px;

    background:
        rgba(37,99,235,0.09);
}


.affy-3d-glow.glow-right {
    width: 470px;
    height: 470px;

    right: -220px;
    top: 160px;

    background:
        rgba(124,58,237,0.10);
}


/* DOTS */

.affy-dot-matrix {
    position: absolute;

    width: 78px;
    height: 78px;

    opacity: 0.29;

    background-image:
        radial-gradient(
            circle,
            var(--affy-mid) 2px,
            transparent 2px
        );

    background-size:
        14px 14px;
}


.matrix-top {
    right: 4.2%;
    top: 70px;
}


.matrix-bottom {
    left: 2%;
    bottom: 120px;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .affy-3d-hero {
        min-height:
            calc(100vh - 80px);
    }

}


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

@media (max-width: 1100px) {

    .affy-3d-hero {
        padding:
            60px 5%
            40px;
    }


    .affy-3d-hero-wrap {
        grid-template-columns:
            1fr;

        gap:
            60px;
    }


    .affy-3d-copy {
        margin:
            0 auto;

        text-align:
            center;
    }


    .affy-3d-tag,
    .affy-3d-heading-line {
        margin-left:
            auto;

        margin-right:
            auto;
    }


    .affy-3d-copy > p {
        margin-left:
            auto;

        margin-right:
            auto;
    }


    .affy-3d-actions {
        justify-content:
            center;
    }


    .affy-3d-stage {
        margin:
            0 auto;
    }


    .affy-trusted-strip {
        grid-template-columns:
            170px 1px minmax(0,1fr);
    }

}


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

@media (max-width: 700px) {

    .affy-3d-hero {
        padding:
            48px 20px
            35px;
    }


    .affy-3d-copy {
        text-align:
            left;
    }


    .affy-3d-tag,
    .affy-3d-heading-line {
        margin-left: 0;
    }


    .affy-3d-copy h1 {
        font-size:
            48px;

        letter-spacing:
            -2.5px;
    }


    .affy-3d-copy > p {
        margin-left: 0;

        font-size:
            15px;
    }


    .affy-3d-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .affy-3d-primary-btn,
    .affy-3d-secondary-btn {
        width:
            100%;

        box-sizing:
            border-box;
    }


    .affy-3d-stage {
        min-height:
            auto;
    }


    .affy-3d-dashboard {
        position:
            relative;

        width:
            100%;

        right:
            auto;

        top:
            auto;

        box-sizing:
            border-box;

        transform:
            none;
    }


    .affy-stack-panel,
    .affy-3d-orb,
    .affy-3d-ball,
    .affy-3d-floating-card,
    .affy-3d-plane,
    .affy-dot-matrix {
        display:
            none;
    }


    .affy-3d-metrics {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .affy-trusted-strip {
        grid-template-columns:
            1fr;

        gap:
            13px;

        padding:
            20px;
    }


    .affy-trusted-divider {
        display:
            none;
    }


    .affy-trusted-title {
        text-align:
            center;
    }

}


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

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

    .affy-3d-chart-line,
    .affy-3d-chart-fill,
    .affy-3d-chart-point,
    .affy-3d-chart-tooltip,
    .affy-3d-floating-card,
    .affy-3d-orb,
    .affy-3d-ball,
    .affy-3d-plane,
    .affy-3d-mini-line,
    .affy-trusted-brands {
        animation:
            none !important;
    }

}/* =========================================================
   FINAL SCREEN FIT + TRUST STRIP VISIBILITY
========================================================= */

@media (min-width: 1200px) {

    .affy-3d-hero {
        height: calc(100vh - 80px) !important;
        min-height: 760px !important;

        padding-top: 34px !important;
        padding-bottom: 18px !important;
    }

    .affy-3d-hero-wrap {
        gap: 50px !important;
    }

    /* LEFT SIDE */
    .affy-3d-tag {
        margin-bottom: 23px !important;
    }

    .affy-3d-copy h1 {
        font-size: clamp(58px, 4.75vw, 80px) !important;
    }

    .affy-3d-heading-line {
        margin-top: 21px !important;
    }

    .affy-3d-copy > p {
        margin-top: 22px !important;
    }

    .affy-3d-actions {
        margin-top: 25px !important;
    }

    /* RIGHT SIDE */
    .affy-3d-stage {
        min-height: 520px !important;

        transform: scale(0.94);
        transform-origin: center center;
    }

    /* TRUST STRIP */
    .affy-trusted-strip {
        margin-top: 4px !important;

        min-height: 78px !important;

        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}/* =========================================================
   TRUSTED BRAND MARQUEE - OVERLAP FIX
========================================================= */

.affy-trusted-strip {
    overflow: hidden !important;
}

/* Fixed title area */
.affy-trusted-title {
    position: relative;
    z-index: 10;
    background: #ffffff;
}

/* Divider */
.affy-trusted-divider {
    position: relative;
    z-index: 10;
}

/* Brand scrolling area */
.affy-trusted-brands {
    position: relative !important;
    z-index: 2;

    padding-left: 25px;

    gap: 70px !important;

    animation-duration: 28s !important;
}

/* Brand names */
.affy-brand-item {
    min-width: 125px !important;

    text-align: center;

    font-size: 18px !important;
    font-weight: 700;

    color: #7c8598 !important;

    opacity: 1 !important;
}

/* Keep left fixed section above moving brands */
.affy-trusted-strip::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 285px;

    z-index: 5;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 88%,
        rgba(255,255,255,0) 100%
    );
}

/* Put title above masking layer */
.affy-trusted-title,
.affy-trusted-divider {
    z-index: 12;
}/* =========================================================
   AFFYADS 3D HERO - SIZE & POSITION POLISH
========================================================= */

/* HERO OVERALL */
@media (min-width: 1200px) {

    .affy-3d-hero {
        padding-left: 5.5% !important;
        padding-right: 5.5% !important;
    }

    /* RIGHT STAGE */
    .affy-3d-stage {
        transform: scale(0.91);
        transform-origin: center center;

        margin-top: -6px;
    }

    /* MAIN DASHBOARD */
    .affy-3d-dashboard {
        width: 71% !important;

        right: 84px !important;
        top: 24px !important;
    }

    /* STACKED PANELS */
    .affy-stack-panel {
        width: 71% !important;
        right: 70px !important;
    }

    /* 3D CIRCLE - KEEP BEHIND DASHBOARD */
    .affy-3d-orb {
        z-index: 2 !important;

        width: 180px !important;
        height: 180px !important;

        left: -8px !important;
        top: 120px !important;

        opacity: 0.92;
    }

    .affy-3d-dashboard {
        z-index: 8 !important;
    }

    .affy-3d-floating-card {
        z-index: 20 !important;
    }

    /* FLOATING LEADS */
    .affy-3d-leads {
        right: 5px !important;
        top: 135px !important;
    }

    /* FLOATING ROAS */
    .affy-3d-roas {
        right: -4px !important;
        top: 345px !important;
    }

    /* PAPER PLANE */
    .affy-3d-plane {
        right: -4px !important;
        bottom: 72px !important;
    }

    /* TRUSTED STRIP - SMALLER LEFT & RIGHT */
    .affy-trusted-strip {
        width: 88% !important;
        max-width: 1320px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        min-height: 82px !important;

        padding-left: 26px !important;
        padding-right: 26px !important;
    }

    .affy-trusted-strip {
        grid-template-columns:
            220px 1px minmax(0, 1fr) !important;
    }

    .affy-trusted-brands {
        gap: 58px !important;
    }

    .affy-brand-item {
        min-width: 110px !important;

        font-size: 17px !important;
    }

}


/* =========================================================
   CIRCLE MUST STAY BEHIND MAIN DASHBOARD
========================================================= */

.affy-3d-orb {
    pointer-events: none;
}

.affy-3d-orb,
.affy-3d-ball {
    z-index: 2 !important;
}

.affy-stack-panel {
    z-index: 4 !important;
}

.affy-3d-dashboard {
    z-index: 8 !important;
}

.affy-3d-floating-card,
.affy-3d-plane {
    z-index: 15 !important;
}


/* =========================================================
   TRUST STRIP CLEANER WIDTH
========================================================= */

.affy-trusted-strip {
    border-radius: 20px !important;

    box-shadow:
        0 16px 38px rgba(30, 41, 90, 0.06) !important;
}/* =========================================================
   AFFYADS — ONLY 3 FINAL FIXES
   1. Circle behind dashboard
   2. Brand divider alignment
   3. Right dashboard slightly upward
========================================================= */


/* ---------- 1. BIG CIRCLE BEHIND DASHBOARD ---------- */

.affy-3d-stage {
    isolation: isolate !important;
}

.affy-3d-orb {
    z-index: 0 !important;
    pointer-events: none !important;
}

.affy-stack-panel {
    z-index: 2 !important;
}

.affy-3d-dashboard {
    z-index: 5 !important;
}

.affy-3d-floating-card {
    z-index: 10 !important;
}


/* ---------- 2. TRUSTED BRANDS DIVIDER FIX ---------- */

/* left heading stays fixed */
.affy-trusted-title {
    position: relative !important;
    z-index: 5 !important;
}

/* vertical line */
.affy-trusted-divider {
    position: relative !important;

    width: 1px !important;
    height: 54px !important;

    margin: 0 24px !important;

    background: #e2e6f0 !important;

    flex: 0 0 1px !important;

    z-index: 6 !important;
}

/* brands must start AFTER divider */
.affy-trusted-brands {
    position: relative !important;

    flex: 1 1 auto !important;
    min-width: 0 !important;

    padding-left: 28px !important;

    z-index: 1 !important;
}

/* prevent brands going under title/divider */
.affy-trusted-title,
.affy-trusted-divider {
    background: #ffffff;
}


/* ---------- 3. RIGHT 3D LAYOUT SLIGHTLY UP ---------- */

@media (min-width: 1200px) {

    .affy-3d-stage {
        position: relative !important;

        top: -22px !important;
    }

}/* =====================================================
   TRUSTED BRANDS — FINAL FIX
===================================================== */

/* LEFT TEXT */
.affy-trusted-title{
    position: relative !important;
    z-index: 20 !important;

    min-width: 245px !important;
    padding-right: 18px !important;

    background: #fff !important;
}

/* TRUSTED BY 100+ */
.affy-trusted-title strong{
    display: block !important;

    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    letter-spacing: 2px !important;

    color: #17213b !important;
}

/* BRANDS GLOBALLY */
.affy-trusted-title span{
    display: block !important;

    margin-top: 7px !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    letter-spacing: 2px !important;

    color: #66738e !important;
}


/* DIVIDER — MOVE CLOSER TO TEXT */
.affy-trusted-divider{
    position: relative !important;
    z-index: 20 !important;

    width: 1px !important;
    min-width: 1px !important;
    height: 54px !important;

    margin-left: 4px !important;
    margin-right: 28px !important;

    background: #dfe4ee !important;
}


/* MOVING BRAND AREA */
.affy-trusted-brands{
    position: relative !important;
    z-index: 2 !important;

    flex: 1 1 auto !important;
    min-width: 0 !important;

    overflow: hidden !important;
}


/* IMPORTANT:
   brand names divider ke neeche nahi dikhenge */
.affy-trusted-title,
.affy-trusted-divider{
    flex-shrink: 0 !important;
}


/* brand names clean spacing */
.affy-brand-item{
    flex-shrink: 0 !important;

    min-width: 145px !important;

    white-space: nowrap !important;
    text-align: center !important;
}/* =====================================================
   TRUSTED BRANDS — FINAL FADE + TEXT MATCH FIX
===================================================== */

/* TRUSTED BY 100+ = SAME AS BRANDS GLOBALLY */
.affy-trusted-title strong{
    display: block !important;
    margin: 0 !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    letter-spacing: 2px !important;
    color: #66738e !important;
}

/* BRANDS GLOBALLY */
.affy-trusted-title span{
    display: block !important;
    margin-top: 7px !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    letter-spacing: 2px !important;
    color: #66738e !important;
}


/* MOVING BRANDS WINDOW */
.affy-trusted-brands{
    position: relative !important;
    overflow: hidden !important;

    /*
       Brand divider ke paas aate hi gradually
       invisible hona start karega.
    */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0px,
        transparent 18px,
        rgba(0,0,0,.25) 38px,
        rgba(0,0,0,.65) 58px,
        #000 82px,
        #000 calc(100% - 30px),
        transparent 100%
    ) !important;

    mask-image: linear-gradient(
        to right,
        transparent 0px,
        transparent 18px,
        rgba(0,0,0,.25) 38px,
        rgba(0,0,0,.65) 58px,
        #000 82px,
        #000 calc(100% - 30px),
        transparent 100%
    ) !important;
}


/* DIVIDER ALWAYS ABOVE MOVING BRANDS */
.affy-trusted-divider{
    position: relative !important;
    z-index: 20 !important;
}


/* LEFT TEXT ALWAYS CLEAN */
.affy-trusted-title{
    position: relative !important;
    z-index: 20 !important;
    background: #fff !important;
}/* Trusted text — slightly smaller */
.affy-trusted-title strong,
.affy-trusted-title span{
    font-size: 12px !important;
    letter-spacing: 1.8px !important;
    font-weight: 500 !important;
    color: #66738e !important;
}/* ===== TRUSTED BRAND LEFT FADE - FINAL FIX ===== */

.affy-trusted-brands{
    position: relative !important;
    overflow: hidden !important;

    /* old mask disable */
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Brand divider tak pahunchne se pehle fade hoga */
.affy-trusted-brands::before{
    content: "" !important;

    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;

    width: 90px !important;

    z-index: 999 !important;
    pointer-events: none !important;

    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 35%,
        rgba(255,255,255,0.92) 55%,
        rgba(255,255,255,0.60) 75%,
        rgba(255,255,255,0) 100%
    ) !important;
}

/* Moving track must remain BEHIND fade */
.affy-trusted-track{
    position: relative !important;
    z-index: 1 !important;
}

/* Divider always above everything */
.affy-trusted-divider{
    position: relative !important;
    z-index: 1000 !important;
}/* =====================================================
   TRUSTED BRANDS — FINAL SINGLE ROW FIX
===================================================== */

/* Full trusted strip stays in one horizontal row */
.affy-trusted-strip{
    display: grid !important;

    grid-template-columns:
        245px
        1px
        minmax(0, 1fr) !important;

    align-items: center !important;

    column-gap: 22px !important;
}


/* LEFT TITLE */
.affy-trusted-title{
    min-width: 0 !important;
    width: auto !important;

    padding: 0 !important;
}


/* DIVIDER */
.affy-trusted-divider{
    width: 1px !important;
    height: 54px !important;

    margin: 0 !important;

    background: #dfe4ee !important;
}


/* STATIONARY BRAND WINDOW */
.affy-brands-window{
    position: relative !important;

    min-width: 0 !important;
    width: 100% !important;

    height: 70px !important;

    display: flex !important;
    align-items: center !important;

    overflow: hidden !important;

    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0px,
        rgba(0,0,0,.15) 22px,
        rgba(0,0,0,.55) 50px,
        #000 85px,
        #000 calc(100% - 45px),
        transparent 100%
    ) !important;

    mask-image: linear-gradient(
        90deg,
        transparent 0px,
        rgba(0,0,0,.15) 22px,
        rgba(0,0,0,.55) 50px,
        #000 85px,
        #000 calc(100% - 45px),
        transparent 100%
    ) !important;
}


/* MOVING TRACK */
.affy-trusted-brands{
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    width: max-content !important;
    min-width: max-content !important;

    gap: 70px !important;

    flex: 0 0 auto !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: visible !important;
}


/* INDIVIDUAL BRAND */
.affy-brand-item{
    flex: 0 0 130px !important;

    min-width: 130px !important;

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

    white-space: nowrap !important;

    margin: 0 !important;
}


/* KEEP TEXT SAME SIZE */
.affy-trusted-title strong,
.affy-trusted-title span{
    font-size: 12px !important;
    font-weight: 500 !important;

    letter-spacing: 1.8px !important;

    color: #66738e !important;
}/* TRUSTED BRANDS BOX — HEIGHT REDUCE */

.affy-trusted-strip{
    min-height: 78px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.affy-brands-window{
    height: 58px !important;
}

.affy-trusted-divider{
    height: 48px !important;
}/* =========================================================
   SERVICES CARDS - FLOATING UI BEHIND CONTENT
========================================================= */

/* Each service card creates its own stacking area */
.service-card,
.services-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Main card content always stays in front */
.service-card .service-content,
.service-card .card-content,
.services-card .service-content,
.services-card .card-content {
    position: relative;
    z-index: 5;
}

/* Headings, text, tags & CTA always above floating graphics */
.service-card h2,
.service-card h3,
.service-card p,
.service-card .eyebrow,
.service-card .service-tags,
.service-card .service-link,
.services-card h2,
.services-card h3,
.services-card p,
.services-card .eyebrow,
.services-card .service-tags,
.services-card .service-link {
    position: relative;
    z-index: 5;
}

/* Floating / decorative dashboard elements go behind */
.service-card .floating-card,
.service-card .floating-ui,
.service-card .visual,
.service-card .service-visual,
.services-card .floating-card,
.services-card .floating-ui,
.services-card .visual,
.services-card .service-visual {
    z-index: 1 !important;
}

/* Background decoration stays at very back */
.service-card::before,
.service-card::after,
.services-card::before,
.services-card::after {
    z-index: 0 !important;
}/* =========================================================
   SERVICE CARDS - FLOATING WIDGETS BEHIND CONTENT
   EXACT CLASS FIX
========================================================= */

.service-bento-card{
    position: relative !important;
    isolation: isolate !important;
}


/* FLOATING WIDGETS - BACK LAYER */
.service-bento-card .seo-visual,
.service-bento-card .performance-visual,
.service-bento-card .google-ads-visual,
.service-bento-card .social-visual,
.service-bento-card .meta-visual,
.service-bento-card .affiliate-visual,
.service-bento-card .lead-visual,
.service-bento-card .media-visual,
.service-bento-card .app-visual,
.service-bento-card .web-visual{
    z-index: 1 !important;
}


/* CARD GLOW - VERY BACK */
.service-bento-card .service-card-glow{
    z-index: 0 !important;
}


/* NUMBER BADGE - FRONT */
.service-bento-card .service-top{
    position: relative !important;
    z-index: 10 !important;
}


/* MAIN TEXT CONTENT - FRONT */
.service-bento-card .service-body{
    position: relative !important;
    z-index: 10 !important;
}


/* FORCE ALL TEXT ABOVE WIDGET */
.service-bento-card .service-small,
.service-bento-card .service-body h3,
.service-bento-card .service-body p,
.service-bento-card .service-pills{
    position: relative !important;
    z-index: 11 !important;
}


/* CTA ALWAYS FRONT */
.service-bento-card .service-link{
    position: relative !important;
    z-index: 12 !important;
}/* =========================================================
   ONLY 3 CARDS - FLOATING VISUAL SIZE FIX
========================================================= */

/* 03 - GOOGLE ADS */
.google-ads-visual{
    transform: scale(0.82) !important;
    transform-origin: top right !important;
    top: 18px !important;
    right: 8px !important;
}


/* 04 - SOCIAL MEDIA MARKETING */
.social-visual{
    transform: scale(0.78) !important;
    transform-origin: top right !important;
    top: 16px !important;
    right: 6px !important;
}


/* 05 - META ADS */
.meta-visual{
    transform: scale(0.80) !important;
    transform-origin: top right !important;
    top: 16px !important;
    right: 6px !important;
}/* =========================================================
   WHY BRANDS CHOOSE AFFYADS MEDIA
========================================================= */

.brand-why-section{
    min-height: auto !important;

    padding: 65px 7% 80px;

    background: #FFFFFF;
}

.brand-why-inner{
    position: relative;

    max-width: 1500px;
    margin: 0 auto;

    padding: 50px 38px 42px;

    overflow: hidden;

    border: 1px solid #E2E8F0;
    border-radius: 30px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(82,102,245,.08),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #FBFCFF 0%,
            #F8FAFF 100%
        );

    box-shadow:
        0 22px 65px rgba(15,23,42,.06);
}


/* HEADING */

.brand-why-heading{
    position: relative;
    z-index: 3;

    text-align: center;

    margin-bottom: 38px;
}

.brand-why-eyebrow{
    display: inline-flex;
    align-items: center;

    margin-bottom: 16px;

    color: #596CF3;

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

    letter-spacing: 2px;
}

.brand-why-heading h2{
    margin: 0;

    color: #111827;

    font-size: clamp(34px, 3.6vw, 52px);
    line-height: 1.08;

    letter-spacing: -2px;
}

.brand-why-heading h2 span{
    background:
        linear-gradient(
            90deg,
            #5266F5,
            #7C3AED
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* GRID */

.brand-why-grid{
    display: grid;

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

    gap: 24px;
}


/* CARD */

.brand-why-card{
    position: relative;

    min-height: 310px;

    padding: 28px;

    overflow: hidden;

    border: 1px solid #E2E8F0;
    border-radius: 24px;

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

    box-shadow:
        0 14px 35px rgba(15,23,42,.05);

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

.brand-why-card::after{
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            #2563EB,
            #7C3AED
        );
}

.brand-why-card:hover{
    transform: translateY(-8px);

    border-color:
        rgba(82,102,245,.28);

    box-shadow:
        0 26px 60px rgba(15,23,42,.10);
}


/* TOP */

.brand-why-card-top{
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;

    gap: 14px;
}

.brand-why-icon{
    width: 48px;
    height: 48px;

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

    border-radius: 13px;

    background: #EEF2FF;

    color: #5266F5;

    font-size: 22px;
    font-weight: 800;
}

.brand-why-number{
    color: #B7BDFB;

    font-size: 28px;
    font-weight: 800;
}


/* TEXT */

.brand-why-card h3{
    position: relative;
    z-index: 4;

    margin: 74px 0 12px;

    color: #111827;

    font-size: 23px;
    line-height: 1.2;
}

.brand-why-card p{
    position: relative;
    z-index: 4;

    max-width: 370px;

    margin: 0;

    color: #64748B;

    font-size: 15px;
    line-height: 1.7;
}


/* VISUAL BASE */

.brand-why-visual{
    position: absolute;

    top: 32px;
    right: 28px;

    width: 120px;
    height: 120px;

    pointer-events: none;

    opacity: .92;
}


/* TARGET VISUAL */

.visual-target{
    display: flex;
    align-items: center;
    justify-content: center;
}

.target-ring{
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(82,102,245,.20);
}

.ring-one{
    width: 110px;
    height: 110px;
}

.ring-two{
    width: 78px;
    height: 78px;
}

.ring-three{
    width: 46px;
    height: 46px;
}

.target-center{
    width: 34px;
    height: 34px;

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

    border-radius: 50%;

    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #5266F5,
            #7C3AED
        );

    animation:
        targetPulse 2.8s ease-in-out infinite;
}


/* CHART VISUAL */

.visual-chart{
    display: flex;
    align-items: flex-end;

    gap: 8px;

    padding: 20px;
}

.chart-bar{
    width: 15px;

    border-radius: 6px 6px 2px 2px;

    background:
        linear-gradient(
            180deg,
            #5266F5,
            #8B5CF6
        );

    animation:
        whyChartMove 3s ease-in-out infinite;
}

.bar-one{
    height: 35px;
}

.bar-two{
    height: 52px;
}

.bar-three{
    height: 72px;
}

.bar-four{
    height: 92px;
}

.chart-line{
    position: absolute;

    left: 18px;
    right: 12px;
    top: 48px;

    height: 3px;

    transform: rotate(-20deg);

    border-radius: 100px;

    background:
        linear-gradient(
            90deg,
            #2563EB,
            #7C3AED
        );
}


/* SHIELD */

.visual-shield{
    display: flex;
    align-items: center;
    justify-content: center;
}

.shield-shape{
    width: 88px;
    height: 98px;

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

    border-radius:
        32px 32px 42px 42px;

    color: #FFFFFF;

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

    background:
        linear-gradient(
            135deg,
            #5266F5,
            #7C3AED
        );

    box-shadow:
        0 18px 35px
        rgba(99,102,241,.20);

    animation:
        shieldFloat 3.2s ease-in-out infinite;
}


/* ANIMATIONS */

@keyframes targetPulse{

    50%{
        transform: scale(1.12);

        box-shadow:
            0 0 0 10px
            rgba(82,102,245,.07);
    }

}

@keyframes whyChartMove{

    50%{
        transform: scaleY(.72);
        opacity: .75;
    }

}

@keyframes shieldFloat{

    50%{
        transform:
            translateY(-7px)
            rotate(2deg);
    }

}


/* TABLET */

@media (max-width: 950px){

    .brand-why-grid{
        grid-template-columns: 1fr;
    }

    .brand-why-card{
        min-height: 280px;
    }

}


/* MOBILE */

@media (max-width: 600px){

    .brand-why-section{
        padding:
            50px 20px 65px;
    }

    .brand-why-inner{
        padding:
            38px 18px 25px;

        border-radius: 24px;
    }

    .brand-why-heading{
        margin-bottom: 28px;
    }

    .brand-why-heading h2{
        font-size: 35px;
        letter-spacing: -1.5px;
    }

    .brand-why-card{
        min-height: 300px;

        padding: 24px;
    }

    .brand-why-visual{
        transform: scale(.82);

        transform-origin:
            top right;

        right: 15px;
    }

    .brand-why-card h3{
        margin-top: 68px;
    }

}/* =========================================================
   WHY BRANDS SECTION - WIDER + COMPACT FINAL
========================================================= */

/* Section ko screen ke zyada paas lao */
.brand-why-section{
    padding: 45px 2.5% 55px !important;
}

/* Main container wider */
.brand-why-inner{
    max-width: 1800px !important;
    width: 100% !important;

    padding: 38px 32px 30px !important;

    border-radius: 26px !important;
}


/* Heading area compact */
.brand-why-heading{
    margin-bottom: 28px !important;
}

.brand-why-eyebrow{
    margin-bottom: 11px !important;
}

/* Heading slightly smaller */
.brand-why-heading h2{
    font-size: clamp(32px, 3vw, 46px) !important;
    line-height: 1.05 !important;
}


/* Cards gap */
.brand-why-grid{
    gap: 22px !important;
}


/* Cards ki height kam */
.brand-why-card{
    min-height: 260px !important;
    padding: 24px 26px !important;
}


/* Card heading ko thoda upar */
.brand-why-card h3{
    margin-top: 58px !important;
    margin-bottom: 9px !important;
}


/* Description compact */
.brand-why-card p{
    line-height: 1.6 !important;
}


/* 3D visuals slightly smaller */
.brand-why-visual{
    width: 105px !important;
    height: 105px !important;

    top: 25px !important;
    right: 24px !important;
}

.shield-shape{
    width: 76px !important;
    height: 86px !important;
}/* =========================================================
   WHY BRANDS - 4 CARD FINAL LAYOUT
========================================================= */

.brand-why-section{
    padding: 35px 1.5% 30px !important;
}

.brand-why-inner{
    width: 100% !important;
    max-width: 1900px !important;

    padding: 34px 28px 28px !important;

    margin: 0 auto !important;
}

.brand-why-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.brand-why-heading{
    margin-bottom: 25px !important;
}

.brand-why-card{
    min-height: 255px !important;
    padding: 22px 24px !important;
}

.brand-why-card h3{
    font-size: 21px !important;
    margin-top: 55px !important;
}

.brand-why-card p{
    font-size: 14px !important;
    line-height: 1.6 !important;
}


/* 04 - CONTINUOUS OPTIMIZATION VISUAL */

.visual-growth{
    display: flex;
    align-items: center;
    justify-content: center;
}

.growth-orbit{
    position: absolute;

    width: 88px;
    height: 88px;

    border: 1px solid rgba(82, 102, 245, .22);
    border-radius: 50%;

    box-shadow:
        0 0 0 12px rgba(82, 102, 245, .04),
        0 0 0 24px rgba(124, 58, 237, .025);

    animation: growthOrbit 4s linear infinite;
}

.growth-core{
    position: relative;

    width: 50px;
    height: 50px;

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

    border-radius: 16px;

    background: linear-gradient(
        135deg,
        #5266F5,
        #7C3AED
    );

    color: #fff;

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

    box-shadow:
        0 15px 30px rgba(82,102,245,.20);

    animation: growthFloat 3s ease-in-out infinite;
}

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

@keyframes growthFloat{
    50%{
        transform: translateY(-6px) rotate(3deg);
    }
}


/* TABLET */
@media (max-width: 1100px){

    .brand-why-grid{
        grid-template-columns: repeat(2, 1fr) !important;
    }

}


/* MOBILE */
@media (max-width: 650px){

    .brand-why-grid{
        grid-template-columns: 1fr !important;
    }

}/* =========================================================
   WHY BRANDS - FORCE 4 EQUAL CARDS IN ONE ROW
========================================================= */

.brand-why-grid{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

/* Har card same column width lega */
.brand-why-grid > .brand-why-card{
    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    min-width: 0 !important;

    min-height: 255px !important;
}

/* Section ko aur wide rakho */
.brand-why-section{
    padding-left: 1.5% !important;
    padding-right: 1.5% !important;
    padding-bottom: 25px !important;
}

.brand-why-inner{
    width: 100% !important;
    max-width: 1900px !important;

    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 24px !important;
}


/* TABLET */
@media (max-width: 1100px){

    .brand-why-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}


/* MOBILE */
@media (max-width: 650px){

    .brand-why-grid{
        grid-template-columns: 1fr !important;
    }

}/* =========================================
   WHY BRANDS - FINAL SIZE ADJUSTMENT
========================================= */

.brand-why-inner{
    width: 94% !important;
    max-width: 1680px !important;
    padding: 48px 32px 38px !important;
}

.brand-why-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

.brand-why-card{
    min-height: 410px !important;
    padding: 30px 30px 34px !important;
}/* =========================================
   WHY BRANDS BADGE
========================================= */

.brand-why-eyebrow{
    width: fit-content !important;
    margin: 0 auto 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 13px !important;

    padding: 10px 22px !important;

    border: 1px solid rgba(99, 102, 241, 0.24) !important;
    border-radius: 999px !important;

    background: rgba(248, 250, 255, 0.85) !important;

    color: #5865e8 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    line-height: 1 !important;

    box-shadow:
        0 8px 24px rgba(79, 70, 229, 0.06),
        inset 0 0 18px rgba(99, 102, 241, 0.025) !important;
}


/* GREEN GLOWING DOT */

.brand-why-dot{
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 10px !important;

    display: inline-block !important;
    border-radius: 50% !important;

    background: #59c968 !important;

    box-shadow:
        0 0 0 7px rgba(89, 201, 104, 0.12),
        0 0 14px rgba(89, 201, 104, 0.38) !important;
}/* =========================================
   WHY BRANDS BADGE
========================================= */

.brand-why-eyebrow{
    width: fit-content !important;
    margin: 0 auto 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 13px !important;

    padding: 10px 22px !important;

    border: 1px solid rgba(99, 102, 241, 0.24) !important;
    border-radius: 999px !important;

    background: rgba(248, 250, 255, 0.85) !important;

    color: #5865e8 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    line-height: 1 !important;

    box-shadow:
        0 8px 24px rgba(79, 70, 229, 0.06),
        inset 0 0 18px rgba(99, 102, 241, 0.025) !important;
}


/* GREEN GLOWING DOT */

.brand-why-dot{
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 10px !important;

    display: inline-block !important;
    border-radius: 50% !important;

    background: #59c968 !important;

    box-shadow:
        0 0 0 7px rgba(89, 201, 104, 0.12),
        0 0 14px rgba(89, 201, 104, 0.38) !important;
}/* =========================================
   WHY BRANDS - FULL WIDTH FIX
========================================= */

.brand-why-section{
    width: 100% !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.brand-why-inner{
    width: 100% !important;
    max-width: 3000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.brand-why-grid{
    width: 100% !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

.brand-why-card{
    width: 100% !important;
    box-sizing: border-box !important;
}/* =========================================
   WHY BRANDS - VIEWPORT WIDTH FIX
========================================= */

.brand-why-section{
    width: 100% !important;
    max-width: none !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
    box-sizing: border-box !important;
}

.brand-why-inner{
    width: calc(100vw - 180px) !important;
    max-width: none !important;

    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}

.brand-why-grid{
    width: 100% !important;
    max-width: none !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

.brand-why-card{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}/* WHY BRANDS small heading */
.brand-why-eyebrow{
    font-size: 13px !important;
}

/* Main heading bigger */
.brand-why-title{
    font-size: 52px !important;
    line-height: 1.1 !important;
}/* Built on Strategy. Driven by Results. */
.brand-why-heading{
    font-size: 58px !important;
    line-height: 1.08 !important;
}/* =====================================================
   WHY BRANDS CHOOSE AFFYADS MEDIA
   BIG HEADING OVERRIDE
   Paste at the END of style.css
===================================================== */

/* Desktop */
.why-title {
    font-size: clamp(52px, 4.5vw, 76px) !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: -2.5px !important;
    margin-bottom: 34px !important;
}

/* Laptop */
@media (max-width: 1200px) {
    .why-title {
        font-size: 58px !important;
        line-height: 1.07 !important;
        letter-spacing: -2px !important;
    }
}

/* Tablet */
@media (max-width: 900px) {
    .why-title {
        font-size: 48px !important;
        line-height: 1.08 !important;
        letter-spacing: -1.5px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .why-title {
        font-size: 40px !important;
        line-height: 1.1 !important;
        letter-spacing: -1px !important;
        margin-bottom: 28px !important;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .why-title {
        font-size: 34px !important;
        line-height: 1.12 !important;
        letter-spacing: -0.7px !important;
        margin-bottom: 24px !important;
    }
}/* WHY BRANDS - BIG HEADING FIX */

.brand-why-heading h2 {
    font-size: 64px !important;
    line-height: 1.08 !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .brand-why-heading h2 {
        font-size: 52px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .brand-why-heading h2 {
        font-size: 42px !important;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .brand-why-heading h2 {
        font-size: 34px !important;
    }
}/* =====================================================
   WHY BRANDS - FLOATING VISUALS 10% SMALLER
   Target / Chart / Shield / Growth
===================================================== */

.brand-why-visual {
    transform: scale(0.80) !important;
    transform-origin: center center !important;
}/* =====================================================
   AFFYADS MEDIA - PLATFORM / BRAND STRIP
===================================================== */

.brand-strip-section {
    width: 100%;
    padding: 55px 20px;
    overflow: hidden;
}

.brand-strip {
    width: min(94%, 1480px);
    min-height: 115px;
    margin: 0 auto;

    display: flex;
    align-items: center;

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

    border: 1px solid rgba(89, 94, 255, 0.10);
    border-radius: 28px;

    box-shadow:
        0 20px 60px rgba(35, 42, 90, 0.08);

    overflow: hidden;
}


/* LEFT LABEL */

.brand-strip-label {
    flex: 0 0 340px;

    padding: 0 38px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    font-size: 15px;
    line-height: 1.7;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #73809b;
}

.brand-strip-label strong {
    font-weight: 600;
    color: #536078;
}


/* DIVIDER */

.brand-strip-divider {
    width: 1px;
    height: 64px;

    flex-shrink: 0;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(88, 95, 150, 0.22),
            transparent
        );
}


/* MARQUEE AREA */

.brand-marquee {
    position: relative;

    flex: 1;

    overflow: hidden;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 8%,
            #000 92%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 8%,
            #000 92%,
            transparent
        );
}


/* MOVING TRACK */

.brand-marquee-track {
    width: max-content;

    display: flex;
    align-items: center;

    gap: 72px;

    padding: 25px 55px;

    animation: affyBrandScroll 32s linear infinite;
}


/* INDIVIDUAL BRAND */

.brand-logo-item {
    min-width: max-content;

    display: flex;
    align-items: center;

    gap: 12px;

    opacity: 0.68;

    filter: grayscale(1);

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


/* LOGOS */

.brand-logo-item img {
    width: 32px;
    height: 32px;

    object-fit: contain;

    display: block;
}


/* BRAND NAME */

.brand-logo-item span {
    font-size: 20px;
    font-weight: 700;

    letter-spacing: -0.4px;

    color: #727b91;

    white-space: nowrap;
}


/* HOVER */

.brand-logo-item:hover {
    opacity: 1;
    filter: grayscale(0);
    transform: translateY(-3px);
}


/* PAUSE MOTION ON HOVER */

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


/* INFINITE MOTION */

@keyframes affyBrandScroll {

    from {
        transform: translateX(0);
    }

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

}


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

@media (max-width: 1024px) {

    .brand-strip {
        width: 96%;
    }

    .brand-strip-label {
        flex-basis: 260px;
        padding: 0 26px;

        font-size: 13px;
        letter-spacing: 2px;
    }

    .brand-marquee-track {
        gap: 55px;
    }

}


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

@media (max-width: 768px) {

    .brand-strip-section {
        padding: 35px 14px;
    }

    .brand-strip {
        width: 100%;

        flex-direction: column;

        border-radius: 24px;
    }

    .brand-strip-label {
        width: 100%;
        flex-basis: auto;

        padding: 22px 22px 18px;

        text-align: center;
        align-items: center;

        font-size: 12px;
    }

    .brand-strip-divider {
        width: 80%;
        height: 1px;

        background:
            linear-gradient(
                to right,
                transparent,
                rgba(88, 95, 150, 0.22),
                transparent
            );
    }

    .brand-marquee {
        width: 100%;
    }

    .brand-marquee-track {
        gap: 45px;

        padding: 24px 35px;

        animation-duration: 25s;
    }

    .brand-logo-item img {
        width: 27px;
        height: 27px;
    }

    .brand-logo-item span {
        font-size: 17px;
    }

}


/* ACCESSIBILITY */

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

    .brand-marquee-track {
        animation: none;
    }

}/* =========================================================
   TRUST STRIP - LOGO + BRAND NAME
========================================================= */

.affy-brand-item {
    display: flex;
    align-items: center;
    gap: 10px;

    flex-shrink: 0;
    white-space: nowrap;

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

    color: #7c8498;

    opacity: 0.72;

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

.affy-brand-item img {
    width: 28px;
    height: 28px;

    object-fit: contain;

    filter: grayscale(1);
    opacity: 0.8;

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

.affy-brand-item:hover {
    transform: translateY(-2px);
    opacity: 1;
}

.affy-brand-item:hover img {
    filter: grayscale(0);
    opacity: 1;
}


/* TABLET */

@media (max-width: 1024px) {

    .affy-brand-item {
        font-size: 18px;
        gap: 8px;
    }

    .affy-brand-item img {
        width: 25px;
        height: 25px;
    }

}


/* MOBILE */

@media (max-width: 768px) {

    .affy-brand-item {
        font-size: 16px;
        gap: 7px;
    }

    .affy-brand-item img {
        width: 23px;
        height: 23px;
    }

}/* =========================================================
   TRUST / PLATFORM STRIP
   ORIGINAL COMPACT SIZE RESTORE
========================================================= */

.affy-trusted-strip {
    min-height: 112px !important;
    height: 112px !important;

    padding: 0 36px !important;

    display: flex !important;
    align-items: center !important;

    border-radius: 26px !important;

    overflow: hidden !important;
}


/* LEFT TITLE */

.affy-trusted-title {
    flex: 0 0 360px !important;

    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    line-height: 1.6 !important;
}


/* TITLE FIRST LINE */

.affy-trusted-title strong {
    font-size: 14px !important;
    font-weight: 500 !important;

    letter-spacing: 2.5px !important;

    color: #71809b !important;
}


/* TITLE SECOND LINE */

.affy-trusted-title span {
    font-size: 14px !important;
    font-weight: 500 !important;

    letter-spacing: 2.5px !important;

    color: #71809b !important;
}


/* DIVIDER */

.affy-trusted-divider {
    width: 1px !important;
    height: 68px !important;

    margin: 0 34px 0 20px !important;

    flex-shrink: 0 !important;

    background: rgba(105, 119, 154, 0.20) !important;
}


/* BRAND WINDOW */

.affy-brands-window {
    flex: 1 !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;

    overflow: hidden !important;
}


/* MOVING BRANDS */

.affy-trusted-brands {
    display: flex !important;
    align-items: center !important;

    gap: 72px !important;

    height: 100% !important;
}


/* LOGO + NAME */

.affy-brand-item {
    display: flex !important;
    align-items: center !important;

    gap: 9px !important;

    flex-shrink: 0 !important;

    font-size: 19px !important;
    font-weight: 600 !important;

    color: #858b9b !important;

    opacity: 0.72 !important;

    white-space: nowrap !important;

    transform: none;
}


/* LOGO SIZE */

.affy-brand-item img {
    width: 24px !important;
    height: 24px !important;

    object-fit: contain !important;

    filter: grayscale(1) !important;

    opacity: 0.68 !important;
}


/* HOVER */

.affy-brand-item:hover {
    opacity: 1 !important;
}

.affy-brand-item:hover img {
    opacity: 1 !important;
    filter: grayscale(0) !important;
}


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

@media (max-width: 1024px) {

    .affy-trusted-strip {
        height: 105px !important;
        min-height: 105px !important;

        padding: 0 25px !important;
    }

    .affy-trusted-title {
        flex-basis: 280px !important;
    }

    .affy-trusted-title strong,
    .affy-trusted-title span {
        font-size: 12px !important;
        letter-spacing: 2px !important;
    }

    .affy-brand-item {
        font-size: 17px !important;
    }

    .affy-brand-item img {
        width: 22px !important;
        height: 22px !important;
    }

}


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

@media (max-width: 768px) {

    .affy-trusted-strip {
        height: 95px !important;
        min-height: 95px !important;

        padding: 0 18px !important;
    }

    .affy-trusted-title {
        flex: 0 0 190px !important;
    }

    .affy-trusted-title strong,
    .affy-trusted-title span {
        font-size: 10px !important;
        letter-spacing: 1.5px !important;
    }

    .affy-trusted-divider {
        margin: 0 20px 0 10px !important;
        height: 55px !important;
    }

    .affy-trusted-brands {
        gap: 45px !important;
    }

    .affy-brand-item {
        font-size: 15px !important;
    }

    .affy-brand-item img {
        width: 20px !important;
        height: 20px !important;
    }

}/* =========================================================
   PLATFORM STRIP - COMPACT ORIGINAL LOOK
========================================================= */

.brand-strip-section {
    width: 100% !important;
    padding: 30px 20px !important;
    overflow: hidden !important;
}

.brand-strip {
    width: min(94%, 1480px) !important;
    height: 112px !important;
    min-height: 112px !important;

    margin: 0 auto !important;

    display: flex !important;
    align-items: center !important;

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

    border: 1px solid rgba(89, 94, 255, 0.10) !important;
    border-radius: 26px !important;

    overflow: hidden !important;
}


/* LEFT TEXT */

.brand-strip-label {
    flex: 0 0 340px !important;

    padding: 0 38px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    font-size: 14px !important;
    line-height: 1.65 !important;

    letter-spacing: 2.6px !important;
    text-transform: uppercase !important;

    color: #71809b !important;
}

.brand-strip-label span,
.brand-strip-label strong {
    font-size: 14px !important;
    line-height: 1.65 !important;
    letter-spacing: 2.6px !important;
    font-weight: 500 !important;

    color: #71809b !important;
}


/* DIVIDER */

.brand-strip-divider {
    width: 1px !important;
    height: 68px !important;

    flex-shrink: 0 !important;

    background: rgba(105, 119, 154, 0.18) !important;
}


/* MARQUEE */

.brand-marquee {
    flex: 1 !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;

    overflow: hidden !important;
}


/* MOVING ROW */

.brand-marquee-track {
    width: max-content !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;

    gap: 66px !important;

    padding: 0 48px !important;
}


/* EACH BRAND */

.brand-logo-item {
    display: flex !important;
    align-items: center !important;

    gap: 9px !important;

    flex-shrink: 0 !important;

    font-size: 18px !important;
    font-weight: 600 !important;

    color: #858b9b !important;

    opacity: 0.72 !important;

    white-space: nowrap !important;
}


/* LOGO */

.brand-logo-item img {
    width: 24px !important;
    height: 24px !important;

    object-fit: contain !important;

    filter: grayscale(1) !important;

    opacity: 0.7 !important;
}


/* BRAND NAME */

.brand-logo-item span {
    font-size: 18px !important;
    font-weight: 600 !important;

    color: #858b9b !important;
}


/* TABLET */

@media (max-width: 1024px) {

    .brand-strip {
        height: 105px !important;
        min-height: 105px !important;
    }

    .brand-strip-label {
        flex-basis: 270px !important;
        padding: 0 26px !important;
    }

    .brand-strip-label span,
    .brand-strip-label strong {
        font-size: 12px !important;
    }

    .brand-marquee-track {
        gap: 48px !important;
        padding: 0 35px !important;
    }

    .brand-logo-item span {
        font-size: 16px !important;
    }

    .brand-logo-item img {
        width: 22px !important;
        height: 22px !important;
    }
}


/* MOBILE */

@media (max-width: 768px) {

    .brand-strip-section {
        padding: 22px 12px !important;
    }

    .brand-strip {
        height: 90px !important;
        min-height: 90px !important;
    }

    .brand-strip-label {
        flex: 0 0 185px !important;
        padding: 0 16px !important;
    }

    .brand-strip-label span,
    .brand-strip-label strong {
        font-size: 10px !important;
        letter-spacing: 1.6px !important;
    }

    .brand-strip-divider {
        height: 52px !important;
    }

    .brand-marquee-track {
        gap: 38px !important;
        padding: 0 25px !important;
    }

    .brand-logo-item span {
        font-size: 14px !important;
    }

    .brand-logo-item img {
        width: 19px !important;
        height: 19px !important;
    }
}/* =========================================================
   REMOVE EXTRA WHITE BOX AROUND BRAND STRIP
========================================================= */

.brand-strip-section {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;

    padding: 30px 0 !important;

    width: 100% !important;
}

/* Main rounded strip ko same rakho */
.brand-strip {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(89, 94, 255, 0.10) !important;
    border-radius: 26px !important;

    box-shadow:
        0 15px 45px rgba(35, 42, 90, 0.06) !important;
}/* BRAND STRIP - 20% TOP GAP REDUCTION */

.brand-strip-section {
    transform: translateY(-35px) !important;
}/* BRAND STRIP - HEIGHT 20% SMALLER */

.brand-strip {
    height: 85px !important;
    min-height: 85px !important;
}

/* Divider bhi proportionally smaller */
.brand-strip-divider {
    height: 54px !important;
}

/* Logo aur text vertically centered rahenge */
.brand-marquee,
.brand-marquee-track {
    height: 100% !important;
    align-items: center !important;
}/* BRAND STRIP - DIVIDER CLOSER TO LEFT CONTENT */

.brand-strip-label {
    flex: 0 0 290px !important;
    padding-left: 38px !important;
    padding-right: 15px !important;
}

.brand-strip-divider {
    margin-left: 0 !important;
    margin-right: 28px !important;
}/* =========================================================
   INLINE SVG BRAND LOGOS
========================================================= */

.brand-svg-item svg {
    width: 24px !important;
    height: 24px !important;

    flex: 0 0 24px;

    display: block;

    fill: #858b9b;

    opacity: 0.70;

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

.brand-svg-item:hover svg {
    opacity: 1;
    transform: scale(1.06);
}


/* Old external images - no longer required */
.brand-logo-item img {
    display: none;
}


/* MOBILE */

@media (max-width: 768px) {

    .brand-svg-item svg {
        width: 19px !important;
        height: 19px !important;
        flex-basis: 19px;
    }

}/* =========================================================
   AFFYADS MEDIA - LOCAL SVG BRAND LOGOS
   FINAL OVERRIDE
========================================================= */

/* EACH BRAND ITEM */
.brand-logo-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 9px !important;

    flex-shrink: 0 !important;
    white-space: nowrap !important;

    opacity: 0.68 !important;

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


/* LOCAL SVG LOGOS */
.brand-logo-item img {
    display: block !important;

    width: 24px !important;
    height: 24px !important;

    min-width: 24px !important;

    object-fit: contain !important;

    /* Same muted grey look */
    filter: grayscale(1) !important;

    opacity: 0.72 !important;

    transition:
        opacity 0.3s ease,
        filter 0.3s ease,
        transform 0.3s ease !important;
}


/* BRAND NAME */
.brand-logo-item span {
    font-size: 18px !important;
    line-height: 1 !important;

    font-weight: 600 !important;

    letter-spacing: -0.2px !important;

    color: #858b9b !important;

    white-space: nowrap !important;
}


/* HOVER */
.brand-logo-item:hover {
    opacity: 1 !important;
    transform: translateY(-2px) !important;
}

.brand-logo-item:hover img {
    opacity: 1 !important;
    transform: scale(1.06) !important;
}


/* =========================================================
   MARQUEE ALIGNMENT
========================================================= */

.brand-marquee {
    display: flex !important;
    align-items: center !important;

    overflow: hidden !important;
}

.brand-marquee-track {
    display: flex !important;
    align-items: center !important;

    width: max-content !important;

    gap: 62px !important;

    height: 100% !important;
}


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

@media (max-width: 1024px) {

    .brand-marquee-track {
        gap: 48px !important;
    }

    .brand-logo-item {
        gap: 8px !important;
    }

    .brand-logo-item img {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
    }

    .brand-logo-item span {
        font-size: 16px !important;
    }
}


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

@media (max-width: 768px) {

    .brand-marquee-track {
        gap: 38px !important;
    }

    .brand-logo-item {
        gap: 7px !important;
    }

    .brand-logo-item img {
        width: 19px !important;
        height: 19px !important;
        min-width: 19px !important;
    }

    .brand-logo-item span {
        font-size: 14px !important;
    }
}/* =========================================================
   FIX - HERO 3D EFFECTS BEHIND BRAND STRIP
========================================================= */

/* Hero section creates controlled stacking */
.hero {
    position: relative !important;
    z-index: 1 !important;
}

/* Dashboard / floating visual stays behind */
.hero-visual {
    position: relative !important;
    z-index: 1 !important;
}

/* Brand strip always sits above hero visual effects */
.brand-strip-section {
    position: relative !important;
    z-index: 20 !important;
}

/* Actual white rounded box */
.brand-strip {
    position: relative !important;
    z-index: 21 !important;
    background: #ffffff !important;
}

/* Keep strip content above everything */
.brand-strip-label,
.brand-strip-divider,
.brand-marquee {
    position: relative !important;
    z-index: 22 !important;
}/* INDUSTRIES HERO - GRADIENT HEADING FIX */

.industries-page-hero h1 span {
    display: inline-block;

    background: linear-gradient(
        90deg,
        #4f6df5 0%,
        #6657f3 50%,
        #7c3aed 100%
    );

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

    -webkit-text-fill-color: transparent;
    color: transparent;
}/* INDUSTRIES FINAL CTA - GRADIENT HEADING FIX */

.industries-page-cta h2 span {
    display: inline-block;

    background: linear-gradient(
        90deg,
        #4f6df5 0%,
        #6657f3 50%,
        #7c3aed 100%
    );

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

    -webkit-text-fill-color: transparent;
    color: transparent;
}/* INDUSTRIES CTA - LINE + GRADIENT FIX */

.industries-page-cta h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #4f6df5 0%,
        #6657f3 50%,
        #7c3aed 100%
    );

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

    -webkit-text-fill-color: transparent;
    color: transparent;
}.industries-page-cta h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #6e8aff 0%,
        #886cff 50%,
        #a855f7 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* =========================================================
   AFFYADS MEDIA PRELOADER
========================================================= */

.affy-preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 45%, rgba(124, 58, 237, 0.12), transparent 34%),
        radial-gradient(circle at 48% 58%, rgba(37, 99, 235, 0.10), transparent 32%),
        #ffffff;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.55s ease,
        visibility 0.55s ease;
}

.affy-preloader::before,
.affy-preloader::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 1px solid rgba(99, 102, 241, 0.10);
    animation: affyLoaderOrbit 1.8s linear infinite;
}

.affy-preloader::after {
    width: 560px;
    height: 560px;
    border-color: rgba(124, 58, 237, 0.07);
    animation-duration: 2.6s;
    animation-direction: reverse;
}

.affy-preloader-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(99, 102, 241, 0.28) 0%, rgba(124, 58, 237, 0.12) 36%, transparent 70%);
    filter: blur(12px);
    animation: affyLoaderGlow 1.35s ease-in-out infinite alternate;
}

.affy-preloader-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.affy-preloader-logo {
    width: min(330px, 70vw);
    height: auto;
    opacity: 0;
    transform: translateY(14px) scale(0.92);
    filter: drop-shadow(0 18px 34px rgba(37, 99, 235, 0.14));
    animation: affyLogoReveal 0.9s cubic-bezier(.2,.8,.2,1) forwards;
}

.affy-preloader-line {
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    box-shadow: 0 0 18px rgba(99, 102, 241, 0.35);
    animation: affyLineReveal 0.8s ease 0.35s forwards;
}

.affy-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes affyLogoReveal {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.92);
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0) drop-shadow(0 18px 34px rgba(37, 99, 235, 0.14));
    }
}

@keyframes affyLineReveal {
    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 160px;
        opacity: 1;
    }
}

@keyframes affyLoaderGlow {
    from {
        transform: scale(0.90);
        opacity: 0.55;
    }

    to {
        transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes affyLoaderOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 600px) {
    .affy-preloader-logo {
        width: min(260px, 72vw);
    }

    .affy-preloader::before {
        width: 320px;
        height: 320px;
    }

    .affy-preloader::after {
        width: 430px;
        height: 430px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .affy-preloader *,
    .affy-preloader::before,
    .affy-preloader::after {
        animation: none !important;
    }
}