/* =========================================================
   EKLAVYAH
   MAIN HOMEPAGE STYLE
========================================================= */

:root {

    --ek-purple: #641b5b;
    --ek-purple-dark: #32112e;
    --ek-purple-light: #ead7e6;

    --ek-black: #09070d;
    --ek-dark: #100b14;

    --ek-text: #19151b;
    --ek-muted: #68616b;

    --ek-bg: #fbf9fc;
    --ek-white: #ffffff;

    --ek-border: rgba(100, 27, 91, .13);

    --ek-radius: 24px;

    --ek-shadow:
        0 20px 60px rgba(37, 12, 34, .08);

}


/* =========================================================
   GLOBAL
========================================================= */

html {
    scroll-behavior: smooth;
}



a {
    color: inherit;
}

p {

    font-size: 16px;

    line-height: 1.85;

}

h1,
h2,
h3,
h4 {

    letter-spacing: -.025em;

}


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

.reveal-up {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal-up.visible {

    opacity: 1;

    transform: translateY(0);

}


.reveal-scale {

    opacity: 0;

    transform: scale(.92);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.2,.8,.2,1);

}

.reveal-scale.visible {

    opacity: 1;

    transform: scale(1);

}


.reveal-left {

    opacity: 0;

    transform: translateX(-45px);

    transition: .8s ease;

}

.reveal-left.visible {

    opacity: 1;

    transform: translateX(0);

}


.reveal-right {

    opacity: 0;

    transform: translateX(45px);

    transition: .8s ease;

}

.reveal-right.visible {

    opacity: 1;

    transform: translateX(0);

}


.delay-1 {
    transition-delay: .12s;
}

.delay-2 {
    transition-delay: .22s;
}

.delay-3 {
    transition-delay: .32s;
}

.delay-4 {
    transition-delay: .42s;
}


/* =========================================================
   BUTTONS
========================================================= */

.ek-btn {

    min-height: 54px;

    padding: 0 23px;

    border-radius: 14px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    text-decoration: none;

    font-weight: 700;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}

.ek-btn:hover {

    transform: translateY(-3px);

}

.ek-btn-primary {

    background: var(--ek-purple);

    color: white;

    box-shadow:
        0 12px 30px rgba(100, 27, 91, .22);

}

.ek-btn-primary:hover {

    color: white;

    background: #4e1447;

    box-shadow:
        0 18px 38px rgba(100, 27, 91, .3);

}

.ek-btn-ghost {

    background: white;

    color: black;

    border: 1px solid #000;

}

.ek-btn-light {

    background: white;

    color: var(--ek-purple);

}

.ek-btn-outline-light {

    color: white;

    border: 1px solid rgba(255,255,255,.3);

}

.ek-btn-outline-light:hover {

    color: white;

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

}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 50px;

    margin-bottom: 55px;

}

.section-heading.centered {

    display: block;

    text-align: center;

    max-width: 780px;

    margin-left: auto;

    margin-right: auto;

}

.section-heading h2 {

    font-size: clamp(38px, 5vw, 65px);

    line-height: 1.03;

    font-weight: 800;

    margin: 12px 0 0;

}

.section-heading h2 span {

    color: var(--ek-purple);

}

.section-heading.centered p {
    max-width: 650px;
    margin: 22px auto 0;
    text-align: center;
    color: var(--ek-muted);
    line-height: 1.85;
}

.section-kicker {

    color: var(--ek-purple);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 2px;

}

.section-kicker.light {

    color: #dca7d4;

}


/* =========================================================
   HERO
========================================================= */

.ek-hero {

    min-height: 760px;

    position: relative;

    overflow: hidden;

    padding: 105px 0 100px;

    background:

        radial-gradient(
            circle at 75% 45%,
            rgba(100,27,91,.14),
            transparent 30%
        ),

        radial-gradient(
            circle at 15% 20%,
            rgba(173,99,162,.08),
            transparent 25%
        ),

        #fbf9fc;

}

.hero-grid {

    position: absolute;

    inset: 0;

    opacity: .25;

    background-image:

        linear-gradient(
            rgba(100,27,91,.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(100,27,91,.08) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            black,
            transparent
        );

}

.hero-glow {

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

}

.hero-glow-one {

    background: rgba(100,27,91,.12);

    right: -150px;

    top: 100px;

}

.hero-glow-two {

    background: rgba(200,130,190,.1);

    left: -250px;

    bottom: -250px;

}


.hero-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 9px 15px;

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

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

    backdrop-filter: blur(10px);

    border-radius: 100px;

    color: var(--ek-purple);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.4px;

}

.eyebrow-dot {

    width: 7px;

    height: 7px;

    background: #8e3b81;

    border-radius: 50%;

    box-shadow:
        0 0 0 5px rgba(100,27,91,.1);

}

.hero-title {

    font-size: clamp(52px, 6.5vw, 88px);

    font-weight: 850;

    line-height: .98;

    letter-spacing: -.055em;

    margin: 27px 0;

}

.gradient-text {

    background:
        linear-gradient(
            120deg,
            #641b5b,
            #b35da5
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.hero-outline {

    display: block;

    color: transparent;

    -webkit-text-stroke: 1.5px var(--ek-purple);

}

.hero-description {

    max-width: 650px;

    color: var(--ek-muted);

    font-size: 18px;

}

.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 30px;

}

.hero-trust {

    display: flex;

    align-items: center;

    gap: 22px;

    margin-top: 45px;

}

.hero-trust div:not(.trust-line) {

    display: flex;

    flex-direction: column;

}

.hero-trust strong {

    font-size: 22px;

}

.hero-trust span {

    color: var(--ek-muted);

    font-size: 12px;

}

.trust-line {

    height: 30px;

    width: 1px;

    background: var(--ek-border);

}


/* =========================================================
   HERO 3D VISUAL
========================================================= */

.hero-visual {

    height: 590px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    perspective: 1000px;

}

.hero-core {

    width: 330px;

    height: 400px;

    border-radius: 30px;

    position: relative;

    z-index: 5;

    overflow: hidden;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.95),
            rgba(246,233,244,.85)
        );

    border: 1px solid rgba(100,27,91,.2);

    box-shadow:

        30px 45px 100px rgba(63,16,56,.18),

        inset 0 1px 0 white;

    transform:
        rotateX(7deg)
        rotateY(-10deg);

    animation: coreFloat 5s ease-in-out infinite;

}

@keyframes coreFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotateX(7deg)
            rotateY(-10deg);
    }

    50% {
        transform:
            translateY(-15px)
            rotateX(7deg)
            rotateY(-10deg);
    }

}

.core-top {

    height: 50px;

    padding: 0 18px;

    display: flex;

    align-items: center;

    gap: 8px;

    color: #5b5360;

    font-size: 10px;

    font-weight: 800;

    border-bottom: 1px solid rgba(100,27,91,.1);

}

.core-top i {

    margin-left: auto;

}

.live-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #5aa76b;

    box-shadow:
        0 0 0 4px rgba(90,167,107,.1);

}

.core-content {

    height: 285px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

}

.core-circle {

    width: 110px;

    height: 110px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 43px;

    color: white;

    background:

        radial-gradient(
            circle at 35% 25%,
            #c27bb8,
            #641b5b 60%,
            #2e0d2a
        );

    box-shadow:

        0 15px 45px rgba(100,27,91,.35),

        0 0 0 12px rgba(100,27,91,.07);

    animation: pulseCore 3s infinite;

}

@keyframes pulseCore {

    50% {
        box-shadow:
            0 20px 55px rgba(100,27,91,.4),
            0 0 0 22px rgba(100,27,91,.03);
    }

}

.core-content h3 {

    font-size: 27px;

    margin: 25px 0 5px;

}

.core-content h3 span {

    color: var(--ek-purple);

}

.core-content p {

    font-size: 12px;

    color: var(--ek-muted);

}

.core-bottom {

    height: 65px;

    border-top: 1px solid rgba(100,27,91,.1);

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 20px;

}

.core-bottom span {

    font-size: 9px;

    color: #6e6870;

    font-weight: 800;

}

.core-bottom strong {

    color: var(--ek-purple);

}

.orbit {

    position: absolute;

    border: 1px solid rgba(100,27,91,.18);

    border-radius: 50%;

    transform-style: preserve-3d;

}

.orbit-one {

    width: 530px;

    height: 250px;

    transform:
        rotateX(70deg)
        rotateZ(-20deg);

    animation: orbitRotate 12s linear infinite;

}

.orbit-two {

    width: 470px;

    height: 470px;

    transform:
        rotateY(65deg)
        rotateZ(20deg);

    animation: orbitRotate 15s linear infinite reverse;

}

.orbit-three {

    width: 370px;

    height: 190px;

    transform:
        rotateX(65deg)
        rotateZ(50deg);

    animation: orbitRotate 10s linear infinite;

}

@keyframes orbitRotate {

    to {
        rotate: 360deg;
    }

}

.floating-orb {

    position: absolute;

    border-radius: 50%;

    z-index: 4;

}

.orb-purple {

    width: 16px;

    height: 16px;

    background: #641b5b;

    top: 100px;

    left: 80px;

    box-shadow:
        0 0 30px #641b5b;

    animation: orbMove 4s infinite ease-in-out;

}

.orb-pink {

    width: 11px;

    height: 11px;

    background: #ce85c2;

    right: 90px;

    top: 140px;

    animation: orbMove 5s infinite ease-in-out reverse;

}

.orb-white {

    width: 9px;

    height: 9px;

    background: white;

    left: 120px;

    bottom: 120px;

    box-shadow:
        0 0 15px white;

}

@keyframes orbMove {

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

}

.mini-card {

    position: absolute;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 15px;

    min-width: 150px;

    border-radius: 14px;

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

    backdrop-filter: blur(14px);

    border: 1px solid rgba(100,27,91,.12);

    box-shadow:
        0 18px 45px rgba(60,20,55,.12);

    animation: miniFloat 4s infinite ease-in-out;

}

.mini-card i {

    width: 35px;

    height: 35px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f1e2ef;

    color: var(--ek-purple);

}

.mini-card strong,
.mini-card small {

    display: block;

}

.mini-card strong {

    font-size: 12px;

}

.mini-card small {

    font-size: 9px;

    color: var(--ek-muted);

}

.mini-card-one {

    top: 90px;

    right: 5px;

}

.mini-card-two {

    bottom: 90px;

    left: 5px;

    animation-delay: 1s;

}

.mini-card-three {

    bottom: 35px;

    right: 45px;

    animation-delay: 2s;

}

@keyframes miniFloat {

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

}


/* =========================================================
   ECOSYSTEM
========================================================= */

.ecosystem-section {

    padding: 120px 0;

    background: white;

}

.ecosystem-layout {

    display: grid;

    grid-template-columns: 350px 1fr;

    gap: 25px;

}

.ecosystem-nav {

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.eco-tab {

    width: 100%;

    min-height: 76px;

    border: 1px solid transparent;

    background: #f8f5f8;

    border-radius: 16px;

    display: grid;

    grid-template-columns: 32px 45px 1fr 20px;

    align-items: center;

    gap: 10px;

    padding: 12px 15px;

    text-align: left;

    cursor: pointer;

    transition: .3s ease;

    color: var(--ek-text);

}

.eco-tab:hover {

    transform: translateX(5px);

    background: #f1e8ef;

}

.eco-tab.active {

    background: var(--ek-purple);

    color: white;

    box-shadow:
        0 15px 40px rgba(100,27,91,.2);

}

.eco-number {

    font-size: 10px;

    opacity: .55;

}

.eco-icon {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(100,27,91,.08);

    color: var(--ek-purple);

}

.eco-tab.active .eco-icon {

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

    color: white;

}

.eco-name {

    font-weight: 750;

    font-size: 14px;

}

.eco-tab > i {

    opacity: .5;

}

.ecosystem-content {

    min-height: 480px;

    border-radius: 28px;

    background:

        radial-gradient(
            circle at 85% 20%,
            rgba(173,85,157,.13),
            transparent 25%
        ),

        #f8f4f8;

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

    padding: 50px;

    position: relative;

    overflow: hidden;

}

.ecosystem-content::after {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    border-radius: 50%;

    border: 1px solid rgba(100,27,91,.1);

    right: -80px;

    bottom: -100px;

}

.eco-panel {

    display: none;

    animation: panelIn .45s ease;

}

.eco-panel.active {

    display: block;

}

@keyframes panelIn {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

}

.panel-top {

    display: flex;

    justify-content: space-between;

    margin-bottom: 45px;

}

.panel-label {

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 900;

    color: var(--ek-purple);

}

.panel-count {

    font-size: 11px;

    color: var(--ek-muted);

}

.eco-panel h3 {

    max-width: 700px;

    font-size: clamp(38px, 5vw, 64px);

    line-height: 1;

    font-weight: 850;

    margin-bottom: 25px;

}

.eco-panel h3 span {

    color: var(--ek-purple);

}

.eco-panel p {

    max-width: 760px;

    color: var(--ek-muted);

}

.service-pills {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 35px;

}

.service-pills a {

    padding: 10px 14px;

    background: white;

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

    border-radius: 100px;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition: .25s;

}

.service-pills a:hover {

    background: var(--ek-purple);

    color: white;

    transform: translateY(-2px);

}


/* =========================================================
   CAPABILITIES
========================================================= */

.capabilities-section {

    padding: 120px 0;

    background: #f5f1f5;

}

.capability-grid {

    display: grid;

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

    gap: 18px;

}

.capability-card {

    position: relative;

    min-height: 330px;

    background: white;

    border-radius: 24px;

    padding: 30px;

    border: 1px solid transparent;

    overflow: hidden;

    transition: .35s ease;

}

.capability-card::before {

    content: "";

    position: absolute;

    width: 150px;

    height: 150px;

    border-radius: 50%;

    background: #f5eaf3;

    right: -70px;

    top: -70px;

    transition: .4s;

}

.capability-card:hover {

    transform: translateY(-8px);

    border-color: var(--ek-border);

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

}

.capability-card:hover::before {

    transform: scale(1.8);

}

.cap-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    font-size: 24px;

    position: relative;

    z-index: 1;

}

.cap-icon.purple {

    color: #641b5b;

    background: #eee0eb;

}

.cap-icon.blue {

    color: #3c67a8;

    background: #e3ebf7;

}

.cap-icon.orange {

    color: #a45b19;

    background: #faead9;

}

.cap-icon.green {

    color: #327653;

    background: #e1f1e7;

}

.cap-icon.pink {

    color: #a13f84;

    background: #f5dfef;

}

.cap-icon.violet {

    color: #653e9d;

    background: #eae1f7;

}

.cap-index {

    position: absolute;

    top: 30px;

    right: 30px;

    font-size: 11px;

    color: #aaa1aa;

    font-weight: 800;

}

.capability-card h3 {

    font-size: 23px;

    margin-top: 28px;

}

.capability-card p {

    color: var(--ek-muted);

    font-size: 16px;

}

.capability-card a {

    color: var(--ek-purple);

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;

    display: inline-flex;

    gap: 8px;

    align-items: center;

}


/* =========================================================
   STRATEGY
========================================================= */

.strategy-section {

    padding: 120px 0;

    background: #0c090e;

    color: white;

}

.strategy-shell {

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 80px;

    align-items: center;

}

.strategy-intro h2 {

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

    line-height: 1;

    margin: 15px 0 25px;

}

.strategy-intro h2 span {

    color: #dca7d4;

}

.strategy-intro p {

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

    max-width: 480px;

}

.strategy-content {

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

    padding-left: 45px;

}

.strategy-tabs {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 35px;

}

.strategy-tab {

    border: 1px solid rgba(255,255,255,.13);

    background: transparent;

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

    padding: 10px 15px;

    border-radius: 100px;

    cursor: pointer;

    font-size: 12px;

    font-weight: 700;

}

.strategy-tab span {

    opacity: .4;

    margin-right: 5px;

}

.strategy-tab.active {

    background: #641b5b;

    color: white;

    border-color: #641b5b;

}

.strategy-panel {

    display: none;

    grid-template-columns: 80px 1fr;

    gap: 30px;

    animation: panelIn .4s ease;

}

.strategy-panel.active {

    display: grid;

}

.strategy-number {

    font-size: 48px;

    font-weight: 800;

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

}

.strategy-panel h3 {

    font-size: 28px;

    margin-bottom: 15px;

}

.strategy-panel p {

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

    font-size: 16px;

}

.strategy-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 25px;

}

.strategy-tags span {

    padding: 7px 10px;

    border-radius: 100px;

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

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

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

    font-size: 10px;

}


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

.process-section {

    padding: 120px 0;

    background: white;

}

.process-track {

    max-width: 950px;

    margin: 70px auto 0;

    position: relative;

}

.process-line {

    position: absolute;

    left: 50%;

    top: 0;

    bottom: 0;

    width: 1px;

    background: #e5dce4;

}

.process-item {

    width: 50%;

    padding: 0 45px 55px 0;

    position: relative;

}

.process-item.reverse {

    margin-left: 50%;

    padding: 0 0 55px 45px;

}

.process-dot {

    position: absolute;

    right: -19px;

    top: 0;

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background: var(--ek-purple);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    font-weight: 800;

    box-shadow:
        0 0 0 8px white,
        0 0 0 9px #e8dce6;

}

.process-item.reverse .process-dot {

    left: -19px;

    right: auto;

}

.process-card {

    padding: 30px;

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

    border-radius: 20px;

    background: #fcfafc;

}

.process-card span {

    color: var(--ek-purple);

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: 900;

}

.process-card h3 {

    font-size: 23px;

    margin: 12px 0 10px;

}

.process-card p {

    color: var(--ek-muted);

    margin-bottom: 0;

}


/* =========================================================
   PROJECTS
========================================================= */

.projects-section {

    padding: 120px 0;

    color: white;

    background:

        radial-gradient(
            circle at 85% 20%,
            rgba(176,86,162,.16),
            transparent 25%
        ),

        #0d090f;

}

.projects-header {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 50px;

    margin-bottom: 60px;

}

.projects-header h2 {

    font-size: clamp(42px,5vw,68px);

    line-height: 1;

    margin-top: 15px;

}

.projects-header h2 span {

    color: #dba6d3;

}

.projects-header p {

    max-width: 480px;

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

}

.project-showcase {

    display: grid;

    grid-template-columns: 1.5fr .5fr;

    gap: 18px;

}

.project-main-card {

    min-height: 520px;

    padding: 25px;

    border-radius: 26px;

    background: linear-gradient(
        145deg,
        #241522,
        #120d14
    );

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

}

.project-card-top {

    display: flex;

    justify-content: space-between;

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

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}

.project-card-top i {

    color: #dca7d4;

}

.project-screen {

    margin-top: 35px;

    min-height: 390px;

    border-radius: 18px;

    background: #f7f3f7;

    color: #211a21;

    display: grid;

    grid-template-columns: 65px 1fr;

    overflow: hidden;

    transform:
        perspective(1000px)
        rotateX(3deg)
        rotateY(-2deg);

    box-shadow:
        0 30px 80px rgba(0,0,0,.4);

}

.screen-sidebar {

    background: #2b1828;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding-top: 30px;

    gap: 20px;

}

.screen-sidebar span {

    width: 9px;

    height: 9px;

    border-radius: 3px;

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

}

.screen-sidebar span.active {

    background: #dca7d4;

    box-shadow:
        0 0 15px #dca7d4;

}

.screen-content {

    padding: 35px;

}

.screen-heading {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.screen-heading small {

    display: block;

    color: #9a919b;

    font-size: 8px;

    font-weight: 800;

}

.screen-heading strong {

    display: block;

    font-size: 22px;

    margin-top: 5px;

}

.screen-heading > span {

    padding: 6px 9px;

    background: #dcefe0;

    color: #39704a;

    border-radius: 100px;

    font-size: 8px;

    font-weight: 800;

}

.screen-chart {

    height: 200px;

    margin-top: 30px;

    border-bottom: 1px solid #ddd3dc;

    position: relative;

}

.screen-chart::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 39px,
            #e9e3e9 40px
        );

}

.chart-bars {

    height: 100%;

    display: flex;

    align-items: end;

    justify-content: space-around;

    padding: 0 25px;

    position: relative;

    z-index: 1;

}

.chart-bars i {

    width: 8%;

    background:
        linear-gradient(
            to top,
            #641b5b,
            #b56cab
        );

    border-radius: 5px 5px 0 0;

}

.screen-stats {

    display: grid;

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

    gap: 20px;

    margin-top: 25px;

}

.screen-stats small {

    display: block;

    color: #99919b;

    font-size: 8px;

}

.screen-stats strong {

    display: block;

    margin-top: 5px;

    font-size: 20px;

}

.project-side {

    display: grid;

    gap: 18px;

}

.project-stat-card {

    border-radius: 24px;

    padding: 35px;

    background: #f2e8f0;

    color: var(--ek-purple);

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.project-stat-card strong {

    font-size: 70px;

    line-height: .9;

}

.project-stat-card > span {

    font-size: 30px;

    font-weight: 800;

}

.project-stat-card p {

    color: #675d66;

    font-size: 14px;

}

.project-stat-card.purple-card {

    background: #641b5b;

    color: white;

}

.project-stat-card.purple-card p {

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

}

.project-categories {

    display: grid;

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

    margin-top: 18px;

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

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

}

.project-categories div {

    padding: 20px 10px;

    text-align: center;

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

    font-size: 11px;

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

}

.project-categories i {

    color: #dca7d4;

    margin-right: 5px;

}


/* =========================================================
   AI
========================================================= */

.ai-section {

    padding: 120px 0;

    background: #150f17;

    color: white;

    overflow: hidden;

}

.ai-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 90px;

}

.ai-visual {

    height: 520px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}

.ai-ring {

    position: absolute;

    border: 1px solid rgba(220,167,212,.2);

    border-radius: 50%;

}

.ring-one {

    width: 470px;

    height: 470px;

    animation: spin 18s linear infinite;

}

.ring-two {

    width: 350px;

    height: 350px;

    animation: spin 12s linear infinite reverse;

}

.ring-three {

    width: 230px;

    height: 230px;

    animation: spin 8s linear infinite;

}

@keyframes spin {

    to {
        rotate: 360deg;
    }

}

.ai-center {

    width: 145px;

    height: 145px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:

        radial-gradient(
            circle at 30% 20%,
            #b96cae,
            #641b5b 55%,
            #210d1f
        );

    box-shadow:
        0 0 70px rgba(100,27,91,.6);

    z-index: 2;

}

.ai-center i {

    color: #f2cce9;

    margin-bottom: 5px;

}

.ai-center strong {

    font-size: 35px;

}

.ai-center span {

    font-size: 8px;

    letter-spacing: 2px;

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

}

.ai-node {

    position: absolute;

    z-index: 4;

    padding: 12px 15px;

    border-radius: 12px;

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

    border: 1px solid rgba(255,255,255,.12);

    backdrop-filter: blur(12px);

    font-size: 11px;

    display: flex;

    align-items: center;

    gap: 8px;

    animation: nodeFloat 4s ease-in-out infinite;

}

.ai-node i {

    color: #dca7d4;

}

.node-one {

    top: 75px;

    right: 30px;

}

.node-two {

    left: 20px;

    top: 230px;

    animation-delay: 1s;

}

.node-three {

    right: 35px;

    bottom: 85px;

    animation-delay: 2s;

}

@keyframes nodeFloat {

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

}

.ai-copy h2 {

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

    line-height: 1;

    margin: 15px 0 25px;

}

.ai-copy h2 span {

    color: #dca7d4;

}

.ai-copy > p {

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

}

.ai-feature-list {

    margin: 30px 0;

}

.ai-feature-list div {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 0;

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

    font-size: 14px;

}

.ai-feature-list i {

    color: #dca7d4;

}


/* =========================================================
   RESEARCH
========================================================= */

.research-section {

    padding: 120px 0;

    background: white;

}

.research-flow {

    display: grid;

    grid-template-columns: 1fr 50px 1fr 50px 1fr 50px 1fr;

    align-items: center;

    margin-top: 60px;

}

.research-step {

    padding: 30px;

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

    border-radius: 22px;

    min-height: 260px;

    transition: .3s;

    background: #fff;

}

.research-step:hover,
.research-step.active {

    transform: translateY(-8px);

    border-color: rgba(100,27,91,.3);

    box-shadow:
        0 20px 50px rgba(100,27,91,.1);

}

.research-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    color: var(--ek-purple);

    background: #f0e4ee;

    font-size: 23px;

}

.research-step > span {

    display: block;

    color: #aaa;

    font-size: 10px;

    margin-top: 25px;

    font-weight: 800;

}

.research-step h3 {

    font-size: 22px;

    margin: 7px 0;

}

.research-step p {

    color: var(--ek-muted);

    font-size: 14px;

}

.research-connector {

    text-align: center;

    color: #c1a8bc;

}

.research-links {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    justify-content: center;

    margin-top: 35px;

}

.research-links a {

    padding: 12px 17px;

    border-radius: 100px;

    background: #f8f3f8;

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

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition: .25s;

}

.research-links a:hover {

    background: var(--ek-purple);

    color: white;

}


/* =========================================================
   INDUSTRIES
========================================================= */

.industries-section {

    padding: 100px 0;

    background: #f6f2f6;

    overflow: hidden;

}

.industry-marquee {

    margin-top: 50px;

    overflow: hidden;

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

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

}

.industry-track {

    display: flex;

    width: max-content;

    animation: marquee 25s linear infinite;

}

.industry-track span {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 25px 35px;

    font-weight: 700;

    color: #534a53;

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

}

.industry-track i {

    color: var(--ek-purple);

    font-size: 20px;

}

@keyframes marquee {

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

}


/* =========================================================
   TESTIMONIAL
========================================================= */

.testimonial-section {

    padding: 120px 0;

    background: white;

}

.testimonial-grid {

    display: grid;

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

    gap: 18px;

}

.testimonial-card {

    position: relative;

    padding: 35px;

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

    border-radius: 24px;

    background: #fff;

}

.testimonial-card.featured {

    background: var(--ek-purple);

    color: white;

    transform: translateY(-12px);

    box-shadow:
        0 25px 60px rgba(100,27,91,.2);

}

.quote-mark {

    position: absolute;

    right: 25px;

    top: 10px;

    font-size: 75px;

    line-height: 1;

    color: rgba(100,27,91,.08);

}

.featured .quote-mark {

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

}

.stars {

    color: #b16ba7;

    letter-spacing: 3px;

    font-size: 12px;

}

.testimonial-card p {

    margin: 25px 0;

    color: #655e66;

    font-size: 15px;

}

.featured p {

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

}

.testimonial-author {

    display: flex;

    align-items: center;

    gap: 12px;

}

.author-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ead8e7;

    color: var(--ek-purple);

    font-size: 10px;

    font-weight: 900;

}

.featured .author-avatar {

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

    color: white;

}

.testimonial-author strong,
.testimonial-author span {

    display: block;

}

.testimonial-author strong {

    font-size: 12px;

}

.testimonial-author span {

    font-size: 10px;

    color: #99919a;

}

.featured .testimonial-author span {

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

}


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

.faq-section {

    padding: 120px 0;

    background:

        linear-gradient(
            135deg,
            #f8f2f7,
            #eee4ed
        );

}

.faq-layout {

    display: grid;

    grid-template-columns: .75fr 1.25fr;

    gap: 90px;

    align-items: start;

}

.faq-intro {

    position: sticky;

    top: 100px;

}

.faq-intro h2 {

    font-size: clamp(42px,5vw,65px);

    line-height: 1;

    margin: 15px 0 25px;

}

.faq-intro h2 span {

    color: var(--ek-purple);

}

.faq-intro p {

    color: #655e66;

    margin-bottom: 30px;

}

.faq-list {

    background: white;

    border-radius: 25px;

    padding: 10px 25px;

    border: 1px solid rgba(100,27,91,.12);

    box-shadow:
        0 20px 60px rgba(50,20,45,.07);

}

.faq-item {

    border-bottom: 1px solid #eadfea;

}

.faq-item:last-child {

    border-bottom: none;

}

.faq-question {

    width: 100%;

    background: transparent;

    border: none;

    padding: 24px 5px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    text-align: left;

    font-size: 16px;

    font-weight: 750;

    color: #302a31;

    cursor: pointer;

}

.faq-question i {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: var(--ek-purple);

    background: #f0e4ee;

    transition: .3s;

}

.faq-item.active .faq-question {

    color: var(--ek-purple);

}

.faq-item.active .faq-question i {

    transform: rotate(45deg);

    background: var(--ek-purple);

    color: white;

}

.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition: max-height .4s ease;

}

.faq-answer p {

    color: #655e66;

    padding: 0 40px 24px 5px;

    margin: 0;

    font-size: 16px;

    line-height: 1.85;

}


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

.final-cta {

    padding: 110px 0;

    position: relative;

    overflow: hidden;

    background: #0d090f;

    color: white;

}

.cta-noise {

    position: absolute;

    inset: 0;

    opacity: .08;

    background-image:
        radial-gradient(
            white .7px,
            transparent .7px
        );

    background-size: 12px 12px;

}

.cta-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(5px);

}

.cta-orb-one {

    width: 350px;

    height: 350px;

    background: rgba(100,27,91,.5);

    right: -100px;

    top: -100px;

}

.cta-orb-two {

    width: 250px;

    height: 250px;

    background: rgba(180,90,165,.18);

    left: -80px;

    bottom: -100px;

}

.cta-inner {

    max-width: 850px;

    margin: auto;

    text-align: center;

}

.cta-inner h2 {

    font-size: clamp(48px,6vw,82px);

    line-height: .98;

    margin: 18px 0 25px;

}

.cta-inner h2 span {

    display: block;

    color: #dca7d4;

}

.cta-inner p {

    max-width: 700px;

    margin: auto;

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

    font-size: 17px;

}

.cta-buttons {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 35px;

}


/* =========================================================
   SEO FOOTER
========================================================= */

.seo-footer-content {

    padding: 80px 0;

    background: white;

}

.seo-content-box {

    max-width: 950px;

    margin: auto;

    padding-top: 50px;

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

}

.seo-content-box h2 {

    font-size: 30px;

    margin: 12px 0 25px;

}

.seo-content-box p {

    color: #69626a;

    font-size: 16px;

}


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

@media (max-width: 991px) {

    .ek-hero {
        padding: 80px 0;
    }

    .hero-visual {
        height: 520px;
    }

    .ecosystem-layout {
        grid-template-columns: 1fr;
    }

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

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

    .strategy-shell,
    .ai-layout,
    .faq-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .strategy-content {
        border-left: none;
        padding-left: 0;
    }

    .process-item,
    .process-item.reverse {
        width: 100%;
        margin-left: 0;
        padding-left: 55px;
        padding-right: 0;
    }

    .process-line {
        left: 18px;
    }

    .process-dot,
    .process-item.reverse .process-dot {
        left: 0;
        right: auto;
    }

    .project-showcase {
        grid-template-columns: 1fr;
    }

    .project-categories {
        grid-template-columns: repeat(3,1fr);
    }

    .research-flow {
        grid-template-columns: 1fr 40px 1fr;
        row-gap: 15px;
    }

    .research-flow .research-step:nth-of-type(3) {
        grid-column: 1;
    }

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

    .testimonial-card.featured {
        transform: none;
    }

    .faq-intro {
        position: static;
    }

}


@media (max-width: 767px) {

    p {
        font-size: 16px;
    }

    .section-heading,
    .projects-header {
        display: block;
    }

    .section-heading p,
    .projects-header p {
        margin-top: 20px;
    }

    .hero-title {
        font-size: 52px;
    }

    .hero-description {
        font-size: 17px;
    }

    .hero-trust {
        gap: 13px;
    }

    .hero-visual {
        height: 440px;
    }

    .hero-core {
        width: 275px;
        height: 340px;
    }

    .core-content {
        height: 235px;
    }

    .core-circle {
        width: 80px;
        height: 80px;
        font-size: 30px;
    }

    .mini-card.mini-card-one,
    .mini-card.mini-card-two,
    .mini-card.mini-card-three {
        display: none !important;
    }

    .orbit-one {
        width: 350px;
    }

    .orbit-two {
        width: 350px;
        height: 350px;
    }

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

    .ecosystem-content {
        padding: 30px 25px;
    }

    .eco-panel h3 {
        font-size: 40px;
    }

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

    .strategy-panel {
        grid-template-columns: 1fr;
    }

    .strategy-number {
        font-size: 35px;
    }

    .project-screen {
        grid-template-columns: 45px 1fr;
        min-height: 330px;
    }

    .screen-content {
        padding: 20px;
    }

    .screen-chart {
        height: 140px;
    }

    .screen-stats {
        gap: 8px;
    }

    .screen-stats strong {
        font-size: 15px;
    }

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

    .ai-visual {
        height: 400px;
    }

    .ring-one {
        width: 350px;
        height: 350px;
    }

    .ring-two {
        width: 270px;
        height: 270px;
    }

    .ring-three {
        width: 190px;
        height: 190px;
    }

    .research-flow {
        display: block;
    }

    .research-step {
        margin-bottom: 15px;
    }

    .research-connector {
        display: none;
    }

    .faq-list {
        padding: 5px 18px;
    }

    .faq-question {
        font-size: 15px;
    }

    .cta-inner h2 {
        font-size: 48px;
    }

}

@media (max-width: 480px) {
    .mini-card.mini-card-one,
    .mini-card.mini-card-two,
    .mini-card.mini-card-three {
        display: none !important;
    }

    .ek-hero {
        padding: 60px 0;
    }

    .hero-title {
        font-size: 44px;
    }

    .hero-actions .ek-btn {
        width: 100%;
    }

    .hero-trust {
        justify-content: space-between;
    }

    .trust-line {
        display: none;
    }

    .hero-visual {
        transform: scale(.85);
        margin: -30px -30px;
    }

    .ecosystem-section,
    .capabilities-section,
    .strategy-section,
    .process-section,
    .projects-section,
    .ai-section,
    .research-section,
    .testimonial-section,
    .faq-section {
        padding: 80px 0;
    }

    .section-heading h2 {
        font-size: 40px;
    }

    .faq-intro h2 {
        font-size: 42px;
    }

}


/* =========================================================
   EKLAVYAH
   ABOUT PAGE
========================================================= */

.about-page {
    overflow: hidden;
    background: #fff;
}

.about-page p {
    font-size: 16px;
    line-height: 1.85;
}


/* =========================================================
   ABOUT HERO
========================================================= */

.about-hero {
    position: relative;
    padding: 115px 0 125px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(100,27,91,.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(190,110,180,.08),
            transparent 30%
        ),
        #fbf9fc;
}

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .25;
    background-image:
        linear-gradient(
            rgba(100,27,91,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(100,27,91,.07) 1px,
            transparent 1px
        );
    background-size: 65px 65px;
    mask-image: linear-gradient(
        to right,
        transparent,
        black,
        transparent
    );
    pointer-events: none;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.about-hero h1 {
    max-width: 900px;
    margin: 22px auto 25px;
    font-size: clamp(48px, 7vw, 82px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 850;
}

.about-hero h1 span {
    display: block;
    color: var(--ek-purple);
}

.about-hero p {
    max-width: 720px;
    margin: auto;
    color: var(--ek-muted);
    font-size: 18px;
}

.about-hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}


/* =========================================================
   STORY
========================================================= */

.about-story {
    padding: 120px 0;
    background: #fff;
}

.about-story-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 80px;
    align-items: center;
}

.about-story-content {
    max-width: 760px;
}

.about-story-content h2 {
    margin: 15px 0 28px;
    font-size: clamp(42px, 5vw, 65px);
    line-height: 1;
    font-weight: 850;
}

.about-story-content h2 span {
    color: var(--ek-purple);
}

.about-story-content p {
    color: var(--ek-muted);
    margin-bottom: 18px;
}

.about-story-card {
    min-height: 390px;
    padding: 40px;
    border-radius: 28px;
    position: relative;
    overflow: hidden;
    color: white;
    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(220,167,212,.25),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #641b5b,
            #250d22
        );
    box-shadow:
        0 30px 70px rgba(100,27,91,.2);
}

.about-story-card::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    right: -90px;
    bottom: -100px;
}

.about-card-number {
    font-size: 11px;
    letter-spacing: 2px;
    opacity: .5;
    font-weight: 800;
}

.about-story-card > i {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 85px;
    border-radius: 18px;
    background: rgba(255,255,255,.1);
    color: #e5b9de;
    font-size: 27px;
}

.about-story-card h3 {
    margin: 25px 0 10px;
    font-size: 28px;
}

.about-story-card p {
    color: rgba(255,255,255,.65);
    font-size: 14px;
}


/* =========================================================
   SERVICES
========================================================= */

.about-services {
    padding: 120px 0;
    background: #f6f2f6;
}

.about-services .section-heading {
    margin-bottom: 55px;
}

.about-services .section-heading p {
    margin-left: auto;
    margin-right: auto;
}

.about-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.about-service-card {
    min-height: 320px;
    position: relative;
    overflow: hidden;
    padding: 30px;
    border: 1px solid transparent;
    border-radius: 24px;
    background: #fff;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.about-service-card::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: #f7edf5;
    right: -80px;
    bottom: -80px;
    transition: .4s ease;
}

.about-service-card:hover {
    transform: translateY(-8px);
    border-color: var(--ek-border);
    box-shadow: var(--ek-shadow);
}

.about-service-card:hover::after {
    transform: scale(1.5);
}

.about-service-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 23px;
}

.about-service-icon.purple {
    color: #641b5b;
    background: #eee0eb;
}

.about-service-icon.blue {
    color: #3c67a8;
    background: #e3ebf7;
}

.about-service-icon.green {
    color: #327653;
    background: #e1f1e7;
}

.about-service-icon.orange {
    color: #a45b19;
    background: #faead9;
}

.about-service-icon.pink {
    color: #a13f84;
    background: #f5dfef;
}

.about-service-icon.violet {
    color: #653e9d;
    background: #eae1f7;
}

.about-service-card > span {
    position: absolute;
    top: 32px;
    right: 30px;
    color: #aaa2aa;
    font-size: 11px;
    font-weight: 800;
}

.about-service-card h3 {
    position: relative;
    z-index: 2;
    margin: 28px 0 10px;
    font-size: 22px;
}

.about-service-card p {
    position: relative;
    z-index: 2;
    color: var(--ek-muted);
    font-size: 14px;
}


/* =========================================================
   APPROACH
========================================================= */

.about-approach {
    padding: 120px 0;
    background: #0d090f;
    color: white;
}

.about-approach-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}

.about-approach-visual {
    min-height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.approach-box {
    width: 330px;
    height: 330px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background:
        radial-gradient(
            circle at 30% 20%,
            #b96cae,
            #641b5b 50%,
            #210d1f
        );
    box-shadow:
        0 0 90px rgba(100,27,91,.45);
}

.approach-box::before,
.approach-box::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(220,167,212,.2);
    border-radius: 50%;
}

.approach-box::before {
    width: 430px;
    height: 430px;
}

.approach-box::after {
    width: 520px;
    height: 250px;
    transform: rotate(35deg);
}

.approach-circle {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 20px;
    background: rgba(255,255,255,.1);
    color: #f1cce9;
    font-size: 27px;
}

.approach-box strong {
    font-size: 25px;
    letter-spacing: 3px;
}

.approach-box > span {
    margin-top: 8px;
    color: rgba(255,255,255,.55);
    font-size: 10px;
    letter-spacing: 1px;
}

.about-approach-content h2 {
    margin: 15px 0 25px;
    font-size: clamp(43px, 5vw, 67px);
    line-height: 1;
}

.about-approach-content h2 span {
    color: #dca7d4;
}

.about-approach-content > p {
    max-width: 600px;
    color: rgba(255,255,255,.62);
}

.approach-list {
    margin-top: 30px;
}

.approach-list div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.8);
    font-size: 14px;
}

.approach-list i {
    color: #dca7d4;
}


/* =========================================================
   VALUES
========================================================= */

.about-values {
    padding: 120px 0;
    background: white;
}

.about-values .section-heading p {
    margin-left: auto;
    margin-right: auto;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 55px;
}

.about-value {
    min-height: 280px;
    padding: 30px;
    position: relative;
    border: 1px solid var(--ek-border);
    border-radius: 22px;
    background: #fff;
    transition: .3s ease;
}

.about-value:hover {
    transform: translateY(-7px);
    box-shadow: var(--ek-shadow);
    border-color: rgba(100,27,91,.18);
}

.about-value > strong {
    position: absolute;
    top: 25px;
    right: 25px;
    color: #aaa2aa;
    font-size: 11px;
}

.about-value > i {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    border-radius: 15px;
    background: #f0e4ee;
    color: var(--ek-purple);
    font-size: 21px;
}

.about-value h3 {
    margin: 25px 0 10px;
    font-size: 21px;
}

.about-value p {
    color: var(--ek-muted);
    font-size: 14px;
}


/* =========================================================
   MISSION
========================================================= */

.about-mission {
    padding: 100px 0;
    background: #f7f3f7;
}

.mission-box {
    max-width: 950px;
    margin: auto;
    padding: 65px 55px;
    text-align: center;
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 50% 0,
            rgba(173,85,157,.14),
            transparent 40%
        ),
        white;
    border: 1px solid var(--ek-border);
    box-shadow:
        0 25px 70px rgba(50,20,45,.07);
}

.mission-box h2 {
    margin: 15px auto 25px;
    max-width: 800px;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1;
}

.mission-box h2 span {
    color: var(--ek-purple);
}

.mission-box p {
    max-width: 700px;
    margin: auto;
    color: var(--ek-muted);
}


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

@media (max-width: 991px) {

    .about-hero {
        padding: 90px 0 100px;
    }

    .about-story {
        padding: 100px 0;
    }

    .about-story-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-story-content {
        max-width: 100%;
    }

    .about-story-card {
        max-width: 600px;
        width: 100%;
        margin: auto;
    }

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

    .about-approach {
        padding: 100px 0;
    }

    .about-approach-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .about-approach-content {
        max-width: 750px;
    }

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

}


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

@media (max-width: 767px) {

    .about-hero {
        padding: 70px 0 80px;
    }

    .about-hero h1 {
        font-size: 48px;
    }

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

    .about-hero-actions {
        flex-direction: column;
    }

    .about-hero-actions .ek-btn {
        width: 100%;
    }

    .about-story,
    .about-services,
    .about-approach,
    .about-values {
        padding: 80px 0;
    }

    .about-story-content h2,
    .about-approach-content h2 {
        font-size: 42px;
    }

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

    .about-service-card {
        min-height: auto;
    }

    .about-approach-visual {
        min-height: 390px;
    }

    .approach-box {
        width: 270px;
        height: 270px;
    }

    .approach-box::before {
        width: 350px;
        height: 350px;
    }

    .approach-box::after {
        width: 390px;
        height: 210px;
    }

    .about-values-grid {
        grid-template-columns: 1fr;
    }

    .about-value {
        min-height: auto;
    }

    .mission-box {
        padding: 45px 25px;
        border-radius: 22px;
    }

    .mission-box h2 {
        font-size: 40px;
    }

}


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

@media (max-width: 480px) {

    .about-hero h1 {
        font-size: 42px;
    }

    .about-story-content h2,
    .about-approach-content h2 {
        font-size: 38px;
    }

    .about-story-card {
        padding: 28px;
        min-height: 350px;
    }

    .about-story-card > i {
        margin-top: 70px;
    }

    .about-service-card {
        padding: 25px;
    }

    .about-approach-visual {
        min-height: 330px;
        transform: scale(.85);
        margin: -30px;
    }

    .mission-box h2 {
        font-size: 36px;
    }

}

/* =========================================================
   SOLUTIONS PAGE
========================================================= */

.solutions-hero {
    padding: 90px 0;
    background:
        radial-gradient(circle at 85% 30%, rgba(100,27,91,.12), transparent 30%),
        #fbf9fc;
}

.solutions-hero-grid,
.solutions-seo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.solutions-hero h1 {
    font-size: clamp(48px, 6vw, 78px);
    line-height: 1;
    margin: 18px 0 25px;
    font-weight: 850;
}

.solutions-hero h1 span,
.solutions-seo-content h2 span {
    color: var(--ek-purple);
}

.solutions-hero-content > p {
    max-width: 650px;
    color: var(--ek-muted);
    font-size: 18px;
}

.solutions-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.solutions-hero-image img,
.solutions-seo-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 25px;
    box-shadow: 0 25px 70px rgba(60,20,55,.12);
}

.solutions-intro,
.solutions-list,
.solutions-benefits,
.solutions-seo {
    padding: 110px 0;
}

.solutions-list {
    background: #f6f2f6;
}

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

.solution-card {
    position: relative;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--ek-border);
    border-radius: 22px;
    transition: .3s ease;
}

.solution-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--ek-shadow);
}

.solution-icon {
    width: 55px;
    height: 55px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    margin-bottom: 22px;
}

.solution-icon.purple { color:#641b5b; background:#eee0eb; }
.solution-icon.blue { color:#3c67a8; background:#e3ebf7; }
.solution-icon.green { color:#327653; background:#e1f1e7; }
.solution-icon.orange { color:#a45b19; background:#faead9; }
.solution-icon.violet { color:#653e9d; background:#eae1f7; }
.solution-icon.pink { color:#a13f84; background:#f5dfef; }
.solution-icon.teal { color:#147568; background:#ddf1ed; }
.solution-icon.red { color:#a13d48; background:#f7e2e5; }

.solution-number {
    position: absolute;
    top: 30px;
    right: 28px;
    color: #aaa1aa;
    font-size: 11px;
    font-weight: 800;
}

.solution-card h3 {
    font-size: 21px;
    margin-bottom: 12px;
}

.solution-card p {
    color: var(--ek-muted);
    font-size: 14px;
}

.solution-card ul {
    list-style: none;
    padding: 8px 0 0;
    margin: 0;
}

.solution-card li {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 5px 0;
    font-size: 12px;
    font-weight: 600;
}

.solution-card li i {
    color: var(--ek-purple);
}

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

.benefit-card {
    padding: 30px;
    border: 1px solid var(--ek-border);
    border-radius: 22px;
    background: #fff;
}

.benefit-card > i {
    font-size: 27px;
    color: var(--ek-purple);
}

.benefit-card h3 {
    font-size: 20px;
    margin: 20px 0 10px;
}

.benefit-card p {
    color: var(--ek-muted);
    font-size: 14px;
}

.solutions-seo {
    background: #f7f3f7;
}

.solutions-seo-content h2 {
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.02;
    margin: 15px 0 25px;
}

.solutions-seo-content > p {
    color: var(--ek-muted);
}

.seo-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 25px;
}

.seo-points span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
}

.seo-points i {
    color: var(--ek-purple);
}


/* TABLET */
@media (max-width: 991px) {
    .solutions-hero-grid,
    .solutions-seo-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

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

    .solutions-hero {
        padding: 75px 0;
    }
}


/* MOBILE */
@media (max-width: 767px) {
    .solutions-intro,
    .solutions-list,
    .solutions-benefits,
    .solutions-seo {
        padding: 75px 0;
    }

    .solutions-hero h1 {
        font-size: 45px;
    }

    .solutions-hero-content > p {
        font-size: 16px;
    }

    .solutions-actions {
        flex-direction: column;
    }

    .solutions-actions .ek-btn {
        width: 100%;
    }

    .solutions-grid,
    .benefits-grid,
    .seo-points {
        grid-template-columns: 1fr;
    }

    .solution-card,
    .benefit-card {
        padding: 25px;
    }

    .solutions-seo-content h2 {
        font-size: 40px;
    }
}



/* =========================================================
   SOFTWARE DEVELOPMENT PAGE
========================================================= */

.software-page {
    --software-bg: #07111f;
    --software-bg-2: #0b1728;
    --software-card: rgba(255,255,255,.045);
    --software-border: rgba(255,255,255,.09);
    --software-text: #ffffff;
    --software-muted: #94a0b4;
    --software-accent: #6c7cff;
    --software-accent-2: #8b5cf6;
    --software-radius: 22px;

    background: var(--software-bg);
    color: var(--software-text);
    overflow: hidden;
}

.software-page *,
.software-page *::before,
.software-page *::after {
    box-sizing: border-box;
}


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

.software-page .container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.software-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
}

.software-section.light {
    background:
        linear-gradient(
            180deg,
            #0b1728 0%,
            #081321 100%
        );
}

.software-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #aeb8ff;

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

    letter-spacing: 2px;
    text-transform: uppercase;

    margin-bottom: 18px;
}

.software-kicker::before {
    content: "";

    width: 25px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--software-accent),
            var(--software-accent-2)
        );
}

.software-heading {
    max-width: 760px;
    margin-bottom: 55px;
}

.software-heading h2 {
    margin: 0 0 18px;

    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.05;

    letter-spacing: -1.8px;
}

.software-heading h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #8793ff,
            #c084fc
        );

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

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

.software-heading p {
    margin: 0;

    max-width: 700px;

    color: var(--software-muted);

    font-size: 16px;
    line-height: 1.85;
}


/* =========================================================
   HERO
========================================================= */

.software-hero {
    position: relative;

    min-height: 760px;

    display: flex;
    align-items: center;

    padding: 130px 0 110px;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(108,124,255,.17),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(139,92,246,.14),
            transparent 32%
        ),
        #07111f;

    overflow: hidden;
}

.software-hero::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(108,124,255,.08),
            transparent 70%
        );

    animation:
        heroGlow 9s ease-in-out infinite;
}

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

    position: absolute;

    inset: 0;

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

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );

    pointer-events: none;
}

@keyframes heroGlow {

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

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

}

.software-hero-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, .95fr);

    gap: 70px;

    align-items: center;
}

.software-hero h1 {
    margin: 0 0 25px;

    font-size: clamp(48px, 6vw, 82px);
    line-height: .98;

    letter-spacing: -4px;
}

.software-hero h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #8d98ff,
            #c084fc
        );

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

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

.software-hero p {
    max-width: 720px;

    margin: 0 0 18px;

    color: #9ba7bb;

    font-size: 16px;
    line-height: 1.85;
}

.software-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;
}

.ek-btn {
    display: inline-flex;

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

    gap: 10px;

    min-height: 52px;

    padding: 0 22px;

    border-radius: 12px;

    text-decoration: none;

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

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

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

.ek-btn-primary {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #6374ff,
            #8b5cf6
        );

    box-shadow:
        0 14px 35px rgba(108,124,255,.25);
}

.ek-btn-primary:hover {
    box-shadow:
        0 18px 45px rgba(108,124,255,.35);
}

.ek-btn-ghost {
    color: black;

    border: 1px solid #000;

    background: rgba(255,255,255,.035);
}

.ek-btn-ghost:hover {
    border-color: #000;
    background: rgba(255,255,255,.07);
}


/* =========================================================
   HERO VISUAL
========================================================= */

.software-visual {
    position: relative;

    min-height: 520px;

    display: flex;

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

.software-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(2px);

    pointer-events: none;
}

.software-orb.one {
    width: 330px;
    height: 330px;

    background:
        radial-gradient(
            circle,
            rgba(99,116,255,.28),
            transparent 68%
        );

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

.software-orb.two {
    width: 240px;
    height: 240px;

    background:
        radial-gradient(
            circle,
            rgba(192,132,252,.20),
            transparent 68%
        );

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

@keyframes orbOne {

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

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

}

@keyframes orbTwo {

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

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

}

.software-main-card {
    position: relative;

    z-index: 3;

    width: min(100%, 430px);

    padding: 28px;

    border-radius: 28px;

    border: 1px solid rgba(255,255,255,.12);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025)
        );

    backdrop-filter: blur(22px);

    box-shadow:
        0 35px 90px rgba(0,0,0,.35);

    transform:
        rotateY(-8deg)
        rotateX(4deg);

    animation:
        softwareCardFloat 6s ease-in-out infinite;

    transition:
        transform .5s ease;
}

.software-main-card:hover {
    transform:
        rotateY(0)
        rotateX(0)
        translateY(-8px);
}

@keyframes softwareCardFloat {

    0%,100% {
        transform:
            rotateY(-8deg)
            rotateX(4deg)
            translateY(0);
    }

    50% {
        transform:
            rotateY(-5deg)
            rotateX(2deg)
            translateY(-14px);
    }

}

.software-card-top {
    display: flex;

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

    gap: 15px;

    padding-bottom: 20px;

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

    color: #8994a9;

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

    letter-spacing: 1.3px;
}

.software-live {
    color: #8de2b3;

    display: flex;

    align-items: center;

    gap: 6px;
}

.software-live i {
    font-size: 7px;

    animation:
        livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {

    0%,100% {
        opacity: .45;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }

}

.software-icon {
    width: 82px;
    height: 82px;

    display: flex;

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

    margin: 35px 0 25px;

    border-radius: 22px;

    font-size: 38px;

    background:
        linear-gradient(
            135deg,
            rgba(99,116,255,.20),
            rgba(192,132,252,.14)
        );

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        0 15px 40px rgba(99,116,255,.12);

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

@keyframes iconPulse {

    0%,100% {
        box-shadow:
            0 15px 40px rgba(99,116,255,.12);
    }

    50% {
        box-shadow:
            0 15px 50px rgba(139,92,246,.28);
    }

}

.software-main-card h3 {
    margin: 0 0 10px;

    font-size: 28px;
}

.software-main-card > p {
    margin: 0;

    color: #8f9aae;

    line-height: 1.7;
}

.software-card-bottom {
    display: grid;

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

    gap: 10px;

    margin-top: 30px;
}

.software-card-bottom > div {
    padding: 14px;

    border-radius: 13px;

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

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

.software-card-bottom strong {
    display: block;

    font-size: 17px;
}

.software-card-bottom span {
    display: block;

    margin-top: 4px;

    color: #818b9f;

    font-size: 11px;
}


/* =========================================================
   SERVICES
========================================================= */

.software-services-grid {
    display: grid;

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

    gap: 18px;
}

.software-service {
    position: relative;

    padding: 30px;

    min-height: 300px;

    border-radius: var(--software-radius);

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.015)
        );

    overflow: hidden;

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

.software-service::after {
    content: "";

    position: absolute;

    width: 140px;
    height: 140px;

    right: -70px;
    bottom: -70px;

    border-radius: 50%;

    background:
        rgba(108,124,255,.10);

    transition:
        transform .5s ease;
}

.software-service:hover {
    transform: translateY(-9px);

    border-color:
        rgba(255,255,255,.20);

    box-shadow:
        0 25px 55px rgba(0,0,0,.22);
}

.software-service:hover::after {
    transform: scale(2);
}

.software-service-icon {
    width: 58px;
    height: 58px;

    display: flex;

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

    margin-bottom: 25px;

    border-radius: 16px;

    font-size: 24px;

    color: #aeb8ff;

    background:
        rgba(108,124,255,.10);

    border:
        1px solid rgba(108,124,255,.15);
}

.software-service small {
    color: #707b91;

    font-weight: 700;

    letter-spacing: 1px;
}

.software-service h3 {
    margin: 10px 0 12px;

    font-size: 21px;
}

.software-service p {
    margin: 0;

    color: #8e99ac;

    line-height: 1.75;

    font-size: 14px;
}


/* =========================================================
   WHY
========================================================= */

.software-why-grid {
    display: grid;

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

    gap: 80px;

    align-items: center;
}

.software-why-content h2 {
    margin: 0 0 22px;

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

    line-height: 1.08;

    letter-spacing: -1.5px;
}

.software-why-content h2 span {
    display: block;

    color: #8d98ff;
}

.software-why-content p {
    color: #8e99ac;

    line-height: 1.85;

    font-size: 15px;
}

.software-benefits {
    display: grid;

    gap: 14px;
}

.software-benefit {
    display: flex;

    gap: 18px;

    padding: 22px;

    border-radius: 18px;

    border:
        1px solid rgba(255,255,255,.07);

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

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

.software-benefit:hover {
    transform: translateX(7px);

    background:
        rgba(255,255,255,.055);
}

.software-benefit > i {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 13px;

    color: #aeb8ff;

    background:
        rgba(108,124,255,.10);
}

.software-benefit h3 {
    margin: 0 0 6px;

    font-size: 17px;
}

.software-benefit p {
    margin: 0;

    color: #838ea1;

    font-size: 13px;

    line-height: 1.65;
}


/* =========================================================
   TECHNOLOGY
========================================================= */

.software-tech {
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(108,124,255,.07),
            transparent 35%
        );
}

.tech-heading {
    max-width: 800px;
}

.tech-filter-wrap {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 9px;

    max-width: 1100px;

    margin: 0 auto 40px;
}

.tech-filter {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 15px;

    border-radius: 50px;

    border:
        1px solid rgba(255,255,255,.09);

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

    color: #929db1;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition:
        all .3s ease;
}

.tech-filter:hover {
    color: #fff;

    transform: translateY(-3px);

    border-color:
        rgba(255,255,255,.22);
}

.tech-filter.active {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(99,116,255,.25),
            rgba(139,92,246,.20)
        );

    border-color:
        rgba(142,153,255,.35);

    box-shadow:
        0 10px 30px rgba(108,124,255,.12);
}

.tech-grid {
    display: grid;

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

    gap: 14px;
}

.tech-item {
    position: relative;

    min-height: 155px;

    padding: 22px 12px;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    border-radius: 18px;

    border:
        1px solid rgba(255,255,255,.08);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.012)
        );

    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        opacity .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

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

    position: absolute;

    width: 100px;
    height: 100px;

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

    border-radius: 50%;

    background:
        rgba(108,124,255,.12);

    transition:
        transform .5s ease;
}

.tech-item::after {
    content: "";

    position: absolute;

    width: 150%;

    height: 1px;

    left: -150%;

    top: 50%;

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

    transform: rotate(-35deg);

    transition:
        left .7s ease;
}

.tech-item:hover {
    transform:
        translateY(-9px)
        scale(1.025);

    border-color:
        rgba(255,255,255,.22);

    box-shadow:
        0 20px 45px rgba(0,0,0,.22);
}

.tech-item:hover::before {
    transform: scale(2.4);
}

.tech-item:hover::after {
    left: 120%;
}

.tech-icon {
    position: relative;

    z-index: 2;

    width: 56px;
    height: 56px;

    display: flex;

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

    margin-bottom: 14px;

    border-radius: 15px;

    color: #b4bdff;

    background:
        rgba(108,124,255,.09);

    border:
        1px solid rgba(255,255,255,.08);

    font-size: 25px;

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

.tech-item:hover .tech-icon {
    transform:
        translateY(-5px)
        rotate(-5deg)
        scale(1.08);

    box-shadow:
        0 12px 30px rgba(108,124,255,.18);
}

.tech-item > span {
    position: relative;

    z-index: 2;

    color: #fff;

    font-size: 14px;

    font-weight: 700;
}

.tech-item > small {
    position: relative;

    z-index: 2;

    margin-top: 5px;

    color: #737e92;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: .6px;
}

.tech-hidden {
    display: none !important;
}

.tech-reveal {
    animation:
        techReveal .55s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes techReveal {

    from {
        opacity: 0;

        transform:
            translateY(25px)
            scale(.94);
    }

    to {
        opacity: 1;

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

}

.tech-floating {
    position: absolute;

    z-index: 0;

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

    font-family: monospace;

    font-weight: 900;

    pointer-events: none;

    user-select: none;
}

.tech-float-1 {
    left: 2%;
    top: 10%;

    font-size: 100px;

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

.tech-float-2 {
    right: 2%;
    top: 35%;

    font-size: 120px;

    animation:
        techFloat2 10s ease-in-out infinite;
}

.tech-float-3 {
    left: 45%;
    bottom: 5%;

    font-size: 70px;

    animation:
        techFloat3 9s ease-in-out infinite;
}

@keyframes techFloat1 {

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

    50% {
        transform: translate(25px,-30px) rotate(8deg);
    }

}

@keyframes techFloat2 {

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

    50% {
        transform: translate(-30px,25px) rotate(-8deg);
    }

}

@keyframes techFloat3 {

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

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

}

.tech-bottom-note {
    max-width: 900px;

    margin: 50px auto 0;

    padding: 24px;

    display: flex;

    align-items: center;

    gap: 18px;

    border-radius: 18px;

    border:
        1px solid rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.025);
}

.tech-bottom-icon {
    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    display: flex;

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

    border-radius: 14px;

    color: #aeb8ff;

    background:
        rgba(108,124,255,.10);

    font-size: 22px;
}

.tech-bottom-note strong {
    display: block;

    margin-bottom: 5px;

    font-size: 15px;
}

.tech-bottom-note p {
    margin: 0;

    color: #818c9f;

    font-size: 13px;

    line-height: 1.7;
}


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

.software-process-grid {
    display: grid;

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

    gap: 14px;
}

.software-process {
    position: relative;

    padding: 28px 22px;

    min-height: 300px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 20px;

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

    transition:
        transform .4s ease,
        border-color .4s ease;
}

.software-process:hover {
    transform: translateY(-8px);

    border-color:
        rgba(255,255,255,.20);
}

.software-process > strong {
    color: #7784ff;

    font-size: 12px;

    letter-spacing: 1px;
}

.software-process > i {
    display: flex;

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

    width: 52px;
    height: 52px;

    margin: 25px 0;

    border-radius: 14px;

    background:
        rgba(108,124,255,.10);

    color: #aeb8ff;

    font-size: 22px;
}

.software-process h3 {
    margin: 0 0 10px;

    font-size: 18px;
}

.software-process p {
    margin: 0;

    color: #818c9f;

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   SEO CONTENT
========================================================= */

.software-content {
    max-width: 900px;
}

.software-content h2 {
    margin: 0 0 25px;

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

    line-height: 1.08;
}

.software-content h3 {
    margin-top: 40px;

    margin-bottom: 12px;

    font-size: 23px;
}

.software-content p {
    color: #8d98aa;

    font-size: 15px;

    line-height: 1.9;

    margin-bottom: 20px;
}


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

.software-reveal {
    opacity: 0;

    transform: translateY(35px);

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

.software-reveal.show {
    opacity: 1;

    transform: translateY(0);
}


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

@media (max-width: 1100px) {

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

        gap: 40px;
    }

    .tech-grid {
        grid-template-columns:
            repeat(5,1fr);
    }

    .software-process-grid {
        grid-template-columns:
            repeat(3,1fr);
    }

}


@media (max-width: 900px) {

    .software-hero {
        padding-top: 100px;
    }

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

    .software-visual {
        min-height: 430px;
    }

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

    .software-why-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

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

}


@media (max-width: 700px) {

    .software-section {
        padding: 80px 0;
    }

    .software-page .container {
        width: min(100% - 28px, 1200px);
    }

    .software-hero {
        min-height: auto;

        padding:
            100px 0
            70px;
    }

    .software-hero h1 {
        font-size: clamp(43px, 13vw, 65px);

        letter-spacing: -2.5px;
    }

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

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

        gap: 10px;
    }

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

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

}


@media (max-width: 520px) {

    .software-actions {
        flex-direction: column;
    }

    .ek-btn {
        width: 100%;
    }

    .software-main-card {
        padding: 22px;

        border-radius: 22px;
    }

    .software-card-bottom {
        gap: 7px;
    }

    .software-card-bottom > div {
        padding: 11px;
    }

    .tech-filter-wrap {
        justify-content: flex-start;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 8px;

        scrollbar-width: none;
    }

    .tech-filter-wrap::-webkit-scrollbar {
        display: none;
    }

    .tech-filter {
        flex: 0 0 auto;
    }

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

    .tech-item {
        min-height: 135px;
    }

    .tech-icon {
        width: 50px;
        height: 50px;

        font-size: 22px;
    }

    .tech-item > span {
        font-size: 13px;
    }

    .software-process-grid {
        grid-template-columns: 1fr;
    }

    .tech-bottom-note {
        align-items: flex-start;
    }

    .tech-floating {
        display: none;
    }

}


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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;
    }

}



/* =========================================================
   CUSTOM SOFTWARE DEVELOPMENT PAGE
   ========================================================= */

.custom-software-page{
    background:#fff;
    color:var(--ek-text);
    overflow:hidden;
}

.custom-software-page .container{
    width:min(1180px,92%);
    margin:auto;
}

.custom-software-page *,
.custom-software-page *::before,
.custom-software-page *::after{
    box-sizing:border-box;
}

.cs-kicker{
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:var(--ek-purple);
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    margin-bottom:16px;
}

.cs-kicker::before{
    content:"";
    width:28px;
    height:2px;
    border-radius:5px;
    background:var(--ek-gradient);
}

/* =========================================================
   HERO
   ========================================================= */

.cs-hero{
    position:relative;
    padding:105px 0 90px;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(100,27,91,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(181,45,105,.05),
            transparent 25%
        ),
        #fff;
}

.cs-hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
    align-items:center;
}

.cs-hero h1{
    color:var(--ek-dark);
    font-size:clamp(42px,5vw,68px);
    line-height:1.05;
    letter-spacing:-2.5px;
    margin:0 0 25px;
    font-weight:800;
}

.cs-hero h1 span{
    display:inline-block;
    background:var(--ek-gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.cs-hero p{
    max-width:690px;
    color:var(--ek-muted);
    font-size:17px;
    line-height:1.8;
    margin:0 0 17px;
}

/* =========================================================
   BUTTONS
   ========================================================= */

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

.cs-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:14px 23px;
    border-radius:10px;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    transition:.3s ease;
}

.cs-btn-primary{
    color:#fff;
    background:var(--ek-gradient);
    border:1px solid transparent;
    box-shadow:0 12px 30px rgba(100,27,91,.18);
}

.cs-btn-primary:hover{
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 16px 35px rgba(100,27,91,.25);
}

.cs-btn-outline{
    color:var(--ek-purple);
    background:#fff;
    border:1px solid var(--ek-border);
}

.cs-btn-outline:hover{
    color:var(--ek-purple);
    border-color:var(--ek-purple);
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(100,27,91,.08);
}

/* =========================================================
   HERO VISUAL
   ========================================================= */

.cs-visual{
    position:relative;
    min-height:440px;
}

.cs-code-card{
    position:absolute;
    width:390px;
    max-width:90%;
    top:35px;
    left:50%;
    transform:translateX(-50%);
    padding:24px;
    background:#fff;
    border:1px solid var(--ek-border);
    border-radius:20px;
    box-shadow:0 25px 70px rgba(23,21,28,.12);
    animation:csFloatCard 5s ease-in-out infinite;
}

.cs-code-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:18px;
    border-bottom:1px solid var(--ek-border);
    color:var(--ek-muted);
    font-size:11px;
    font-weight:800;
    letter-spacing:.5px;
}

.cs-dots{
    display:flex;
    gap:5px;
}

.cs-dots i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--ek-magenta);
}

.cs-dots i:nth-child(2){
    background:var(--ek-orange);
}

.cs-dots i:nth-child(3){
    background:var(--ek-purple);
}

.cs-code{
    padding:25px 5px 17px;
    color:var(--ek-text);
    font-family:monospace;
    font-size:13px;
    line-height:2;
}

.cs-code .blue{
    color:var(--ek-purple);
}

.cs-code .green{
    color:var(--ek-teal);
}

.cs-code .purple{
    color:var(--ek-magenta);
}

.cs-status{
    display:flex;
    align-items:center;
    gap:8px;
    padding-top:15px;
    border-top:1px solid var(--ek-border);
    color:var(--ek-green);
    font-size:11px;
    font-weight:800;
}

.cs-status i{
    font-size:7px;
}

.cs-floating{
    position:absolute;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 15px;
    background:#fff;
    border:1px solid var(--ek-border);
    border-radius:12px;
    color:var(--ek-text);
    font-size:13px;
    font-weight:700;
    box-shadow:0 15px 35px rgba(23,21,28,.09);
    animation:csFloatSmall 4s ease-in-out infinite;
}

.cs-floating i{
    font-size:21px;
}

.cs-f1{
    top:10px;
    right:0;
}

.cs-f1 i{
    color:var(--ek-purple);
}

.cs-f2{
    bottom:90px;
    left:0;
    animation-delay:1s;
}

.cs-f2 i{
    color:var(--ek-teal);
}

.cs-f3{
    bottom:15px;
    right:35px;
    animation-delay:2s;
}

.cs-f3 i{
    color:var(--ek-orange);
}

@keyframes csFloatCard{
    0%,100%{
        transform:translate(-50%,0);
    }
    50%{
        transform:translate(-50%,-10px);
    }
}

@keyframes csFloatSmall{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}

/* =========================================================
   COMMON SECTIONS
   ========================================================= */

.cs-section{
    padding:90px 0;
}

.cs-section.light{
    background:var(--ek-light);
}

.cs-heading{
    max-width:720px;
    margin:0 auto 50px;
    text-align:center;
}

.cs-heading h2{
    color:var(--ek-dark);
    font-size:clamp(32px,4vw,48px);
    line-height:1.15;
    letter-spacing:-1.5px;
    margin:0 0 17px;
}

.cs-heading h2 span{
    background:var(--ek-gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.cs-heading p{
    color:var(--ek-muted);
    line-height:1.8;
    margin:0;
}

/* =========================================================
   SERVICES
   ========================================================= */

.cs-services{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.cs-service{
    position:relative;
    padding:30px;
    background:#fff;
    border:1px solid var(--ek-border);
    border-radius:16px;
    transition:.35s ease;
    opacity:0;
    transform:translateY(25px);
}

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

.cs-service::before{
    content:"";
    position:absolute;
    top:0;
    left:25px;
    right:25px;
    height:2px;
    border-radius:10px;
    background:var(--ek-gradient);
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
}

.cs-service:hover::before{
    transform:scaleX(1);
}

.cs-service:hover{
    transform:translateY(-8px);
    border-color:#DCCED9;
    box-shadow:0 18px 45px rgba(100,27,91,.10);
}

.cs-service-icon{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    margin-bottom:20px;
    border-radius:13px;
    color:var(--ek-purple);
    background:var(--ek-purple-light);
    font-size:24px;
}

.cs-service:nth-child(2) .cs-service-icon{
    color:var(--ek-magenta);
    background:var(--ek-magenta-light);
}

.cs-service:nth-child(3) .cs-service-icon{
    color:var(--ek-orange);
    background:var(--ek-orange-light);
}

.cs-service:nth-child(4) .cs-service-icon{
    color:var(--ek-teal);
    background:var(--ek-teal-light);
}

.cs-service:nth-child(5) .cs-service-icon{
    color:var(--ek-gold);
    background:var(--ek-gold-light);
}

.cs-service:nth-child(6) .cs-service-icon{
    color:var(--ek-green);
    background:var(--ek-green-light);
}

.cs-service small{
    color:var(--ek-muted);
    font-weight:800;
}

.cs-service h3{
    color:var(--ek-dark);
    font-size:20px;
    margin:10px 0;
}

.cs-service p{
    color:var(--ek-muted);
    line-height:1.7;
    font-size:14px;
    margin:0;
}

/* =========================================================
   TECHNOLOGY
   ========================================================= */

.cs-tech-section{
    padding:95px 0;
    background:#fff;
}

.cs-tech-label{
    display:flex;
    align-items:center;
    gap:13px;
    margin:40px 0 20px;
    color:var(--ek-dark);
    font-size:14px;
    font-weight:800;
}

.cs-tech-label::after{
    content:"";
    height:1px;
    flex:1;
    background:var(--ek-border);
}

.cs-tech-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:14px;
}

.cs-tech{
    min-height:105px;
    padding:18px 10px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:9px;
    text-align:center;
    background:#fff;
    border:1px solid var(--ek-border);
    border-radius:14px;
    transition:.3s ease;
    opacity:0;
    transform:scale(.92);
}

.cs-tech.show{
    opacity:1;
    transform:scale(1);
}

.cs-tech:hover{
    transform:translateY(-6px) scale(1.02);
    border-color:#D8C8D5;
    box-shadow:0 15px 35px rgba(100,27,91,.09);
}

.cs-tech i{
    font-size:28px;
    color:var(--ek-purple);
}

.cs-tech:nth-child(3n+2) i{
    color:var(--ek-magenta);
}

.cs-tech:nth-child(3n+3) i{
    color:var(--ek-orange);
}

.cs-tech span{
    color:var(--ek-text);
    font-size:13px;
    font-weight:700;
}

/* =========================================================
   WHY SECTION
   ========================================================= */

.cs-why-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.cs-why h2{
    color:var(--ek-dark);
    font-size:44px;
    line-height:1.15;
    margin:0 0 20px;
}

.cs-why h2 span{
    background:var(--ek-gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.cs-why p{
    color:var(--ek-muted);
    line-height:1.8;
}

.cs-benefits{
    display:grid;
    gap:15px;
}

.cs-benefit{
    display:flex;
    gap:17px;
    padding:20px;
    background:#fff;
    border:1px solid var(--ek-border);
    border-radius:13px;
    transition:.3s;
}

.cs-benefit:hover{
    transform:translateX(6px);
    border-color:#D8C8D5;
    box-shadow:0 10px 25px rgba(100,27,91,.07);
}

.cs-benefit i{
    flex:none;
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    border-radius:10px;
    color:var(--ek-purple);
    background:var(--ek-purple-light);
}

.cs-benefit:nth-child(2) i{
    color:var(--ek-green);
    background:var(--ek-green-light);
}

.cs-benefit:nth-child(3) i{
    color:var(--ek-orange);
    background:var(--ek-orange-light);
}

.cs-benefit:nth-child(4) i{
    color:var(--ek-teal);
    background:var(--ek-teal-light);
}

.cs-benefit h3{
    color:var(--ek-dark);
    font-size:16px;
    margin:0 0 5px;
}

.cs-benefit p{
    color:var(--ek-muted);
    font-size:13px;
    margin:0;
}

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

.cs-process{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
}

.cs-step{
    padding:25px 20px;
    background:#fff;
    border:1px solid var(--ek-border);
    border-radius:15px;
    transition:.3s;
}

.cs-step:hover{
    transform:translateY(-6px);
    border-color:#D8C8D5;
    box-shadow:0 15px 30px rgba(100,27,91,.08);
}

.cs-step strong{
    color:var(--ek-purple);
    font-size:13px;
}

.cs-step i{
    display:block;
    margin:25px 0 15px;
    color:var(--ek-magenta);
    font-size:25px;
}

.cs-step h3{
    color:var(--ek-dark);
    font-size:17px;
    margin:0 0 10px;
}

.cs-step p{
    color:var(--ek-muted);
    font-size:13px;
    line-height:1.7;
    margin:0;
}

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

.cs-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    text-align:center;
}

.cs-stat{
    padding:30px;
    background:#fff;
    border:1px solid var(--ek-border);
    border-radius:15px;
    transition:.3s;
}

.cs-stat:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 30px rgba(100,27,91,.07);
}

.cs-stat strong{
    display:block;
    color:var(--ek-purple);
    font-size:38px;
    line-height:1.2;
}

.cs-stat:nth-child(2) strong{
    color:var(--ek-magenta);
}

.cs-stat:nth-child(3) strong{
    color:var(--ek-orange);
}

.cs-stat:nth-child(4) strong{
    color:var(--ek-teal);
}

.cs-stat span{
    color:var(--ek-muted);
    font-size:14px;
}

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

.cs-cta{
    position:relative;
    padding:90px 20px;
    text-align:center;
    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(255,255,255,.10),
            transparent 25%
        ),
        var(--ek-gradient);
    color:#fff;
    overflow:hidden;
}

.cs-cta::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    right:-100px;
    top:-130px;
}

.cs-cta h2{
    position:relative;
    color:#fff;
    font-size:clamp(32px,4vw,48px);
    line-height:1.15;
    margin:0 auto 15px;
}

.cs-cta h2 span{
    color:#fff;
}

.cs-cta p{
    position:relative;
    max-width:650px;
    margin:0 auto 27px;
    color:rgba(255,255,255,.82);
    line-height:1.8;
}

.cs-cta .cs-kicker{
    color:#fff;
    position:relative;
}

.cs-cta .cs-kicker::before{
    background:#fff;
}

.cs-cta .cs-btn-primary{
    position:relative;
    background:#fff;
    color:var(--ek-purple);
    box-shadow:0 12px 30px rgba(23,21,28,.15);
}

.cs-cta .cs-btn-primary:hover{
    color:var(--ek-purple);
    background:#fff;
}

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

.cs-reveal{
    opacity:0;
    transform:translateY(25px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.cs-reveal.show{
    opacity:1;
    transform:translateY(0);
}

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

@media(max-width:1000px){

    .cs-hero-grid,
    .cs-why-grid{
        grid-template-columns:1fr;
    }

    .cs-tech-grid{
        grid-template-columns:repeat(4,1fr);
    }

    .cs-process{
        grid-template-columns:repeat(3,1fr);
    }

    .cs-visual{
        min-height:420px;
    }
}

@media(max-width:700px){

    .cs-hero{
        padding:75px 0 60px;
    }

    .cs-hero h1{
        letter-spacing:-1.5px;
    }

    .cs-hero p{
        font-size:15px;
    }

    .cs-section,
    .cs-tech-section{
        padding:65px 0;
    }

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

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

    .cs-process,
    .cs-stats{
        grid-template-columns:1fr 1fr;
    }

    .cs-code-card{
        width:340px;
    }

    .cs-f1{
        right:-5px;
    }

    .cs-f2{
        left:-5px;
    }

    .cs-f3{
        right:5px;
    }
}

@media(max-width:480px){

    .cs-actions{
        flex-direction:column;
    }

    .cs-btn{
        width:100%;
    }

    .cs-process,
    .cs-stats{
        grid-template-columns:1fr;
    }

    .cs-code-card{
        width:290px;
        padding:18px;
    }

    .cs-floating{
        font-size:11px;
        padding:9px 11px;
    }

    .cs-f2{
        bottom:70px;
    }

    .cs-heading h2,
    .cs-why h2{
        font-size:32px;
    }
}



/* =========================================================
   EKLAVYAH - WEBSITE DEVELOPMENT
   Uses existing global :root variables
   ========================================================= */

.wd-page {
    background: #fff;
    color: var(--ek-text);
    overflow: hidden;
}

.wd-page .container {
    width: min(1180px, 92%);
    margin: auto;
}

.wd-section {
    padding: 85px 0;
}

.wd-light {
    background: var(--ek-light);
}


/* =========================
   KICKER
   ========================= */

.wd-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;

    color: var(--ek-purple);

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

.wd-kicker::before {
    content: "";

    width: 28px;
    height: 2px;

    border-radius: 10px;

    background: var(--ek-gradient);
}


/* =========================
   HERO
   ========================= */

.wd-hero {
    padding: 100px 0 85px;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(100, 27, 91, .08),
            transparent 30%
        ),
        #fff;
}

.wd-hero-grid {
    display: grid;
    grid-template-columns: 1fr .9fr;

    gap: 60px;

    align-items: center;
}

.wd-hero h1 {
    margin: 0 0 22px;

    color: var(--ek-dark);

    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.05;

    letter-spacing: -2px;
}

.wd-hero h1 span,
.wd-heading h2 span {
    background: var(--ek-gradient);

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

.wd-hero p {
    max-width: 680px;

    margin: 0 0 15px;

    color: var(--ek-muted);

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


/* =========================
   BUTTONS
   ========================= */

.wd-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}

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

    gap: 8px;

    padding: 13px 21px;

    border-radius: 9px;

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

    text-decoration: none;

    transition: .3s ease;
}

.wd-primary {
    color: #fff;
    background: var(--ek-gradient);
}

.wd-primary:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 12px 28px rgba(100, 27, 91, .18);
}

.wd-outline {
    color: var(--ek-purple);

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

.wd-outline:hover {
    color: var(--ek-purple);

    border-color: var(--ek-purple);
}


/* =========================
   HERO VISUAL
   ========================= */

.wd-visual {
    display: grid;
    place-items: center;

    min-height: 390px;
}

.wd-browser {
    width: min(450px, 100%);

    overflow: hidden;

    background: #fff;

    border: 1px solid var(--ek-border);
    border-radius: 18px;

    box-shadow: 0 25px 60px rgba(23, 21, 28, .10);

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

.wd-browser-top {
    display: flex;
    align-items: center;

    gap: 6px;

    padding: 14px 17px;

    border-bottom: 1px solid var(--ek-border);
}

.wd-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--ek-purple);
}

.wd-dot:nth-child(2) {
    background: var(--ek-magenta);
}

.wd-dot:nth-child(3) {
    background: var(--ek-orange);
}

.wd-address {
    flex: 1;

    height: 22px;

    margin-left: 10px;

    border-radius: 20px;

    background: var(--ek-light);
}

.wd-screen {
    padding: 25px;
}

.wd-screen-line {
    height: 10px;

    margin-bottom: 12px;

    border-radius: 10px;

    background: var(--ek-light);
}

.wd-screen-line.big {
    width: 75%;
    height: 17px;

    background: #eee6ed;
}

.wd-screen-line.mid {
    width: 55%;
}

.wd-screen-btn {
    width: 105px;
    height: 32px;

    margin-top: 12px;

    border-radius: 7px;

    background: var(--ek-gradient);
}

.wd-screen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-top: 25px;
}

.wd-screen-box {
    height: 75px;

    border-radius: 10px;

    background: var(--ek-light);
}

@keyframes wdFloat {
    50% {
        transform: translateY(-9px);
    }
}


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

.wd-heading {
    max-width: 720px;

    margin: 0 auto 45px;

    text-align: center;
}

.wd-heading h2 {
    margin: 0 0 15px;

    color: var(--ek-dark);

    font-size: clamp(31px, 4vw, 46px);
    line-height: 1.15;
}

.wd-heading p {
    margin: 0;

    color: var(--ek-muted);

    line-height: 1.8;
}


/* =========================
   SERVICES
   ========================= */

.wd-services {
    display: grid;

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

    gap: 18px;
}

.wd-card {
    position: relative;

    padding: 27px;

    background: #fff;

    border: 1px solid var(--ek-border);
    border-radius: 15px;

    transition: .3s ease;
}

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

    border-color: rgba(100, 27, 91, .25);

    box-shadow: 0 15px 35px rgba(100, 27, 91, .08);
}

.wd-icon {
    display: grid;
    place-items: center;

    width: 50px;
    height: 50px;

    margin-bottom: 18px;

    border-radius: 12px;

    color: var(--ek-purple);

    background: rgba(100, 27, 91, .08);

    font-size: 23px;
}

.wd-card:nth-child(2) .wd-icon,
.wd-card:nth-child(5) .wd-icon {
    color: var(--ek-magenta);

    background: rgba(181, 45, 105, .08);
}

.wd-card:nth-child(3) .wd-icon,
.wd-card:nth-child(6) .wd-icon {
    color: var(--ek-orange);

    background: rgba(230, 106, 24, .08);
}

.wd-number {
    display: block;

    margin-bottom: 7px;

    color: var(--ek-muted);

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

.wd-card h3 {
    margin: 0 0 9px;

    color: var(--ek-dark);

    font-size: 19px;
}

.wd-card p {
    margin: 0;

    color: var(--ek-muted);

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


/* =========================
   FEATURES
   ========================= */

.wd-features {
    display: grid;

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

    gap: 18px;
}

.wd-feature {
    display: flex;

    gap: 15px;

    padding: 20px;

    background: #fff;

    border: 1px solid var(--ek-border);
    border-radius: 13px;
}

.wd-feature > i {
    flex: 0 0 42px;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    color: var(--ek-purple);

    border-radius: 10px;

    background: rgba(100, 27, 91, .08);
}

.wd-feature h3 {
    margin: 0 0 5px;

    color: var(--ek-dark);

    font-size: 16px;
}

.wd-feature p {
    margin: 0;

    color: var(--ek-muted);

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


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

.wd-process {
    display: grid;

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

    gap: 15px;
}

.wd-step {
    padding: 25px 20px;

    background: #fff;

    border: 1px solid var(--ek-border);
    border-radius: 14px;
}

.wd-step strong {
    color: var(--ek-purple);

    font-size: 13px;
}

.wd-step i {
    display: block;

    margin: 22px 0 13px;

    color: var(--ek-magenta);

    font-size: 25px;
}

.wd-step h3 {
    margin: 0 0 8px;

    color: var(--ek-dark);

    font-size: 17px;
}

.wd-step p {
    margin: 0;

    color: var(--ek-muted);

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


/* =========================
   SEO CONTENT
   ========================= */

.wd-content {
    max-width: 900px;

    margin: auto;
}

.wd-content h2 {
    margin: 0 0 20px;

    color: var(--ek-dark);

    font-size: 36px;
}

.wd-content h3 {
    margin: 30px 0 10px;

    color: var(--ek-dark);

    font-size: 23px;
}

.wd-content p {
    margin: 0 0 15px;

    color: var(--ek-muted);

    line-height: 1.85;
}


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

.wd-cta {
    padding: 80px 20px;

    color: #fff;

    text-align: center;

    background: var(--ek-gradient);
}

.wd-cta-kicker {
    display: inline-block;

    margin-bottom: 12px;

    color: #fff;

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

.wd-cta h2 {
    margin: 0 0 12px;

    font-size: clamp(31px, 4vw, 46px);
}

.wd-cta p {
    max-width: 650px;

    margin: 0 auto 25px;

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

    line-height: 1.8;
}

.wd-cta-btn {
    color: var(--ek-purple);

    background: #fff;
}

.wd-cta-btn:hover {
    color: var(--ek-purple);

    transform: translateY(-3px);
}


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

.wd-reveal {
    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.wd-reveal.show {
    opacity: 1;

    transform: translateY(0);
}


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

@media (max-width: 900px) {

    .wd-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

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

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

}


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

@media (max-width: 600px) {

    .wd-section {
        padding: 60px 0;
    }

    .wd-hero {
        padding: 70px 0 60px;
    }

    .wd-hero h1 {
        letter-spacing: -1px;
    }

    .wd-services,
    .wd-features,
    .wd-process {
        grid-template-columns: 1fr;
    }

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

    .wd-btn {
        width: 100%;
    }

    .wd-browser {
        width: 100%;
    }

}


/* =========================================
   MOBILE APP DEVELOPMENT
   Uses existing global :root variables
   ========================================= */

.mad-page {
    color: var(--ek-text);
    background: #fff;
    overflow: hidden;
}

.mad-page .container {
    width: min(1180px, 92%);
    margin: auto;
}

.mad-section {
    padding: 85px 0;
}

.mad-light {
    background: var(--ek-light);
}


/* KICKER */

.mad-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 14px;

    color: var(--ek-purple);

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

.mad-kicker::before {
    content: "";

    width: 28px;
    height: 2px;

    border-radius: 10px;

    background: var(--ek-gradient);
}


/* HERO */

.mad-hero {
    padding: 100px 0 85px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(100, 27, 91, .08),
            transparent 30%
        ),
        #fff;
}

.mad-hero-grid {
    display: grid;
    grid-template-columns: 1fr .85fr;

    gap: 65px;
    align-items: center;
}

.mad-hero h1 {
    margin: 0 0 22px;

    color: var(--ek-dark);

    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.mad-hero h1 span,
.mad-heading h2 span,
.mad-two-column h2 span {
    background: var(--ek-gradient);

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

.mad-hero p {
    max-width: 680px;

    margin: 0 0 14px;

    color: var(--ek-muted);

    line-height: 1.8;
}


/* BUTTONS */

.mad-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 28px;
}

.mad-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 13px 21px;

    border-radius: 9px;

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

    text-decoration: none;

    transition: .3s ease;
}

.mad-btn-primary {
    color: #fff;
    background: var(--ek-gradient);
}

.mad-btn-primary:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(100, 27, 91, .18);
}

.mad-btn-outline {
    color: var(--ek-purple);
    border: 1px solid var(--ek-border);
}

.mad-btn-outline:hover {
    color: var(--ek-purple);
    border-color: var(--ek-purple);
}


/* PHONE */

.mad-visual {
    position: relative;

    display: grid;
    place-items: center;

    min-height: 430px;
}

.mad-glow {
    position: absolute;

    width: 210px;
    height: 210px;

    border-radius: 50%;

    filter: blur(45px);

    opacity: .15;
}

.mad-glow-one {
    background: var(--ek-purple);

    top: 40px;
    right: 20px;
}

.mad-glow-two {
    background: var(--ek-orange);

    bottom: 30px;
    left: 30px;
}

.mad-phone {
    position: relative;
    z-index: 2;

    width: 245px;
    height: 455px;

    padding: 9px;

    background: var(--ek-dark);

    border: 4px solid #302c34;
    border-radius: 34px;

    box-shadow: 0 30px 60px rgba(23, 21, 28, .18);

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

.mad-phone-notch {
    position: absolute;
    z-index: 3;

    top: 12px;
    left: 50%;

    width: 80px;
    height: 20px;

    transform: translateX(-50%);

    border-radius: 20px;

    background: var(--ek-dark);
}

.mad-phone-screen {
    height: 100%;

    padding: 35px 16px 16px;

    overflow: hidden;

    border-radius: 25px;

    background: #fff;
}

.mad-app-top {
    display: flex;
    justify-content: space-between;

    color: var(--ek-purple);

    font-size: 10px;
    font-weight: 800;
}

.mad-app-title {
    margin: 35px 0 18px;
}

.mad-app-title small {
    display: block;

    margin-bottom: 6px;

    color: var(--ek-muted);

    font-size: 8px;
}

.mad-app-title strong {
    display: block;

    color: var(--ek-dark);

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

.mad-app-title span {
    color: var(--ek-magenta);
}

.mad-app-card {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 15px;

    border-radius: 13px;

    color: #fff;

    background: var(--ek-gradient);
}

.mad-app-card > i {
    font-size: 25px;
}

.mad-app-card small,
.mad-app-card strong {
    display: block;
}

.mad-app-card small {
    opacity: .8;
    font-size: 8px;
}

.mad-app-card strong {
    font-size: 17px;
}

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

    gap: 8px;

    margin-top: 14px;
}

.mad-app-grid div {
    padding: 13px 8px;

    text-align: center;

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

.mad-app-grid i {
    display: block;

    margin-bottom: 5px;

    color: var(--ek-purple);
}

.mad-app-grid span {
    color: var(--ek-muted);

    font-size: 8px;
}

.mad-app-line {
    width: 85%;
    height: 8px;

    margin-top: 20px;

    border-radius: 10px;

    background: var(--ek-light);
}

.mad-app-line.short {
    width: 55%;
    margin-top: 8px;
}

@keyframes madFloat {
    50% {
        transform: translateY(-10px) rotate(1deg);
    }
}


/* HEADINGS */

.mad-heading {
    max-width: 720px;

    margin: 0 auto 45px;

    text-align: center;
}

.mad-heading h2,
.mad-two-column h2 {
    margin: 0 0 15px;

    color: var(--ek-dark);

    font-size: clamp(31px, 4vw, 46px);
    line-height: 1.15;
}

.mad-heading p,
.mad-main-text {
    margin: 0;

    color: var(--ek-muted);

    line-height: 1.8;
}


/* SERVICES */

.mad-services-grid {
    display: grid;

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

    gap: 18px;
}

.mad-service {
    padding: 27px;

    background: #fff;

    border: 1px solid var(--ek-border);
    border-radius: 15px;

    transition: .3s ease;
}

.mad-service:hover {
    transform: translateY(-7px);

    border-color: rgba(100, 27, 91, .25);

    box-shadow: 0 15px 35px rgba(100, 27, 91, .08);
}

.mad-icon {
    display: grid;
    place-items: center;

    width: 50px;
    height: 50px;

    margin-bottom: 18px;

    color: var(--ek-purple);

    border-radius: 12px;

    background: rgba(100, 27, 91, .08);

    font-size: 23px;
}

.mad-service:nth-child(2) .mad-icon,
.mad-service:nth-child(5) .mad-icon {
    color: var(--ek-magenta);
    background: rgba(181, 45, 105, .08);
}

.mad-service:nth-child(3) .mad-icon,
.mad-service:nth-child(6) .mad-icon {
    color: var(--ek-orange);
    background: rgba(230, 106, 24, .08);
}

.mad-service small {
    color: var(--ek-muted);
    font-weight: 700;
}

.mad-service h3 {
    margin: 8px 0;

    color: var(--ek-dark);

    font-size: 19px;
}

.mad-service p {
    margin: 0;

    color: var(--ek-muted);

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


/* TECHNOLOGY */

.mad-tech-grid {
    display: grid;

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

    gap: 15px;
}

.mad-tech {
    padding: 24px 18px;

    text-align: center;

    background: #fff;

    border: 1px solid var(--ek-border);
    border-radius: 14px;

    transition: .3s ease;
}

.mad-tech:hover {
    transform: translateY(-5px);

    border-color: var(--ek-purple);

    box-shadow: 0 12px 28px rgba(100, 27, 91, .08);
}

.mad-tech i {
    display: block;

    margin-bottom: 12px;

    color: var(--ek-purple);

    font-size: 28px;
}

.mad-tech strong,
.mad-tech span {
    display: block;
}

.mad-tech strong {
    color: var(--ek-dark);
}

.mad-tech span {
    margin-top: 5px;

    color: var(--ek-muted);

    font-size: 12px;
}


/* FEATURES */

.mad-two-column {
    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 70px;

    align-items: start;
}

.mad-feature-list {
    display: grid;

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

    gap: 15px;
}

.mad-feature {
    display: flex;

    gap: 13px;

    padding: 18px;

    border: 1px solid var(--ek-border);
    border-radius: 13px;

    background: #fff;
}

.mad-feature > i {
    flex: 0 0 40px;

    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    color: var(--ek-purple);

    border-radius: 9px;

    background: rgba(100, 27, 91, .08);
}

.mad-feature h3 {
    margin: 0 0 5px;

    color: var(--ek-dark);

    font-size: 15px;
}

.mad-feature p {
    margin: 0;

    color: var(--ek-muted);

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


/* PROCESS */

.mad-process-grid {
    display: grid;

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

    gap: 14px;
}

.mad-process {
    padding: 23px 18px;

    background: #fff;

    border: 1px solid var(--ek-border);
    border-radius: 14px;
}

.mad-process strong {
    color: var(--ek-purple);
    font-size: 12px;
}

.mad-process i {
    display: block;

    margin: 20px 0 12px;

    color: var(--ek-magenta);

    font-size: 24px;
}

.mad-process h3 {
    margin: 0 0 8px;

    color: var(--ek-dark);

    font-size: 17px;
}

.mad-process p {
    margin: 0;

    color: var(--ek-muted);

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


/* CONTENT */

.mad-content {
    max-width: 900px;
    margin: auto;
}

.mad-content h2 {
    margin: 0 0 20px;

    color: var(--ek-dark);

    font-size: 36px;
}

.mad-content h3 {
    margin: 30px 0 10px;

    color: var(--ek-dark);

    font-size: 23px;
}

.mad-content p {
    margin: 0 0 15px;

    color: var(--ek-muted);

    line-height: 1.85;
}


/* CTA */

.mad-cta {
    padding: 80px 20px;

    color: #fff;

    text-align: center;

    background: var(--ek-gradient);
}

.mad-cta-kicker {
    display: block;

    margin-bottom: 12px;

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

.mad-cta h2 {
    margin: 0 0 13px;

    font-size: clamp(31px, 4vw, 46px);
}

.mad-cta p {
    max-width: 650px;

    margin: 0 auto 25px;

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

    line-height: 1.8;
}

.mad-cta-btn {
    color: var(--ek-purple);

    background: #fff;
}

.mad-cta-btn:hover {
    color: var(--ek-purple);
    transform: translateY(-3px);
}


/* SCROLL ANIMATION */

.mad-reveal {
    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.mad-reveal.show {
    opacity: 1;
    transform: translateY(0);
}


/* RESPONSIVE */

@media (max-width: 1000px) {

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

    .mad-visual {
        min-height: 400px;
    }

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

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

    .mad-process-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .mad-two-column {
        grid-template-columns: 1fr;
        gap: 40px;
    }

}


@media (max-width: 650px) {

    .mad-section {
        padding: 60px 0;
    }

    .mad-hero {
        padding: 70px 0 60px;
    }

    .mad-hero h1 {
        letter-spacing: -1px;
    }

    .mad-services-grid,
    .mad-tech-grid,
    .mad-feature-list,
    .mad-process-grid {
        grid-template-columns: 1fr;
    }

    .mad-actions {
        flex-direction: column;
    }

    .mad-btn {
        width: 100%;
    }

    .mad-phone {
        width: 220px;
        height: 420px;
    }

    .mad-visual {
        min-height: 430px;
    }

}



/* =========================================
   ERP SOLUTIONS
   Existing Eklavyah root variables used
   ========================================= */

.erp-page {
    color: var(--ek-text);
    background: #fff;
    overflow: hidden;
}

.erp-page .container {
    width: min(1180px, 92%);
    margin: auto;
}

.erp-section {
    padding: 82px 0;
}

.erp-light {
    background: var(--ek-light);
}


/* KICKER */

.erp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 14px;

    color: var(--ek-purple);

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

.erp-kicker::before {
    content: "";

    width: 28px;
    height: 2px;

    background: var(--ek-gradient);
    border-radius: 10px;
}


/* HERO */

.erp-hero {
    padding: 100px 0 85px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(100,27,91,.08),
            transparent 30%
        ),
        #fff;
}

.erp-hero-grid {
    display: grid;
    grid-template-columns: 1fr .9fr;

    gap: 65px;
    align-items: center;
}

.erp-hero h1 {
    margin: 0 0 22px;

    color: var(--ek-dark);

    font-size: clamp(40px,5vw,62px);
    line-height: 1.06;
    letter-spacing: -2px;
}

.erp-hero h1 span,
.erp-heading h2 span,
.erp-two-column h2 span,
.erp-custom-content h2 span {
    background: var(--ek-gradient);

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

.erp-hero p {
    max-width: 680px;

    margin: 0 0 14px;

    color: var(--ek-muted);

    line-height: 1.8;
}


/* BUTTONS */

.erp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 28px;
}

.erp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 13px 21px;

    border-radius: 9px;

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

    text-decoration: none;

    transition: .3s ease;
}

.erp-btn-primary {
    color: #fff;
    background: var(--ek-gradient);
}

.erp-btn-primary:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(100,27,91,.18);
}

.erp-btn-outline {
    color: var(--ek-purple);
    border: 1px solid var(--ek-border);
}

.erp-btn-outline:hover {
    color: var(--ek-purple);
    border-color: var(--ek-purple);
}


/* DASHBOARD */

.erp-visual {
    position: relative;

    display: grid;
    place-items: center;

    min-height: 400px;
}

.erp-orb {
    position: absolute;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    filter: blur(50px);
    opacity: .15;
}

.erp-orb-one {
    top: 20px;
    right: 10px;
    background: var(--ek-purple);
}

.erp-orb-two {
    bottom: 10px;
    left: 10px;
    background: var(--ek-orange);
}

.erp-dashboard {
    position: relative;
    z-index: 2;

    width: min(470px,100%);

    padding: 24px;

    background: #fff;

    border: 1px solid var(--ek-border);
    border-radius: 18px;

    box-shadow: 0 25px 55px rgba(100,27,91,.12);

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

.erp-dashboard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 22px;
}

.erp-dashboard-top small,
.erp-dashboard-top strong {
    display: block;
}

.erp-dashboard-top small {
    color: var(--ek-muted);

    font-size: 9px;
    letter-spacing: 1.5px;
}

.erp-dashboard-top strong {
    margin-top: 5px;

    color: var(--ek-dark);

    font-size: 18px;
}

.erp-status {
    color: var(--ek-green);

    font-size: 9px;
    font-weight: 800;
}

.erp-status i {
    margin-right: 4px;
    font-size: 6px;
}

.erp-stats {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
}

.erp-stats > div {
    padding: 16px;

    border: 1px solid var(--ek-border);
    border-radius: 12px;
}

.erp-stats small,
.erp-stats strong,
.erp-stats span {
    display: block;
}

.erp-stats small {
    color: var(--ek-muted);
    font-size: 10px;
}

.erp-stats strong {
    margin: 5px 0;

    color: var(--ek-dark);
    font-size: 21px;
}

.erp-stats span {
    color: var(--ek-green);
    font-size: 10px;
}

.erp-chart {
    position: relative;

    height: 125px;

    margin-top: 15px;

    overflow: hidden;

    border: 1px solid var(--ek-border);
    border-radius: 12px;

    background: var(--ek-light);
}

.erp-chart-line {
    position: absolute;

    width: 75%;
    height: 70px;

    left: 12%;
    top: 28px;

    border-top: 3px solid var(--ek-magenta);

    transform: skewY(-12deg);
}

.erp-chart-bars {
    position: absolute;
    bottom: 12px;
    left: 15px;
    right: 15px;

    display: flex;
    align-items: end;
    justify-content: space-around;

    height: 80px;
}

.erp-chart-bars i {
    width: 10px;

    border-radius: 4px 4px 0 0;

    background: var(--ek-purple);

    opacity: .7;
}

.erp-chart-bars i:nth-child(1) { height: 30%; }
.erp-chart-bars i:nth-child(2) { height: 45%; }
.erp-chart-bars i:nth-child(3) { height: 35%; }
.erp-chart-bars i:nth-child(4) { height: 65%; }
.erp-chart-bars i:nth-child(5) { height: 50%; }
.erp-chart-bars i:nth-child(6) { height: 78%; }
.erp-chart-bars i:nth-child(7) { height: 92%; }

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

    gap: 8px;

    margin-top: 15px;
}

.erp-dashboard-menu div {
    padding: 12px 5px;

    text-align: center;

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

.erp-dashboard-menu i,
.erp-dashboard-menu span {
    display: block;
}

.erp-dashboard-menu i {
    color: var(--ek-purple);
    margin-bottom: 5px;
}

.erp-dashboard-menu span {
    color: var(--ek-muted);
    font-size: 9px;
}

@keyframes erpFloat {
    50% {
        transform: translateY(-8px);
    }
}


/* HEADINGS */

.erp-heading {
    max-width: 720px;

    margin: 0 auto 42px;

    text-align: center;
}

.erp-heading h2,
.erp-two-column h2,
.erp-custom-content h2 {
    margin: 0 0 15px;

    color: var(--ek-dark);

    font-size: clamp(31px,4vw,45px);
    line-height: 1.15;
}

.erp-heading p {
    margin: 0;

    color: var(--ek-muted);

    line-height: 1.8;
}


/* MODULES */

.erp-modules-grid {
    display: grid;

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

    gap: 16px;
}

.erp-module {
    padding: 24px;

    background: #fff;

    border: 1px solid var(--ek-border);
    border-radius: 14px;

    transition: .3s ease;
}

.erp-module:hover {
    transform: translateY(-6px);

    border-color: rgba(100,27,91,.25);

    box-shadow: 0 14px 32px rgba(100,27,91,.08);
}

.erp-module-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: 15px;

    color: var(--ek-purple);

    border-radius: 11px;

    background: rgba(100,27,91,.08);

    font-size: 22px;
}

.erp-module:nth-child(2n) .erp-module-icon {
    color: var(--ek-magenta);
    background: rgba(181,45,105,.08);
}

.erp-module:nth-child(3n) .erp-module-icon {
    color: var(--ek-orange);
    background: rgba(230,106,24,.08);
}

.erp-module small {
    color: var(--ek-muted);
    font-weight: 700;
}

.erp-module h3 {
    margin: 7px 0;

    color: var(--ek-dark);

    font-size: 17px;
}

.erp-module p {
    margin: 0;

    color: var(--ek-muted);

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


/* TWO COLUMN */

.erp-two-column {
    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 65px;
}

.erp-large-text {
    color: var(--ek-muted);

    line-height: 1.8;
}

.erp-benefits {
    display: grid;

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

    gap: 15px;
}

.erp-benefit {
    display: flex;
    gap: 13px;

    padding: 19px;

    border: 1px solid var(--ek-border);
    border-radius: 13px;

    background: #fff;
}

.erp-benefit > i {
    flex: 0 0 40px;

    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    color: var(--ek-purple);

    border-radius: 9px;

    background: rgba(100,27,91,.08);
}

.erp-benefit h3 {
    margin: 0 0 5px;

    color: var(--ek-dark);

    font-size: 15px;
}

.erp-benefit p {
    margin: 0;

    color: var(--ek-muted);

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


/* CUSTOM ERP */

.erp-custom-grid {
    display: grid;

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

    gap: 65px;

    align-items: center;
}

.erp-custom-card {
    padding: 28px;

    background: #fff;

    border: 1px solid var(--ek-border);
    border-radius: 17px;

    box-shadow: 0 18px 40px rgba(100,27,91,.07);
}

.erp-custom-top {
    display: flex;
    justify-content: space-between;

    color: var(--ek-purple);

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

.erp-custom-top i {
    font-size: 20px;
}

.erp-custom-flow {
    display: flex;

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

    gap: 10px;

    margin-top: 45px;
}

.erp-custom-flow > div {
    text-align: center;
}

.erp-custom-flow i {
    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    margin: auto;

    color: var(--ek-purple);

    border-radius: 50%;

    background: rgba(100,27,91,.08);
}

.erp-custom-flow span {
    display: block;

    margin-top: 7px;

    color: var(--ek-muted);

    font-size: 10px;
}

.erp-custom-flow .erp-flow-main i {
    color: #fff;

    background: var(--ek-gradient);
}

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

    gap: 10px;

    margin-top: 25px;
}

.erp-checks span {
    color: var(--ek-muted);
    font-size: 13px;
}

.erp-checks i {
    margin-right: 5px;
    color: var(--ek-green);
}


/* TECHNOLOGY */

.erp-tech-grid {
    display: grid;

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

    gap: 14px;
}

.erp-tech {
    padding: 23px 15px;

    text-align: center;

    border: 1px solid var(--ek-border);
    border-radius: 13px;

    transition: .3s ease;
}

.erp-tech:hover {
    transform: translateY(-5px);

    border-color: var(--ek-purple);

    box-shadow: 0 12px 28px rgba(100,27,91,.07);
}

.erp-tech i,
.erp-tech strong,
.erp-tech span {
    display: block;
}

.erp-tech i {
    margin-bottom: 10px;

    color: var(--ek-purple);

    font-size: 27px;
}

.erp-tech strong {
    color: var(--ek-dark);
}

.erp-tech span {
    margin-top: 5px;

    color: var(--ek-muted);

    font-size: 11px;
}


/* PROCESS */

.erp-process-grid {
    display: grid;

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

    gap: 13px;
}

.erp-process {
    padding: 23px 17px;

    background: #fff;

    border: 1px solid var(--ek-border);
    border-radius: 14px;
}

.erp-process strong {
    color: var(--ek-purple);
    font-size: 12px;
}

.erp-process i {
    display: block;

    margin: 20px 0 12px;

    color: var(--ek-magenta);

    font-size: 24px;
}

.erp-process h3 {
    margin: 0 0 8px;

    color: var(--ek-dark);

    font-size: 16px;
}

.erp-process p {
    margin: 0;

    color: var(--ek-muted);

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


/* CONTENT */

.erp-content {
    max-width: 900px;
    margin: auto;
}

.erp-content h2 {
    margin: 0 0 20px;

    color: var(--ek-dark);

    font-size: 36px;
}

.erp-content h3 {
    margin: 30px 0 10px;

    color: var(--ek-dark);

    font-size: 22px;
}

.erp-content p {
    margin: 0 0 15px;

    color: var(--ek-muted);

    line-height: 1.85;
}


/* CTA */

.erp-cta {
    padding: 80px 20px;

    text-align: center;

    color: #fff;

    background: var(--ek-gradient);
}

.erp-cta > .container > span {
    display: block;

    margin-bottom: 12px;

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

.erp-cta h2 {
    margin: 0 0 14px;

    font-size: clamp(31px,4vw,45px);
}

.erp-cta p {
    max-width: 650px;

    margin: 0 auto 25px;

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

    line-height: 1.8;
}

.erp-cta-btn {
    color: var(--ek-purple);

    background: #fff;
}

.erp-cta-btn:hover {
    color: var(--ek-purple);

    transform: translateY(-3px);
}


/* ANIMATION */

.erp-reveal {
    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.erp-reveal.show {
    opacity: 1;

    transform: translateY(0);
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .erp-hero-grid,
    .erp-two-column,
    .erp-custom-grid {
        grid-template-columns: 1fr;
    }

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

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

    .erp-process-grid {
        grid-template-columns: repeat(3,1fr);
    }

}


@media (max-width: 650px) {

    .erp-section {
        padding: 60px 0;
    }

    .erp-hero {
        padding: 70px 0 60px;
    }

    .erp-hero h1 {
        letter-spacing: -1px;
    }

    .erp-actions {
        flex-direction: column;
    }

    .erp-btn {
        width: 100%;
    }

    .erp-modules-grid,
    .erp-tech-grid,
    .erp-benefits,
    .erp-checks,
    .erp-process-grid {
        grid-template-columns: 1fr;
    }

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

    .erp-custom-flow {
        gap: 4px;
    }

    .erp-custom-flow i {
        width: 42px;
        height: 42px;
    }

}


/* =========================================
   SHOPIFY PAGE
   Uses existing Eklavyah root variables
========================================= */

.shopify-page {
    color: var(--ek-text);
    background: #fff;
    overflow: hidden;
}

.shopify-page .container {
    width: min(1180px, 92%);
    margin: auto;
}

.shopify-section {
    padding: 82px 0;
}

.shopify-light {
    background: var(--ek-light);
}


/* KICKER */

.shopify-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 14px;

    color: var(--ek-purple);

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

.shopify-kicker::before {
    content: "";

    width: 28px;
    height: 2px;

    border-radius: 10px;
    background: var(--ek-gradient);
}


/* HERO */

.shopify-hero {
    padding: 100px 0 85px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(100,27,91,.08),
            transparent 30%
        ),
        #fff;
}

.shopify-hero-grid {
    display: grid;

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

    gap: 65px;

    align-items: center;
}

.shopify-hero h1 {
    margin: 0 0 22px;

    color: var(--ek-dark);

    font-size: clamp(40px,5vw,62px);
    line-height: 1.06;
    letter-spacing: -2px;
}

.shopify-hero h1 span,
.shopify-heading h2 span,
.shopify-two-column h2 span,
.shopify-custom-content h2 span {
    background: var(--ek-gradient);

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

.shopify-hero p {
    max-width: 680px;

    margin: 0 0 14px;

    color: var(--ek-muted);

    line-height: 1.8;
}


/* BUTTONS */

.shopify-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}

.shopify-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 13px 21px;

    border-radius: 9px;

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

    text-decoration: none;

    transition: .3s ease;
}

.shopify-btn-primary {
    color: #fff;
    background: var(--ek-gradient);
}

.shopify-btn-primary:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 12px 28px rgba(100,27,91,.18);
}

.shopify-btn-outline {
    color: var(--ek-purple);

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

.shopify-btn-outline:hover {
    color: var(--ek-purple);

    border-color: var(--ek-purple);
}


/* HERO VISUAL */

.shopify-visual {
    position: relative;

    display: grid;
    place-items: center;

    min-height: 400px;
}

.shopify-orb {
    position: absolute;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    filter: blur(50px);

    opacity: .14;
}

.shopify-orb-one {
    top: 15px;
    right: 10px;

    background: var(--ek-purple);
}

.shopify-orb-two {
    bottom: 10px;
    left: 10px;

    background: var(--ek-orange);
}

.shopify-store-card {
    position: relative;
    z-index: 2;

    width: min(470px,100%);

    padding: 24px;

    background: #fff;

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

    border-radius: 18px;

    box-shadow: 0 25px 55px rgba(100,27,91,.12);

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

.shopify-store-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 22px;
}

.shopify-store-top small,
.shopify-store-top strong {
    display: block;
}

.shopify-store-top small {
    color: var(--ek-muted);

    font-size: 9px;
    letter-spacing: 1.5px;
}

.shopify-store-top strong {
    margin-top: 5px;

    color: var(--ek-dark);

    font-size: 18px;
}

.shopify-live {
    color: var(--ek-green);

    font-size: 9px;
    font-weight: 800;
}

.shopify-live i {
    margin-right: 4px;

    font-size: 6px;
}


/* PRODUCT */

.shopify-product {
    display: grid;

    grid-template-columns: .8fr 1fr;

    gap: 17px;

    padding: 15px;

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

    border-radius: 13px;
}

.shopify-product-image {
    display: grid;
    place-items: center;

    min-height: 170px;

    color: var(--ek-purple);

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(100,27,91,.09),
            rgba(230,106,24,.09)
        );

    font-size: 50px;
}

.shopify-product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.shopify-product-info span {
    color: var(--ek-muted);

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

.shopify-product-info h3 {
    margin: 8px 0;

    color: var(--ek-dark);

    font-size: 18px;
}

.shopify-product-info strong {
    margin-bottom: 14px;

    color: var(--ek-purple);

    font-size: 21px;
}

.shopify-product-info button {
    width: 100%;

    padding: 10px;

    color: #fff;

    border: 0;
    border-radius: 7px;

    background: var(--ek-gradient);

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

.shopify-product-info button i {
    margin-left: 5px;
}

.shopify-store-stats {
    display: grid;

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

    gap: 9px;

    margin-top: 15px;
}

.shopify-store-stats div {
    padding: 13px;

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

    border-radius: 9px;
}

.shopify-store-stats small,
.shopify-store-stats strong {
    display: block;
}

.shopify-store-stats small {
    color: var(--ek-muted);

    font-size: 9px;
}

.shopify-store-stats strong {
    margin-top: 5px;

    color: var(--ek-dark);

    font-size: 15px;
}

.shopify-store-stats strong i {
    color: var(--ek-green);
}

@keyframes shopifyFloat {

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

}


/* HEADINGS */

.shopify-heading {
    max-width: 720px;

    margin: 0 auto 42px;

    text-align: center;
}

.shopify-heading h2,
.shopify-two-column h2,
.shopify-custom-content h2 {
    margin: 0 0 15px;

    color: var(--ek-dark);

    font-size: clamp(31px,4vw,45px);

    line-height: 1.15;
}

.shopify-heading p {
    margin: 0;

    color: var(--ek-muted);

    line-height: 1.8;
}


/* SERVICES */

.shopify-services-grid {
    display: grid;

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

    gap: 16px;
}

.shopify-service {
    padding: 24px;

    background: #fff;

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

    border-radius: 14px;

    transition: .3s ease;
}

.shopify-service:hover {
    transform: translateY(-6px);

    border-color: rgba(100,27,91,.25);

    box-shadow: 0 14px 32px rgba(100,27,91,.08);
}

.shopify-service-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: 15px;

    color: var(--ek-purple);

    border-radius: 11px;

    background: rgba(100,27,91,.08);

    font-size: 22px;
}

.shopify-service:nth-child(2n) .shopify-service-icon {
    color: var(--ek-magenta);

    background: rgba(181,45,105,.08);
}

.shopify-service:nth-child(3n) .shopify-service-icon {
    color: var(--ek-orange);

    background: rgba(230,106,24,.08);
}

.shopify-service small {
    color: var(--ek-muted);

    font-weight: 700;
}

.shopify-service h3 {
    margin: 7px 0;

    color: var(--ek-dark);

    font-size: 17px;
}

.shopify-service p {
    margin: 0;

    color: var(--ek-muted);

    font-size: 13px;

    line-height: 1.7;
}


/* FEATURES */

.shopify-two-column {
    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 65px;
}

.shopify-large-text {
    color: var(--ek-muted);

    line-height: 1.8;
}

.shopify-features {
    display: grid;

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

    gap: 15px;
}

.shopify-feature {
    display: flex;

    gap: 13px;

    padding: 19px;

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

    border-radius: 13px;

    background: #fff;
}

.shopify-feature > i {
    flex: 0 0 40px;

    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    color: var(--ek-purple);

    border-radius: 9px;

    background: rgba(100,27,91,.08);
}

.shopify-feature h3 {
    margin: 0 0 5px;

    color: var(--ek-dark);

    font-size: 15px;
}

.shopify-feature p {
    margin: 0;

    color: var(--ek-muted);

    font-size: 12px;

    line-height: 1.6;
}


/* CUSTOM */

.shopify-custom-grid {
    display: grid;

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

    gap: 65px;

    align-items: center;
}

.shopify-custom-card {
    padding: 28px;

    background: #fff;

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

    border-radius: 17px;

    box-shadow: 0 18px 40px rgba(100,27,91,.07);
}

.shopify-custom-top {
    display: flex;

    justify-content: space-between;

    color: var(--ek-purple);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.shopify-custom-top i {
    font-size: 20px;
}

.shopify-code-window {
    margin-top: 30px;

    overflow: hidden;

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

    border-radius: 11px;

    background: #17151C;
}

.shopify-code-top {
    display: flex;

    align-items: center;

    gap: 6px;

    padding: 10px 13px;

    border-bottom: 1px solid rgba(255,255,255,.08);
}

.shopify-code-top i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--ek-magenta);
}

.shopify-code-top i:nth-child(2) {
    background: var(--ek-orange);
}

.shopify-code-top i:nth-child(3) {
    background: var(--ek-green);
}

.shopify-code-top span {
    margin-left: 8px;

    color: #aaa;

    font-size: 9px;
}

.shopify-code-lines {
    padding: 20px;

    font-family: monospace;

    font-size: 11px;

    line-height: 2;

    color: #ddd;
}

.shopify-code-lines span {
    display: block;
}

.shopify-checks {
    display: grid;

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

    gap: 10px;

    margin-top: 25px;
}

.shopify-checks span {
    color: var(--ek-muted);

    font-size: 13px;
}

.shopify-checks i {
    margin-right: 5px;

    color: var(--ek-green);
}


/* TECHNOLOGY */

.shopify-tech-grid {
    display: grid;

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

    gap: 14px;
}

.shopify-tech {
    padding: 23px 15px;

    text-align: center;

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

    border-radius: 13px;

    transition: .3s ease;
}

.shopify-tech:hover {
    transform: translateY(-5px);

    border-color: var(--ek-purple);

    box-shadow: 0 12px 28px rgba(100,27,91,.07);
}

.shopify-tech i,
.shopify-tech strong,
.shopify-tech span {
    display: block;
}

.shopify-tech i {
    margin-bottom: 10px;

    color: var(--ek-purple);

    font-size: 27px;
}

.shopify-tech strong {
    color: var(--ek-dark);
}

.shopify-tech span {
    margin-top: 5px;

    color: var(--ek-muted);

    font-size: 11px;
}


/* PROCESS */

.shopify-process-grid {
    display: grid;

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

    gap: 13px;
}

.shopify-process {
    padding: 23px 17px;

    background: #fff;

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

    border-radius: 14px;
}

.shopify-process strong {
    color: var(--ek-purple);

    font-size: 12px;
}

.shopify-process i {
    display: block;

    margin: 20px 0 12px;

    color: var(--ek-magenta);

    font-size: 24px;
}

.shopify-process h3 {
    margin: 0 0 8px;

    color: var(--ek-dark);

    font-size: 16px;
}

.shopify-process p {
    margin: 0;

    color: var(--ek-muted);

    font-size: 12px;

    line-height: 1.7;
}


/* CONTENT */

.shopify-content {
    max-width: 900px;

    margin: auto;
}

.shopify-content h2 {
    margin: 0 0 20px;

    color: var(--ek-dark);

    font-size: 36px;
}

.shopify-content h3 {
    margin: 30px 0 10px;

    color: var(--ek-dark);

    font-size: 22px;
}

.shopify-content p {
    margin: 0 0 15px;

    color: var(--ek-muted);

    line-height: 1.85;
}


/* CTA */

.shopify-cta {
    padding: 80px 20px;

    text-align: center;

    color: #fff;

    background: var(--ek-gradient);
}

.shopify-cta > .container > span {
    display: block;

    margin-bottom: 12px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;
}

.shopify-cta h2 {
    margin: 0 0 14px;

    font-size: clamp(31px,4vw,45px);
}

.shopify-cta p {
    max-width: 650px;

    margin: 0 auto 25px;

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

    line-height: 1.8;
}

.shopify-cta-btn {
    color: var(--ek-purple);

    background: #fff;
}

.shopify-cta-btn:hover {
    color: var(--ek-purple);

    transform: translateY(-3px);
}


/* REVEAL */

.shopify-reveal {
    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.shopify-reveal.show {
    opacity: 1;

    transform: translateY(0);
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .shopify-hero-grid,
    .shopify-two-column,
    .shopify-custom-grid {
        grid-template-columns: 1fr;
    }

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

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

    .shopify-process-grid {
        grid-template-columns: repeat(3,1fr);
    }

}


@media (max-width: 650px) {

    .shopify-section {
        padding: 60px 0;
    }

    .shopify-hero {
        padding: 70px 0 60px;
    }

    .shopify-hero h1 {
        letter-spacing: -1px;
    }

    .shopify-actions {
        flex-direction: column;
    }

    .shopify-btn {
        width: 100%;
    }

    .shopify-services-grid,
    .shopify-tech-grid,
    .shopify-features,
    .shopify-checks,
    .shopify-process-grid {
        grid-template-columns: 1fr;
    }

    .shopify-product {
        grid-template-columns: 1fr;
    }

    .shopify-product-image {
        min-height: 140px;
    }

}


/* =========================================
   SEO PAGE
   Existing Eklavyah Root Variables
========================================= */

.seo-page {
    background: #fff;
    color: var(--ek-text);
    overflow: hidden;
}

.seo-page .container {
    width: min(1180px, 92%);
    margin: auto;
}

.seo-section {
    padding: 82px 0;
}

.seo-light {
    background: var(--ek-light);
}


/* KICKER */

.seo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 14px;

    color: var(--ek-purple);

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

.seo-kicker::before {
    content: "";

    width: 28px;
    height: 2px;

    border-radius: 5px;

    background: var(--ek-gradient);
}


/* HERO */

.seo-hero {
    padding: 100px 0 85px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(100,27,91,.08),
            transparent 30%
        ),
        #fff;
}

.seo-hero-grid {
    display: grid;

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

    gap: 65px;

    align-items: center;
}

.seo-hero h1 {
    margin: 0 0 22px;

    color: var(--ek-dark);

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

    line-height: 1.06;

    letter-spacing: -2px;
}

.seo-hero h1 span,
.seo-heading h2 span,
.seo-two-column h2 span,
.seo-audit-grid h2 span,
.seo-local-content h2 span {
    background: var(--ek-gradient);

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

.seo-hero p {
    max-width: 680px;

    margin: 0 0 14px;

    color: var(--ek-muted);

    line-height: 1.8;
}


/* BUTTONS */

.seo-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}

.seo-btn {
    display: inline-flex;

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

    gap: 8px;

    padding: 13px 21px;

    border-radius: 9px;

    text-decoration: none;

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

    transition: .3s ease;
}

.seo-btn-primary {
    color: #fff;

    background: var(--ek-gradient);
}

.seo-btn-primary:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 12px 28px rgba(100,27,91,.18);
}

.seo-btn-outline {
    color: var(--ek-purple);

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

.seo-btn-outline:hover {
    color: var(--ek-purple);

    border-color: var(--ek-purple);
}


/* SEO VISUAL */

.seo-visual {
    position: relative;

    display: grid;
    place-items: center;

    min-height: 390px;
}

.seo-orb {
    position: absolute;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    filter: blur(55px);

    opacity: .13;
}

.seo-orb-one {
    top: 10px;
    right: 5px;

    background: var(--ek-purple);
}

.seo-orb-two {
    bottom: 5px;
    left: 0;

    background: var(--ek-orange);
}

.seo-dashboard {
    position: relative;
    z-index: 2;

    width: min(470px,100%);

    padding: 24px;

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

    border-radius: 18px;

    background: #fff;

    box-shadow: 0 25px 55px rgba(100,27,91,.12);

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

@keyframes seoFloat {

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

}

.seo-dashboard-top {
    display: flex;

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

.seo-dashboard-top small,
.seo-dashboard-top strong {
    display: block;
}

.seo-dashboard-top small {
    color: var(--ek-muted);

    font-size: 9px;

    letter-spacing: 1.5px;
}

.seo-dashboard-top strong {
    margin-top: 5px;

    color: var(--ek-dark);

    font-size: 18px;
}

.seo-dashboard-top > span {
    color: var(--ek-green);

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


/* CHART */

.seo-chart {
    position: relative;

    height: 170px;

    margin: 25px 0;

    overflow: hidden;

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

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 40px,
            rgba(234,231,235,.7) 41px
        );
}

.seo-chart-line {
    position: absolute;

    left: 2%;
    right: 2%;
    bottom: 20px;

    height: 100%;

    background: var(--ek-gradient);

    clip-path: polygon(
        0 80%,
        18% 68%,
        35% 72%,
        52% 45%,
        68% 55%,
        82% 25%,
        100% 5%,
        100% 8%,
        82% 30%,
        68% 60%,
        52% 50%,
        35% 78%,
        18% 73%,
        0 85%
    );

    opacity: .85;
}

.seo-chart-dot {
    position: absolute;

    width: 8px;
    height: 8px;

    border: 2px solid #fff;

    border-radius: 50%;

    background: var(--ek-magenta);

    box-shadow: 0 0 0 3px rgba(181,45,105,.12);
}

.dot-one {
    left: 18%;
    top: 62%;
}

.dot-two {
    left: 35%;
    top: 67%;
}

.dot-three {
    left: 52%;
    top: 40%;
}

.dot-four {
    left: 68%;
    top: 50%;
}

.dot-five {
    right: 2%;
    top: 3%;
}


/* METRICS */

.seo-metrics {
    display: grid;

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

    gap: 10px;
}

.seo-metrics > div {
    padding: 13px;

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

    border-radius: 9px;
}

.seo-metrics small,
.seo-metrics strong,
.seo-metrics span {
    display: block;
}

.seo-metrics small {
    color: var(--ek-muted);

    font-size: 9px;
}

.seo-metrics strong {
    margin: 5px 0;

    color: var(--ek-dark);

    font-size: 17px;
}

.seo-metrics span {
    color: var(--ek-green);

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


/* HEADINGS */

.seo-heading {
    max-width: 720px;

    margin: 0 auto 42px;

    text-align: center;
}

.seo-heading h2,
.seo-two-column h2,
.seo-audit-grid h2,
.seo-local-content h2 {
    margin: 0 0 15px;

    color: var(--ek-dark);

    font-size: clamp(31px,4vw,45px);

    line-height: 1.15;
}

.seo-heading p {
    margin: 0;

    color: var(--ek-muted);

    line-height: 1.8;
}


/* SERVICES */

.seo-services-grid {
    display: grid;

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

    gap: 16px;
}

.seo-service {
    padding: 24px;

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

    border-radius: 14px;

    background: #fff;

    transition: .3s ease;
}

.seo-service:hover {
    transform: translateY(-6px);

    border-color: rgba(100,27,91,.25);

    box-shadow: 0 14px 32px rgba(100,27,91,.08);
}

.seo-service-icon {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: 15px;

    color: var(--ek-purple);

    border-radius: 11px;

    background: rgba(100,27,91,.08);

    font-size: 21px;
}

.seo-service:nth-child(2n) .seo-service-icon {
    color: var(--ek-magenta);

    background: rgba(181,45,105,.08);
}

.seo-service:nth-child(3n) .seo-service-icon {
    color: var(--ek-orange);

    background: rgba(230,106,24,.08);
}

.seo-service small {
    color: var(--ek-muted);

    font-weight: 700;
}

.seo-service h3 {
    margin: 7px 0;

    color: var(--ek-dark);

    font-size: 17px;
}

.seo-service p {
    margin: 0;

    color: var(--ek-muted);

    font-size: 13px;

    line-height: 1.7;
}


/* BENEFITS */

.seo-two-column {
    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 65px;
}

.seo-two-column > div > p {
    color: var(--ek-muted);

    line-height: 1.8;
}

.seo-benefits {
    display: grid;

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

    gap: 15px;
}

.seo-benefit {
    display: flex;

    gap: 13px;

    padding: 19px;

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

    border-radius: 13px;

    background: #fff;
}

.seo-benefit > i {
    flex: 0 0 40px;

    display: grid;

    place-items: center;

    width: 40px;
    height: 40px;

    color: var(--ek-purple);

    border-radius: 9px;

    background: rgba(100,27,91,.08);
}

.seo-benefit h3 {
    margin: 0 0 5px;

    color: var(--ek-dark);

    font-size: 15px;
}

.seo-benefit p {
    margin: 0;

    color: var(--ek-muted);

    font-size: 12px;

    line-height: 1.6;
}


/* AUDIT */

.seo-audit-grid {
    display: grid;

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

    gap: 65px;

    align-items: center;
}

.seo-audit-card {
    padding: 27px;

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

    border-radius: 17px;

    background: #fff;

    box-shadow: 0 18px 40px rgba(100,27,91,.07);
}

.seo-audit-top {
    display: flex;

    justify-content: space-between;

    margin-bottom: 25px;

    color: var(--ek-purple);

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

    letter-spacing: 1.5px;
}

.seo-audit-top i {
    font-size: 21px;
}

.seo-audit-row {
    margin-bottom: 20px;
}

.seo-audit-row > span,
.seo-audit-row > strong {
    display: inline-block;

    margin-bottom: 7px;
}

.seo-audit-row > span {
    color: var(--ek-text);

    font-size: 12px;
}

.seo-audit-row > strong {
    float: right;

    color: var(--ek-purple);

    font-size: 12px;
}

.seo-audit-row > div {
    clear: both;

    height: 7px;

    overflow: hidden;

    border-radius: 10px;

    background: var(--ek-light);
}

.seo-audit-row > div span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--ek-gradient);
}

.seo-check-list {
    display: grid;

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

    gap: 10px;

    margin-top: 25px;
}

.seo-check-list span {
    color: var(--ek-muted);

    font-size: 13px;
}

.seo-check-list i {
    margin-right: 5px;

    color: var(--ek-green);
}


/* LOCAL SEO */

.seo-local-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 65px;

    align-items: center;
}

.seo-local-content p {
    color: var(--ek-muted);

    line-height: 1.8;
}

.seo-location-card {
    position: relative;

    min-height: 330px;

    overflow: hidden;

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

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(100,27,91,.04),
            rgba(230,106,24,.06)
        );
}

.seo-map-grid {
    display: grid;

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

    height: 100%;
}

.seo-map-grid span {
    min-height: 110px;

    border-right: 1px solid rgba(100,27,91,.08);

    border-bottom: 1px solid rgba(100,27,91,.08);
}

.seo-location-pin {
    position: absolute;

    top: 42%;
    left: 50%;

    display: grid;

    place-items: center;

    width: 60px;
    height: 60px;

    color: #fff;

    border-radius: 50% 50% 50% 0;

    background: var(--ek-gradient);

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

    box-shadow: 0 15px 30px rgba(100,27,91,.2);
}

.seo-location-pin i {
    transform: rotate(45deg);

    font-size: 25px;
}

.seo-location-info {
    position: absolute;

    left: 50%;
    bottom: 20px;

    padding: 12px 18px;

    text-align: center;

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

    border-radius: 9px;

    background: #fff;

    transform: translateX(-50%);
}

.seo-location-info strong,
.seo-location-info span {
    display: block;
}

.seo-location-info strong {
    color: var(--ek-dark);

    font-size: 13px;
}

.seo-location-info span {
    margin-top: 3px;

    color: var(--ek-muted);

    font-size: 10px;
}


/* PROCESS */

.seo-process-grid {
    display: grid;

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

    gap: 13px;
}

.seo-process {
    padding: 23px 17px;

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

    border-radius: 14px;

    background: #fff;
}

.seo-process strong {
    color: var(--ek-purple);

    font-size: 12px;
}

.seo-process i {
    display: block;

    margin: 20px 0 12px;

    color: var(--ek-magenta);

    font-size: 24px;
}

.seo-process h3 {
    margin: 0 0 8px;

    color: var(--ek-dark);

    font-size: 16px;
}

.seo-process p {
    margin: 0;

    color: var(--ek-muted);

    font-size: 12px;

    line-height: 1.7;
}


/* TOOLS */

.seo-tools-grid {
    display: grid;

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

    gap: 14px;
}

.seo-tool {
    padding: 23px 15px;

    text-align: center;

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

    border-radius: 13px;

    transition: .3s ease;
}

.seo-tool:hover {
    transform: translateY(-5px);

    border-color: var(--ek-purple);

    box-shadow: 0 12px 28px rgba(100,27,91,.07);
}

.seo-tool i,
.seo-tool strong,
.seo-tool span {
    display: block;
}

.seo-tool i {
    margin-bottom: 10px;

    color: var(--ek-purple);

    font-size: 27px;
}

.seo-tool strong {
    color: var(--ek-dark);
}

.seo-tool span {
    margin-top: 5px;

    color: var(--ek-muted);

    font-size: 11px;
}


/* CONTENT */

.seo-content {
    max-width: 900px;

    margin: auto;
}

.seo-content h2 {
    margin: 0 0 20px;

    color: var(--ek-dark);

    font-size: 36px;
}

.seo-content h3 {
    margin: 30px 0 10px;

    color: var(--ek-dark);

    font-size: 22px;
}

.seo-content p {
    margin: 0 0 15px;

    color: var(--ek-muted);

    line-height: 1.85;
}


/* CTA */

.seo-cta {
    padding: 80px 20px;

    text-align: center;

    color: #fff;

    background: var(--ek-gradient);
}

.seo-cta > .container > span {
    display: block;

    margin-bottom: 12px;

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

    letter-spacing: 2px;
}

.seo-cta h2 {
    margin: 0 0 14px;

    font-size: clamp(31px,4vw,45px);
}

.seo-cta p {
    max-width: 650px;

    margin: 0 auto 25px;

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

    line-height: 1.8;
}

.seo-cta-btn {
    color: var(--ek-purple);

    background: #fff;
}

.seo-cta-btn:hover {
    color: var(--ek-purple);

    transform: translateY(-3px);
}


/* ANIMATION */

.seo-reveal {
    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.seo-reveal.show {
    opacity: 1;

    transform: translateY(0);
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .seo-hero-grid,
    .seo-two-column,
    .seo-audit-grid,
    .seo-local-grid {
        grid-template-columns: 1fr;
    }

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

    .seo-process-grid {
        grid-template-columns: repeat(3,1fr);
    }

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

}


@media (max-width: 650px) {

    .seo-section {
        padding: 60px 0;
    }

    .seo-hero {
        padding: 70px 0 60px;
    }

    .seo-hero h1 {
        letter-spacing: -1px;
    }

    .seo-actions {
        flex-direction: column;
    }

    .seo-btn {
        width: 100%;
    }

    .seo-services-grid,
    .seo-benefits,
    .seo-check-list,
    .seo-process-grid,
    .seo-tools-grid {
        grid-template-columns: 1fr;
    }

    .seo-metrics {
        grid-template-columns: 1fr;
    }

}



/* =========================================================
   Eklavyah Ads Management
   Uses existing root colors only
   ========================================================= */

.ads-page{
    background:#fff;
    color:var(--ek-text);
    overflow:hidden;
}

.ads-page *,
.ads-page *::before,
.ads-page *::after{
    box-sizing:border-box;
}

.ads-container{
    width:min(1180px,92%);
    margin:auto;
}

.ads-section{
    padding:90px 0;
}

.ads-section.light{
    background:var(--ek-light);
}

.ads-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--ek-purple);
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    margin-bottom:14px;
}

.ads-kicker::before{
    content:"";
    width:28px;
    height:2px;
    background:var(--ek-orange);
}

.ads-heading{
    max-width:720px;
    margin-bottom:48px;
}

.ads-heading h2{
    margin:0 0 16px;
    font-size:clamp(32px,4vw,52px);
    line-height:1.08;
    color:var(--ek-dark);
}

.ads-heading h2 span,
.ads-hero h1 span{
    background:var(--ek-gradient);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.ads-heading p{
    color:var(--ek-muted);
    line-height:1.8;
    margin:0;
}

/* HERO */

.ads-hero{
    position:relative;
    padding:105px 0 90px;
    background:
        radial-gradient(circle at 88% 15%,rgba(181,45,105,.08),transparent 28%),
        radial-gradient(circle at 70% 80%,rgba(230,106,24,.07),transparent 30%),
        #fff;
}

.ads-hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
    align-items:center;
}

.ads-hero h1{
    max-width:760px;
    font-size:clamp(42px,5.5vw,72px);
    line-height:1.02;
    letter-spacing:-2px;
    color:var(--ek-dark);
    margin:0 0 24px;
}

.ads-hero-text{
    max-width:680px;
    color:var(--ek-muted);
    font-size:17px;
    line-height:1.8;
}

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

.ads-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:50px;
    padding:0 22px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
    transition:.3s ease;
}

.ads-btn-primary{
    color:#fff;
    background:var(--ek-gradient);
    box-shadow:0 12px 28px rgba(100,27,91,.16);
}

.ads-btn-primary:hover{
    color:#fff;
    transform:translateY(-3px);
}

.ads-btn-outline{
    color:var(--ek-purple);
    border:1px solid var(--ek-border);
    background:#fff;
}

.ads-btn-outline:hover{
    color:var(--ek-purple);
    border-color:var(--ek-purple);
    transform:translateY(-3px);
}

/* HERO DASHBOARD */

.ads-dashboard{
    position:relative;
    min-height:480px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ads-glow{
    position:absolute;
    width:270px;
    height:270px;
    border-radius:50%;
    background:var(--ek-gradient);
    opacity:.08;
    filter:blur(30px);
    animation:adsFloat 5s ease-in-out infinite;
}

.ads-dashboard-card{
    position:relative;
    width:min(470px,100%);
    padding:25px;
    background:rgba(255,255,255,.94);
    border:1px solid var(--ek-border);
    border-radius:22px;
    box-shadow:0 25px 70px rgba(41,38,45,.12);
    animation:adsFloat 5s ease-in-out infinite;
}

.ads-dashboard-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:20px;
    border-bottom:1px solid var(--ek-border);
}

.ads-dashboard-top strong{
    color:var(--ek-purple);
    font-size:13px;
    letter-spacing:1px;
}

.ads-live{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:11px;
    color:var(--ek-green);
    font-weight:800;
}

.ads-live i{
    font-size:8px;
}

.ads-chart{
    display:flex;
    align-items:end;
    gap:10px;
    height:180px;
    padding:25px 5px 10px;
}

.ads-bar{
    flex:1;
    min-width:10px;
    height:var(--h);
    border-radius:7px 7px 2px 2px;
    background:var(--ek-gradient);
    transform-origin:bottom;
    animation:adsBars 2s ease-in-out infinite alternate;
}

.ads-bar:nth-child(2n){
    animation-delay:.25s;
}

.ads-bar:nth-child(3n){
    animation-delay:.5s;
}

.ads-metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.ads-metric{
    padding:14px;
    border-radius:12px;
    background:var(--ek-light);
}

.ads-metric small{
    display:block;
    color:var(--ek-muted);
    font-size:11px;
    margin-bottom:5px;
}

.ads-metric strong{
    color:var(--ek-dark);
    font-size:20px;
}

/* PLATFORM */

.ads-platform-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.ads-platform{
    position:relative;
    min-height:150px;
    padding:24px;
    border:1px solid var(--ek-border);
    border-radius:16px;
    background:#fff;
    transition:.3s ease;
    overflow:hidden;
}

.ads-platform::after{
    content:"";
    position:absolute;
    width:80px;
    height:80px;
    right:-35px;
    bottom:-35px;
    border-radius:50%;
    background:var(--ek-magenta);
    opacity:.06;
}

.ads-platform:hover{
    transform:translateY(-7px);
    border-color:rgba(100,27,91,.3);
    box-shadow:0 18px 40px rgba(41,38,45,.08);
}

.ads-platform-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:var(--ek-purple);
    background:rgba(100,27,91,.08);
    font-size:22px;
    margin-bottom:17px;
}

.ads-platform:nth-child(3n) .ads-platform-icon{
    color:var(--ek-orange);
    background:rgba(230,106,24,.1);
}

.ads-platform:nth-child(4n) .ads-platform-icon{
    color:var(--ek-magenta);
    background:rgba(181,45,105,.1);
}

.ads-platform h3{
    margin:0 0 7px;
    font-size:17px;
    color:var(--ek-dark);
}

.ads-platform p{
    margin:0;
    color:var(--ek-muted);
    font-size:13px;
    line-height:1.6;
}

/* SERVICES */

.ads-services{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.ads-service{
    padding:28px;
    border:1px solid var(--ek-border);
    border-radius:18px;
    background:#fff;
    transition:.3s ease;
}

.ads-service:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 35px rgba(41,38,45,.08);
}

.ads-service-number{
    color:var(--ek-orange);
    font-size:12px;
    font-weight:800;
}

.ads-service i{
    display:block;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    margin:15px 0;
    border-radius:13px;
    color:var(--ek-purple);
    background:rgba(100,27,91,.08);
    font-size:21px;
}

.ads-service h3{
    margin:0 0 10px;
    color:var(--ek-dark);
    font-size:20px;
}

.ads-service p{
    margin:0;
    color:var(--ek-muted);
    line-height:1.7;
    font-size:14px;
}

/* INDUSTRIES */

.ads-industry-grid{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.ads-industry{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 17px;
    border:1px solid var(--ek-border);
    border-radius:50px;
    background:#fff;
    color:var(--ek-text);
    font-size:13px;
    font-weight:650;
    transition:.3s ease;
}

.ads-industry i{
    color:var(--ek-purple);
}

.ads-industry:hover{
    color:var(--ek-purple);
    border-color:var(--ek-purple);
    transform:translateY(-3px);
}

/* CHANNEL SECTIONS */

.ads-channel-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.ads-channel{
    padding:30px;
    border-radius:20px;
    border:1px solid var(--ek-border);
    background:#fff;
}

.ads-channel-head{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
}

.ads-channel-head i{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:#fff;
    background:var(--ek-gradient);
    font-size:22px;
}

.ads-channel h3{
    margin:0;
    color:var(--ek-dark);
}

.ads-channel ul{
    margin:0;
    padding:0;
    list-style:none;
}

.ads-channel li{
    display:flex;
    gap:10px;
    padding:10px 0;
    color:var(--ek-muted);
    font-size:14px;
    border-bottom:1px solid var(--ek-border);
}

.ads-channel li:last-child{
    border-bottom:0;
}

.ads-channel li i{
    color:var(--ek-green);
}

/* PROCESS */

.ads-process{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px;
}

.ads-step{
    position:relative;
    padding:24px 16px;
    border:1px solid var(--ek-border);
    background:#fff;
    border-radius:16px;
}

.ads-step strong{
    display:block;
    color:var(--ek-orange);
    font-size:12px;
    margin-bottom:20px;
}

.ads-step i{
    font-size:25px;
    color:var(--ek-purple);
}

.ads-step h3{
    font-size:16px;
    margin:14px 0 8px;
    color:var(--ek-dark);
}

.ads-step p{
    color:var(--ek-muted);
    font-size:12px;
    line-height:1.6;
    margin:0;
}

/* RESULTS */

.ads-results{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.ads-result{
    padding:28px;
    text-align:center;
    background:#fff;
    border:1px solid var(--ek-border);
    border-radius:17px;
}

.ads-result strong{
    display:block;
    font-size:34px;
    color:var(--ek-purple);
}

.ads-result span{
    color:var(--ek-muted);
    font-size:13px;
}

/* WHY */

.ads-why-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:70px;
    align-items:start;
}

.ads-points{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.ads-point{
    padding:22px;
    background:#fff;
    border:1px solid var(--ek-border);
    border-radius:16px;
}

.ads-point i{
    color:var(--ek-purple);
    font-size:22px;
}

.ads-point h3{
    color:var(--ek-dark);
    font-size:16px;
    margin:14px 0 7px;
}

.ads-point p{
    margin:0;
    color:var(--ek-muted);
    font-size:13px;
    line-height:1.6;
}

/* FAQ */

.ads-faq{
    max-width:850px;
    margin:auto;
}

.ads-faq-item{
    border-bottom:1px solid var(--ek-border);
}

.ads-faq-question{
    width:100%;
    padding:21px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border:0;
    background:none;
    color:var(--ek-dark);
    font:inherit;
    font-weight:700;
    text-align:left;
    cursor:pointer;
}

.ads-faq-question i{
    transition:.3s ease;
    color:var(--ek-purple);
}

.ads-faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}

.ads-faq-answer p{
    margin:0 0 20px;
    color:var(--ek-muted);
    line-height:1.75;
    font-size:14px;
}

.ads-faq-item.active .ads-faq-question i{
    transform:rotate(180deg);
}

/* CTA */

.ads-cta{
    padding:75px 30px;
    text-align:center;
    border-radius:28px;
    background:var(--ek-gradient);
    color:#fff;
    overflow:hidden;
    position:relative;
}

.ads-cta h2{
    position:relative;
    margin:0 0 13px;
    font-size:clamp(32px,4vw,50px);
}

.ads-cta p{
    position:relative;
    max-width:650px;
    margin:0 auto 25px;
    line-height:1.7;
    opacity:.9;
}

.ads-cta .ads-btn{
    position:relative;
    background:#fff;
    color:var(--ek-purple);
}

.ads-reveal{
    opacity:0;
    transform:translateY(25px);
    transition:opacity .7s ease,transform .7s ease;
}

.ads-reveal.show{
    opacity:1;
    transform:none;
}

@keyframes adsFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-12px)}
}

@keyframes adsBars{
    from{transform:scaleY(.88)}
    to{transform:scaleY(1)}
}

/* RESPONSIVE */

@media(max-width:1000px){

    .ads-hero-grid,
    .ads-why-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .ads-platform-grid{
        grid-template-columns:repeat(3,1fr);
    }

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

    .ads-channel-grid{
        grid-template-columns:1fr;
    }

    .ads-process{
        grid-template-columns:repeat(3,1fr);
    }

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

}

@media(max-width:700px){

    .ads-section{
        padding:65px 0;
    }

    .ads-hero{
        padding:70px 0 60px;
    }

    .ads-hero h1{
        letter-spacing:-1px;
    }

    .ads-platform-grid,
    .ads-services,
    .ads-points,
    .ads-process{
        grid-template-columns:1fr 1fr;
    }

    .ads-dashboard{
        min-height:auto;
    }

}

@media(max-width:520px){

    .ads-container{
        width:min(92%,100%);
    }

    .ads-actions{
        flex-direction:column;
    }

    .ads-btn{
        width:100%;
    }

    .ads-platform-grid,
    .ads-services,
    .ads-points,
    .ads-process,
    .ads-results{
        grid-template-columns:1fr;
    }

    .ads-dashboard-card{
        padding:18px;
    }

    .ads-metrics{
        grid-template-columns:1fr;
    }

    .ads-heading{
        margin-bottom:32px;
    }

    .ads-cta{
        padding:55px 20px;
        border-radius:20px;
    }

}



/* =========================================================
   SOCIAL MEDIA PAGE
   Uses existing Eklavyah root variables
========================================================= */

.social-page {
    overflow: hidden;
    background: #fff;
    color: var(--ek-text);
}

.social-page .container {
    width: min(1180px, 92%);
    margin: auto;
}

/* HERO */

.social-hero {
    padding: 90px 0 80px;
    background:
        radial-gradient(circle at 90% 15%, rgba(181,45,105,.08), transparent 28%),
        radial-gradient(circle at 10% 90%, rgba(230,106,24,.07), transparent 28%),
        #fff;
}

.social-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 60px;
    align-items: center;
}

.social-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ek-purple);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.8px;
    margin-bottom: 18px;
}

.social-kicker::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--ek-orange);
}

.social-hero h1,
.social-heading h2 {
    margin: 0;
    color: var(--ek-dark);
    line-height: 1.12;
    font-weight: 800;
}

.social-hero h1 {
    font-size: clamp(42px, 5vw, 68px);
    max-width: 720px;
}

.social-hero h1 span,
.social-heading h2 span {
    display: block;
    background: var(--ek-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.social-hero p {
    max-width: 680px;
    color: var(--ek-muted);
    font-size: 17px;
    line-height: 1.8;
    margin: 22px 0 0;
}

.social-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 30px;
}

/* HERO VISUAL */

.social-dashboard {
    position: relative;
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-ring {
    position: absolute;
    border: 1px solid rgba(100,27,91,.12);
    border-radius: 50%;
    animation: socialSpin 16s linear infinite;
}

.social-ring.one {
    width: 390px;
    height: 390px;
}

.social-ring.two {
    width: 300px;
    height: 300px;
    animation-direction: reverse;
    animation-duration: 11s;
}

.social-center {
    width: 220px;
    height: 220px;
    border-radius: 35px;
    background: #fff;
    border: 1px solid var(--ek-border);
    box-shadow: 0 25px 70px rgba(100,27,91,.14);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.social-center i {
    font-size: 52px;
    background: var(--ek-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.social-center strong {
    margin-top: 12px;
    font-size: 19px;
    color: var(--ek-dark);
}

.social-center small {
    color: var(--ek-muted);
    margin-top: 5px;
}

.social-float {
    position: absolute;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--ek-border);
    box-shadow: 0 15px 35px rgba(23,21,28,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    animation: socialFloat 3s ease-in-out infinite;
}

.social-float i {
    font-size: 24px;
    color: var(--ek-purple);
}

.social-float.f1 { top: 50px; left: 15%; }
.social-float.f2 { right: 10%; top: 115px; animation-delay: .5s; }
.social-float.f3 { bottom: 65px; left: 12%; animation-delay: 1s; }
.social-float.f4 { right: 13%; bottom: 45px; animation-delay: 1.5s; }

/* COMMON SECTIONS */

.social-section {
    padding: 90px 0;
}

.social-section.light {
    background: var(--ek-light);
}

.social-heading {
    max-width: 760px;
    margin-bottom: 48px;
}

.social-heading h2 {
    font-size: clamp(34px, 4vw, 52px);
}

.social-heading p {
    color: var(--ek-muted);
    line-height: 1.8;
    font-size: 16px;
    margin: 18px 0 0;
}

/* SERVICES */

.social-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.social-card {
    background: #fff;
    border: 1px solid var(--ek-border);
    border-radius: 20px;
    padding: 30px;
    transition: .35s ease;
    position: relative;
    overflow: hidden;
}

.social-card::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    right: -35px;
    bottom: -35px;
    border-radius: 50%;
    background: rgba(181,45,105,.07);
}

.social-card:hover {
    transform: translateY(-7px);
    border-color: rgba(100,27,91,.22);
    box-shadow: 0 20px 45px rgba(100,27,91,.10);
}

.social-icon {
    width: 55px;
    height: 55px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(100,27,91,.10), rgba(230,106,24,.10));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}

.social-icon i {
    font-size: 25px;
    color: var(--ek-purple);
}

.social-card small {
    color: var(--ek-orange);
    font-weight: 800;
}

.social-card h3 {
    color: var(--ek-dark);
    font-size: 21px;
    margin: 8px 0 10px;
}

.social-card p {
    color: var(--ek-muted);
    line-height: 1.7;
    margin: 0;
}

/* PLATFORMS */

.social-platforms {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.social-platform {
    background: #fff;
    border: 1px solid var(--ek-border);
    border-radius: 16px;
    padding: 24px 18px;
    text-align: center;
    transition: .3s ease;
}

.social-platform:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(100,27,91,.09);
}

.social-platform i {
    display: block;
    font-size: 30px;
    color: var(--ek-purple);
    margin-bottom: 10px;
}

.social-platform strong {
    color: var(--ek-dark);
}

/* STRATEGY */

.social-strategy {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 60px;
    align-items: center;
}

.social-strategy h2 {
    font-size: clamp(34px, 4vw, 50px);
    color: var(--ek-dark);
    line-height: 1.15;
}

.social-strategy h2 span {
    display: block;
    color: var(--ek-magenta);
}

.social-strategy p {
    color: var(--ek-muted);
    line-height: 1.8;
}

.strategy-list {
    display: grid;
    gap: 14px;
}

.strategy-item {
    display: flex;
    gap: 17px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--ek-border);
    padding: 20px;
    border-radius: 16px;
}

.strategy-item i {
    color: var(--ek-green);
    font-size: 22px;
}

.strategy-item h3 {
    margin: 0 0 5px;
    color: var(--ek-dark);
    font-size: 18px;
}

.strategy-item p {
    margin: 0;
    font-size: 14px;
}

/* INDUSTRIES */

.social-industries {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}

.social-industry {
    padding: 12px 18px;
    background: #fff;
    border: 1px solid var(--ek-border);
    border-radius: 50px;
    color: var(--ek-text);
    font-size: 14px;
    transition: .3s ease;
}

.social-industry:hover {
    color: #fff;
    border-color: var(--ek-purple);
    background: var(--ek-purple);
    transform: translateY(-3px);
}

/* PROCESS */

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

.social-step {
    padding: 28px;
    border: 1px solid var(--ek-border);
    border-radius: 18px;
    background: #fff;
    position: relative;
}

.social-step strong {
    font-size: 36px;
    background: var(--ek-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.social-step i {
    display: block;
    font-size: 25px;
    color: var(--ek-purple);
    margin: 18px 0;
}

.social-step h3 {
    margin: 0 0 9px;
    color: var(--ek-dark);
}

.social-step p {
    margin: 0;
    color: var(--ek-muted);
    line-height: 1.65;
    font-size: 14px;
}

/* CTA */

.social-cta {
    padding: 80px 0;
}

.social-cta-box {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 60px;
    background: linear-gradient(
        135deg,
        rgba(100,27,91,.08),
        rgba(181,45,105,.08),
        rgba(230,106,24,.08)
    );
    border: 1px solid var(--ek-border);
    text-align: center;
}

.social-cta-box h2 {
    color: var(--ek-dark);
    font-size: clamp(32px, 4vw, 48px);
    margin: 0 0 14px;
}

.social-cta-box p {
    max-width: 680px;
    margin: 0 auto 25px;
    color: var(--ek-muted);
    line-height: 1.7;
}

/* BUTTONS */

.social-page .ek-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

/* ANIMATIONS */

@keyframes socialFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes socialSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* RESPONSIVE */

@media (max-width: 992px) {

    .social-hero-grid,
    .social-strategy {
        grid-template-columns: 1fr;
    }

    .social-hero {
        padding-top: 70px;
    }

    .social-dashboard {
        min-height: 380px;
    }

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

    .social-platforms {
        grid-template-columns: repeat(4, 1fr);
    }

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

@media (max-width: 700px) {

    .social-section {
        padding: 65px 0;
    }

    .social-hero {
        padding: 55px 0 60px;
    }

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

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

    .social-process {
        grid-template-columns: 1fr;
    }

    .social-cta-box {
        padding: 40px 22px;
    }

    .social-ring.one {
        width: 300px;
        height: 300px;
    }

    .social-ring.two {
        width: 225px;
        height: 225px;
    }

    .social-center {
        width: 175px;
        height: 175px;
    }

    .social-center i {
        font-size: 40px;
    }

    .social-float {
        width: 48px;
        height: 48px;
    }

    .social-float.f1 { left: 5%; }
    .social-float.f2 { right: 4%; }
    .social-float.f3 { left: 5%; }
    .social-float.f4 { right: 5%; }
}

@media (max-width: 480px) {

    .social-hero h1 {
        font-size: 39px;
    }

    .social-hero p {
        font-size: 15px;
    }

    .social-platforms {
        grid-template-columns: 1fr 1fr;
    }

    .social-card,
    .social-step {
        padding: 24px;
    }

}