/* =========================================================
   DEVLENT TECHNOLOGIES
   MAIN STYLESHEET
========================================================= */

:root {

    --blue: #1d5cff;
    --blue-light: #3c8cff;

    --cyan: #00d9ff;
    --purple: #8b5cf6;
    --pink: #ec4899;

    --dark: #030712;
    --dark-2: #070b16;
    --dark-3: #0b1020;

    --white: #ffffff;
    --text: #f5f7ff;
    --muted: #9aa4b8;

    --border: rgba(255,255,255,0.09);

    --radius: 24px;

    --font-main: "DM Sans", sans-serif;
    --font-heading: "Space Grotesk", sans-serif;
}


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


html {
    scroll-behavior: smooth;
}


body {

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

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(29,92,255,0.12),
            transparent 35%
        ),

        radial-gradient(
            circle at 80% 50%,
            rgba(139,92,246,0.08),
            transparent 30%
        ),

        var(--dark);

    color: var(--text);

    overflow-x: hidden;

    cursor: none;
}


body.menu-open {
    overflow: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font-family: inherit;
}


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


.container {

    width: min(1180px, 90%);

    margin: auto;
}


/* =========================================================
   CUSTOM CURSOR
========================================================= */

.cursor {

    position: fixed;

    width: 8px;
    height: 8px;

    background: white;

    border-radius: 50%;

    pointer-events: none;

    z-index: 99999;

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


.cursor-ring {

    position: fixed;

    width: 35px;
    height: 35px;

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

    border-radius: 50%;

    pointer-events: none;

    z-index: 99998;

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

    transition:
        width .3s ease,
        height .3s ease,
        background .3s ease;

}


/* =========================================================
   PRELOADER
========================================================= */

.preloader {

    position: fixed;

    inset: 0;

    z-index: 100000;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background: #030712;
}


.loader-logo {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 35px;
}


.loader-logo strong {

    display: block;

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

    font-size: 32px;

    letter-spacing: -1px;
}


.loader-logo small {

    display: block;

    font-size: 9px;

    letter-spacing: 5px;

    color: var(--blue-light);
}


.logo-mark,
.brand-icon {

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 14px;

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

    transform: none;

    box-shadow:
        0 0 30px rgba(29,92,255,0.22);

    overflow: hidden;
}

.logo-mark img,
.brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.brand-icon img {
    padding: 2px;
}


.logo-mark span,
.brand-icon span {
    display: none;
}


.loader-line {

    width: 220px;

    height: 2px;

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

    overflow: hidden;
}


.loader-line span {

    display: block;

    width: 0%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );
}


.preloader p {

    margin-top: 18px;

    color: var(--muted);

    font-size: 13px;
}


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

.background-grid {

    position: fixed;

    inset: 0;

    z-index: -3;

    opacity: .35;

    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: 70px 70px;

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


.ambient {

    position: fixed;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    z-index: -2;
}


.ambient-one {

    width: 400px;
    height: 400px;

    background: rgba(29,92,255,.08);

    top: 5%;
    left: -10%;
}


.ambient-two {

    width: 350px;
    height: 350px;

    background: rgba(139,92,246,.07);

    right: -8%;
    top: 40%;
}


.ambient-three {

    width: 300px;
    height: 300px;

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

    bottom: 0;
    left: 30%;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 500;

    padding: 18px 0;

    background:
        rgba(3,7,18,.55);

    backdrop-filter: blur(20px);

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


.nav-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


.brand {

    display: flex;

    align-items: center;

    gap: 11px;
}


.brand-icon {

    width: 42px;
    height: 42px;

    border-radius: 12px;
}


.brand-icon span {

    font-size: 23px;
}


.brand-text strong {

    display: block;

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

    font-size: 21px;

    line-height: 1;

    color: #ffffff;

    font-weight: 700;

    text-shadow: 0 1px 12px rgba(255,255,255,0.10);
}


.brand-text small {

    display: block;

    font-size: 8px;

    letter-spacing: 3px;

    color: #35d9ff;

    font-weight: 700;

    margin-top: 5px;

    text-shadow: 0 0 12px rgba(53,217,255,0.30);
}


.desktop-nav {

    display: flex;

    align-items: center;

    gap: 30px;

    margin-left: auto;
}


.desktop-nav a {

    color: #e2e8f5;

    font-size: 13px;

    transition: .3s ease;

    position: relative;
}


.desktop-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 1px;

    background: var(--cyan);

    transition: .3s ease;
}


.desktop-nav a:hover {

    color: white;
}


.desktop-nav a:hover::after {

    width: 100%;
}


.nav-button {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 17px;

    border-radius: 100px;

    background: white;

    color: #07101f;

    font-size: 12px;

    font-weight: 700;

    transition: .3s ease;
}


.nav-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 35px rgba(255,255,255,.15);
}


.menu-button {

    display: none;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.menu-button span {

    display: block;

    width: 25px;
    height: 2px;

    background: white;

    margin: 5px;
}


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

.mobile-menu {

    position: fixed;

    inset: 0;

    z-index: 450;

    background:
        rgba(3,7,18,.97);

    display: none;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 25px;
}


.mobile-menu a {

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

    font-size: 32px;

    font-weight: 600;
}


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

.hero {

    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    padding-top: 110px;

    overflow: hidden;
}


.hero-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 50px;
}


.hero-content {

    position: relative;

    z-index: 2;
}


.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 13px;

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

    border-radius: 100px;

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

    color: #aab3c5;

    font-size: 11px;

    margin-bottom: 25px;
}


.status-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #36e08d;

    box-shadow:
        0 0 15px #36e08d;

    animation:
        pulse 2s infinite;
}


@keyframes pulse {

    0%,100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }

}


.hero-title {

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

    font-size: clamp(55px, 6.5vw, 92px);

    line-height: .96;

    letter-spacing: -5px;

    font-weight: 700;

    margin-bottom: 28px;
}


.gradient-text {

    background:
        linear-gradient(
            100deg,
            #ffffff 0%,
            #3c8cff 35%,
            #00d9ff 65%,
            #a78bfa 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    background-size: 200% auto;

    animation:
        gradientMove 6s linear infinite;
}


@keyframes gradientMove {

    to {
        background-position: 200% center;
    }

}


.outline-text {

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.65);

    text-shadow:
        0 0 30px rgba(29,92,255,.15);
}


.hero-description {

    max-width: 530px;

    color: #a4aec0;

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 32px;
}


.hero-buttons {

    display: flex;

    gap: 13px;

    flex-wrap: wrap;
}


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 15px 20px;

    border-radius: 12px;

    font-size: 13px;

    font-weight: 700;

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

    will-change: transform;
}


.btn-primary {

    background:
        linear-gradient(
            135deg,
            #1d5cff,
            #2563eb,
            #00a9ff
        );

    color: white;

    box-shadow:
        0 15px 40px rgba(29,92,255,.25);
}


.btn-primary:hover {

    box-shadow:
        0 20px 50px rgba(29,92,255,.4);
}


.btn-secondary {

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

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

    color: #dce3f1;
}


.btn-secondary:hover {

    border-color:
        rgba(0,217,255,.4);

    background:
        rgba(0,217,255,.05);
}


.hero-trust {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 35px;

    color: #6f7b90;

    font-size: 10px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.trust-line {

    width: 40px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            transparent
        );
}


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

.hero-visual {

    position: relative;

    min-height: 550px;

    display: grid;

    place-items: center;
}


.visual-glow {

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(29,92,255,.22),
            rgba(0,217,255,.07),
            transparent 70%
        );

    filter: blur(15px);

    animation:
        glowFloat 6s ease-in-out infinite;
}


@keyframes glowFloat {

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

    50% {
        transform: scale(1.15);
    }

}


.code-window {

    position: relative;

    width: min(500px, 90%);

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

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(22,30,52,.92),
            rgba(5,9,20,.92)
        );

    box-shadow:
        0 40px 100px rgba(0,0,0,.5),
        0 0 60px rgba(29,92,255,.1);

    overflow: hidden;

    transform:
        perspective(1000px)
        rotateY(-8deg)
        rotateX(4deg);

    animation:
        laptopFloat 6s ease-in-out infinite;
}


@keyframes laptopFloat {

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

    50% {
        transform:
            perspective(1000px)
            rotateY(-8deg)
            rotateX(4deg)
            translateY(-15px);
    }

}


.window-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 17px;

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

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


.window-dots {

    display: flex;

    gap: 6px;
}


.window-dots span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #59647b;
}


.window-title {

    font-size: 10px;

    color: #778197;
}


.code-content {

    padding: 35px 30px;

    min-height: 300px;

    font-family: monospace;

    font-size: 13px;

    line-height: 2.1;
}


.code-line {

    white-space: nowrap;
}


.indent {

    padding-left: 25px;
}


.purple {
    color: #b084ff;
}


.cyan {
    color: #45d9ff;
}


.green {
    color: #72e6a6;
}


.yellow {
    color: #ffd166;
}


.white {
    color: #f4f7ff;
}


.code-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 18px;

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

    color: #67738a;

    font-size: 9px;
}


.mini-status {

    display: flex;

    align-items: center;

    gap: 7px;
}


.mini-status span {

    width: 5px;
    height: 5px;

    background: #32e88a;

    border-radius: 50%;
}


/* PHONE */

.phone-card {

    position: absolute;

    right: -10px;
    bottom: 25px;

    width: 155px;

    height: 300px;

    padding: 8px;

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            #30394d,
            #080b12
        );

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

    box-shadow:
        0 30px 60px rgba(0,0,0,.55);

    transform:
        rotate(8deg);

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


@keyframes phoneFloat {

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

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

}


.phone-screen {

    height: 100%;

    border-radius: 21px;

    background:
        linear-gradient(
            180deg,
            #071225,
            #0d1b38
        );

    padding: 18px 12px;

    overflow: hidden;
}


.phone-notch {

    position: absolute;

    top: 10px;
    left: 50%;

    transform: translateX(-50%);

    width: 60px;
    height: 15px;

    border-radius: 20px;

    background: #03050a;

    z-index: 2;
}


.phone-top {

    display: flex;

    justify-content: space-between;

    font-size: 7px;

    color: #8491a8;

    margin-bottom: 25px;
}


.app-avatar {

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background: #ffffff;

    padding: 6px;

    overflow: hidden;

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

    box-shadow: 0 8px 25px rgba(0,0,0,.25);

    margin-bottom: 18px;
}

.app-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}



.phone-screen h4 {

    font-size: 14px;

    line-height: 1.3;

    margin-bottom: 7px;
}


.phone-screen p {

    font-size: 8px;

    color: #8591a8;

    line-height: 1.5;

    margin-bottom: 18px;
}


.phone-button {

    background:
        linear-gradient(
            90deg,
            var(--blue),
            #00a9ff
        );

    padding: 9px;

    text-align: center;

    border-radius: 8px;

    font-size: 8px;

    font-weight: 700;
}


.phone-bars {

    margin-top: 20px;

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.phone-bars span {

    display: block;

    height: 5px;

    border-radius: 5px;

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


.phone-bars span:first-child {

    width: 80%;

    background:
        rgba(0,217,255,.3);
}


/* FLOATING ICONS */

.floating-icon {

    position: absolute;

    width: 55px;
    height: 55px;

    display: grid;

    place-items: center;

    border-radius: 17px;

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

    background:
        rgba(7,13,28,.8);

    backdrop-filter: blur(15px);

    color: var(--cyan);

    box-shadow:
        0 15px 35px rgba(0,0,0,.3);
}


.icon-one {

    left: 2%;

    top: 16%;

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


.icon-two {

    right: 0;

    top: 10%;

    color: #a78bfa;

    animation:
        floatTwo 6s ease-in-out infinite;
}


.icon-three {

    left: 8%;

    bottom: 13%;

    color: #54e6a1;

    animation:
        floatThree 6s ease-in-out infinite;
}


.icon-four {

    right: 8%;

    bottom: 3%;

    color: #ff6ec7;

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


@keyframes floatOne {

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

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


@keyframes floatTwo {

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

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


@keyframes floatThree {

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

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


/* PARTICLES */

.hero-particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

    overflow: hidden;
}


.particle {

    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #46bfff;

    box-shadow:
        0 0 12px #46bfff;

    opacity: .7;

    animation:
        particleFloat linear infinite;
}


@keyframes particleFloat {

    from {
        transform: translateY(100vh);
    }

    to {
        transform: translateY(-20vh);
    }
}


.scroll-indicator {

    position: absolute;

    left: 5%;

    bottom: 30px;

    display: flex;

    align-items: center;

    gap: 15px;

    color: #5d687d;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 2px;
}


.scroll-line {

    width: 60px;

    height: 1px;

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

    overflow: hidden;
}


.scroll-line span {

    display: block;

    width: 30px;

    height: 100%;

    background: var(--cyan);

    animation:
        scrollLine 2s infinite;
}


@keyframes scrollLine {

    0% {
        transform: translateX(-60px);
    }

    100% {
        transform: translateX(60px);
    }
}


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

.marquee-section {

    padding: 25px 0;

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

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

    overflow: hidden;

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


.marquee {

    overflow: hidden;

    white-space: nowrap;
}


.marquee-content {

    display: inline-flex;

    align-items: center;

    gap: 30px;

    min-width: max-content;

    animation:
        marquee 25s linear infinite;

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

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 3px;

    color: #67738a;
}


.marquee-content i {

    color: var(--blue);
}


@keyframes marquee {

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

}


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

.section {

    padding: 130px 0;

    position: relative;
}


.section-label {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 10px;

    letter-spacing: 3px;

    color: #7e8aa0;

    margin-bottom: 25px;
}


.section-label span {

    color: var(--cyan);

    font-family: monospace;
}


.section-heading {

    max-width: 750px;

    margin-bottom: 65px;
}


.section-heading h2,
.process-header h2,
.tech-header h2 {

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

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

    line-height: 1;

    letter-spacing: -3px;

    margin-bottom: 20px;
}


.section-heading p {

    color: var(--muted);

    max-width: 530px;

    line-height: 1.7;

    font-size: 15px;
}


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

.about {

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(29,92,255,.025),
            transparent
        );
}


.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    margin-bottom: 100px;
}


.about-heading h2 {

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

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

    line-height: 1.03;

    letter-spacing: -3px;
}


.about-text {

    padding-top: 10px;
}


.about-text p {

    color: #9ba6ba;

    line-height: 1.8;

    font-size: 15px;

    margin-bottom: 20px;
}


.text-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 15px;

    font-size: 13px;

    color: white;

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

    padding-bottom: 7px;
}


.text-link i {

    color: var(--cyan);
}


/* STATS */

.stats-grid {

    display: grid;

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

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

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


.stat {

    padding: 40px 20px;

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

    position: relative;
}


.stat:last-child {

    border-right: 0;
}


.stat strong {

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

    font-size: 58px;

    letter-spacing: -3px;
}


.stat span {

    color: var(--cyan);

    font-size: 25px;

    font-weight: 700;
}


.stat p {

    margin-top: 5px;

    color: #667287;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


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

.services-grid {

    display: grid;

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

    gap: 18px;
}


.service-card {

    position: relative;

    min-height: 370px;

    padding: 35px;

    border-radius: var(--radius);

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

    overflow: hidden;

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

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        border .4s ease,
        box-shadow .4s ease;
}


.service-card::before {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: -100px;
    bottom: -120px;

    border-radius: 50%;

    background: var(--card-color);

    filter: blur(80px);

    opacity: .15;

    transition: .5s ease;
}


.service-card:hover {

    transform:
        translateY(-10px);

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

    box-shadow:
        0 30px 70px rgba(0,0,0,.3);
}


.service-card:hover::before {

    opacity: .3;

    transform: scale(1.3);
}


.service-blue {
    --card-color: #2671ff;
}


.service-purple {
    --card-color: #9b5cff;
}


.service-cyan {
    --card-color: #00d9ff;
}


.service-pink {
    --card-color: #ff4fc7;
}


.service-number {

    position: absolute;

    top: 25px;
    right: 30px;

    color: #4e5a70;

    font-size: 11px;

    font-family: monospace;
}


.service-icon {

    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 17px;

    color: var(--card-color);

    border:
        1px solid color-mix(
            in srgb,
            var(--card-color),
            transparent 70%
        );

    background:
        color-mix(
            in srgb,
            var(--card-color),
            transparent 90%
        );

    font-size: 20px;

    margin-bottom: 60px;
}


.service-card h3 {

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

    font-size: 27px;

    letter-spacing: -1px;

    margin-bottom: 13px;
}


.service-card p {

    color: #8994a9;

    font-size: 14px;

    line-height: 1.7;

    max-width: 420px;

    margin-bottom: 20px;
}


.service-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.service-tags span {

    padding: 6px 9px;

    border-radius: 6px;

    font-size: 9px;

    color: #8290a6;

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


.service-arrow {

    position: absolute;

    right: 30px;
    bottom: 30px;

    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 50%;

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

    color: white;

    transition: .3s ease;
}


.service-card:hover .service-arrow {

    background: var(--card-color);

    transform: rotate(45deg);
}


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

.process {

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.015),
            transparent
        );
}


.process-header {

    margin-bottom: 70px;
}


.process-wrapper {

    position: relative;

    display: grid;

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

    gap: 20px;
}


.process-line {

    position: absolute;

    top: 28px;

    left: 8%;

    right: 8%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan),
            var(--purple)
        );

    opacity: .3;
}


.process-item {

    position: relative;

    z-index: 2;
}


.process-dot {

    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #080e1d;

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

    color: var(--cyan);

    font-family: monospace;

    font-size: 12px;

    margin-bottom: 30px;

    box-shadow:
        0 0 25px rgba(0,217,255,.08);
}


.process-content span {

    font-size: 9px;

    letter-spacing: 2px;

    color: var(--blue-light);
}


.process-content h3 {

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

    font-size: 22px;

    margin: 9px 0;
}


.process-content p {

    color: #788398;

    font-size: 12px;

    line-height: 1.7;

    max-width: 180px;
}


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

.projects-grid {

    display: grid;

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

    gap: 20px;
}

.project {

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

    border-radius: var(--radius);

    overflow: hidden;

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

    transition: .5s ease;
}

.project:hover {

    transform:
        translateY(-8px);

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

.project-large {

    grid-column: span 2;
}

.project-visual {

    height: 340px;

    position: relative;

    overflow: hidden;

    display: grid;

    place-items: center;
}

.project-dairy {

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(0,217,255,.15),
            transparent 55%
        ),

        linear-gradient(
            135deg,
            #081426,
            #050914
        );
}

.project-salon {               

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(236,72,153,.22),
            transparent 55%
        ),

        linear-gradient(
            135deg,
            #1a0916,
            #08050a
        );
}

.project-food {

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255,176,71,.2),
            transparent 55%
        ),

        linear-gradient(
            135deg,
            #171008,
            #080705
        );
}

/* =========================================================
   PROJECT DASHBOARDS
========================================================= */

.dashboard {
    width: min(94%, 980px);
    min-height: 255px;
    display: flex;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 18px;
    background: rgba(5,10,22,.9);
    box-shadow: 0 30px 70px rgba(0,0,0,.48);
    overflow: hidden;
    transform: perspective(1200px) rotateX(5deg) rotateY(-4deg);
    transition: transform .7s ease, box-shadow .7s ease;
}

.project:hover .dashboard {
    transform: perspective(1200px) rotateX(2deg) rotateY(-1deg) translateY(-4px) scale(1.015);
    box-shadow: 0 38px 90px rgba(0,0,0,.58), 0 0 45px rgba(29,92,255,.08);
}

.dashboard-sidebar {
    width: 150px;
    flex: 0 0 150px;
    padding: 18px 12px;
    border-right: 1px solid rgba(255,255,255,.07);
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: rgba(255,255,255,.015);
}

.dash-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash-logo {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
    overflow: hidden;
    box-shadow: 0 0 18px rgba(29,92,255,.22);
}

.dash-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.dash-brand-name {
    font-size: 9px;
    font-weight: 700;
    color: #dce6f7;
    line-height: 1.1;
}

.dash-nav {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.dash-nav span {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 7px;
    border-radius: 7px;
    color: #69768b;
    font-size: 8px;
}

.dash-nav span.active {
    color: #dce8ff;
    background: linear-gradient(90deg, rgba(29,92,255,.22), rgba(0,217,255,.05));
}

.dash-nav i { width: 13px; text-align: center; font-size: 9px; }
.dash-nav b { font-weight: 600; }

.dashboard-main {
    flex: 1;
    min-width: 0;
    padding: 18px;
}

.dashboard-heading-row,
.panel-title,
.progress-meta,
.mini-status-list,
.salon-topbar,
.food-dashboard-head,
.food-order-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dashboard-heading-row small,
.dashboard-date,
.panel-title small {
    color: #68768b;
    font-size: 7px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.dashboard-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    margin-top: 3px;
}

.dashboard-date {
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
}

.dashboard-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }

.metric-card {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(29,92,255,.16), rgba(0,217,255,.025));
}

.metric-card.warning { background: linear-gradient(135deg, rgba(255,176,71,.13), rgba(255,92,87,.03)); }
.metric-card span, .metric-card em { display: block; font-size: 7px; color: #7c899c; font-style: normal; }
.metric-card strong { display: block; margin: 5px 0 4px; font-family: var(--font-heading); font-size: 16px; }
.metric-card em { color: #65d8b2; font-size: 6.5px; }
.metric-card.warning em { color: #f6b45d; }

.dashboard-panels { display: grid; grid-template-columns: 1.3fr .7fr; gap: 9px; margin-top: 9px; }
.chart-panel, .progress-panel { border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: 10px; background: rgba(255,255,255,.018); }
.panel-title span { font-size: 8px; font-weight: 600; color: #d9e2f1; }
.chart-bars { height: 72px; display: flex; align-items: flex-end; gap: 7px; margin-top: 9px; border-bottom: 1px solid rgba(255,255,255,.06); }
.chart-bars i { flex: 1; min-width: 4px; border-radius: 4px 4px 0 0; background: linear-gradient(to top, var(--blue), var(--cyan)); opacity: .78; }
.progress-track { height: 6px; margin: 14px 0 7px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.07); }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.progress-meta { font-size: 6.5px; color: #718096; }
.progress-meta strong { color: #dbe6f7; font-size: 8px; }
.mini-status-list { margin-top: 9px; font-size: 6.5px; color: #718096; }
.mini-status-list span { display: flex; align-items: center; gap: 5px; }
.mini-status-list i, .online-dot i, .live-pill i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #4ee0b3; box-shadow: 0 0 8px rgba(78,224,179,.6); }
.mini-status-list b { font-weight: 600; color: #b7c4d7; }

/* SALON */
.salon-ui {
    width: min(88%, 520px);
    padding: 19px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.045);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    transform: rotate(-2deg);
    box-shadow: 0 30px 60px rgba(0,0,0,.4);
}

.salon-kicker, .food-kicker { display: block; font-size: 6px; letter-spacing: 2px; color: #f38bbd; margin-bottom: 3px; }
.salon-topbar strong, .food-dashboard-head strong { display: block; font-family: var(--font-heading); font-size: 15px; }
.online-dot, .live-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 6.5px; color: #8c9aad; padding: 5px 7px; border-radius: 999px; background: rgba(255,255,255,.05); }
.salon-stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 14px; }
.salon-stat-grid > div, .next-appointment, .salon-progress { padding: 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(255,255,255,.025); }
.salon-stat-grid span, .salon-stat-grid small { display: block; color: #958b98; font-size: 6.5px; }
.salon-stat-grid strong { display: block; margin: 4px 0; font-family: var(--font-heading); font-size: 15px; color: #f6dbe8; }
.salon-stat-grid small { color: #d98aae; }
.next-appointment { margin-top: 7px; }
.appointment-person { display: grid; grid-template-columns: 26px 1fr 12px; align-items: center; gap: 8px; margin-top: 9px; }
.avatar { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg,#d84b91,#f38bbd); color: white; font-size: 7px; font-weight: 700; }
.appointment-person strong, .appointment-person span { display: block; }
.appointment-person strong { font-size: 8px; color: #f0e2e9; }
.appointment-person span { margin-top: 2px; color: #9d9099; font-size: 6.5px; }
.appointment-person > i { color: #806d7a; font-size: 8px; }
.salon-progress { margin-top: 7px; }
.progress-track.pink i { background: linear-gradient(90deg,#d84b91,#f38bbd); }

/* FOOD */
.food-ui {
    width: min(88%, 520px);
    padding: 18px;
    border-radius: 17px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 30px 60px rgba(0,0,0,.4);
    transform: rotate(2deg);
}
.food-kicker { color: #ffb66d; }
.live-pill i { background: #ffb66d; box-shadow: 0 0 8px rgba(255,182,109,.6); }
.food-order-card { margin-top: 13px; padding: 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.025); }
.food-order-top span { font-size: 6.5px; color: #928b82; }
.food-order-top b { padding: 4px 6px; border-radius: 999px; font-size: 6px; color: #ffd6a9; background: rgba(255,159,67,.12); }
.food-order-card h3 { margin: 8px 0 12px; font-family: var(--font-heading); font-size: 11px; text-align: left; color: #f6eee5; }
.order-route { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 5px; color: #8f877e; font-size: 6px; }
.order-route i { height: 1px; background: rgba(255,255,255,.12); }
.food-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 7px; }
.food-metrics > div { padding: 8px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; background: rgba(255,255,255,.02); }
.food-metrics span, .food-metrics small { display: block; font-size: 6px; color: #8f877e; }
.food-metrics strong { display: block; margin: 4px 0 2px; font-family: var(--font-heading); font-size: 11px; color: #f8eee3; }
.food-metrics small { color: #bda88f; }
.order-progress { margin-top: 8px; padding: 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; }
.order-steps { display: flex; gap: 6px; margin-top: 10px; }
.order-steps i { flex: 1; height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); }
.order-steps i.done { background: linear-gradient(90deg,#ff9f43,#ff5e57); }


/* =========================================================
   PREMIUM CAFÉ PROJECTS — BEST CSS & ULTRA-PREMIUM UI
   1. XXXXXX Performance Café (https://xxxxx-performance-cafe.vercel.app/)
   2. XXXXX Bliss Cafe | Pure Veg (https://xxxx-bliss-caffe.vercel.app/)
========================================================= */

.cafe-project {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(6, 11, 22, 0.9) 100%);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s ease, box-shadow 0.5s ease;
}

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

.cafe-performance-card:hover {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 30px 70px -15px rgba(16, 185, 129, 0.22), 0 0 45px rgba(16, 185, 129, 0.12);
}

.cafe-bliss-card:hover {
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 30px 70px -15px rgba(212, 175, 55, 0.25), 0 0 45px rgba(212, 175, 55, 0.12);
}

/* Background visual containers */
.project-performance-cafe {
    height: 350px;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 25%, rgba(16, 185, 129, 0.22), transparent 58%),
                radial-gradient(circle at 85% 75%, rgba(245, 158, 11, 0.14), transparent 50%),
                linear-gradient(135deg, #091c14 0%, #030a07 100%);
}

.project-bliss-cafe {
    height: 350px;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 25%, rgba(212, 175, 55, 0.26), transparent 58%),
                radial-gradient(circle at 15% 80%, rgba(217, 119, 6, 0.15), transparent 50%),
                linear-gradient(135deg, #1d120a 0%, #090604 100%);
}

/* Ambient glow blobs */
.cafe-glow {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    filter: blur(75px);
    pointer-events: none;
    opacity: 0.55;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.performance-glow {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.5) 0%, rgba(6, 182, 212, 0.2) 60%, transparent 80%);
    top: 5%;
    left: 15%;
}

.bliss-glow {
    background: radial-gradient(circle, rgba(212, 175, 55, 0.55) 0%, rgba(245, 158, 11, 0.25) 60%, transparent 80%);
    top: 5%;
    right: 15%;
}

.cafe-project:hover .cafe-glow {
    opacity: 0.85;
    transform: scale(1.1);
}

/* UI Mockup shells */
.cafe-ui {
    width: min(92%, 520px);
    padding: 16px 18px;
    border-radius: 17px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.65s ease, border-color 0.65s ease;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.cafe-performance-ui {
    background: rgba(7, 24, 18, 0.92);
    border-color: rgba(16, 185, 129, 0.28);
    transform: perspective(1200px) rotateX(4deg) rotateY(-3deg) rotate(0.8deg);
    backdrop-filter: blur(14px);
}

.cafe-project:hover .cafe-performance-ui {
    transform: perspective(1200px) rotateX(1.5deg) rotateY(-1deg) translateY(-5px) scale(1.02);
    border-color: rgba(16, 185, 129, 0.55);
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.65), 0 0 35px rgba(16, 185, 129, 0.22);
}

.cafe-bliss-ui {
    background: rgba(24, 16, 11, 0.94);
    border-color: rgba(212, 175, 55, 0.3);
    transform: perspective(1200px) rotateX(4deg) rotateY(3deg) rotate(-0.8deg);
    backdrop-filter: blur(14px);
}

.cafe-project:hover .cafe-bliss-ui {
    transform: perspective(1200px) rotateX(1.5deg) rotateY(1deg) translateY(-5px) scale(1.02);
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.65), 0 0 35px rgba(212, 175, 55, 0.25);
}

/* Top bar elements */
.cafe-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cafe-brand-block {
    display: flex;
    align-items: center;
    gap: 9px;
}

.cafe-mark {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.cafe-mark.emerald {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.45);
}

.cafe-mark.gold {
    background: linear-gradient(135deg, #f5d061, #d4af37);
    color: #1b120c;
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.45);
}

.cafe-kicker {
    display: block;
    font-size: 6.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: #10b981;
}

.cafe-kicker.gold-kicker {
    color: #f5d061;
}

.cafe-brand-block strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.2px;
    line-height: 1.2;
}

.cafe-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-size: 6.5px;
    font-weight: 700;
    color: #6ee7b7;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cafe-badge-live.gold-badge {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.35);
    color: #fce79a;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: pulseDot 2s infinite ease-in-out;
}

.pulse-dot.gold {
    background: #f5d061;
    box-shadow: 0 0 8px #f5d061;
}

@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
}

/* Announcement ticker (Bliss Cafe) */
.cafe-ticker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 3px 8px;
    margin-bottom: 10px;
    border-radius: 6px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.18);
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #ecd58b;
    text-transform: uppercase;
}

/* Hero mini strip */
.cafe-hero-mini {
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.cafe-hero-tag {
    font-size: 6px;
    letter-spacing: 1.4px;
    font-weight: 800;
    color: #34d399;
    text-transform: uppercase;
}

.cafe-hero-mini h4 {
    margin: 3px 0 2px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    color: #f3fdf8;
    text-align: left;
}

.cafe-hero-mini h4 em {
    color: #6ee7b7;
    font-style: italic;
}

.cafe-hero-mini p {
    font-size: 6.5px;
    color: #93a99e;
    line-height: 1.4;
    margin: 0;
}

/* Category chips */
.cafe-category-chips {
    display: flex;
    gap: 5px;
    margin-top: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.cafe-category-chips::-webkit-scrollbar { display: none; }

.cafe-category-chips .chip {
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 6px;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #9cb3a7;
}

.cafe-category-chips .chip.active {
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.4);
    color: #a7f3d0;
}

/* Order type tabs (Bliss Cafe) */
.cafe-order-type-tabs {
    display: flex;
    gap: 6px;
    margin-top: 9px;
}

.type-tab {
    flex: 1;
    text-align: center;
    padding: 4px 6px;
    border-radius: 8px;
    font-size: 6px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #bfae9e;
}

.type-tab.active {
    background: rgba(212, 175, 55, 0.16);
    border-color: rgba(212, 175, 55, 0.45);
    color: #fce79a;
}

/* Featured Dish Cards */
.cafe-feature-dish, .cafe-dish-card {
    margin-top: 8px;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cafe-dish-card.gold-dish {
    background: rgba(212, 175, 55, 0.04);
    border-color: rgba(212, 175, 55, 0.18);
}

.dish-badge, .dish-tag {
    display: inline-block;
    font-size: 5.5px;
    letter-spacing: 1.2px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.dish-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
}

.dish-tag.gold {
    background: rgba(212, 175, 55, 0.16);
    color: #f7df8b;
}

.dish-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dish-meta strong, .cafe-dish-card strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 8.5px;
    font-weight: 700;
    color: #f5f9f6;
    line-height: 1.3;
}

.dish-meta small, .cafe-dish-card small {
    display: block;
    margin-top: 2px;
    font-size: 6px;
    color: #9cb5a7;
}

.cafe-dish-card small {
    color: #d1b89d;
}

.dish-price-pill, .gold-price {
    padding: 4px 8px;
    border-radius: 8px;
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
}

.dish-price-pill {
    background: rgba(16, 185, 129, 0.18);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
}

.gold-price {
    background: rgba(212, 175, 55, 0.18);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #fce79a;
}

/* Metric mini grid */
.cafe-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 8px;
}

.cafe-metric {
    padding: 7px 8px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.cafe-metric.gold-metric {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(212, 175, 55, 0.12);
}

.cafe-metric span {
    display: block;
    font-size: 5.5px;
    color: #8da496;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.cafe-metric.gold-metric span {
    color: #baa490;
}

.cafe-metric strong {
    display: block;
    margin: 3px 0 1px;
    font-family: var(--font-heading);
    font-size: 8.5px;
    font-weight: 700;
    color: #eafbf3;
}

.cafe-metric.gold-metric strong {
    color: #faebd3;
}

.cafe-metric small {
    display: block;
    font-size: 5.5px;
    color: #6a8c78;
}

.cafe-metric.gold-metric small {
    color: #9c8470;
}

/* Footer strip */
.cafe-footer-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 5.5px;
    color: #7d9789;
}

.cafe-footer-strip.gold-strip {
    border-top-color: rgba(212, 175, 55, 0.14);
    color: #ad947d;
}

.cafe-footer-strip i {
    margin-right: 3px;
    color: #10b981;
}

.cafe-footer-strip.gold-strip i {
    color: #f5d061;
}

/* Card Info Details */
.project-category-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}

.live-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
    white-space: nowrap;
}

.live-status-pill.gold-pill {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.28);
    color: #fce79a;
}

.live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
}

.live-dot.green {
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
}

.live-dot.gold {
    background: #f5d061;
    box-shadow: 0 0 6px #f5d061;
}

/* Tags */
.cafe-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.cafe-tech-tags span {
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 6.5px;
    font-weight: 600;
    line-height: 1;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.18);
    color: #94d8b9;
    letter-spacing: 0.2px;
}

.cafe-tech-tags.gold-tags span {
    background: rgba(212, 175, 55, 0.06);
    border-color: rgba(212, 175, 55, 0.2);
    color: #ded0a6;
}

/* Actions */
.cafe-project-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.cafe-project-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.cafe-project-btn:hover {
    transform: translateY(-2px);
}

.cafe-project-btn.primary.emerald {
    color: #03140c;
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
    border: none;
}

.cafe-project-btn.primary.emerald:hover {
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.42);
    background: linear-gradient(135deg, #4ade80 0%, #10b981 100%);
}

.cafe-project-btn.primary.gold-btn {
    color: #1a1005;
    background: linear-gradient(135deg, #fbe285 0%, #d4af37 100%);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.25);
    border: none;
}

.cafe-project-btn.primary.gold-btn:hover {
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.45);
    background: linear-gradient(135deg, #fff0a8 0%, #e2be4b 100%);
}

.cafe-project-btn.secondary {
    color: #c9ede0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(16, 185, 129, 0.24);
}

.cafe-project-btn.secondary:hover {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.45);
    color: #ffffff;
}

.cafe-project-btn.secondary.gold-secondary {
    color: #f7eed3;
    border-color: rgba(212, 175, 55, 0.28);
}

.cafe-project-btn.secondary.gold-secondary:hover {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.5);
    color: #ffffff;
}

.cafe-project-btn i {
    font-size: 7.5px;
    transition: transform 0.2s ease;
}

.cafe-project-btn:hover i {
    transform: translate(1px, -1px);
}


/* LOAN MANAGEMENT / SALESFORCE */
.project-loan {
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(0, 161, 224, .22),
            transparent 58%
        ),
        linear-gradient(
            135deg,
            #061626,
            #050914
        );
}

.loan-ui {
    width: min(90%, 540px);
    padding: 17px;
    border: 1px solid rgba(0, 161, 224, .22);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(7, 24, 42, .94), rgba(3, 9, 18, .96));
    box-shadow: 0 30px 65px rgba(0,0,0,.45), 0 0 45px rgba(0,161,224,.08);
    transform: rotate(-1.5deg);
}

.loan-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.loan-kicker {
    display: block;
    font-size: 6px;
    letter-spacing: 1.8px;
    color: #53c7f5;
    margin-bottom: 4px;
}

.loan-topbar strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 14px;
    color: #eef8ff;
}

.loan-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 999px;
    background: rgba(0, 161, 224, .09);
    border: 1px solid rgba(0, 161, 224, .18);
    color: #91dfff;
    font-size: 6px;
    white-space: nowrap;
}

.loan-stage-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    margin-top: 14px;
}

.loan-stage {
    min-width: 0;
    padding: 8px 5px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    text-align: center;
    color: #728296;
}

.loan-stage.active {
    color: #d9f4ff;
    border-color: rgba(0, 161, 224, .28);
    background: linear-gradient(135deg, rgba(0,161,224,.14), rgba(29,92,255,.06));
}

.loan-stage i {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
}

.loan-stage span {
    display: block;
    font-size: 5.5px;
    line-height: 1.25;
}

.loan-panels {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 7px;
    margin-top: 8px;
}

.loan-panel {
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;
    background: rgba(255,255,255,.02);
}

.loan-flow {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    color: #c8d9e7;
    font-size: 5.5px;
}

.loan-flow span {
    padding: 5px 5px;
    border-radius: 6px;
    background: rgba(0,161,224,.08);
    border: 1px solid rgba(0,161,224,.12);
    white-space: nowrap;
}

.loan-flow i {
    flex: 1;
    min-width: 5px;
    height: 1px;
    background: linear-gradient(90deg, rgba(0,161,224,.5), rgba(255,255,255,.08));
}

.loan-module-list {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.loan-module-list span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #8292a5;
    font-size: 5.8px;
    line-height: 1.25;
}

.loan-module-list i {
    color: #4ee0b3;
    font-size: 6px;
}

.loan-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.06);
    color: #687a8e;
    font-size: 5.5px;
}

.loan-footer i {
    color: #4ee0b3;
    margin-right: 3px;
}

.project-summary { max-width: 520px; margin: 7px 0 0; color: #6f7b90; font-size: 11px; line-height: 1.6; }




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

.technology {

    overflow: hidden;
}


.tech-header {

    margin-bottom: 50px;
}


.tech-grid {

    display: grid;

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

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

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


.tech-item {

    min-height: 130px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

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

    color: #788399;

    transition: .3s ease;
}


.tech-item:last-child {

    border-right: 0;
}


.tech-item i {

    font-size: 25px;

    transition: .3s ease;
}


.tech-item span {

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.tech-item:hover {

    color: white;

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


.tech-item:hover i {

    color: var(--cyan);

    transform:
        translateY(-5px)
        scale(1.1);
}


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

.why-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 100px;

    align-items: center;
}


.why-content h2 {

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

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

    letter-spacing: -3px;

    line-height: 1;

    margin-bottom: 25px;
}


.why-content > p {

    color: #8994a9;

    line-height: 1.8;

    font-size: 15px;

    max-width: 480px;

    margin-bottom: 30px;
}


.benefits-grid {

    display: grid;

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

    gap: 15px;
}


.benefit-card {

    padding: 30px;

    min-height: 190px;

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

    border-radius: 20px;

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

    transition: .4s ease;
}


.benefit-card:hover {

    transform:
        translateY(-6px);

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

    border-color:
        rgba(0,217,255,.2);
}


.benefit-card i {

    color: var(--cyan);

    font-size: 20px;

    margin-bottom: 25px;
}


.benefit-card h3 {

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

    font-size: 18px;

    margin-bottom: 7px;
}


.benefit-card p {

    color: #758197;

    font-size: 11px;

    line-height: 1.6;
}


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

.cta {

    padding:
        160px 0;

    overflow: hidden;

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

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


.cta::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(29,92,255,.15),
            transparent 45%
        );
}


.cta-content {

    position: relative;

    text-align: center;

    max-width: 850px;

    margin: auto;
}


.cta-small {

    color: var(--cyan);

    font-size: 10px;

    letter-spacing: 4px;

    font-weight: 600;
}


.cta h2 {

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

    font-size: clamp(55px,8vw,105px);

    line-height: .9;

    letter-spacing: -6px;

    margin: 25px 0;
}


.cta h2 span {

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.6);
}


.cta-content p {

    color: #8792a7;

    max-width: 500px;

    margin: auto;

    line-height: 1.7;

    font-size: 14px;

    margin-bottom: 35px;
}


.cta-button {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 17px 25px;

    border-radius: 100px;

    color: white;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 20px 60px rgba(29,92,255,.25);
}


.cta-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(70px);

    opacity: .3;
}


.orb-one {

    width: 300px;
    height: 300px;

    background: var(--blue);

    left: -150px;
    top: 20%;
}


.orb-two {

    width: 250px;
    height: 250px;

    background: var(--purple);

    right: -120px;
    bottom: 10%;
}


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

.footer {

    padding: 70px 0 30px;

    background: #02050c;
}


.footer-top {

    display: flex;

    justify-content: space-between;

    gap: 70px;

    padding-bottom: 60px;

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


.footer-brand > p {

    color: #657187;

    font-size: 12px;

    margin-top: 15px;
}


.footer-links {

    display: grid;

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

    gap: 70px;
}


.footer-links div {

    display: flex;

    flex-direction: column;

    gap: 11px;
}


.footer-links h4 {

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

    font-size: 12px;

    margin-bottom: 8px;
}


.footer-links a {

    color: #69758b;

    font-size: 11px;

    transition: .3s ease;
}


.footer-links a:hover {

    color: var(--cyan);
}


.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 25px;

    color: #4e596c;

    font-size: 10px;
}


.socials {

    display: flex;

    gap: 8px;
}


.socials a {

    width: 35px;
    height: 35px;

    display: grid;

    place-items: center;

    border-radius: 50%;

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

    transition: .3s ease;
}


.socials a:hover {

    color: white;

    background: var(--blue);

    transform:
        translateY(-3px);
}


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

.reveal {

    opacity: 0;

    transform:
        translateY(35px);
}


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

@media(max-width: 1000px) {

    .desktop-nav {
        display: none;
    }

    .nav-button {
        display: none;
    }

    .menu-button {
        display: block;
    }

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

    .hero-content {
        text-align: center;
    }

    .eyebrow {
        justify-content: center;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

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

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

    .hero-visual {
        min-height: 500px;
    }

    .about-grid,
    .why-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

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

        row-gap: 50px;
    }

    .process-line {
        display: none;
    }

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

    .tech-item:nth-child(4) {
        border-right: 0;
    }

    .tech-item {
        border-bottom:
            1px solid rgba(255,255,255,.07);
    }

}


@media(max-width: 700px) {

    body {
        cursor: auto;
    }

    .cursor,
    .cursor-ring {
        display: none;
    }

    .section {
        padding: 90px 0;
    }

    .hero {
        padding-top: 130px;
    }

    .hero-title {
        font-size: clamp(48px, 15vw, 72px);
        letter-spacing: -4px;
    }

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

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

    .code-window {
        width: 92%;
    }

    .phone-card {
        width: 115px;
        height: 230px;
        right: -5px;
        bottom: 10px;
    }

    .phone-screen {
        padding: 13px 8px;
    }

    .phone-screen h4 {
        font-size: 10px;
    }

    .phone-screen p {
        font-size: 6px;
    }

    .phone-button {
        font-size: 6px;
    }

    .floating-icon {
        width: 42px;
        height: 42px;
        font-size: 14px;
    }

    .icon-one {
        left: 0;
    }

    .icon-three {
        left: 3%;
    }

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

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

    .stat:nth-child(2) {
        border-right: 0;
    }

    .stat strong {
        font-size: 45px;
    }

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

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

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

    .project-large {
        grid-column: span 1;
    }

    .project-visual {
        height: 280px;
    }

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

    .process-item {
        display: grid;

        grid-template-columns:
            58px 1fr;

        gap: 20px;
    }

    .process-dot {
        margin: 0;
    }

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

    .tech-item:nth-child(even) {
        border-right: 0;
    }

    .why-grid {
        gap: 50px;
    }

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

    .cta {
        padding: 110px 0;
    }

    .cta h2 {
        font-size: clamp(50px, 15vw, 80px);
        letter-spacing: -4px;
    }

    .footer-top {
        flex-direction: column;
        gap: 45px;
    }

    .footer-links {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

}


@media(max-width: 450px) {

    .container {
        width: 88%;
    }

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

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

    .btn {
        width: 100%;
    }

    .hero-visual {
        min-height: 350px;
    }

    .code-content {
        padding: 25px 18px;
        font-size: 9px;
    }

    .code-window {
        transform: none;
    }

    .phone-card {
        transform: rotate(5deg) scale(.8);
        right: -20px;
    }

    .floating-icon {
        transform: scale(.8);
    }

    .icon-two {
        right: -5px;
    }

    .icon-four {
        right: 0;
    }

}


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

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

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;
    }

}

/* =========================================================
   MOBILE PROJECT DASHBOARD FIX
   Keeps desktop presentation intact while preventing
   dashboard overflow / skew on phones.
========================================================= */
@media (max-width: 700px) {
    .project-visual {
        height: 300px;
        padding: 14px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .project-visual .dashboard,
    .project-visual .salon-ui,
    .project-visual .food-ui,
    .project-visual .loan-ui {
        /* The scale is controlled by the mobile scroll animation in script.js. */
        transform: scale(var(--mobile-dashboard-scale, 1)) !important;
        animation: none !important;
        transform-origin: center center;
        will-change: transform;
    }

    .project-visual .dashboard,
    .project-visual .loan-ui {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
        max-height: 272px;
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        border-radius: 13px;
        overflow: hidden;
    }

    .project-visual .dashboard-sidebar {
        width: 52px;
        min-width: 52px;
        padding: 12px 6px;
        gap: 16px;
        align-items: center;
        overflow: hidden;
    }

    .project-visual .dash-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        width: 100%;
    }

    .project-visual .dash-logo {
        width: 28px;
        height: 28px;
    }

    .project-visual .dash-brand-name {
        display: block;
        max-width: 45px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 5.5px;
        text-align: center;
    }

    .project-visual .dash-nav {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 9px;
    }

    .project-visual .dash-nav span {
        width: 30px;
        height: 28px;
        display: grid;
        place-items: center;
        padding: 0;
        border-radius: 8px;
    }

    .project-visual .dash-nav span b {
        display: none;
    }

    .project-visual .dash-nav span i {
        margin: 0;
        font-size: 9px;
    }

    .project-visual .dashboard-main {
        min-width: 0;
        width: 100%;
        padding: 12px;
        overflow: hidden;
    }

    .project-visual .dashboard-heading-row {
        gap: 8px;
        margin-bottom: 9px;
    }

    .project-visual .dashboard-heading-row small {
        font-size: 5.5px;
    }

    .project-visual .dashboard-title {
        font-size: 12px;
        margin: 2px 0 0;
    }

    .project-visual .dashboard-date {
        font-size: 6px;
        padding: 4px 6px;
    }

    .project-visual .dairy-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .project-visual .dairy-cards .metric-card {
        min-width: 0;
        padding: 7px;
    }

    .project-visual .dairy-cards .metric-card.warning {
        grid-column: 1 / -1;
    }

    .project-visual .metric-card span {
        font-size: 5.5px;
    }

    .project-visual .metric-card strong {
        font-size: 12px;
    }

    .project-visual .metric-card em {
        font-size: 5px;
    }

    .project-visual .dashboard-panels {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        margin-top: 6px;
    }

    .project-visual .chart-panel,
    .project-visual .progress-panel {
        min-width: 0;
        padding: 7px;
    }

    .project-visual .chart-bars {
        height: 42px;
        gap: 4px;
        margin-top: 5px;
    }

    .project-visual .progress-track {
        margin: 8px 0 5px;
    }

    .project-visual .mini-status-list {
        margin-top: 5px;
    }

    .project-visual .salon-ui,
    .project-visual .food-ui {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 12px;
        box-sizing: border-box;
        border-radius: 13px;
    }

    .project-visual .salon-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .project-visual .salon-stat-grid > div {
        min-width: 0;
    }

    .project-visual .salon-stat-grid > div:nth-child(3) {
        grid-column: 1 / -1;
    }

    .project-visual .food-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .project-visual .food-order-card {
        min-width: 0;
    }
}

@media (max-width: 380px) {
    .project-visual {
        height: 285px;
        padding: 10px;
    }

    .project-visual .dashboard {
        grid-template-columns: 46px minmax(0, 1fr);
        max-height: 265px;
    }

    .project-visual .dashboard-sidebar {
        width: 46px;
        min-width: 46px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .project-visual .dashboard-main {
        padding: 10px;
    }

    .project-visual .metric-card strong {
        font-size: 11px;
    }

    .project-visual .dashboard-panels {
        gap: 5px;
    }
}


/* =========================================================
   SCROLL TO EXPLORE — BELOW HERO
   Keeps the indicator in its own clean strip so it cannot
   overlap the hero/app visual or the marquee.
========================================================= */
.scroll-explore-strip {
    position: relative;
    z-index: 5;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 0 22px;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(5,8,22,.78);
    box-sizing: border-box;
}

.scroll-explore-strip .scroll-indicator {
    position: relative;
    left: auto;
    bottom: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

@media (max-width: 700px) {
    .scroll-explore-strip {
        padding: 15px 0 18px;
    }

    .scroll-explore-strip .scroll-indicator {
        font-size: 8px;
        letter-spacing: 1.8px;
        gap: 11px;
    }

    .scroll-explore-strip .scroll-line {
        width: 46px;
    }
}

@media (max-width: 450px) {
    .scroll-explore-strip {
        padding: 13px 0 16px;
    }

    .scroll-explore-strip .scroll-indicator {
        font-size: 7px;
        letter-spacing: 1.5px;
    }
}


/* =========================================================
   PROJECT INFORMATION — CLEAN / RESPONSIVE
========================================================= */
.project-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    min-width: 0;
    padding: 22px 26px 24px;
    background: linear-gradient(135deg, rgba(8,20,38,.72), rgba(10,12,30,.88));
    border-top: 1px solid rgba(255,255,255,.06);
    box-sizing: border-box;
}
.project-info > div {
    min-width: 0;
    flex: 1 1 auto;
}
.project-category {
    display: block;
    margin: 0 0 7px;
    color: #77849a;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.project-info h3 {
    margin: 0;
    max-width: 760px;
    color: #f4f7ff;
    font-family: var(--font-heading);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.45px;
}
.project-summary {
    max-width: 680px;
    margin: 9px 0 0;
    color: #7f8ba0;
    font-size: 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.project-info > i {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-top: 2px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    color: #dbe7ff;
    background: rgba(255,255,255,.035);
    font-size: 12px;
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.project:hover .project-info > i {
    transform: translate(2px, -2px);
    border-color: rgba(70,140,255,.45);
    background: rgba(29,92,255,.12);
}

/* Keep the hero trust statement above visual layers. */
.hero-trust {
    position: relative;
    z-index: 20;
    margin-top: 18px;
    min-height: 18px;
    opacity: 1;
    visibility: visible;
}

/* Remove the old scroll bar completely. */
.scroll-explore-strip {
    display: none !important;
}

@media (max-width: 900px) {
    .project-info {
        padding: 18px 20px 20px;
        gap: 16px;
    }
    .project-info h3 {
        font-size: 22px;
    }
    .project-summary {
        max-width: 100%;
        font-size: 11.5px;
        line-height: 1.55;
    }
    .project-info > i {
        width: 34px;
        height: 34px;
        font-size: 10px;
    }
}

@media (max-width: 700px) {
    .hero-trust {
        margin-top: 20px;
        padding-bottom: 4px;
    }
    .project-info {
        align-items: flex-start;
        gap: 10px;
        padding: 14px 15px 17px;
    }
    .project-category {
        margin-bottom: 5px;
        font-size: 7px;
        letter-spacing: 1.5px;
    }
    .project-info h3 {
        max-width: none;
        font-size: 20px;
        line-height: 1.16;
        letter-spacing: -.25px;
    }
    .project-summary {
        max-width: none;
        margin-top: 7px;
        font-size: 10.5px;
        line-height: 1.5;
        color: #7c879b;
    }
    .project-info > i {
        width: 30px;
        height: 30px;
        margin-top: 1px;
        font-size: 9px;
    }
    .project-visual {
        overflow: hidden;
    }
}

@media (max-width: 450px) {
    .hero-trust {
        margin-top: 18px;
        font-size: 10px;
    }
    .project-info {
        padding: 13px 14px 16px;
    }
    .project-category {
        font-size: 6.5px;
        letter-spacing: 1.3px;
    }
    .project-info h3 {
        font-size: 18px;
        line-height: 1.18;
    }
    .project-summary {
        font-size: 10px;
        line-height: 1.48;
    }
    .project-info > i {
        width: 28px;
        height: 28px;
    }
}



/* =========================================================
   MOBILE SCROLL ZOOM-OUT EFFECT
   Cards and dashboard previews gently zoom out while the
   user scrolls through the portfolio. Desktop is unchanged.
========================================================= */

@media (max-width: 700px) {
    .service-card,
    .project {
        transform-origin: center center;
        will-change: transform;
    }

    .project-visual .metric-card,
    .project-visual .food-metrics > div,
    .project-visual .salon-stat-grid > div {
        transform-origin: center center;
        will-change: transform;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-card,
    .project,
    .project-visual .dashboard,
    .project-visual .salon-ui,
    .project-visual .food-ui,
    .project-visual .metric-card,
    .project-visual .food-metrics > div,
    .project-visual .salon-stat-grid > div {
        transform: none !important;
        will-change: auto;
    }
}

@media (max-width: 700px) {
    .project-visual .loan-ui {
        width: 100%;
        max-width: 100%;
        padding: 12px;
        border-radius: 13px;
    }

    .loan-topbar strong {
        font-size: 11px;
    }

    .loan-stage-row {
        gap: 3px;
        margin-top: 10px;
    }

    .loan-stage {
        padding: 6px 3px;
    }

    .loan-stage i {
        font-size: 8px;
        margin-bottom: 3px;
    }

    .loan-stage span {
        font-size: 4.5px;
    }

    .loan-panels {
        gap: 5px;
        margin-top: 6px;
    }

    .loan-panel {
        padding: 7px;
    }

    .loan-flow {
        gap: 2px;
        margin-top: 8px;
        font-size: 4.5px;
    }

    .loan-flow span {
        padding: 4px 3px;
    }

    .loan-module-list {
        gap: 4px;
        margin-top: 7px;
    }

    .loan-module-list span {
        font-size: 4.7px;
    }

    .loan-footer {
        margin-top: 6px;
        padding-top: 6px;
        font-size: 4.5px;
    }
}


.project-ppt-link {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #bfeeff;
    border: 1px solid rgba(0,161,224,.18);
    background: rgba(0,161,224,.06);
    transition: .3s ease;
}
.project-ppt-link:hover {
    color: #fff;
    background: rgba(0,161,224,.16);
    border-color: rgba(0,161,224,.45);
    transform: translateY(-2px) rotate(3deg);
}
@media (max-width: 900px) {
    .project-ppt-link {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 10px;
    }
}
@media (max-width: 700px) {
    .project-ppt-link {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 9px;
    }
}
@media (max-width: 450px) {
    .project-ppt-link {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }
}

.project-demo-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
}
.project-demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .25px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.project-demo-btn.primary {
    color: #06111c;
    background: linear-gradient(135deg, #74d7ff, #7cf0c8);
    box-shadow: 0 8px 24px rgba(65, 190, 220, .12);
}
.project-demo-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(65, 190, 220, .22);
}
.project-demo-btn i { font-size: 8px; }

/* =========================================================
   LOAN PROJECT — MOBILE LAYOUT FIX
   The loan dashboard is a single-column mobile preview.
   This overrides the generic dashboard grid used by the
   other project previews so the Salesforce card never
   squeezes its content into an unwanted sidebar layout.
========================================================= */
@media (max-width: 700px) {
    .project-visual.project-loan {
        height: 310px;
        min-height: 310px;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .project-visual.project-loan .loan-ui {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
        height: auto !important;
        padding: 11px !important;
        margin: 0;
        transform: scale(var(--mobile-dashboard-scale, 1)) !important;
        transform-origin: center center !important;
        border-radius: 12px;
        overflow: hidden;
    }

    .project-visual.project-loan .loan-topbar {
        align-items: flex-start;
        gap: 8px;
    }

    .project-visual.project-loan .loan-kicker {
        font-size: 5.5px;
        letter-spacing: 1.35px;
        margin-bottom: 3px;
    }

    .project-visual.project-loan .loan-topbar strong {
        font-size: 11px;
        line-height: 1.2;
    }

    .project-visual.project-loan .loan-badge {
        flex: 0 0 auto;
        padding: 4px 6px;
        font-size: 5.5px;
    }

    .project-visual.project-loan .loan-stage-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        margin-top: 9px;
    }

    .project-visual.project-loan .loan-stage {
        padding: 6px 3px;
        min-width: 0;
        border-radius: 7px;
    }

    .project-visual.project-loan .loan-stage:nth-child(4) {
        grid-column: 1 / 2;
    }

    .project-visual.project-loan .loan-stage i {
        font-size: 8px;
        margin-bottom: 3px;
    }

    .project-visual.project-loan .loan-stage span {
        font-size: 4.8px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .project-visual.project-loan .loan-panels {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
        margin-top: 6px;
    }

    .project-visual.project-loan .loan-panel {
        min-width: 0;
        padding: 7px;
        border-radius: 8px;
    }

    .project-visual.project-loan .panel-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    .project-visual.project-loan .panel-title span {
        font-size: 6.5px;
    }

    .project-visual.project-loan .panel-title small {
        font-size: 4.5px;
    }

    .project-visual.project-loan .loan-flow {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3px;
        margin-top: 6px;
    }

    .project-visual.project-loan .loan-flow span {
        min-width: 0;
        padding: 4px 2px;
        text-align: center;
        font-size: 4.4px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .project-visual.project-loan .loan-flow i {
        display: none;
    }

    .project-visual.project-loan .loan-module-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 7px;
        margin-top: 6px;
    }

    .project-visual.project-loan .loan-module-list span {
        min-width: 0;
        font-size: 4.6px;
        line-height: 1.2;
    }

    .project-visual.project-loan .loan-module-list i {
        flex: 0 0 auto;
        font-size: 5px;
    }

    .project-visual.project-loan .loan-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 6px;
        padding-top: 6px;
        font-size: 4.3px;
        line-height: 1.2;
    }

    .project-visual.project-loan .loan-footer span {
        min-width: 0;
    }
}

@media (max-width: 450px) {
    .project-visual.project-loan {
        height: 295px;
        min-height: 295px;
        padding: 10px;
    }

    .project-visual.project-loan .loan-ui {
        padding: 9px !important;
        border-radius: 11px;
    }

    .project-visual.project-loan .loan-topbar strong {
        font-size: 10px;
    }

    .project-visual.project-loan .loan-stage-row {
        gap: 3px;
    }

    .project-visual.project-loan .loan-stage {
        padding: 5px 2px;
    }

    .project-visual.project-loan .loan-stage span {
        font-size: 4.4px;
    }

    .project-visual.project-loan .loan-panel {
        padding: 6px;
    }

    .project-visual.project-loan .loan-module-list span {
        font-size: 4.3px;
    }

    .project-visual.project-loan .loan-footer {
        font-size: 4px;
    }
}


/* =========================================================
   GROCERY, INVENTORY & WAREHOUSE MANAGEMENT SYSTEM
   Premium retail + operations dashboard preview
========================================================= */

.project-grocery {
    background:
        radial-gradient(circle at 52% 28%, rgba(34, 197, 94, .16), transparent 54%),
        radial-gradient(circle at 84% 78%, rgba(250, 166, 37, .12), transparent 42%),
        linear-gradient(135deg, #101b12, #070b0a 70%, #050914);
}

.grocery-ui {
    width: min(94%, 920px);
    min-height: 270px;
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(126, 231, 135, .18);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(14, 29, 18, .97), rgba(5, 12, 10, .97));
    box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 45px rgba(34,197,94,.07);
    transform: perspective(1200px) rotateX(4deg) rotateY(-3deg);
    transition: transform .7s ease, box-shadow .7s ease;
}

.project:hover .grocery-ui {
    transform: perspective(1200px) rotateX(1deg) rotateY(-1deg) translateY(-4px) scale(1.012);
    box-shadow: 0 38px 90px rgba(0,0,0,.58), 0 0 45px rgba(34,197,94,.10);
}

.grocery-sidebar { min-width: 0; padding: 15px 9px; border-right: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.018); }
.grocery-brand { display:flex; align-items:center; gap:7px; margin-bottom:18px; }
.grocery-brand-icon { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border-radius:8px; color:#effff2; background:linear-gradient(135deg,#22c55e,#f59e0b); box-shadow:0 0 18px rgba(34,197,94,.20); font-size:11px; }
.grocery-brand strong,.grocery-brand span { display:block; }
.grocery-brand strong { color:#f4fff5; font-family:var(--font-heading); font-size:9px; line-height:1.1; }
.grocery-brand span { margin-top:2px; color:#728875; font-size:4.5px; letter-spacing:1.2px; }
.grocery-nav { display:flex; flex-direction:column; gap:5px; }
.grocery-nav span { display:flex; align-items:center; gap:7px; min-width:0; padding:7px 6px; border-radius:7px; color:#718074; font-size:6.5px; }
.grocery-nav span.active { color:#eaffec; background:linear-gradient(90deg,rgba(34,197,94,.18),rgba(245,158,11,.04)); }
.grocery-nav i { width:12px; flex:0 0 12px; text-align:center; font-size:8px; }
.grocery-nav b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }

.grocery-main { min-width:0; padding:16px; }
.grocery-topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.grocery-kicker { display:block; margin-bottom:3px; color:#77957b; font-size:5.5px; letter-spacing:1.7px; }
.grocery-topbar strong { display:block; color:#f3fff4; font-family:var(--font-heading); font-size:15px; line-height:1.1; }
.grocery-status { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; padding:5px 7px; border:1px solid rgba(126,231,135,.11); border-radius:999px; color:#8ea18f; background:rgba(255,255,255,.035); font-size:5.5px; }
.grocery-status i { width:5px; height:5px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px rgba(74,222,128,.7); }

.grocery-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-top:12px; }
.grocery-metric { min-width:0; padding:8px; border:1px solid rgba(255,255,255,.07); border-radius:9px; background:rgba(255,255,255,.025); }
.grocery-metric.blue { background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(59,130,246,.025)); }
.grocery-metric.green { background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(34,197,94,.025)); }
.grocery-metric.orange { background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(245,158,11,.025)); }
.grocery-metric.red { background:linear-gradient(135deg,rgba(239,68,68,.14),rgba(239,68,68,.02)); }
.grocery-metric span,.grocery-metric small { display:block; color:#78887a; font-size:5.5px; }
.grocery-metric strong { display:block; margin:4px 0 3px; color:#effff1; font-family:var(--font-heading); font-size:14px; line-height:1; }
.grocery-metric small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grocery-metric small i { color:#4ade80; margin-right:2px; }

.grocery-panels { display:grid; grid-template-columns:1.2fr .8fr; gap:7px; margin-top:7px; }
.grocery-panel,.grocery-mini-panel { min-width:0; padding:9px; border:1px solid rgba(255,255,255,.07); border-radius:9px; background:rgba(255,255,255,.018); }
.grocery-panel-title { display:flex; align-items:center; justify-content:space-between; gap:7px; }
.grocery-panel-title span { color:#dcebdd; font-size:7px; font-weight:600; }
.grocery-panel-title small { color:#718074; font-size:5px; }
.grocery-chart-area { height:55px; display:flex; align-items:flex-end; gap:6px; margin-top:7px; padding-bottom:1px; border-bottom:1px solid rgba(255,255,255,.06); }
.grocery-chart-area i { flex:1; min-width:3px; border-radius:4px 4px 0 0; background:linear-gradient(to top,#22c55e,#f5b942); opacity:.82; }
.grocery-capacity-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; color:#879689; font-size:5.5px; }
.grocery-capacity-row span { display:flex; align-items:center; gap:4px; }
.grocery-capacity-row i { width:5px; height:5px; border-radius:50%; background:#35c86a; }
.grocery-capacity-row i.cold { background:#60a5fa; }
.grocery-capacity-row b { color:#d2e6d3; font-size:6px; }
.grocery-capacity-track { height:5px; margin-top:4px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.06); }
.grocery-capacity-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#22c55e,#8bdc65); }
.grocery-capacity-track.cold-track i { background:linear-gradient(90deg,#3b82f6,#67e8f9); }

.grocery-bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:7px; }
.grocery-flow,.grocery-alerts { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:7px; }
.grocery-flow span,.grocery-alerts span { min-width:0; display:flex; align-items:center; gap:4px; padding:5px; border:1px solid rgba(255,255,255,.06); border-radius:7px; color:#7f9181; background:rgba(255,255,255,.018); font-size:5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.grocery-flow i { color:#4ade80; }
.grocery-flow span:nth-child(2) i { color:#f59e0b; }
.grocery-flow b { margin-left:auto; color:#dcebdd; font-size:5.5px; }
.grocery-alerts { grid-template-columns:1fr 1fr; }
.grocery-alerts i { color:#f59e0b; }
.grocery-alerts span:nth-child(2) i { color:#60a5fa; }

.grocery-tech-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.grocery-tech-tags span { padding:4px 6px; border:1px solid rgba(126,231,135,.12); border-radius:999px; color:#8ca58f; background:rgba(34,197,94,.035); font-size:6px; line-height:1; }
.grocery-project-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.grocery-project-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 10px; border-radius:7px; font-size:7px; font-weight:700; transition:transform .25s ease,border-color .25s ease,background .25s ease; }
.grocery-project-btn:hover { transform:translateY(-2px); }
.grocery-project-btn.primary { color:#07110a; background:linear-gradient(135deg,#76e78d,#f5c453); }
.grocery-project-btn.secondary { color:#d8ead9; border:1px solid rgba(126,231,135,.16); background:rgba(255,255,255,.03); }

@media (max-width:700px) {
    .project-visual.project-grocery { height:315px; min-height:315px; padding:12px; display:flex; align-items:center; justify-content:center; }
    .project-visual .grocery-ui { width:100%; max-width:100%; min-width:0; min-height:0; height:auto; grid-template-columns:46px minmax(0,1fr); transform:scale(var(--mobile-dashboard-scale,1)) !important; transform-origin:center center !important; animation:none !important; border-radius:13px; }
    .project-visual .grocery-sidebar { width:46px; padding:11px 5px; }
    .project-visual .grocery-brand { flex-direction:column; gap:4px; margin-bottom:13px; text-align:center; }
    .project-visual .grocery-brand-icon { width:25px; height:25px; flex-basis:25px; font-size:9px; }
    .project-visual .grocery-brand strong { font-size:6px; }
    .project-visual .grocery-brand span { display:none; }
    .project-visual .grocery-nav { gap:6px; }
    .project-visual .grocery-nav span { justify-content:center; padding:6px 2px; }
    .project-visual .grocery-nav i { width:auto; font-size:8px; }
    .project-visual .grocery-nav b { display:none; }
    .project-visual .grocery-main { padding:11px; }
    .project-visual .grocery-kicker { font-size:4.5px; letter-spacing:1.25px; }
    .project-visual .grocery-topbar strong { font-size:12px; }
    .project-visual .grocery-status { padding:4px 5px; font-size:4.5px; }
    .project-visual .grocery-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-top:8px; }
    .project-visual .grocery-metric { padding:6px; }
    .project-visual .grocery-metric span { font-size:4.5px; }
    .project-visual .grocery-metric strong { font-size:10px; margin:3px 0 2px; }
    .project-visual .grocery-metric small { font-size:4px; }
    .project-visual .grocery-panels { grid-template-columns:1.1fr .9fr; gap:5px; margin-top:5px; }
    .project-visual .grocery-panel { padding:6px; }
    .project-visual .grocery-panel-title span { font-size:5.5px; }
    .project-visual .grocery-panel-title small { font-size:4px; }
    .project-visual .grocery-chart-area { height:30px; gap:4px; margin-top:5px; }
    .project-visual .grocery-capacity-row { margin-top:5px; font-size:4.5px; }
    .project-visual .grocery-capacity-row b { font-size:5px; }
    .project-visual .grocery-capacity-track { height:4px; margin-top:3px; }
    .project-visual .grocery-bottom-grid { gap:5px; margin-top:5px; }
    .project-visual .grocery-mini-panel { padding:6px; }
    .project-visual .grocery-flow,.project-visual .grocery-alerts { gap:3px; margin-top:5px; }
    .project-visual .grocery-flow span,.project-visual .grocery-alerts span { padding:4px 3px; font-size:4px; gap:3px; }
    .project-visual .grocery-flow b { font-size:4.3px; }
    .grocery-tech-tags { gap:4px; margin-top:8px; }
    .grocery-tech-tags span { font-size:5.5px; padding:4px 5px; }
    .grocery-project-actions { gap:6px; margin-top:8px; }
    .grocery-project-btn { padding:6px 8px; font-size:6.5px; }
}

@media (max-width:450px) {
    .project-visual.project-grocery { height:300px; min-height:300px; padding:10px; }
    .project-visual .grocery-ui { grid-template-columns:42px minmax(0,1fr); border-radius:11px; }
    .project-visual .grocery-sidebar { width:42px; padding:9px 4px; }
    .project-visual .grocery-brand-icon { width:23px; height:23px; flex-basis:23px; }
    .project-visual .grocery-main { padding:9px; }
    .project-visual .grocery-topbar strong { font-size:10px; }
    .project-visual .grocery-metric { padding:5px; }
    .project-visual .grocery-metric strong { font-size:9px; }
    .project-visual .grocery-metric small { font-size:4px; }
    .project-visual .grocery-chart-area { height:27px; }
    .project-visual .grocery-flow span,.project-visual .grocery-alerts span { font-size:3.8px; }
    .grocery-tech-tags span { font-size:5px; }
    .grocery-project-btn { font-size:6px; }
}


/* =========================================================
   HOSPITAL MANAGEMENT SYSTEM
   Modern medical + premium SaaS project preview
========================================================= */

.project-hospital {
    background:
        radial-gradient(circle at 50% 32%, rgba(34, 197, 154, .16), transparent 55%),
        radial-gradient(circle at 82% 80%, rgba(29, 92, 255, .12), transparent 45%),
        linear-gradient(135deg, #071a1d, #050914);
}

.hospital-ui {
    width: min(94%, 920px);
    min-height: 270px;
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(116, 239, 209, .18);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(7, 25, 31, .97), rgba(4, 10, 18, .97));
    box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 45px rgba(34,197,154,.08);
    transform: perspective(1200px) rotateX(4deg) rotateY(-3deg);
    transition: transform .7s ease, box-shadow .7s ease;
}

.project:hover .hospital-ui {
    transform: perspective(1200px) rotateX(1deg) rotateY(-1deg) translateY(-4px) scale(1.012);
    box-shadow: 0 38px 90px rgba(0,0,0,.58), 0 0 45px rgba(34,197,154,.10);
}

.hospital-sidebar {
    min-width: 0;
    padding: 15px 9px;
    border-right: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.018);
}

.hospital-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
}

.hospital-brand-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #d9fff6;
    background: linear-gradient(135deg, #14b889, #159eea);
    box-shadow: 0 0 18px rgba(20,184,137,.22);
    font-size: 11px;
}

.hospital-brand strong,
.hospital-brand span {
    display: block;
}

.hospital-brand strong {
    color: #effffb;
    font-family: var(--font-heading);
    font-size: 9px;
    line-height: 1.1;
}

.hospital-brand span {
    margin-top: 2px;
    color: #6e8b91;
    font-size: 4.5px;
    letter-spacing: 1.2px;
}

.hospital-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hospital-nav span {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 7px 6px;
    border-radius: 7px;
    color: #6e8087;
    font-size: 6.5px;
}

.hospital-nav span.active {
    color: #dffef7;
    background: linear-gradient(90deg, rgba(20,184,137,.18), rgba(21,158,234,.04));
}

.hospital-nav i {
    width: 12px;
    flex: 0 0 12px;
    text-align: center;
    font-size: 8px;
}

.hospital-nav b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.hospital-main {
    min-width: 0;
    padding: 16px;
}

.hospital-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.hospital-kicker {
    display: block;
    margin-bottom: 3px;
    color: #5c8c8a;
    font-size: 5.5px;
    letter-spacing: 1.7px;
}

.hospital-topbar strong {
    display: block;
    color: #f0fffc;
    font-family: var(--font-heading);
    font-size: 15px;
    line-height: 1.1;
}

.hospital-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 5px 7px;
    border: 1px solid rgba(116,239,209,.10);
    border-radius: 999px;
    color: #8ca7a8;
    background: rgba(255,255,255,.035);
    font-size: 5.5px;
}

.hospital-status i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #36e0a1;
    box-shadow: 0 0 8px rgba(54,224,161,.7);
}

.hospital-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
}

.hospital-metric {
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;
    background: rgba(255,255,255,.025);
}

.hospital-metric.blue { background: linear-gradient(135deg, rgba(29,92,255,.15), rgba(29,92,255,.025)); }
.hospital-metric.cyan { background: linear-gradient(135deg, rgba(0,217,255,.12), rgba(0,217,255,.02)); }
.hospital-metric.purple { background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(139,92,246,.02)); }
.hospital-metric.red { background: linear-gradient(135deg, rgba(239,68,68,.14), rgba(239,68,68,.02)); }

.hospital-metric span,
.hospital-metric small {
    display: block;
    color: #71868a;
    font-size: 5.5px;
}

.hospital-metric strong {
    display: block;
    margin: 4px 0 3px;
    color: #ecfffb;
    font-family: var(--font-heading);
    font-size: 14px;
    line-height: 1;
}

.hospital-metric small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hospital-metric small i {
    color: #45e0af;
    margin-right: 2px;
}

.hospital-panels {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 7px;
    margin-top: 7px;
}

.hospital-panel {
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;
    background: rgba(255,255,255,.018);
}

.hospital-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

.hospital-panel-title span {
    color: #d9e9e7;
    font-size: 7px;
    font-weight: 600;
}

.hospital-panel-title small {
    color: #657b7e;
    font-size: 5px;
}

.hospital-chart-area {
    height: 55px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-top: 7px;
    padding-bottom: 1px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.hospital-chart-area i {
    flex: 1;
    min-width: 3px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(to top, #14b889, #45d7ff);
    opacity: .8;
}

.hospital-bed-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    color: #84999a;
    font-size: 5.5px;
}

.hospital-bed-row span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hospital-bed-row i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #20c997;
}

.hospital-bed-row i.icu {
    background: #7aa7ff;
}

.hospital-bed-row b {
    color: #cfe4e1;
    font-size: 6px;
}

.hospital-bed-track {
    height: 5px;
    margin-top: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
}

.hospital-bed-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #14b889, #54e6bd);
}

.hospital-bed-track.cyan-track i {
    background: linear-gradient(90deg, #3c8cff, #55dfff);
}

.hospital-modules {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 7px;
}

.hospital-modules span {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 4px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 7px;
    color: #789092;
    background: rgba(255,255,255,.018);
    font-size: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hospital-modules i {
    color: #4dd9bd;
    font-size: 6px;
}

.hospital-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
}

.hospital-tech-tags span {
    padding: 4px 6px;
    border: 1px solid rgba(76,220,190,.12);
    border-radius: 999px;
    color: #86a9a7;
    background: rgba(20,184,137,.035);
    font-size: 6px;
    line-height: 1;
}

.hospital-project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.hospital-project-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 7px;
    font-weight: 700;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.hospital-project-btn:hover {
    transform: translateY(-2px);
}

.hospital-project-btn.primary {
    color: #04110f;
    background: linear-gradient(135deg, #64f1c7, #42c9f5);
}

.hospital-project-btn.secondary {
    color: #cfe8e4;
    border: 1px solid rgba(116,239,209,.16);
    background: rgba(255,255,255,.03);
}

@media (max-width: 700px) {
    .project-visual.project-hospital {
        height: 315px;
        min-height: 315px;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .project-visual .hospital-ui {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        height: auto;
        grid-template-columns: 46px minmax(0, 1fr);
        transform: scale(var(--mobile-dashboard-scale, 1)) !important;
        transform-origin: center center !important;
        animation: none !important;
        border-radius: 13px;
    }

    .project-visual .hospital-sidebar {
        width: 46px;
        padding: 11px 5px;
    }

    .project-visual .hospital-brand {
        flex-direction: column;
        gap: 4px;
        margin-bottom: 13px;
        text-align: center;
    }

    .project-visual .hospital-brand-icon {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
        font-size: 9px;
    }

    .project-visual .hospital-brand strong {
        font-size: 6px;
    }

    .project-visual .hospital-brand span {
        display: none;
    }

    .project-visual .hospital-nav {
        gap: 6px;
    }

    .project-visual .hospital-nav span {
        justify-content: center;
        padding: 6px 2px;
    }

    .project-visual .hospital-nav i {
        width: auto;
        font-size: 8px;
    }

    .project-visual .hospital-nav b {
        display: none;
    }

    .project-visual .hospital-main {
        padding: 11px;
    }

    .project-visual .hospital-kicker {
        font-size: 4.5px;
        letter-spacing: 1.2px;
    }

    .project-visual .hospital-topbar strong {
        font-size: 11px;
    }

    .project-visual .hospital-status {
        padding: 4px 5px;
        font-size: 4.5px;
    }

    .project-visual .hospital-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        margin-top: 8px;
    }

    .project-visual .hospital-metric {
        padding: 6px;
    }

    .project-visual .hospital-metric span {
        font-size: 4.8px;
    }

    .project-visual .hospital-metric strong {
        font-size: 10px;
        margin: 3px 0;
    }

    .project-visual .hospital-metric small {
        font-size: 4.3px;
    }

    .project-visual .hospital-panels {
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
        margin-top: 5px;
    }

    .project-visual .hospital-panel {
        padding: 6px;
    }

    .project-visual .hospital-panel-title span {
        font-size: 5.8px;
    }

    .project-visual .hospital-panel-title small {
        font-size: 4.3px;
    }

    .project-visual .hospital-chart-area {
        height: 30px;
        gap: 4px;
        margin-top: 5px;
    }

    .project-visual .hospital-bed-row {
        margin-top: 5px;
        font-size: 4.5px;
    }

    .project-visual .hospital-bed-row b {
        font-size: 5px;
    }

    .project-visual .hospital-bed-track {
        height: 4px;
        margin-top: 3px;
    }

    .project-visual .hospital-modules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        margin-top: 5px;
    }

    .project-visual .hospital-modules span {
        padding: 4px 3px;
        font-size: 4.3px;
    }

    .project-visual .hospital-modules i {
        font-size: 5px;
    }

    .hospital-tech-tags {
        gap: 4px;
        margin-top: 8px;
    }

    .hospital-tech-tags span {
        font-size: 5.5px;
        padding: 4px 5px;
    }

    .hospital-project-actions {
        gap: 6px;
        margin-top: 8px;
    }

    .hospital-project-btn {
        padding: 6px 8px;
        font-size: 6.5px;
    }
}

@media (max-width: 450px) {
    .project-visual.project-hospital {
        height: 300px;
        min-height: 300px;
        padding: 10px;
    }

    .project-visual .hospital-ui {
        grid-template-columns: 42px minmax(0, 1fr);
        border-radius: 11px;
    }

    .project-visual .hospital-sidebar {
        width: 42px;
        padding: 9px 4px;
    }

    .project-visual .hospital-brand-icon {
        width: 23px;
        height: 23px;
        flex-basis: 23px;
    }

    .project-visual .hospital-main {
        padding: 9px;
    }

    .project-visual .hospital-topbar strong {
        font-size: 10px;
    }

    .project-visual .hospital-metric {
        padding: 5px;
    }

    .project-visual .hospital-metric strong {
        font-size: 9px;
    }

    .project-visual .hospital-metric small {
        font-size: 4px;
    }

    .project-visual .hospital-chart-area {
        height: 27px;
    }

    .project-visual .hospital-modules span {
        font-size: 4px;
    }

    .hospital-tech-tags span {
        font-size: 5px;
    }

    .hospital-project-btn {
        font-size: 6px;
    }
}


@media (max-width: 900px) {
    .project-demo-actions { gap: 6px; }
    .project-demo-btn { min-height: 34px; padding: 0 11px; font-size: 8px; }
}
@media (max-width: 700px) {
    .project-info { align-items: center; gap: 10px; }
    .project-demo-actions { margin-top: 0; }
    .project-demo-btn { min-height: 31px; padding: 0 9px; border-radius: 8px; font-size: 7px; }
    .project-demo-btn i { font-size: 7px; }
}
@media (max-width: 450px) {
    .project-demo-btn { min-height: 29px; padding: 0 8px; font-size: 6.5px; }
}

/* =========================================================
   PREMIUM CAFÉ PROJECTS — RESPONSIVE MEDIA QUERIES
========================================================= */
@media (max-width: 900px) {
    .cafe-project-btn {
        min-height: 33px;
        padding: 0 11px;
        font-size: 7.5px;
    }
}

@media (max-width: 700px) {
    .project-visual.project-performance-cafe,
    .project-visual.project-bliss-cafe {
        height: 290px;
        min-height: 290px;
        padding: 12px;
    }

    .project-visual .cafe-ui {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        transform: scale(var(--mobile-dashboard-scale, 1)) !important;
        animation: none !important;
        transform-origin: center center !important;
        padding: 13px 14px;
        border-radius: 14px;
    }

    .cafe-hero-mini h4 {
        font-size: 10px;
    }

    .cafe-metrics-grid {
        gap: 5px;
    }

    .cafe-metric strong {
        font-size: 7.5px;
    }

    .cafe-tech-tags span {
        font-size: 5.5px;
        padding: 3px 6px;
    }

    .cafe-project-actions {
        gap: 6px;
        margin-top: 10px;
    }

    .cafe-project-btn {
        min-height: 30px;
        padding: 0 9px;
        font-size: 6.8px;
    }
}

@media (max-width: 450px) {
    .project-visual.project-performance-cafe,
    .project-visual.project-bliss-cafe {
        height: 270px;
        min-height: 270px;
        padding: 8px;
    }

    .project-visual .cafe-ui {
        padding: 10px 11px;
    }

    .cafe-brand-block strong {
        font-size: 9.5px;
    }

    .cafe-hero-mini {
        padding: 6px 8px;
        margin-top: 6px;
    }

    .cafe-feature-dish, .cafe-dish-card {
        padding: 6px 8px;
        margin-top: 6px;
    }

    .dish-price-pill, .gold-price {
        padding: 3px 6px;
        font-size: 7.5px;
    }

    .cafe-metrics-grid {
        margin-top: 6px;
    }

    .cafe-metric {
        padding: 5px 6px;
    }

    .cafe-metric span {
        font-size: 5px;
    }

    .cafe-metric strong {
        font-size: 7px;
    }

    .cafe-project-btn {
        min-height: 28px;
        padding: 0 8px;
        font-size: 6.2px;
    }
}




/* =========================================================
   SHANDAR INTERIOR PROJECT + MOBILE POLISH
========================================================= */
.project-shandar {
    background:
        radial-gradient(ellipse at 78% 18%, rgba(209, 167, 111, .22), transparent 42%),
        linear-gradient(135deg, #28231d 0%, #171613 52%, #0d0d0c 100%);
    padding: 22px;
    box-sizing: border-box;
}
.shandar-preview {
    position: relative;
    width: min(100%, 520px);
    min-height: 250px;
    padding: 18px 20px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border: 1px solid rgba(231, 207, 170, .32);
    border-radius: 12px;
    color: #f8f1e6;
    background:
        linear-gradient(115deg, rgba(20, 19, 16, .94), rgba(43, 36, 27, .82)),
        repeating-linear-gradient(90deg, transparent 0 42px, rgba(255,255,255,.025) 43px 44px);
    box-shadow: 0 20px 50px rgba(0,0,0,.32);
}
.shandar-preview-top {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 10px;
    letter-spacing: 2px;
}
.shandar-preview-top b { color: #d8b98b; font-weight: 500; }
.shandar-preview-mark {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(216,185,139,.75);
    border-radius: 50%;
    color: #d8b98b;
}
.shandar-preview-menu { margin-left: auto; color: #d8b98b; }
.shandar-preview-content { padding: 18px 0 12px; }
.shandar-eyebrow, .shandar-preview-caption {
    display: block;
    color: #c7b69d;
    font-size: 7px;
    letter-spacing: 2px;
}
.shandar-preview-content strong {
    display: block;
    margin-top: 9px;
    font-family: var(--font-heading);
    font-size: clamp(25px, 3.3vw, 38px);
    line-height: 1.05;
    letter-spacing: -1.1px;
}
.shandar-preview-content em { color: #d8b98b; font-style: normal; }
.shandar-preview-line {
    display: block;
    width: 42px;
    height: 2px;
    margin: 13px 0 10px;
    background: #d8b98b;
}
.shandar-preview-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(231,207,170,.2);
    color: #d7cfc2;
    font-size: 8px;
}
.shandar-preview-bottom span { display: inline-flex; align-items: center; gap: 5px; }
.shandar-preview-bottom i { color: #d8b98b; }
.shandar-project .project-info { min-height: 130px; }
.shandar-project .project-demo-btn { font-size: 9px; }

@media (max-width: 700px) {
    .project-shandar {
        height: 260px;
        min-height: 260px;
        padding: 12px;
    }
    .shandar-preview {
        min-height: 220px;
        padding: 14px;
        border-radius: 10px;
    }
    .shandar-preview-content { padding: 13px 0 9px; }
    .shandar-preview-content strong { font-size: clamp(24px, 7vw, 32px); }
    .shandar-preview-bottom { gap: 7px 12px; font-size: 7px; }
    .shandar-project .project-info {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .shandar-project .project-demo-actions { width: 100%; justify-content: flex-start; }
    .shandar-project .project-demo-btn { min-height: 38px; padding: 0 14px; font-size: 10px; }
}
@media (max-width: 450px) {
    .project-shandar { height: 240px; min-height: 240px; padding: 10px; }
    .shandar-preview { min-height: 205px; padding: 12px; }
    .shandar-preview-top { font-size: 8px; letter-spacing: 1.5px; }
    .shandar-preview-mark { width: 24px; height: 24px; }
    .shandar-eyebrow, .shandar-preview-caption { font-size: 6px; letter-spacing: 1.4px; }
    .shandar-preview-content strong { font-size: 25px; }
    .shandar-preview-bottom { font-size: 6.5px; gap: 7px 10px; }
}

/* Keep project details and action buttons readable on narrow screens. */
@media (max-width: 520px) {
    .project-info {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .project-demo-actions,
    .cafe-project-actions,
    .hospital-project-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .project-demo-btn {
        min-height: 36px;
        padding: 0 12px;
        font-size: 9px;
    }
    .project-summary { overflow-wrap: anywhere; }
    .projects-grid { gap: 16px; }
    .project { min-width: 0; }
}
@media (max-width: 360px) {
    .project-info { padding: 13px 12px 15px; }
    .project-info h3 { font-size: 17px; }
    .project-summary { font-size: 10px; }
    .project-demo-actions { gap: 7px; }
    .project-demo-btn { max-width: 100%; white-space: normal; text-align: center; }
}


/* Shandar Interior — site-management dashboard preview */
.project-shandar { background: #f1f5f9; padding: 0; overflow: hidden; }
.shandar-dashboard-preview {
    width: 100%; height: 100%; min-height: 335px; overflow: hidden;
    background: #f7f9fc; color: #172033; font-family: inherit;
    border-radius: inherit; font-size: 9px;
}
.sd-demo-bar {
    display: flex; align-items: center; gap: 9px; padding: 7px 10px;
    background: #10182b; color: #b9c7de; white-space: nowrap; overflow: hidden;
}
.sd-demo-label { color: #ffbf28; border: 1px solid #6d4810; border-radius: 4px; padding: 3px 6px; font-weight: 700; }
.sd-demo-hint { overflow: hidden; text-overflow: ellipsis; }
.sd-topbar {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 10px 12px; background: #fff; border-bottom: 1px solid #dfe6ef;
}
.sd-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sd-logo { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 31px; border-radius: 9px; background: #182238; color: #ffbf28; font-size: 13px; font-weight: 800; }
.sd-brand b { display: block; font-size: 9px; letter-spacing: .25px; }
.sd-brand small, .sd-user small { display: block; margin-top: 3px; color: #75839a; font-size: 7px; }
.sd-user { text-align: right; white-space: nowrap; font-weight: 700; font-size: 8px; }
.sd-user i { color: #e5a52a; font-size: 16px; vertical-align: middle; margin-right: 3px; }
.sd-layout { display: grid; grid-template-columns: 27% 1fr; min-height: 260px; }
.sd-sidebar { padding: 11px 9px; background: #fff; border-right: 1px solid #dfe6ef; }
.sd-sidebar-kicker { display: block; color: #66758b; font-weight: 800; letter-spacing: .8px; margin-bottom: 6px; }
.sd-sidebar > b { display: block; font-size: 10px; line-height: 1.3; }
.sd-site-sub { display: block; margin: 4px 0 11px; color: #7d8ba0; font-size: 7px; line-height: 1.4; }
.sd-progress-label { display: flex; justify-content: space-between; color: #66758b; font-size: 7px; }
.sd-progress-label b { color: #26364e; }
.sd-progress { height: 5px; margin: 5px 0 12px; background: #dfe6ef; border-radius: 9px; overflow: hidden; }
.sd-progress span { display: block; width: 74%; height: 100%; background: #e88b05; border-radius: inherit; }
.sd-nav { display: flex; align-items: flex-start; gap: 7px; margin: 5px 0; padding: 7px 5px; border-radius: 7px; color: #43536b; font-size: 8px; }
.sd-nav > i { color: #6d7f99; margin-top: 2px; width: 12px; }
.sd-nav small { display: block; margin-top: 3px; color: #8794a8; font-size: 6.5px; line-height: 1.25; }
.sd-nav.active { background: #fff8e8; border: 1px solid #f4d88e; color: #172033; }
.sd-main { min-width: 0; padding: 12px; }
.sd-hero {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 17px; border-radius: 12px; color: #f8fafc;
    background: linear-gradient(115deg, #10192e, #3b2116 78%, #5b2808);
    box-shadow: 0 8px 18px rgba(19, 30, 47, .14);
}
.sd-hero-copy { min-width: 0; }
.sd-pill { display: inline-block; padding: 4px 7px; border-radius: 20px; border: 1px solid #8a5a13; color: #ffca40; background: rgba(255,184,31,.1); font-size: 6.5px; font-weight: 800; letter-spacing: .3px; }
.sd-hero h4 { margin: 9px 0 6px; color: #fff; font-size: clamp(16px, 2vw, 24px); line-height: 1.1; }
.sd-hero p { max-width: 440px; margin: 0; color: #d2d8e2; font-size: 8px; line-height: 1.6; }
.sd-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; color: #e1e6ef; font-size: 7px; }
.sd-meta i { color: #ffbd22; margin-right: 3px; }
.sd-progress-card { flex: 0 0 105px; padding: 12px 9px; text-align: center; background: rgba(33,40,56,.9); border: 1px solid #384359; border-radius: 10px; }
.sd-progress-card small { display: block; color: #aebbd0; font-size: 7px; }
.sd-progress-card strong { display: block; margin: 4px 0; color: #ffbd22; font-size: 28px; line-height: 1; }
.sd-progress-card .sd-progress { margin: 8px 0; }
.sd-alert { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 11px; border: 1px solid #ffcbd0; border-radius: 10px; background: linear-gradient(100deg,#fff0f1,#fff); }
.sd-alert-icon { display: grid; place-items: center; flex: 0 0 27px; height: 27px; border-radius: 8px; background: #e91646; color: white; }
.sd-alert span:nth-child(2) { min-width: 0; }
.sd-alert small { display: block; color: #dc1741; font-size: 6.5px; font-weight: 800; letter-spacing: .3px; }
.sd-alert b { display: block; margin-top: 4px; font-size: 8px; }
.sd-alert em { display: block; margin-top: 3px; color: #69778b; font-size: 7px; font-style: normal; }
.sd-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin-top: 10px; }
.sd-stats > div { min-width: 0; padding: 9px; border: 1px solid #e0e7f0; border-radius: 8px; background: white; }
.sd-stats small, .sd-stats em { display: block; color: #6e7c91; font-size: 6.5px; font-style: normal; }
.sd-stats b { display: block; margin: 4px 0; font-size: 17px; }
.sd-stats .green { color: #008c67; } .sd-stats .orange { color: #df7900; } .sd-stats .red { color: #e21d48; }

@media (max-width: 700px) {
    .project-shandar { height: auto; min-height: 0; }
    .shandar-dashboard-preview { min-height: 0; }
    .sd-demo-hint { font-size: 7px; }
    .sd-layout { grid-template-columns: 1fr; }
    .sd-sidebar { display: none; }
    .sd-main { padding: 9px; }
    .sd-hero { padding: 12px; gap: 8px; }
    .sd-progress-card { flex-basis: 88px; padding: 9px 6px; }
    .sd-progress-card strong { font-size: 23px; }
    .sd-alert { margin-top: 8px; }
    .sd-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 420px) {
    .sd-topbar { padding: 8px; }
    .sd-brand b { font-size: 8px; }
    .sd-brand small { font-size: 6px; }
    .sd-user { font-size: 7px; }
    .sd-hero { align-items: flex-start; flex-direction: column; }
    .sd-progress-card { width: 100%; box-sizing: border-box; display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: left; }
    .sd-progress-card strong { grid-column: 2; grid-row: 1 / span 2; font-size: 24px; }
    .sd-progress-card .sd-progress { grid-column: 1 / -1; }
    .sd-meta { font-size: 6.5px; }
}