/**
 * Collab-RT Realty Blog - Main Stylesheet
 * Brand: Black + Cyan (#00D4FF) from Collab-RT logo
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================================
   CSS RESET & VARIABLES
   ============================================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root {
    --color-black: #0A0A0A;
    --color-dark: #111111;
    --color-cyan: #00D4FF;
    --color-cyan-dark: #00A8CC;
    --color-cyan-glow: rgba(0, 212, 255, 0.12);
    --color-white: #FFFFFF;
    --color-off-white: #F5F7FA;
    --color-light-bg: #F0F2F5;
    --color-dark-text: #1A1A1A;
    --color-medium-text: #555555;
    --color-light-text: #888888;
    --color-border: #E2E5EA;
    --color-success: #10B981;
    --color-error: #EF4444;
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 24px; --spacing-lg: 32px; --spacing-xl: 48px; --spacing-xxl: 72px;
    --max-width: 1200px;
    --transition: all 0.3s ease;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
    --radius: 8px;
    --radius-lg: 12px;
}

body {
    font-family: var(--font-main);
    line-height: 1.6;
    color: var(--color-dark-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-black);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
}
h1 { font-size: 2.75rem; font-weight: 800; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p { margin-bottom: var(--spacing-md); color: var(--color-medium-text); line-height: 1.75; }
a { color: var(--color-cyan-dark); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--color-cyan); }
strong { font-weight: 600; color: var(--color-dark-text); }

/* ============================================================================
   LAYOUT
   ============================================================================ */

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-md); }

/* ============================================================================
   BUTTONS
   ============================================================================ */

.btn {
    display: inline-block; padding: 14px 32px; border: none; border-radius: var(--radius);
    font-size: 1rem; font-weight: 600; cursor: pointer; transition: var(--transition);
    text-align: center; text-decoration: none; font-family: var(--font-main);
}
.btn-primary { background-color: var(--color-cyan); color: var(--color-black); }
.btn-primary:hover { background-color: var(--color-cyan-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,212,255,0.3); text-decoration: none; }
.btn-secondary { background-color: var(--color-black); color: #fff; }
.btn-secondary:hover { background-color: #222; transform: translateY(-2px); text-decoration: none; }
.btn-gold, .btn-outline { background: transparent; color: var(--color-cyan); border: 2px solid var(--color-cyan); }
.btn-gold:hover, .btn-outline:hover { background: var(--color-cyan); color: var(--color-black); text-decoration: none; }
.btn-large { padding: 18px 44px; font-size: 1.1rem; border-radius: var(--radius-lg); }
.btn-small { padding: 10px 20px; font-size: 0.9rem; }
.btn-block { width: 100%; display: block; }

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

.hero {
    background: linear-gradient(135deg, rgba(0,0,0,0.78) 0%, rgba(13,17,23,0.82) 50%, rgba(10,22,40,0.88) 100%),
        url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=1920&h=1080&fit=crop&q=80') center/cover no-repeat;
    color: #fff; padding: 100px var(--spacing-md) 80px; text-align: center;
    position: relative; overflow: hidden;
}

/* Trust Stats Ribbon */
.trust-ribbon {
    background: var(--color-black); color: #fff; padding: 20px 0;
    border-bottom: 1px solid rgba(0,212,255,0.2);
}
.trust-ribbon-grid {
    display: flex; justify-content: center; gap: 48px; flex-wrap: wrap;
    max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-md);
}
.trust-stat { text-align: center; }
.trust-stat .stat-number {
    display: block; font-size: 1.8rem; font-weight: 800; color: var(--color-cyan);
    line-height: 1.2;
}
.trust-stat .stat-label {
    display: block; font-size: 0.85rem; color: rgba(255,255,255,0.7);
    font-weight: 500; margin-top: 4px;
}
@media (max-width: 768px) {
    .trust-ribbon-grid { gap: 24px; }
    .trust-stat .stat-number { font-size: 1.4rem; }
}
.hero::before {
    content: ''; position: absolute; top: -50%; left: -25%; width: 150%; height: 200%;
    background: radial-gradient(ellipse at center, rgba(0,212,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.hero::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-cyan), transparent); opacity: 0.4;
}
.hero-content { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.hero h1 { color: #fff; font-size: 3.2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: var(--spacing-md); }
.hero h1 span, .hero .highlight { color: var(--color-cyan); }
.hero p { color: rgba(255,255,255,0.75); font-size: 1.15rem; margin-bottom: var(--spacing-xl); line-height: 1.7; }

.lead-capture-form {
    background: rgba(255,255,255,0.97); padding: var(--spacing-lg); border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3); border: 1px solid rgba(0,212,255,0.1);
}
.lead-capture-form .form-group { margin-bottom: var(--spacing-sm); }
.lead-capture-form input, .lead-capture-form select {
    width: 100%; padding: 14px 18px; border: 2px solid var(--color-border);
    border-radius: var(--radius); font-size: 1rem; font-family: var(--font-main); transition: var(--transition);
}
.lead-capture-form input:focus, .lead-capture-form select:focus {
    outline: none; border-color: var(--color-cyan); box-shadow: 0 0 0 4px var(--color-cyan-glow);
}

/* ============================================================================
   SECTIONS
   ============================================================================ */

section { padding: var(--spacing-xxl) var(--spacing-md); }
section h2 { text-align: center; margin-bottom: var(--spacing-xl); }

.why-sell, .why-buy, .areas-served, .about-story, .areas-detail { background-color: #fff; }
.blog-preview, .blog-listing, .about-difference, .testimonials, .testimonials-about { background-color: var(--color-off-white); }
.new-construction-spotlight { background-color: var(--color-off-white); }

.cta-section {
    background: linear-gradient(135deg, #000 0%, #0D1117 100%);
    color: #fff; text-align: center; position: relative; overflow: hidden;
}
.cta-section::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,212,255,0.06) 0%, transparent 70%);
    pointer-events: none;
}
.cta-section h2 { color: #fff; position: relative; }
.cta-section p { color: rgba(255,255,255,0.7); font-size: 1.1rem; margin-bottom: var(--spacing-lg); position: relative; }
.cta-buttons { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; position: relative; }

/* ============================================================================
   PAGE HEADER
   ============================================================================ */

.page-header {
    background: linear-gradient(135deg, #000 0%, #0A1628 100%);
    color: #fff; padding: var(--spacing-xl) var(--spacing-md); text-align: center; position: relative;
}
.page-header::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-cyan), transparent); opacity: 0.3;
}
.page-header h1 { color: #fff; margin-bottom: var(--spacing-sm); }
.page-header p { color: rgba(255,255,255,0.7); font-size: 1.1rem; margin: 0; }

/* ============================================================================
   BREADCRUMBS
   ============================================================================ */

.breadcrumbs { background-color: var(--color-off-white); padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--color-border); }
.breadcrumbs .container { font-size: 0.9rem; color: var(--color-light-text); }
.breadcrumbs a { color: var(--color-cyan-dark); }

/* ============================================================================
   GRID LAYOUTS
   ============================================================================ */

.why-grid, .difference-grid, .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); margin-bottom: var(--spacing-xl); }
.areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-xl); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); margin-bottom: var(--spacing-xl); }

/* ============================================================================
   CARDS
   ============================================================================ */

.why-card, .difference-card {
    background: #fff; padding: var(--spacing-lg); border-radius: var(--radius-lg);
    transition: var(--transition); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border);
}
.why-card:hover, .difference-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--color-cyan); }
.why-card h3, .difference-card h3 { color: var(--color-black); margin-bottom: var(--spacing-sm); font-size: 1.2rem; }

.icon {
    width: 56px; height: 56px; margin-bottom: var(--spacing-md);
    background: linear-gradient(135deg, var(--color-cyan-glow), rgba(0,212,255,0.05));
    border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: var(--color-cyan); border: 1px solid rgba(0,212,255,0.15);
}

.area-card {
    position: relative; overflow: hidden; border-radius: var(--radius-lg);
    height: 260px; display: block; transition: var(--transition); box-shadow: var(--shadow-sm);
}
.area-card:hover { transform: scale(1.03); box-shadow: var(--shadow-lg); }
.area-image { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.4s ease; }
.area-card:hover .area-image { transform: scale(1.08); }
.area-card h3 { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: var(--spacing-md); background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); color: #fff; font-size: 1.2rem; }

/* Blog Cards */
.blog-card {
    background: #fff; border-radius: var(--radius-lg); overflow: hidden;
    transition: var(--transition); box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; border: 1px solid var(--color-border);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(0,212,255,0.3); }
.blog-card-image { overflow: hidden; height: 220px; display: block; }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-card:hover .blog-card-image img { transform: scale(1.06); }
.blog-card-content { padding: var(--spacing-lg); flex-grow: 1; display: flex; flex-direction: column; }
.blog-card h2, .blog-card h3 { margin-bottom: var(--spacing-sm); font-size: 1.2rem; line-height: 1.4; }
.blog-card h2 a, .blog-card h3 a { color: var(--color-black); }
.blog-card h2 a:hover, .blog-card h3 a:hover { color: var(--color-cyan-dark); }
.blog-card p { flex-grow: 1; margin-bottom: var(--spacing-sm); font-size: 0.95rem; line-height: 1.65; }

.blog-meta { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); font-size: 0.85rem; }
.blog-date { color: var(--color-light-text); }
.blog-category { background: var(--color-cyan-glow); color: var(--color-cyan-dark); padding: 3px 12px; border-radius: 20px; font-weight: 600; font-size: 0.8rem; }
.read-more { color: var(--color-cyan-dark); font-weight: 600; display: inline-block; padding-top: var(--spacing-xs); }
.read-more:hover { color: var(--color-cyan); }

/* Testimonial Cards */
.testimonial-card { background: #fff; padding: var(--spacing-lg); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border-left: 4px solid var(--color-cyan); }
.testimonial-card .stars { color: #FBBF24; font-size: 1.1rem; margin-bottom: var(--spacing-sm); }
.testimonial-card p { font-style: italic; margin-bottom: var(--spacing-sm); line-height: 1.7; }
.client-name { font-weight: 600; color: var(--color-black); font-style: normal; margin: 0 !important; font-size: 0.9rem; }

/* ============================================================================
   BLOG SINGLE POST
   ============================================================================ */

.blog-single { padding: var(--spacing-xl) var(--spacing-md); }
.blog-container { max-width: 760px; margin: 0 auto; }
.featured-image { margin-bottom: var(--spacing-xl); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.featured-image img { width: 100%; height: auto; display: block; }
.post-header { margin-bottom: var(--spacing-xl); text-align: center; }
.post-meta { display: flex; gap: var(--spacing-md); justify-content: center; font-size: 0.9rem; color: var(--color-light-text); flex-wrap: wrap; }
.post-date, .post-category, .post-author { display: flex; align-items: center; }
.post-category { background: var(--color-cyan-glow); color: var(--color-cyan-dark); padding: 4px 14px; border-radius: 20px; font-weight: 600; font-size: 0.8rem; }
.post-content { line-height: 1.85; margin-bottom: var(--spacing-xl); color: var(--color-dark-text); font-size: 1.05rem; }
.post-content h2, .post-content h3 { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-md); }
.post-content p { margin-bottom: var(--spacing-md); }
.post-content img { max-width: 100%; height: auto; margin: var(--spacing-lg) 0; border-radius: var(--radius); }
.post-content a { color: var(--color-cyan-dark); text-decoration: underline; text-underline-offset: 3px; }
.post-content a:hover { color: var(--color-cyan); }
.post-content ul, .post-content ol { margin: var(--spacing-md) 0 var(--spacing-md) var(--spacing-lg); color: var(--color-medium-text); }
.post-content li { margin-bottom: var(--spacing-xs); }
.post-content blockquote { border-left: 3px solid var(--color-cyan); padding-left: var(--spacing-md); margin: var(--spacing-lg) 0; color: var(--color-medium-text); font-style: italic; }

.post-share { background: var(--color-off-white); padding: var(--spacing-lg); border-radius: var(--radius-lg); margin-bottom: var(--spacing-xl); }
.post-share h3 { margin-bottom: var(--spacing-sm); font-size: 1rem; }
.share-buttons { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }
.share-btn { display: inline-block; padding: 10px 20px; background: #fff; color: var(--color-black); border: 1px solid var(--color-border); border-radius: var(--radius); font-weight: 500; font-size: 0.9rem; transition: var(--transition); }
.share-btn:hover { background: var(--color-black); color: #fff; border-color: var(--color-black); text-decoration: none; }

.soft-cta {
    background: linear-gradient(135deg, #0A0A0A 0%, #0D1117 100%);
    color: #fff; padding: var(--spacing-xl); border-radius: var(--radius-lg);
    text-align: center; margin-bottom: var(--spacing-xl); border: 1px solid rgba(0,212,255,0.15);
}
.soft-cta h3 { color: #fff; margin-bottom: var(--spacing-xs); }
.soft-cta p { color: rgba(255,255,255,0.7); margin-bottom: var(--spacing-md); }

.related-posts { margin-top: var(--spacing-xxl); padding-top: var(--spacing-xl); border-top: 1px solid var(--color-border); }
.related-posts h2 { margin-bottom: var(--spacing-lg); }
.related-posts .blog-grid { grid-template-columns: repeat(3, 1fr); }

/* ============================================================================
   CONTACT PAGE
   ============================================================================ */

.contact-section { background-color: var(--color-off-white); }
.contact-container { display: grid; grid-template-columns: 1fr 2fr; gap: var(--spacing-lg); align-items: start; }

.contact-info { background: var(--color-black); color: #fff; padding: var(--spacing-xl); border-radius: var(--radius-lg); }
.contact-info h2 { color: #fff; margin-bottom: var(--spacing-lg); font-size: 1.5rem; }
.info-item { margin-bottom: var(--spacing-lg); }
.info-item h3 { color: var(--color-cyan); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.info-item p { color: rgba(255,255,255,0.8); margin: 0; }
.info-item a { color: var(--color-cyan); font-weight: 500; }
.info-item a:hover { color: #fff; }

.contact-info .social-links { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-sm); }
.contact-info .social-links a { display: inline-block; padding: 8px 16px; background: rgba(0,212,255,0.1); border-radius: var(--radius); color: var(--color-cyan); font-weight: 500; font-size: 0.9rem; transition: var(--transition); }
.contact-info .social-links a:hover { background: var(--color-cyan); color: var(--color-black); text-decoration: none; }

.contact-form-wrapper { background: #fff; padding: var(--spacing-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.contact-form { display: flex; flex-direction: column; gap: var(--spacing-md); }

.form-error { background: #FEF2F2; color: #991B1B; padding: var(--spacing-md); border-radius: var(--radius); border-left: 4px solid var(--color-error); }
.form-success { background: #ECFDF5; color: #065F46; padding: var(--spacing-lg); border-radius: var(--radius); border-left: 4px solid var(--color-success); text-align: center; }
.form-success h3 { color: #065F46; margin-bottom: var(--spacing-xs); }
.form-success p { color: #065F46; margin: 0; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.form-group { display: flex; flex-direction: column; }
.form-group label { font-weight: 600; color: var(--color-black); margin-bottom: 6px; font-size: 0.9rem; }
.form-group input, .form-group textarea, .form-group select {
    padding: 14px 18px; border: 2px solid var(--color-border); border-radius: var(--radius);
    font-family: var(--font-main); font-size: 1rem; color: var(--color-dark-text); transition: var(--transition);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline: none; border-color: var(--color-cyan); box-shadow: 0 0 0 4px var(--color-cyan-glow);
}
.form-group textarea { resize: vertical; }
.map-container { margin-top: var(--spacing-xl); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }

/* ============================================================================
   404 ERROR PAGE
   ============================================================================ */

.error-page { padding: var(--spacing-xxl) var(--spacing-md); text-align: center; }
.error-content { max-width: 600px; margin: 0 auto; }
.error-content h1 { font-size: 6rem; color: var(--color-cyan); margin-bottom: var(--spacing-sm); letter-spacing: -0.05em; }
.error-content h2 { margin-bottom: var(--spacing-md); }
.error-content p { margin-bottom: var(--spacing-xl); }
.error-actions { display: flex; gap: var(--spacing-md); justify-content: center; margin-bottom: var(--spacing-xl); flex-wrap: wrap; }
.error-suggestions { background: var(--color-off-white); padding: var(--spacing-lg); border-radius: var(--radius-lg); }
.error-suggestions h3 { margin-bottom: var(--spacing-md); }
.error-suggestions ul { list-style: none; display: flex; justify-content: center; gap: var(--spacing-md); flex-wrap: wrap; }
.error-suggestions a { color: var(--color-cyan-dark); font-weight: 500; padding: 8px 16px; border-radius: var(--radius); transition: var(--transition); }
.error-suggestions a:hover { background: var(--color-cyan); color: var(--color-black); text-decoration: none; }

/* ============================================================================
   NEWSLETTER SIGNUP
   ============================================================================ */

.newsletter-signup { background: linear-gradient(135deg, #000 0%, #0D1117 100%); color: #fff; padding: var(--spacing-xl) var(--spacing-md); text-align: center; }
.newsletter-signup h2 { color: #fff; margin-bottom: var(--spacing-xs); }
.newsletter-signup p { color: rgba(255,255,255,0.7); margin-bottom: var(--spacing-lg); }
.newsletter-form { max-width: 480px; margin: 0 auto; display: flex; gap: var(--spacing-sm); }
.newsletter-form input { flex: 1; padding: 14px 18px; border: 2px solid rgba(255,255,255,0.15); border-radius: var(--radius); font-size: 1rem; font-family: var(--font-main); background: rgba(255,255,255,0.08); color: #fff; }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-form input:focus { outline: none; border-color: var(--color-cyan); background: rgba(255,255,255,0.12); }
.newsletter-form button { white-space: nowrap; }

/* ============================================================================
   ABOUT PAGE
   ============================================================================ */

.about-story .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: center; }
.story-image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.story-image img { width: 100%; height: auto; display: block; }
.areas-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); }
.area-item { padding: var(--spacing-lg); background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--color-border); transition: var(--transition); }
.area-item:hover { border-color: var(--color-cyan); box-shadow: var(--shadow-sm); }
.area-item h3 { color: var(--color-black); margin-bottom: var(--spacing-xs); font-size: 1.2rem; }

/* ============================================================================
   PAGINATION
   ============================================================================ */

.pagination { display: flex; justify-content: center; align-items: center; gap: var(--spacing-sm); margin-top: var(--spacing-xl); }
.pagination-numbers { display: flex; gap: var(--spacing-xs); align-items: center; }
.pagination a, .pagination span { display: inline-block; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--color-border); color: var(--color-dark-text); font-weight: 500; transition: var(--transition); font-size: 0.9rem; }
.pagination a:hover { background: var(--color-cyan); color: var(--color-black); border-color: var(--color-cyan); text-decoration: none; }
.pagination span { border: none; }
.pagination span.current { background: var(--color-cyan); color: var(--color-black); font-weight: 700; }

/* ============================================================================
   SECTION INTROS
   ============================================================================ */

.section-intro { text-align: center; color: var(--color-medium-text); font-size: 1.1rem; max-width: 640px; margin: -20px auto var(--spacing-xl); }

/* ============================================================================
   INCENTIVE CARDS (Builder Spotlight)
   ============================================================================ */

.incentives-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }

.incentive-card {
    background: #fff; padding: var(--spacing-lg); border-radius: var(--radius-lg);
    border: 1px solid var(--color-border); transition: var(--transition);
    box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.incentive-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-cyan); }
.incentive-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--color-cyan), var(--color-cyan-dark));
}

.incentive-builder-badge {
    display: inline-block; background: var(--color-black); color: var(--color-cyan);
    padding: 4px 12px; border-radius: 4px; font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--spacing-sm);
}

.incentive-card h3 { font-size: 1.15rem; margin-bottom: 4px; color: var(--color-black); }

.incentive-area { color: var(--color-light-text); font-size: 0.85rem; margin-bottom: var(--spacing-sm) !important; font-weight: 500; }

.incentive-highlight {
    color: var(--color-cyan-dark); font-weight: 700; font-size: 1.05rem;
    margin-bottom: var(--spacing-xs) !important; line-height: 1.4;
}

.incentive-details { font-size: 0.9rem; color: var(--color-medium-text); line-height: 1.6; margin-bottom: var(--spacing-sm) !important; }

.incentive-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

.incentive-tag {
    display: inline-block; background: var(--color-cyan-glow); color: var(--color-cyan-dark);
    padding: 4px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; white-space: nowrap;
}

.incentive-updated-note {
    text-align: center; color: var(--color-light-text); font-size: 0.85rem;
    margin-top: var(--spacing-sm); margin-bottom: 0;
}

/* ============================================================================
   AREA CARDS (improved with gradient overlay)
   ============================================================================ */

.area-content { display: none; } /* Hide old sub-descriptions, use overlay title only */

.area-card h3 {
    position: absolute; bottom: 0; left: 0; right: 0; margin: 0;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    color: #fff; font-size: 1.15rem; font-weight: 700; z-index: 2;
}

/* ============================================================================
   SELLING / CTA SECTIONS
   ============================================================================ */

.selling-section {
    background: linear-gradient(135deg, #000 0%, #0D1117 100%);
    color: #fff; text-align: center; position: relative; overflow: hidden;
}
.selling-section::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,212,255,0.06) 0%, transparent 70%);
    pointer-events: none;
}
.selling-content { position: relative; z-index: 2; max-width: 600px; margin: 0 auto; }
.selling-section h2 { color: #fff; }
.selling-section p { color: rgba(255,255,255,0.7); font-size: 1.05rem; margin-bottom: var(--spacing-lg); }

/* ============================================================================
   HERO CTAs
   ============================================================================ */

.hero-ctas { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; }

/* ============================================================================
   CHECKBOX GROUP (Contact Form)
   ============================================================================ */

.checkbox-group { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.checkbox-label {
    display: flex; align-items: center; gap: 6px; font-size: 0.9rem;
    color: var(--color-dark-text); cursor: pointer; padding: 6px 12px;
    border: 1px solid var(--color-border); border-radius: var(--radius);
    transition: var(--transition);
}
.checkbox-label:hover { border-color: var(--color-cyan); background: var(--color-cyan-glow); }
.checkbox-label input[type="checkbox"] { accent-color: var(--color-cyan); }

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.mt-24 { margin-top: var(--spacing-lg) !important; }
.mb-24 { margin-bottom: var(--spacing-lg) !important; }
.mt-32 { margin-top: var(--spacing-xl) !important; }
.mb-32 { margin-bottom: var(--spacing-xl) !important; }
.text-center { text-align: center !important; }
.hidden { display: none !important; }

/* ============================================================================
   COMMERCIAL PREVIEW (Homepage)
   ============================================================================ */

.commercial-preview { background-color: #fff; }
.commercial-preview-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}
.commercial-preview-card {
    background: var(--color-off-white); padding: var(--spacing-xl); border-radius: var(--radius-lg);
    border: 1px solid var(--color-border); transition: var(--transition); text-align: center;
}
.commercial-preview-card:hover { border-color: var(--color-cyan); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.commercial-preview-card h3 { font-size: 1.2rem; margin-bottom: var(--spacing-sm); color: var(--color-black); }
.commercial-preview-card p { font-size: 0.95rem; margin-bottom: var(--spacing-md); }
.commercial-preview-card .btn { font-size: 0.9rem; padding: 10px 24px; }

/* ============================================================================
   STARS RATING (shared)
   ============================================================================ */

.stars { color: #FBBF24; letter-spacing: 2px; }
.stars-inline { display: inline-flex; gap: 2px; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.15rem; }
    .hero { padding: 60px var(--spacing-md) 50px; }
    .hero h1 { font-size: 2.2rem; }
    .hero p { font-size: 1rem; }
    .why-grid, .difference-grid, .testimonial-grid, .areas-grid, .blog-grid, .related-posts .blog-grid, .incentives-grid, .commercial-preview-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .contact-container { grid-template-columns: 1fr; }
    .about-story .container { grid-template-columns: 1fr; }
    .areas-list { grid-template-columns: 1fr; }
    .cta-buttons { flex-direction: column; align-items: center; }
    .newsletter-form { flex-direction: column; }
    .pagination { flex-direction: column; gap: var(--spacing-sm); }
    .pagination-numbers { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 480px) {
    .container { padding: 0 var(--spacing-sm); }
    section { padding: var(--spacing-xl) var(--spacing-sm); }
    h1 { font-size: 1.6rem; } h2 { font-size: 1.3rem; }
    .hero { padding: 48px var(--spacing-sm) 40px; }
    .hero h1 { font-size: 1.8rem; }
    .lead-capture-form { padding: var(--spacing-md); }
    .btn { padding: 12px 20px; font-size: 0.9rem; }
    .btn-large { padding: 14px 28px; font-size: 1rem; }
    .post-meta { flex-direction: column; gap: var(--spacing-xs); }
    .share-buttons { flex-direction: column; }
    .share-btn { width: 100%; text-align: center; }
    .error-content h1 { font-size: 4rem; }
    .error-suggestions ul { flex-direction: column; }
    .error-actions { flex-direction: column; }
    .error-actions .btn { width: 100%; }
}