/* Palette Immo – static marketing site (matches React app styling) */
:root {
    --color-brand: #765adb;
    --color-red: #713edc;
    --color-text: #202225;
    --color-gray: #7c7e82;
    --color-light-gray: #e5e7eb;
    --color-white: #ffffff;
    --color-dark: #202225;
    --color-green: #11b3bf;
    --color-orange: #ffd05c;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --vh: 100vh;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.5;
    overflow-x: hidden;
}

.container { max-width: 1140px; margin: 0 auto; padding: 0 1rem; }
.container-fluid { width: 100%; padding-left: 0; padding-right: 0; }

/* Typography (match React fs-* and font-mona-sans-extra-bold) */
.font-mona-sans-extra-bold { font-weight: 700; }
.fs-0 { font-size: 60px !important; }
.fs-1 { font-size: 36px !important; }
.fs-2 { font-size: 28px !important; }
.fs-4 { font-size: 18px !important; }
.fs-6 { font-size: 16px !important; }
.fs-7 { font-size: 0.9rem !important; }
.fs-8 { font-size: 0.8rem !important; }
.fs-9 { font-size: 11px !important; }
.color-black { color: #202225 !important; }
.color-gray { color: var(--color-gray) !important; }
.color-white { color: #ffffff !important; }
.color-brand { color: var(--color-brand) !important; }
.color-red { color: var(--color-red) !important; }
.color-green { color: var(--color-green) !important; }
.color-orange { color: #f4a134 !important; }

/* Backgrounds */
.bg-light-gray { background-color: #f3f4f6; }
.bg-dark { background-color: #181819 !important; }
.bg-black { background-color: #202225 !important; }

/* Tags (before/after labels on compare images) */
.tag-white {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    color: #000 !important;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 9px;
    text-transform: uppercase;
}

/* Shadows */
.smooth-shadow { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 1rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background-color 0.2s, border-color 0.2s;
}
.btn:focus { outline: none; box-shadow: none; }
.btn-danger {
    background-color: #e7337f;
    color: #fff !important;
}
.btn-danger:hover {
    background-color: #f46caa;
    color: #fff;
}
.btn-dark {
    background-color: #202225;
    color: #fff !important;
    height: 40px;
}
.btn-dark:hover {
    background-color: #43474d;
    color: #fff;
}
.btn-gray {
    background-color: #e6e6e6;
    color: #202225;
    border: 1px solid #ddd;
}
.btn-gray:hover { background-color: #d1d4db; }

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 0px solid var(--color-light-gray);
    backdrop-filter: blur(10px);
}
.site-header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}
.site-header .logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.site-header .logo { display: block; }
.site-header nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.site-header nav a {
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.9rem;
    border-radius: 1.25rem;
}
.site-header nav a:hover { background: #f3f4f6; color: var(--color-text); }
.site-header .btn-app {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #202225;
    color: #fff !important;
    border-radius: 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}
.site-header .btn-app:hover { background: #43474d; color: #fff; }
.site-header .btn-signup { margin-right: 0.25rem; }

/* Mobile menu */
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; font-size: 1.25rem; }
@media (max-width: 768px) {
    .menu-toggle { display: block; }
    .site-header nav { display: none; }
    .site-header nav.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--color-light-gray);
        padding: 1rem;
        align-items: flex-start;
    }
}
@media (min-width: 769px) {
    .site-header nav { display: flex !important; }
}

/* Hero section */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: var(--vh, 100vh);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
}
.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem;
    max-width: 100%;
}
.hero .trust-badge { font-size: 0.9rem; color: var(--color-gray); margin-bottom: 0.5rem; }
.hero .trust-badge a { color: var(--color-red); text-decoration: none; }
.hero .title { margin: 0 0 0.5rem; line-height: 1.1; }
.hero .subtitle { margin: 0 0 1.5rem; max-width: 800px; }
.hero-features {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin: 1rem 0;
}
.hero-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0;
}
.hero-feature .icon-check { flex-shrink: 0; color: var(--color-brand); }
.hero-feature .stars { display: flex; gap: 2px; }
.hero-cta { margin: 1.5rem 0; }
.hero-social-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.hero-avatars {
    display: flex;
    align-items: center;
}
.hero-avatars img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid #fff;
    margin-right: -18px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.hero-avatars img:last-child { margin-right: 0; }

/* Section blocks */
.section {
    padding: 3rem 1rem;
}
.section-center { text-align: center; }
.section-label { color: var(--color-gray); margin-bottom: 0.5rem; }
.section-title { margin: 0.5rem 0 1rem; }
.section-text { color: var(--color-gray); max-width: 720px; margin-left: auto; margin-right: auto; }

/* Two-column feature (image + text) */
.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}
.feature-row.reverse { direction: rtl; }
.feature-row.reverse > * { direction: ltr; }
.feature-image {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    position: relative;
}
.feature-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    min-height: 280px;
    max-height: 440px;
}
.feature-image .tag { position: absolute; top: 0.5rem; }
.feature-image .tag-before { left: 0.5rem; }
.feature-image .tag-after { right: 0.5rem; }
.feature-body { padding: 0 1rem; }
.feature-body .title { margin: 0 0 0.5rem; }
.feature-body .subtitle { margin: 0 0 1rem; font-size: 1rem; }
.feature-body .text { color: var(--color-gray); margin-bottom: 1.5rem; font-size: 0.9rem; }
@media (max-width: 768px) {
    .feature-row { grid-template-columns: 1fr; direction: ltr; gap: 1rem; margin-bottom: 2rem; }
    .feature-row.reverse { direction: ltr; }
    .feature-row .feature-image { order: 1; }
    .feature-row .feature-body { order: 2; }
    .feature-image img { min-height: 240px; }
}

/* Compare image: side-by-side two images (same as React) */
.compare-image-wrap.compare-split {
    display: flex;
    gap: 0;
    width: 100%;
    max-width: 100%;
}
.compare-split .compare-half {
    flex: 1;
    position: relative;
    overflow: hidden;
}
.compare-split .compare-half img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.compare-split .compare-half .tag-white {
    position: absolute;
    top: 0.5rem;
    z-index: 1;
}
.compare-split .compare-half:first-child .tag-white { left: 0.5rem; }
.compare-split .compare-half:last-child .tag-white { right: 0.5rem; }

/* Before/After slider – images overlaid, only the clip moves (divider) */
.before-after-slider {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --split: 50;
    touch-action: none;
}
.before-after-slider .ba-inner {
    position: relative;
    width: 100%;
}
/* Before pane: in flow so it sets height; image full size, fixed */
.before-after-slider .ba-pane-before {
    position: relative;
    width: 100%;
}
.before-after-slider .ba-pane-before img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    min-height: 280px;
    max-height: 440px;
    vertical-align: middle;
}
.before-after-slider .ba-pane-before .tag-white {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
}
/* After pane: overlaid on top; image clipped so only right portion visible */
.before-after-slider .ba-pane-after {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}
.before-after-slider .ba-pane-after .tag-white {
    pointer-events: auto;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
}
.before-after-slider .ba-pane-after img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    clip-path: inset(0 0 0 calc(var(--split) * 1%));
    -webkit-clip-path: inset(0 0 0 calc(var(--split) * 1%));
}
.before-after-slider .ba-divider {
    position: absolute;
    left: calc(var(--split) * 1%);
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.9);
    pointer-events: none;
    z-index: 3;
    transform: translateX(-50%);
}
.before-after-slider .ba-handle-wrap {
    position: absolute;
    left: calc(var(--split) * 1%);
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    pointer-events: auto;
    cursor: ew-resize;
}
.before-after-slider .ba-handle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.before-after-slider .ba-handle svg {
    width: 14px;
    height: 14px;
    color: #333;
}
.before-after-slider .ba-handle .ba-arrow-left,
.before-after-slider .ba-handle .ba-arrow-right {
    padding: 2px;
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    color: inherit;
}
.before-after-slider .ba-handle .ba-arrow-left:hover,
.before-after-slider .ba-handle .ba-arrow-right:hover { opacity: 0.8; }
@media (max-width: 768px) {
    .before-after-slider .ba-pane-before img { min-height: 240px; }
}

/* Design styles gallery */
.styles-gallery {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 1rem 0;
    margin: 2rem 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.styles-gallery .style-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.styles-gallery .style-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}
.styles-gallery .style-card .tag-white {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

/* Testimonials grid */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    max-width: 1140px;
    margin: 2rem auto;
    padding: 0 1rem;
}
.testimonial-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}
.testimonial-card .author {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}
.testimonial-card .author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 0.75rem;
}
.testimonial-card .author-name { font-weight: 700; font-size: 0.9rem; }
.testimonial-card .author-role { font-size: 0.8rem; color: var(--color-gray); }
.testimonial-card .stars { display: flex; gap: 2px; margin-bottom: 0.75rem; }
.testimonial-card .quote { font-size: 0.8rem; color: var(--color-gray); line-height: 1.5; margin: 0; }

/* Batch / CTA sections */
.cta-section {
    text-align: center;
    padding: 3rem 1rem;
}
.cta-section .btn { margin-top: 1rem; }
.cta-section .caption { font-size: 0.8rem; color: var(--color-gray); margin-top: 0.5rem; }

/* Team section */
.team-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}
.team-section .team-image img { width: 100%; height: auto; border-radius: 0.5rem; }
@media (max-width: 768px) {
    .team-section { grid-template-columns: 1fr; }
}

/* Socials bar */
.socials-bar {
    background: #000;
    padding: 1rem;
    text-align: center;
}
.socials-bar .inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}
.socials-bar a {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.socials-bar a:hover { opacity: 0.85; }
.socials-bar svg { width: 24px; height: 24px; fill: #fff; }

/* Footer */
.site-footer {
    background: #181819;
    color: #fff;
    padding: 2rem 1rem 1rem;
}
.site-footer .footer-inner {
    max-width: 1140px;
    margin: 0 auto;
}
.site-footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}
.site-footer .footer-links a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
}
.site-footer .footer-links a:hover { text-decoration: underline; }
.site-footer .footer-logo {
    text-align: right;
    margin-bottom: 0.5rem;
}
.site-footer .footer-logo a { display: inline-block; }
.site-footer .footer-logo svg { display: block; }
.site-footer .footer-tagline { font-size: 0.85rem; color: var(--color-gray); margin-bottom: 1rem; text-align: right; }
.site-footer .footer-copy {
    font-size: 0.8rem;
    color: var(--color-gray);
    text-align: center;
    padding: 1rem 0;
}

/* Legal pages */
.legal-content { max-width: 720px; margin: 0 auto; padding: 2rem 1rem; }
.legal-content .title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.legal-content .subtitle { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.legal-content .text2 { display: block; margin: 0.75rem 0; font-size: 0.95rem; }
.legal-content a { color: var(--color-brand); text-decoration: none; }
.legal-content a:hover { text-decoration: underline; }

/* FAQ */
.faq-list { margin: 0; padding: 0; list-style: none; }
.faq-item {
    border: 1px solid var(--color-light-gray);
    border-radius: 1.25rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.faq-item summary {
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .answer { padding: 0 1.25rem 1rem; font-size: 0.95rem; color: var(--color-gray); line-height: 1.6; }

/* Pricing / Contact */
.pricing-cta { text-align: center; padding: 2rem; background: #f9fafb; border-radius: 1rem; margin: 2rem 0; }
.contact-block { margin: 2rem 0; }
.contact-block a { color: var(--color-brand); }

/* Pricing page (toggle + plans/packs from API) */
.pricing-page .pricing-container { max-width: 1000px; margin: 0 auto; padding: 2rem 1rem 3rem; text-align: center; }
.pricing-title { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--color-text); }
.pricing-subtitle { font-size: 0.95rem; color: var(--color-gray); margin: 0 auto 1.5rem; max-width: 600px; line-height: 1.5; }
.pricing-loading { text-align: center; padding: 2rem; color: var(--color-gray); }
.pricing-vat { text-align: center; margin-top: 1.5rem; max-width: 560px; margin-left: auto; margin-right: auto; }
.pricing-toggle {
    display: inline-flex;
    background: var(--color-light-gray);
    padding: 4px;
    border-radius: 999px;
    gap: 4px;
    margin-bottom: 2rem;
}
.pricing-toggle-btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    background: transparent;
    color: var(--color-text);
    transition: background 0.2s, color 0.2s;
}
.pricing-toggle-btn:hover { background: rgba(0,0,0,0.06); }
.pricing-toggle-btn.active { background: var(--color-dark); color: #fff; }
.pricing-tab-panels { position: relative; }
.pricing-tab-hidden { display: none !important; }
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}
@media (max-width: 900px) {
    .pricing-cards { grid-template-columns: 1fr; }
}
.pricing-card {
    background: #f9fafb;
    border: 1px solid var(--color-light-gray);
    border-radius: 1rem;
    overflow: visible;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.pricing-card-popular { border-color: var(--color-brand); box-shadow: 0 10px 15px -3px rgba(118, 90, 219, 0.15); }
.pricing-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 1.25rem;
    border-bottom: 1px solid var(--color-light-gray);
}
.pricing-card-popular .pricing-card-header { background: rgba(118, 90, 219, 0.06); }
.pricing-card-name { font-size: 1.125rem; font-weight: 700; color: var(--color-text); }
.pricing-card-body { padding: 1.25rem; flex: 1; }
.pricing-price { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 0.35rem; flex-wrap: wrap; }
.pricing-price .symbol { font-size: 1.1rem; font-weight: 700; }
.pricing-price-amount { font-size: 2.5rem; font-weight: 700; color: var(--color-text); line-height: 1; }
.pricing-value-line { font-size: 0.9rem; font-weight: 700; margin: 0 0 0.75rem; color: var(--color-text); }
.pricing-feature { font-size: 0.85rem; color: var(--color-text); margin: 0 0 0.4rem; display: flex; align-items: flex-start; gap: 0.35rem; }
.pricing-feature .color-green { flex-shrink: 0; }
.pricing-feature-credits { display: inline; }
.pricing-info-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-left: 2px;
    vertical-align: middle;
}
.pricing-info-wrap:focus { outline: none; }
.pricing-info-wrap .pricing-info-icon { margin-left: 0; color: var(--color-gray); flex-shrink: 0; }
.pricing-popover {
    position: absolute;
    bottom: 50%;
    left: calc(100% + 8px);
    transform: translateY(50%);
    background-color: #181819;
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.35;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    max-width: 280px;
    width: max-content;
    white-space: normal;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 20;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.15s ease, opacity 0.15s ease;
}
.pricing-info-wrap:hover .pricing-popover,
.pricing-info-wrap:focus .pricing-popover {
    visibility: visible;
    opacity: 1;
}
.pricing-info-icon { display: inline-block; vertical-align: middle; margin-left: 2px; color: var(--color-gray); flex-shrink: 0; }
.pricing-card-body .fs-8 { display: block; margin-bottom: 0.35rem; }
.pricing-card-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--color-light-gray); }
.pricing-card-footer .btn { width: 100%; }
.tag-purple { background: var(--color-brand); color: #fff !important; padding: 0.25rem 0.6rem; font-size: 0.7rem; font-weight: 600; border-radius: 999px; text-transform: uppercase; }
.d-block { display: block; }
.rounded-5 { border-radius: 999px; }

/* Spacing utilities */
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.mt-5 { margin-top: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2rem; }
.fs-8 { font-size: 0.85rem !important; }
.btn-secondary { background: #e5e7eb; color: #202225 !important; }
.btn-secondary:hover { background: #d1d5db; color: #202225; }

/* Responsive font sizes */
@media (max-width: 578px) {
    .fs-0 { font-size: 40px !important; }
    .fs-1 { font-size: 28px !important; }
    .fs-2 { font-size: 24px !important; }
    .fs-6 { font-size: 15px !important; }
}
@media (max-width: 992px) {
    .fs-0 { font-size: 40px !important; }
    .fs-1 { font-size: 30px !important; }
    .fs-2 { font-size: 26px !important; }
}

/* Blog listing */
.blog-listing-wrap { padding-bottom: 3rem; }
.blog-listing-title { margin: 0 0 0.5rem; }
.blog-listing-intro { margin: 0 0 2rem; max-width: 640px; }
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}
.blog-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s, transform 0.2s;
}
.blog-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}
.blog-card-image-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: var(--color-light-gray);
    overflow: hidden;
}
.blog-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-card-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
}
.blog-card-body { padding: 1.25rem; }
.blog-card-date { display: block; margin-bottom: 0.5rem; }
.blog-card-title { margin: 0 0 0.5rem; font-size: 1.1rem; line-height: 1.35; }
.blog-card-excerpt { margin: 0; font-size: 0.9rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-load-more-wrap { text-align: center; margin-top: 2rem; }
.blog-loading, .blog-empty { text-align: center; margin-top: 1.5rem; }

/* Blog article (single post) */
.blog-article-wrap { padding-bottom: 3rem; }
.blog-article { max-width: 720px; margin-left: auto; margin-right: auto; }
.blog-article-header { margin-bottom: 2rem; }
.blog-article-title { margin: 0 0 0.5rem; line-height: 1.25; }
.blog-article-excerpt { margin: 0; font-size: 1.1rem; color: var(--color-gray); }
.blog-article-body {
    font-size: 1rem;
    line-height: 1.7;
}
.blog-article-body h2 { font-size: 1.5rem; margin: 2rem 0 0.75rem; color: var(--color-text); }
.blog-article-body h3 { font-size: 1.25rem; margin: 1.5rem 0 0.5rem; color: var(--color-text); }
.blog-article-body p { margin: 0 0 1rem; color: var(--color-text); }
.blog-article-body ul, .blog-article-body ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.blog-article-body li { margin-bottom: 0.35rem; }
.blog-figure {
    margin: 1.5rem 0;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.blog-figure img {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
}
.blog-article-footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-light-gray); }

/* Blog two-column layout (main + sidebar) */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.blog-main { min-width: 0; }
.blog-back-wrap { margin: 0 0 0.75rem; }
.blog-meta { margin: 0 0 0.25rem; }
.blog-sidebar {
    position: sticky;
    top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.blog-sidebar-card {
    background: #fff;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-light-gray);
}
.blog-sidebar-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--color-text);
}
.blog-sidebar-list { margin: 0; padding-left: 1.25rem; }
.blog-sidebar-list li { margin-bottom: 0.4rem; font-size: 0.9rem; line-height: 1.4; }
.blog-sidebar-list a { color: var(--color-brand); text-decoration: none; }
.blog-sidebar-list a:hover { text-decoration: underline; }
.blog-toc-list { list-style: none; padding-left: 0; }
.blog-toc-list li { margin-bottom: 0.35rem; }
.blog-related-list { list-style: none; padding-left: 0; }
.blog-related-list li { margin-bottom: 0.5rem; }
.blog-sidebar-text {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--color-gray);
    line-height: 1.45;
}
.blog-sidebar-cta .blog-cta-btn { width: 100%; justify-content: center; margin-top: 0.25rem; }

/* CTA block (mid-post and bottom) – purple button style */
.blog-cta-block {
    background: #f8f7fc;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 2rem 0;
    border: 1px solid var(--color-light-gray);
}
.blog-cta-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--color-text);
}
.blog-cta-text {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    color: var(--color-gray);
    line-height: 1.5;
}
.blog-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.25rem;
    background: var(--color-brand);
    color: #fff !important;
    font-weight: 600;
    border-radius: 0.75rem;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.2s;
}
.blog-cta-btn:hover { background: #6349c7; color: #fff; }
.blog-cta-bottom { margin-top: 2rem; }
.blog-next-reads {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-light-gray);
}
.blog-next-reads-label {
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 0 0.35rem;
    color: var(--color-text);
}
.blog-next-reads-links {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-gray);
}
.blog-next-reads-links a { color: var(--color-brand); text-decoration: none; }
.blog-next-reads-links a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; }
}