:root {
    --platform-green: #1a7f37;
    --platform-green-bg: #e9f7ee;
}

body {
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    color: #1a1a1a;
}

a { text-decoration: none; }

.platform-header {
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 100;
}
.platform-logo {
    font-weight: 800;
    font-size: 1.3rem;
    color: #1a1a1a;
}
.platform-logo i { color: #1a73e8; margin-right: .3rem; }
.platform-logo span { color: #ff7a00; }
.platform-nav a {
    color: #444;
    font-size: .9rem;
    font-weight: 600;
    margin: 0 .9rem;
}
.platform-nav a:hover { color: #1a1a1a; }
.platform-link-btn { color: #1a1a1a; font-weight: 600; font-size: .9rem; }

.platform-btn-dark {
    background: #111;
    border-color: #111;
    color: #fff;
    font-weight: 600;
    padding: .55rem 1.2rem;
    border-radius: 8px;
}
.platform-btn-dark:hover { background: #333; border-color: #333; color: #fff; }
.platform-btn-outline {
    background: #fff;
    border: 1px solid #ddd;
    color: #1a1a1a;
    font-weight: 600;
    border-radius: 8px;
}
.platform-btn-outline:hover { border-color: #999; }

.platform-hero {
    padding: 5rem 0 4rem;
    text-align: center;
}
.platform-badge {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 30px;
    padding: .3rem 1rem;
    font-size: .8rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 1.5rem;
}
.platform-h1 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.15;
    max-width: 820px;
    margin: 0 auto 1.5rem;
}
.platform-badge-green {
    display: inline-block;
    background: var(--platform-green-bg);
    color: var(--platform-green);
    border-radius: 30px;
    padding: .4rem 1.1rem;
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.platform-lead {
    max-width: 640px;
    margin: 0 auto;
    color: #555;
    font-size: 1.05rem;
}

.platform-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8rem;
    font-weight: 700;
    color: #888;
    margin-bottom: .6rem;
}
.platform-h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: .8rem;
}

.platform-section { padding: 5rem 0; }
.platform-section-alt { background: #fafafa; }

.platform-step-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 2rem 1.5rem;
    height: 100%;
    position: relative;
}
.platform-step-time {
    display: inline-block;
    background: #f1f1f1;
    border-radius: 20px;
    padding: .2rem .8rem;
    font-size: .75rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 1rem;
}
.platform-step-num {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: #e5e5e5;
    line-height: 1;
    margin-bottom: .5rem;
}

.platform-feature-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 1.8rem 1.5rem;
    height: 100%;
}
.platform-feature-icon { font-size: 1.8rem; margin-bottom: .8rem; }

.platform-pricing-card {
    max-width: 460px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.06);
}
.platform-pricing-list li {
    padding: .5rem 0;
    font-weight: 600;
    color: #333;
}
.platform-pricing-list i { color: var(--platform-green); margin-right: .6rem; }

.platform-cta {
    padding: 5rem 0;
    text-align: center;
    background: #fafafa;
}

.platform-footer {
    background: #111;
    color: #ccc;
}
.platform-footer .platform-logo { color: #fff; }
/* The logo image is dark-on-transparent: a white badge keeps its own colours readable on the dark footer. */
.platform-footer .platform-logo img { background: #fff; padding: 6px 12px; border-radius: 10px; max-height: 50px !important; }
.platform-footer h6 { color: #fff; font-weight: 700; font-size: .9rem; margin-bottom: 1rem; }
.platform-footer a { color: #cfcfcf; }
.platform-footer a:hover { color: #fff; }
.platform-footer li { margin-bottom: .5rem; }
/* Bootstrap's muted grey is made for white pages; on this dark footer it is a lighter grey (still a step below links). */
.platform-footer .text-muted { color: #b3b3b3 !important; }
.platform-footer .platform-social a { color: #e5e5e5; opacity: .85; }
.platform-footer .platform-social a:hover { opacity: 1; }
.platform-footer hr { border-color: rgba(255, 255, 255, .15) !important; opacity: 1; }

.accordion-button:not(.collapsed) {
    background: #fff;
    color: #1a1a1a;
    box-shadow: none;
    font-weight: 700;
}
.accordion-button:focus { box-shadow: none; border-color: #eee; }

@media (max-width: 767px) {
    .platform-h1 { font-size: 2.1rem; }
    .platform-h2 { font-size: 1.5rem; }
    .platform-hero { padding: 3rem 0 2.5rem; }
    .platform-section { padding: 3rem 0; }
}

/* Contact page */
.platform-contact-card {
    background: #111;
    color: #fff;
    border-radius: 16px;
    padding: 2.5rem;
}
.platform-contact-card h4 { font-weight: 800; margin-bottom: .5rem; }
.platform-contact-row {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-top: 1.5rem;
}
.platform-contact-row i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.platform-contact-label {
    display: block;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .06em;
    color: #999;
    margin-bottom: .2rem;
}

/* Blog */
.platform-blog-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}
.platform-blog-card h4 { font-weight: 800; margin-bottom: .3rem; }
.platform-blog-card h4 a { color: #1a1a1a; }
.platform-blog-card h4 a:hover { color: var(--platform-green); }
.platform-blog-meta { color: #999; font-size: .85rem; margin-bottom: .6rem; }
.platform-blog-body p {
    color: #333;
    line-height: 1.8;
    margin-bottom: 1.25rem;
}
.platform-blog-body { margin-top: 1.5rem; }

.page-link { color: #1a1a1a; }
.page-item.active .page-link { background: #111; border-color: #111; }
.page-link:hover { color: #111; }
.page-link:focus { box-shadow: none; }

/* Cookie notice (only when the Super Admin turns it on) */
.platform-cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 460px; z-index: 1050; background: #fff; color: #1f2937; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px 16px; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); }
.platform-cookie[hidden] { display: none; }
.platform-social a { color: inherit; opacity: .75; }
.platform-social a:hover { opacity: 1; }

/* Setup tutorials (home page video and /setup-tutorials) */
.platform-video { border-radius: 14px; overflow: hidden; background: #111; box-shadow: 0 12px 40px rgba(0, 0, 0, .12); }
.platform-video iframe { border: 0; }
.platform-tutorial-card { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 1rem; margin-bottom: 2rem; }
.platform-tutorial-body { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem .4rem .3rem; }
.platform-tutorial-num { flex-shrink: 0; font-size: 1.6rem; font-weight: 800; line-height: 1; color: #d9d9d9; }

/* ===================== SEO & AI SEO additions: Bangla, pages, templates, blog ===================== */
html[lang="bn"] body { font-family: 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif; }
html[lang="bn"] .platform-h1, html[lang="bn"] .platform-h2 { letter-spacing: 0; line-height: 1.35; }

.platform-lang { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 36px; padding: 0 10px; border: 1px solid #d0d7e2; border-radius: 50px; font-weight: 600; font-size: .9rem; color: #1f2937; text-decoration: none; }
.platform-lang:hover { background: #f3f6fb; color: #111827; }
.platform-nav-mobile { display: flex; gap: 4px; overflow-x: auto; padding: 0 12px 10px; scrollbar-width: none; }
.platform-nav-mobile::-webkit-scrollbar { display: none; }
.platform-nav-mobile a { flex-shrink: 0; padding: 6px 12px; border-radius: 50px; background: #f3f6fb; color: #374151; font-size: .88rem; text-decoration: none; }

.platform-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 50px; border: 1px solid #e2e8f0; background: #fff; color: #374151; font-size: .9rem; text-decoration: none; transition: border-color .15s, background .15s; }
.platform-chip:hover { border-color: #94a3b8; color: #111827; }
.platform-chip b { font-size: .75rem; font-weight: 600; color: #64748b; background: #f1f5f9; border-radius: 50px; padding: 0 7px; }
.platform-chip.is-active { background: #111827; color: #fff; border-color: #111827; }
.platform-chip.is-active b { background: rgba(255,255,255,.18); color: #fff; }

/* content pages */
.platform-page-hero { padding: 3rem 0 1.5rem; background: linear-gradient(180deg, #f5f8fc 0%, #fff 100%); }
.platform-page-icon { width: 56px; height: 56px; border-radius: 16px; background: #111827; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1rem; }
.platform-prose { font-size: 1.05rem; line-height: 1.8; color: #1f2937; }
.platform-prose h2 { font-size: 1.55rem; font-weight: 700; margin: 2rem 0 .8rem; scroll-margin-top: 80px; }
.platform-prose h3 { font-size: 1.2rem; font-weight: 700; margin: 1.5rem 0 .6rem; scroll-margin-top: 80px; }
.platform-prose ul, .platform-prose ol { padding-left: 1.3rem; margin-bottom: 1rem; }
.platform-prose li { margin-bottom: .35rem; }
.platform-prose blockquote { border-left: 4px solid #2563eb; background: #f5f8fc; padding: .8rem 1rem; border-radius: 0 10px 10px 0; color: #374151; }
.platform-prose figure { margin: 1.5rem 0; }
.platform-prose img { border-radius: 12px; }
.platform-prose a { text-decoration: underline; text-underline-offset: 3px; }
.platform-prose code { background: #f1f5f9; padding: 1px 6px; border-radius: 6px; font-size: .9em; }
.platform-quote { position: relative; background: #f5f8fc; border-radius: 16px; padding: 1.5rem 1.5rem 1.2rem 3.2rem; margin-bottom: 2rem; font-size: 1.1rem; }
.platform-quote > i { position: absolute; left: 1.1rem; top: 1.3rem; color: #93c5fd; font-size: 1.4rem; }
.platform-stat { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 1rem; text-align: center; height: 100%; }
.platform-stat b { display: block; font-size: 1.8rem; line-height: 1.1; }
.platform-stat span { font-size: .85rem; color: #6b7280; }
.platform-steps-list { counter-reset: st; list-style: none; padding: 0; }
.platform-steps-list li { counter-increment: st; position: relative; padding: .2rem 0 1rem 3rem; }
.platform-steps-list li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: #111827; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.platform-steps-list li span { display: block; color: #6b7280; }
.platform-compare { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 24px -16px rgba(0,0,0,.3); }
.platform-compare th, .platform-compare td { padding: .8rem 1rem; vertical-align: middle; }
.platform-compare td:not(:first-child), .platform-compare th:not(:first-child) { text-align: center; }
.platform-compare .is-ours { background: #f0fdf4; }
.platform-compare thead .is-ours { background: #111827; color: #fff; }
.platform-mini-card { display: block; height: 100%; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 12px; color: #111827; text-decoration: none; background: #fff; }
.platform-mini-card:hover { border-color: #94a3b8; color: #111827; }
.platform-mini-card span { display: block; font-size: .85rem; color: #6b7280; margin-top: .3rem; }

/* template showcase */
.platform-template-card { border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; background: #fff; height: 100%; transition: box-shadow .15s, transform .15s; }
.platform-template-card:hover { box-shadow: 0 18px 40px -22px rgba(0,0,0,.35); transform: translateY(-2px); }
.platform-template-preview { display: block; position: relative; height: 220px; overflow: hidden; background: #f3f4f6; border-bottom: 1px solid #f1f3f5; }
.platform-template-preview iframe { width: 1280px; height: 960px; border: 0; transform: scale(.28); transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
.platform-template-preview.is-loaded iframe { opacity: 1; }
.platform-template-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9ca3af; }
.platform-template-preview.is-loaded .platform-template-loading { display: none; }
.platform-swatches i { display: inline-block; width: 13px; height: 13px; border-radius: 50%; margin-left: 2px; border: 1px solid rgba(0,0,0,.1); }

/* blog */
.platform-tldr { background: #f5f8fc; border-left: 4px solid #111827; border-radius: 0 12px 12px 0; padding: .9rem 1.1rem; font-size: 1.05rem; }
.platform-toc { border: 1px solid #e5e7eb; border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1.8rem; background: #fff; }
.platform-toc ol { margin: .5rem 0 0; padding-left: 1.2rem; }
.platform-toc li { margin-bottom: .25rem; }
.platform-toc li.is-sub { margin-left: 1rem; list-style: circle; font-size: .95em; }
.platform-author-box { display: flex; gap: 1rem; align-items: flex-start; border: 1px solid #e5e7eb; border-radius: 14px; padding: 1rem; background: #fff; }
.platform-author-box img { border-radius: 50%; object-fit: cover; flex-shrink: 0; }

@media (max-width: 575.98px) {
    .platform-lang { min-width: 44px; height: 32px; font-size: .82rem; }
    .platform-template-preview { height: 200px; }
    .platform-quote { padding-left: 2.6rem; }
}

/* page numbers wrap on small screens */
.platform-section .pagination { flex-wrap: wrap; justify-content: center; row-gap: 4px; }