/* =========================================================
   AFRICARTMALL PROJECT DETAIL PAGE
   Admith Legacy Ltd

   Scope:
   All styles are scoped to .africartmall-page

   ========================================================= */


/* =========================================================
   01. PAGE TOKENS
========================================================= */

.africartmall-page {

    --africart-green: #5bb780;
    --africart-green-dark: #3f9566;
    --africart-green-soft: rgba(91, 183, 128, 0.10);
    --africart-green-border: rgba(91, 183, 128, 0.24);

    --africart-red: #961414;

    --africart-black: #111111;
    --africart-dark: #1a1a1a;

    --africart-text: #383838;
    --africart-muted: #707070;

    --africart-white: #ffffff;
    --africart-off-white: #f6f8f5;

    --africart-border: rgba(17, 17, 17, 0.10);

    --africart-radius-sm: 10px;
    --africart-radius-md: 18px;
    --africart-radius-lg: 28px;
    --africart-radius-xl: 40px;

    --africart-shadow-sm:
        0 10px 30px rgba(17, 17, 17, 0.06);

    --africart-shadow-md:
        0 20px 60px rgba(17, 17, 17, 0.10);

    --africart-shadow-lg:
        0 30px 90px rgba(17, 17, 17, 0.14);

    --africart-transition:
        0.35s cubic-bezier(0.22, 1, 0.36, 1);

}


/* =========================================================
   02. BASE
========================================================= */

.africartmall-page main {

    overflow: hidden;

}


.africartmall-page section {

    position: relative;

}


.africartmall-page img {

    max-width: 100%;
    display: block;

}


.africartmall-page a {

    text-decoration: none;

}


.africartmall-page .section {

    padding-block:
        clamp(80px, 9vw, 150px);

}


.africartmall-page .container {

    width:
        min(
            calc(100% - 48px),
            1280px
        );

    margin-inline: auto;

}


.africartmall-page .section-heading {

    max-width: 850px;

    margin-bottom:
        clamp(45px, 6vw, 80px);

}


.africartmall-page .section-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color:
        var(--africart-green-dark);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}


.africartmall-page .section-label::before {

    content: "";

    width: 28px;

    height: 2px;

    background:
        var(--africart-green);

}


.africartmall-page .section-title {

    margin: 0;

    color:
        var(--africart-black);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.2rem, 4.4vw, 4.6rem);

    font-weight: 700;

    letter-spacing: -0.055em;

    line-height: 1.04;

}


.africartmall-page .section-description {

    max-width: 700px;

    margin-top: 24px;

    color:
        var(--africart-muted);

    font-size:
        clamp(1rem, 1.2vw, 1.15rem);

    line-height: 1.8;

}


/* =========================================================
   03. HERO
========================================================= */

.africartmall-page .africartmall-hero {

    position: relative;

    min-height:
        calc(100svh - 82px);

    display: flex;

    align-items: center;

    padding-block:
        clamp(70px, 8vw, 120px);

    overflow: hidden;

    background:

        radial-gradient(
            circle at 80% 15%,
            rgba(91, 183, 128, 0.18),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #f8faf8 0%,
            #ffffff 55%,
            #f2f8f4 100%
        );

}


.africartmall-page .africartmall-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.5;

    background-image:

        linear-gradient(
            rgba(17, 17, 17, 0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(17, 17, 17, 0.025) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

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

}


.africartmall-page .africartmall-hero-grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: center;

    gap:
        clamp(50px, 8vw, 120px);

}


.africartmall-page .africartmall-hero-content {

    max-width: 700px;

}


.africartmall-page .project-eyebrow {

    display: inline-block;

    margin-bottom: 22px;

    color:
        var(--africart-green-dark);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}


.africartmall-page .africartmall-hero-title {

    margin: 0;

    color:
        var(--africart-black);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(4rem, 8vw, 8.5rem);

    font-weight: 800;

    letter-spacing: -0.085em;

    line-height: 0.9;

}


.africartmall-page .africartmall-hero-title span {

    display: block;

    margin-top: 24px;

    color:
        var(--africart-green-dark);

    font-size:
        clamp(1.5rem, 2.7vw, 2.8rem);

    font-weight: 600;

    letter-spacing: -0.05em;

    line-height: 1.1;

}


.africartmall-page .africartmall-hero-title em {

    color:
        var(--africart-red);

    font-style: normal;

}


.africartmall-page .africartmall-hero-lead {

    max-width: 650px;

    margin:
        35px 0 0;

    color:
        var(--africart-black);

    font-size:
        clamp(1.2rem, 1.7vw, 1.55rem);

    font-weight: 500;

    line-height: 1.55;

}


.africartmall-page .africartmall-hero-description {

    max-width: 610px;

    margin:
        20px 0 0;

    color:
        var(--africart-muted);

    line-height: 1.8;

}


.africartmall-page .africartmall-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 35px;

}


.africartmall-page .africartmall-hero-actions .btn {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding-inline: 25px;

}


/* =========================================================
   04. VERTICAL MOBILE APP HERO
========================================================= */

.africartmall-page .africartmall-hero-visual {

    position: relative;

    min-height: 680px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.africartmall-page .africartmall-device-glow {

    position: absolute;

    width: 380px;

    height: 500px;

    border-radius: 50%;

    background:
        rgba(91, 183, 128, 0.20);

    filter:
        blur(60px);

}


.africartmall-page .africartmall-phone-frame {

    position: relative;

    z-index: 2;

    width:
        clamp(270px, 25vw, 360px);

    height:
        clamp(560px, 48vw, 700px);

    padding: 10px;

    border:
        7px solid #171717;

    border-radius:
        42px;

    background:
        #111111;

    box-shadow:
        0 40px 100px
        rgba(17, 17, 17, 0.25);

    transform:
        rotate(3deg);

    transition:
        transform var(--africart-transition);

}


.africartmall-page .africartmall-phone-frame:hover {

    transform:
        rotate(0deg)
        translateY(-10px);

}


.africartmall-page .africartmall-phone-notch {

    position: absolute;

    z-index: 5;

    top: 10px;

    left: 50%;

    width: 100px;

    height: 24px;

    transform:
        translateX(-50%);

    border-radius:
        0 0 15px 15px;

    background:
        #111111;

}


.africartmall-page .africartmall-phone-screen {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

    border-radius:
        32px;

    background:
        var(--africart-off-white);

}


.africartmall-page .africartmall-hero-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}


.africartmall-page .africartmall-floating-card {

    position: absolute;

    z-index: 4;

    display: flex;

    flex-direction: column;

    gap: 5px;

    padding: 18px 20px;

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

    border-radius:
        16px;

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

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

    backdrop-filter:
        blur(15px);

}


.africartmall-page .africartmall-floating-card span {

    color:
        var(--africart-green-dark);

    font-size: 0.7rem;

    font-weight: 700;

    text-transform: uppercase;

}


.africartmall-page .africartmall-floating-card strong {

    color:
        var(--africart-black);

    font-size: 0.9rem;

}


.africartmall-page .africartmall-floating-card.card-one {

    top: 18%;

    left: 0;

}


.africartmall-page .africartmall-floating-card.card-two {

    right: 0;

    bottom: 18%;

}


/* =========================================================
   05. SNAPSHOT
========================================================= */

.africartmall-page .africartmall-snapshot {

    background:
        var(--africart-white);

}


.africartmall-page .africartmall-snapshot-grid {

    display: grid;

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

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

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

}


.africartmall-page .africartmall-meta-card {

    min-height: 175px;

    padding: 30px;

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

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

    transition:
        background var(--africart-transition),
        transform var(--africart-transition);

}


.africartmall-page .africartmall-meta-card:hover {

    background:
        var(--africart-green-soft);

    transform:
        translateY(-4px);

}


.africartmall-page .africartmall-meta-card span {

    display: block;

    margin-bottom: 20px;

    color:
        var(--africart-muted);

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


.africartmall-page .africartmall-meta-card h3 {

    margin: 0;

    color:
        var(--africart-black);

    font-size: 1.15rem;

    line-height: 1.4;

}


/* =========================================================
   06. SPLIT LAYOUT
========================================================= */

.africartmall-page .africartmall-split-layout {

    display: grid;

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

    gap:
        clamp(50px, 9vw, 150px);

    align-items: start;

}


.africartmall-page .africartmall-section-intro {

    position: sticky;

    top: 120px;

}


.africartmall-page .africartmall-section-copy {

    max-width: 680px;

}


.africartmall-page .africartmall-section-copy p {

    margin:
        0 0 24px;

    color:
        var(--africart-text);

    font-size:
        clamp(1.05rem, 1.3vw, 1.25rem);

    line-height: 1.85;

}


/* =========================================================
   07. OPPORTUNITY
========================================================= */

.africartmall-page .africartmall-opportunity {

    background:
        var(--africart-off-white);

}


.africartmall-page .africartmall-data-grid {

    display: grid;

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

    gap: 18px;

}


.africartmall-page .africartmall-data-card {

    min-height: 330px;

    display: flex;

    flex-direction: column;

    padding: 36px;

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

    border-radius:
        var(--africart-radius-md);

    background:
        var(--africart-white);

    box-shadow:
        var(--africart-shadow-sm);

    transition:
        transform var(--africart-transition),
        box-shadow var(--africart-transition);

}


.africartmall-page .africartmall-data-card:hover {

    transform:
        translateY(-8px);

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

}


.africartmall-page .africartmall-data-card strong {

    color:
        var(--africart-green-dark);

    font-size:
        clamp(2.5rem, 4vw, 4.5rem);

    letter-spacing: -0.07em;

}


.africartmall-page .africartmall-data-card p {

    margin:
        25px 0;

    color:
        var(--africart-text);

    line-height: 1.7;

}


.africartmall-page .source-link {

    margin-top: auto;

    color:
        var(--africart-green-dark);

    font-size: 0.8rem;

    font-weight: 700;

}


/* =========================================================
   08. PROBLEM
========================================================= */

.africartmall-page .africartmall-problem {

    background:
        var(--africart-white);

}


.africartmall-page .africartmall-pain-points-grid {

    display: grid;

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

    gap: 18px;

}


.africartmall-page .africartmall-pain-point {

    min-height: 330px;

    padding: 32px;

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

    border-radius:
        var(--africart-radius-md);

    background:
        var(--africart-white);

    transition:
        transform var(--africart-transition),
        border-color var(--africart-transition),
        background var(--africart-transition);

}


.africartmall-page .africartmall-pain-point:hover {

    transform:
        translateY(-8px);

    border-color:
        var(--africart-green-border);

    background:
        var(--africart-green-soft);

}


.africartmall-page .africartmall-pain-point > span {

    color:
        var(--africart-green-dark);

    font-size: 0.75rem;

    font-weight: 700;

}


.africartmall-page .africartmall-pain-point h3 {

    margin:
        70px 0 18px;

    color:
        var(--africart-black);

    font-size: 1.25rem;

}


.africartmall-page .africartmall-pain-point p {

    margin: 0;

    color:
        var(--africart-muted);

    line-height: 1.75;

}


/* =========================================================
   09. POSITIONING
========================================================= */

.africartmall-page .africartmall-positioning {

    background:
        var(--africart-off-white);

}


.africartmall-page .africartmall-feature-grid {

    display: grid;

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

    gap:
        clamp(50px, 8vw, 120px);

    align-items: center;

}


.africartmall-page .africartmall-feature-image {

    overflow: hidden;

    border-radius:
        var(--africart-radius-xl);

    box-shadow:
        var(--africart-shadow-lg);

}


.africartmall-page .africartmall-feature-image img {

    width: 100%;

    min-height: 550px;

    object-fit: cover;

}


.africartmall-page .africartmall-feature-content > p {

    color:
        var(--africart-muted);

    line-height: 1.8;

}


.africartmall-page .africartmall-principles {

    margin-top: 40px;

}


.africartmall-page .africartmall-principles > div {

    display: flex;

    flex-direction: column;

    gap: 5px;

    padding:
        20px 0;

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

}


.africartmall-page .africartmall-principles strong {

    color:
        var(--africart-black);

}


.africartmall-page .africartmall-principles span {

    color:
        var(--africart-muted);

    line-height: 1.6;

}


/* =========================================================
   10. ECOSYSTEM
========================================================= */

.africartmall-page .africartmall-ecosystem {

    background:
        var(--africart-white);

}


.africartmall-page .africartmall-ecosystem-flow {

    display: flex;

    align-items: center;

    gap: 12px;

    overflow-x: auto;

    padding:
        20px 5px 30px;

}


.africartmall-page .ecosystem-node {

    min-width: 210px;

    min-height: 230px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 30px;

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

    border-radius:
        var(--africart-radius-md);

    background:
        var(--africart-off-white);

}


.africartmall-page .ecosystem-node.active {

    color:
        var(--africart-white);

    border-color:
        var(--africart-green);

    background:
        var(--africart-green);

    box-shadow:
        0 20px 50px
        rgba(91, 183, 128, 0.22);

}


.africartmall-page .ecosystem-node span {

    margin-bottom: 30px;

    font-size: 0.7rem;

    font-weight: 700;

}


.africartmall-page .ecosystem-node strong {

    font-size: 1.3rem;

}


.africartmall-page .ecosystem-node p {

    margin:
        10px 0 0;

    color:
        var(--africart-muted);

    line-height: 1.6;

}


.africartmall-page .ecosystem-node.active p {

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

}


.africartmall-page .ecosystem-connector {

    flex-shrink: 0;

    color:
        var(--africart-green-dark);

    font-size: 1.5rem;

}


.africartmall-page .africartmall-disclaimer {

    margin-top: 35px;

    padding: 20px 25px;

    border-left:
        3px solid var(--africart-green);

    background:
        var(--africart-green-soft);

    color:
        var(--africart-text);

    line-height: 1.7;

}


/* =========================================================
   11. JOURNEYS
========================================================= */

.africartmall-page .africartmall-journeys {

    background:
        var(--africart-off-white);

}


.africartmall-page .africartmall-journey {

    padding-block:
        55px;

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

}


.africartmall-page .africartmall-journey:last-child {

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

}


.africartmall-page .africartmall-journey-heading {

    display: grid;

    grid-template-columns:
        0.3fr 0.8fr 1fr;

    gap: 30px;

    align-items: center;

    margin-bottom: 45px;

}


.africartmall-page .africartmall-journey-heading > span {

    color:
        var(--africart-green-dark);

    font-size: 0.75rem;

    font-weight: 700;

    text-transform: uppercase;

}


.africartmall-page .africartmall-journey-heading h3 {

    margin: 0;

    font-size:
        clamp(1.5rem, 2.5vw, 2.4rem);

    letter-spacing: -0.04em;

}


.africartmall-page .africartmall-journey-heading p {

    margin: 0;

    color:
        var(--africart-muted);

    line-height: 1.7;

}


.africartmall-page .africartmall-journey-steps {

    display: grid;

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

    gap: 8px;

}


.africartmall-page .africartmall-journey-steps > div {

    min-height: 135px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 20px;

    background:
        var(--africart-white);

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

    transition:
        transform var(--africart-transition),
        background var(--africart-transition);

}


.africartmall-page .africartmall-journey-steps > div:hover {

    transform:
        translateY(-5px);

    background:
        var(--africart-green-soft);

}


.africartmall-page .africartmall-journey-steps span {

    color:
        var(--africart-green-dark);

    font-size: 0.7rem;

    font-weight: 700;

}


.africartmall-page .africartmall-journey-steps strong {

    font-size: 0.9rem;

    line-height: 1.35;

}


/* =========================================================
   12. TRUST
========================================================= */

.africartmall-page .africartmall-trust {

    background:
        var(--africart-dark);

}


.africartmall-page .africartmall-trust .section-title {

    color:
        var(--africart-white);

}


.africartmall-page .africartmall-trust .section-label {

    color:
        var(--africart-green);

}


.africartmall-page .africartmall-trust-grid {

    display: grid;

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

}


.africartmall-page .africartmall-trust-grid article {

    padding:
        35px;

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

}


.africartmall-page .africartmall-trust-grid span {

    color:
        var(--africart-green);

    font-size: 0.75rem;

    font-weight: 700;

}


.africartmall-page .africartmall-trust-grid h3 {

    margin:
        45px 0 15px;

    color:
        var(--africart-white);

}


.africartmall-page .africartmall-trust-grid p {

    margin: 0;

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

    line-height: 1.7;

}


/* =========================================================
   13. BUSINESS MODEL
========================================================= */

.africartmall-page .africartmall-business-model {

    background:
        var(--africart-white);

}


.africartmall-page .africartmall-business-grid {

    display: grid;

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

    gap: 18px;

}


.africartmall-page .africartmall-business-grid article {

    min-height: 300px;

    padding: 32px;

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

    border-radius:
        var(--africart-radius-md);

}


.africartmall-page .africartmall-business-grid span {

    color:
        var(--africart-green-dark);

    font-weight: 700;

}


.africartmall-page .africartmall-business-grid h3 {

    margin:
        65px 0 18px;

}


.africartmall-page .africartmall-business-grid p {

    margin: 0;

    color:
        var(--africart-muted);

    line-height: 1.7;

}


/* =========================================================
   14. COMPETITIVE POSITIONING
========================================================= */

.africartmall-page .africartmall-positioning-dark {

    background:
        var(--africart-dark);

}


.africartmall-page .africartmall-positioning-dark .section-title {

    color:
        var(--africart-white);

}


.africartmall-page .africartmall-positioning-dark .section-label {

    color:
        var(--africart-green);

}


.africartmall-page .africartmall-positioning-dark .section-description {

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

}


.africartmall-page .africartmall-comparison {

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

}


.africartmall-page .comparison-row {

    display: grid;

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

    gap: 30px;

    padding:
        25px 0;

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

}


.africartmall-page .comparison-row span {

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

}


.africartmall-page .comparison-row strong {

    color:
        var(--africart-green);

}


.africartmall-page .comparison-row.header span {

    color:
        var(--africart-white);

    font-size: 0.75rem;

    font-weight: 700;

    text-transform: uppercase;

}


/* =========================================================
   15. INVESTMENT
========================================================= */

.africartmall-page .africartmall-investment {

    background:
        var(--africart-off-white);

}


.africartmall-page .africartmall-investment-card {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        clamp(50px, 8vw, 120px);

    padding:
        clamp(40px, 7vw, 90px);

    border-radius:
        var(--africart-radius-xl);

    background:
        var(--africart-black);

}


.africartmall-page .africartmall-investment-card h2 {

    margin: 0;

    color:
        var(--africart-white);

    font-size:
        clamp(2.5rem, 5vw, 5rem);

    letter-spacing: -0.06em;

    line-height: 1;

}


.africartmall-page .africartmall-investment-card p {

    margin:
        0 0 22px;

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

    line-height: 1.8;

}


.africartmall-page .investment-note {

    padding-top: 20px;

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

    color:
        var(--africart-green) !important;

}


/* =========================================================
   16. SHOWCASE
========================================================= */

.africartmall-page .africartmall-showcase {

    background:
        var(--africart-white);

}


.africartmall-page .africartmall-showcase-frame {

    position: relative;

    min-height: 600px;

    overflow: hidden;

    border-radius:
        var(--africart-radius-xl);

    background:
        var(--africart-dark);

}


.africartmall-page .africartmall-showcase-frame img {

    width: 100%;

    height: 600px;

    object-fit: cover;

    opacity: 0.6;

    transition:
        transform 0.8s
        cubic-bezier(0.22, 1, 0.36, 1);

}


.africartmall-page .africartmall-showcase-frame:hover img {

    transform:
        scale(1.04);

}


.africartmall-page .showcase-overlay {

    position: absolute;

    right: 40px;

    bottom: 40px;

    max-width: 500px;

    padding: 30px;

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

    border-radius:
        var(--africart-radius-md);

    background:
        rgba(17, 17, 17, 0.70);

    backdrop-filter:
        blur(15px);

}


.africartmall-page .showcase-overlay span {

    color:
        var(--africart-green);

    font-size: 0.75rem;

    font-weight: 700;

    text-transform: uppercase;

}


.africartmall-page .showcase-overlay p {

    margin:
        12px 0 0;

    color:
        var(--africart-white);

    line-height: 1.7;

}


/* =========================================================
   17. ROADMAP
========================================================= */

.africartmall-page .africartmall-roadmap {

    background:
        var(--africart-off-white);

}


.africartmall-page .africartmall-roadmap-grid {

    display: grid;

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

    gap: 18px;

}


.africartmall-page .africartmall-roadmap-grid article {

    min-height: 320px;

    padding: 32px;

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

    background:
        var(--africart-white);

}


.africartmall-page .africartmall-roadmap-grid span {

    color:
        var(--africart-green-dark);

    font-size: 0.75rem;

    font-weight: 700;

}


.africartmall-page .africartmall-roadmap-grid h3 {

    margin:
        70px 0 18px;

    font-size: 1.5rem;

}


.africartmall-page .africartmall-roadmap-grid p {

    margin: 0;

    color:
        var(--africart-muted);

    line-height: 1.7;

}


/* =========================================================
   18. DEMO
========================================================= */

.africartmall-page .africartmall-demo {

    text-align: center;

    background:
        var(--africart-green);

}


.africartmall-page .africartmall-demo-content {

    max-width: 800px;

    margin-inline: auto;

}


.africartmall-page .africartmall-demo .section-label {

    color:
        var(--africart-white);

}


.africartmall-page .africartmall-demo .section-label::before {

    background:
        var(--africart-white);

}


.africartmall-page .africartmall-demo .section-title {

    color:
        var(--africart-white);

}


.africartmall-page .africartmall-demo p {

    max-width: 600px;

    margin:
        25px auto 0;

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

    line-height: 1.8;

}


.africartmall-page .africartmall-demo .btn {

    margin-top: 32px;

}


.africartmall-page .project-demo-button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

}


.africartmall-page .demo-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background:
        var(--africart-green-soft);

}


/* =========================================================
   19. STATUS
========================================================= */

.africartmall-page .africartmall-status {

    background:
        var(--africart-white);

}


.africartmall-page .africartmall-status-card {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        clamp(40px, 8vw, 120px);

    padding:
        clamp(40px, 7vw, 85px);

    border-radius:
        var(--africart-radius-xl);

    background:
        var(--africart-dark);

}


.africartmall-page .africartmall-status-card h2 {

    margin: 0;

    color:
        var(--africart-white);

    font-size:
        clamp(2.3rem, 4.5vw, 4.5rem);

    letter-spacing: -0.06em;

    line-height: 1.02;

}


.africartmall-page .africartmall-status-card p {

    margin:
        0 0 22px;

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

    line-height: 1.8;

}


/* =========================================================
   20. REFERENCES
========================================================= */

.africartmall-page .africartmall-reference-list {

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

}


.africartmall-page .africartmall-reference-list a {

    display: grid;

    grid-template-columns:
        0.7fr 1fr auto;

    align-items: center;

    gap: 30px;

    padding:
        28px 0;

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

    transition:
        padding var(--africart-transition),
        background var(--africart-transition);

}


.africartmall-page .africartmall-reference-list a:hover {

    padding-inline:
        18px;

    background:
        var(--africart-green-soft);

}


.africartmall-page .africartmall-reference-list a span:first-child {

    color:
        var(--africart-muted);

    font-size: 0.8rem;

    font-weight: 600;

}


.africartmall-page .africartmall-reference-list strong {

    color:
        var(--africart-black);

}


.africartmall-page .africartmall-reference-list a span:last-child {

    color:
        var(--africart-green-dark);

    font-size: 1.3rem;

}


/* =========================================================
   21. NEXT PROJECT
========================================================= */

.africartmall-page .africartmall-next-project {

    padding-block:
        40px 100px;

    background:
        var(--africart-white);

}


.africartmall-page .next-project-card {

    min-height: 330px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

    padding:
        clamp(35px, 5vw, 70px);

    border-radius:
        var(--africart-radius-xl);

    background:
        var(--africart-black);

    color:
        var(--africart-white);

    transition:
        transform var(--africart-transition);

}


.africartmall-page .next-project-card:hover {

    transform:
        translateY(-8px);

}


.africartmall-page .next-project-card .section-label {

    color:
        var(--africart-green);

}


.africartmall-page .next-project-card h2 {

    margin:
        15px 0 8px;

    color:
        var(--africart-white);

    font-size:
        clamp(2.5rem, 6vw, 6rem);

    letter-spacing: -0.07em;

}


.africartmall-page .next-project-card p {

    margin: 0;

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

}


.africartmall-page .next-project-arrow {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

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

    border-radius: 50%;

    color:
        var(--africart-green);

    font-size: 1.8rem;

    transition:
        transform var(--africart-transition),
        background var(--africart-transition);

}


.africartmall-page .next-project-card:hover
.next-project-arrow {

    transform:
        translateX(8px);

    background:
        rgba(91, 183, 128, 0.12);

}


/* =========================================================
   22. TABLET
========================================================= */

@media (max-width: 1100px) {


    .africartmall-page .africartmall-hero-grid {

        grid-template-columns:
            1fr 0.8fr;

        gap: 50px;

    }


    .africartmall-page .africartmall-pain-points-grid {

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

    }


    .africartmall-page .africartmall-business-grid,
    .africartmall-page .africartmall-roadmap-grid {

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

    }


    .africartmall-page .africartmall-journey-heading {

        grid-template-columns:
            1fr 1fr;

    }


    .africartmall-page .africartmall-journey-heading p {

        grid-column:
            2;

    }


    .africartmall-page .africartmall-journey-steps {

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

    }

}


/* =========================================================
   23. TABLET / MOBILE
========================================================= */

@media (max-width: 850px) {


    .africartmall-page .container {

        width:
            min(
                calc(100% - 36px),
                720px
            );

    }


    .africartmall-page .section {

        padding-block:
            80px;

    }


    .africartmall-page .africartmall-hero {

        min-height:
            auto;

    }


    .africartmall-page .africartmall-hero-grid {

        grid-template-columns:
            1fr;

    }


    .africartmall-page .africartmall-hero-visual {

        min-height:
            650px;

    }


    .africartmall-page .africartmall-snapshot-grid {

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

    }


    .africartmall-page .africartmall-split-layout {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .africartmall-page .africartmall-section-intro {

        position:
            static;

    }


    .africartmall-page .africartmall-feature-grid {

        grid-template-columns:
            1fr;

    }


    .africartmall-page .africartmall-trust-grid {

        grid-template-columns:
            1fr;

    }


    .africartmall-page .africartmall-investment-card,
    .africartmall-page .africartmall-status-card {

        grid-template-columns:
            1fr;

    }


    .africartmall-page .africartmall-reference-list a {

        grid-template-columns:
            1fr auto;

    }


    .africartmall-page .africartmall-reference-list strong {

        grid-column:
            1 / -1;

        grid-row:
            2;

    }

}


/* =========================================================
   24. MOBILE
========================================================= */

@media (max-width: 600px) {


    .africartmall-page .container {

        width:
            calc(100% - 28px);

    }


    .africartmall-page .section {

        padding-block:
            65px;

    }


    .africartmall-page .africartmall-hero {

        padding-block:
            65px 80px;

    }


    .africartmall-page .africartmall-hero-title {

        font-size:
            clamp(3.5rem, 18vw, 5.5rem);

    }


    .africartmall-page .africartmall-hero-actions {

        flex-direction:
            column;

    }


    .africartmall-page .africartmall-hero-actions .btn {

        width:
            100%;

    }


    .africartmall-page .africartmall-hero-visual {

        min-height:
            600px;

    }


    .africartmall-page .africartmall-phone-frame {

        width:
            270px;

        height:
            550px;

    }


    .africartmall-page .africartmall-floating-card {

        padding:
            14px 16px;

    }


    .africartmall-page .africartmall-floating-card.card-one {

        left:
            -5px;

    }


    .africartmall-page .africartmall-floating-card.card-two {

        right:
            -5px;

    }


    .africartmall-page .africartmall-snapshot-grid {

        grid-template-columns:
            1fr;

    }


    .africartmall-page .africartmall-pain-points-grid,
    .africartmall-page .africartmall-business-grid,
    .africartmall-page .africartmall-roadmap-grid {

        grid-template-columns:
            1fr;

    }


    .africartmall-page .africartmall-feature-image img {

        min-height:
            350px;

    }


    .africartmall-page .africartmall-ecosystem-flow {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .africartmall-page .ecosystem-node {

        width:
            100%;

        min-width:
            0;

    }


    .africartmall-page .ecosystem-connector {

        text-align:
            center;

        transform:
            rotate(90deg);

    }


    .africartmall-page .africartmall-journey-heading {

        display:
            block;

    }


    .africartmall-page .africartmall-journey-heading h3 {

        margin:
            15px 0;

    }


    .africartmall-page .africartmall-journey-steps {

        grid-template-columns:
            1fr;

    }


    .africartmall-page .africartmall-journey-steps > div {

        min-height:
            105px;

    }


    .africartmall-page .africartmall-showcase-frame {

        min-height:
            420px;

    }


    .africartmall-page .africartmall-showcase-frame img {

        height:
            420px;

    }


    .africartmall-page .showcase-overlay {

        right:
            15px;

        bottom:
            15px;

        left:
            15px;

        padding:
            22px;

    }


    .africartmall-page .comparison-row {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }


    .africartmall-page .africartmall-investment-card,
    .africartmall-page .africartmall-status-card {

        padding:
            32px 24px;

        border-radius:
            var(--africart-radius-lg);

    }


    .africartmall-page .next-project-card {

        min-height:
            280px;

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .africartmall-page .next-project-arrow {

        width:
            56px;

        height:
            56px;

    }

}


/* =========================================================
   25. REDUCED MOTION
========================================================= */

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


    .africartmall-page *,
    .africartmall-page *::before,
    .africartmall-page *::after {

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

    }

}


/* =========================================================
   AFRICARTMALL — RESEARCH & REFERENCES
   Admith Legacy Ltd

   Scope:
   All styles intentionally scoped to .africartmall-page

   Purpose:
   - Research-backed market context
   - Concise research summaries
   - Strategic opportunity insights
   - Supply-chain ecosystem positioning
   - External references
   - Responsive behavior

   ========================================================= */


/* =========================================================
   01. RESEARCH SECTION
   ========================================================= */

.africartmall-page .africartmall-research {

    position: relative;

    background:
        var(--africartmall-white, #ffffff);

}


/* =========================================================
   02. SECTION TITLE ACCENT
   ========================================================= */

.africartmall-page
.africartmall-research
.section-title
span {

    display: block;

    color:
        var(
            --africartmall-green-dark,
            #3f9566
        );

}


/* =========================================================
   03. RESEARCH GRID
   ========================================================= */

.africartmall-page
.africartmall-research-grid {

    display: grid;

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

    gap:
        18px;

    margin-top:
        clamp(
            50px,
            7vw,
            90px
        );

}


/* =========================================================
   04. RESEARCH CARD
   ========================================================= */

.africartmall-page
.africartmall-research-card {

    position: relative;

    display: grid;

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

    gap:
        30px;

    min-height:
        440px;

    padding:
        clamp(
            30px,
            4vw,
            48px
        );

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            17,
            17,
            17,
            0.09
        );

    border-radius:
        24px;

    background:
        #ffffff;

    box-shadow:
        0 12px 40px
        rgba(
            17,
            17,
            17,
            0.045
        );

    transition:
        transform
        0.35s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),

        box-shadow
        0.35s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),

        border-color
        0.35s
        ease;

}


/* =========================================================
   05. CARD DECORATIVE ELEMENT
   ========================================================= */

.africartmall-page
.africartmall-research-card::after {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    right:
        -90px;

    bottom:
        -90px;

    border-radius:
        50%;

    background:
        rgba(
            91,
            183,
            128,
            0.08
        );

    pointer-events:
        none;

    transition:
        transform
        0.5s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.africartmall-page
.africartmall-research-card:hover {

    transform:
        translateY(
            -7px
        );

    border-color:
        rgba(
            91,
            183,
            128,
            0.30
        );

    box-shadow:
        0 25px 70px
        rgba(
            17,
            17,
            17,
            0.10
        );

}


.africartmall-page
.africartmall-research-card:hover::after {

    transform:
        scale(
            1.8
        );

}


/* =========================================================
   06. RESEARCH NUMBER
   ========================================================= */

.africartmall-page
.research-number {

    position:
        relative;

    z-index:
        1;

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            91,
            183,
            128,
            0.30
        );

    border-radius:
        50%;

    color:
        var(
            --africartmall-green-dark,
            #3f9566
        );

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

}


/* =========================================================
   07. RESEARCH CONTENT
   ========================================================= */

.africartmall-page
.research-card-content {

    position:
        relative;

    z-index:
        1;

}


.africartmall-page
.research-card-content
h3 {

    margin:
        0 0 22px;

    color:
        var(
            --africartmall-black,
            #111111
        );

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            1.45rem,
            2vw,
            2rem
        );

    font-weight:
        700;

    letter-spacing:
        -0.045em;

    line-height:
        1.12;

}


.africartmall-page
.research-card-content
p {

    margin:
        0 0 18px;

    color:
        var(
            --africartmall-muted,
            #707070
        );

    font-size:
        0.98rem;

    line-height:
        1.8;

}


/* =========================================================
   08. SOURCE LINK
   ========================================================= */

.africartmall-page
.research-source {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    width:
        fit-content;

    margin-top:
        16px;

    color:
        var(
            --africartmall-green-dark,
            #3f9566
        );

    font-size:
        0.78rem;

    font-weight:
        700;

    line-height:
        1.5;

    transition:
        color
        0.3s
        ease,

        transform
        0.3s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.africartmall-page
.research-source:hover {

    color:
        var(
            --africartmall-red,
            #961414
        );

    transform:
        translateX(
            4px
        );

}


/* =========================================================
   09. ECOSYSTEM FLOW
   ========================================================= */

.africartmall-page
.research-ecosystem-flow {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        28px;

}


.africartmall-page
.research-ecosystem-flow
span {

    padding:
        8px 12px;

    border:
        1px solid
        rgba(
            91,
            183,
            128,
            0.20
        );

    border-radius:
        999px;

    background:
        rgba(
            91,
            183,
            128,
            0.07
        );

    color:
        var(
            --africartmall-green-dark,
            #3f9566
        );

    font-size:
        0.72rem;

    font-weight:
        700;

}


.africartmall-page
.research-ecosystem-flow
strong {

    color:
        rgba(
            17,
            17,
            17,
            0.35
        );

    font-size:
        0.75rem;

}


/* =========================================================
   10. FEATURED STRATEGIC CARD
   ========================================================= */

.africartmall-page
.africartmall-research-card
.research-card-featured {

    grid-column:
        1 / -1;

    min-height:
        auto;

    background:
        var(
            --africartmall-black,
            #111111
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.africartmall-page
.research-card-featured
.research-number {

    color:
        var(
            --africartmall-green,
            #5bb780
        );

    border-color:
        rgba(
            91,
            183,
            128,
            0.35
        );

}


.africartmall-page
.research-card-featured
.research-card-content
h3 {

    color:
        #ffffff;

}


.africartmall-page
.research-card-featured
.research-card-content
p {

    max-width:
        850px;

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

}


.africartmall-page
.research-card-featured
blockquote {

    max-width:
        900px;

    margin:
        35px 0;

    padding-left:
        25px;

    border-left:
        3px solid
        var(
            --africartmall-green,
            #5bb780
        );

    color:
        #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            1.3rem,
            2.5vw,
            2.4rem
        );

    font-weight:
        600;

    letter-spacing:
        -0.035em;

    line-height:
        1.3;

}


.africartmall-page
.research-card-featured
.research-strategy-statement {

    color:
        var(
            --africartmall-green,
            #5bb780
        ) !important;

    font-weight:
        700;

}


/* =========================================================
   11. SELECTED REFERENCES SECTION
   ========================================================= */

.africartmall-page
.africartmall-reference-section {

    margin-top:
        clamp(
            100px,
            12vw,
            170px
        );

}


.africartmall-page
.africartmall-reference-section
.section-heading {

    margin-bottom:
        50px;

}


.africartmall-page
.africartmall-reference-section
.section-title {

    font-size:
        clamp(
            2rem,
            4vw,
            4rem
        );

}


/* =========================================================
   12. REFERENCE LIST
   ========================================================= */

.africartmall-page
.africartmall-reference-list {

    border-top:
        1px solid
        rgba(
            17,
            17,
            17,
            0.10
        );

}


.africartmall-page
.africartmall-reference-item {

    display:
        grid;

    grid-template-columns:
        0.6fr 1.3fr auto;

    align-items:
        center;

    gap:
        30px;

    padding:
        26px 0;

    border-bottom:
        1px solid
        rgba(
            17,
            17,
            17,
            0.10
        );

    color:
        var(
            --africartmall-black,
            #111111
        );

    transition:
        padding
        0.35s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),

        background
        0.35s
        ease;

}


.africartmall-page
.africartmall-reference-item:hover {

    padding-inline:
        18px;

    background:
        rgba(
            91,
            183,
            128,
            0.06
        );

}


.africartmall-page
.africartmall-reference-item
> span:first-child {

    color:
        var(
            --africartmall-muted,
            #707070
        );

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.africartmall-page
.africartmall-reference-item
strong {

    font-size:
        1rem;

    font-weight:
        600;

}


.africartmall-page
.africartmall-reference-item
> span:last-child {

    color:
        var(
            --africartmall-green-dark,
            #3f9566
        );

    font-size:
        1.25rem;

    transition:
        transform
        0.3s
        ease;

}


/* FIXED SELECTOR */

.africartmall-page
.africartmall-reference-item:hover
> span:last-child {

    transform:
        translate(
            4px,
            -4px
        );

}


/* =========================================================
   13. RESEARCH NOTE
   ========================================================= */

.africartmall-page
.africartmall-research-note {

    display:
        grid;

    grid-template-columns:
        0.35fr 1fr;

    gap:
        50px;

    margin-top:
        80px;

    padding:
        35px 0;

    border-top:
        1px solid
        rgba(
            17,
            17,
            17,
            0.10
        );

}


.africartmall-page
.research-note-label {

    color:
        var(
            --africartmall-green-dark,
            #3f9566
        );

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.africartmall-page
.africartmall-research-note
p {

    max-width:
        800px;

    margin:
        0;

    color:
        var(
            --africartmall-muted,
            #707070
        );

    font-size:
        0.92rem;

    line-height:
        1.8;

}


/* =========================================================
   14. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 900px) {


    .africartmall-page
    .africartmall-research-grid {

        grid-template-columns:
            1fr;

    }


    .africartmall-page
    .africartmall-research-card
    .research-card-featured {

        grid-column:
            auto;

    }


    .africartmall-page
    .africartmall-research-note {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


}


/* =========================================================
   15. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 600px) {


    .africartmall-page
    .africartmall-research-card {

        grid-template-columns:
            1fr;

        gap:
            22px;

        min-height:
            auto;

        padding:
            28px 24px;

    }


    .africartmall-page
    .research-number {

        width:
            42px;

        height:
            42px;

    }


    .africartmall-page
    .research-card-content
    h3 {

        font-size:
            1.4rem;

    }


    .africartmall-page
    .africartmall-reference-item {

        grid-template-columns:
            1fr auto;

        gap:
            10px 20px;

    }


    .africartmall-page
    .africartmall-reference-item
    strong {

        grid-column:
            1 / -1;

        grid-row:
            2;

    }


    .africartmall-page
    .research-ecosystem-flow {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .africartmall-page
    .research-ecosystem-flow
    strong {

        transform:
            rotate(
                90deg
            );

    }


    .africartmall-page
    .research-card-featured
    blockquote {

        margin:
            28px 0;

        padding-left:
            18px;

        font-size:
            1.35rem;

    }


    .africartmall-page
    .africartmall-reference-section {

        margin-top:
            80px;

    }


    .africartmall-page
    .africartmall-research-note {

        margin-top:
            60px;

        padding-top:
            28px;

    }


}


/* =========================================================
   16. ACCESSIBILITY — REDUCED MOTION
   ========================================================= */

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


    .africartmall-page *,
    .africartmall-page *::before,
    .africartmall-page *::after {

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

    }

}

/* =========================================================
   AFRICARTMALL — RESEARCH CARD 10
   DARK / FEATURED VISIBILITY FIX
========================================================= */

.africartmall-page
.africartmall-research-grid
.africartmall-research-card:nth-child(10) {

    position: relative;

    background:
        var(--africartmall-black, #111111);

    color:
        #ffffff;

}


/* Content */

.africartmall-page
.africartmall-research-grid
.africartmall-research-card:nth-child(10)
.research-card-content {

    position: relative;

    z-index: 5;

    opacity:
        1;

    visibility:
        visible;

}


/* Title */

.africartmall-page
.africartmall-research-grid
.africartmall-research-card:nth-child(10)
.research-card-content h3 {

    color:
        #ffffff;

    opacity:
        1;

    visibility:
        visible;

}


/* Paragraph */

.africartmall-page
.africartmall-research-grid
.africartmall-research-card:nth-child(10)
.research-card-content p {

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

    opacity:
        1;

    visibility:
        visible;

}


/* Source */

.africartmall-page
.africartmall-research-grid
.africartmall-research-card:nth-child(10)
.research-source {

    color:
        var(--africartmall-green, #5bb780);

    opacity:
        1;

    visibility:
        visible;

}


/* Number */

.africartmall-page
.africartmall-research-grid
.africartmall-research-card:nth-child(10)
.research-number {

    color:
        var(--africartmall-green, #5bb780);

    border-color:
        rgba(91, 183, 128, 0.35);

}