/* =====================================================================
   FindNA — Public site styles
   ===================================================================== */

:root{
    /* Refined palette - Resonant Void aesthetic */
    --c-navy:    #0b2545;
    --c-navy-2:  #13315c;
    --c-deep:    #1c1a17;
    --c-ink:     #2d2926;
    --c-emerald: #16a47a;
    --c-emerald-2: #0d8a64;
    --c-gold:    #c9a227;
    --c-gold-2:  #a88420;
    --c-terracotta: #a67c5b;
    --c-olive:   #6b7062;
    --c-slate:   #5a6572;
    --c-clay:    #c4b8a8;
    --c-bg:      #f5f3ef;
    --c-card:    #ffffff;
    --c-text:    #1c1a17;
    --c-text-2:  #3d3935;
    --c-muted:   #7a756d;
    --c-border:  #e2ddd5;
    --c-charcoal:#2d2926;
    --shadow-sm: 0 1px 2px rgba(28,26,23,.04), 0 1px 3px rgba(28,26,23,.06);
    --shadow:    0 6px 24px rgba(28,26,23,.06), 0 1px 2px rgba(28,26,23,.05);
    --shadow-lg: 0 20px 50px rgba(28,26,23,.14);
    --radius:    12px;
    --radius-sm: 8px;
    --radius-lg: 20px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    letter-spacing: -0.01em;
}
h1,h2,h3,h4,h5,h6,.brand-mark{font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing:-0.02em; font-weight: 600;}

a{color: var(--c-navy); text-decoration:none;}
a:hover{color: var(--c-emerald);}

.main-content{min-height: 60vh;}

/* -------------------- Brand mark / Navbar -------------------- */
.brand-mark{
    font-weight: 800;
    font-size: 1.6rem;
    color: #fff;
    letter-spacing:-0.02em;
}
.brand-mark span{color: var(--c-gold);}

/* -------------------- Top announcement bar -------------------- */
.topbar{
    position: relative;
    background:
        radial-gradient(900px 280px at 80% -40%, rgba(201,162,39,.18), transparent 60%),
        radial-gradient(700px 220px at 0% 140%, rgba(22,164,122,.16), transparent 60%),
        linear-gradient(120deg, #050f20 0%, #061833 45%, #0a234a 100%);
    color: #fff;
    padding: .9rem 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(201,162,39,.18);
    isolation: isolate;
}
.topbar-grid{
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
    pointer-events: none;
}
.topbar-shimmer{
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(201,162,39,.22) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: topbarShimmer 7s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}
@keyframes topbarShimmer{
    0%   { transform: translateX(-120%); }
    55%  { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}
.topbar-inner{
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.25rem;
    min-height: 38px;
}
.topbar-left{
    display: flex; align-items: center; gap: .85rem;
    flex: 1; min-width: 0;
}
.topbar-pulse{
    position: relative; width: 12px; height: 12px; flex-shrink: 0;
}
.topbar-pulse-dot{
    position: absolute; inset: 2px; border-radius: 50%;
    background: #25D366;
    box-shadow: 0 0 10px rgba(37,211,102,.7);
}
.topbar-pulse-ring{
    position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid #25D366;
    animation: topbarPulse 1.8s ease-out infinite;
}
@keyframes topbarPulse{
    0%   { transform: scale(.7); opacity: .85; }
    100% { transform: scale(2);  opacity: 0; }
}
.topbar-label{
    font-size: .68rem; font-weight: 800; letter-spacing: .18em;
    color: var(--c-gold);
    text-transform: uppercase;
    padding: .18rem .5rem;
    background: rgba(201,162,39,.12);
    border: 1px solid rgba(201,162,39,.35);
    border-radius: 999px;
    flex-shrink: 0;
}
.topbar-ticker{
    height: 24px; overflow: hidden;
    flex: 1; min-width: 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.topbar-ticker-track{
    animation: topbarRotate 18s cubic-bezier(.7,0,.3,1) infinite;
}
.topbar-ticker-track span{
    display: block; height: 24px; line-height: 24px;
    font-weight: 500; font-size: .92rem;
    color: rgba(255,255,255,.92);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-ticker-track span i{
    color: var(--c-gold); margin-right: .45rem;
}
@keyframes topbarRotate{
    0%, 18%   { transform: translateY(0); }
    22%, 43%  { transform: translateY(-24px); }
    47%, 68%  { transform: translateY(-48px); }
    72%, 93%  { transform: translateY(-72px); }
    97%, 100% { transform: translateY(-96px); }
}
.topbar-right{
    display: flex; align-items: center; gap: .65rem;
    flex-shrink: 0;
}
.topbar-link{
    color: rgba(255,255,255,.82);
    font-size: .85rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: .42rem;
    padding: .25rem .55rem; border-radius: 8px;
    text-decoration: none;
    transition: color .2s ease, background .2s ease;
}
.topbar-link i{ font-size: .9rem; color: var(--c-gold);}
.topbar-link:hover{ color: #fff; background: rgba(255,255,255,.06);}
.topbar-cta{
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem; border-radius: 999px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #fff; font-size: .82rem; font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(18,140,126,.35);
    transition: transform .2s ease, box-shadow .2s ease;
}
.topbar-cta:hover{ color: #fff; transform: translateY(-1px); box-shadow: 0 10px 20px rgba(18,140,126,.45);}

@media (max-width: 991px){
    .topbar-link-email{ display: none;}
}
@media (max-width: 768px){
    .topbar{ padding: .55rem 0;}
    .topbar-inner{ gap: .65rem; min-height: 30px;}
    .topbar-label{ display: none;}
    .topbar-link span{ display: none;}
    .topbar-link{ padding: .25rem .4rem;}
    .topbar-cta span{ display: none;}
    .topbar-cta{ padding: .35rem .55rem;}
    .topbar-ticker-track span{ font-size: .82rem;}
}
@media (max-width: 420px){
    .topbar-link-phone{ display: none;}
}

@media (prefers-reduced-motion: reduce){
    .topbar-shimmer,
    .topbar-pulse-ring,
    .topbar-ticker-track{ animation: none !important;}
}

.navbar-findna{
    background: linear-gradient(120deg, var(--c-navy) 0%, var(--c-navy-2) 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    padding: .75rem 0;
    transition: box-shadow .2s ease, padding .2s ease, background .2s ease;
}
.navbar-findna.is-scrolled{
    padding:.55rem 0;
    box-shadow: 0 12px 30px rgba(11,37,69,.25);
    background: linear-gradient(120deg, #08203c 0%, #0f2a52 100%);
}
.navbar-findna .nav-link{
    color: rgba(255,255,255,.85);
    font-weight:500;
    padding: .55rem 1rem;
    border-radius: 8px;
}
.navbar-findna .nav-link:hover{ background: rgba(255,255,255,.08); color:#fff;}
.navbar-toggler{ border-color: rgba(255,255,255,.4); }
.navbar-toggler-icon{ filter: invert(1) brightness(2); }

.btn-primary-gold{
    background: var(--c-gold);
    color: #1c1306;
    border:0;
    font-weight:700;
}
.btn-primary-gold:hover{ background: var(--c-gold-2); color:#1c1306;}

/* -------------------- Buttons / Forms -------------------- */
.btn{ border-radius: 10px; font-weight: 600; padding:.55rem 1.1rem;}
.btn-lg{ padding:.75rem 1.5rem; font-size:1rem;}
.btn-primary{ background: var(--c-navy); border-color: var(--c-navy);}
.btn-primary:hover, .btn-primary:focus{ background: var(--c-navy-2); border-color: var(--c-navy-2);}
.btn-success{ background: var(--c-emerald); border-color: var(--c-emerald);}
.btn-success:hover{ background: var(--c-emerald-2); border-color: var(--c-emerald-2);}
.btn-outline-primary{ color: var(--c-navy); border-color: var(--c-navy);}
.btn-outline-primary:hover{ background: var(--c-navy); border-color: var(--c-navy);}
.btn-whatsapp{ background:#25D366; color:#fff; border:0; font-weight:600;}
.btn-whatsapp:hover{ background:#1eba58; color:#fff;}

.form-control, .form-select{
    border-radius: 10px;
    border-color: var(--c-border);
    padding: .65rem .9rem;
}
.form-control:focus, .form-select:focus{
    border-color: var(--c-emerald);
    box-shadow: 0 0 0 .2rem rgba(22,164,122,.15);
}
.form-label{ font-weight:600; color: var(--c-charcoal); margin-bottom:.4rem;}

/* -------------------- Hero -------------------- */
.hero{
    position:relative;
    background:
        radial-gradient(1100px 600px at 80% -10%, rgba(201,162,39,.12), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(22,164,122,.12), transparent 60%),
        linear-gradient(135deg, #0f1a28 0%, var(--c-navy) 50%, #1a2d42 100%);
    color:#fff;
    padding: 5.85rem 0 5.5rem;
    overflow:hidden;
}
.hero > .container{ position:relative; z-index:1; }
.hero h1{ font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800; line-height:1.15;}
.hero h1 .accent{ color: var(--c-gold);}
.hero p.lead{ color: rgba(255,255,255,.85); font-size: 1.15rem; max-width: 640px;}

.hero-search{
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-lg);
}
.hero-stat{ color: rgba(255,255,255,.85); }
.hero-stat strong{ display:block; color:#fff; font-size:1.6rem; font-weight:700; line-height:1; }
.hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    position:relative;
    z-index:1;
    margin-bottom:1rem !important;
    box-shadow: 0 16px 30px rgba(11,37,69,.18);
}
.hero-quick-row{
    display:flex; flex-wrap:wrap; gap:.65rem;
    align-items:center;
    margin-top:1rem;
}
.hero-quick-label{
    color: rgba(255,255,255,.7);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.hero-quick-link{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.55rem .85rem;
    border-radius:999px;
    background: rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.14);
    color:#fff;
    font-size:.88rem;
    font-weight:600;
    text-decoration:none;
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.hero-quick-link:hover{
    color:#fff;
    transform: translateY(-2px);
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.28);
}
.hero-quick-link i{ color: var(--c-gold); }
.hero-stats-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:1rem;
}
.hero-stat-card{
    padding:1rem 1rem 1.05rem;
    border-radius:20px;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 34px rgba(4,15,30,.16);
}
.hero-stat-card strong{
    display:block;
    color:#fff;
    font-size:1.65rem;
    font-weight:800;
    line-height:1;
}
.hero-stat-card span{
    display:block;
    margin-top:.4rem;
    color: rgba(255,255,255,.78);
    font-size:.9rem;
}

/* -------------------- Section headings -------------------- */
.section-title{
    font-weight:600;
    font-size: 1.7rem;
    margin-bottom:.25rem;
    color: var(--c-ink);
}
.section-subtitle{ color: var(--c-muted); margin-bottom: 1.5rem; font-size: 1rem;}
.section-headline{ gap:1rem; flex-wrap:wrap; }
.section-kicker{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    margin-bottom:.45rem;
    padding:.38rem .75rem;
    border-radius:999px;
    background:#eef7ff;
    border:1px solid #d7e8fb;
    color: var(--c-navy);
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

/* -------------------- Business card -------------------- */
.biz-card{
    background: var(--c-card);
    border-radius: var(--radius);
    overflow:hidden;
    position:relative;
    box-shadow: 0 2px 8px rgba(28,26,23,.06);
    border: 1px solid var(--c-border);
    transition: .25s transform, .25s box-shadow, .25s border-color;
    height:100%;
    display:flex; flex-direction:column;
}
.biz-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--c-clay);}
.biz-card .biz-cover{
    height: 140px;
    background: linear-gradient(135deg, #e8e4de 0%, #d9d4ca 100%);
    background-size: cover; background-position:center;
    position:relative;
}
.biz-card .biz-cover .badges{
    position:absolute; top:.6rem; left:.6rem;
    display:flex; gap:.35rem;
}
.biz-card .biz-logo{
    width:64px; height:64px; border-radius: 14px;
    background: linear-gradient(135deg, #ffffff 0%, #f1f4fa 100%);
    border: 3px solid #fff;
    box-shadow: 0 8px 20px rgba(11,37,69,.18), 0 0 0 1px rgba(11,37,69,.04);
    display:flex; align-items:center; justify-content:center;
    font-weight: 800; color: var(--c-navy);
    font-size: 1.6rem; line-height:1;
    position:absolute;
    bottom: -22px; left: 1rem; overflow:hidden;
    z-index:2;
}
.biz-card .biz-logo img{ width:100%; height:100%; object-fit:cover;}
.biz-card .biz-body{ padding: 2rem 1rem 1rem; flex:1; display:flex; flex-direction:column;}
.biz-card .biz-title{ font-weight:700; color: var(--c-charcoal); margin:0;}
.biz-card .biz-cat{ color: var(--c-emerald); font-size:.85rem; font-weight:600;}
.biz-card .biz-town{ color: var(--c-muted); font-size:.85rem;}
.biz-card .biz-actions{ display:flex; gap:.4rem; margin-top:auto; padding-top:.8rem;}
.biz-card .biz-actions .btn{ flex:1; padding:.45rem .5rem; font-size:.82rem;}
.biz-card::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.34) 18%, transparent 42%);
    transform: translateX(-125%);
    transition: transform .75s ease;
    pointer-events:none;
}
.biz-card:hover::before{ transform: translateX(125%); }
.biz-badge-wrap{ margin-bottom:.7rem; }
.biz-meta-line{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.45rem;
    margin-top:.35rem;
    color: var(--c-muted);
    font-size:.84rem;
}
.biz-meta-dot{ color:#c3b8aa; }
.biz-summary{
    margin:.8rem 0 .95rem;
    color: var(--c-text-2);
    font-size:.93rem;
    line-height:1.55;
    min-height: 4.4rem;
}
.biz-rating-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:.75rem;
}
.biz-review-count{
    color: var(--c-muted);
    white-space:nowrap;
}
.home-podium-grid{ margin-bottom: 2rem; }
.home-podium-card{
    height:100%;
    padding:1.5rem;
    border-radius:24px;
    background:
        radial-gradient(320px 120px at 100% 0%, rgba(45,124,255,.08), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border:1px solid #d9e7f5;
    box-shadow: 0 20px 44px rgba(24,49,83,.1);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.home-podium-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 28px 54px rgba(24,49,83,.14);
    border-color:#bfd7ef;
}
.home-podium-topline,
.home-podium-stats{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
}
.home-podium-topline{ margin-bottom:1rem; }
.home-podium-rank{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.45rem .85rem;
    border-radius:999px;
    background:#183153;
    color:#fff;
    font-size:.8rem;
    font-weight:800;
    letter-spacing:.03em;
    text-transform:uppercase;
}
.home-podium-plan{
    color:#6b7280;
    font-size:.82rem;
    font-weight:700;
}
.home-podium-meta{
    color:#6b7280;
    font-size:.86rem;
    margin-bottom:.85rem;
}
.home-podium-meta i{ color: var(--c-emerald); }
.home-podium-summary{
    color: var(--c-text-2);
    line-height:1.6;
    min-height:4.8rem;
    margin-bottom:1rem;
}
.home-podium-stats{
    padding-top:.85rem;
    border-top:1px dashed rgba(24,49,83,.12);
}
.showcase-grid .biz-card{ height:100%; }

/* -------------------- Badges -------------------- */
.badge-verified{
    background: linear-gradient(135deg, #4a9c6d 0%, var(--c-emerald) 100%);
    color:#fff; font-weight:600; padding:.32rem .55rem; border-radius:6px; font-size:.72rem;
}
.badge-featured{
    background: linear-gradient(135deg, #d4b82a 0%, var(--c-gold) 100%);
    color:#1c1306; font-weight:700; padding:.32rem .55rem; border-radius:6px; font-size:.72rem;
}
.badge-pending{ background:#fff7ed; color:#b45309;}
.badge-soft{ background:#eef2ff; color:#3730a3;}

/* -------------------- Stars -------------------- */
.stars{ color: #f59e0b; font-size: 1rem; letter-spacing: 1px;}
.stars-sm{ font-size: .85rem;}

/* -------------------- Categories grid -------------------- */
.cat-tile{
    background: #fff;
    border-radius: var(--radius);
    padding: 1.4rem 1rem;
    text-align:center;
    border: 1px solid var(--c-border);
    transition: .25s;
    color: var(--c-charcoal);
    display:block; height:100%;
}
.cat-tile i{
    font-size: 1.8rem;
    background: linear-gradient(135deg, var(--c-ink) 0%, var(--c-navy) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cat-tile h6{ margin: .6rem 0 .15rem; font-weight:600;}
.cat-tile small{ color: var(--c-muted);}
.cat-tile:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--c-charcoal); border-color: var(--c-clay);}

/* -------------------- Town card -------------------- */
.town-card{
    background: #fff;
    border:1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    display:flex; align-items:center; gap:.8rem;
    color: var(--c-charcoal);
    transition: .25s;
}
.town-card:hover{ box-shadow: var(--shadow); transform: translateY(-2px); color: var(--c-charcoal); border-color: var(--c-clay);}
.town-card .town-icon{
    width:42px; height:42px; border-radius:10px;
    background: linear-gradient(135deg, var(--c-ink), var(--c-navy));
    color:#fff; display:flex; align-items:center; justify-content:center;
}
.town-card h6{ margin:0; font-weight:600;}
.town-card small{ color: var(--c-muted);}

/* -------------------- How it works -------------------- */
.how-step{
    background:#fff; border-radius: var(--radius); padding:1.5rem;
    border:1px solid var(--c-border); height:100%;
}
.how-step .step-num{
    width:44px; height:44px; border-radius:50%;
    background: linear-gradient(135deg, var(--c-navy), var(--c-emerald));
    color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center;
    margin-bottom:.8rem;
}

/* -------------------- CTA banner -------------------- */
.cta-banner{
    background: linear-gradient(135deg, #0d1a26 0%, var(--c-navy) 50%, #1a3045 100%);
    color:#fff; border-radius: var(--radius-lg); padding: 2.5rem;
    border: 1px solid rgba(201,162,39,.2);
}

/* =====================================================================
   APP PROMO — Download section
   ===================================================================== */
.app-promo{
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 3.25rem 3rem;
    background:
        radial-gradient(1200px 400px at 80% -10%, rgba(201,162,39,.22), transparent 60%),
        radial-gradient(900px 500px at -10% 120%, rgba(22,164,122,.20), transparent 60%),
        linear-gradient(135deg, #07182f 0%, #0b2545 45%, #13315c 100%);
    color: #fff;
    box-shadow:
        0 30px 60px -20px rgba(7,24,47,.55),
        0 0 0 1px rgba(255,255,255,.06) inset;
    isolation: isolate;
}
.app-promo .text-gold{ color: var(--c-gold); }
.app-promo-title{
    font-size: clamp(1.75rem, 3vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}
.app-promo-lead{
    color: rgba(255,255,255,.78);
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 560px;
    margin-bottom: 1.75rem;
}

/* Decorative orbs */
.app-promo-orb{
    position: absolute; border-radius: 50%; pointer-events: none;
    filter: blur(40px); z-index: 0;
    animation: orbDrift 14s ease-in-out infinite alternate;
}
.app-promo-orb--gold{
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(201,162,39,.55), transparent 70%);
    top: -120px; right: -60px;
}
.app-promo-orb--emerald{
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(22,164,122,.45), transparent 70%);
    bottom: -100px; left: 30%;
    animation-delay: -7s;
}
@keyframes orbDrift{
    0%   { transform: translate(0,0) scale(1); opacity:.85;}
    50%  { transform: translate(20px,-20px) scale(1.08); opacity:1;}
    100% { transform: translate(-15px,15px) scale(.95); opacity:.75;}
}

/* Subtle grid */
.app-promo-grid{
    position: absolute; inset: 0; z-index: 0; pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    opacity: .55;
}

/* Animated badge */
.app-badge{
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(201,162,39,.4);
    color: #fff; font-weight: 600; font-size: .85rem;
    backdrop-filter: blur(8px);
}
.app-badge i{ color: var(--c-gold);}
.app-badge-dot{
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-emerald);
    box-shadow: 0 0 0 0 rgba(22,164,122,.7);
    animation: pulseDot 2s ease-out infinite;
}
@keyframes pulseDot{
    0%   { box-shadow: 0 0 0 0 rgba(22,164,122,.7);}
    70%  { box-shadow: 0 0 0 10px rgba(22,164,122,0);}
    100% { box-shadow: 0 0 0 0 rgba(22,164,122,0);}
}

/* Store-style buttons */
.btn-store{
    display: inline-flex; align-items: center; gap: .85rem;
    padding: .85rem 1.5rem;
    border-radius: 14px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    position: relative;
    overflow: hidden;
}
.btn-store i{ font-size: 1.9rem; line-height: 1;}
.btn-store span{ display: flex; flex-direction: column; text-align: left; line-height: 1.1;}
.btn-store small{ font-size: .7rem; opacity: .85; text-transform: uppercase; letter-spacing: .05em; font-weight: 500;}
.btn-store strong{ font-size: 1.05rem; font-weight: 700; margin-top: 2px;}
.btn-store::after{
    content:""; position: absolute; top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
    transform: skewX(-20deg);
    transition: left .7s ease;
}
.btn-store:hover{ transform: translateY(-3px); }
.btn-store:hover::after{ left: 130%; }

.btn-store--android{
    background: linear-gradient(135deg, var(--c-gold) 0%, #e0b836 100%);
    color: #1c1306;
    box-shadow: 0 10px 24px rgba(201,162,39,.35);
}
.btn-store--android:hover{
    color: #1c1306;
    box-shadow: 0 16px 32px rgba(201,162,39,.5);
}
.btn-store--ios{
    background: #fff;
    color: #0b2545;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.btn-store--ios:hover{
    color: #0b2545;
    box-shadow: 0 16px 32px rgba(0,0,0,.28);
}

/* Meta row */
.app-meta{
    display: flex; flex-wrap: wrap; gap: 1.25rem;
    color: rgba(255,255,255,.7);
    font-size: .88rem;
}
.app-meta-item{ display: inline-flex; align-items: center; gap: .4rem;}
.app-meta-item i{ color: var(--c-gold);}

/* ----------------- Phone mockup ----------------- */
.phone-stage{
    position: relative;
    display: inline-block;
    padding: 1rem;
    perspective: 1200px;
}
.phone-glow{
    position: absolute; inset: 10%;
    background: radial-gradient(circle, rgba(201,162,39,.45), transparent 60%);
    filter: blur(40px);
    z-index: 0;
    animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse{
    0%,100% { opacity: .5; transform: scale(1);}
    50%     { opacity: .85; transform: scale(1.08);}
}
.phone-mockup{
    position: relative; z-index: 1;
    width: 240px; height: 480px;
    margin: 0 auto;
    border-radius: 42px;
    background: linear-gradient(160deg, #1c1c1e 0%, #0a0a0b 100%);
    padding: 12px;
    box-shadow:
        0 40px 70px -20px rgba(0,0,0,.55),
        inset 0 0 0 2px rgba(255,255,255,.06),
        inset 0 0 0 4px #000;
    animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY{
    0%,100% { transform: translateY(0) rotate(-2deg);}
    50%     { transform: translateY(-14px) rotate(2deg);}
}
.phone-notch{
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    width: 80px; height: 22px; background: #000; border-radius: 14px; z-index: 2;
}
.phone-screen{
    width: 100%; height: 100%;
    border-radius: 30px;
    background: linear-gradient(180deg, #f5f3ef 0%, #fff 100%);
    overflow: hidden;
    display: flex; flex-direction: column;
    padding: 36px 14px 14px;
    gap: .55rem;
    color: var(--c-navy);
    position: relative;
}
.phone-statusbar{
    display: flex; justify-content: space-between;
    font-size: .65rem; font-weight: 600;
    color: var(--c-text-2);
    padding: 0 .25rem;
}
.phone-statusbar i{ margin-left: 2px;}

.phone-brand{
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    margin: .25rem 0 .35rem;
}
.phone-logo{
    width: 38px; height: 38px; border-radius: 10px;
    background: linear-gradient(135deg, var(--c-navy), var(--c-emerald));
    color: #fff; font-weight: 800; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 3px;
    box-shadow: 0 4px 10px rgba(11,37,69,.25);
}
.phone-brand strong{
    font-family:'Plus Jakarta Sans','Inter',sans-serif;
    font-size: 1rem; color: var(--c-navy); letter-spacing: -0.02em;
}
.phone-brand small{ color: var(--c-muted); font-size: .65rem;}

.phone-search{
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .75rem;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--c-muted);
    font-size: .75rem;
    border: 1px solid rgba(11,37,69,.08);
}
.phone-search i{ color: var(--c-navy);}
.typing-cursor{
    display: inline-block; width: 1px; height: 12px;
    background: var(--c-navy);
    animation: blink 1.1s steps(1) infinite;
}
@keyframes blink{
    0%,49% { opacity: 1;}
    50%,100% { opacity: 0;}
}

.phone-chip-row{
    display: flex; gap: .35rem; overflow: hidden;
    margin-top: .15rem;
}
.phone-chip{
    padding: .25rem .55rem; border-radius: 999px;
    background: #fff; border: 1px solid var(--c-border);
    font-size: .62rem; color: var(--c-text-2); font-weight: 600;
    white-space: nowrap;
}
.phone-chip--gold{
    background: var(--c-gold);
    border-color: var(--c-gold);
    color: #1c1306;
}

.phone-card{
    display: flex; gap: .55rem; align-items: center;
    padding: .55rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--c-border);
    box-shadow: 0 2px 6px rgba(11,37,69,.05);
    animation: cardIn .8s ease both;
}
.phone-card--alt{ animation-delay: .2s;}
@keyframes cardIn{
    from { opacity: 0; transform: translateY(8px);}
    to   { opacity: 1; transform: translateY(0);}
}
.phone-card-logo{
    width: 30px; height: 30px; border-radius: 8px;
    background: linear-gradient(135deg, var(--c-gold), #e0b836);
    color: #1c1306; display: flex; align-items: center; justify-content: center;
    font-size: .85rem; flex-shrink: 0;
}
.phone-card-logo--green{
    background: linear-gradient(135deg, var(--c-emerald), var(--c-emerald-2));
    color: #fff;
}
.phone-card-body{ display: flex; flex-direction: column; min-width: 0;}
.phone-card-body strong{
    font-size: .72rem; color: var(--c-navy); font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phone-card-meta{
    font-size: .6rem; color: var(--c-muted);
    display: flex; align-items: center; gap: .25rem;
}
.phone-card-meta i{ color: var(--c-gold);}

/* Floating accent icons around the phone */
.phone-floater{
    position: absolute; z-index: 2;
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.15rem;
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
    animation: floatAccent 5s ease-in-out infinite;
}
.phone-floater--1{
    top: 10%; left: -5%;
    background: linear-gradient(135deg, #25D366, #1eba58);
    animation-delay: 0s;
}
.phone-floater--2{
    top: 45%; right: -8%;
    background: linear-gradient(135deg, var(--c-emerald), var(--c-emerald-2));
    animation-delay: -1.5s;
}
.phone-floater--3{
    bottom: 12%; left: 0%;
    background: linear-gradient(135deg, var(--c-gold), #e0b836);
    color: #1c1306;
    animation-delay: -3s;
}
@keyframes floatAccent{
    0%,100% { transform: translateY(0) rotate(0);}
    50%     { transform: translateY(-12px) rotate(6deg);}
}

/* Responsive */
@media (max-width: 991px){
    .app-promo{ padding: 2.25rem 1.75rem; text-align: left;}
    .app-promo-title{ font-size: 1.7rem;}
}
@media (max-width: 575px){
    .app-promo{ padding: 1.75rem 1.25rem; border-radius: 22px;}
    .btn-store{ width: 100%; justify-content: center;}
    .app-cta-row{ flex-direction: column;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    .app-promo-orb,
    .phone-mockup,
    .phone-glow,
    .phone-floater,
    .app-badge-dot,
    .typing-cursor,
    .phone-card{ animation: none !important;}
}

/* -------------------- Footer -------------------- */
.findna-footer{
    background: #0f1419;
    color: rgba(255,255,255,.85);
    margin-top: 4rem;
    border-top: 1px solid rgba(201,162,39,.15);
}
.findna-footer .footer-title{ color:#fff; font-weight:700; margin-bottom: 1rem; }
.findna-footer .footer-list{ list-style:none; padding:0; margin:0;}
.findna-footer .footer-list li{ margin-bottom:.4rem;}
.findna-footer .footer-list a{ color: rgba(255,255,255,.75);}
.findna-footer .footer-list a:hover{ color: var(--c-gold);}
.text-white-70{ color: rgba(255,255,255,.7);}
.social-btn{
    width:38px; height:38px; border-radius:50%;
    background: rgba(255,255,255,.08); color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    transition:.2s;
}
.social-btn:hover{ background: var(--c-gold); color:#1c1306;}

/* -------------------- Profile page -------------------- */
.profile-cover{
    height: 280px;
    background: linear-gradient(135deg, #0f1a28 0%, var(--c-navy) 50%, var(--c-emerald) 100%);
    background-size: cover; background-position:center;
    border-radius: var(--radius-lg);
    position:relative;
}
.profile-head{
    background:#fff; border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-top: -60px; position:relative; z-index:1;
}
.profile-logo{
    width: 100px; height:100px; border-radius: 18px; background:#fff;
    border: 4px solid #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; color: var(--c-navy); font-size: 2rem;
    overflow:hidden;
}
.profile-logo img{ width:100%; height:100%; object-fit:cover;}

.profile-tabs .nav-link{ color: var(--c-muted); font-weight:600;}
.profile-tabs .nav-link.active{ color: var(--c-navy); background: transparent; border-bottom: 3px solid var(--c-emerald);}

.info-card{
    background:#fff; border:1px solid var(--c-border);
    border-radius: var(--radius); padding: 1.25rem;
}

/* -------------------- Alerts -------------------- */
.alert{ border-radius: 10px; border: 0; padding: .9rem 1.1rem; font-weight:500; display: flex; align-items: center;}
.alert-success{ background:#edf7f1; color:#0b5e36; border-left: 4px solid #16a47a;}
.alert-danger{ background:#fef2f2; color:#9b1c1c; border-left: 4px solid #dc3545;}
.alert-info{ background:#eff6ff; color:#1e40af; border-left: 4px solid #2D7CFF;}
.alert-warning{ background:#fef9e7; color:#7a4f00; border-left: 4px solid #f59e0b;}
.alert-logout{ background: linear-gradient(135deg, #f8f6f1 0%, #f0ece3 100%); color: #3d3a35; border-left: 4px solid var(--c-gold); font-weight: 400; box-shadow: 0 2px 12px rgba(201,162,39,.12); margin-bottom: 1.25rem; padding: .85rem 1rem;}
.alert-logout i{ color: var(--c-gold); font-size: 1.15rem; margin-right: .5rem;}

/* -------------------- Pagination -------------------- */
.page-link{
    color: var(--c-navy); border-radius: 8px !important; margin: 0 2px;
    border-color: var(--c-border);
}
.page-item.active .page-link{
    background: var(--c-navy); border-color: var(--c-navy);
}

/* -------------------- Tables -------------------- */
.table{ background:#fff; border-radius: var(--radius); overflow:hidden;}
.table thead th{ background:#f2f5fa; font-weight:700; color: var(--c-charcoal); border-bottom:0;}

/* -------------------- Misc -------------------- */
.icon-circle{
    width:48px; height:48px; border-radius:50%;
    background: rgba(22,164,122,.12); color: var(--c-emerald);
    display:inline-flex; align-items:center; justify-content:center;
    font-size: 1.2rem;
}
.divider-dot::before{ content:'•'; margin: 0 .35rem; color: var(--c-muted);}

.section-pad{ padding: 3.5rem 0;}
.bg-soft{ background:#eef3fb;}

@media (max-width: 768px){
    .hero{ padding: 2.85rem 0 2.75rem; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px;}
    .hero h1{ font-size: 1.85rem; line-height: 1.2;}
    .hero p.lead{ font-size: 1rem; margin-top: .65rem !important;}
    .hero-search{ padding: .65rem;}
    .hero-search .input-group-text{ padding-left: .6rem; padding-right: .4rem;}
    .hero-search .form-control,
    .hero-search .form-select{ font-size: 1rem; min-height: 44px;}
    .hero-search .btn{ min-height: 44px; font-size: .95rem;}
    .hero-stat{ flex: 1 1 calc(50% - .75rem); min-width: 0;}
    .hero-stat strong{ font-size: 1.3rem;}
    .profile-cover{ height: 180px;}
    .section-pad{ padding: 2.25rem 0;}
    .section-title{ font-size: 1.4rem;}
    .section-subtitle{ font-size: .95rem; margin-bottom: 1rem;}
    .cta-banner{ padding: 1.5rem 1.25rem;}
    .cta-banner h3{ font-size: 1.15rem;}
}
@media (max-width: 575.98px){
    .hero{ padding: 2.25rem 0 2.25rem;}
    .hero h1{ font-size: 1.65rem;}
    .hero .badge-soft{ font-size: .72rem;}
    .hero-stat{ flex: 1 1 calc(50% - .5rem);}
    .hero-stat strong{ font-size: 1.15rem;}
    .navbar-findna{ padding: .55rem 0;}
}

/* =====================================================================
   PRO / 3D LAYER — FindNA polish
   ===================================================================== */

/* -------------------- Logo brand mark -------------------- */
.brand-plate{
    display:inline-flex; align-items:center; justify-content:center;
    background:#fff;
    padding: 5px 12px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    transition: transform .2s ease, box-shadow .2s ease;
}
.brand-plate:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.22);}
.navbar-findna .navbar-brand.brand-plate{ padding: 5px 12px;}
.brand-logo{
    height: 34px; width: auto; display:block;
}
.footer-brand-plate{
    display:inline-flex; align-items:center; justify-content:center;
    background:#fff;
    padding: 10px 18px;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.footer-logo{
    height: 52px; width:auto; display:block;
}
.dash-brand-link{ display:flex; align-items:center; flex:1;}
.dash-brand-link.brand-plate{ padding: 6px 12px;}
.dash-brand-logo{
    height: 36px; width:auto; display:block;
}
@media (max-width: 575.98px){
    .brand-logo{ height: 32px;}
    .navbar-findna .navbar-brand.brand-plate{ padding: 4px 10px;}
}

/* -------------------- About hero -------------------- */
.about-hero{
    position:relative;
    background:
        radial-gradient(900px 480px at 80% -10%, rgba(45,124,255,.22), transparent 60%),
        radial-gradient(700px 420px at 10% 110%, rgba(212,160,23,.16), transparent 60%),
        linear-gradient(120deg, #0b2545 0%, #13315c 60%, #1a3f78 100%);
    color:#fff;
    padding: 5rem 0 5rem;
    overflow:hidden;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
}
.about-hero::before{
    content:""; position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(900px) rotateX(60deg) translateY(20%);
    transform-origin: center top;
    pointer-events:none;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 70%);
    opacity:.5;
}
.about-hero-copy{ position:relative; z-index:1;}
.about-hero-copy .eyebrow{
    display:inline-flex; align-items:center; gap:.45rem;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
    color: #ffe9a8;
    padding:.45rem .9rem; border-radius: 999px;
    font-weight: 600; font-size:.85rem;
    border: 1px solid rgba(255,255,255,.18);
}
.about-hero .accent{ color: var(--c-gold);}
.about-hero p.lead{ color: rgba(255,255,255,.85);}

/* -------------------- Section eyebrow -------------------- */
.section-eyebrow{
    display:inline-block;
    font-size:.78rem; font-weight:700; letter-spacing:.14em;
    color: var(--c-emerald);
    text-transform: uppercase;
}

/* -------------------- Stats card -------------------- */
.stats-card{
    background:#fff;
    border:1px solid var(--c-border);
    border-radius: 18px;
    padding: 1.75rem;
    position: relative;
    box-shadow: 0 18px 40px rgba(11,37,69,.08);
    transition: transform .35s ease, box-shadow .35s ease;
}
.stats-card:hover{ transform: translateY(-3px); box-shadow: 0 26px 50px rgba(11,37,69,.14);}
.stats-card .stat-row{
    display:flex; justify-content:space-between; align-items:center;
    padding: .85rem 0;
    border-bottom: 1px solid var(--c-border);
}
.stats-card .stat-row--last{ border-bottom: 0; padding-bottom: 0;}
.stats-card .stat-label{ color: var(--c-muted); font-weight:500;}
.stats-card .stat-value{ color: var(--c-navy); font-size: 1.1rem;}

.contact-card-3d{
    position:relative;
    background: linear-gradient(135deg, #0b2545 0%, #13315c 100%);
    color:#fff;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow:
        0 18px 50px rgba(11,37,69,.30),
        inset 0 1px 0 rgba(255,255,255,.06);
    overflow:hidden;
}
.contact-card-3d::before{
    content:"";
    position:absolute; top:-40px; right:-40px;
    width: 180px; height:180px;
    background: radial-gradient(closest-side, rgba(45,124,255,.45), transparent 70%);
    filter: blur(2px); pointer-events:none;
}
.contact-card-3d h5{ color:#fff;}
.contact-card-3d .contact-row{
    display:flex; align-items:center; gap:.7rem;
    padding:.7rem .85rem;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    color: rgba(255,255,255,.92);
    margin-bottom:.55rem;
    text-decoration:none;
    transition:.2s;
}
.contact-card-3d .contact-row i{ font-size:1.1rem;}
.contact-card-3d .contact-row a{ color:#fff; text-decoration:none;}
.contact-card-3d .contact-row:hover{ background: rgba(255,255,255,.1); transform: translateY(-1px);}
.contact-card-3d .contact-row--wa{
    background: linear-gradient(135deg, rgba(37,211,102,.18), rgba(37,211,102,.10));
    border-color: rgba(37,211,102,.35);
}
.contact-card-3d .contact-row--wa i{ color: #25D366; font-size:1.3rem;}
.badge-wa-soft{
    background: #25D366; color:#062;
    font-weight: 700; font-size:.7rem;
    padding:.25rem .55rem; border-radius: 999px;
}

/* -------------------- Feature 3D tiles -------------------- */
.feature-3d{
    position:relative;
    background:#fff;
    border:1px solid var(--c-border);
    border-radius: 16px;
    padding: 1.1rem;
    text-align:center;
    transform-style: preserve-3d;
    transition: transform .35s ease, box-shadow .35s ease;
    box-shadow: 0 10px 24px rgba(11,37,69,.06);
    overflow:hidden;
}
.feature-3d::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(135deg, rgba(45,124,255,.0), rgba(45,124,255,.08));
    opacity:0; transition: opacity .3s;
    pointer-events:none;
}
.feature-3d:hover{ transform: translateY(-6px) rotateX(4deg) rotateY(-4deg); box-shadow: 0 28px 60px rgba(11,37,69,.16);}
.feature-3d:hover::after{ opacity:1;}
.feature-3d-icon{
    width:54px; height:54px; margin: 0 auto;
    border-radius: 14px;
    background: linear-gradient(135deg, #2D7CFF 0%, #0b2545 100%);
    color:#fff; font-size: 1.4rem;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 12px 24px rgba(45,124,255,.35);
    transform: translateZ(20px);
}

/* -------------------- 3D buttons -------------------- */
.btn-3d{
    position: relative;
    box-shadow:
        0 6px 0 rgba(0,0,0,.18),
        0 14px 30px rgba(0,0,0,.18);
    transform: translateZ(0);
    transition: transform .12s ease, box-shadow .12s ease, filter .2s ease;
}
.btn-3d:hover{ transform: translateY(-2px); filter: brightness(1.04);}
.btn-3d:active{ transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.18);}

/* -------------------- CTA banner 3D -------------------- */
.cta-3d{
    position: relative;
    background:
        radial-gradient(500px 240px at 0% 0%, rgba(255,255,255,.12), transparent 60%),
        linear-gradient(120deg, var(--c-emerald) 0%, var(--c-navy) 100%);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(11,37,69,.22);
}
.cta-3d::before{
    content:"";
    position:absolute; inset:auto -40px -60px auto;
    width: 320px; height: 320px;
    background: radial-gradient(closest-side, rgba(212,160,23,.35), transparent 70%);
    pointer-events:none;
}

/* -------------------- Biz cards: tilt-ready -------------------- */
.biz-card{ perspective: 1000px;}
.biz-card{ transition: transform .35s ease, box-shadow .35s ease;}
.biz-card:hover{ transform: translateY(-6px) rotateX(2deg) rotateY(-2deg); box-shadow: 0 28px 60px rgba(11,37,69,.18);}
.biz-card .biz-cover{ overflow:visible;}
.biz-card .biz-cover::after{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(280px 120px at 80% 0%, rgba(255,255,255,.18), transparent 60%);
    pointer-events:none;
}
.biz-card .biz-cover.has-photo{
    background-size:cover; background-position:center;
}
.biz-card .biz-cover.has-photo::before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(11,37,69,.05) 0%, rgba(11,37,69,.45) 100%);
    pointer-events:none;
}

/* Category-themed empty covers — each gives the card a distinct, designed look */
.biz-card .biz-cover-themed{ position:relative;}
.biz-card .biz-cover-themed.theme-1{ background-image: linear-gradient(135deg, #0b2545 0%, #2D7CFF 100%);}
.biz-card .biz-cover-themed.theme-2{ background-image: linear-gradient(135deg, #b91d73 0%, #ff6b9d 100%);}
.biz-card .biz-cover-themed.theme-3{ background-image: linear-gradient(135deg, #0f766e 0%, #34d399 100%);}
.biz-card .biz-cover-themed.theme-4{ background-image: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);}
.biz-card .biz-cover-themed.theme-5{ background-image: linear-gradient(135deg, #5b21b6 0%, #a78bfa 100%);}
.biz-card .biz-cover-themed.theme-6{ background-image: linear-gradient(135deg, #1f2937 0%, #64748b 100%);}

.biz-cover-watermark{
    position:absolute; top:42%; left:50%;
    transform: translate(-50%, -50%);
    font-size: 4.5rem;
    color: rgba(255,255,255,.22);
    text-shadow: 0 6px 20px rgba(0,0,0,.18);
    pointer-events:none;
    line-height:1;
}
.biz-card .biz-cover-themed::after{
    background:
        radial-gradient(180px 90px at 85% 5%, rgba(255,255,255,.22), transparent 65%),
        radial-gradient(220px 110px at 10% 95%, rgba(0,0,0,.18), transparent 70%);
}

/* -------------------- Categories: 3D depth -------------------- */
.cat-tile{
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    box-shadow: 0 6px 18px rgba(11,37,69,.05);
}
.cat-tile:hover{ transform: translateY(-5px) rotateX(3deg); box-shadow: 0 22px 40px rgba(11,37,69,.14);}

/* -------------------- Hero pin animations -------------------- */
.hero{
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
}
.hero::after{
    content:""; position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 80px 80px;
    transform: perspective(900px) rotateX(58deg) translateY(28%);
    transform-origin: center top;
    pointer-events:none;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 70%);
}

/* -------------------- Hero feature card -------------------- */
.hero-feature-card{
    position:relative;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.96));
    color:#111;
    border-radius: 22px;
    padding: 1.5rem;
    border:1px solid rgba(255,255,255,.65);
    box-shadow: 0 34px 80px rgba(0,0,0,.22);
    transform: rotateX(4deg) rotateY(-6deg);
    transform-style: preserve-3d;
    overflow:hidden;
}
.hero-feature-card::before{
    content:"";
    position:absolute; inset:0;
    background:
        radial-gradient(380px 140px at 0% 0%, rgba(45,124,255,.12), transparent 70%),
        radial-gradient(280px 180px at 100% 0%, rgba(201,162,39,.14), transparent 70%);
    pointer-events:none;
}
.hero-feat-icon{
    width: 54px; height: 54px; border-radius: 14px;
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size: 1.4rem; flex-shrink:0;
    box-shadow: 0 14px 24px rgba(11,37,69,.25);
}
.hero-feat-icon--navy{ background: linear-gradient(135deg,#0b2545,#2D7CFF);}
.hero-feat-icon--gold{ background: linear-gradient(135deg,#d4a017,#b78a10);}
.hero-feat-icon--emerald{ background: linear-gradient(135deg,#16a47a,#0d8a64);}
.hero-trust-head,
.hero-mini-list,
.hero-trust-grid{ position:relative; z-index:1; }
.hero-trust-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:1rem;
    margin-bottom:1.1rem;
}
.hero-trust-head h3{
    margin:.45rem 0 .35rem;
    font-size:1.45rem;
    font-weight:800;
    color: var(--c-ink);
    letter-spacing:-.02em;
}
.hero-trust-head p{
    margin:0;
    color:#5d6b7d;
    line-height:1.55;
}
.hero-trust-kicker{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.35rem .7rem;
    border-radius:999px;
    background:#ecfdf5;
    color: var(--c-emerald-2);
    font-size:.77rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.hero-trust-badge{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.55rem .9rem;
    border-radius:999px;
    background:#0b2545;
    color:#fff;
    font-size:.82rem;
    font-weight:700;
    box-shadow: 0 16px 34px rgba(11,37,69,.22);
}
.hero-mini-list{
    display:flex;
    flex-direction:column;
    gap:.8rem;
}
.hero-mini-card{
    display:flex;
    align-items:center;
    gap:.8rem;
    padding:.85rem .9rem;
    border-radius:18px;
    text-decoration:none;
    color:inherit;
    background: rgba(255,255,255,.72);
    border:1px solid rgba(11,37,69,.08);
    box-shadow: 0 14px 24px rgba(11,37,69,.08);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hero-mini-card:hover{
    color:inherit;
    transform: translateY(-2px);
    border-color: rgba(45,124,255,.24);
    box-shadow: 0 18px 32px rgba(11,37,69,.12);
}
.hero-mini-logo{
    width:48px;
    height:48px;
    border-radius:15px;
    overflow:hidden;
    flex:0 0 48px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(135deg, #e9f2ff, #d7e7fa);
    color: var(--c-navy);
    font-weight:800;
    font-size:1.1rem;
}
.hero-mini-logo img{ width:100%; height:100%; object-fit:cover; }
.hero-mini-copy{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}
.hero-mini-copy strong{
    color: var(--c-ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:.95rem;
}
.hero-mini-copy span{
    color:#617086;
    font-size:.8rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.hero-mini-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.35rem .7rem;
    border-radius:999px;
    background:#fff5d8;
    color:#896100;
    font-size:.72rem;
    font-weight:800;
    white-space:nowrap;
}
.hero-trust-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:.8rem;
    margin-top:1rem;
}
.hero-trust-metric{
    display:flex;
    align-items:center;
    gap:.8rem;
    padding:1rem .95rem;
    border-radius:20px;
    background:#fff;
    border:1px solid rgba(11,37,69,.08);
    box-shadow: 0 12px 24px rgba(11,37,69,.06);
    min-height: 0;
}
.hero-trust-metric-icon{
    width:46px;
    min-width:46px;
    height:46px;
    flex: 0 0 46px;
    flex-shrink: 0;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:1.05rem;
    line-height:1;
    box-shadow:none;
    overflow:hidden;
}
.hero-trust-metric-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
}
.hero-trust-metric strong{
    display:block;
    color: var(--c-ink);
    font-size:1.05rem;
    font-weight:800;
    line-height:1;
}
.hero-trust-metric-label{
    display:block;
    margin-top:.35rem;
    color:#6b7280;
    font-size:.82rem;
    line-height:1.35;
}

/* -------------------- Floating WhatsApp button -------------------- */
.wa-float{
    position: fixed;
    right: 22px; bottom: 22px;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #fff;
    display:flex; align-items:center; justify-content:center;
    font-size: 1.6rem;
    box-shadow: 0 18px 40px rgba(18,140,126,.45), 0 4px 10px rgba(0,0,0,.18);
    z-index: 1040;
    text-decoration:none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover{ color:#fff; transform: translateY(-3px) scale(1.04); box-shadow: 0 26px 50px rgba(18,140,126,.55);}
.wa-float-pulse{
    position:absolute; inset:-6px; border-radius: 50%;
    border: 2px solid #25D366; opacity:.7;
    animation: waPulse 1.8s ease-out infinite;
    pointer-events:none;
}
@keyframes waPulse{
    0%{ transform: scale(.85); opacity:.7;}
    100%{ transform: scale(1.4); opacity:0;}
}

/* -------------------- Back-to-top -------------------- */
.back-to-top{
    position: fixed;
    right: 22px; bottom: 94px;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--c-navy);
    color:#fff; border: 0;
    box-shadow: 0 12px 28px rgba(11,37,69,.35);
    opacity: 0; pointer-events:none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 1039;
}
.back-to-top.is-visible{ opacity:1; pointer-events:auto;}
.back-to-top:hover{ transform: translateY(-3px); background: var(--c-navy-2);}

/* -------------------- Reveal-on-scroll -------------------- */
.reveal{
    opacity: 0; transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.reveal.is-in{ opacity:1; transform: translateY(0);}

/* -------------------- Glass card -------------------- */
.glass{
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 18px;
}

/* -------------------- Social dark variant -------------------- */
.social-btn-dark{
    background:#0b2545; color:#fff;
}
.social-btn-dark:hover{ background: var(--c-navy-2); color:#fff;}
.social-btn-wa{ background:#25D366 !important; color:#fff !important;}
.social-btn-wa:hover{ background:#1eba58 !important; color:#fff !important;}

/* -------------------- Reduced motion -------------------- */
@media (prefers-reduced-motion: reduce){
    .logo-floater,
    .logo-ring,
    .wa-float-pulse{ animation: none !important;}
    .biz-card:hover,
    .feature-3d:hover,
    .stats-card:hover,
    .cat-tile:hover{ transform: none !important;}
}

@media (max-width: 768px){
    .about-hero{ padding: 3rem 0 3.5rem; border-radius: 0;}
    .wa-float{ right: 14px; bottom: 14px; width:54px; height:54px; font-size:1.4rem;}
    .back-to-top{ right: 14px; bottom: 78px;}
    .hero-stats-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    .hero-feature-card{ transform: none; }
    .hero-trust-head{ flex-direction: column; }
    .hero-trust-grid{ grid-template-columns: 1fr; }
    .home-podium-card{ padding:1.25rem; }
}

/* =====================================================================
   Service Request page
   ===================================================================== */
.text-navy{ color: var(--c-navy) !important;}
.text-emerald{ color: var(--c-emerald) !important;}
.text-gold{ color: var(--c-gold) !important;}

.sr-hero{
    position:relative;
    overflow:hidden;
    background: linear-gradient(135deg, #0b2545 0%, #13315c 45%, #2D7CFF 100%);
    color:#fff;
    padding: 3.5rem 0 4rem;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    margin-bottom: -2rem;
}
.sr-hero-blob{
    position:absolute; border-radius:50%;
    filter: blur(40px); opacity:.45;
    pointer-events:none;
}
.sr-hero-blob-1{
    width: 380px; height:380px;
    background: radial-gradient(closest-side, rgba(212,160,23,.65), transparent 70%);
    top:-120px; right:-80px;
}
.sr-hero-blob-2{
    width: 320px; height:320px;
    background: radial-gradient(closest-side, rgba(22,164,122,.55), transparent 70%);
    bottom:-140px; left:-60px;
}
.sr-eyebrow{
    display:inline-flex; align-items:center; gap:.4rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    padding: .4rem .9rem;
    border-radius: 999px;
    font-size:.82rem; font-weight:600;
    color:#ffe48a;
    margin-bottom: 1rem;
    backdrop-filter: blur(6px);
}
.sr-title{
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
    margin: 0 0 .5rem;
    max-width: 780px;
    line-height: 1.15;
}
.sr-accent{ color: #ffd35a;}
.sr-lead{
    color: rgba(255,255,255,.82);
    font-size: 1.05rem;
    max-width: 660px;
    margin: 0 0 1.25rem;
}
.sr-trust{
    display:flex; flex-wrap:wrap; gap:.5rem;
}
.sr-trust-pill{
    display:inline-flex; align-items:center; gap:.4rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size:.82rem; font-weight:600;
    color:#fff;
}
.sr-trust-pill i{ color:#ffd35a;}

.sr-section{
    padding: 4rem 0 3rem;
    position:relative;
}

.sr-card{
    background:#fff;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(11,37,69,.10), 0 0 0 1px rgba(11,37,69,.04);
    overflow:hidden;
}
.sr-card-head{
    display:flex; align-items:center; gap:1rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f9 100%);
    border-bottom: 1px solid rgba(11,37,69,.06);
}
.sr-card-head-icon{
    width:52px; height:52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--c-navy), var(--c-emerald));
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size: 1.4rem;
    box-shadow: 0 8px 20px rgba(11,37,69,.25);
    flex-shrink:0;
}
.sr-card-title{
    margin:0; font-size:1.2rem; font-weight:800;
    color: var(--c-navy);
}
.sr-card-sub{
    margin:.15rem 0 0;
    color: var(--c-muted); font-size:.88rem;
}
.sr-card-body{
    padding: 1.75rem;
}

.sr-label{
    display:flex; align-items:center; gap:.4rem;
    font-weight:600; color: var(--c-charcoal);
    margin-bottom:.35rem; font-size:.92rem;
}
.sr-label i{ font-size:1rem;}
.sr-optional{ color: var(--c-muted); font-weight: 400; font-size:.82rem;}

.sr-input{
    border-radius: 12px;
    border: 1.5px solid #e3e8f0;
    padding: .7rem .9rem;
    font-size: .95rem;
    background:#fbfcfe;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.sr-input:focus{
    border-color: var(--c-emerald);
    box-shadow: 0 0 0 4px rgba(22,164,122,.12);
    background:#fff;
    outline:none;
}
textarea.sr-input{ resize: vertical; min-height: 120px;}

.sr-submit-row{
    display:flex; align-items:center; justify-content:space-between;
    gap: 1rem; margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed rgba(11,37,69,.12);
    flex-wrap: wrap;
}
.sr-submit{
    background: linear-gradient(135deg, var(--c-navy) 0%, #2D7CFF 100%);
    border: none;
    color:#fff;
    font-weight:700;
    padding: .85rem 1.8rem;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(11,37,69,.28);
    display:inline-flex; align-items:center; gap:.5rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.sr-submit:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(11,37,69,.35);
    color:#fff;
}

.sr-side-card{
    background:#fff;
    border-radius: 18px;
    padding: 1.4rem 1.4rem;
    margin-bottom: 1rem;
    box-shadow: 0 10px 30px rgba(11,37,69,.07), 0 0 0 1px rgba(11,37,69,.04);
}
.sr-side-title{
    display:flex; align-items:center; gap:.5rem;
    font-size: 1rem; font-weight:800;
    color: var(--c-navy);
    margin: 0 0 1rem;
}
.sr-side-title i{ color: var(--c-gold);}

.sr-steps{
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap: .9rem;
}
.sr-steps li{
    display:flex; gap:.85rem; align-items:flex-start;
}
.sr-step-num{
    width: 30px; height:30px; border-radius:50%;
    background: linear-gradient(135deg, var(--c-emerald), var(--c-navy));
    color:#fff; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    font-size:.9rem;
    box-shadow: 0 4px 12px rgba(22,164,122,.30);
}
.sr-steps strong{
    display:block; color: var(--c-navy); font-size:.92rem;
    margin-bottom: .15rem;
}
.sr-steps p{
    margin:0; color: var(--c-muted); font-size:.85rem;
    line-height:1.45;
}

.sr-tip-list{
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:.5rem;
}
.sr-tip-list li{
    display:flex; align-items:flex-start; gap:.5rem;
    font-size:.9rem; color: var(--c-charcoal);
}
.sr-tip-list i{ color: var(--c-emerald); margin-top: 2px;}

.sr-side-cta{
    background: linear-gradient(135deg, var(--c-navy) 0%, #13315c 100%);
    color: #fff;
    text-align:center;
    border: 1px solid rgba(212,160,23,.4);
}
.sr-side-cta h4{
    margin:.5rem 0 .3rem;
    color:#fff; font-weight:800; font-size:1.05rem;
}
.sr-side-cta p{
    color: rgba(255,255,255,.78);
    font-size:.88rem;
    margin-bottom: .9rem;
}
.sr-cta-icon{
    font-size: 2rem; color: var(--c-gold);
    display:block;
}

@media (max-width: 768px){
    .sr-hero{ padding: 2.5rem 0 3rem; border-radius: 0;}
    .sr-card-head{ padding: 1.1rem 1.2rem;}
    .sr-card-body{ padding: 1.2rem;}
    .sr-submit-row{ flex-direction:column; align-items:stretch;}
    .sr-submit{ width:100%; justify-content:center;}
}

/* =====================================================================
   Pricing page
   ===================================================================== */
.pr-hero{
    position:relative;
    overflow:hidden;
    background: linear-gradient(135deg, #0b2545 0%, #13315c 45%, #1a3f78 100%);
    color:#fff;
    padding: 4rem 0 5rem;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
    margin-bottom: -3rem;
}
.pr-hero-blob{
    position:absolute; border-radius:50%;
    filter: blur(50px); opacity:.55;
    pointer-events:none;
}
.pr-hero-blob-1{
    width: 440px; height:440px;
    background: radial-gradient(closest-side, rgba(212,160,23,.75), transparent 70%);
    top:-160px; right:-100px;
}
.pr-hero-blob-2{
    width: 380px; height:380px;
    background: radial-gradient(closest-side, rgba(22,164,122,.55), transparent 70%);
    bottom:-160px; left:-80px;
}
.pr-eyebrow{
    display:inline-flex; align-items:center; gap:.4rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    padding: .4rem 1rem;
    border-radius: 999px;
    font-size:.82rem; font-weight:600;
    color:#ffe48a; margin-bottom: 1rem;
    backdrop-filter: blur(6px);
}
.pr-title{
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 800;
    margin: 0 0 .6rem;
    line-height: 1.15;
}
.pr-accent{ color:#ffd35a;}
.pr-lead{
    color: rgba(255,255,255,.85);
    font-size: 1.1rem;
    max-width: 660px;
    margin: 0 auto 1.5rem;
}
.pr-trust{
    display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
}
.pr-trust-pill{
    display:inline-flex; align-items:center; gap:.4rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    padding: .4rem .9rem;
    border-radius: 999px;
    font-size:.82rem; font-weight:600;
    color:#fff;
}
.pr-trust-pill i{ color:#ffd35a;}

.pr-section{ padding: 5rem 0 3.5rem; position:relative;}

/* Pricing card */
.pr-card{
    position:relative;
    background:#fff;
    border-radius: 22px;
    padding: 2rem 1.6rem 1.75rem;
    box-shadow: 0 14px 40px rgba(11,37,69,.08), 0 0 0 1px rgba(11,37,69,.05);
    height: 100%;
    display:flex; flex-direction:column;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    border-top: 4px solid transparent;
}
.pr-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(11,37,69,.16), 0 0 0 1px rgba(11,37,69,.08);
}
.pr-card-free{ border-top-color: #94a3b8;}
.pr-card-standard{ border-top-color: var(--c-emerald);}
.pr-card-premium{ border-top-color: var(--c-gold);}
.pr-card.is-hero{
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 30%);
    box-shadow: 0 24px 60px rgba(212,160,23,.25), 0 0 0 2px rgba(212,160,23,.35);
    transform: translateY(-10px);
}
.pr-card.is-hero:hover{ transform: translateY(-14px);}

.pr-ribbon{
    position:absolute; top:-14px; right:18px;
    background: linear-gradient(135deg, #d4a017 0%, #b78a10 100%);
    color:#fff;
    padding:.4rem .9rem;
    border-radius: 999px;
    font-size:.78rem; font-weight:800;
    letter-spacing:.3px;
    box-shadow: 0 8px 20px rgba(212,160,23,.4);
    display:inline-flex; align-items:center; gap:.3rem;
    text-transform: uppercase;
}
.pr-ribbon i{ color:#fff7d4;}

.pr-card-icon{
    width:56px; height:56px;
    border-radius: 16px;
    display:flex; align-items:center; justify-content:center;
    font-size: 1.7rem;
    margin-bottom: 1rem;
    box-shadow: 0 10px 22px rgba(11,37,69,.12);
}
.pr-card-free .pr-card-icon{
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    color: var(--c-navy);
}
.pr-card-standard .pr-card-icon{
    background: linear-gradient(135deg, #16a47a, #0d8a64);
    color:#fff;
}
.pr-card-premium .pr-card-icon{
    background: linear-gradient(135deg, #d4a017, #b78a10);
    color:#fff;
}

.pr-card-tag{
    display:inline-block;
    font-size:.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.6px;
    padding:.25rem .65rem;
    border-radius: 999px;
    margin-bottom:.6rem;
}
.pr-card-free .pr-card-tag{ background:#f1f5f9; color:#475569;}
.pr-card-standard .pr-card-tag{ background:#ecfdf5; color: var(--c-emerald-2);}
.pr-card-premium .pr-card-tag{ background:#fef3c7; color: var(--c-gold-2);}

.pr-plan-name{
    font-size: 1.45rem; font-weight: 800;
    color: var(--c-navy); margin: 0 0 .3rem;
}
.pr-plan-desc{
    color: var(--c-muted); font-size:.92rem;
    margin: 0 0 1.1rem;
    min-height: 2.2em;
}
.pr-plan-desc:empty{ display:none;}

.pr-price-row{
    display:flex; align-items:baseline; gap:.5rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px dashed rgba(11,37,69,.12);
}
.pr-price{
    font-size: 2.1rem; font-weight: 800;
    color: var(--c-navy); line-height: 1;
}
.pr-card-premium .pr-price{
    background: linear-gradient(135deg, #d4a017, #b78a10);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pr-price-suffix{
    color: var(--c-muted); font-size:.9rem; font-weight:600;
}

.pr-feature-list{
    list-style:none; padding:0; margin: 0 0 1.5rem;
    display:flex; flex-direction:column; gap:.55rem;
    flex:1;
}
.pr-feature-list li{
    display:flex; align-items:flex-start; gap:.55rem;
    font-size:.92rem; color: var(--c-charcoal);
    line-height:1.4;
}
.pr-feature-list i{ margin-top: 3px; flex-shrink:0; font-size:1rem;}
.pr-card-free .pr-feature-list i{ color: #64748b;}
.pr-card-standard .pr-feature-list i{ color: var(--c-emerald);}
.pr-card-premium .pr-feature-list i{ color: var(--c-gold);}

.pr-cta{
    width:100%;
    padding:.85rem 1rem;
    border-radius: 14px;
    font-weight:700;
    display:inline-flex; align-items:center; justify-content:center;
    gap:.3rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.pr-cta:hover{ transform: translateY(-2px); color:#fff;}
.pr-cta-free{
    background:#fff; color: var(--c-navy);
    border: 2px solid var(--c-navy);
}
.pr-cta-free:hover{ background: var(--c-navy); color:#fff;}
.pr-cta-standard{
    background: linear-gradient(135deg, var(--c-emerald), var(--c-emerald-2));
    color:#fff; border:none;
    box-shadow: 0 10px 24px rgba(22,164,122,.30);
}
.pr-cta-standard:hover{ box-shadow: 0 14px 30px rgba(22,164,122,.42);}
.pr-cta-premium{
    background: linear-gradient(135deg, #d4a017, #b78a10);
    color:#fff; border:none;
    box-shadow: 0 12px 28px rgba(212,160,23,.40);
}
.pr-cta-premium:hover{ box-shadow: 0 16px 36px rgba(212,160,23,.55);}

/* Add-on packages */
.pr-addons-wrap{ margin-top: 4rem;}
.pr-section-eyebrow{
    display:inline-flex; align-items:center; gap:.4rem;
    background: rgba(11,37,69,.07);
    color: var(--c-navy);
    padding:.35rem .9rem;
    border-radius: 999px;
    font-size:.78rem; font-weight:700;
    margin-bottom: .75rem;
    text-transform: uppercase;
    letter-spacing:.4px;
}
.pr-section-eyebrow i{ color: var(--c-gold);}
.pr-section-title{
    font-size: 1.7rem; font-weight: 800;
    color: var(--c-navy); margin: 0 0 .4rem;
}
.pr-section-sub{
    color: var(--c-muted); max-width: 560px; margin: 0 auto 1.5rem;
}

.pr-addon-card{
    display:flex; gap: 1.1rem;
    background:#fff;
    border-radius: 18px;
    padding: 1.3rem;
    box-shadow: 0 12px 30px rgba(11,37,69,.08), 0 0 0 1px rgba(11,37,69,.05);
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
    border-left: 4px solid transparent;
}
.pr-addon-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(11,37,69,.14);
}
.pr-addon-verified{ border-left-color: var(--c-emerald);}
.pr-addon-featured{ border-left-color: var(--c-gold);}
.pr-addon-icon{
    width: 56px; height:56px; flex-shrink:0;
    border-radius: 14px;
    display:flex; align-items:center; justify-content:center;
    font-size: 1.6rem;
}
.pr-addon-verified .pr-addon-icon{
    background: linear-gradient(135deg, rgba(22,164,122,.15), rgba(22,164,122,.05));
    color: var(--c-emerald);
}
.pr-addon-featured .pr-addon-icon{
    background: linear-gradient(135deg, rgba(212,160,23,.18), rgba(212,160,23,.05));
    color: var(--c-gold);
}
.pr-addon-body{ flex:1; min-width:0;}
.pr-addon-name{
    font-size:1.05rem; font-weight: 800;
    color: var(--c-navy); margin:0;
}
.pr-addon-price{ text-align:right; flex-shrink:0;}
.pr-addon-price-val{
    font-size: 1.1rem; font-weight:800; color: var(--c-navy);
    display:block; line-height:1;
}
.pr-addon-price small{ color: var(--c-muted); font-size:.78rem;}
.pr-addon-desc{ font-size:.88rem;}
.pr-addon-features{
    list-style:none; padding:0; margin: 0 0 .8rem;
    display:flex; flex-direction:column; gap:.3rem;
    font-size:.85rem;
}
.pr-addon-features li{ display:flex; gap:.4rem; color: var(--c-charcoal);}
.pr-addon-verified .pr-addon-features i{ color: var(--c-emerald);}
.pr-addon-featured .pr-addon-features i{ color: var(--c-gold);}
.pr-addon-cta{
    background: var(--c-navy); color:#fff;
    border:none; border-radius: 10px;
    padding:.45rem .9rem; font-weight:700;
    display:inline-flex; align-items:center; gap:.25rem;
}
.pr-addon-cta:hover{ background: var(--c-navy-2); color:#fff;}

/* Enterprise CTA */
.pr-faq-cta{
    margin-top: 4rem;
    background: linear-gradient(135deg, var(--c-navy) 0%, #13315c 100%);
    color:#fff;
    padding: 2rem 2.2rem;
    border-radius: 22px;
    display:flex; align-items:center; justify-content:space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    border: 1px solid rgba(212,160,23,.4);
    box-shadow: 0 20px 50px rgba(11,37,69,.20);
}
.pr-faq-cta h3{ color:#fff !important; font-weight:800; font-size:1.3rem;}
.pr-faq-cta p,
.pr-faq-cta .text-muted{ color: rgba(255,255,255,.88) !important;}
.pr-enterprise-btn{
    background: linear-gradient(135deg, var(--c-gold), var(--c-gold-2));
    border:none; color:#1c1306;
    font-weight:800;
    box-shadow: 0 10px 28px rgba(212,160,23,.45);
    display:inline-flex; align-items:center; gap:.4rem;
}
.pr-enterprise-btn:hover{ color:#1c1306; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(212,160,23,.6);}

@media (max-width: 768px){
    .pr-hero{ padding: 3rem 0 4rem; border-radius: 0;}
    .pr-card.is-hero{ transform: none;}
    .pr-faq-cta{ flex-direction: column; text-align:center;}
    .pr-addon-card{ flex-direction: column;}
}

/* =====================================================================
   Auth pages (login / register / forgot)
   ===================================================================== */
.auth-page{
    padding: 3rem 0 4rem;
    background:
        radial-gradient(700px 320px at 12% -10%, rgba(45,124,255,.10), transparent 60%),
        radial-gradient(600px 300px at 95% 105%, rgba(22,164,122,.10), transparent 60%),
        var(--c-bg);
    min-height: 70vh;
}

.auth-shell{
    display:grid;
    grid-template-columns: 1.05fr 1fr;
    background:#fff;
    border-radius: 24px;
    overflow:hidden;
    box-shadow: 0 30px 70px rgba(11,37,69,.18), 0 0 0 1px rgba(11,37,69,.06);
    margin: 0 auto;
    max-width: 1080px;
}
.auth-shell-wide{ max-width: 1180px;}

/* Promo (left side) */
.auth-promo{
    position:relative;
    background: linear-gradient(135deg, #0b2545 0%, #13315c 50%, #1a3f78 100%);
    color:#fff;
    padding: 2.5rem 2.2rem;
    overflow:hidden;
    display:flex;
    align-items:center;
}
.auth-promo-blob{
    position:absolute; border-radius:50%;
    filter: blur(48px); opacity:.55;
    pointer-events:none;
}
.auth-promo-blob-1{
    width: 380px; height:380px;
    background: radial-gradient(closest-side, rgba(212,160,23,.7), transparent 70%);
    top:-140px; right:-90px;
}
.auth-promo-blob-2{
    width: 340px; height:340px;
    background: radial-gradient(closest-side, rgba(22,164,122,.5), transparent 70%);
    bottom:-150px; left:-70px;
}
.auth-promo-content{ position:relative; z-index:1; width:100%;}

.auth-eyebrow{
    display:inline-flex; align-items:center; gap:.4rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    padding: .35rem .85rem;
    border-radius: 999px;
    font-size:.78rem; font-weight:700;
    color:#ffe48a;
    margin-bottom: 1rem;
    backdrop-filter: blur(6px);
}
.auth-promo-title{
    font-size: clamp(1.5rem, 2.4vw, 2.05rem);
    font-weight: 800;
    margin: 0 0 .6rem;
    color:#fff;
    line-height: 1.18;
}
.auth-promo-lead{
    color: rgba(255,255,255,.82);
    font-size: .98rem;
    margin: 0 0 1.4rem;
}
.auth-promo-list{
    list-style:none; padding:0; margin: 0 0 1.6rem;
    display:flex; flex-direction:column; gap:.55rem;
}
.auth-promo-list li{
    display:flex; align-items:center; gap:.55rem;
    color: rgba(255,255,255,.92);
    font-size:.92rem;
}
.auth-promo-list i{ color: #ffd35a; font-size:1.05rem;}
.auth-promo-stats{
    display:flex; gap: 1rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255,255,255,.15);
}
.auth-promo-stats div{
    flex:1;
}
.auth-promo-stats strong{
    display:block;
    font-size: 1.4rem; font-weight: 800;
    color: #ffd35a;
    line-height:1;
}
.auth-promo-stats small{
    color: rgba(255,255,255,.75); font-size:.75rem;
}

/* Form (right side) */
.auth-form-pane{
    padding: 2.5rem 2.4rem;
    display:flex; flex-direction:column; justify-content:center;
}
.auth-form-head{ margin-bottom: 1.25rem;}
.auth-form-title{
    font-size: 1.6rem; font-weight: 800;
    color: var(--c-charcoal);
    margin: 0 0 .25rem;
}
.auth-form-sub{
    color: var(--c-muted);
    margin: 0;
    font-size:.95rem;
}

.auth-label{
    display:flex; align-items:center; gap:.4rem;
    font-weight:600; color: var(--c-charcoal);
    margin-bottom:.35rem; font-size:.92rem;
}
.auth-input{
    border-radius: 12px;
    border: 1.5px solid #e3e8f0;
    padding: .75rem .95rem;
    font-size: .95rem;
    background:#fbfcfe;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.auth-input:focus{
    border-color: var(--c-emerald);
    box-shadow: 0 0 0 4px rgba(22,164,122,.12);
    background:#fff;
    outline:none;
}

.auth-password-wrap{ position:relative;}
.auth-password-wrap .auth-input{ padding-right: 2.6rem;}
.auth-eye{
    position:absolute; right: 8px; top:50%;
    transform: translateY(-50%);
    background: transparent; border:none;
    color: var(--c-muted);
    width:34px; height:34px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    transition: color .15s ease, background-color .15s ease;
}
.auth-eye:hover{ color: var(--c-navy); background: rgba(11,37,69,.06);}

.auth-link-small{
    color: var(--c-emerald);
    font-size:.88rem; font-weight:600;
    text-decoration:none;
}
.auth-link-small:hover{ color: var(--c-emerald-2); text-decoration:underline;}

.auth-submit{
    background: linear-gradient(135deg, var(--c-navy) 0%, #2D7CFF 100%);
    border:none;
    color:#fff !important;
    font-weight:700;
    padding: .85rem 1.5rem;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(11,37,69,.28);
    display:inline-flex; align-items:center; justify-content:center;
    gap:.5rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.auth-submit:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(11,37,69,.35);
    color:#fff !important;
}

.auth-divider{
    display:flex; align-items:center;
    margin: 1.5rem 0 1rem;
    color: var(--c-muted);
    font-size:.82rem;
    text-transform: uppercase;
    letter-spacing:.5px;
}
.auth-divider::before,
.auth-divider::after{
    content:""; flex:1;
    border-top: 1px dashed rgba(11,37,69,.18);
}
.auth-divider span{ padding: 0 .75rem;}

.auth-foot{
    text-align:center;
    color: var(--c-muted);
    margin: 0;
    font-size:.95rem;
}
.auth-foot-link{
    color: var(--c-emerald);
    font-weight:700;
    text-decoration:none;
    display:inline-flex; align-items:center;
}
.auth-foot-link:hover{ color: var(--c-emerald-2); text-decoration:underline;}

/* Register "account type" radio cards */
.auth-type-group{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}
.auth-type-card{
    display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
    padding: .85rem 1rem;
    border-radius: 14px;
    background:#fbfcfe;
    border: 2px solid #e3e8f0;
    cursor:pointer;
    transition: all .15s ease;
}
.auth-type-card i{
    font-size: 1.3rem;
    color: var(--c-navy);
    margin-bottom: .2rem;
}
.auth-type-card strong{
    font-size:.95rem;
    color: var(--c-charcoal);
}
.auth-type-card small{
    color: var(--c-muted); font-size:.8rem;
}
.btn-check:checked + .auth-type-card{
    border-color: var(--c-emerald);
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
    box-shadow: 0 8px 20px rgba(22,164,122,.18);
}
.btn-check:checked + .auth-type-card i{
    color: var(--c-emerald);
}

.auth-check .form-check-input{
    margin-top: .25rem;
}
.auth-check .form-check-input:checked{
    background-color: var(--c-emerald);
    border-color: var(--c-emerald);
}
.auth-check .form-check-label{
    font-size:.9rem; color: var(--c-charcoal);
}

@media (max-width: 900px){
    .auth-shell{ grid-template-columns: 1fr;}
    .auth-promo{ padding: 2rem 1.6rem; min-height: auto;}
    .auth-promo-title{ font-size: 1.4rem;}
    .auth-promo-stats{ display:none;}
    .auth-promo-list{ margin-bottom: 0;}
    .auth-form-pane{ padding: 2rem 1.6rem;}
    .auth-type-group{ grid-template-columns: 1fr;}
}

/* Toast Notifications */
.toast-container{position:fixed;top:1rem;right:1rem;z-index:9999;max-width:350px;}
.toast-item{
    background:#fff;border-radius:10px;box-shadow:var(--shadow-lg);padding:1rem 1.25rem;
    margin-bottom:.75rem;display:flex;align-items:center;gap:.75rem;
    animation:slideIn .3s ease-out;border-left:4px solid var(--c-emerald);
}
.toast-item.toast-success{border-left-color:var(--c-emerald);}
.toast-item.toast-error{border-left-color:#dc3545;}
.toast-item.toast-warning{border-left-color:#ffc107;}
.toast-item.toast-info{border-left-color:#2D7CFF;}
.toast-item i{font-size:1.25rem;}
.toast-item .toast-close{background:none;border:none;margin-left:auto;cursor:pointer;opacity:.5;}
.toast-item .toast-close:hover{opacity:1;}
@keyframes slideIn{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}

/* Back to Top Button */
.back-to-top{position:fixed;bottom:2rem;right:2rem;width:48px;height:48px;border-radius:50%;
    background:var(--c-navy);color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:all .3s;z-index:9998;
    text-decoration:none;border:none;cursor:pointer;}
.back-to-top.visible{opacity:1;visibility:visible;}
.back-to-top:hover{background:var(--c-emerald);transform:translateY(-3px);}

/* Share Buttons */
.share-buttons{display:flex;gap:.5rem;flex-wrap:wrap;}
.share-btn{
    display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:8px;
    text-decoration:none;font-size:.9rem;font-weight:500;transition:all .2s;
}
.share-btn.whatsapp{background:#25D366;color:#fff;}
.share-btn.facebook{background:#1877F2;color:#fff;}
.share-btn.twitter{background:#1DA1F2;color:#fff;}
.share-btn.copy{background:var(--c-navy);color:#fff;}
.share-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);}

/* Business FAQ */
.biz-faq{margin-top:2rem;}
.biz-faq-item{border:1px solid var(--c-border);border-radius:10px;margin-bottom:.75rem;overflow:hidden;}
.biz-faq-question{width:100%;background:none;border:none;padding:1rem 1.25rem;text-align:left;
    font-weight:600;display:flex;justify-content:space-between;align-items:center;cursor:pointer;
    color:var(--c-navy);}
.biz-faq-question::after{content:'\002B';font-size:1.5rem;transition:transform .3s;}
.biz-faq-item.open .biz-faq-question::after{transform:rotate(45deg);}
.biz-faq-answer{padding:0 1.25rem;max-height:0;overflow:hidden;transition:max-height .3s, padding .3s;}
.biz-faq-item.open .biz-faq-answer{padding:0 1.25rem 1rem;max-height:500px;}

/* Related Businesses */
.related-biz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;}

/* Report Button */
.btn-report{color:#dc3545;border-color:#dc3545;}
.btn-report:hover{background:#dc3545;color:#fff;}

/* Social Links */
.social-links{display:flex;gap:.75rem;flex-wrap:wrap;}
.social-link{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--c-bg);color:var(--c-navy);text-decoration:none;transition:all .2s;}
.social-link:hover{background:var(--c-navy);color:#fff;}

/* Password Strength */
.password-strength .progress{background:#e5e7eb;border-radius:4px;}
.password-strength small{font-size:.75rem;}

/* Dark Mode */
[data-theme="dark"]{--c-bg:#1a1a2e;--c-card:#16213e;--c-text:#e4e4e7;--c-muted:#a1a1aa;--c-border:#374151;}
[data-theme="dark"] body{background:var(--c-bg);color:var(--c-text);}
[data-theme="dark"] .card,[data-theme="dark"] .info-card,[data-theme="dark"] .dash-card{background:var(--c-card);border-color:var(--c-border);}
[data-theme="dark"] .navbar-findna{background:#16213e !important;}
[data-theme="dark"] .findna-footer{background:#0f0f1a !important;}
[data-theme="dark"] .form-control,[data-theme="dark"] .form-select{background:#1a1a2e;border-color:#374151;color:#e4e4e7;}
[data-theme="dark"] .btn-outline-primary,[data-theme="dark"] .btn-outline-secondary{border-color:#4b5563;}
[data-theme="dark"] .text-muted{color:#9ca3af !important;}
[data-theme="dark"] .bg-white{background:#16213e !important;}
[data-theme="dark"] .table{color:var(--c-text);}
[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd){--bs-table-accent-bg:#1f2937;}

/* Dark Mode Toggle */
.dark-toggle{position:fixed;bottom:22px;left:22px;width:48px;height:48px;border-radius:50%;
    background:var(--c-emerald);color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow-lg);z-index:9998;border:none;cursor:pointer;transition:all .3s;}
.dark-toggle:hover{transform:scale(1.1);}
@media (max-width: 768px){
    .dark-toggle{ bottom: 14px; left: 14px; width: 44px; height: 44px;}
}

/* Trust Badges */
.trust-badges{margin-top:.5rem;}
.trust-badge{font-size:.85rem;display:inline-flex;align-items:center;gap:.25rem;}

/* Profile Completeness */
.completeness-bar .progress{background:#e5e7eb;}
.completeness-bar small{font-size:.75rem;}

/* Compare Feature */
.compare-bar{position:fixed;bottom:0;left:0;right:0;background:var(--c-navy);color:#fff;
    padding:1rem;z-index:9997;display:none;}
.compare-bar.active{display:block;}
.compare-items{display:flex;gap:1rem;align-items:center;}
.compare-item{background:rgba(255,255,255,.1);padding:.5rem 1rem;border-radius:8px;display:flex;align-items:center;gap:.5rem;}
.compare-item img{width:40px;height:40px;object-fit:cover;border-radius:4px;}
.compare-remove{background:none;border:none;color:#fff;cursor:pointer;}

/* Keyboard Shortcuts Help */
.kbd-hint{position:fixed;bottom:1rem;left:1rem;background:rgba(0,0,0,.7);color:#fff;
    padding:.5rem 1rem;border-radius:8px;font-size:.8rem;z-index:9996;}
.kbd{background:#333;padding:.1rem .4rem;border-radius:4px;font-family:monospace;font-size:.75rem;}

/* =====================================================================
   Professional Polish - Enhanced UI
   ===================================================================== */

/* Enhanced focus states for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline: 2px solid var(--c-emerald);
    outline-offset: 2px;
}

/* Smoother form controls */
.form-control, .form-select{
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.form-control:hover, .form-select:hover{
    border-color: #9ca3af;
}
.form-control::placeholder{
    color: #9ca3af;
    opacity: 1;
}

/* Enhanced button states */
.btn{
    transition: all .2s ease;
    position: relative;
    overflow: hidden;
}
.btn::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255,255,255,0.1), transparent);
    opacity: 0;
    transition: opacity .2s;
}
.btn:hover::after{
    opacity: 1;
}
.btn:active{
    transform: scale(0.98);
}

/* Better card elevation */
.card{
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .3s ease, transform .3s ease;
}
.card:hover{
    box-shadow: var(--shadow);
}

/* Cleaner section spacing */
section{
    position: relative;
}

/* Improved modal styling */
.modal-content{
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.modal-header{
    border-bottom-color: var(--c-border);
    padding: 1.25rem 1.5rem;
}
.modal-footer{
    border-top-color: var(--c-border);
    padding: 1rem 1.5rem;
}

/* Better dropdown menus */
.dropdown-menu{
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
}
.dropdown-item{
    border-radius: 8px;
    padding: 0.5rem 1rem;
    transition: background-color .2s;
}
.dropdown-item:hover{
    background-color: var(--c-bg);
}

/* Cleaner table headers */
.table thead th{
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid var(--c-border);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--c-muted);
}

/* Improved pagination */
.page-link{
    transition: all .2s ease;
}
.page-link:hover{
    background-color: var(--c-bg);
    border-color: var(--c-border);
}

/* Better loading states */
.skeleton{
    background: linear-gradient(90deg, var(--c-border) 25%, #f3f4f6 50%, var(--c-border) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-loading{
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Cleaner empty states */
.empty-state{
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--c-muted);
}
.empty-state i{
    font-size: 3rem;
    opacity: 0.5;
    margin-bottom: 1rem;
}

/* Better image handling */
img{
    max-width: 100%;
    height: auto;
}

/* Improved scrollbar */
::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track{
    background: var(--c-bg);
}
::-webkit-scrollbar-thumb{
    background: var(--c-border);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover{
    background: var(--c-muted);
}

/* Better link styles */
a{
    transition: color .2s ease;
}

/* Cleaner badge variations */
.badge{
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Improved input groups */
.input-group-text{
    background: var(--c-bg);
    border-color: var(--c-border);
}

/* Better tooltips */
.tooltip{
    font-size: 0.85rem;
}

/* Cleaner list groups */
.list-group-item{
    border-color: var(--c-border);
    transition: background-color .2s;
}
.list-group-item:hover{
    background-color: var(--c-bg);
}

/* Improved progress bars */
.progress{
    background: var(--c-border);
    border-radius: 999px;
    height: 8px;
}
.progress-bar{
    border-radius: 999px;
    transition: width .3s ease;
}

/* Better aspect ratios for images */
.ratio-16x9{ --bs-aspect-ratio: 56.25%; }
.ratio-4x3{ --bs-aspect-ratio: 75%; }
.ratio-1x1{ --bs-aspect-ratio: 100%; }

/* Improved spinner */
.spinner-border-sm{
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Cleaner offcanvas */
.offcanvas{
    border: none;
    box-shadow: var(--shadow-lg);
}

/* Better nav tabs */
.nav-tabs{
    border-bottom-color: var(--c-border);
}
.nav-tabs .nav-link{
    border: none;
    color: var(--c-muted);
    padding: 1rem 1.5rem;
    position: relative;
}
.nav-tabs .nav-link::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--c-emerald);
    transform: scaleX(0);
    transition: transform .2s;
}
.nav-tabs .nav-link:hover{
    color: var(--c-navy);
}
.nav-tabs .nav-link.active{
    color: var(--c-navy);
    background: transparent;
}
.nav-tabs .nav-link.active::after{
    transform: scaleX(1);
}

/* Improved accordion */
.accordion-button{
    font-weight: 600;
}
.accordion-button:not(.collapsed){
    background: var(--c-bg);
    color: var(--c-navy);
}
.accordion-button:focus{
    box-shadow: none;
    border-color: var(--c-emerald);
}

/* Better close buttons */
.btn-close:focus{
    box-shadow: 0 0 0 0.25rem rgba(22,164,122,.25);
}

/* Cleaner placeholder images */
.placeholder{
    background: var(--c-border);
    border-radius: var(--radius-sm);
}

/* Improved collapse */
.collapse:not(.show){
    display: none;
}
.collapsing{
    transition: height .35s ease;
}

/* Better figure styling */
.figure-img{
    border-radius: var(--radius);
}

/* Enhanced visual hierarchy */
.text-xs{ font-size: 0.75rem; }
.text-sm{ font-size: 0.875rem; }
.text-base{ font-size: 1rem; }
.text-lg{ font-size: 1.125rem; }
.text-xl{ font-size: 1.25rem; }
.text-2xl{ font-size: 1.5rem; }
.text-3xl{ font-size: 1.875rem; }
.text-4xl{ font-size: 2.25rem; }

/* Improved line heights */
.leading-tight{ line-height: 1.25; }
.leading-normal{ line-height: 1.5; }
.leading-relaxed{ line-height: 1.625; }

/* Better letter spacing */
.tracking-tight{ letter-spacing: -0.025em; }
.tracking-normal{ letter-spacing: 0; }
.tracking-wide{ letter-spacing: 0.025em; }

/* Professional Print Styles */
@media print{
    .no-print{ display: none !important; }
    body{ background: #fff; }
    .card{ box-shadow: none; border: 1px solid #ddd; }
    a{ text-decoration: underline; }
}

/* =========================================================
   SPOTLIGHT MARQUEE — Featured & Verified Businesses
   Live, professional scrolling ad placed at the top of the
   homepage. Two rows scrolling in opposite directions with
   pause-on-hover and edge fade for a premium feel.
   ========================================================= */
.spotlight-strip{
    position: relative;
    padding: 2.5rem 0 2.75rem;
    background:
        radial-gradient(1100px 380px at 8% -10%, rgba(201,162,39,.16), transparent 60%),
        radial-gradient(900px 320px at 95% 110%, rgba(22,164,122,.16), transparent 60%),
        linear-gradient(180deg, #07182f 0%, #0b2545 60%, #0e2a52 100%);
    color: #fff;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.spotlight-strip::before{
    content:"";
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
    pointer-events:none;
}
.spotlight-head{
    position: relative;
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:1.25rem; flex-wrap:wrap;
    margin-bottom: 1.5rem;
}
.spotlight-eyebrow{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.35rem .75rem;
    border-radius:999px;
    background: rgba(22,164,122,.18);
    border:1px solid rgba(22,164,122,.45);
    color:#7ef1c4;
    font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.spotlight-pulse{
    width:8px; height:8px; border-radius:50%;
    background:#22d39a;
    box-shadow:0 0 0 0 rgba(34,211,154,.7);
    animation: spotPulse 1.6s infinite;
}
@keyframes spotPulse{
    0%{ box-shadow:0 0 0 0 rgba(34,211,154,.6);}
    70%{ box-shadow:0 0 0 12px rgba(34,211,154,0);}
    100%{ box-shadow:0 0 0 0 rgba(34,211,154,0);}
}
.spotlight-title{
    margin:.5rem 0 .35rem;
    font-size: clamp(1.4rem, 2.4vw, 1.95rem);
    font-weight: 800;
    color:#fff;
    letter-spacing:-0.01em;
}
.spotlight-title::after{
    content:"";
    display:block;
    width:64px; height:3px;
    background: linear-gradient(90deg, var(--c-gold), #ffd86b);
    border-radius:999px;
    margin-top:.5rem;
}
.spotlight-sub{
    color: rgba(255,255,255,.72);
    max-width: 640px;
    font-size:.95rem;
}
.spotlight-stats{
    display:flex;
    flex-wrap:wrap;
    gap:.8rem;
    margin-top:1rem;
}
.spotlight-stat{
    min-width:140px;
    padding:.8rem .95rem;
    border-radius:18px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.spotlight-stat strong{
    display:block;
    color:#fff;
    font-size:1.08rem;
    font-weight:800;
    line-height:1;
}
.spotlight-stat span{
    display:block;
    margin-top:.35rem;
    color: rgba(255,255,255,.72);
    font-size:.76rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.spotlight-cta{
    white-space:nowrap;
    box-shadow: 0 12px 28px rgba(201,162,39,.35);
}

/* Marquee container — 3D stage. No edge mask (the 3D rotation curves the
   cards away on its own, which is a cleaner edge than a fade-to-dark). */
.spotlight-marquee{
    position: relative;
    --spot-gap: 1rem;
}
/* Outer row clips the marquee horizontally; it must stay flat (no preserve-3d
   here, because overflow:hidden flattens 3D children in every browser). */
.spotlight-row{
    overflow: hidden;
    padding: 1.6rem 0;
}
/* Inner stage owns the 3D scene — perspective + preserve-3d live here. */
.spotlight-stage{
    perspective: 1400px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
}
.spotlight-track{
    position: relative;
    display: flex;
    gap: var(--spot-gap);
    width: max-content;
    will-change: transform;
    transform-style: preserve-3d;
}
/* Pure CSS fallback (no JS) — keeps motion working without JavaScript */
.spotlight-row--ltr .spotlight-track{
    animation: spotScrollLeft 55s linear infinite;
}
.spotlight-row--rtl .spotlight-track{
    animation: spotScrollRight 65s linear infinite;
}
.spotlight-marquee:not(.js-marquee):hover .spotlight-track{
    animation-play-state: paused;
}
@keyframes spotScrollLeft{
    from { transform: translate3d(0,0,0); }
    to   { transform: translate3d(-50%,0,0); }
}
@keyframes spotScrollRight{
    from { transform: translate3d(-50%,0,0); }
    to   { transform: translate3d(0,0,0); }
}
/* JS engine has taken over — disable keyframes, JS sets transform directly. */
.spotlight-marquee.js-marquee .spotlight-track{
    animation: none !important;
}
/* Drag affordance */
.spotlight-marquee.js-marquee .spotlight-row{
    cursor: grab;
    touch-action: pan-y;
}
.spotlight-marquee.js-marquee .spotlight-row.is-dragging{
    cursor: grabbing;
}
.spotlight-marquee.js-marquee .spotlight-row.is-dragging .spotlight-track{
    transition: none;
}
/* Reduced motion fallback — horizontal scroll instead */
.spotlight-marquee.is-static{
    mask-image: none;
    -webkit-mask-image: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
.spotlight-marquee.is-static .spotlight-track{
    animation: none !important;
    transform: none !important;
}
.spotlight-marquee.is-static .spot-card{ scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce){
    .spotlight-row--ltr .spotlight-track,
    .spotlight-row--rtl .spotlight-track{ animation: none; }
}

/* Spotlight card — JS owns transform each frame for true 3D composition.
   Every property here is chosen to keep the card on its own GPU layer with
   zero per-frame paint cost: only `transform` (composited) changes. */
.spot-card{
    flex: 0 0 auto;
    width: 340px;
    display: block;
    padding: 1rem 1.05rem 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    color: var(--c-charcoal);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 14px 28px rgba(0,0,0,.18);
    transition: box-shadow .35s cubic-bezier(.2,.7,.2,1),
                border-color .35s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transform-origin: center center;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    backface-visibility: hidden;
    contain: layout paint;
    /* Promote to its own compositor layer immediately */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}
.spot-card::before{
    content:"";
    position:absolute; left:0; right:0; top:0; height:3px;
    background: linear-gradient(90deg, var(--c-emerald), #58d3ad);
    opacity:.9;
    z-index: 2;
}
.spot-card--featured::before{
    background: linear-gradient(90deg, var(--c-gold), #ffd86b);
}
/* Cursor-following glare overlay — no mix-blend-mode (very expensive). */
.spot-card::after{
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    pointer-events:none;
    background: radial-gradient(260px circle at var(--glare-x, 50%) var(--glare-y, 50%),
                rgba(255,255,255,.45), rgba(255,255,255,0) 55%);
    opacity: var(--glare-o, 0);
    transition: opacity .25s ease;
    z-index: 3;
}
.spot-card.is-lifted{
    box-shadow: 0 22px 44px rgba(0,0,0,.28);
    border-color: rgba(201,162,39,.55);
}
.spot-card.is-lifted.spot-card--featured{
    box-shadow: 0 24px 50px rgba(201,162,39,.32);
}
.spot-card-head{
    display:flex; align-items:flex-start; gap:.7rem;
}
.spot-logo{
    width:46px; height:46px;
    border-radius:12px;
    background: linear-gradient(135deg, #eef4fb 0%, #dbe6f3 100%);
    color: var(--c-navy);
    display:flex; align-items:center; justify-content:center;
    font-weight:800;
    overflow:hidden;
    flex:0 0 46px;
    border:1px solid rgba(11,37,69,.08);
}
.spot-logo img{ width:100%; height:100%; object-fit:cover; }
.spot-initial{ font-size:1.15rem; }
.spot-id{ flex:1; min-width:0; }
.spot-name{
    font-weight:800;
    color: var(--c-navy);
    font-size:.98rem;
    line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.spot-meta{
    margin-top:.15rem;
    color: var(--c-muted);
    font-size:.78rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.spot-meta i{ color: var(--c-emerald); }
.spot-meta .spot-dot{ margin: 0 .35rem; color:#c8c2b9; }
.spot-tag{
    flex:0 0 auto;
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.25rem .55rem;
    border-radius:999px;
    font-size:.7rem; font-weight:700;
    letter-spacing:.02em;
    white-space:nowrap;
}
.spot-tag--featured{
    background: linear-gradient(135deg, #fff3c4, #ffe59a);
    color:#7a5a00;
    border:1px solid #f1cf61;
}
.spot-tag--verified{
    background: rgba(22,164,122,.12);
    color: var(--c-emerald-2);
    border:1px solid rgba(22,164,122,.35);
}
.spot-tagline{
    margin:.7rem 0 .6rem;
    font-size:.85rem;
    color:#4b4640;
    line-height:1.35;
    min-height:36px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.spot-signal-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    margin-bottom:.65rem;
    color:#6c7788;
    font-size:.76rem;
    font-weight:700;
}
.spot-signal-row span{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
}
.spot-signal-row i{ color: var(--c-emerald); }
.spot-foot{
    display:flex; align-items:center; justify-content:space-between;
    gap:.5rem;
    padding-top:.55rem;
    border-top:1px dashed rgba(11,37,69,.08);
}
.spot-rating small{ color: var(--c-muted); font-size:.75rem; margin-left:.25rem;}
.spot-actions{ display:flex; gap:.4rem; }
.spot-btn{
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.32rem .6rem;
    border-radius:8px;
    font-size:.78rem;
    font-weight:700;
    line-height:1;
}
.spot-btn--view{
    background: var(--c-navy);
    color:#fff;
}
.spot-btn--wa{
    background:#25D366;
    color:#fff;
    cursor:pointer;
}
.spot-btn--wa:hover{ background:#1ebd5a; }

/* Entrance reveal — section header fades up, rows slide in with stagger */
.spotlight-strip .spotlight-head > div > *,
.spotlight-strip .spotlight-cta,
.spotlight-strip .spotlight-row{
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.spotlight-strip.is-revealed .spotlight-eyebrow{ transition-delay: .05s; }
.spotlight-strip.is-revealed .spotlight-title{ transition-delay: .15s; }
.spotlight-strip.is-revealed .spotlight-sub{ transition-delay: .25s; }
.spotlight-strip.is-revealed .spotlight-cta{ transition-delay: .35s; }
.spotlight-strip.is-revealed .spotlight-row--ltr{ transition-delay: .45s; }
.spotlight-strip.is-revealed .spotlight-row--rtl{ transition-delay: .6s; }
.spotlight-strip.is-revealed .spotlight-head > div > *,
.spotlight-strip.is-revealed .spotlight-cta,
.spotlight-strip.is-revealed .spotlight-row{
    opacity: 1;
    transform: translateY(0);
}

/* Animated background sweep — slow gold/emerald aurora */
.spotlight-strip::after{
    content:"";
    position:absolute; inset:-25% -15%;
    background:
        radial-gradient(440px 240px at 25% 35%, rgba(201,162,39,.22), transparent 60%),
        radial-gradient(440px 240px at 75% 65%, rgba(22,164,122,.22), transparent 60%);
    animation: spotAurora 22s ease-in-out infinite alternate;
    pointer-events:none;
    z-index: 0;
    will-change: transform, opacity;
}
.spotlight-strip > *{ position: relative; z-index: 1; }
@keyframes spotAurora{
    0%   { transform: translate3d(-6%, -2%, 0) rotate(0deg) scale(1);    opacity:.85; }
    50%  { transform: translate3d( 4%,  2%, 0) rotate(2deg) scale(1.05); opacity:1; }
    100% { transform: translate3d(-2%,  3%, 0) rotate(-1deg) scale(1.02); opacity:.9; }
}
@media (prefers-reduced-motion: reduce){
    .spotlight-strip::after{ animation: none; }
    .spotlight-strip .spotlight-head > div > *,
    .spotlight-strip .spotlight-cta,
    .spotlight-strip .spotlight-row{
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 575.98px){
    .hero-stats-grid{ grid-template-columns: 1fr; }
    .hero-quick-label{ width:100%; }
    .hero-quick-link{ width:100%; justify-content:center; }
    .biz-summary,
    .home-podium-summary{ min-height: 0; }
    .spot-card{ width: 280px; }
    .spotlight-marquee{ --spot-fade: 36px; --spot-gap: .75rem; }
    .spotlight-cta{ width:100%; }
    .spotlight-head{ align-items:flex-start; }
    .spotlight-stat{ min-width: calc(50% - .4rem); }
}