/* =====================================================================
   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);}

.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: .9rem 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: 5rem 0 5.5rem;
    overflow:hidden;
}
.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; }

/* -------------------- 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;}

/* -------------------- Business card -------------------- */
.biz-card{
    background: var(--c-card);
    border-radius: var(--radius);
    overflow:hidden;
    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;}

/* -------------------- 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);
}

/* -------------------- 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: 3rem 0 3.5rem;}
    .profile-cover{ height: 180px;}
}

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

/* -------------------- Logo brand mark -------------------- */
.brand-plate{
    display:inline-flex; align-items:center; justify-content:center;
    background:#fff;
    padding: 6px 14px;
    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: 6px 14px;}
.brand-logo{
    height: 38px; 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{
    background:#fff; color:#111;
    border-radius: 22px;
    padding: 1.5rem;
    box-shadow: 0 30px 80px rgba(0,0,0,.25);
    transform: rotateX(4deg) rotateY(-6deg);
    transform-style: preserve-3d;
}
.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);}

/* -------------------- 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;
    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;}
}

/* =====================================================================
   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:6rem;right:2rem;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);}

/* 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; }
}