.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.modal-check {
    background: white;
    width: 95vw;
    height: 95vh;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.modal-header {
    height: 50px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.modal-body {
    flex-grow: 1;
    height: 100%;
    width: 100%;
}

.modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.close-btn {
    font-size: 2.5rem;    /* bigger font size */
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
    padding: 0 8px;
}


iframe {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    border: none;
}
 .feature-card { transition: transform .3s ease, box-shadow .3s ease; }
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 .75rem 2rem rgba(0,0,0,.08); }
/* If you still use .rounded-9 elsewhere, give it a sane radius */
.rounded-9 { border-radius: 1rem; }
 .property-card { transition: transform .2s ease, box-shadow .2s ease; }
.property-card:hover { transform: translateY(-4px); box-shadow: 0 .75rem 2rem rgba(0,0,0,.12); }
/* If your slider breaks on small screens, let items wrap as a grid fallback */
@media (max-width: 576px) {
    .property-slider { display: grid; grid-template-columns: 1fr; gap: .75rem; }
    .property-slider .item { min-width: 0; }
}
 .agent-card { transition: transform .18s ease, box-shadow .18s ease; }
.agent-card:hover { transform: translateY(-4px); box-shadow: 0 .75rem 2rem rgba(0,0,0,.12); }

.agent-photo img { object-fit: cover; }
.agent-photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
    opacity: .6; transition: opacity .2s ease;
}
.agent-card:hover .agent-photo::after { opacity: .8; }

.rating-badge {
    position: absolute; top: .5rem; right: .5rem;
    font-weight: 600; padding: .35rem .55rem;
}
 .app-accent { font-family: 'Sama Kannada', serif; font-size: 1.9rem; }
@media (max-width: 575.98px){ .app-accent { font-size: 1.6rem; } }

.feature-card { position: relative; transition: transform .18s ease, box-shadow .18s ease; }
.feature-card::before{
    content:""; position:absolute; inset:0 0 auto 0; height:3px;
    background: linear-gradient(90deg, #dc3545, #ff7b7b);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 .75rem 2rem rgba(0,0,0,.12); }
     /* Section background */
 .how-it-works{
     background:
             radial-gradient(1200px 600px at -10% 0%, rgba(13,110,253,.08), transparent 60%),
             radial-gradient(800px 500px at 110% 100%, rgba(220,53,69,.08), transparent 60%),
             linear-gradient(180deg, #fff, #f8fafc);
     overflow: hidden;
 }

/* Card (glass) */
.hiw-card{
    position: relative;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 1rem;
    padding: 1.25rem 1.25rem 1.5rem;
    box-shadow: 0 .75rem 2rem rgba(0,0,0,.1);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hiw-card:hover{
    transform: translateY(-4px);
    border-color: rgba(13,110,253,.25);
    box-shadow: 0 1.25rem 2.25rem rgba(13,110,253,.12);
}

/* Animated badge */
.hiw-badge{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, #0d6efd, #dc3545, #0d6efd);
    padding: 2px;
    box-shadow: 0 .5rem 1.25rem rgba(13,110,253,.2);
    animation: spin 6s linear infinite both;
}
.hiw-badge span{
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #fff;
    color: #0d2340;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .5px;
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
}
.hiw-badge i{
    position: absolute;
    bottom: -6px; right: -6px;
    background: #0d6efd;
    color: #fff;
    border-radius: 999px;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    box-shadow: 0 .4rem 1rem rgba(13,110,253,.3);
}
@media (max-width: 575.98px){
    .hiw-badge{ width: 58px; height: 58px; }
    .hiw-badge span{ inset: 6px; font-size: .95rem; }
    .hiw-badge i{ width: 26px; height: 26px; font-size: 15px; }
}
@keyframes spin{
    0% { transform: rotate(0) }
    100% { transform: rotate(360deg) }
}

/* Connectors between steps */
.how-it-works-track .col{
    position: relative;
}
/* Desktop: horizontal connectors */
@media (min-width: 992px){
    .how-it-works-track .col:not(:last-child)::after{
        content: "";
        position: absolute;
        top: 48px;  /* aligns with badge center */
        right: -12px;
        width: calc(100% - 88%); /* short connector */
        height: 2px;
        background: linear-gradient(90deg, rgba(13,110,253,.25), rgba(220,53,69,.25));
    }
}
/* Mobile/tablet: vertical connectors (between rows) */
@media (max-width: 991.98px){
    .how-it-works-track .col{
        padding-bottom: 1rem;
    }
    .how-it-works-track .col:not(:last-child)::after{
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -8px;
        width: 2px;
        height: 16px;
        background: linear-gradient(180deg, rgba(13,110,253,.25), rgba(220,53,69,.25));
    }
}
     /* ---- Card base ---- */
 .ptype-card{
     background: #fff;
     box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
     transition: transform .22s ease, box-shadow .22s ease;
 }
.ptype-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 1.25rem 2.25rem rgba(0,0,0,.14);
}

/* ---- Media zone ---- */
.ptype-media{ position: relative; }
.ptype-media img{
    width: 100%; height: 260px; object-fit: cover; display: block;
    transition: transform .5s ease;
}
.ptype-card:hover .ptype-media img{ transform: scale(1.05); }

/* ---- Category chip ---- */
.ptype-chip{
    position: absolute; top: .75rem; left: .75rem;
    background: rgba(255,255,255,.95);
    color: #202020; border-radius: 999px;
    padding: .25rem .65rem; font-weight: 600; font-size: .8rem;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.12);
}

/* ---- Glass overlay footer ---- */
.ptype-overlay{
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: .65rem;
    background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 70%);
}
.ptype-glass{
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 12px;
    color: #fff; padding: .6rem .8rem;
}

/* Slider item min width (for horizontal scrollers) */
.property-slider .item{ min-width: 280px; }
     /* Section background */
 .agent-cta{
     background:
             radial-gradient(60% 70% at 0% 0%, rgba(220,53,69,.07), transparent 65%),
             radial-gradient(60% 70% at 100% 100%, rgba(13,110,253,.06), transparent 65%),
             linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.00));
 }
/* Glass panel */
.glass-card{
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.55);
}
/* Chips */
.chip{
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    border-radius: 999px;
    padding: .35rem .6rem;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
}
/* Image shadow */
.shadow-illustration{
    box-shadow:
            0 10px 30px rgba(0,0,0,.10),
            0 6px 10px rgba(0,0,0,.06);
}
/* Floating badges */
.float-badge{
    position: absolute;
}
/* CTA hover */
.cta-raise{
    transform: translateY(0);
    transition: transform .18s ease, box-shadow .18s ease;
}
.cta-raise:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(220,53,69,.25);
}

/* Typography weight helper for nicer title */
.fw-extrabold{ font-weight: 800; }
@media (max-width: 991.98px){
    .float-badge{ display:none; }
}
     /* ——— Section background ——— */
 .suite-allinone{
     background:
             radial-gradient(1200px 600px at -10% -10%, rgba(220,53,69,.18), transparent 55%),
             radial-gradient(900px 600px at 110% 110%, rgba(13,110,253,.18), transparent 50%),
             linear-gradient(180deg, #111827 0%, #0b1220 100%);
 }
.suite-allinone .accent{ color:#ff6b6b; }
.suite-allinone .pill{
    background: rgba(255,255,255,.12);
    color:#fff;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    padding: .25rem .6rem;
    font-size: .8rem;
    display: inline-flex; align-items: center;
}
.bg-shape{
    position:absolute; pointer-events:none; filter: blur(40px); opacity:.35;
}
.bg-shape-1{ width:260px; height:260px; background:#ef476f; top:-40px; right:5%; border-radius:50%; }
.bg-shape-2{ width:320px; height:320px; background:#118ab2; bottom:-60px; left:3%; border-radius:50%; }

/* ——— Feature cards ——— */
.fi-card{
    background:#fff; border-radius:1rem; overflow:hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    transition: transform .18s ease, box-shadow .2s ease;
    position:relative;
}
.fi-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0,0,0,.12);
}
.fi-media{ background:#f3f4f6; }
.fi-body{ padding:1rem 1rem 1.25rem; }
@media (min-width:992px){ .fi-body{ padding:1.25rem 1.25rem 1.5rem; } }

/* Accent link */
.link-cta{
    color:#dc3545; text-decoration:none; font-weight:600;
}
.link-cta:hover{ text-decoration:underline; }

/* Headings contrast on dark bg */
.suite-allinone h2,
.suite-allinone .lead{ color:#fff; }

/* Prefer rounded-4 everywhere in this block */
.rounded-4{ border-radius:1rem!important; }
     /* Top band background (deep blue gradients + soft shapes) */
 .ptype-hero{
     background:
             radial-gradient(1200px 600px at -10% -10%, rgba(255,255,255,.08), transparent 60%),
             radial-gradient(900px 500px at 110% 110%, rgba(255,255,255,.06), transparent 55%),
             linear-gradient(180deg, #102a54 0%, #0d2244 100%);
 }
.ptype-shape{
    position:absolute; pointer-events:none; filter:blur(40px); opacity:.28;
}
.ptype-shape-1{ width:300px; height:300px; background:#1e90ff; top:-60px; right:4%; border-radius:50%; }
.ptype-shape-2{ width:260px; height:260px; background:#ff6b6b; bottom:-70px; left:6%; border-radius:50%; }

/* Cards */
.ptype-card{
    background:#0b0b0b; /* fallback while image loads */
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    transition: transform .2s ease, box-shadow .2s ease;
}
.ptype-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.16); }

.ptype-media{ position:relative; height:200px; }
.ptype-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.ptype-chip{
    position:absolute; left:12px; top:12px;
    background: rgba(0,0,0,.55); color:#fff; backdrop-filter: blur(6px);
    padding:.25rem .55rem; border-radius:999px; font-size:.8rem;
}

.ptype-card-overlay{
    position:absolute; inset:0; display:flex; justify-content:flex-end; align-items:flex-end;
    background: linear-gradient(to top, rgba(0,0,0,.55), transparent 65%);
}
.ptype-glass{
    margin: 0.5rem; padding: .65rem .75rem; border-radius:.75rem;
    background: rgba(255,255,255,.15); color:#fff; backdrop-filter: blur(8px);
}

/* Utilities */
.rounded-4{ border-radius:1rem!important; }
     /* ===== Hero look & feel (scoped) ===== */
 .smart-hero{
     background:
             linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18)),
             linear-gradient(135deg, #0f2c5f 0%, #173c86 100%);
     position: relative;
 }
.smart-hero::after{
    content:""; position:absolute; inset:0;
    background: radial-gradient(80% 60% at 50% -10%, rgba(255,255,255,.10), transparent 60%);
    pointer-events:none;
}

.hero-logo{ height: 44px; width:auto; }

.hero-accent{
    position: relative;
    background: linear-gradient(90deg,#fff, #bcd9ff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero-pill{
    display:inline-flex; align-items:center;
    padding:.5rem .9rem;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    color:#fff;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.25);
    font-weight: 600;
}

.hero-illustration{
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
    overflow: hidden;
}

/* Floating shapes */
.hero-shape{
    position:absolute; filter: blur(40px); opacity:.22; pointer-events:none;
}
.hero-shape-1{ width:320px; height:320px; background:#1e90ff; top:-80px; right:5%; border-radius:50%; }
.hero-shape-2{ width:260px; height:260px; background:#ff6b6b; bottom:-90px; left:6%; border-radius:50%; }

/* Spacing helper for larger screens */
.py-lg-6{ padding-top: 5rem!important; padding-bottom: 5rem!important; }

/* Tweak badge border color in light mode */
.border-opacity-25{ --bs-border-opacity: .25; }
 .object-cover { object-fit: cover; }

.one-cta{
    background:#fff;
    border:1px solid var(--bs-border-color);
}
.one-cta .cta-body{
    color: var(--bs-body-color);
    background: none;
}
.one-cta .cta-media{ min-height:260px; }

/* Neutral chips on light bg */
.chip{
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.35rem .65rem; border-radius:999px;
    background: var(--bs-light);
    color: var(--bs-body-color);
    border:1px solid var(--bs-border-color);
    font-size:.85rem;
}

.cta-raise{ transition: transform .15s ease, box-shadow .15s ease; }
.cta-raise:hover{ transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }

@media (min-width: 992px){
    .one-cta .cta-media{ min-height:100%; }
}
     /* ===== Scoped styling (prefix: pm-) ===== */
 .pm-support{
     background:
             radial-gradient(900px 300px at 10% -10%, rgba(220,53,69,.06), transparent 40%),
             radial-gradient(900px 300px at 100% 0%, rgba(13,110,253,.05), transparent 45%),
             linear-gradient(180deg, var(--bs-body-bg) 0%, #f8fafc 100%);
 }

/* Eyebrow */
.eyebrow{ letter-spacing:.2px; }

/* Card / tile */
.pm-tile{
    background:#fff;
    border:1px solid var(--bs-border-color-translucent);
    border-radius:1rem;
    padding:1.25rem 1.25rem 1.5rem;
    box-shadow:0 .25rem 1.25rem rgba(16,24,40,.06);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pm-tile:hover{
    transform:translateY(-3px);
    box-shadow:0 .75rem 2rem rgba(16,24,40,.08);
    border-color:rgba(16,24,40,.08);
}

/* Tile head */
.pm-tile__head{
    display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem;
}
.icon-wrap{
    width:42px; height:42px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, rgba(220,53,69,.08), rgba(13,110,253,.08));
    color:var(--bs-danger);
    font-size:1.2rem;
}
.chip{
    font-weight:600; font-size:.8rem; border-radius:999px; padding:.4rem .75rem;
}
.chip--danger{ background:var(--bs-danger-bg-subtle); color:var(--bs-danger-text-emphasis); }
.chip--primary{ background:var(--bs-primary-bg-subtle); color:var(--bs-primary-text-emphasis); }

/* Bullet list */
.pm-list{ list-style:none; padding-left:0; margin:0 0 .25rem 0; }
.pm-list li{
    display:flex; align-items:flex-start;
    color:var(--bs-secondary-color); line-height:1.45; margin-bottom:.4rem;
}
.pm-list i{ color:var(--bs-success); margin-right:.5rem; }

/* Trust strip */
.pm-stats{
    display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
    background:#fff; border:1px dashed var(--bs-border-color);
    border-radius:12px; padding:.85rem 1rem;
}
.pm-stats .stat{
    min-width:180px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:.1rem;
}
.pm-stats .stat i{ font-size:1.25rem; color:var(--bs-danger); }
.pm-stats .stat strong{ font-size:1.05rem; }
.pm-stats .stat span{ font-size:.9rem; color:var(--bs-secondary-color); }

@media (min-width: 992px){
    .pm-tile{ padding:2rem 2rem 2.25rem; }
}
     /* ===== Friendly, scoped styling (assist-section / help-card) ===== */
 .assist-section{
     background:
             radial-gradient(700px 240px at -10% -20%, rgba(13,110,253,.06), transparent 40%),
             radial-gradient(700px 240px at 110% 0%, rgba(220,53,69,.06), transparent 45%),
             linear-gradient(180deg, #fff 0%, #f8fafc 100%);
 }

/* Cards */
.help-card{
    background:#fff;
    border:1px solid var(--bs-border-color-translucent);
    border-radius:1rem;
    padding:1.25rem 1.25rem 1.5rem;
    box-shadow:0 .25rem 1.25rem rgba(16,24,40,.06);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.help-card:hover{
    transform:translateY(-3px);
    box-shadow:0 .8rem 2rem rgba(16,24,40,.08);
    border-color:rgba(16,24,40,.12);
}

/* Icon bubble */
.help-icon{
    width:44px;height:44px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, rgba(13,110,253,.1), rgba(13,110,253,.05));
    color:#0d6efd;font-size:1.3rem;
}
.help-icon--danger{
    background:linear-gradient(135deg, rgba(220,53,69,.1), rgba(220,53,69,.05));
    color:#dc3545;
}

/* Chips */
.chip{
    font-weight:600;font-size:.8rem;border-radius:999px;padding:.35rem .7rem;
}
.chip--primary{background:var(--bs-primary-bg-subtle);color:var(--bs-primary-text-emphasis);}
.chip--danger{background:var(--bs-danger-bg-subtle);color:var(--bs-danger-text-emphasis);}
.chip--soft{background:#fff;border:1px dashed var(--bs-border-color-translucent);color:var(--bs-secondary-color);}

/* Features */
.feature-list{list-style:none;padding-left:0;margin:0;}
.feature-list li{
    display:flex;align-items:flex-start;gap:.5rem;margin:.35rem 0;color:var(--bs-secondary-color);
}
.feature-list i{color:var(--bs-success);}

/* Trust strip */
.trust-strip{
    display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
    background:#fff;border:1px dashed var(--bs-border-color-translucent);
    border-radius:14px;padding:.85rem 1rem;
}
.trust-strip .stat{
    min-width:180px;text-align:center;display:flex;flex-direction:column;gap:.1rem;
}
.trust-strip .stat i{font-size:1.25rem;color:#dc3545;}
.trust-strip .stat strong{font-size:1.05rem;}
.trust-strip .stat span{font-size:.9rem;color:var(--bs-secondary-color);}

@media (min-width: 992px){
    .help-card{padding:2rem 2rem 2.25rem;}
}
     /* ===== Agents grid (cards) ===== */

 .agent-card{
     border-radius: 1rem;
     box-shadow: 0 6px 16px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
     border: 1px solid rgba(0,0,0,.06);
     background: #fff;
 }
.agent-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
    border-color: rgba(0,0,0,.10);
}

/* Media */
.agent-media{
    border-bottom: 1px solid rgba(0,0,0,.06);
    overflow: hidden;
    background: #f7f7f9;
}
.agent-media img{
    transition: transform .4s ease;
    will-change: transform;
}
.agent-card:hover .agent-media img{
    transform: scale(1.05);
}

/* Placeholder initials when no image */
.agent-initials{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%;
    font-weight:700; letter-spacing:.5px;
    color:#fff; font-size: clamp(1.25rem, 4vw, 1.75rem);
    background: linear-gradient(135deg, #dc3545 0%, #f48b94 100%);
    text-shadow: 0 1px 0 rgba(0,0,0,.15);
}

/* Floating rating chip */
.rating-chip{
    position:absolute; top:.5rem; right:.5rem;
    display:inline-flex; align-items:center; gap:.25rem;
    padding:.25rem .5rem;
    font-size:.75rem; font-weight:600;
    background: rgba(255,255,255,.9);
    color:#212529;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 2rem;
    backdrop-filter: saturate(160%) blur(4px);
    box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* Small chips & meta */
.role-chip{
    background: rgba(255, 217, 221);
    color: #dc2743;
    border-radius: 999px;
    padding:.25rem .5rem;
    font-size:.7rem;
    font-weight:600;
}
.agent-meta{
    color: #6c757d;
}

/* "Voir les biens" link behavior */
.view-link{
    color:#dc3545;
    font-weight:600;
    display:inline-flex; align-items:center; gap:.25rem;
    transition: color .2s ease, transform .2s ease;
}
.view-link i{ transition: transform .2s ease; }
.agent-card:hover .view-link i{ transform: translateX(3px); }

/* Accessibility: focus styles */
.agent-card:focus-within{
    outline: 3px solid rgba(220,53,69,.35);
    outline-offset: 2px;
}

/* Dark mode support if you use data-bs-theme="dark" */
[data-bs-theme="dark"] .agent-card{
    background:#151922; border-color:rgba(255,255,255,.06);
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
[data-bs-theme="dark"] .agent-media{ background:#0f1320; border-color:rgba(255,255,255,.06); }
[data-bs-theme="dark"] .rating-chip{
    background: rgba(20,24,33,.8); color:#e9ecef; border-color: rgba(255,255,255,.06);
}
[data-bs-theme="dark"] .role-chip{
    background: rgba(13,110,253,.18); color:#7ab8ff;
}
[data-bs-theme="dark"] .agent-meta{ color:#a8b3c7; }
[data-bs-theme="dark"] .view-link{ color:#ff6b81; }

/* Motion respect */
@media (prefers-reduced-motion: reduce){
    .agent-card, .agent-media img, .view-link i{ transition:none !important; }
}
     /* ==== THEME VARIABLES ==== */
 :root{
     --hero-c1:#fff3f4;  /* light red shades */
     --hero-c2:#ffe7ea;
     --hero-c3:#ffdfe5;
     --hero-accent:#dc3545; /* bootstrap danger */
 }

/* ==== ANIMATED BACKDROP ==== */
.hero-listing-animated{
    background: radial-gradient(1200px 600px at -10% 10%, var(--hero-c2), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, var(--hero-c3), transparent 55%),
    linear-gradient(135deg, var(--hero-c1) 0%, var(--hero-c2) 50%, var(--hero-c3) 100%);
    background-size: 160% 160%;
    animation: gradientShift 18s ease-in-out infinite alternate;
    border-radius: 1.25rem;
}
@keyframes gradientShift{
    from { background-position: 0% 0%, 100% 0%, 0% 0%; }
    to   { background-position: 100% 100%, 0% 100%, 100% 100%; }
}

/* Decorative floating blobs */
.hero-blob{
    position:absolute; pointer-events:none; filter: blur(30px); opacity:.35;
    background: radial-gradient(circle at 30% 30%, #ff8aa1, #ff6a84 55%, transparent 60%);
    width: 280px; height: 280px; border-radius: 50%;
    animation: float 14s ease-in-out infinite;
}
.hero-blob-1{ top:-40px; left:-60px; animation-delay:0s; }
.hero-blob-2{ bottom:-60px; right:-80px; animation-delay:1.4s; }
@keyframes float{
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(10px, -14px, 0) scale(1.05); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* ==== REVEAL ANIMATIONS ==== */
.reveal-up{
    opacity:0; transform: translateY(12px);
    animation: revealUp .7s cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay: var(--ru-delay, 0s);
}
@keyframes revealUp{
    to{ opacity:1; transform: translateY(0); }
}

/* ==== SEARCH RAIL ==== */
.search-rail .form-floating>label{ color:#6c757d; }
.search-rail .form-select{
    height: calc(3.5rem + 2px);
    background-color: transparent;
}
.search-rail .form-select:focus{
    box-shadow: 0 0 0 .25rem rgba(220,53,69,.15);
    border-color: rgba(220,53,69,.45);
}

/* CTA micro-interaction */
.btn-cta{
    position: relative; overflow:hidden;
    transition: transform .12s ease, box-shadow .12s ease;
}
.btn-cta:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(220,53,69,.25); }
.btn-cta:active{ transform: translateY(0); box-shadow:none; }

/* Play button with pulse ring */
.play-pill{
    width: 64px; height: 64px; border-radius: 50%;
    background:#fff; display:inline-flex; align-items:center; justify-content:center;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}
.play-pill i{ font-size: 1.75rem; color: var(--hero-accent); }
.play-pill::before{
    content:""; position:absolute; inset:-8px; border-radius:inherit;
    background: radial-gradient(circle, rgba(220,53,69,.25), transparent 60%);
    transform: scale(.8); opacity:.6;
    animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse{
    0%   { transform: scale(.8); opacity:.6; }
    70%  { transform: scale(1.15); opacity:0; }
    100% { transform: scale(1.15); opacity:0; }
}
.play-pill:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.12); }

/* ==== REDUCED MOTION ==== */
@media (prefers-reduced-motion: reduce){
    .hero-listing-animated, .hero-blob, .reveal-up, .play-pill::before { animation: none !important; }
    .btn-cta, .play-pill { transition: none !important; }
}

/* ==== DARK MODE TWEAKS (optional if you use data-bs-theme) ==== */
[data-bs-theme="dark"] .hero-listing-animated{
    background: radial-gradient(900px 500px at -10% 10%, #3b2126, transparent 60%),
    radial-gradient(700px 400px at 110% 0%, #331b20, transparent 55%),
    linear-gradient(135deg, #24161a, #2a1a1f 50%, #301c22 100%);
}
[data-bs-theme="dark"] .play-pill{ background:#1e1f25; }
 .res-card { transition: transform .25s ease, box-shadow .25s ease; }
.res-card:hover { transform: translateY(-4px); box-shadow: 0 1.25rem 2rem rgba(0,0,0,.08); }

.res-media { height: 220px; }
@media (min-width: 768px) { .res-media { height: 240px; } }
@media (min-width: 1200px) { .res-media { height: 260px; } }
.res-media img { display:block; }

/* Subtle red gradient overlay that intensifies on hover */
.res-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(220, 53, 69,.70) 0%, rgba(220, 53, 69,.15) 55%, rgba(220,53,69,0) 100%);
    opacity: 0; transition: opacity .25s ease;
    display:flex; padding: .75rem;
}
.res-card:hover .res-overlay { opacity: 1; }

.res-overlay-content {
    width: 100%;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background: rgba(0,0,0,.15);
    border-radius: 999px;
    padding: .35rem .5rem .35rem .75rem;
    color: #fff;
}
     /* Smaller, responsive media box */
 .section-agents .agent-media{
     height: clamp(130px, 18vw, 170px); /* smaller on all screens */
     border-radius: 12px;
     overflow: hidden;
     background: #f7f7f9;               /* subtle placeholder bg */
     display: flex;
     align-items: center;
     justify-content: center;
 }

/* Make image fill neatly */
.section-agents .agent-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Initials placeholder still centered and smaller */
.section-agents .agent-media .agent-initials{
    font-weight: 700;
    font-size: clamp(1rem, 3.5vw, 1.25rem);
    color: #888;
    letter-spacing: .5px;
}

/* Slightly smaller rating chip to match reduced image */
.section-agents .rating-chip{
    position: absolute;
    top: .5rem;
    right: .5rem;
    padding: .25rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
}