/* =========================
   GLOBAL VARIABLES
========================= */
:root{
    --primary-color:#ff6600;
    --primary-dark:#e05500;
    --secondary-color:#111827;

    --text-color:#444;
    --text-dark:#111;
    --light-text:#666;

    --border-color:#ececec;
    --bg-light:#fff7f0;

    --white:#fff;
    --black:#000;

    --radius:18px;
    --radius-lg:22px;
    --radius-xl:24px;
    --radius-pill:60px;

    --shadow-light:0 8px 25px rgba(0,0,0,0.08);
    --shadow-card:0 10px 30px rgba(0,0,0,0.06);
    --shadow-medium:0 15px 35px rgba(0,0,0,0.12);
    --shadow-hover:0 18px 45px rgba(255,102,0,0.14);

    --gradient-primary:linear-gradient(135deg,#ff6600,#ff944d);
    --gradient-primary-soft:linear-gradient(135deg,#ff6600,#ff8f3a);
}

/* =========================
   RESET
========================= */
*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
    font-family:'Montserrat', Arial, sans-serif;
    font-size:16px;
    line-height:1.7;
    color:var(--text-color);
    background:
        radial-gradient(circle at top right, rgba(255,102,0,0.06), transparent 22%),
        linear-gradient(to bottom,#ffffff,#f9fbff);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

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

a{
    transition:0.3s ease;
}

a:focus-visible,
button:focus-visible{
    outline:3px solid var(--primary-color);
    outline-offset:3px;
}

.container{
    width:100%;
    max-width:1240px;
    margin:0 auto;
    padding:0 20px;
}

section{
    position:relative;
    padding:70px 20px;
}

/* =========================
   HEADINGS
========================= */
h1,
h2,
h3{
    margin-top:0;
    text-align:center;
    font-family:'DM Serif Display', serif;
    font-weight:400;
    color:#1f1f1f;
    letter-spacing:0.2px;
    line-height:1.3;
    text-wrap:balance;
    overflow-wrap:break-word;
    -webkit-font-smoothing:antialiased;
}

h1{
    font-size:clamp(2rem,3.6vw,3.2rem);
    line-height:1.18;
    letter-spacing:-0.6px;
    color:#111;
    margin-bottom:22px;
    opacity:0.96;
}

h2{
    font-size:clamp(1.8rem,3vw,2.7rem);
    line-height:1.25;
    letter-spacing:-0.3px;
    color:#1a1a1a;
    margin-bottom:18px;
}

h3{
    font-size:clamp(1.15rem,2vw,1.55rem);
    line-height:1.45;
    color:#222;
}

.section-title h2,
.intro h1,
.faq-card h3,
.premium-card h3{
    color:#111;
}

/* =========================
   HEADER
========================= */
.top-header{
    max-width:1280px;
    margin:0 auto;
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    flex-wrap:wrap;
}

/* =========================
   LOGO
========================= */
.logo{
    width:320px;
    min-height:120px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    text-decoration:none;
    transition:0.35s ease;
}

.logo:hover{
    transform:translateY(-4px) scale(1.02);
}

.logo-heading{
    margin:0;
    font-size:42px;
    line-height:1;
    font-weight:800;
    letter-spacing:0.5px;
}

.logo-latest{
    background:var(--gradient-primary);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.logo-directory{
    color:#2d2d2d;
}

.logo-tagline{
    margin-top:10px;
    font-size:13px;
    line-height:1.4;
    color:#666;
}

/* =========================
   HEADER ADS
========================= */
.header-ads{
    display:flex;
    align-items:center;
    gap:25px;
    flex-wrap:wrap;
}

.top-center,
.top-right{
    width:100%;
    max-width:390px;
    aspect-ratio:2/1;
    border-radius:20px;
    background-size:cover;
    background-position:center;
    overflow:hidden;
    box-shadow:var(--shadow-light);
    transition:0.4s ease;
}

.top-center{
    background-image:url(images/top-ads/latest-directory-header-center.jpg);
}

.top-right{
    background-image:url(images/top-ads/latest-directory-header-right.jpg);
}

.top-center:hover,
.top-right:hover{
    transform:translateY(-5px) scale(1.02);
    box-shadow:var(--shadow-medium);
}

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

.hero {
    position: relative;
    padding: 80px 0 70px;
    background:
        radial-gradient(circle at top right, rgba(255, 102, 0, 0.10), transparent 40%),
        radial-gradient(circle at bottom left, rgba(255, 153, 51, 0.08), transparent 45%),
        linear-gradient(135deg, #fff8f2 0%, #ffffff 45%, #fffaf5 100%);
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
        url("images/pattern-dots.svg");
    background-size: auto, 220px;
    opacity: 0.35;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 2;
}

/* ==========================================
   HERO GRID - BALANCED DESKTOP LAYOUT
========================================== */

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 60px;
    align-items: center;
}

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

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    margin: 0 auto 24px;
    border-radius: 999px;
    background: rgba(255, 102, 0, 0.10);
    color: #ff6600;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 8px 24px rgba(255, 102, 0, 0.10);
}

.hero h1 {
    margin: 0 0 22px;
    max-width: 100%;
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    line-height: 1.08;
    color: #111827;
    letter-spacing: -0.5px;
    text-align: center;
}

.hero-description {
    margin: 0 auto;
    max-width: 640px;
    font-size: 1.08rem;
    line-height: 1.9;
    color: #4b5563;
    text-align: center;
}

/* ==========================================
   FEATURE LIST
========================================== */

.feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    width: 100%;
    max-width: 560px;
    margin: 28px auto 32px;
}

.feature-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
}

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

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 560px;
    margin: 34px auto 36px;
}

.hero-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 220px;
    padding: 15px 28px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    transition: all 0.35s ease;
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.08);
}

.hero-actions .cta-primary {
    background: linear-gradient(135deg, #ff6600, #ff8c1a);
    color: #ffffff;
}

.hero-actions .cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(255, 102, 0, 0.25);
}

.hero-actions .cta-secondary {
    background: #ffffff;
    color: #111827;
    border: 1px solid rgba(17, 24, 39, 0.08);
}

.hero-actions .cta-secondary:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 102, 0, 0.30);
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.10);
}

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

.hero-visual {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.hero-visual img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 28px;
    box-shadow: 0 30px 70px rgba(17, 24, 39, 0.15);
}

/* ==========================================
   HERO VISUAL HEADING
   Place above hero image in right column
========================================== */

.hero-visual-heading {
    max-width: 560px;
    margin: 0 auto 24px;
    text-align: center;
}

.hero-visual-badge {
    display: inline-block;
    padding: 8px 16px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(255, 102, 0, 0.10);
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.hero-visual-heading h2 {
    margin: 0 0 12px;
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.6rem, 2.4vw, 2.4rem);
    line-height: 1.2;
    color: #111827;
    text-align: center;
}

.hero-visual-heading p {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.8;
    color: #6b7280;
    text-align: center;
}

/* ==========================================
   TRUST STATS BELOW IMAGE
========================================== */

.hero-stats,
.hero-visual .hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 18px;
    width: 100%;
    max-width: 560px;
    margin: 28px auto 0;
}

.hero-stats div,
.hero-visual .hero-stats div {
    padding: 18px 14px;
    text-align: center;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(17, 24, 39, 0.06);
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.05);
    -webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}

.hero-stats strong,
.hero-visual .hero-stats strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1.4rem;
    font-weight: 800;
    color: #ff6600;
}

.hero-stats span,
.hero-visual .hero-stats span {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #6b7280;
}

/* ==========================================
   BENEFITS SECTION
========================================== */

.benefits {
    padding: 85px 0;
    background: #ffffff;
}

.benefits h2 {
    margin: 0 0 16px;
    text-align: center;
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.15;
    color: #111827;
}

.benefits > .container > p,
.benefits .section-intro {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.9;
    color: #6b7280;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.benefit-card {
    position: relative;
    padding: 34px 28px;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
    border: 1px solid rgba(255, 102, 0, 0.08);
    box-shadow: 0 18px 45px rgba(17, 24, 39, 0.06);
    transition: all 0.35s ease;
    overflow: hidden;
    text-align: center;
}

.benefit-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #ff6600, #ff9a3d);
}

.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 60px rgba(17, 24, 39, 0.10);
}

.benefit-icon {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ff6600, #ff8c1a);
    color: #ffffff;
    font-size: 2rem;
    box-shadow: 0 14px 30px rgba(255, 102, 0, 0.22);
}

.benefit-card h3 {
    margin: 0 0 12px;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.4;
    color: #111827;
    text-align: center;
}

.benefit-card p {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.85;
    color: #6b7280;
    text-align: center;
}

/* ==========================================
   TRUST STRIP (OPTIONAL)
========================================== */

.trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 26px 0;
    background: #111827;
    color: #ffffff;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
}

.trust-strip div {
    padding: 8px 12px;
    opacity: 0.95;
}



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

.hero a:focus-visible,
.benefit-card:focus-within {
    outline: 3px solid rgba(255, 102, 0, 0.35);
    outline-offset: 3px;
}
/* =========================
   INTRO SECTION
========================= */
.intro{
    overflow:hidden;
    background:
        radial-gradient(circle at top right, rgba(255,102,0,0.10), transparent 28%),
        radial-gradient(circle at bottom left, rgba(255,102,0,0.06), transparent 24%),
        linear-gradient(to bottom,#ffffff,#fff7f0);
}

.intro::before{
    content:"";
    position:absolute;
    top:-180px;
    right:-120px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(255,102,0,0.08);
    filter:blur(90px);
    pointer-events:none;
}

.intro .container{
    position:relative;
    z-index:2;
    max-width:1180px;
    text-align:center;
}

.intro-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px 22px;
    margin-bottom:28px;
    border-radius:var(--radius-pill);
    background:rgba(255,102,0,0.12);
    color:var(--primary-color);
    font-size:13px;
    font-weight:700;
    letter-spacing:0.5px;
    box-shadow:0 6px 18px rgba(255,102,0,0.08);
}

.intro-badge i{ font-size:14px; }

.intro h1{
    max-width:1100px;
    margin:0 auto 26px;
    font-size:clamp(2.4rem,5vw,4.2rem);
    line-height:1.12;
    font-weight:400;
    letter-spacing:-1px;
    color:#151515;
}

.intro-text{
    max-width:1050px;
    margin:0 auto 30px;
    font-size:18px;
    line-height:1.9;
    text-align:center;
    color:#555;
}

.intro-text strong,
.intro-info-card strong{
    color:#222;
    font-weight:700;
}

/* =========================
   INTRO HIGHLIGHTS
========================= */
.intro-highlights{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:22px;
    margin:45px auto 50px;
    max-width:1180px;
}

.highlight-item,
.faq-card,
.intro-info-card{
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(255,102,0,0.10);
    box-shadow:var(--shadow-card);
    transition:0.35s ease;
}

.highlight-item{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px 22px;
    border-radius:22px;
    text-align:left;
}

.highlight-item::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(255,102,0,0.04), transparent 60%);
    pointer-events:none;
}

.highlight-item:hover,
.faq-card:hover,
.intro-info-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-hover);
}

.highlight-item i,
.intro-card-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:var(--gradient-primary);
    box-shadow:0 10px 24px rgba(255,102,0,0.25);
}

.highlight-item i{
    width:60px;
    height:60px;
    min-width:60px;
    border-radius:18px;
    font-size:22px;
}

.highlight-item span{
    display:block;
    font-size:15px;
    line-height:1.7;
    font-weight:700;
    color:#222;
}

/* =========================
   CTA BUTTONS
========================= */
.intro-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:10px;
}

.cta-primary,
.cta-secondary,
.whatsapp-btn,
.listing-whatsapp{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:16px 34px;
    border-radius:var(--radius-pill);
    text-decoration:none;
    font-size:15px;
    font-weight:700;
    transition:0.35s ease;
}

.cta-primary,
.whatsapp-btn,
.listing-whatsapp{
    background:var(--gradient-primary-soft);
    color:#fff;
    box-shadow:0 12px 30px rgba(255,102,0,0.25);
}

.cta-secondary{
    background:#fff;
    color:#111;
    border:2px solid rgba(255,102,0,0.16);
    box-shadow:0 10px 26px rgba(0,0,0,0.06);
}

.cta-primary,
.cta-secondary{ min-width:230px; overflow:hidden; }

.cta-primary:hover,
.whatsapp-btn:hover,
.listing-whatsapp:hover{
    transform:translateY(-4px) scale(1.03);
}

.cta-secondary:hover{
    background:#fff7f0;
    border-color:#ff6600;
    transform:translateY(-4px);
}

.cta-primary::before,
.cta-secondary::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:80%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
    transition:0.8s ease;
}

.cta-primary:hover::before,
.cta-secondary:hover::before{
    left:130%;
}

/* ==========================================
   HOW IT WORKS SECTION
   
========================================== */
.how-it-works {
    position: relative;
    padding: 85px 20px;
    background:
        radial-gradient(circle at top right, rgba(255,102,0,0.06), transparent 35%),
        radial-gradient(circle at bottom left, rgba(255,153,51,0.05), transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
    overflow: hidden;
}

.how-it-works h2 {
    max-width: 800px;
    margin: 0 auto 55px;
    text-align: center;
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.15;
    font-weight: 400;
    color: #111827;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.step {
    position: relative;
    padding: 42px 30px 34px;
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
    border: 1px solid rgba(255,102,0,0.08);
    border-radius: 26px;
    box-shadow: 0 18px 45px rgba(17,24,39,0.06);
    transition: all 0.35s ease;
    overflow: hidden;
}

.step::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #ff6600, #ff9a3d);
}

.step span {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6600, #ff8c1a);
    color: #fff;
    font-size: 1.9rem;
    font-weight: 800;
    box-shadow: 0 14px 32px rgba(255,102,0,0.25);
}

.step h3 {
    margin: 0 0 14px;
    font-size: 1.35rem;
    line-height: 1.4;
    font-weight: 700;
    color: #111827;
    text-align: center;
}

.step p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.85;
    color: #6b7280;
    text-align: center;
}



/* =========================
   GRIDS
========================= */
.directory-grid,
.seo-columns{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.sponsored-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

/* =========================
   PREMIUM CARDS
========================= */
.premium-card{
    position:relative;
    overflow:hidden;
    display:block;
    border-radius:24px;
    background:#fff;
    color:inherit;
    text-decoration:none;
    box-shadow:0 12px 32px rgba(0,0,0,0.08);
    transition:0.4s ease;
}

.premium-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,0,0,0.15);
}

.premium-card img{
    width:100%;
    margin-bottom:12px;
    transition:0.6s ease;
}

.premium-card:hover img{
    transform:scale(1.1);
}

.overlay{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,0.18);
    opacity:0;
    pointer-events:none;
    transition:0.35s ease;
}

.premium-card:hover .overlay{ opacity:1; }

.browse-btn{
    padding:12px 26px;
    border-radius:50px;
    background:#ff6600;
    color:#fff;
    font-size:14px;
    font-weight:700;
    opacity:0;
    transform:translateY(20px);
    transition:0.35s ease;
}

.premium-card:hover .browse-btn{
    opacity:1;
    transform:translateY(0);
}

.premium-card h3{
    margin:0;
    padding:18px 16px 6px;
    font-size:22px;
}

.premium-card p{
    margin:0;
    padding:0 16px 18px;
    text-align:center;
    font-size:14px;
}

/* =========================
   BADGES
========================= */
.card-category,
.verified-badge{
    position:absolute;
    top:14px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    border-radius:40px;
    font-size:12px;
    font-weight:700;
    z-index:5;
}

.card-category{
    left:14px;
    background:rgba(0,0,0,0.72);
    color:#fff;
}

.verified-badge{
    right:14px;
    background:#fff;
    color:#22a447;
    box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

.card-rating,
.card-location{
    display:flex;
    justify-content:center;
    align-items:center;
}

.card-rating{
    gap:5px;
    margin-bottom:16px;
    color:#ffb400;
}

.card-rating span{
    color:#444;
    font-weight:700;
}

.card-location{
    gap:6px;
    margin-bottom:15px;
    font-size:13px;
    font-weight:600;
    color:#666;
}

.card-location i{ color:#ff6600; }

/* =========================
   FAQ SECTION
========================= */
.faq-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
    gap:28px;
    margin-top:40px;
}

.faq-card{
    padding:34px 28px;
    border-radius:24px;
    text-align:center;
}

.faq-card h3{
    margin-bottom:18px;
    font-size:21px;
    line-height:1.5;
    color:#111;
}

.faq-card h3 i{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    margin-bottom:15px;
    border-radius:14px;
    background:var(--gradient-primary);
    color:#fff;
    font-size:18px;
    box-shadow:0 10px 24px rgba(255,102,0,0.22);
}

.faq-card p{
    margin:0;
    font-size:15px;
    line-height:1.9;
    color:#555;
    text-align:center;
}

.faq-card a{
    color:#ff6600;
    font-weight:700;
    text-decoration:none;
}

.faq-card a:hover{ text-decoration:underline; }

/* =========================
   CONTACT & SOCIAL
========================= */
.contact{
    padding:70px 20px;
    text-align:center;
    background:#f5f7fb;
}

.social-icons{ margin-bottom:30px; }

.social-icons a{
    width:58px;
    height:58px;
    margin:0 10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    text-decoration:none;
    font-size:22px;
    box-shadow:0 8px 22px rgba(0,0,0,0.14);
    transition:0.35s ease;
}

.social-icons a:nth-child(1){ background:#1877f2; }
.social-icons a:nth-child(2){ background:#000; }
.social-icons a:nth-child(3){ background:#ff0000; }
.social-icons a:nth-child(4){
    background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
}

.social-icons a:hover{
    transform:translateY(-6px) scale(1.08);
}

/* =========================
   FOOTER
========================= */
.footer-links{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:35px;
    padding:60px 40px;
    background:#111;
}

.footer-links div{
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:center;
    text-align:center;
}

.footer-links a{
    position:relative;
    display:inline-block;
    color:#fff;
    text-decoration:none;
    font-size:14px;
}

.footer-links a::after,
.seo-links a::after{
    content:"";
    position:absolute;
    left:0;
    width:0;
    transition:0.35s ease;
}

.footer-links a::after{
    bottom:-4px;
    height:2px;
    background:linear-gradient(90deg,#00e6ff,#ff6600);
}

.footer-links a:hover::after{ width:100%; }



/* =========================
   INTRO INFO CARDS
========================= */
.intro-cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:28px;
    margin:45px auto 10px;
    max-width:1400px;
}

.intro-info-card{
    padding:38px 30px;
    border-radius:24px;
    text-align:center;
}

.intro-info-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:var(--gradient-primary);
}

.intro-card-icon{
    width:78px;
    height:78px;
    margin:0 auto 22px;
    border-radius:50%;
    font-size:28px;
}

.intro-info-card h3{
    margin-bottom:18px;
    font-size:1.35rem;
    line-height:1.45;
    color:#111;
}

.intro-info-card p{
    margin:0;
    font-size:15.5px;
    line-height:1.95;
    color:#555;
    text-align:center;
}

/* =========================
   SEO FOOTER
========================= */
.seo-footer{
    padding:60px 20px;
    text-align:center;
    background:#0f0f0f;
    color:#ccc;
}

.seo-footer-container{
    max-width:1100px;
    margin:0 auto;
}

.seo-footer h2{ color:#fff; }

.seo-footer p{
    max-width:850px;
    margin:0 auto 30px;
    color:#aaa;
    text-align:center;
}

.seo-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px 18px;
}

.seo-links a{
    position:relative;
    color:#bbb;
    text-decoration:none;
    font-size:13px;
}

.seo-links a::after{
    bottom:-3px;
    height:1px;
    background:#ff6600;
}

.seo-links a:hover{
    color:#fff;
}

.seo-links a:hover::after{ width:100%; }

/* =========================
   LISTING PAGE
========================= */
.listing-container{
    display:grid;
    grid-template-columns:3fr 1fr;
    gap:40px;
    max-width:1320px;
    margin:auto;
    padding:40px 20px;
}

.listing-title{ font-size:42px; }

.listing-tagline{
    text-align:center;
    color:#777;
}

.listing-image img{ border-radius:18px; }

.image-caption{
    margin-top:10px;
    font-size:14px;
    text-align:center;
    color:#777;
}

.listing-description p{ margin-bottom:24px; }

.listing-contact{
    padding:28px;
    border-radius:20px;
    background:#f7f7f7;
}

.listing-sidebar{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.sidebar-ad{
    min-height:300px;
    border-radius:18px;
    background-size:cover;
    background-position:center;
    transition:0.35s ease;
}

.sidebar-ad:hover{
    transform:scale(1.03);
}

/* =========================
   COPYRIGHT
========================= */
.copyright{
    padding:18px;
    text-align:center;
    background:#000;
    color:#fff;
    font-size:13px;
}

.copyright a{
    color:#ff6600;
    text-decoration:none;
}


/* ==========================================
   RESPONSIVE STYLES MASTER FILE
========================================== */

/* ==========================================
   LARGE DESKTOP (1400px+)
========================================== */
@media (min-width: 1400px) {
    .hero-grid {
        gap: 80px;
    }

    .hero-content {
        max-width: 680px;
    }

    .hero-description {
        max-width: 660px;
    }

    .feature-list,
    .hero-actions {
        max-width: 620px;
    }

    .hero-visual,
    .hero-visual .hero-stats {
        max-width: 620px;
    }
}

/* ==========================================
   LARGE DESKTOP / LAPTOP (≤1199px)
========================================== */
@media (max-width: 1199px) {

    /* Header */
    .top-header {
        justify-content: center;
        gap: 24px;
    }

    /* Hero Layout */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-content,
    .hero-visual {
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .hero-description,
    .feature-list,
    .hero-actions,
    .hero-visual .hero-stats {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

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

    .hero-visual {
        max-width: 780px;
    }

    .hero-visual img {
        margin: 0 auto;
    }

    .hero-visual .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 28px;
    }

    /* Hero Visual Heading */
    .hero-visual-heading {
        text-align: center;
        margin-bottom: 24px;
    }

    /* Benefits */
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Center benefit icons */
    .benefit-icon {
        margin-left: auto;
        margin-right: auto;
    }

    /* Intro Cards */
    .intro-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Listing */
    .listing-container {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   TABLET (≤991px)
========================================== */
@media (max-width: 991px) {

    /* Headings */
    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 32px;
    }

    /* Header */
    .top-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 20px;
        padding: 20px 16px;
    }

    .top-header > a {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .logo {
        width: 100%;
        max-width: 340px;
        min-height: auto;
        align-items: center;
        text-align: center;
    }

    .logo-heading,
    .logo-tagline {
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .logo-tagline {
        display: flex;
        flex-direction: column;
    }

    .top-center,
    .top-right {
        width: 100%;
        max-width: 390px;
        margin: 0 auto;
        background-position: center center;
    }

    /* Hero */
    .hero {
        padding: 70px 0 60px;
    }

    .hero h1 {
        font-size: clamp(2.2rem, 6vw, 3.5rem);
        line-height: 1.15;
    }

    .hero-description {
        font-size: 1rem;
        line-height: 1.85;
    }

    .hero-actions a {
        width: 100%;
        max-width: 340px;
        min-width: auto;
    }

    .hero-visual .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        max-width: 720px;
        margin: 24px auto 0;
    }

    /* Benefits */
    .benefits {
        padding: 70px 0;
    }

    .benefit-icon {
        margin-left: auto;
        margin-right: auto;
    }

    /* Footer */
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }

    /* How It Works */
    .steps-grid {
        grid-template-columns: 1fr;
        max-width: 720px;
        gap: 24px;
    }

    .step {
        padding: 38px 28px 32px;
    }
}

/* ==========================================
   MOBILE (≤767px)
========================================== */
@media (max-width: 767px) {

    /* Sections */
    section {
        padding: 60px 16px;
    }

    /* Headings */
    h1 {
        line-height: 1.2;
    }

    h2 {
        line-height: 1.3;
    }

    h3 {
        line-height: 1.5;
    }

    /* Header */
    .top-header {
        gap: 18px;
        padding: 18px 16px;
    }

    .logo {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .logo-heading {
        font-size: 34px;
        text-align: center;
    }

    .logo-tagline {
        text-align: center;
        align-items: center;
    }

    .top-center,
    .top-right {
        width: 100%;
        max-width: 390px;
        aspect-ratio: 2 / 1;
        margin: 0 auto;
    }

    /* Hero */
    .hero {
        padding: 60px 0 50px;
    }

    .hero .container {
        padding-left: 16px;
        padding-right: 16px;
    }

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

    .hero-badge {
        font-size: 0.8rem;
        padding: 8px 14px;
        margin-bottom: 20px;
    }

    .hero h1 {
        font-size: clamp(2rem, 8vw, 2.8rem);
        line-height: 1.18;
        margin-bottom: 18px;
    }

    .hero-description {
        font-size: 0.98rem;
        line-height: 1.8;
        max-width: 100%;
        margin: 0 auto;
    }

    .feature-list {
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 24px 0 28px;
        max-width: 100%;
        text-align: center;
    }

    .feature-item {
        justify-content: center;
        text-align: center;
        font-size: 0.92rem;
    }

    .hero-actions,
    .intro-actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        max-width: 100%;
    }

    .hero-actions {
        margin: 28px 0;
    }

    .hero-actions a,
    .cta-primary,
    .cta-secondary,
    .whatsapp-btn,
    .listing-whatsapp {
        width: 100%;
        max-width: 100%;
        padding: 14px 24px;
        font-size: 14px;
    }

    /* Hero Visual */
    .hero-visual-heading {
        margin-bottom: 20px;
        text-align: center;
    }

    .hero-visual-heading h2 {
        font-size: clamp(1.35rem, 6vw, 2rem);
    }

    .hero-visual-heading p {
        font-size: 0.92rem;
        line-height: 1.75;
    }

    .hero-visual img {
        width: 100%;
        margin: 0 auto;
    }

    .hero-visual .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin: 24px auto 0;
        max-width: 100%;
    }

    .hero-visual .hero-stats div {
        padding: 16px 12px;
    }

    .hero-visual .hero-stats strong {
        font-size: 1.25rem;
    }

    .hero-visual .hero-stats span {
        font-size: 0.78rem;
    }

    /* Intro */
    .intro {
        padding-top: 70px;
    }

    .intro h1 {
        font-size: 2.25rem;
        line-height: 1.2;
        letter-spacing: -0.5px;
    }

    .intro-text {
        font-size: 15px;
        line-height: 1.9;
        text-align: center;
    }

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

    .highlight-item {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 18px 14px;
        gap: 12px;
    }

    .highlight-item i {
        width: 48px;
        height: 48px;
        min-width: 48px;
        font-size: 18px;
    }

    .highlight-item span {
        font-size: 13px;
        line-height: 1.5;
        text-align: center;
    }

    /* Grids */
    .directory-grid,
    .seo-columns,
    .sponsored-grid,
    .faq-grid,
    .benefits-grid,
    .intro-cards,
    .steps-grid {
        grid-template-columns: 1fr !important;
    }

    /* Cards */
    .benefit-card,
    .faq-card,
    .intro-info-card,
    .step {
        padding: 24px 20px;
        text-align: center;
    }

    .benefit-card p,
    .faq-card p,
    .intro-info-card p,
    .step p {
        text-align: center;
    }

    .benefit-icon {
        margin-left: auto;
        margin-right: auto;
    }

    /* How It Works */
    .how-it-works {
        padding: 65px 16px;
    }

    .how-it-works h2 {
        margin-bottom: 40px;
        font-size: clamp(1.9rem, 7vw, 2.6rem);
        line-height: 1.2;
    }

    .step span {
        width: 62px;
        height: 62px;
        margin-bottom: 18px;
        font-size: 1.55rem;
    }

    .step h3 {
        font-size: 1.18rem;
    }

    .step p {
        font-size: 0.95rem;
        line-height: 1.8;
    }

    /* Premium Cards */
    .premium-card:hover,
    .premium-card:hover img {
        transform: none;
    }

    .overlay {
        opacity: 0;
    }

    .premium-card:active .overlay,
    .premium-card:active .browse-btn {
        opacity: 1;
        transform: translateY(0);
    }

    /* Footer */
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 24px;
        padding: 35px 20px;
        position: relative;
    }

    .footer-links div {
        gap: 10px;
    }

    .footer-links a {
        font-size: 13px;
        line-height: 1.5;
    }

    .footer-links::before {
        content: "";
        position: absolute;
        top: 25px;
        bottom: 25px;
        left: 50%;
        width: 1px;
        background: rgba(255, 255, 255, 0.10);
        transform: translateX(-50%);
    }
}

/* ==========================================
   SMALL MOBILE (≤480px)
========================================== */
@media (max-width: 480px) {

    .hero {
        padding: 50px 0 40px;
    }

    .hero h1 {
        font-size: clamp(1.8rem, 9vw, 2.4rem);
    }

    .hero-description {
        font-size: 0.95rem;
    }

    .feature-item {
        font-size: 0.9rem;
    }

    .hero-visual .hero-stats,
    .trust-strip {
        grid-template-columns: 1fr;
    }

    .hero-actions,
    .intro-actions {
        gap: 12px;
    }

    .hero-stats strong {
        font-size: 1.25rem;
    }

    .step {
        padding: 28px 18px 24px;
    }

    .step span {
        width: 56px;
        height: 56px;
        font-size: 1.35rem;
    }

    .step h3 {
        font-size: 1.08rem;
    }

    .step p {
        font-size: 0.92rem;
    }

    .footer-links {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-links::before {
        display: none;
    }
}

/* ==========================================
   TOUCH DEVICES
========================================== */
@media (hover: none) {

    .highlight-item:hover,
    .premium-card:hover,
    .faq-card:hover,
    .cta-primary:hover,
    .cta-secondary:hover,
    .sidebar-ad:hover,
    .top-center:hover,
    .top-right:hover {
        transform: none;
        box-shadow: inherit;
    }

    .step:hover {
        transform: none;
        box-shadow: 0 18px 45px rgba(17, 24, 39, 0.06);
    }
}