/* =========================================================
       ETACKY WORLD-CLASS DESIGN SYSTEM
       ========================================================= */
    :root{
        --ink:#07111f;
        --ink-2:#0c1b2e;
        --blue:#2563eb;
        --blue-2:#4f8cff;
        --cyan:#22d3ee;
        --violet:#7c3aed;
        --green:#16a34a;
        --orange:#f97316;
        --paper:#f7f9fc;
        --white:#fff;
        --muted:#64748b;
        --line:#e6ebf2;
        --shadow:0 20px 55px rgba(7,17,31,.10);
        --radius:24px;
        --container:min(1240px, calc(100% - 32px));
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
        margin:0;
        color:var(--ink);
        background:var(--paper);
        font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
        line-height:1.6;
        overflow-x:hidden;
    }
    a{color:inherit}
    img{max-width:100%;display:block}
    button,input,select{font:inherit}
    .container{width:var(--container);margin-inline:auto}

    /* Top utility bar */
    .utility{
        background:#050b14;
        color:#c9d5e6;
        font-size:12px;
        border-bottom:1px solid rgba(255,255,255,.08);
    }
    .utility-inner{
        min-height:38px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:20px;
    }
    .utility-left,.utility-right{display:flex;align-items:center;gap:16px}
    .utility a{text-decoration:none;color:#dbe7f7}
    .utility a:hover{color:#fff}
    .dot{
        width:7px;height:7px;border-radius:50%;
        background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.12);
    }

    /* Header */
    .site-header{
        position:sticky;
        top:0;
        z-index:1000;
        background:rgba(255,255,255,.92);
        backdrop-filter:blur(18px);
        border-bottom:1px solid rgba(15,23,42,.08);
        transition:.25s ease;
    }
    .site-header.scrolled{box-shadow:0 10px 35px rgba(7,17,31,.10)}
    .nav-shell{
        min-height:76px;
        display:flex;
        align-items:center;
        gap:22px;
    }
    .brand{
        display:inline-flex;
        align-items:center;
        text-decoration:none;
        flex-shrink:0;
    }
    .brand img{width:auto;height:46px}
    .desktop-nav{
        display:flex;
        align-items:center;
        gap:5px;
        margin-left:auto;
    }
    .desktop-nav a{
        text-decoration:none;
        font-size:13px;
        font-weight:750;
        color:#334155;
        padding:10px 11px;
        border-radius:11px;
        transition:.2s ease;
    }
    .desktop-nav a:hover{background:#eef4ff;color:var(--blue)}
    .nav-actions{display:flex;align-items:center;gap:9px}
    .nav-login{
        text-decoration:none;
        font-size:13px;
        font-weight:800;
        padding:10px 13px;
        border:1px solid var(--line);
        border-radius:12px;
        background:#fff;
    }
    .nav-post{
        text-decoration:none;
        display:inline-flex;
        align-items:center;
        gap:8px;
        color:#fff;
        background:linear-gradient(135deg,var(--blue),#1747c9);
        padding:11px 16px;
        border-radius:13px;
        font-weight:850;
        font-size:13px;
        box-shadow:0 10px 24px rgba(37,99,235,.25);
    }
    .nav-post:hover{transform:translateY(-1px)}
    .menu-btn{
        display:none;
        width:44px;height:44px;
        border:1px solid var(--line);
        background:#fff;
        border-radius:12px;
        color:var(--ink);
        cursor:pointer;
    }

    /* Hero */
    .hero{
        position:relative;
        padding:72px 0 48px;
        color:#fff;
        background:
            radial-gradient(circle at 12% 10%,rgba(34,211,238,.22),transparent 28%),
            radial-gradient(circle at 90% 25%,rgba(124,58,237,.28),transparent 30%),
            linear-gradient(135deg,#06101e 0%,#0a1a31 48%,#101d3d 100%);
        overflow:hidden;
        isolation:isolate;
    }
    .hero:before{
        content:"";
        position:absolute;
        inset:auto -10% -160px auto;
        width:520px;height:520px;
        border-radius:50%;
        border:1px solid rgba(255,255,255,.08);
        box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018);
        z-index:-1;
    }
    .hero-grid{
        display:grid;
        grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
        gap:50px;
        align-items:center;
    }
    .eyebrow{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:7px 11px;
        border:1px solid rgba(255,255,255,.14);
        background:rgba(255,255,255,.06);
        border-radius:999px;
        font-size:11px;
        font-weight:850;
        letter-spacing:.08em;
        text-transform:uppercase;
        color:#dce8ff;
    }
    .eyebrow i{color:#5eead4}
    .hero h1{
        margin:18px 0 16px;
        max-width:850px;
        font-size:clamp(38px,5vw,66px);
        line-height:1.02;
        letter-spacing:-.045em;
        font-weight:950;
    }
    .hero h1 span{
        background:linear-gradient(90deg,#fff,#a9d7ff 45%,#c4b5fd);
        -webkit-background-clip:text;
        background-clip:text;
        color:transparent;
    }
    .hero-copy{
        max-width:720px;
        margin:0;
        color:#b8c7dc;
        font-size:17px;
        line-height:1.75;
    }
    .hero-actions{
        display:flex;
        flex-wrap:wrap;
        gap:12px;
        margin-top:27px;
    }
    .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:9px;
        min-height:48px;
        padding:0 18px;
        border-radius:14px;
        text-decoration:none;
        font-size:13px;
        font-weight:900;
        transition:.25s ease;
    }
    .btn-primary{
        background:#fff;
        color:#0b1730;
        box-shadow:0 14px 30px rgba(0,0,0,.18);
    }
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 35px rgba(0,0,0,.24)}
    .btn-ghost{
        color:#fff;
        border:1px solid rgba(255,255,255,.18);
        background:rgba(255,255,255,.06);
    }
    .btn-ghost:hover{background:rgba(255,255,255,.11)}
    .hero-points{
        display:flex;
        flex-wrap:wrap;
        gap:14px 20px;
        margin-top:25px;
        color:#cbd7e8;
        font-size:12px;
        font-weight:750;
    }
    .hero-points span{display:inline-flex;align-items:center;gap:7px}
    .hero-points i{color:#34d399}

    /* Search card */
    .search-card{
        position:relative;
        padding:23px;
        border-radius:28px;
        background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.055));
        border:1px solid rgba(255,255,255,.14);
        box-shadow:0 30px 70px rgba(0,0,0,.28);
        backdrop-filter:blur(20px);
    }
    .search-card h2{
        margin:0 0 6px;
        font-size:21px;
        letter-spacing:-.02em;
    }
    .search-card p{
        margin:0 0 18px;
        color:#b6c5da;
        font-size:12px;
    }
    .search-form{
        display:grid;
        grid-template-columns:1fr;
        gap:9px;
    }
    .search-field{
        display:flex;
        align-items:center;
        gap:10px;
        background:#fff;
        border:1px solid rgba(255,255,255,.2);
        border-radius:14px;
        padding:0 13px;
        min-height:51px;
    }
    .search-field i{color:var(--blue);width:18px;text-align:center}
    .search-field input,.search-field select{
        width:100%;
        border:0;
        outline:0;
        background:transparent;
        color:#172033;
        font-size:13px;
        font-weight:650;
        min-width:0;
    }
    .search-submit{
        border:0;
        min-height:51px;
        border-radius:14px;
        cursor:pointer;
        background:linear-gradient(135deg,#38bdf8,#2563eb);
        color:#fff;
        font-weight:900;
        box-shadow:0 12px 25px rgba(37,99,235,.30);
    }
    .search-links{
        display:flex;
        justify-content:space-between;
        gap:10px;
        margin-top:12px;
        font-size:11px;
    }
    .search-links a{color:#dbeafe;text-decoration:none;font-weight:750}
    .search-links a:hover{text-decoration:underline}

    /* Trust strip */
    .trust-strip{
        position:relative;
        margin-top:-1px;
        background:#fff;
        border-bottom:1px solid var(--line);
    }
    .trust-grid{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:0;
    }
    .trust-item{
        padding:19px 20px;
        display:flex;
        align-items:center;
        gap:12px;
        border-right:1px solid var(--line);
    }
    .trust-item:last-child{border-right:0}
    .trust-icon{
        width:42px;height:42px;
        display:grid;place-items:center;
        border-radius:13px;
        background:#edf4ff;
        color:var(--blue);
    }
    .trust-item strong{display:block;font-size:13px}
    .trust-item span{display:block;color:var(--muted);font-size:10px;margin-top:1px}

    /* Section shell */
    .section{padding:62px 0}
    .section.alt{background:#fff}
    .section-head{
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        gap:25px;
        margin-bottom:24px;
    }
    .section-kicker{
        color:var(--blue);
        font-size:11px;
        font-weight:950;
        letter-spacing:.12em;
        text-transform:uppercase;
        margin-bottom:7px;
    }
    .section h2{
        margin:0;
        font-size:clamp(25px,3vw,36px);
        line-height:1.1;
        letter-spacing:-.035em;
    }
    .section-head p{
        margin:0;
        color:var(--muted);
        max-width:610px;
        font-size:13px;
    }
    .section-link{
        text-decoration:none;
        white-space:nowrap;
        color:var(--blue);
        font-size:12px;
        font-weight:900;
    }

    /* Category rail */
    .category-rail{
        display:grid;
        grid-template-columns:repeat(6,1fr);
        gap:13px;
    }
    .category-card{
        position:relative;
        min-height:145px;
        padding:18px;
        background:#fff;
        border:1px solid var(--line);
        border-radius:20px;
        text-decoration:none;
        overflow:hidden;
        box-shadow:0 8px 26px rgba(7,17,31,.045);
        transition:.25s ease;
    }
    .category-card:after{
        content:"";
        position:absolute;
        width:90px;height:90px;
        right:-35px;bottom:-35px;
        border-radius:50%;
        background:#edf4ff;
    }
    .category-card:hover{
        transform:translateY(-5px);
        border-color:#c9d9f7;
        box-shadow:0 18px 38px rgba(37,99,235,.11);
    }
    .category-icon{
        width:47px;height:47px;
        display:grid;place-items:center;
        border-radius:15px;
        color:#fff;
        background:linear-gradient(135deg,#2563eb,#6d5dfc);
        box-shadow:0 10px 20px rgba(37,99,235,.20);
        margin-bottom:18px;
    }
    .category-card h3{margin:0 0 4px;font-size:14px}
    .category-card p{margin:0;color:var(--muted);font-size:10px;line-height:1.45}

    /* Browse panels */
    .browse-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:18px;
    }
    .browse-panel{
        padding:22px;
        border:1px solid var(--line);
        border-radius:24px;
        background:
            radial-gradient(circle at 90% 0%,rgba(37,99,235,.08),transparent 28%),
            #fff;
        box-shadow:0 10px 30px rgba(7,17,31,.05);
    }
    .browse-title{display:flex;align-items:center;gap:12px;margin-bottom:16px}
    .browse-title .icon{
        width:44px;height:44px;border-radius:13px;
        display:grid;place-items:center;
        background:#edf4ff;color:var(--blue);
    }
    .browse-title h3{margin:0;font-size:17px}
    .browse-title p{margin:1px 0 0;color:var(--muted);font-size:10px}
    .browse-panel select{
        width:100%;
        min-height:50px;
        padding:0 15px;
        border:1px solid var(--line);
        border-radius:13px;
        outline:none;
        color:#172033;
        background:#fbfdff;
        font-size:13px;
        font-weight:700;
    }
    .browse-panel select:focus{border-color:#8fb1ef;box-shadow:0 0 0 4px rgba(37,99,235,.08)}

    /* Featured listings */
    .featured-wrap{
        position:relative;
        overflow:hidden;
    }
    .featured-track{
        display:flex;
        gap:15px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
        padding:4px 2px 12px;
    }
    .featured-track::-webkit-scrollbar{display:none}
    .feature-card{
        flex:0 0 270px;
        scroll-snap-align:start;
        background:#fff;
        border:1px solid var(--line);
        border-radius:20px;
        overflow:hidden;
        text-decoration:none;
        box-shadow:0 9px 28px rgba(7,17,31,.06);
        transition:.25s ease;
    }
    .feature-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(7,17,31,.11)}
    .feature-image{height:165px;background:#eaf0f8;overflow:hidden;position:relative}
    .feature-image img{width:100%;height:100%;object-fit:cover}
    .feature-body{padding:14px}
    .feature-body h3{
        margin:0 0 8px;
        font-size:14px;
        line-height:1.35;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .feature-meta{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--muted)}
    .feature-price{color:var(--green);font-weight:900}

    /* Latest grid */
    .latest-grid{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:16px;
    }
    .ad-card{
        position:relative;
        overflow:hidden;
        background:#fff;
        border:1px solid var(--line);
        border-radius:20px;
        box-shadow:0 7px 25px rgba(7,17,31,.05);
        transition:.25s ease;
    }
    .ad-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(7,17,31,.10)}
    .ad-card-link{text-decoration:none;display:block}
    /* =========================================================
   AD IMAGE SCROLL GALLERY
   ========================================================= */

.ad-image{
    height:215px;
    background:#edf1f6;
    position:relative;
    overflow:hidden;
}

/* Horizontal image track */
.ad-image-track{
    display:flex;
    width:100%;
    height:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
}

.ad-image-track::-webkit-scrollbar{
    display:none;
}

/* Each image */
.ad-image-slide{
    flex:0 0 100%;
    width:100%;
    height:100%;
    scroll-snap-align:start;
    position:relative;
    overflow:hidden;
}

.ad-image-slide img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .35s ease;
}

.ad-card:hover .ad-image-slide img{
    transform:scale(1.03);
}


/* Image counter */
.ad-image-count{
    position:absolute;
    right:10px;
    bottom:10px;
    z-index:5;

    display:inline-flex;
    align-items:center;
    gap:5px;

    padding:5px 9px;
    border-radius:999px;

    background:rgba(0,0,0,.68);
    color:#fff;

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

    backdrop-filter:blur(8px);
}


/* Swipe hint */
.ad-image-swipe{
    position:absolute;
    left:10px;
    bottom:10px;
    z-index:5;

    display:none;
    align-items:center;
    gap:5px;

    padding:5px 9px;
    border-radius:999px;

    background:rgba(0,0,0,.55);
    color:#fff;

    font-size:9px;
    font-weight:750;

    pointer-events:none;
}


/* Small navigation dots */
.ad-image-dots{
    position:absolute;
    left:50%;
    bottom:9px;
    transform:translateX(-50%);

    display:flex;
    align-items:center;
    gap:4px;

    z-index:6;

    pointer-events:none;
}

.ad-image-dot{
    width:5px;
    height:5px;
    border-radius:50%;
    background:rgba(255,255,255,.65);
}

.ad-image-dot:first-child{
    width:16px;
    border-radius:10px;
    background:#fff;
}


/* Mobile */
@media(max-width:700px){

    .ad-image{
        height:220px;
    }

    .ad-image-swipe{
        display:inline-flex;
    }

}


/* Very small phones */
@media(max-width:420px){

    .ad-image{
        height:205px;
    }

}
    .ad-card:hover .ad-image img{transform:scale(1.04)}
    .badge{
        position:absolute;top:11px;
        padding:5px 8px;
        border-radius:999px;
        font-size:9px;
        font-weight:950;
        letter-spacing:.04em;
        text-transform:uppercase;
    }
    .badge.featured{left:11px;background:#fef3c7;color:#92400e}
    .badge.top{right:11px;background:#fee2e2;color:#b91c1c}
    .ad-body{padding:14px}
    .ad-body h3{
        margin:0 0 7px;
        font-size:14px;
        line-height:1.4;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .ad-price{margin:0;color:var(--green);font-size:14px;font-weight:950}
    .ad-location{margin:4px 0 0;color:var(--muted);font-size:10px;display:flex;gap:5px;align-items:center}
    .ad-date{margin:9px 0 0;color:#94a3b8;font-size:9px}
    .empty-state{
        grid-column:1/-1;
        padding:45px 20px;
        text-align:center;
        color:var(--muted);
        background:#fff;
        border:1px dashed #ccd5e2;
        border-radius:20px;
    }

    /* SEO city explorer */
    .city-explorer{
        background:
            radial-gradient(circle at 10% 20%,rgba(34,211,238,.12),transparent 24%),
            radial-gradient(circle at 90% 80%,rgba(124,58,237,.12),transparent 28%),
            #07111f;
        color:#fff;
        border-radius:32px;
        padding:38px;
        overflow:hidden;
        position:relative;
    }
    .city-explorer .section-kicker{color:#67e8f9}
    .city-explorer .section-head p{color:#a9b9cd}
    .city-grid{
        display:grid;
        grid-template-columns:repeat(6,1fr);
        gap:8px;
        max-height:245px;
        overflow:auto;
        padding-right:5px;
    }
    .city-grid::-webkit-scrollbar{width:6px}
    .city-grid::-webkit-scrollbar-thumb{background:#334155;border-radius:20px}
    .city-link{
        display:flex;
        align-items:center;
        gap:7px;
        min-width:0;
        padding:9px 10px;
        border:1px solid rgba(255,255,255,.09);
        background:rgba(255,255,255,.045);
        border-radius:11px;
        color:#dce7f5;
        text-decoration:none;
        font-size:10px;
        font-weight:750;
        transition:.2s ease;
    }
    .city-link i{font-size:8px;color:#5eead4}
    .city-link:hover{background:rgba(255,255,255,.09);color:#fff;border-color:rgba(103,232,249,.25)}

    /* Category discovery */
    .pill-cloud{display:flex;flex-wrap:wrap;gap:9px}
    .pill{
        display:inline-flex;
        align-items:center;
        gap:7px;
        padding:9px 12px;
        border:1px solid var(--line);
        background:#fff;
        border-radius:999px;
        color:#334155;
        text-decoration:none;
        font-size:10px;
        font-weight:800;
        transition:.2s ease;
    }
    .pill i{color:var(--blue);font-size:9px}
    .pill:hover{border-color:#bfd2f4;background:#f7faff;color:var(--blue);transform:translateY(-1px)}

    /* Value section */
    .premium-value-section {
    position: relative;
    padding: 95px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(59,130,246,.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(139,92,246,.08),
            transparent 30%
        ),
        #f8fafc;
}


/* SUBTLE BACKGROUND GRID */

.premium-value-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(15,23,42,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(15,23,42,.035) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

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

    pointer-events: none;
}


/* SECTION HEADING */

.section-heading {
    position: relative;
    z-index: 2;

    max-width: 780px;
    margin: 0 auto 55px;

    text-align: center;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 15px;

    border: 1px solid rgba(59,130,246,.16);
    border-radius: 999px;

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

    color: #2563eb;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;

    box-shadow:
        0 8px 25px rgba(15,23,42,.05);
}

.section-heading h2 {
    margin: 18px 0 15px;

    color: #0f172a;

    font-size: clamp(34px, 5vw, 54px);
    line-height: 1.08;
    letter-spacing: -1.8px;
    font-weight: 900;
}

.section-heading h2 span {
    background: linear-gradient(
        90deg,
        #2563eb,
        #7c3aed
    );

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

    color: transparent;
}

.section-heading p {
    margin: 0 auto;

    max-width: 700px;

    color: #64748b;

    font-size: 17px;
    line-height: 1.75;
}


/* ==========================================
   CARD GRID
========================================== */

.premium-grid {
    position: relative;
    z-index: 2;

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

    gap: 25px;
}


/* CARD */

.premium-card {
    position: relative;

    min-height: 385px;

    padding: 32px;

    border: 1px solid rgba(148,163,184,.22);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(248,250,252,.94)
        );

    box-shadow:
        0 15px 45px rgba(15,23,42,.07),
        inset 0 1px 0 rgba(255,255,255,.9);

    overflow: hidden;

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

.premium-card:hover {
    transform: translateY(-10px);

    border-color: rgba(59,130,246,.3);

    box-shadow:
        0 25px 65px rgba(15,23,42,.13);
}


/* CARD GLOW */

.card-glow {
    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    top: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.16),
            transparent 70%
        );

    transition: .4s ease;

    pointer-events: none;
}

.premium-card:hover .card-glow {
    transform: scale(1.5);
}


/* CARD TOP */

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 30px;
}

.v-icon {
    width: 62px;
    height: 62px;

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

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #eef2ff
        );

    border: 1px solid rgba(59,130,246,.13);

    color: #2563eb;

    font-size: 24px;

    box-shadow:
        0 10px 25px rgba(37,99,235,.1);

    transition: .35s ease;
}

.premium-card:hover .v-icon {
    transform: rotate(-5deg) scale(1.08);
}

.card-number {
    font-size: 12px;
    font-weight: 900;

    color: #94a3b8;

    letter-spacing: .12em;
}


/* CONTENT */

.card-content {
    position: relative;
    z-index: 2;
}

.card-content h3 {
    margin: 0 0 15px;

    color: #0f172a;

    font-size: 23px;
    line-height: 1.25;

    font-weight: 850;
    letter-spacing: -.4px;
}

.card-content p {
    margin: 0;

    color: #64748b;

    font-size: 15px;
    line-height: 1.75;
}

.card-content strong {
    color: #334155;
}


/* TAGS */

.feature-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 25px;
}

.feature-tags span {
    display: inline-flex;

    padding: 7px 10px;

    border-radius: 9px;

    background: #f1f5f9;

    color: #475569;

    font-size: 11px;
    font-weight: 750;

    border: 1px solid #e2e8f0;
}


/* ARROW */

.card-arrow {
    position: absolute;

    right: 28px;
    bottom: 28px;

    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    background: #f1f5f9;

    color: #64748b;

    transition: .3s ease;
}

.premium-card:hover .card-arrow {
    background: #2563eb;
    color: white;

    transform: translateX(4px);
}


/* FEATURED CARD */

.featured-value {
    border-color: rgba(37,99,235,.22);

    box-shadow:
        0 20px 55px rgba(37,99,235,.11);
}

.popular-badge {
    position: absolute;

    top: 0;
    left: 50%;

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

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 15px;

    border-radius: 0 0 12px 12px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

    color: white;

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

    letter-spacing: .04em;

    white-space: nowrap;
}


/* ==========================================
   TRUST STRIP
========================================== */

.value-trust-strip {
    position: relative;
    z-index: 2;

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

    margin-top: 35px;

    padding: 20px;

    border: 1px solid rgba(148,163,184,.2);

    border-radius: 22px;

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

    backdrop-filter: blur(16px);

    box-shadow:
        0 15px 45px rgba(15,23,42,.05);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 8px 20px;

    border-right: 1px solid #e2e8f0;
}

.trust-item:last-child {
    border-right: 0;
}

.trust-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    border-radius: 12px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 16px;
}

.trust-item strong {
    display: block;

    color: #0f172a;

    font-size: 13px;
    font-weight: 850;
}

.trust-item span {
    display: block;

    margin-top: 3px;

    color: #94a3b8;

    font-size: 11px;
}


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

@media (max-width: 1000px) {

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

    .premium-card:last-child {
        grid-column: 1 / -1;
    }

    .value-trust-strip {
        grid-template-columns: 1fr 1fr;
    }

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

    .trust-item:nth-child(3),
    .trust-item:nth-child(4) {
        margin-top: 10px;
    }

}


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

@media (max-width: 680px) {

    .premium-value-section {
        padding: 65px 0;
    }

    .section-heading {
        margin-bottom: 35px;
        padding: 0 8px;
    }

    .section-heading h2 {
        font-size: 34px;
        letter-spacing: -1.2px;
    }

    .section-heading p {
        font-size: 15px;
        line-height: 1.7;
    }

    .premium-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .premium-card,
    .premium-card:last-child {
        grid-column: auto;

        min-height: auto;

        padding: 25px;

        border-radius: 22px;
    }

    .card-top {
        margin-bottom: 25px;
    }

    .v-icon {
        width: 54px;
        height: 54px;

        border-radius: 15px;

        font-size: 21px;
    }

    .card-content h3 {
        font-size: 21px;
    }

    .card-content p {
        font-size: 14px;
    }

    .feature-tags {
        padding-right: 35px;
    }

    .value-trust-strip {
        grid-template-columns: 1fr;

        padding: 12px;

        border-radius: 18px;
    }

    .trust-item,
    .trust-item:nth-child(3),
    .trust-item:nth-child(4) {
        margin: 0;

        padding: 14px 10px;

        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .trust-item:last-child {
        border-bottom: 0;
    }

    .popular-badge {
        font-size: 9px;
    }

}


/* ACCESSIBILITY */

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

    .premium-card,
    .v-icon,
    .card-arrow,
    .card-glow {
        transition: none;
    }

}
    /* FAQ */
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    details{
        background:#fff;
        border:1px solid var(--line);
        border-radius:16px;
        padding:0 17px;
    }
    summary{
        cursor:pointer;
        list-style:none;
        padding:16px 0;
        font-size:13px;
        font-weight:850;
    }
    summary::-webkit-details-marker{display:none}
    details p{margin:0 0 16px;color:var(--muted);font-size:11px;line-height:1.7}

    /* Services / category directory */
    .directory{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:18px;
    }
    .directory-card{
        padding:22px;
        border:1px solid var(--line);
        background:#fff;
        border-radius:20px;
    }
    .directory-card h3{margin:0 0 13px;font-size:15px}
    .directory-card .pill-cloud{max-height:220px;overflow:auto;align-content:flex-start}
    .directory-card .pill{font-size:9px;padding:7px 9px}

    /* CTA */
    .cta-banner{
        display:grid;
        grid-template-columns:1fr auto;
        gap:25px;
        align-items:center;
        padding:34px;
        color:#fff;
        background:linear-gradient(135deg,#2563eb,#4f46e5 55%,#7c3aed);
        border-radius:28px;
        box-shadow:0 25px 55px rgba(37,99,235,.22);
    }
    .cta-banner h2{margin:0 0 7px;font-size:28px;letter-spacing:-.03em}
    .cta-banner p{margin:0;color:#dbeafe;font-size:12px;max-width:720px}
    .cta-banner .btn{background:#fff;color:#172033}
    /* ==========================================
   TESTIMONIALS - PREMIUM RESPONSIVE SECTION
========================================== */

.testimonials-section{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 10% 10%, rgba(37,99,235,.08), transparent 28%),
        radial-gradient(circle at 90% 80%, rgba(124,58,237,.08), transparent 30%),
        #f8fafc;
}

.testimonials-header{
    max-width:760px;
    margin:0 auto 42px;
    text-align:center;
}

.testimonials-header .section-kicker{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:10px;
}

.testimonials-header .section-kicker::before{
    content:"";
    width:24px;
    height:3px;
    border-radius:10px;
    background:#2563eb;
}

.testimonials-header h2{
    margin:0;
    font-size:clamp(30px,4vw,46px);
    line-height:1.1;
    letter-spacing:-.045em;
    color:#0f172a;
}

.testimonials-header p{
    max-width:650px;
    margin:14px auto 0;
    color:#64748b;
    font-size:14px;
    line-height:1.8;
}

/* Rating summary */

.testimonial-rating{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:18px;
}

.testimonial-stars{
    color:#f59e0b;
    letter-spacing:2px;
    font-size:16px;
}

.testimonial-rating strong{
    color:#0f172a;
    font-size:14px;
}

.testimonial-rating span{
    color:#94a3b8;
    font-size:12px;
}

/* Cards */

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

.testimonial-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:285px;
    padding:27px;
    background:rgba(255,255,255,.94);
    border:1px solid #e2e8f0;
    border-radius:24px;
    box-shadow:0 14px 40px rgba(15,23,42,.06);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.testimonial-card:hover{
    transform:translateY(-7px);
    box-shadow:0 24px 55px rgba(15,23,42,.11);
    border-color:#bfdbfe;
}

.testimonial-card::before{
    content:"“";
    position:absolute;
    top:12px;
    right:23px;
    font-family:Georgia,serif;
    font-size:76px;
    line-height:1;
    color:#dbeafe;
    pointer-events:none;
}

.testimonial-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:21px;
}

.testimonial-user{
    display:flex;
    align-items:center;
    gap:12px;
}

.testimonial-avatar{
    width:50px;
    height:50px;
    flex:0 0 50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    color:#fff;
    font-weight:900;
    font-size:17px;
    box-shadow:0 8px 20px rgba(37,99,235,.2);
}

.testimonial-user h3{
    margin:0;
    color:#0f172a;
    font-size:14px;
    font-weight:850;
}

.testimonial-user span{
    display:block;
    margin-top:3px;
    color:#94a3b8;
    font-size:11px;
}

.testimonial-verified{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:6px 9px;
    border-radius:999px;
    background:#f0fdf4;
    color:#15803d;
    font-size:9px;
    font-weight:850;
    white-space:nowrap;
}

.testimonial-verified i{
    font-size:10px;
}

.testimonial-stars-card{
    margin-bottom:13px;
    color:#f59e0b;
    font-size:13px;
    letter-spacing:1.5px;
}

.testimonial-card blockquote{
    position:relative;
    z-index:1;
    margin:0;
    color:#475569;
    font-size:13px;
    line-height:1.85;
}

.testimonial-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:auto;
    padding-top:21px;
}

.testimonial-use{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#64748b;
    font-size:10px;
    font-weight:750;
}

.testimonial-use i{
    color:#2563eb;
}

.testimonial-date{
    color:#cbd5e1;
    font-size:9px;
}

/* Bottom trust statement */

.testimonials-trust{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:35px auto 0;
    max-width:700px;
    padding:14px 18px;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:18px;
    box-shadow:0 8px 25px rgba(15,23,42,.04);
    color:#64748b;
    font-size:11px;
    text-align:center;
}

.testimonials-trust i{
    color:#2563eb;
    font-size:16px;
}

/* Tablet */

@media(max-width:1000px){
    .testimonials-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .testimonial-card:last-child{
        grid-column:1 / -1;
    }
}

/* Mobile */

@media(max-width:680px){

    .testimonials-section{
        padding:58px 0;
    }

    .testimonials-header{
        margin-bottom:30px;
        padding:0 8px;
    }

    .testimonials-header h2{
        font-size:32px;
        letter-spacing:-1.1px;
    }

    .testimonials-header p{
        font-size:13px;
        line-height:1.75;
    }

    .testimonial-rating{
        flex-wrap:wrap;
        gap:6px;
    }

    .testimonials-grid{
        display:flex;
        overflow-x:auto;
        gap:14px;
        padding:5px 4px 18px;
        margin:0 -4px;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .testimonials-grid::-webkit-scrollbar{
        display:none;
    }

    .testimonial-card,
    .testimonial-card:last-child{
        flex:0 0 86%;
        min-height:300px;
        grid-column:auto;
        padding:23px;
        border-radius:21px;
        scroll-snap-align:start;
    }

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

    .testimonial-top{
        margin-bottom:18px;
    }

    .testimonial-avatar{
        width:46px;
        height:46px;
        flex-basis:46px;
        border-radius:14px;
    }

    .testimonial-verified{
        padding:5px 7px;
        font-size:8px;
    }

    .testimonial-card blockquote{
        font-size:13px;
        line-height:1.8;
    }

    .testimonials-trust{
        margin-top:20px;
        padding:13px 14px;
        font-size:10px;
        line-height:1.6;
    }
}

@media(max-width:430px){

    .testimonials-header h2{
        font-size:29px;
    }

    .testimonial-card{
        flex-basis:91%;
        min-height:290px;
        padding:21px;
    }

    .testimonial-user h3{
        font-size:13px;
    }

    .testimonial-user span{
        font-size:10px;
    }

    .testimonial-card blockquote{
        font-size:12px;
    }
}

/* Reduced motion */

@media(prefers-reduced-motion:reduce){
    .testimonial-card{
        transition:none;
    }

    .testimonials-grid{
        scroll-behavior:auto;
    }
}
    /* Footer */
    footer{
        background:#050b14;
        color:#b8c5d7;
        padding:54px 0 25px;
    }
    .footer-grid{
        display:grid;
        grid-template-columns:1.3fr repeat(3,1fr);
        gap:35px;
        padding-bottom:38px;
        border-bottom:1px solid rgba(255,255,255,.09);
    }
    .footer-brand img{height:43px;width:auto;filter:brightness(1.08)}
    .footer-brand p{font-size:11px;line-height:1.8;color:#8798ae;max-width:370px;margin:16px 0}
    .footer-col h3{color:#fff;font-size:12px;margin:0 0 13px}
    .footer-col a{
        display:block;
        color:#94a3b8;
        text-decoration:none;
        font-size:10px;
        margin:8px 0;
    }
    .footer-col a:hover{color:#fff}
    .footer-bottom{
        padding-top:20px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:15px;
        font-size:10px;
        color:#718198;
    }
    .footer-bottom-links{display:flex;gap:14px;flex-wrap:wrap}
    .footer-bottom a{color:#9aacbf;text-decoration:none}
    .footer-bottom a:hover{color:#fff}
    /* =========================================================
   FOOTER SOCIAL MEDIA ICONS
========================================================= */

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.footer-bottom-links .footer-social {
    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border-radius: 50%;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.08);

    color: #9aacbf;
    text-decoration: none;

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

.footer-bottom-links .footer-social i {
    font-size: 12px;
}

.footer-bottom-links .footer-social:hover {
    transform: translateY(-3px);
    background: #fff;
    border-color: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

/* Brand hover colors */

.footer-bottom-links .footer-social:nth-of-type(6):hover {
    color: #16a34a;
}

.footer-bottom-links .footer-social:nth-of-type(7):hover {
    color: #25D366;
}

.footer-bottom-links .footer-social:nth-of-type(8):hover {
    color: #1877F2;
}

.footer-bottom-links .footer-social:nth-of-type(9):hover {
    color: #E4405F;
}

.footer-bottom-links .footer-social:nth-of-type(10):hover {
    color: #000;
}

.footer-bottom-links .footer-social:nth-of-type(11):hover {
    color: #0A66C2;
}

.footer-bottom-links .footer-social:nth-of-type(12):hover {
    color: #BD081C;
}


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

@media (max-width: 768px) {

    .footer-bottom-links {
        justify-content: center;
        gap: 10px;
    }

    .footer-bottom-links .footer-social {
        width: 30px;
        height: 30px;
    }

    .footer-bottom-links .footer-social i {
        font-size: 13px;
    }

}
    /* Floating desktop CTA */
    .floating{
        position:fixed;
        right:18px;
        bottom:18px;
        z-index:900;
        display:flex;
        flex-direction:column;
        gap:9px;
    }
    .floating a{
        display:flex;
        align-items:center;
        gap:9px;
        text-decoration:none;
        padding:10px 13px;
        border-radius:999px;
        color:#fff;
        font-size:11px;
        font-weight:900;
        box-shadow:0 12px 28px rgba(7,17,31,.18);
    }
    .floating .post{background:linear-gradient(135deg,#2563eb,#1747c9)}
    .floating .business{background:linear-gradient(135deg,#f97316,#ea580c)}

    /* Mobile bottom bar */
    .mobile-bar{
        display:none;
    }

    /* Responsive */
    @media (max-width:1120px){
        .desktop-nav{display:none}
        .menu-btn{display:grid;place-items:center;margin-left:auto}
        .nav-actions{display:none}
        .hero-grid{grid-template-columns:1fr 400px;gap:28px}
        .category-rail{grid-template-columns:repeat(4,1fr)}
        .latest-grid{grid-template-columns:repeat(3,1fr)}
        .city-grid{grid-template-columns:repeat(4,1fr)}
    }
    @media (max-width:900px){
        .hero{padding:54px 0 40px}
        .hero-grid{grid-template-columns:1fr}
        .hero h1{max-width:760px}
        .search-card{max-width:650px}
        .trust-grid{grid-template-columns:repeat(2,1fr)}
        .trust-item:nth-child(2){border-right:0}
        .trust-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
        .latest-grid{grid-template-columns:repeat(2,1fr)}
        .city-grid{grid-template-columns:repeat(3,1fr)}
        .directory{grid-template-columns:1fr 1fr}
        .footer-grid{grid-template-columns:1.5fr 1fr 1fr}
        .footer-grid .footer-col:last-child{display:none}
    }
    @media (max-width:680px){
        :root{--container:min(100% - 20px,1240px)}
        .utility-left span:not(.dot),.utility-right a:not(:last-child){display:none}
        .utility-inner{justify-content:space-between}
        .nav-shell{min-height:64px}
        .brand img{height:38px}
        .mobile-menu{
            display:none;
            position:absolute;
            left:10px;right:10px;
            top:64px;
            max-height:calc(100vh - 74px);
            overflow:auto;
            padding:8px;
            background:#fff;
            border:1px solid var(--line);
            border-radius:16px;
            box-shadow:0 20px 50px rgba(7,17,31,.16);
        }
        .mobile-menu.open{display:block}
        .mobile-menu a{
            display:flex;align-items:center;gap:11px;
            padding:12px;
            text-decoration:none;
            font-size:12px;
            font-weight:800;
            border-radius:11px;
        }
        .mobile-menu a:hover{background:#f1f5f9;color:var(--blue)}
        .hero{padding:42px 0 34px}
        .hero h1{font-size:39px}
        .hero-copy{font-size:14px}
        .hero-actions .btn{width:100%}
        .search-card{padding:17px;border-radius:22px}
        .trust-grid{grid-template-columns:1fr}
        .trust-item{border-right:0!important;border-bottom:1px solid var(--line)!important}
        .trust-item:last-child{border-bottom:0!important}
        .section{padding:45px 0}
        .section-head{display:block}
        .section-head p{margin-top:8px}
        .section-link{display:inline-block;margin-top:10px}
        .category-rail{
            display:flex;
            overflow-x:auto;
            scroll-snap-type:x mandatory;
            padding-bottom:7px;
            scrollbar-width:none;
        }
        .category-rail::-webkit-scrollbar{display:none}
        .category-card{flex:0 0 145px;scroll-snap-align:start;min-height:135px}
        .browse-grid,.faq-grid,.directory{grid-template-columns:1fr}
        .latest-grid{grid-template-columns:repeat(2,1fr);gap:10px}
        .ad-image{height:155px}
        .ad-body{padding:11px}
        .ad-body h3{font-size:12px}
        .ad-price{font-size:12px}
        .city-explorer{padding:23px;border-radius:24px}
        .city-grid{grid-template-columns:repeat(2,1fr);max-height:300px}
        .city-link{font-size:9px}
        .cta-banner{grid-template-columns:1fr;padding:25px}
        .cta-banner h2{font-size:24px}
        .floating{display:none}
        .mobile-bar{
            position:fixed;
            display:grid;
            grid-template-columns:repeat(4,1fr);
            left:0;right:0;bottom:0;
            z-index:1200;
            background:rgba(255,255,255,.97);
            backdrop-filter:blur(14px);
            border-top:1px solid var(--line);
            box-shadow:0 -10px 30px rgba(7,17,31,.10);
            padding-bottom:env(safe-area-inset-bottom);
        }
        .mobile-bar a{
            text-decoration:none;
            display:flex;
            flex-direction:column;
            align-items:center;
            gap:3px;
            padding:8px 2px;
            color:#475569;
            font-size:9px;
            font-weight:800;
        }
        .mobile-bar i{font-size:17px;color:var(--blue)}
        .mobile-bar .primary{color:var(--blue)}
        body{padding-bottom:61px}
        .footer-grid{grid-template-columns:1fr 1fr}
        .footer-grid .footer-col:last-child{display:block}
        .footer-bottom{display:block}
        .footer-bottom-links{margin-top:10px}
    }
    @media (max-width:430px){
        .hero h1{font-size:34px}
        .hero-points{display:grid;grid-template-columns:1fr 1fr;gap:9px}
        .latest-grid{gap:8px}
        .ad-image{height:135px}
        .city-grid{gap:6px}
        .city-link{padding:8px;font-size:8.5px}
    }
    /* =========================================================
   FLOATING TOP & FEATURED ADS
========================================================= */

.floating-featured-ads{
    position:fixed;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    width:310px;
    max-height:78vh;
    background:rgba(255,255,255,.97);
    border:1px solid rgba(37,99,235,.15);
    border-radius:20px;
    box-shadow:0 25px 70px rgba(7,17,31,.20);
    z-index:9998;
    overflow:hidden;
    backdrop-filter:blur(14px);
    animation:floatingAdsIn .6s ease both;
}

@keyframes floatingAdsIn{
    from{
        opacity:0;
        transform:translate(-25px,-50%);
    }
    to{
        opacity:1;
        transform:translate(0,-50%);
    }
}


/* Header */

.floating-featured-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 15px;
    background:linear-gradient(135deg,#07111f,#172b4d);
    color:#fff;
}

.floating-featured-title{
    display:flex;
    align-items:center;
    gap:10px;
}

.floating-featured-title strong{
    display:block;
    font-size:14px;
    line-height:1.2;
}

.floating-featured-title small{
    display:block;
    margin-top:2px;
    font-size:11px;
    opacity:.75;
}

.floating-fire{
    width:38px;
    height:38px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.12);
    font-size:17px;
}

.floating-close{
    width:30px;
    height:30px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.10);
    color:#fff;
    cursor:pointer;
    transition:.2s ease;
}

.floating-close:hover{
    background:rgba(255,255,255,.22);
    transform:rotate(90deg);
}


/* Listing area */

.floating-featured-list{
    max-height:calc(78vh - 112px);
    overflow-y:auto;
    padding:8px;
}

.floating-featured-list::-webkit-scrollbar{
    width:5px;
}

.floating-featured-list::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:20px;
}


/* Individual ad */

.floating-ad-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px;
    margin-bottom:6px;
    text-decoration:none;
    border-radius:14px;
    border:1px solid transparent;
    background:#fff;
    transition:.22s ease;
}

.floating-ad-item:hover{
    background:#f8fbff;
    border-color:#dbe7ff;
    transform:translateX(3px);
    box-shadow:0 8px 20px rgba(7,17,31,.07);
}


/* Image */

.floating-ad-image{
    position:relative;
    width:62px;
    height:62px;
    flex:0 0 62px;
    border-radius:11px;
    overflow:hidden;
    background:#eef2f7;
}

.floating-ad-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}


/* Badges */

.floating-ad-badges{
    position:absolute;
    left:3px;
    top:3px;
}

.floating-badge{
    display:inline-flex;
    align-items:center;
    gap:3px;
    padding:3px 5px;
    border-radius:5px;
    color:#fff;
    font-size:7px;
    font-weight:800;
    letter-spacing:.3px;
}

.top-badge{
    background:#111827;
}

.featured-badge{
    background:#7c3aed;
}


/* Ad information */

.floating-ad-info{
    min-width:0;
    flex:1;
}

.floating-ad-info h4{
    margin:0 18px 4px 0;
    font-size:12px;
    font-weight:700;
    line-height:1.35;
    color:#07111f;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.floating-price{
    font-size:12px;
    font-weight:800;
    color:#2563eb;
}

.floating-location{
    margin-top:2px;
    color:#64748b;
    font-size:10px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.floating-location i{
    margin-right:3px;
}


/* Arrow */

.floating-arrow{
    width:24px;
    height:24px;
    flex:0 0 24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f1f5f9;
    color:#64748b;
    font-size:9px;
    transition:.2s ease;
}

.floating-ad-item:hover .floating-arrow{
    background:#2563eb;
    color:#fff;
}


/* View all */

.floating-view-all{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 10px;
    border-top:1px solid #e6ebf2;
    background:#f8fafc;
    color:#2563eb;
    text-decoration:none;
    font-size:11px;
    font-weight:800;
}

.floating-view-all:hover{
    background:#eef5ff;
}


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

@media(max-width:900px){

    .floating-featured-ads{
        left:10px;
        bottom:78px;
        top:auto;
        transform:none;
        width:min(310px,calc(100vw - 20px));
        max-height:55vh;
        border-radius:18px;
    }

    .floating-featured-list{
        max-height:calc(55vh - 112px);
    }

    @keyframes floatingAdsIn{
        from{
            opacity:0;
            transform:translateY(20px);
        }
        to{
            opacity:1;
            transform:translateY(0);
        }
    }

}


/* Small phones */

@media(max-width:480px){

    .floating-featured-ads{
        width:calc(100vw - 20px);
        left:10px;
        bottom:72px;
    }

    .floating-featured-header{
        padding:12px;
    }

    .floating-ad-item{
        padding:8px;
    }

    .floating-ad-image{
        width:56px;
        height:56px;
        flex-basis:56px;
    }

}
/* =========================================================
   ETACKY INDIA SEO HUB
========================================================= */

.india-seo-hub{
    padding:80px 0;
    background:linear-gradient(180deg,#f8fbff,#ffffff);
}

.seo-hero{
    text-align:center;
    max-width:900px;
    margin:0 auto 45px;
}

.seo-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 15px;
    border-radius:999px;
    background:#eaf2ff;
    color:#2563eb;
    font-size:12px;
    font-weight:900;
}

.seo-hero h2{
    margin:18px 0;
    font-size:clamp(30px,4vw,46px);
    line-height:1.15;
    color:#07111f;
}

.seo-hero p{
    color:#64748b;
    font-size:16px;
    line-height:1.9;
}

.seo-feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:40px;
}

.seo-feature{
    background:#fff;
    border:1px solid #e5edf6;
    border-radius:22px;
    padding:28px;
    text-align:center;
    transition:.25s;
}

.seo-feature:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 40px rgba(7,17,31,.08);
}

.seo-feature i{
    font-size:28px;
    color:#2563eb;
    margin-bottom:14px;
}

.seo-feature h3{
    margin:0 0 10px;
    font-size:20px;
}

.seo-feature p{
    margin:0;
    color:#64748b;
    font-size:14px;
    line-height:1.7;
}

.seo-content-box{
    background:#fff;
    border:1px solid #e5edf6;
    border-radius:24px;
    padding:35px;
    margin-bottom:35px;
}

.seo-content-box h3{
    margin:0 0 15px;
    font-size:28px;
}

.seo-content-box p{
    color:#526174;
    font-size:15px;
    line-height:1.9;
}

.seo-city-wrapper{
    background:linear-gradient(135deg,#07111f,#17346c);
    border-radius:24px;
    padding:35px;
    color:#fff;
    margin-bottom:35px;
}

.seo-city-wrapper h3{
    margin:0 0 20px;
    font-size:28px;
}

.seo-city-cloud{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.seo-city-cloud a{
    padding:9px 14px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
}

.seo-city-cloud a:hover{
    background:#fff;
    color:#17346c;
}

.seo-keyword-cloud-box{
    background:#eef5ff;
    border-radius:24px;
    padding:32px;
}

.seo-keyword-cloud-box h3{
    margin:0 0 18px;
    font-size:26px;
}

.keyword-cloud{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.keyword-cloud span{
    padding:8px 13px;
    background:#fff;
    border:1px solid #d9e7ff;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    color:#334155;
}

@media(max-width:900px){

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

}

@media(max-width:600px){

    .india-seo-hub{
        padding:55px 0;
    }

    .seo-feature-grid{
        grid-template-columns:1fr;
    }

    .seo-content-box,
    .seo-city-wrapper,
    .seo-keyword-cloud-box{
        padding:22px;
    }

    .seo-city-cloud a{
        font-size:11px;
    }

}