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

   Scope:
   All styles are intentionally scoped to .nnobae-page
   to prevent conflicts with:
   - Homepage
   - Services
   - Projects
   - About
   - Contact
   - Other project pages

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


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

.nnobae-page {

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

    --nnobae-red: #961414;

    --nnobae-black: #111111;
    --nnobae-dark: #1a1a1a;
    --nnobae-text: #383838;
    --nnobae-muted: #707070;

    --nnobae-white: #ffffff;
    --nnobae-off-white: #f7f8f6;
    --nnobae-border: rgba(17, 17, 17, 0.10);

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

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

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

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

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

}


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

.nnobae-page main {

    overflow: hidden;

}


.nnobae-page section {

    position: relative;

}


.nnobae-page img {

    max-width: 100%;

    display: block;

}


.nnobae-page a {

    text-decoration: none;

}


.nnobae-page .section {

    padding-block:
        clamp(70px, 7vw, 110px);

}


.nnobae-page .container {

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

    margin-inline:
        auto;

}


/* =========================================================
   03. SHARED SECTION HEADING
   ========================================================= */

.nnobae-page .section-heading {

    max-width:
        850px;

    margin-bottom:
        clamp(40px, 5vw, 65px);

}


.nnobae-page .section-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        16px;

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

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    line-height:
        1.2;

    text-transform:
        uppercase;

}


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

    content:
        "";

    width:
        28px;

    height:
        2px;

    flex-shrink:
        0;

    background:
        var(--nnobae-green);

}


.nnobae-page .section-title {

    margin:
        0;

    color:
        var(--nnobae-black);

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

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

    font-weight:
        700;

    letter-spacing:
        -0.055em;

    line-height:
        1.04;

}


.nnobae-page .section-description {

    max-width:
        700px;

    margin-top:
        20px;

    color:
        var(--nnobae-muted);

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

    line-height:
        1.75;

}


/* =========================================================
   04. HEADER
   ========================================================= */

.nnobae-page .site-header {

    position:
        relative;

    z-index:
        1000;

}


.nnobae-page .navbar {

    min-height:
        82px;

}


.nnobae-page .nav-links a {

    transition:
        color var(--nnobae-transition);

}


.nnobae-page .nav-links a:hover,
.nnobae-page .nav-links a.active {

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

}


/* =========================================================
   05. HERO
   ========================================================= */

.nnobae-page .nnobae-hero {

    position:
        relative;

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

    display:
        flex;

    align-items:
        center;

    padding-block:
        clamp(60px, 7vw, 100px);

    background:

        radial-gradient(
            circle at 85% 20%,
            rgba(91, 183, 128, 0.14),
            transparent 32%
        ),

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

}


.nnobae-page .nnobae-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background-image:

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

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

    background-size:
        70px 70px;

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

}


.nnobae-page .nnobae-hero-grid {

    position:
        relative;

    z-index:
        1;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 0.75fr);

    align-items:
        center;

    gap:
        clamp(45px, 7vw, 100px);

}


.nnobae-page .nnobae-hero-content {

    max-width:
        650px;

}


.nnobae-page .nnobae-hero-title {

    margin:
        0;

    color:
        var(--nnobae-black);

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

    font-size:
        clamp(3.4rem, 6.5vw, 7rem);

    font-weight:
        800;

    letter-spacing:
        -0.075em;

    line-height:
        0.92;

}


.nnobae-page .nnobae-hero-title span {

    display:
        block;

    max-width:
        620px;

    margin-top:
        22px;

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

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

    font-weight:
        600;

    letter-spacing:
        -0.035em;

    line-height:
        1.2;

}


.nnobae-page .nnobae-hero-description {

    max-width:
        570px;

    margin:
        28px 0 0;

    color:
        var(--nnobae-dark);

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

    font-size:
        clamp(1.1rem, 1.5vw, 1.4rem);

    font-weight:
        500;

    letter-spacing:
        -0.025em;

    line-height:
        1.55;

}


.nnobae-page .nnobae-hero-introduction {

    max-width:
        600px;

    margin:
        18px 0 0;

    color:
        var(--nnobae-muted);

    font-size:
        0.98rem;

    line-height:
        1.8;

}


.nnobae-page .nnobae-hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        30px;

}


.nnobae-page .nnobae-hero-actions .btn {

    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding-inline:
        22px;

}


.nnobae-page .project-demo-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

}


.nnobae-page .demo-icon {

    width:
        28px;

    height:
        28px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    border-radius:
        50%;

    font-size:
        0.65rem;

}


.nnobae-page .secondary-btn .demo-icon {

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

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

}


/* =========================================================
   06. HERO VISUAL
   VERTICAL MOBILE APP SCREENSHOT
   ========================================================= */

.nnobae-page .nnobae-hero-visual {

    position:
        relative;

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.nnobae-page .nnobae-hero-image-wrapper {

    position:
        relative;

    isolation:
        isolate;

    width:
        min(100%, 410px);

    padding:
        10px;

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

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

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

    backdrop-filter:
        blur(10px);

    transform:
        rotate(1.2deg);

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

}


.nnobae-page .nnobae-hero-image-wrapper:hover {

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

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

}


.nnobae-page .nnobae-hero-image-wrapper::before {

    content:
        "";

    position:
        absolute;

    inset:
        -18px;

    z-index:
        -1;

    border-radius:
        inherit;

    background:
        var(--nnobae-green);

    opacity:
        0.12;

    filter:
        blur(30px);

}


/* Actual vertical screenshot */

.nnobae-page .nnobae-hero-image {

    display:
        block;

    width:
        100%;

    height:
        auto;

    min-height:
        0;

    max-height:
        700px;

    object-fit:
        contain;

    object-position:
        center;

    border-radius:
        calc(
            var(--nnobae-radius-xl) - 7px
        );

}


/* =========================================================
   07. SNAPSHOT
   ========================================================= */

.nnobae-page .nnobae-snapshot {

    background:
        var(--nnobae-white);

}


.nnobae-page .nnobae-snapshot-grid {

    display:
        grid;

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

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

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

}


.nnobae-page .nnobae-meta-card {

    min-height:
        160px;

    padding:
        28px;

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

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

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

}


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

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

    transform:
        translateY(-4px);

}


.nnobae-page .nnobae-meta-label {

    display:
        block;

    margin-bottom:
        18px;

    color:
        var(--nnobae-muted);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.nnobae-page .nnobae-meta-card h3 {

    margin:
        0;

    color:
        var(--nnobae-black);

    font-size:
        1.2rem;

    font-weight:
        600;

    letter-spacing:
        -0.025em;

}


/* =========================================================
   08. SPLIT LAYOUT
   ========================================================= */

.nnobae-page .nnobae-split-layout {

    display:
        grid;

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

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

    align-items:
        start;

}


.nnobae-page .nnobae-section-intro {

    position:
        sticky;

    top:
        120px;

}


.nnobae-page .nnobae-section-intro .section-title span {

    display:
        block;

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

}


.nnobae-page .nnobae-section-copy {

    max-width:
        650px;

}


.nnobae-page .nnobae-section-copy p {

    margin:
        0 0 22px;

    color:
        var(--nnobae-text);

    font-size:
        clamp(1.03rem, 1.3vw, 1.2rem);

    line-height:
        1.8;

}


/* =========================================================
   09. OPPORTUNITY
   ========================================================= */

.nnobae-page .nnobae-opportunity {

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

}


.nnobae-page .nnobae-data-grid {

    display:
        grid;

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

    gap:
        16px;

    margin-top:
        60px;

}


.nnobae-page .nnobae-data-card {

    min-height:
        280px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        30px;

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

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

    background:
        var(--nnobae-white);

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

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

}


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

    transform:
        translateY(-7px);

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

}


.nnobae-page .nnobae-data-card strong {

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

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

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

    font-weight:
        700;

    letter-spacing:
        -0.07em;

    line-height:
        1;

}


.nnobae-page .nnobae-data-card p {

    margin:
        22px 0 25px;

    color:
        var(--nnobae-text);

    line-height:
        1.7;

}


.nnobae-page .source-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    width:
        fit-content;

    margin-top:
        auto;

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

    font-size:
        0.8rem;

    font-weight:
        700;

    transition:
        color var(--nnobae-transition);

}


.nnobae-page .source-link:hover {

    color:
        var(--nnobae-red);

}


/* =========================================================
   10. PROBLEM / PAIN POINTS
   ========================================================= */

.nnobae-page .nnobae-problem {

    background:
        var(--nnobae-white);

}


.nnobae-page .nnobae-pain-points-grid {

    display:
        grid;

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

    gap:
        16px;

}


.nnobae-page .nnobae-pain-point {

    position:
        relative;

    min-height:
        320px;

    padding:
        30px;

    overflow:
        hidden;

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

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

    background:
        var(--nnobae-white);

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

}


.nnobae-page .nnobae-pain-point::after {

    content:
        "";

    position:
        absolute;

    width:
        140px;

    height:
        140px;

    right:
        -60px;

    bottom:
        -60px;

    border-radius:
        50%;

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

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

}


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

    transform:
        translateY(-7px);

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

}


.nnobae-page .nnobae-pain-point:hover::after {

    transform:
        scale(1.8);

}


.nnobae-page .pain-point-number {

    display:
        block;

    margin-bottom:
        55px;

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

    font-size:
        0.8rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}


.nnobae-page .nnobae-pain-point h3 {

    margin:
        0 0 16px;

    color:
        var(--nnobae-black);

    font-size:
        1.2rem;

    letter-spacing:
        -0.03em;

}


.nnobae-page .nnobae-pain-point p {

    margin:
        0;

    color:
        var(--nnobae-muted);

    line-height:
        1.7;

}


/* =========================================================
   11. RESEARCH
   ========================================================= */

.nnobae-page .nnobae-research {

    background:
        var(--nnobae-dark);

}


.nnobae-page .nnobae-research .section-title,
.nnobae-page .nnobae-research .section-label {

    color:
        var(--nnobae-white);

}


.nnobae-page .nnobae-research .nnobae-section-copy p {

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

}


.nnobae-page .text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        12px;

    color:
        var(--nnobae-green);

    font-weight:
        700;

}


.nnobae-page .text-link span {

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

}


.nnobae-page .text-link:hover span {

    transform:
        translateX(6px);

}


.nnobae-page .nnobae-research-grid {

    display:
        grid;

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

    gap:
        1px;

    margin-top:
        60px;

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

}


.nnobae-page .nnobae-research-card {

    min-height:
        280px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        30px;

    background:
        var(--nnobae-dark);

}


.nnobae-page .nnobae-research-card strong {

    color:
        var(--nnobae-green);

    font-size:
        clamp(1.9rem, 3vw, 3.2rem);

    letter-spacing:
        -0.05em;

}


.nnobae-page .nnobae-research-card h3 {

    margin:
        50px 0 14px;

    color:
        var(--nnobae-white);

    font-size:
        1.1rem;

}


.nnobae-page .nnobae-research-card p {

    margin:
        0;

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

    line-height:
        1.7;

}


/* =========================================================
   12. FEATURE
   ========================================================= */

.nnobae-page .nnobae-food-loss {

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

}


.nnobae-page .nnobae-feature-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items:
        center;

    gap:
        clamp(45px, 7vw, 100px);

}


.nnobae-page .nnobae-feature-image {

    position:
        relative;

}


.nnobae-page .nnobae-feature-image::before {

    content:
        "";

    position:
        absolute;

    inset:
        18px;

    z-index:
        0;

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

    background:
        var(--nnobae-green);

    opacity:
        0.15;

    transform:
        rotate(-4deg);

}


.nnobae-page .nnobae-feature-image img {

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    height:
        auto;

    max-height:
        560px;

    object-fit:
        cover;

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

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

}


.nnobae-page .nnobae-feature-content .section-title {

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

}


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

    color:
        var(--nnobae-muted);

    line-height:
        1.8;

}


.nnobae-page .nnobae-stat-highlight {

    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    margin-top:
        30px;

    padding:
        22px;

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

    background:
        var(--nnobae-white);

}


.nnobae-page .nnobae-stat-highlight strong {

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

    font-size:
        3.2rem;

    letter-spacing:
        -0.06em;

}


.nnobae-page .nnobae-stat-highlight span {

    color:
        var(--nnobae-text);

    line-height:
        1.6;

}


/* =========================================================
   13. NETWORK
   ========================================================= */

.nnobae-page .nnobae-network {

    background:
        var(--nnobae-white);

}


.nnobae-page .nnobae-network-diagram {

    position:
        relative;

    min-height:
        580px;

    display:
        grid;

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

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

    gap:
        20px;

    align-items:
        center;

}


.nnobae-page .network-node,
.nnobae-page .network-core {

    position:
        relative;

    min-height:
        135px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        22px;

    text-align:
        center;

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

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

    background:
        var(--nnobae-white);

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

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

}


.nnobae-page .network-node:hover {

    transform:
        translateY(-6px);

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

}


.nnobae-page .network-node span,
.nnobae-page .network-core span {

    color:
        var(--nnobae-black);

    font-weight:
        700;

}


.nnobae-page .network-node small,
.nnobae-page .network-core small {

    margin-top:
        7px;

    color:
        var(--nnobae-muted);

}


.nnobae-page .network-core {

    grid-column:
        2;

    grid-row:
        2;

    min-height:
        200px;

    border:
        2px solid var(--nnobae-green);

    border-radius:
        50%;

    background:
        var(--nnobae-green);

    box-shadow:
        0 20px 60px
        rgba(91, 183, 128, 0.28);

}


.nnobae-page .network-core span,
.nnobae-page .network-core small {

    color:
        var(--nnobae-white);

}


.nnobae-page .network-core span {

    font-size:
        1.6rem;

}


.nnobae-page .network-producer {

    grid-column:
        2;

    grid-row:
        1;

}


/* =========================================================
   14. SOLUTION
   ========================================================= */

.nnobae-page .nnobae-solution {

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

}


.nnobae-page .nnobae-capabilities-grid {

    display:
        grid;

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

    gap:
        16px;

    margin-top:
        60px;

}


.nnobae-page .nnobae-capability-card {

    min-height:
        300px;

    padding:
        30px;

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

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

    background:
        var(--nnobae-white);

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

}


.nnobae-page .nnobae-capability-card:hover {

    transform:
        translateY(-7px);

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

}


.nnobae-page .nnobae-capability-card > span {

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

    font-size:
        0.75rem;

    font-weight:
        700;

}


.nnobae-page .nnobae-capability-card h3 {

    margin:
        55px 0 16px;

    font-size:
        1.25rem;

    letter-spacing:
        -0.03em;

}


.nnobae-page .nnobae-capability-card p {

    margin:
        0;

    color:
        var(--nnobae-muted);

    line-height:
        1.7;

}


/* =========================================================
   15. USER JOURNEYS
   ========================================================= */

.nnobae-page .nnobae-journeys {

    background:
        var(--nnobae-white);

}


.nnobae-page .nnobae-journey {

    padding-block:
        50px;

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

}


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

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

}


.nnobae-page .nnobae-journey-heading {

    display:
        grid;

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

    align-items:
        center;

    gap:
        25px;

    margin-bottom:
        40px;

}


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

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

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.nnobae-page .nnobae-journey-heading h3 {

    margin:
        0;

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

    letter-spacing:
        -0.04em;

}


.nnobae-page .nnobae-journey-heading p {

    margin:
        0;

    color:
        var(--nnobae-muted);

    line-height:
        1.6;

}


.nnobae-page .nnobae-journey-steps {

    display:
        grid;

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

    gap:
        7px;

}


.nnobae-page .journey-step {

    min-height:
        135px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        18px;

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

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

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

}


.nnobae-page .journey-step:hover {

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

    transform:
        translateY(-5px);

}


.nnobae-page .journey-step span {

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

    font-size:
        0.7rem;

    font-weight:
        700;

}


.nnobae-page .journey-step strong {

    color:
        var(--nnobae-black);

    font-size:
        0.88rem;

    line-height:
        1.35;

}


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

.nnobae-page .nnobae-showcase {

    background:
        var(--nnobae-dark);

}


.nnobae-page .nnobae-showcase .section-label,
.nnobae-page .nnobae-showcase .section-title,
.nnobae-page .nnobae-showcase .section-description {

    color:
        var(--nnobae-white);

}


.nnobae-page .nnobae-showcase .section-description {

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

}


.nnobae-page .nnobae-showcase-placeholder {

    position:
        relative;

    min-height:
        560px;

    overflow:
        hidden;

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

    background:
        #222;

}


.nnobae-page .nnobae-showcase-placeholder img {

    width:
        100%;

    height:
        560px;

    object-fit:
        cover;

    opacity:
        0.55;

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

}


.nnobae-page .nnobae-showcase-placeholder:hover img {

    transform:
        scale(1.04);

}


.nnobae-page .showcase-overlay {

    position:
        absolute;

    inset:
        auto 35px 35px;

    max-width:
        500px;

    padding:
        28px;

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

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

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

    backdrop-filter:
        blur(15px);

}


.nnobae-page .showcase-overlay span {

    color:
        var(--nnobae-green);

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.nnobae-page .showcase-overlay p {

    margin:
        10px 0 0;

    color:
        var(--nnobae-white);

    line-height:
        1.7;

}


/* =========================================================
   17. DEMO
   ========================================================= */

.nnobae-page .nnobae-demo {

    padding-block:
        clamp(80px, 10vw, 140px);

    text-align:
        center;

    background:
        var(--nnobae-green);

}


.nnobae-page .nnobae-demo-content {

    max-width:
        800px;

    margin-inline:
        auto;

}


.nnobae-page .nnobae-demo .section-label {

    color:
        var(--nnobae-white);

}


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

    background:
        var(--nnobae-white);

}


.nnobae-page .nnobae-demo .section-title {

    color:
        var(--nnobae-white);

}


.nnobae-page .nnobae-demo p {

    max-width:
        650px;

    margin:
        22px auto 0;

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

    font-size:
        1.05rem;

    line-height:
        1.8;

}


.nnobae-page .nnobae-demo .btn {

    margin-top:
        30px;

    background:
        var(--nnobae-white);

    color:
        var(--nnobae-black);

}


.nnobae-page .nnobae-demo .demo-icon {

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

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

}


/* =========================================================
   18. INVESTMENT / WHY NOW
   ========================================================= */

.nnobae-page .nnobae-investment {

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

}


.nnobae-page .nnobae-investment-grid {

    display:
        grid;

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

    gap:
        16px;

}


.nnobae-page .nnobae-investment-card {

    min-height:
        350px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        32px;

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

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

    background:
        var(--nnobae-white);

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

}


.nnobae-page .nnobae-investment-card:hover {

    transform:
        translateY(-7px);

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

}


.nnobae-page .nnobae-investment-card > span {

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

    font-weight:
        700;

}


.nnobae-page .nnobae-investment-card h3 {

    margin:
        55px 0 18px;

    font-size:
        1.3rem;

    letter-spacing:
        -0.035em;

}


.nnobae-page .nnobae-investment-card p {

    margin:
        0;

    color:
        var(--nnobae-muted);

    line-height:
        1.75;

}


.nnobae-page .nnobae-investment-card .source-link {

    margin-top:
        auto;

    padding-top:
        22px;

}


/* =========================================================
   19. IMPACT
   ========================================================= */

.nnobae-page .nnobae-impact {

    background:
        var(--nnobae-white);

}


.nnobae-page .nnobae-impact-grid {

    display:
        grid;

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

    gap:
        8px;

    margin-top:
        60px;

}


.nnobae-page .nnobae-impact-metric {

    min-height:
        140px;

    display:
        flex;

    align-items:
        flex-end;

    padding:
        22px;

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

    color:
        var(--nnobae-black);

    font-size:
        0.98rem;

    font-weight:
        600;

    line-height:
        1.4;

    transition:
        background var(--nnobae-transition),
        color var(--nnobae-transition);

}


.nnobae-page .nnobae-impact-metric:hover {

    background:
        var(--nnobae-black);

    color:
        var(--nnobae-white);

}


/* =========================================================
   20. STATUS
   ========================================================= */

.nnobae-page .nnobae-status {

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

}


.nnobae-page .nnobae-status-card {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        clamp(35px, 7vw, 100px);

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

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

    background:
        var(--nnobae-dark);

}


.nnobae-page .nnobae-status-card h2 {

    margin:
        0;

    color:
        var(--nnobae-white);

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

    letter-spacing:
        -0.055em;

    line-height:
        1.05;

}


.nnobae-page .nnobae-status-card .section-label {

    color:
        var(--nnobae-green);

}


.nnobae-page .nnobae-status-content p {

    margin:
        0 0 22px;

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

    line-height:
        1.8;

}


/* =========================================================
   21. REFERENCES
   ========================================================= */

.nnobae-page .nnobae-reference-list {

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

}


.nnobae-page .nnobae-reference-item {

    display:
        grid;

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

    gap:
        25px;

    align-items:
        center;

    padding:
        26px 0;

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

    color:
        var(--nnobae-black);

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

}


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

    padding-inline:
        16px;

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

}


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

    color:
        var(--nnobae-muted);

    font-size:
        0.8rem;

    font-weight:
        600;

}


.nnobae-page .nnobae-reference-item strong {

    font-size:
        1rem;

}


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

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

    font-size:
        1.2rem;

}


/* =========================================================
   22. NEXT PROJECT
   ========================================================= */

.nnobae-page .nnobae-next-project {

    padding-block:
        35px 80px;

}


.nnobae-page .next-project-card {

    min-height:
        300px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        35px;

    padding:
        clamp(30px, 5vw, 60px);

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

    background:
        var(--nnobae-black);

    color:
        var(--nnobae-white);

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

}


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

    transform:
        translateY(-7px);

}


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

    color:
        var(--nnobae-green);

}


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

    margin:
        14px 0 7px;

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

    letter-spacing:
        -0.07em;

    line-height:
        0.95;

}


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

    margin:
        0;

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

}


.nnobae-page .next-project-arrow {

    width:
        65px;

    height:
        65px;

    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(--nnobae-green);

    font-size:
        1.7rem;

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

}


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

    transform:
        translateX(8px);

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

}


/* =========================================================
   23. RESPONSIVE — LARGE TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .nnobae-page .nnobae-hero-grid {

        grid-template-columns:
            1fr 0.8fr;

        gap:
            45px;

    }


    .nnobae-page .nnobae-hero-image-wrapper {

        width:
            min(100%, 360px);

    }


    .nnobae-page .nnobae-pain-points-grid {

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

    }


    .nnobae-page .nnobae-research-grid {

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

    }


    .nnobae-page .nnobae-journey-heading {

        grid-template-columns:
            1fr 1fr;

    }


    .nnobae-page .nnobae-journey-heading p {

        grid-column:
            2;

    }


    .nnobae-page .nnobae-journey-steps {

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

    }


    .nnobae-page .nnobae-impact-grid {

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

    }

}


/* =========================================================
   24. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 850px) {

    .nnobae-page .container {

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

    }


    .nnobae-page .section {

        padding-block:
            70px;

    }


    .nnobae-page .nnobae-hero {

        min-height:
            auto;

        padding-block:
            65px 80px;

    }


    .nnobae-page .nnobae-hero-grid {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }


    .nnobae-page .nnobae-hero-content {

        max-width:
            750px;

    }


    .nnobae-page .nnobae-hero-visual {

        max-width:
            500px;

        margin-inline:
            auto;

    }


    .nnobae-page .nnobae-hero-image-wrapper {

        width:
            min(100%, 380px);

    }


    .nnobae-page .nnobae-snapshot-grid {

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

    }


    .nnobae-page .nnobae-split-layout {

        grid-template-columns:
            1fr;

        gap:
            40px;

    }


    .nnobae-page .nnobae-section-intro {

        position:
            static;

    }


    .nnobae-page .nnobae-data-grid {

        grid-template-columns:
            1fr;

    }


    .nnobae-page .nnobae-feature-grid {

        grid-template-columns:
            1fr;

    }


    .nnobae-page .nnobae-feature-image img {

        max-height:
            480px;

    }


    .nnobae-page .nnobae-network-diagram {

        min-height:
            auto;

        display:
            grid;

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

        grid-template-rows:
            auto;

    }


    .nnobae-page .network-core {

        grid-column:
            1 / -1;

        grid-row:
            auto;

        order:
            -1;

        width:
            210px;

        height:
            210px;

        margin-inline:
            auto;

    }


    .nnobae-page .network-producer {

        grid-column:
            auto;

        grid-row:
            auto;

    }


    .nnobae-page .nnobae-capabilities-grid {

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

    }


    .nnobae-page .nnobae-investment-grid {

        grid-template-columns:
            1fr;

    }


    .nnobae-page .nnobae-status-card {

        grid-template-columns:
            1fr;

    }

}


/* =========================================================
   25. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .nnobae-page .container {

        width:
            calc(100% - 28px);

    }


    .nnobae-page .section {

        padding-block:
            60px;

    }


    .nnobae-page .nnobae-hero {

        padding-block:
            55px 70px;

    }


    .nnobae-page .nnobae-hero-grid {

        gap:
            45px;

    }


    .nnobae-page .nnobae-hero-title {

        font-size:
            clamp(3.1rem, 18vw, 5.2rem);

    }


    .nnobae-page .nnobae-hero-title span {

        font-size:
            1.1rem;

    }


    .nnobae-page .nnobae-hero-description {

        font-size:
            1.08rem;

    }


    .nnobae-page .nnobae-hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .nnobae-page .nnobae-hero-actions .btn {

        width:
            100%;

    }


    /* Smaller vertical app screenshot */

    .nnobae-page .nnobae-hero-visual {

        width:
            100%;

        max-width:
            100%;

    }


    .nnobae-page .nnobae-hero-image-wrapper {

        width:
            min(100%, 310px);

        padding:
            8px;

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

        transform:
            rotate(0.8deg);

    }


    .nnobae-page .nnobae-hero-image {

        max-height:
            560px;

        border-radius:
            calc(
                var(--nnobae-radius-lg) - 5px
            );

    }


    .nnobae-page .nnobae-snapshot-grid {

        grid-template-columns:
            1fr;

    }


    .nnobae-page .nnobae-meta-card {

        min-height:
            140px;

        padding:
            24px;

    }


    .nnobae-page .nnobae-pain-points-grid {

        grid-template-columns:
            1fr;

    }


    .nnobae-page .nnobae-pain-point {

        min-height:
            270px;

    }


    .nnobae-page .pain-point-number {

        margin-bottom:
            45px;

    }


    .nnobae-page .nnobae-research-grid {

        grid-template-columns:
            1fr;

    }


    .nnobae-page .nnobae-research-card {

        min-height:
            250px;

    }


    .nnobae-page .nnobae-feature-image img {

        max-height:
            400px;

    }


    .nnobae-page .nnobae-stat-highlight {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;

    }


    .nnobae-page .nnobae-network-diagram {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }


    .nnobae-page .network-core {

        width:
            180px;

        height:
            180px;

    }


    .nnobae-page .nnobae-capabilities-grid {

        grid-template-columns:
            1fr;

    }


    .nnobae-page .nnobae-journey {

        padding-block:
            42px;

    }


    .nnobae-page .nnobae-journey-heading {

        display:
            block;

    }


    .nnobae-page .nnobae-journey-heading h3 {

        margin:
            14px 0;

    }


    .nnobae-page .nnobae-journey-steps {

        grid-template-columns:
            1fr;

    }


    .nnobae-page .journey-step {

        min-height:
            105px;

    }


    .nnobae-page .nnobae-showcase-placeholder {

        min-height:
            380px;

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

    }


    .nnobae-page .nnobae-showcase-placeholder img {

        height:
            380px;

    }


    .nnobae-page .showcase-overlay {

        right:
            12px;

        bottom:
            12px;

        left:
            12px;

        padding:
            20px;

    }


    .nnobae-page .nnobae-impact-grid {

        grid-template-columns:
            1fr;

    }


    .nnobae-page .nnobae-impact-metric {

        min-height:
            110px;

    }


    .nnobae-page .nnobae-status-card {

        padding:
            28px 22px;

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

    }


    .nnobae-page .nnobae-reference-item {

        grid-template-columns:
            1fr auto;

        gap:
            8px 18px;

    }


    .nnobae-page .nnobae-reference-item strong {

        grid-column:
            1 / -1;

        grid-row:
            2;

    }


    .nnobae-page .next-project-card {

        min-height:
            270px;

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .nnobae-page .next-project-arrow {

        width:
            54px;

        height:
            54px;

    }

}


/* =========================================================
   26. ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

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

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

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

    }

}