/* ============================================================
   Building Management System (BMS) — Public site theme
   "Civic Slate" : slate-blue + teal instrument-panel aesthetic.
   Distinct from warm-luxury / brass-cream PPs.
   ============================================================ */

:root {
    /* Brand (overridden inline from SiteSettings; these are fallbacks) */
    --primary: #0F3D5C;          /* slate-blue */
    --accent: #2E9E8F;           /* teal */
    --dark: #0B1F2A;             /* deep slate (sidebars/topbars) */

    /* Civic Slate palette */
    --amber: #E0A93B;            /* warning / due / expiring */
    --app-bg: #F4F6F8;           /* warm-cool off-white */
    --card: #FFFFFF;
    --ink: #16242E;              /* primary text */
    --muted: #5B6B78;            /* secondary text */
    --hairline: #E3E8EC;         /* 1px borders */

    --ok: #2E9E8F;               /* paid */
    --warn: #E0A93B;             /* due / expiring */
    --bad: #D2493B;              /* overdue / expired */

    --primary-tint: rgba(15,61,92,.07);
    --accent-tint: rgba(46,158,143,.10);

    --radius: 8px;
    --radius-sm: 6px;
    --shadow: 0 6px 22px rgba(15,33,46,.07);
    --shadow-lg: 0 18px 48px rgba(15,33,46,.13);
    --ring: 0 0 0 .2rem rgba(46,158,143,.25);

    --container: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--app-bg);
    color: var(--ink);
    font-family: 'Inter', system-ui, "Segoe UI", Roboto, "Noto Sans Bengali", "Hind Siliguri", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    overflow-x: clip;
}

:lang(bn), :lang(bn) h1, :lang(bn) h2, :lang(bn) h3, :lang(bn) h4, :lang(bn) h5, :lang(bn) .display-head {
    font-family: 'Hind Siliguri', 'Inter', system-ui, sans-serif;
}

h1, h2, h3, h4, h5, .display-head, .navbar-brand {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.18;
    letter-spacing: -.01em;
}

a { color: var(--accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--primary); }

img, svg, video, iframe { max-width: 100%; }
img { height: auto; }

.container { max-width: var(--container); }

/* ---- Blueprint-grid motif (used on hero + dividers) ---- */
.blueprint-grid {
    background-image:
        linear-gradient(rgba(15,61,92,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,61,92,.045) 1px, transparent 1px);
    background-size: 34px 34px;
}

/* ---- Teal "draw rule" underline ---- */
.draw-rule {
    display: inline-block;
    height: 3px;
    width: 0;
    background: var(--accent);
    border-radius: 3px;
    transition: width .8s cubic-bezier(.22,.61,.36,1) .15s;
}
.draw-rule.in, .in .draw-rule { width: 64px; }
.eyebrow {
    display: inline-block;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .5rem;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn { border-radius: var(--radius-sm); font-weight: 600; padding: .6rem 1.25rem; transition: all .18s ease; }
.btn-cta {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    box-shadow: 0 6px 16px rgba(46,158,143,.28);
}
.btn-cta:hover, .btn-cta:focus { background: #268a7d; border-color: #268a7d; color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(46,158,143,.34); }
.btn-slate {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
}
.btn-slate:hover, .btn-slate:focus { background: #0c324c; border-color: #0c324c; color: #fff; transform: translateY(-1px); }
.btn-ghost {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--hairline);
}
.btn-ghost:hover, .btn-ghost:focus { border-color: var(--primary); background: var(--primary-tint); color: var(--primary); }
.btn-outline-light-cta { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.btn-outline-light-cta:hover, .btn-outline-light-cta:focus { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.btn:focus-visible { box-shadow: var(--ring); }

/* ============================================================
   Header / nav
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--hairline);
    transition: box-shadow .2s ease, background .2s ease;
}
.site-header.scrolled { box-shadow: var(--shadow); background: rgba(255,255,255,.97); }

.site-header .navbar { padding-top: .55rem; padding-bottom: .55rem; }

.navbar-brand { display: flex; align-items: center; gap: .6rem; min-width: 0; font-size: 1.15rem; color: var(--primary) !important; }
.navbar-brand .brand-mark {
    width: 40px; height: 40px; flex: none;
    border-radius: 9px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff; font-size: 1.3rem;
}
.navbar-brand .brand-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.navbar-brand .brand-logo { height: 38px; width: auto; }

.site-header .nav-link {
    color: var(--ink);
    font-weight: 500;
    padding: .4rem .85rem !important;
    border-radius: var(--radius-sm);
}
.site-header .nav-link:hover, .site-header .nav-link:focus { color: var(--primary); background: var(--primary-tint); }

.lang-toggle {
    display: inline-flex; align-items: center;
    font-weight: 600; color: var(--primary);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: .35rem .8rem;
}
.lang-toggle:hover { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }

.navbar-toggler { border-color: var(--hairline); }
.navbar-toggler:focus { box-shadow: var(--ring); }

/* ---- Notice bar ---- */
.notice-bar {
    background: var(--primary);
    color: #fff;
    font-size: .92rem;
    text-align: center;
    padding: .5rem 1rem;
}
.notice-bar a { color: #cfeee8; font-weight: 600; text-decoration: underline; }
.notice-bar i { color: var(--amber); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
    position: relative;
    background:
        radial-gradient(1100px 480px at 78% -10%, rgba(46,158,143,.16), transparent 60%),
        linear-gradient(160deg, #0c324c 0%, var(--primary) 48%, #103f5d 100%);
    color: #eaf2f6;
    overflow: hidden;
    padding: 5.5rem 0 6rem;
}
.hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: radial-gradient(900px 520px at 30% 30%, #000 35%, transparent 78%);
    mask-image: radial-gradient(900px 520px at 30% 30%, #000 35%, transparent 78%);
    pointer-events: none;
}
.hero .hero-content { position: relative; z-index: 2; }
.hero h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.4rem); margin-bottom: 1rem; }
.hero .hero-sub { color: #c3d6e0; font-size: 1.18rem; max-width: 40rem; margin-bottom: 1.8rem; }
.hero .eyebrow { color: var(--accent); }
.hero .draw-rule { background: var(--accent); }

.hero-badges { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2.2rem; }
.hero-badge { display: inline-flex; align-items: center; gap: .5rem; color: #aecdd9; font-size: .92rem; }
.hero-badge i { color: var(--accent); font-size: 1.05rem; }

.hero-panel {
    position: relative; z-index: 2;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    backdrop-filter: blur(4px);
    padding: 1.4rem;
    box-shadow: var(--shadow-lg);
}
.hero-panel .hp-title { color: #cfe0e8; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .4rem; }
.hero-panel .hp-row {
    display: flex; align-items: center; gap: .9rem;
    padding: .8rem .4rem;
    border-bottom: 1px dashed rgba(255,255,255,.14);
}
.hero-panel .hp-row:last-child { border-bottom: 0; }
.hero-panel .hp-ico { width: 42px; height: 42px; flex: none; border-radius: 9px; display: grid; place-items: center; background: rgba(46,158,143,.2); color: #8fe3d6; font-size: 1.2rem; }
.hero-panel .hp-meta { color: #cfe0e8; font-size: .85rem; }
.hero-panel .hp-val { color: #fff; font-weight: 700; font-family: 'Sora', sans-serif; }
.hero-panel .pill { font-size: .72rem; padding: .15rem .55rem; border-radius: 999px; font-weight: 600; }
.pill-ok { background: rgba(46,158,143,.22); color: #8fe3d6; }
.pill-warn { background: rgba(224,169,59,.22); color: #f0cf8c; }
.pill-bad { background: rgba(210,73,59,.22); color: #f0a89f; }

/* ============================================================
   Sections / section heads
   ============================================================ */
.section { padding: 4.5rem 0; }
.section-tight { padding: 3rem 0; }
.section-alt { background: #fff; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }

.section-head { max-width: 46rem; margin-bottom: 2.6rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: .35rem 0 .6rem; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin-bottom: 0; }

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hairline) 18%, var(--hairline) 82%, transparent);
}

/* ============================================================
   Cards (NO height:100% on base class)
   ============================================================ */
.card-slate {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.6rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-slate:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #cfd9df; }

.card-ico {
    width: 52px; height: 52px;
    border-radius: 11px;
    display: grid; place-items: center;
    font-size: 1.5rem;
    background: var(--accent-tint);
    color: var(--accent);
    margin-bottom: 1rem;
}
.card-ico.slate { background: var(--primary-tint); color: var(--primary); }
.card-ico.amber { background: rgba(224,169,59,.14); color: var(--amber); }

/* ---- Role cards ---- */
.role-card { border-top: 3px solid var(--accent); }
.role-card.owner { border-top-color: var(--primary); }
.role-card.operator { border-top-color: var(--accent); }
.role-card.tenant { border-top-color: var(--amber); }
.role-card h3 { font-size: 1.25rem; margin-bottom: .3rem; }
.role-card .role-tag { font-size: .8rem; color: var(--muted); }
.role-bullets { list-style: none; padding: 0; margin: 1.1rem 0 0; }
.role-bullets li { display: flex; gap: .6rem; align-items: flex-start; padding: .35rem 0; color: var(--ink); }
.role-bullets li i { color: var(--accent); margin-top: .2rem; flex: none; }

/* ---- Module cards ---- */
.module-card {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.module-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }
.module-card .m-ico { font-size: 1.5rem; color: var(--accent); margin-bottom: .6rem; }
.module-card h4 { font-size: 1.02rem; margin-bottom: .25rem; color: var(--primary); }
.module-card p { font-size: .88rem; color: var(--muted); margin: 0; }

/* ============================================================
   Stat band
   ============================================================ */
.stat-band {
    background: var(--dark);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.stat-band::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: 40px 40px;
    pointer-events: none;
}
.stat-item { position: relative; z-index: 1; text-align: center; padding: 1rem; }
.stat-item .stat-num {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    color: #fff;
    line-height: 1;
}
.stat-item .stat-num .unit { color: var(--accent); font-size: .65em; }
.stat-item .stat-label { color: #9fb6c2; font-size: .92rem; margin-top: .5rem; }
.stat-item .stat-ico { color: var(--accent); font-size: 1.4rem; margin-bottom: .5rem; }

/* ============================================================
   How it works
   ============================================================ */
.how-step { position: relative; padding-left: 4.2rem; }
.how-step .step-num {
    position: absolute; left: 0; top: 0;
    width: 52px; height: 52px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--primary-tint);
    color: var(--primary);
    font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.4rem;
}
.how-step h4 { font-size: 1.12rem; margin-bottom: .35rem; }
.how-step p { color: var(--muted); margin: 0; }

/* ============================================================
   Testimonials
   ============================================================ */
.testi-card {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 1.7rem;
    box-shadow: var(--shadow);
}
.testi-card .quote-mark { color: var(--accent); font-size: 2rem; line-height: 1; opacity: .5; }
.testi-card .testi-text { color: var(--ink); font-size: 1.02rem; margin: .5rem 0 1.2rem; }
.testi-author { display: flex; align-items: center; gap: .8rem; }
.testi-author img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.testi-author .ta-name { font-weight: 700; color: var(--primary); font-size: .95rem; }
.testi-author .ta-role { color: var(--muted); font-size: .82rem; }

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq-accordion .accordion-item { border: 1px solid var(--hairline); border-radius: var(--radius) !important; margin-bottom: .75rem; overflow: hidden; background: var(--card); }
.faq-accordion .accordion-button { font-family: 'Sora', sans-serif; font-weight: 600; color: var(--primary); background: var(--card); }
.faq-accordion .accordion-button:not(.collapsed) { color: var(--primary); background: var(--primary-tint); box-shadow: none; }
.faq-accordion .accordion-button:focus { box-shadow: var(--ring); }
.faq-accordion .accordion-body { color: var(--muted); }

/* ============================================================
   Contact section
   ============================================================ */
.contact-card {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
}
.contact-info-item { display: flex; gap: .9rem; align-items: flex-start; padding: .7rem 0; }
.contact-info-item .cii-ico { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); font-size: 1.15rem; }
.contact-info-item .ci-label { color: var(--muted); font-size: .8rem; }
.contact-info-item .ci-val { color: var(--ink); font-weight: 600; }
.form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--hairline); padding: .6rem .85rem; }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: var(--ring); }
.form-label { font-weight: 600; color: var(--primary); font-size: .9rem; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--dark); color: #c3d2da; position: relative; padding-top: 3.5rem; }
.footer-accent { height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent), var(--amber)); position: absolute; top: 0; left: 0; right: 0; }
.site-footer h5 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.footer-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.footer-brand .brand-mark { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-size: 1.25rem; }
.footer-brand .footer-brand-name { color: #fff; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.1rem; }
.footer-about { color: #95aab5; font-size: .92rem; }
.footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .55rem; }
.footer-links a { color: #c3d2da; font-size: .92rem; }
.footer-links a:hover { color: var(--accent); }
.footer-contact li { display: flex; gap: .6rem; align-items: flex-start; color: #95aab5; font-size: .9rem; margin-bottom: .55rem; }
.footer-contact i { color: var(--accent); margin-top: .2rem; }
.footer-contact a { color: #c3d2da; }
.for-list { list-style: none; padding: 0; margin: 0; }
.for-list li { display: flex; gap: .5rem; align-items: center; color: #95aab5; font-size: .9rem; margin-bottom: .5rem; }
.for-list i { color: var(--accent); }

.footer-bottom {
    margin-top: 2.6rem;
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 1.2rem 0;
    display: flex; flex-wrap: wrap; gap: .6rem 1.2rem;
    align-items: center; justify-content: space-between;
    font-size: .88rem; color: #8499a4;
}
.footer-bottom .developed-by a { color: var(--accent); font-weight: 600; }
.footer-bottom .developed-by a:hover { color: #fff; }

/* ---- Back to top ---- */
.back-to-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 1040;
    width: 46px; height: 46px; border-radius: 12px;
    border: none; background: var(--primary); color: #fff;
    display: grid; place-items: center; font-size: 1.2rem;
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all .25s ease;
    cursor: pointer;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--accent); }

/* ============================================================
   Static / privacy page
   ============================================================ */
.page-hero {
    position: relative;
    background:
        radial-gradient(800px 300px at 80% -20%, rgba(46,158,143,.12), transparent 60%),
        linear-gradient(160deg, #0c324c, var(--primary));
    color: #fff;
    padding: 3.5rem 0;
}
.page-hero h1 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.6rem); }
.page-hero p { color: #c3d6e0; margin-bottom: 0; }
.prose { color: var(--ink); }
.prose h2, .prose h3 { margin-top: 1.8rem; color: var(--primary); }
.prose p { color: var(--muted); }

/* ============================================================
   Responsive — 4 breakpoints
   ============================================================ */
@media (max-width: 991px) {
    .section { padding: 3.5rem 0; }
    .hero { padding: 4rem 0 4.5rem; }
    .hero-panel { margin-top: 2.2rem; }
    .site-header .navbar-nav { padding-top: .6rem; }
    .lang-toggle { display: inline-flex; margin: .3rem 0; }
}

@media (max-width: 767px) {
    body { font-size: 15.5px; }
    .section { padding: 3rem 0; }
    .section-head { margin-bottom: 2rem; }
    .hero { padding: 3.25rem 0 3.75rem; }
    .hero .hero-sub { font-size: 1.05rem; }
    .hero-badges { gap: .8rem; }
    .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
    .how-step { padding-left: 3.6rem; }
}

@media (max-width: 480px) {
    .card-slate, .contact-card { padding: 1.2rem; }
    .navbar-brand { font-size: 1.02rem; }
    .navbar-brand .brand-mark { width: 36px; height: 36px; font-size: 1.15rem; }
    .hero-cta-row .btn { width: 100%; }
    .back-to-top { right: 14px; bottom: 14px; }
}

/* ============================================================
   Mobile safety-net (mandatory)
   ============================================================ */
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
.container { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6, p, a, span, li { overflow-wrap: break-word; }
.page-hero h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
body { overflow-x: clip; }