@extends('layouts.app')

@section('title', 'NyumbaChapChap - House Hunting Simplified')

@section('content')
<style>
    :root {
        --ncc-blue: #0F4C81;
        --ncc-blue-dark: #082f52;
        --ncc-gold: #F4B400;
        --ncc-white: #ffffff;
        --ncc-soft: #f6f9fc;
        --ncc-soft-blue: #eaf3fb;
        --ncc-dark: #111827;
        --ncc-muted: #667085;
        --ncc-border: #e6edf3;
    }

    * {
        box-sizing: border-box;
    }

    .ncc-home {
        background: var(--ncc-white);
        color: var(--ncc-dark);
        font-family: Figtree, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .ncc-container {
        width: min(1180px, calc(100% - 36px));
        margin: 0 auto;
    }

    .ncc-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        padding: 14px 22px;
        font-weight: 900;
        text-decoration: none;
        border: 0;
        cursor: pointer;
        transition: 0.2s ease;
        white-space: nowrap;
    }

    .ncc-btn-blue {
        background: var(--ncc-blue);
        color: white;
    }

    .ncc-btn-blue:hover {
        background: var(--ncc-blue-dark);
        color: white;
        transform: translateY(-1px);
    }

    .ncc-btn-gold {
        background: var(--ncc-gold);
        color: #111827;
    }

    .ncc-btn-gold:hover {
        background: #dfa400;
        color: #111827;
        transform: translateY(-1px);
    }

    .ncc-portal-hero {
        position: relative;
        min-height: 610px;
        display: flex;
        align-items: center;
        background:
            linear-gradient(90deg, rgba(15, 76, 129, 0.94), rgba(15, 76, 129, 0.72), rgba(15, 76, 129, 0.46)),
            url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=1800&q=80');
        background-size: cover;
        background-position: center;
        color: white;
        overflow: hidden;
    }

    .ncc-portal-hero::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 110px;
        background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.98));
        pointer-events: none;
    }

    .ncc-hero-content {
        position: relative;
        z-index: 2;
        max-width: 850px;
        padding: 82px 0 120px;
    }

    .ncc-hero-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(244, 180, 0, 0.96);
        color: #111827;
        padding: 9px 16px;
        border-radius: 999px;
        font-weight: 900;
        margin-bottom: 18px;
    }

    .ncc-hero-content h1 {
        font-size: clamp(42px, 7vw, 76px);
        line-height: 0.98;
        margin: 0 0 18px;
        font-weight: 950;
        letter-spacing: -2.2px;
    }

    .ncc-hero-content p {
        max-width: 720px;
        margin: 0 0 28px;
        color: rgba(255,255,255,0.92);
        font-size: 20px;
        line-height: 1.65;
    }

    .ncc-search-panel {
        position: relative;
        z-index: 4;
        margin-top: -86px;
    }

    .ncc-search-box {
        background: white;
        border-radius: 26px;
        padding: 18px;
        box-shadow: 0 26px 80px rgba(15, 76, 129, 0.22);
        border: 1px solid rgba(15, 76, 129, 0.08);
    }

    .ncc-search-form {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr auto;
        gap: 12px;
        align-items: end;
    }

    .ncc-field label {
        display: block;
        font-size: 13px;
        font-weight: 900;
        color: var(--ncc-blue);
        margin-bottom: 8px;
    }

    .ncc-field input,
    .ncc-field select {
        width: 100%;
        height: 52px;
        border-radius: 15px;
        border: 1px solid var(--ncc-border);
        padding: 0 15px;
        color: var(--ncc-dark);
        outline: none;
        background: #fff;
    }

    .ncc-field input:focus,
    .ncc-field select:focus {
        border-color: var(--ncc-blue);
        box-shadow: 0 0 0 4px rgba(15, 76, 129, 0.12);
    }

    .ncc-search-submit {
        height: 52px;
        padding-left: 26px;
        padding-right: 26px;
    }

    .ncc-section {
        padding: 82px 0;
    }

    .ncc-section-soft {
        background: var(--ncc-soft);
    }

    .ncc-section-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 24px;
        margin-bottom: 30px;
    }

    .ncc-kicker {
        width: 72px;
        height: 5px;
        background: var(--ncc-gold);
        border-radius: 999px;
        margin-bottom: 14px;
    }

    .ncc-section-head h2 {
        color: var(--ncc-blue);
        font-size: clamp(30px, 4vw, 45px);
        line-height: 1.05;
        margin: 0 0 8px;
        font-weight: 950;
        letter-spacing: -1.1px;
    }

    .ncc-section-head p {
        margin: 0;
        color: var(--ncc-muted);
        font-size: 17px;
        line-height: 1.6;
    }

    .ncc-category-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
    }

    .ncc-category-card {
        position: relative;
        min-height: 150px;
        background: white;
        border: 1px solid var(--ncc-border);
        border-radius: 24px;
        padding: 22px;
        text-decoration: none;
        overflow: hidden;
        box-shadow: 0 14px 34px rgba(15, 76, 129, 0.08);
        transition: 0.2s ease;
    }

    .ncc-category-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 24px 54px rgba(15, 76, 129, 0.14);
    }

    .ncc-category-card::after {
        content: "";
        position: absolute;
        right: -24px;
        bottom: -24px;
        width: 86px;
        height: 86px;
        border-radius: 999px;
        background: rgba(244, 180, 0, 0.23);
    }

    .ncc-category-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        background: var(--ncc-soft-blue);
        color: var(--ncc-blue);
        display: grid;
        place-items: center;
        font-size: 24px;
        font-weight: 900;
        margin-bottom: 18px;
    }

    .ncc-category-card h3 {
        margin: 0 0 6px;
        color: var(--ncc-blue);
        font-size: 18px;
        font-weight: 950;
    }

    .ncc-category-card span {
        color: var(--ncc-muted);
        font-size: 13px;
        font-weight: 700;
    }

    .ncc-feature-strip {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 30px;
        align-items: stretch;
    }

    .ncc-feature-photo {
        min-height: 420px;
        border-radius: 34px;
        overflow: hidden;
        background:
            linear-gradient(180deg, rgba(15,76,129,0.02), rgba(15,76,129,0.4)),
            url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1200&q=80');
        background-size: cover;
        background-position: center;
        position: relative;
        box-shadow: 0 28px 70px rgba(15, 76, 129, 0.18);
    }

    .ncc-feature-badge {
        position: absolute;
        left: 24px;
        bottom: 24px;
        background: white;
        color: var(--ncc-blue);
        border-radius: 20px;
        padding: 18px 20px;
        max-width: 290px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.18);
    }

    .ncc-feature-badge strong {
        display: block;
        color: var(--ncc-blue);
        font-size: 24px;
        font-weight: 950;
        margin-bottom: 4px;
    }

    .ncc-feature-list {
        display: grid;
        gap: 16px;
    }

    .ncc-info-card {
        background: white;
        border-radius: 24px;
        padding: 24px;
        border: 1px solid var(--ncc-border);
        box-shadow: 0 14px 34px rgba(15, 76, 129, 0.08);
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: 16px;
        align-items: start;
    }

    .ncc-info-icon {
        width: 56px;
        height: 56px;
        border-radius: 18px;
        background: var(--ncc-blue);
        color: white;
        display: grid;
        place-items: center;
        font-size: 22px;
        font-weight: 900;
    }

    .ncc-info-card:nth-child(2) .ncc-info-icon {
        background: var(--ncc-gold);
        color: #111827;
    }

    .ncc-info-card h3 {
        margin: 0 0 7px;
        color: var(--ncc-blue);
        font-size: 21px;
        font-weight: 950;
    }

    .ncc-info-card p {
        margin: 0;
        color: var(--ncc-muted);
        line-height: 1.6;
    }

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

    .ncc-location-card {
        background: white;
        border: 1px solid var(--ncc-border);
        border-radius: 22px;
        padding: 22px 18px;
        text-align: center;
        box-shadow: 0 12px 30px rgba(15, 76, 129, 0.07);
    }

    .ncc-location-card strong {
        display: block;
        color: var(--ncc-blue);
        font-weight: 950;
        font-size: 18px;
        margin-bottom: 5px;
    }

    .ncc-location-card span {
        color: var(--ncc-muted);
        font-weight: 700;
        font-size: 13px;
    }

    .ncc-owner-cta {
        background:
            radial-gradient(circle at top left, rgba(244, 180, 0, 0.24), transparent 34%),
            linear-gradient(135deg, var(--ncc-blue), var(--ncc-blue-dark));
        color: white;
        border-radius: 36px;
        padding: 54px;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 28px;
        box-shadow: 0 26px 70px rgba(15, 76, 129, 0.2);
    }

    .ncc-owner-cta h2 {
        margin: 0 0 10px;
        font-size: clamp(30px, 4vw, 48px);
        line-height: 1.05;
        font-weight: 950;
        letter-spacing: -1px;
    }

    .ncc-owner-cta p {
        margin: 0;
        max-width: 720px;
        color: rgba(255,255,255,0.86);
        font-size: 18px;
        line-height: 1.7;
    }

    .ncc-mini-footer {
        padding: 34px 0;
        background: #071f36;
        color: rgba(255,255,255,0.75);
        text-align: center;
        font-weight: 700;
    }

    @media (max-width: 1050px) {
        .ncc-search-form {
            grid-template-columns: 1fr 1fr;
        }

        .ncc-category-grid,
        .ncc-locations {
            grid-template-columns: repeat(3, 1fr);
        }

        .ncc-feature-strip,
        .ncc-owner-cta {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 700px) {
        .ncc-portal-hero {
            min-height: 560px;
        }

        .ncc-hero-content {
            padding: 56px 0 110px;
        }

        .ncc-search-form,
        .ncc-category-grid,
        .ncc-locations {
            grid-template-columns: 1fr;
        }

        .ncc-section-head {
            display: block;
        }

        .ncc-owner-cta {
            padding: 34px;
            border-radius: 26px;
            text-align: center;
        }

        .ncc-feature-photo {
            min-height: 320px;
        }

        .ncc-btn {
            width: 100%;
        }
    }

    .ncc-portal-hero {
        min-height: 620px;
        background:
            linear-gradient(90deg, rgba(15, 76, 129, 0.97), rgba(15, 76, 129, 0.78), rgba(15, 76, 129, 0.56)),
            url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=1900&q=80');
        background-size: cover;
        background-position: center;
    }

    .ncc-hero-layout {
        position: relative;
        z-index: 3;
        display: grid;
        grid-template-columns: 0.88fr 1.12fr;
        gap: 38px;
        align-items: center;
        padding: 70px 0 128px;
    }

    .ncc-hero-content {
        padding: 0;
        max-width: 620px;
    }

    .ncc-hero-content h1 {
        font-size: clamp(34px, 4.7vw, 56px);
        line-height: 1.04;
        letter-spacing: -1.3px;
        max-width: 620px;
    }

    .ncc-hero-content p {
        font-size: 18px;
        max-width: 610px;
    }

    .ncc-hero-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin: 26px 0 0;
        max-width: 640px;
    }

    .ncc-hero-stat {
        background: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 18px;
        padding: 13px 12px;
        backdrop-filter: blur(8px);
    }

    .ncc-hero-stat strong {
        display: block;
        color: var(--ncc-gold);
        font-size: 20px;
        font-weight: 950;
        line-height: 1;
        margin-bottom: 5px;
    }

    .ncc-hero-stat span {
        display: block;
        color: rgba(255,255,255,0.9);
        font-size: 12px;
        font-weight: 800;
    }

    .ncc-showcase {
        position: relative;
        min-height: 390px;
        overflow: hidden;
        border-radius: 36px;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.16);
        box-shadow: 0 30px 80px rgba(0,0,0,0.25);
        backdrop-filter: blur(10px);
    }

    .ncc-showcase::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(90deg, rgba(15,76,129,0.92), transparent 17%, transparent 83%, rgba(15,76,129,0.92)),
            linear-gradient(180deg, rgba(255,255,255,0.08), transparent);
        z-index: 3;
        pointer-events: none;
    }

    .ncc-house-track {
        position: absolute;
        top: 34px;
        left: 0;
        display: flex;
        gap: 18px;
        width: max-content;
        animation: nccSlideHomes 32s linear infinite;
    }

    .ncc-house-row-two {
        top: 205px;
        animation-duration: 42s;
        animation-direction: reverse;
        opacity: 0.94;
    }

    @keyframes nccSlideHomes {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
    }

    .ncc-house-card {
        width: 245px;
        height: 145px;
        border-radius: 24px;
        overflow: hidden;
        background: white;
        position: relative;
        box-shadow: 0 18px 38px rgba(0,0,0,0.28);
        flex: 0 0 auto;
    }

    .ncc-house-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .ncc-house-card div {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 12px;
        background: rgba(255,255,255,0.94);
        color: var(--ncc-blue);
        border-radius: 14px;
        padding: 8px 10px;
        font-size: 13px;
        font-weight: 950;
        box-shadow: 0 10px 22px rgba(0,0,0,0.18);
    }

    .ncc-floating-price {
        position: absolute;
        z-index: 5;
        background: rgba(255,255,255,0.94);
        color: var(--ncc-blue);
        border-radius: 22px;
        padding: 16px 18px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.25);
        border: 1px solid rgba(255,255,255,0.5);
        animation: nccFloat 4.5s ease-in-out infinite;
    }

    .ncc-floating-price strong {
        display: block;
        font-size: 20px;
        font-weight: 950;
        color: var(--ncc-blue);
        margin-bottom: 3px;
    }

    .ncc-floating-price span {
        color: #374151;
        font-size: 13px;
        font-weight: 800;
    }

    .ncc-float-one {
        top: 26px;
        right: 28px;
    }

    .ncc-float-two {
        left: 28px;
        bottom: 30px;
        animation-delay: 1.2s;
    }

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

    .ncc-gold-dot {
        position: absolute;
        z-index: 4;
        width: 90px;
        height: 90px;
        border-radius: 999px;
        background: rgba(244,180,0,0.9);
        right: 110px;
        bottom: 84px;
        filter: blur(1px);
        opacity: 0.75;
    }

    @media (max-width: 1050px) {
        .ncc-hero-layout {
            grid-template-columns: 1fr;
            padding: 54px 0 120px;
        }

        .ncc-showcase {
            min-height: 330px;
        }

        .ncc-house-row-two {
            top: 180px;
        }
    }

    @media (max-width: 700px) {
        .ncc-hero-stats {
            grid-template-columns: repeat(2, 1fr);
        }

        .ncc-showcase {
            min-height: 300px;
            border-radius: 26px;
        }

        .ncc-house-card {
            width: 205px;
            height: 126px;
        }

        .ncc-house-row-two {
            top: 160px;
        }

        .ncc-floating-price {
            display: none;
        }
    }


    .ncc-feature-photo {
        position: relative;
        background-image: none !important;
        background: #0F4C81;
    }

    .ncc-feature-photo::before {
        content: "";
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        animation: nccFeaturePhotoSwap 28s infinite;
        transform: scale(1.03);
    }

    .ncc-feature-photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(15, 76, 129, 0.04), rgba(15, 76, 129, 0.56));
        z-index: 1;
    }

    .ncc-feature-badge {
        z-index: 2;
    }

    @keyframes nccFeaturePhotoSwap {
        0%, 13% {
            background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1200&q=80');
        }
        16%, 29% {
            background-image: url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=1200&q=80');
        }
        32%, 45% {
            background-image: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1200&q=80');
        }
        48%, 61% {
            background-image: url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1200&q=80');
        }
        64%, 77% {
            background-image: url('https://images.unsplash.com/photo-1600573472550-8090b5e0745e?auto=format&fit=crop&w=1200&q=80');
        }
        80%, 100% {
            background-image: url('https://images.unsplash.com/photo-1600047509807-ba8f99d2cdde?auto=format&fit=crop&w=1200&q=80');
        }
    }

    .ncc-feature-photo-labels {
        position: absolute;
        top: 24px;
        right: 24px;
        z-index: 2;
        display: grid;
        gap: 10px;
    }

    .ncc-photo-label {
        background: rgba(255,255,255,0.94);
        color: var(--ncc-blue);
        border-radius: 999px;
        padding: 9px 14px;
        font-size: 13px;
        font-weight: 950;
        box-shadow: 0 14px 34px rgba(0,0,0,0.18);
        animation: nccLabelFloat 5s ease-in-out infinite;
    }

    .ncc-photo-label:nth-child(2) {
        animation-delay: 1.2s;
    }

    .ncc-photo-label:nth-child(3) {
        animation-delay: 2.1s;
    }

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

    .ncc-location-carousel {
        position: relative;
        overflow: hidden;
        border-radius: 28px;
        padding: 8px 0;
    }

    .ncc-location-carousel::before,
    .ncc-location-carousel::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 90px;
        z-index: 2;
        pointer-events: none;
    }

    .ncc-location-carousel::before {
        left: 0;
        background: linear-gradient(90deg, #ffffff, rgba(255,255,255,0));
    }

    .ncc-location-carousel::after {
        right: 0;
        background: linear-gradient(270deg, #ffffff, rgba(255,255,255,0));
    }

    .ncc-location-track {
        display: flex;
        gap: 14px;
        width: max-content;
        animation: nccLocationsMove 55s linear infinite;
    }

    .ncc-location-track:hover {
        animation-play-state: paused;
    }

    @keyframes nccLocationsMove {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
    }

    .ncc-location-card {
        width: 210px;
        min-height: 112px;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .ncc-location-card small {
        display: block;
        margin-top: 5px;
        color: var(--ncc-gold);
        font-weight: 950;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    @media (max-width: 700px) {
        .ncc-location-card {
            width: 180px;
        }

        .ncc-location-carousel::before,
        .ncc-location-carousel::after {
            width: 40px;
        }

        .ncc-feature-photo-labels {
            top: 16px;
            right: 16px;
            left: 16px;
        }

        .ncc-photo-label {
            width: max-content;
            max-width: 100%;
        }
    }


    /* ============================================================
       NCC PREMIUM HERO SCREEN-FIT + ADVANCED 3D ANIMATION UPGRADE
       This block intentionally overrides earlier hero styles without
       removing the existing animations, carousel markup, or content.
       ============================================================ */

    .ncc-portal-hero {
        min-height: calc(100vh - 118px);
        max-height: 720px;
        align-items: stretch;
        isolation: isolate;
    }

    .ncc-portal-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 77% 22%, rgba(244, 180, 0, 0.16), transparent 24%),
            radial-gradient(circle at 33% 72%, rgba(255, 255, 255, 0.09), transparent 22%);
        z-index: 1;
        pointer-events: none;
        animation: nccHeroGlow 9s ease-in-out infinite alternate;
    }

    @keyframes nccHeroGlow {
        from { opacity: 0.65; transform: scale(1); }
        to { opacity: 1; transform: scale(1.03); }
    }

    .ncc-hero-layout {
        min-height: calc(100vh - 118px);
        max-height: 720px;
        padding: clamp(30px, 4.2vh, 48px) 0 clamp(76px, 8.5vh, 96px);
        gap: clamp(24px, 3vw, 36px);
        perspective: 1400px;
    }

    .ncc-hero-label {
        margin-bottom: 14px;
        box-shadow: 0 14px 38px rgba(244, 180, 0, 0.28);
    }

    .ncc-hero-content h1 {
        font-size: clamp(38px, 4.15vw, 58px);
        line-height: 1.01;
        margin-bottom: 14px;
        text-wrap: balance;
    }

    .ncc-hero-content p {
        font-size: clamp(16px, 1.35vw, 19px);
        line-height: 1.55;
        margin-bottom: 22px;
    }

    .ncc-hero-stats {
        margin-top: 20px;
    }

    .ncc-hero-stat {
        transform-style: preserve-3d;
        transition: transform 0.28s ease, background 0.28s ease, border-color 0.28s ease;
    }

    .ncc-hero-stat:hover {
        transform: translateY(-4px) rotateX(7deg);
        background: rgba(255,255,255,0.17);
        border-color: rgba(244,180,0,0.42);
    }

    .ncc-showcase {
        min-height: clamp(318px, 43vh, 398px);
        transform-style: preserve-3d;
        transform: rotateY(-7deg) rotateX(2deg);
        box-shadow:
            0 34px 90px rgba(0,0,0,0.30),
            inset 0 1px 0 rgba(255,255,255,0.22);
        animation: nccShowcase3D 7s ease-in-out infinite;
    }

    @keyframes nccShowcase3D {
        0%, 100% { transform: rotateY(-7deg) rotateX(2deg) translateY(0); }
        50% { transform: rotateY(-3deg) rotateX(4deg) translateY(-8px); }
    }

    .ncc-showcase:hover .ncc-house-track {
        animation-play-state: paused;
    }

    .ncc-showcase::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.20) 42%, transparent 56%);
        transform: translateX(-130%);
        animation: nccGlassShine 6s ease-in-out infinite;
        z-index: 4;
        pointer-events: none;
    }

    @keyframes nccGlassShine {
        0%, 42% { transform: translateX(-130%); }
        58%, 100% { transform: translateX(130%); }
    }

    .ncc-house-track {
        top: clamp(22px, 3.1vh, 34px);
        gap: 16px;
        transform-style: preserve-3d;
    }

    .ncc-house-row-two {
        top: clamp(168px, 23vh, 205px);
    }

    .ncc-house-card {
        width: clamp(210px, 17vw, 245px);
        height: clamp(124px, 15.6vh, 145px);
        transform: translateZ(24px);
        transition: transform 0.28s ease, box-shadow 0.28s ease;
    }

    .ncc-house-card:hover {
        transform: translateZ(70px) rotateY(5deg) translateY(-6px);
        box-shadow: 0 26px 60px rgba(0,0,0,0.36);
    }

    .ncc-floating-price {
        transform-style: preserve-3d;
        backdrop-filter: blur(12px);
    }

    .ncc-float-one {
        top: clamp(18px, 3vh, 26px);
        right: clamp(18px, 3vw, 28px);
    }

    .ncc-float-two {
        left: clamp(18px, 3vw, 28px);
        bottom: clamp(22px, 3.4vh, 30px);
    }

    .ncc-gold-dot {
        animation: nccGoldOrb 6s ease-in-out infinite;
        box-shadow: 0 0 46px rgba(244,180,0,0.55);
    }

    @keyframes nccGoldOrb {
        0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: 0.65; }
        50% { transform: translate3d(-18px,-16px,70px) scale(1.12); opacity: 0.9; }
    }

    .ncc-search-panel {
        margin-top: clamp(-72px, -7vh, -54px);
    }

    .ncc-search-box {
        padding: 15px;
        border-radius: 22px;
    }

    .ncc-field input,
    .ncc-field select,
    .ncc-search-submit {
        height: 48px;
    }

    @media (max-width: 1180px) {
        .ncc-portal-hero {
            min-height: auto;
            max-height: none;
        }

        .ncc-hero-layout {
            min-height: auto;
            max-height: none;
            padding: 46px 0 104px;
        }

        .ncc-showcase {
            transform: none;
            animation: none;
        }
    }

    @media (max-width: 900px) {
        .ncc-hero-layout {
            grid-template-columns: 1fr;
            padding: 42px 0 102px;
        }

        .ncc-showcase {
            min-height: 315px;
        }

        .ncc-hero-content h1 {
            font-size: clamp(35px, 8vw, 50px);
        }
    }

    @media (max-width: 700px) {
        .ncc-portal-hero {
            min-height: auto;
        }

        .ncc-hero-layout {
            padding: 34px 0 94px;
        }

        .ncc-hero-label {
            font-size: 13px;
            padding: 8px 13px;
        }

        .ncc-hero-content h1 {
            font-size: clamp(32px, 11vw, 43px);
            letter-spacing: -0.8px;
        }

        .ncc-hero-content p {
            font-size: 16px;
            line-height: 1.5;
        }

        .ncc-hero-content > div[style*="display:flex"] {
            display: grid !important;
            grid-template-columns: 1fr;
        }

        .ncc-showcase {
            min-height: 292px;
        }

        .ncc-house-row-two {
            top: 156px;
        }

        .ncc-search-panel {
            margin-top: -58px;
        }
    }

    @media (min-width: 1181px) and (max-height: 780px) {
        .ncc-portal-hero {
            min-height: calc(100vh - 118px);
            max-height: 646px;
        }

        .ncc-hero-layout {
            min-height: calc(100vh - 118px);
            max-height: 646px;
            padding-top: 26px;
            padding-bottom: 72px;
        }

        .ncc-hero-label {
            margin-bottom: 12px;
            padding: 8px 15px;
        }

        .ncc-hero-content h1 {
            font-size: clamp(36px, 3.8vw, 51px);
            margin-bottom: 12px;
        }

        .ncc-hero-content p {
            font-size: 16.5px;
            line-height: 1.48;
            margin-bottom: 18px;
        }

        .ncc-hero-stats {
            margin-top: 16px;
        }

        .ncc-hero-stat {
            padding: 10px 11px;
            border-radius: 16px;
        }

        .ncc-hero-stat strong {
            font-size: 18px;
        }

        .ncc-hero-stat span {
            font-size: 11px;
        }

        .ncc-showcase {
            min-height: 330px;
        }

        .ncc-house-card {
            width: 218px;
            height: 124px;
        }

        .ncc-house-row-two {
            top: 174px;
        }

        .ncc-floating-price {
            padding: 13px 15px;
        }

        .ncc-floating-price strong {
            font-size: 18px;
        }

        .ncc-gold-dot {
            width: 76px;
            height: 76px;
            bottom: 70px;
        }

        .ncc-search-panel {
            margin-top: -58px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .ncc-showcase,
        .ncc-portal-hero::before,
        .ncc-showcase::after,
        .ncc-gold-dot,
        .ncc-hero-stat,
        .ncc-house-card {
            animation: none !important;
            transition: none !important;
        }
    }

    .ncc-public-pages-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 18px;
    }

    .ncc-public-page-card {
        position: relative;
        min-height: 230px;
        background: white;
        border: 1px solid var(--ncc-border);
        border-radius: 28px;
        padding: 26px;
        text-decoration: none;
        overflow: hidden;
        box-shadow: 0 16px 38px rgba(15, 76, 129, 0.08);
        transition: 0.2s ease;
    }

    .ncc-public-page-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 26px 58px rgba(15, 76, 129, 0.15);
    }

    .ncc-public-page-card::after {
        content: "";
        position: absolute;
        right: -38px;
        bottom: -38px;
        width: 120px;
        height: 120px;
        border-radius: 999px;
        background: rgba(244, 180, 0, 0.2);
    }

    .ncc-public-page-icon {
        width: 54px;
        height: 54px;
        border-radius: 18px;
        background: var(--ncc-blue);
        color: white;
        display: grid;
        place-items: center;
        font-size: 20px;
        font-weight: 950;
        margin-bottom: 18px;
    }

    .ncc-public-page-card:nth-child(2) .ncc-public-page-icon,
    .ncc-public-page-card:nth-child(4) .ncc-public-page-icon {
        background: var(--ncc-gold);
        color: #111827;
    }

    .ncc-public-page-card h3 {
        position: relative;
        z-index: 1;
        color: var(--ncc-blue);
        font-size: 20px;
        font-weight: 950;
        margin: 0 0 10px;
    }

    .ncc-public-page-card p {
        position: relative;
        z-index: 1;
        color: var(--ncc-muted);
        line-height: 1.65;
        font-size: 14px;
        margin: 0 0 16px;
    }

    .ncc-public-page-card span {
        position: relative;
        z-index: 1;
        color: var(--ncc-blue);
        font-size: 13px;
        font-weight: 950;
    }

    .ncc-safety-banner {
        background: #fff1f0;
        border: 1px solid rgba(180, 35, 24, 0.18);
        border-left: 7px solid #b42318;
        border-radius: 32px;
        padding: 34px;
        box-shadow: 0 18px 42px rgba(180, 35, 24, 0.08);
    }

    .ncc-safety-banner h2 {
        color: #b42318;
        font-size: clamp(28px, 4vw, 42px);
        font-weight: 950;
        line-height: 1.1;
        margin: 0 0 14px;
    }

    .ncc-safety-banner p {
        color: #7a271a;
        font-size: 17px;
        font-weight: 800;
        line-height: 1.75;
        margin: 0 0 18px;
    }

    .ncc-safety-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .ncc-btn-danger {
        background: #b42318;
        color: white;
    }

    .ncc-btn-danger:hover {
        background: #7a271a;
        color: white;
        transform: translateY(-1px);
    }

    .ncc-mini-footer-links {
        margin-top: 12px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
        font-size: 13px;
    }

    .ncc-mini-footer-links a {
        color: rgba(255,255,255,0.84);
        text-decoration: none;
    }

    .ncc-mini-footer-links a:hover {
        color: var(--ncc-gold);
    }

    @media (max-width: 1050px) {
        .ncc-public-pages-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 700px) {
        .ncc-public-pages-grid {
            grid-template-columns: 1fr;
        }

        .ncc-safety-actions {
            display: grid;
            grid-template-columns: 1fr;
        }
    }


</style>

<div class="ncc-home">

    <section class="ncc-portal-hero">
        <div class="ncc-container">
            <div class="ncc-hero-layout">
                <div class="ncc-hero-content">
                    <span class="ncc-hero-label">House Hunting Kenya. NyumbaChapChap</span>

                    <h1>Find your perfect home anywhere in Kenya.</h1>

                    <p>
                        Discover student hostels, bedsitters, apartments, maisonettes, bungalows,
                        and family homes across Kenya's most popular rental locations.
                    </p>

                    <div style="display:flex; gap:12px; flex-wrap:wrap;">
                        <a href="{{ route('listings.index') }}" class="ncc-btn ncc-btn-gold">
                            Browse Listings
                        </a>

                        <a href="{{ route('listings.featured') }}" class="ncc-btn" style="background:white;color:#0F4C81;">
                            View Featured
                        </a>

                        @auth
                            @if(auth()->user()->canUploadListings())
                                <a href="{{ route('user-listings.create') }}" class="ncc-btn" style="background:rgba(255,255,255,0.14);color:white;border:1px solid rgba(255,255,255,0.35);">
                                    Submit Property
                                </a>
                            @else
                                <a href="{{ route('dashboard') }}" class="ncc-btn" style="background:rgba(255,255,255,0.14);color:white;border:1px solid rgba(255,255,255,0.35);">
                                    Go to Dashboard
                                </a>
                            @endif
                        @else
                            <a href="{{ route('login') }}" class="ncc-btn" style="background:rgba(255,255,255,0.14);color:white;border:1px solid rgba(255,255,255,0.35);">
                                Submit Property
                            </a>
                        @endauth
                    </div>

                    <div class="ncc-hero-stats">
                        <div class="ncc-hero-stat">
                            <strong>47</strong>
                            <span>Counties Ready</span>
                        </div>

                        <div class="ncc-hero-stat">
                            <strong>24/7</strong>
                            <span>House Search</span>
                        </div>

                        <div class="ncc-hero-stat">
                            <strong>Direct</strong>
                            <span>Call & WhatsApp</span>
                        </div>

                        <div class="ncc-hero-stat">
                            <strong>Clean</strong>
                            <span>Approved Listings</span>
                        </div>
                    </div>
                </div>

                <div class="ncc-showcase" aria-label="Kenya house types showcase">
                    <div class="ncc-gold-dot"></div>

                    <div class="ncc-house-track">
                        <div class="ncc-house-card">
                            <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=500&q=80" alt="Modern apartment">
                            <div>Modern Apartment · Nairobi</div>
                        </div>

                        <div class="ncc-house-card">
                            <img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=500&q=80" alt="Family house">
                            <div>Family House · Kiambu</div>
                        </div>

                        <div class="ncc-house-card">
                            <img src="https://images.unsplash.com/photo-1605146769289-440113cc3d00?auto=format&fit=crop&w=500&q=80" alt="Mansionette">
                            <div>Mansionette · Ruiru</div>
                        </div>

                        <div class="ncc-house-card">
                            <img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=500&q=80" alt="Furnished apartment">
                            <div>Furnished Unit · Kilimani</div>
                        </div>

                        <div class="ncc-house-card">
                            <img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=500&q=80" alt="Gated estate">
                            <div>Gated Estate · Syokimau</div>
                        </div>

                        <div class="ncc-house-card">
                            <img src="https://images.unsplash.com/photo-1600047509807-ba8f99d2cdde?auto=format&fit=crop&w=500&q=80" alt="Town house">
                            <div>Town House · Nakuru</div>
                        </div>

                        <div class="ncc-house-card">
                            <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=500&q=80" alt="Modern apartment">
                            <div>Modern Apartment · Nairobi</div>
                        </div>

                        <div class="ncc-house-card">
                            <img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=500&q=80" alt="Family house">
                            <div>Family House · Kiambu</div>
                        </div>
                    </div>

                    <div class="ncc-house-track ncc-house-row-two">
                        <div class="ncc-house-card">
                            <img src="https://images.unsplash.com/photo-1600607688969-a5bfcd646154?auto=format&fit=crop&w=500&q=80" alt="Studio house">
                            <div>Bedsitter · Thika</div>
                        </div>

                        <div class="ncc-house-card">
                            <img src="https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=500&q=80" alt="Rental house">
                            <div>1 Bedroom · Ruaka</div>
                        </div>

                        <div class="ncc-house-card">
                            <img src="https://images.unsplash.com/photo-1600573472550-8090b5e0745e?auto=format&fit=crop&w=500&q=80" alt="Estate rental">
                            <div>2 Bedroom · Mombasa</div>
                        </div>

                        <div class="ncc-house-card">
                            <img src="https://images.unsplash.com/photo-1599423300746-b62533397364?auto=format&fit=crop&w=500&q=80" alt="Student hostel">
                            <div>Student Hostel · Juja</div>
                        </div>

                        <div class="ncc-house-card">
                            <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=500&q=80" alt="Luxury apartment">
                            <div>Luxury Apartment · Westlands</div>
                        </div>

                        <div class="ncc-house-card">
                            <img src="https://images.unsplash.com/photo-1600585154526-990dced4db0d?auto=format&fit=crop&w=500&q=80" alt="Town rental">
                            <div>3 Bedroom · Eldoret</div>
                        </div>

                        <div class="ncc-house-card">
                            <img src="https://images.unsplash.com/photo-1600607688969-a5bfcd646154?auto=format&fit=crop&w=500&q=80" alt="Studio house">
                            <div>Bedsitter · Thika</div>
                        </div>

                        <div class="ncc-house-card">
                            <img src="https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=500&q=80" alt="Rental house">
                            <div>1 Bedroom · Ruaka</div>
                        </div>
                    </div>

                    <div class="ncc-floating-price ncc-float-one">
                        <strong>KES 8,000</strong>
                        <span>Bedsitter · Thika</span>
                    </div>

                    <div class="ncc-floating-price ncc-float-two">
                        <strong>KES 15,000</strong>
                        <span>2 Bedroom · Chuka</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="ncc-search-panel">
        <div class="ncc-container">
            <div class="ncc-search-box">
                <form action="{{ route('listings.index') }}" method="GET" class="ncc-search-form">
                    <div class="ncc-field">
                        <label>Where do you want to live?</label>
                        <input type="text" name="search" placeholder="Estate, area, street, or keyword">
                    </div>

                    <div class="ncc-field">
                        <label>Minimum Rent</label>
                        <input type="number" name="min_rent" placeholder="e.g. 5000">
                    </div>

                    <div class="ncc-field">
                        <label>Maximum Rent</label>
                        <input type="number" name="max_rent" placeholder="e.g. 30000">
                    </div>

                    <button type="submit" class="ncc-btn ncc-btn-blue ncc-search-submit">
                        Search
                    </button>
                </form>
            </div>
        </div>
    </section>

    <section class="ncc-section">
        <div class="ncc-container">
            <div class="ncc-section-head">
                <div>
                    <div class="ncc-kicker"></div>
                    <h2>Browse by house type</h2>
                    <p>Start with the kind of space you need, then narrow by price and location.</p>
                </div>

                <a href="{{ route('listings.index') }}" class="ncc-btn ncc-btn-blue">
                    All Listings
                </a>
            </div>

            <div class="ncc-category-grid">
                <a href="{{ route('listings.index', ['search' => 'bedsitter']) }}" class="ncc-category-card">
                    <div class="ncc-category-icon">B</div>
                    <h3>Bedsitter</h3>
                    <span>Affordable compact homes</span>
                </a>

                <a href="{{ route('listings.index', ['search' => 'single room']) }}" class="ncc-category-card">
                    <div class="ncc-category-icon">S</div>
                    <h3>Single Room</h3>
                    <span>Simple rental rooms</span>
                </a>

                <a href="{{ route('listings.index', ['bedrooms' => 1]) }}" class="ncc-category-card">
                    <div class="ncc-category-icon">1</div>
                    <h3>1 Bedroom</h3>
                    <span>Private living space</span>
                </a>

                <a href="{{ route('listings.index', ['bedrooms' => 2]) }}" class="ncc-category-card">
                    <div class="ncc-category-icon">2</div>
                    <h3>2 Bedroom</h3>
                    <span>Great for small families</span>
                </a>

                <a href="{{ route('listings.index', ['bedrooms' => 3]) }}" class="ncc-category-card">
                    <div class="ncc-category-icon">3</div>
                    <h3>3 Bedroom</h3>
                    <span>More room and comfort</span>
                </a>

                <a href="{{ route('listings.index', ['search' => 'furnished']) }}" class="ncc-category-card">
                    <div class="ncc-category-icon">F</div>
                    <h3>Furnished</h3>
                    <span>Move in with ease</span>
                </a>
            </div>
        </div>
    </section>

    <section class="ncc-section ncc-section-soft">
        <div class="ncc-container">
            <div class="ncc-section-head">
                <div>
                    <div class="ncc-kicker"></div>
                    <h2>Made for real house hunting</h2>
                    <p>NyumbaChapChap focuses on practical listing information tenants need before calling.</p>
                </div>
            </div>

            <div class="ncc-feature-strip">
                <div class="ncc-feature-photo">
                    <div class="ncc-feature-photo-labels">
                        <div class="ncc-photo-label">Bedsitters near JKUAT · Juja</div>
                        <div class="ncc-photo-label">Student apartments · KU / KM Area</div>
                        <div class="ncc-photo-label">Affordable units · Chuka / Ndagani</div>
                    </div>

                    <div class="ncc-feature-badge">
                        <strong>Direct Contacts</strong>
                        Rotating homes, towns, and student rental zones across Kenya.
                    </div>
                </div>

                <div class="ncc-feature-list">
                    <div class="ncc-info-card">
                        <div class="ncc-info-icon">✓</div>
                        <div>
                            <h3>Approved listings</h3>
                            <p>Only approved listings appear publicly, helping users browse cleaner property results.</p>
                        </div>
                    </div>

                    <div class="ncc-info-card">
                        <div class="ncc-info-icon">KES</div>
                        <div>
                            <h3>Clear rent details</h3>
                            <p>Show monthly rent, deposit, service charge, and estimated total entry amount.</p>
                        </div>
                    </div>

                    <div class="ncc-info-card">
                        <div class="ncc-info-icon">📍</div>
                        <div>
                            <h3>Location-based search</h3>
                            <p>Users can search by estate, area, ward, sub county, county, and other location details.</p>
                        </div>
                    </div>

                    <div class="ncc-info-card">
                        <div class="ncc-info-icon">🏠</div>
                        <div>
                            <h3>House features</h3>
                            <p>Display bedrooms, bathrooms, toilets, furnishing, parking, WiFi, water, security, and more.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="ncc-section">
        <div class="ncc-container">
            <div class="ncc-section-head">
                <div>
                    <div class="ncc-kicker"></div>
                    <h2>Popular locations</h2>
                    <p>Revolving student rental zones, university towns, and fast-growing estate areas across Kenya.</p>
                </div>
            </div>

            <div class="ncc-location-carousel">
                <div class="ncc-location-track">
                    <div class="ncc-location-card">
                        <strong>Juja</strong>
                        <span>JKUAT student rentals</span>
                        <small>University zone</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>KM Area</strong>
                        <span>Kenyatta University Thika Road</span>
                        <small>Student hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kahawa Wendani</strong>
                        <span>KU & Thika Road rentals</span>
                        <small>Student hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kahawa Sukari</strong>
                        <span>Near KU and Ruiru</span>
                        <small>Student hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Ruiru</strong>
                        <span>Apartments and bedsitters</span>
                        <small>Fast-growing</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kimbo</strong>
                        <span>Affordable Thika Road units</span>
                        <small>Student rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Githurai 44</strong>
                        <span>Budget rentals</span>
                        <small>Student area</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Githurai 45</strong>
                        <span>Affordable houses</span>
                        <small>Student area</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Roysambu</strong>
                        <span>Thika Road rentals</span>
                        <small>Urban hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kasarani</strong>
                        <span>Apartments and hostels</span>
                        <small>Urban hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Chuka Town</strong>
                        <span>Chuka University rentals</span>
                        <small>University town</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Ndagani</strong>
                        <span>Chuka University student zone</span>
                        <small>Student hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Embu Town</strong>
                        <span>University of Embu</span>
                        <small>University town</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Meru Town</strong>
                        <span>Meru University access</span>
                        <small>University town</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Nkubu</strong>
                        <span>Meru rental zone</span>
                        <small>Student access</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Karatina</strong>
                        <span>Karatina University rentals</span>
                        <small>University town</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Nyeri Town</strong>
                        <span>College and town rentals</span>
                        <small>University town</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Njoro</strong>
                        <span>Egerton University rentals</span>
                        <small>University zone</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Nakuru Town</strong>
                        <span>Town and family rentals</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kesses</strong>
                        <span>University of Eldoret rentals</span>
                        <small>University zone</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Eldoret Town</strong>
                        <span>Student and town rentals</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Maseno</strong>
                        <span>Maseno University rentals</span>
                        <small>University town</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kisumu Town</strong>
                        <span>Lake region rentals</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kakamega</strong>
                        <span>MMUST rentals</span>
                        <small>University town</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Bungoma</strong>
                        <span>Town rentals</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Rongai</strong>
                        <span>Multimedia University access</span>
                        <small>Student rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Karen</strong>
                        <span>Catholic University access</span>
                        <small>Student rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Lang'ata</strong>
                        <span>Student and work rentals</span>
                        <small>Urban rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Uthiru</strong>
                        <span>UoN Kikuyu Campus access</span>
                        <small>Student rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kikuyu Town</strong>
                        <span>Student and family units</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Thika Town</strong>
                        <span>MKU and town rentals</span>
                        <small>University town</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Machakos Town</strong>
                        <span>University and town rentals</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Athi River</strong>
                        <span>Mavoko rentals</span>
                        <small>Fast-growing</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kitengela</strong>
                        <span>Family and student rentals</span>
                        <small>Fast-growing</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Naivasha</strong>
                        <span>Town rentals</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Nanyuki</strong>
                        <span>Town apartments</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Westlands</strong>
                        <span>Premium apartments</span>
                        <small>Urban rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kilimani</strong>
                        <span>Furnished apartments</span>
                        <small>Premium rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kileleshwa</strong>
                        <span>Modern apartments</span>
                        <small>Premium rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Ruaka</strong>
                        <span>Apartments near Nairobi</span>
                        <small>Fast-growing</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Syokimau</strong>
                        <span>Gated estates</span>
                        <small>Fast-growing</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Mlolongo</strong>
                        <span>Affordable apartments</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Nyali</strong>
                        <span>Coastal apartments</span>
                        <small>Coastal rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Bamburi</strong>
                        <span>Student and coastal rentals</span>
                        <small>Coastal rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Tudor</strong>
                        <span>Mombasa rentals</span>
                        <small>Coastal rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Mtwapa</strong>
                        <span>Coastal rentals</span>
                        <small>Coastal hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Juja</strong>
                        <span>JKUAT student rentals</span>
                        <small>University zone</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>KM Area</strong>
                        <span>Kenyatta University Thika Road</span>
                        <small>Student hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kahawa Wendani</strong>
                        <span>KU & Thika Road rentals</span>
                        <small>Student hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kahawa Sukari</strong>
                        <span>Near KU and Ruiru</span>
                        <small>Student hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Ruiru</strong>
                        <span>Apartments and bedsitters</span>
                        <small>Fast-growing</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kimbo</strong>
                        <span>Affordable Thika Road units</span>
                        <small>Student rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Githurai 44</strong>
                        <span>Budget rentals</span>
                        <small>Student area</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Githurai 45</strong>
                        <span>Affordable houses</span>
                        <small>Student area</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Roysambu</strong>
                        <span>Thika Road rentals</span>
                        <small>Urban hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kasarani</strong>
                        <span>Apartments and hostels</span>
                        <small>Urban hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Chuka Town</strong>
                        <span>Chuka University rentals</span>
                        <small>University town</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Ndagani</strong>
                        <span>Chuka University student zone</span>
                        <small>Student hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Embu Town</strong>
                        <span>University of Embu</span>
                        <small>University town</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Meru Town</strong>
                        <span>Meru University access</span>
                        <small>University town</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Nkubu</strong>
                        <span>Meru rental zone</span>
                        <small>Student access</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Karatina</strong>
                        <span>Karatina University rentals</span>
                        <small>University town</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Nyeri Town</strong>
                        <span>College and town rentals</span>
                        <small>University town</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Njoro</strong>
                        <span>Egerton University rentals</span>
                        <small>University zone</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Nakuru Town</strong>
                        <span>Town and family rentals</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kesses</strong>
                        <span>University of Eldoret rentals</span>
                        <small>University zone</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Eldoret Town</strong>
                        <span>Student and town rentals</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Maseno</strong>
                        <span>Maseno University rentals</span>
                        <small>University town</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kisumu Town</strong>
                        <span>Lake region rentals</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kakamega</strong>
                        <span>MMUST rentals</span>
                        <small>University town</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Bungoma</strong>
                        <span>Town rentals</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Rongai</strong>
                        <span>Multimedia University access</span>
                        <small>Student rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Karen</strong>
                        <span>Catholic University access</span>
                        <small>Student rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Lang'ata</strong>
                        <span>Student and work rentals</span>
                        <small>Urban rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Uthiru</strong>
                        <span>UoN Kikuyu Campus access</span>
                        <small>Student rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kikuyu Town</strong>
                        <span>Student and family units</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Thika Town</strong>
                        <span>MKU and town rentals</span>
                        <small>University town</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Machakos Town</strong>
                        <span>University and town rentals</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Athi River</strong>
                        <span>Mavoko rentals</span>
                        <small>Fast-growing</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kitengela</strong>
                        <span>Family and student rentals</span>
                        <small>Fast-growing</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Naivasha</strong>
                        <span>Town rentals</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Nanyuki</strong>
                        <span>Town apartments</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Westlands</strong>
                        <span>Premium apartments</span>
                        <small>Urban rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kilimani</strong>
                        <span>Furnished apartments</span>
                        <small>Premium rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Kileleshwa</strong>
                        <span>Modern apartments</span>
                        <small>Premium rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Ruaka</strong>
                        <span>Apartments near Nairobi</span>
                        <small>Fast-growing</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Syokimau</strong>
                        <span>Gated estates</span>
                        <small>Fast-growing</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Mlolongo</strong>
                        <span>Affordable apartments</span>
                        <small>Rental hotspot</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Nyali</strong>
                        <span>Coastal apartments</span>
                        <small>Coastal rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Bamburi</strong>
                        <span>Student and coastal rentals</span>
                        <small>Coastal rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Tudor</strong>
                        <span>Mombasa rentals</span>
                        <small>Coastal rentals</small>
                    </div>
                    <div class="ncc-location-card">
                        <strong>Mtwapa</strong>
                        <span>Coastal rentals</span>
                        <small>Coastal hotspot</small>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="ncc-section ncc-section-soft">
        <div class="ncc-container">
            <div class="ncc-section-head">
                <div>
                    <div class="ncc-kicker"></div>
                    <h2>Learn more about NyumbaChapChap</h2>
                    <p>Understand how the platform works, our mission, privacy commitments, safety rules, and how to contact us.</p>
                </div>
            </div>

            <div class="ncc-public-pages-grid">
                <a href="{{ route('how-it-works') }}" class="ncc-public-page-card">
                    <div class="ncc-public-page-icon">1</div>
                    <h3>How It Works</h3>
                    <p>See how tenants find homes and how landlords, agents, caretakers, and property managers list properties.</p>
                    <span>Read guide →</span>
                </a>

                <a href="{{ route('about') }}" class="ncc-public-page-card">
                    <div class="ncc-public-page-icon">A</div>
                    <h3>About Us</h3>
                    <p>Discover our mission, vision, values, and the bigger purpose behind NyumbaChapChap.</p>
                    <span>Know us →</span>
                </a>

                <a href="{{ route('privacy') }}" class="ncc-public-page-card">
                    <div class="ncc-public-page-icon">P</div>
                    <h3>Privacy Policy</h3>
                    <p>Learn how we collect, use, protect, and manage account, listing, payment, and verification data.</p>
                    <span>View policy →</span>
                </a>

                <a href="{{ route('terms') }}" class="ncc-public-page-card">
                    <div class="ncc-public-page-icon">T</div>
                    <h3>Terms & Conditions</h3>
                    <p>Understand the rules for listings, verification, subscriptions, payments, reports, and marketplace use.</p>
                    <span>Read terms →</span>
                </a>

                <a href="{{ route('contact') }}" class="ncc-public-page-card">
                    <div class="ncc-public-page-icon">C</div>
                    <h3>Contact Us</h3>
                    <p>Reach support, report abuse, report fake listings, or contact NyumbaChapChap through official channels.</p>
                    <span>Contact support →</span>
                </a>
            </div>
        </div>
    </section>

    <section class="ncc-section">
        <div class="ncc-container">
            <div class="ncc-safety-banner">
                <h2>Stay safe while house hunting.</h2>
                <p>
                    Never pay viewing fees, showing fees, booking fees, transport money, reservation fees,
                    advance rent, advance deposit, or unofficial extra charges before physically viewing
                    and confirming the house.
                </p>

                <div class="ncc-safety-actions">
                    <a href="{{ route('how-it-works') }}" class="ncc-btn ncc-btn-danger">
                        Read Safety Guide
                    </a>

                    <a href="{{ route('contact') }}" class="ncc-btn ncc-btn-blue">
                        Report Suspicious Activity
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="ncc-section ncc-section-soft">
        <div class="ncc-container">
            <div class="ncc-owner-cta">
                <div>
                    <h2>Have a house to list?</h2>
                    <p>
                        Property owners, agents, and caretakers can manage listings, upload photos,
                        update status, and receive direct tenant calls and WhatsApp messages.
                    </p>
                </div>

                @auth
                    <a href="{{ route('dashboard') }}" class="ncc-btn ncc-btn-gold">
                        Go to Dashboard
                    </a>
                @else
                    <a href="{{ route('register') }}" class="ncc-btn ncc-btn-gold">
                        Create Account
                    </a>
                @endauth
            </div>
        </div>
    </section>

    <footer class="ncc-mini-footer">
        <div class="ncc-container">
            NyumbaChapChap · @2026. All rights reserved.

            <div class="ncc-mini-footer-links">
                <a href="{{ route('how-it-works') }}">How It Works</a>
                <a href="{{ route('about') }}">About</a>
                <a href="{{ route('privacy') }}">Privacy</a>
                <a href="{{ route('terms') }}">Terms</a>
                <a href="{{ route('contact') }}">Contact</a>
            </div>
        </div>
    </footer>

</div>
@endsection