:root {
    --primary: #053982;
    --primary-light: #0D5CE1;
    --primary-pale: #EAF2FC;
    --accent: #F59E0B;          /* CTA / attention only */
    --accent2: #10B981;
    --accent3: #549EE8;
    --bg: #FAFBFD;
    --bg2: #EAF2FC;
    --card-bg: #FFFFFF;
    --text: #0F2547;
    --text-muted: #5A6B85;
    --border: #D6E4F5;
    --border2: #B8D2EF;
    --shadow: 0 4px 24px rgba(5,57,130,0.10);
    --shadow-hover: 0 10px 36px rgba(5,57,130,0.18);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Hind Siliguri', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
}

h1,h2,h3,h4,h5 { font-family: 'Baloo Da 2', cursive; }

/* ── NAVBAR ── */
.navbar-custom {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
    position: sticky; top:0; z-index:1000;
    box-shadow: 0 2px 16px rgba(5,57,130,0.07);
}
.navbar-brand-text { font-family:'Baloo Da 2',cursive; font-size:1.5rem; font-weight:800; }
.brand-is   { color: #053982; }
.brand-cool { color: #549EE8; }
.brand-bell { color: #0D5CE1; }

.nav-link-custom {
    color: var(--text-muted) !important;
    font-size:0.9rem; padding:6px 14px !important;
    border-radius:8px; transition:all 0.2s;
    font-weight:500;
}
.nav-link-custom:hover { color: var(--primary) !important; background:var(--primary-pale); }

.btn-primary-custom {
    background: linear-gradient(135deg,#053982,#0D5CE1);
    border:none; border-radius:12px; padding:12px 28px;
    font-family:'Baloo Da 2',cursive; font-size:1rem; font-weight:700;
    color:white; text-decoration:none; display:inline-flex;
    align-items:center; gap:8px; transition:all 0.3s;
    box-shadow: 0 6px 20px rgba(5,57,130,0.30);
}
.btn-primary-custom:hover {
    transform:translateY(-2px); color:white;
    box-shadow: 0 10px 32px rgba(5,57,130,0.40);
}
.btn-success-custom {
    background: linear-gradient(135deg, #46a854, #84edc0);
    border:none; border-radius:12px; padding:12px 28px;
    font-family:'Baloo Da 2',cursive; font-size:1rem; font-weight:700;
    color:white; text-decoration:none; display:inline-flex;
    align-items:center; gap:8px; transition:all 0.3s;
    box-shadow: 0 6px 20px rgba(48, 168, 83, 0.3);
}
.btn-success-custom:hover {
    transform:translateY(-2px); color:white;
    box-shadow: 0 10px 32px rgba(5,57,130,0.40);
}
.btn-outline-custom {
    background:transparent;
    border:2px solid var(--primary-light);
    border-radius:12px; padding:11px 26px;
    font-family:'Baloo Da 2',cursive; font-size:1rem; font-weight:700;
    color:var(--primary); text-decoration:none; display:inline-flex;
    align-items:center; gap:8px; transition:all 0.3s;
}
.btn-outline-custom:hover {
    background:var(--primary-pale); color:var(--primary);
}

/* amber CTA — attention-grabber, শুধু ডেমো/কল অ্যাকশনে ব্যবহার্য (নেভি টেক্সট = AA contrast) */
.btn-accent {
    background: linear-gradient(135deg,#F59E0B,#FBBF24);
    color:#0F2547;
    box-shadow: 0 6px 20px rgba(245,158,11,0.35);
}
.btn-accent:hover {
    color:#0F2547;
    box-shadow: 0 10px 32px rgba(245,158,11,0.48);
}

/* ── HERO ── */
.hero {
    position:relative; min-height: auto;
    display:flex; align-items:center; overflow:hidden;
    background: linear-gradient(155deg, #EFF5FC 0%, #FEFEFE 50%, #EAF2FC 100%);
}
.hero-decor {
    position:absolute; border-radius:50%;
    filter:blur(70px); opacity:0.18; animation:floatAnim 7s ease-in-out infinite;
}
.hd1 { width:500px;height:500px;background:#053982;top:-150px;right:-100px; }
.hd2 { width:350px;height:350px;background:#549EE8;bottom:0;left:-100px;animation-delay:3s; }
.hd3 { width:250px;height:250px;background:#10B981;top:40%;right:20%;animation-delay:5s; }
@keyframes floatAnim {
    0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)}
}

.brand-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--primary-pale); border:1.5px solid var(--border2);
    border-radius:50px; padding:6px 18px; font-size:0.85rem; color:var(--primary);
    margin-bottom:1.5rem; font-weight:600;
}
.pulse-dot {
    display:inline-block; width:8px;height:8px; border-radius:50%;
    background:#10B981; animation:pulse 2s infinite;
}
@keyframes pulse {
    0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.4)}
    50%{box-shadow:0 0 0 6px rgba(16,185,129,0)}
}

.hero-title {
    font-size:clamp(2.4rem,5.5vw,4.2rem);
    font-weight:800; line-height:1.1; margin-bottom:1rem; color:var(--text);
}
.gradient-text {
    background:linear-gradient(135deg,#053982,#0D5CE1,#549EE8);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub {
    font-size:clamp(1rem,2.5vw,1.2rem); color:var(--text-muted);
    max-width:520px; line-height:1.75; margin-bottom:2rem;
}
.hero-stats { display:flex; gap:2rem; margin-top:2.5rem; flex-wrap:wrap; }
.stat-item { text-align:center; }
.stat-num {
    font-family:'Baloo Da 2',cursive; font-size:1.9rem; font-weight:800;
    background:linear-gradient(135deg,#053982,#0D5CE1);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-label { font-size:0.78rem; color:var(--text-muted); margin-top:-2px; }

/* hero card */
.hero-card {
    background:#fff; border:1.5px solid var(--border);
    border-radius:24px; padding:24px;
    box-shadow:var(--shadow);
}
.mock-screen {
    background:#EAF2FC; border-radius:12px; padding:14px;
    border:1px solid var(--border); font-size:0.72rem; font-family:monospace;
}
.mock-row {
    display:flex; gap:6px; align-items:center;
    padding:5px 6px; border-radius:6px; margin-bottom:3px;
}
.mock-row:nth-child(odd){background:rgba(5,57,130,0.06);}
.mock-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* ── SECTION ── */
.section { padding:80px 0; }
.section-alt { background:var(--bg2); }
.section-title {
    font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800;
    text-align:center; margin-bottom:0.5rem; color:var(--text);
}
.section-sub { text-align:center; color:var(--text-muted); font-size:1rem; margin-bottom:3rem; }
.section-title::after {
    content:'';
    display:block;
    width:56px; height:4px;
    border-radius:2px;
    background:linear-gradient(90deg,#053982,#0D5CE1,#549EE8);
    margin:10px auto 0;
}

/* ── TABS ── */
.feature-tabs-nav {
    display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:2.5rem;
}
.tab-btn {
    background:#fff; border:1.5px solid var(--border2);
    border-radius:50px; padding:9px 22px;
    color:var(--text-muted); font-family:'Baloo Da 2',cursive;
    font-size:0.9rem; cursor:pointer; transition:all 0.3s; white-space:nowrap;
    font-weight:600;
}
.tab-btn:hover { border-color:var(--primary-light); color:var(--primary); background:var(--primary-pale); }
.tab-btn.active {
    background:linear-gradient(135deg,#053982,#0D5CE1);
    border-color:transparent; color:white;
    box-shadow:0 4px 16px rgba(5,57,130,0.35);
}
.feature-panel { display:block; animation:fadeUp 0.4s ease; }
.feature-panel:not(:last-child) { margin-bottom:34px; }
@keyframes fadeUp {
    from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)}
}

/* ── FEATURE CARDS ── */
.feat-card {
    background:var(--card-bg); border:1.5px solid var(--border);
    border-radius:20px; padding:24px; height:100%; transition:all 0.3s;
    position:relative; overflow:hidden;
    box-shadow: 0 2px 12px rgba(5,57,130,0.06);
}
.feat-card:hover {
    transform:translateY(-5px); border-color:var(--border2);
    box-shadow:var(--shadow-hover);
}
.feat-card::before {
    content:''; position:absolute; top:0;left:0;right:0; height:3px;
    background:linear-gradient(90deg,transparent,var(--card-accent,#053982),transparent);
    opacity:0; transition:opacity 0.3s;
}
.feat-card:hover::before{opacity:1;}
.feat-icon {
    width:52px;height:52px; border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    font-size:1.35rem; margin-bottom:1rem;
}
.feat-card h5 { font-size:1.05rem; font-weight:700; margin-bottom:6px; color:var(--text); }
.feat-card p  { font-size:0.875rem; color:var(--text-muted); line-height:1.65; }
.feat-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.feat-tag {
    background:var(--primary-pale); border:1px solid var(--border2);
    border-radius:20px; padding:2px 10px; font-size:0.73rem; color:var(--primary); font-weight:500;
}

/* feat-card accent color by icon type */
.feat-card:has(.icon-purple) { --card-accent:#053982; }
.feat-card:has(.icon-amber)  { --card-accent:#D97706; }
.feat-card:has(.icon-green)  { --card-accent:#059669; }
.feat-card:has(.icon-blue)   { --card-accent:#2563EB; }
.feat-card:has(.icon-red)    { --card-accent:#DC2626; }
.feat-card:has(.icon-pink)   { --card-accent:#DB2777; }

/* preview btn */
.feat-card .btn-preview + .btn-preview { margin-top: 6px; }
.btn-preview {
    margin-top:14px; background:transparent;
    border:1.5px solid var(--border2); border-radius:8px;
    padding:5px 14px; font-size:0.78rem; color:var(--primary);
    cursor:pointer; display:inline-flex; align-items:center; gap:5px;
    font-family:'Baloo Da 2',cursive; font-weight:600; transition:all 0.2s;
}
.btn-preview:hover { background:var(--primary-pale); border-color:var(--primary-light); }

/* ── SCHOOLS (client logos) ── */
.school-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }

/* marquee */
.marquee-outer {
    overflow:hidden; position:relative; padding:8px 0;
}
.marquee-outer::before,
.marquee-outer::after {
    content:''; position:absolute; top:0; bottom:0;
    width:80px; z-index:2; pointer-events:none;
}
.marquee-outer::before { left:0; background:linear-gradient(to right,var(--bg2),transparent); }
.marquee-outer::after  { right:0; background:linear-gradient(to left,var(--bg2),transparent); }

.school-grid.marquee-track {
    display:flex !important;
    flex-wrap:nowrap !important;
    width:max-content;
    animation:marqueeScroll 55s linear infinite;
}
.school-grid.marquee-track:hover { animation-play-state:paused; }
.school-grid.marquee-track .school-item { flex-shrink:0; }

@keyframes marqueeScroll {
    0%   { transform:translateX(0); }
    100% { transform:translateX(-50%); }
}

.school-cta-item {
    display:inline-flex; flex-direction:column; align-items:center; gap:10px;
    text-align:center; background:#fff; border:2px dashed var(--border2);
    border-radius:16px; padding:18px 20px; width:180px; text-decoration:none;
    color:var(--text); transition:all 0.3s; margin:0 auto;
    box-shadow:0 2px 10px rgba(5,57,130,0.05);
}
.school-cta-item:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--primary-light); color:var(--primary); }
.school-item {
    background:#fff; border:1.5px solid var(--border);
    border-radius:16px; padding:18px 20px; width:180px;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    text-align:center; transition:all 0.3s;
    box-shadow:0 2px 10px rgba(5,57,130,0.05);
}
.school-item:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--border2); }
.school-icon {
    width:52px;height:52px; border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;
}
.school-name { font-family:'Baloo Da 2',cursive; font-size:0.82rem; font-weight:700; color:var(--text); line-height:1.3; }
.school-place { font-size:0.72rem; color:var(--text-muted); }

/* ── FAQ ── */
.faq-cats { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:2rem; }
.faq-cat-btn {
    background:#fff; border:1.5px solid var(--border2);
    border-radius:50px; padding:8px 20px; font-family:'Baloo Da 2',cursive;
    font-size:0.875rem; font-weight:600; color:var(--text-muted); cursor:pointer; transition:all 0.25s;
}
.faq-cat-btn:hover { border-color:var(--primary-light); color:var(--primary); background:var(--primary-pale); }
.faq-cat-btn.active {
    background:linear-gradient(135deg,#053982,#0D5CE1);
    border-color:transparent; color:#fff;
    box-shadow:0 4px 14px rgba(5,57,130,0.3);
}
.faq-group { display:block; }
.faq-group:not(:last-child) { margin-bottom:30px; }
/* FAQ sub-section header (ট্যাব বাটনের বদলে) */
.faq-subhead {
    font-family:'Baloo Da 2',cursive; font-size:1.15rem; font-weight:700;
    color:var(--primary); margin:38px 0 18px;
    display:flex; align-items:center; gap:10px;
    padding:12px 18px;
    background:linear-gradient(90deg,var(--primary-pale),rgba(234,242,252,0.35));
    border:1px solid var(--border);
    border-left:4px solid var(--accent3);
    border-radius:12px;
}
.faq-subhead.faq-subhead-first { margin-top:0; }
.faq-subhead i { color:var(--accent3); font-size:1rem; }
.faq-item {
    background:#fff; border:1.5px solid var(--border);
    border-radius:14px; margin-bottom:10px; overflow:hidden;
    transition:border-color 0.3s; box-shadow:0 2px 8px rgba(5,57,130,0.04);
}
.faq-item.open { border-color:var(--border2); border-left:3px solid var(--primary); box-shadow:var(--shadow); }
.faq-q {
    padding:17px 22px; cursor:pointer;
    display:flex; justify-content:space-between; align-items:center;
    font-family:'Baloo Da 2',cursive; font-weight:600; font-size:0.95rem; color:var(--text);
    transition:color 0.2s;
}
.faq-q:hover { color:var(--primary); }
.faq-item.open .faq-q { color:var(--primary); }
.faq-q .arrow { transition:transform 0.3s; color:var(--text-muted); flex-shrink:0; }
.faq-item.open .faq-q .arrow { transform:rotate(180deg); color:var(--primary); }
.faq-a { display:none; padding:0 22px 18px; font-size:0.875rem; color:var(--text-muted); line-height:1.75; }

/* নমুনা SMS বক্স (FAQ উত্তরে) */
.sms-sample {
    margin-top:12px; background:var(--primary-pale);
    border:1px solid var(--border); border-left:3px solid var(--accent3);
    border-radius:10px; padding:12px 14px;
    font-size:0.84rem; color:var(--text); line-height:1.7;
}
.sms-sample .sms-label {
    display:flex; align-items:center; gap:6px;
    font-family:'Baloo Da 2',cursive; font-weight:700;
    font-size:0.75rem; color:var(--primary); margin-bottom:6px;
}
.sms-sample .sms-label i { color:var(--accent3); }
.sms-sample b { color:var(--text); font-weight:700; }
.grp-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.grp-chips span {
    background:#fff; border:1px solid var(--border2); border-radius:20px;
    padding:3px 12px; font-size:0.76rem; color:var(--primary); font-weight:500;
}

/* ── SHOWCASE ── */
.showcase-card {
    background:#fff; border:1.5px solid var(--border); border-radius:20px;
    overflow:hidden; transition:all 0.3s; box-shadow:0 2px 12px rgba(5,57,130,0.06);
}
.showcase-card:hover { border-color:var(--border2); transform:scale(1.02); box-shadow:var(--shadow-hover); }
.showcase-img { background:var(--bg2); padding:20px; text-align:center; position:relative; }
.showcase-badge {
    position:absolute; top:12px; right:12px;
    background:linear-gradient(135deg,#0D5CE1,#549EE8);
    border-radius:20px; padding:3px 12px; font-size:0.73rem; font-weight:600; color:#fff;
}
.showcase-body { padding:18px; }
.showcase-body h5 { font-weight:700; margin-bottom:6px; color:var(--text); }
.showcase-body p  { font-size:0.85rem; color:var(--text-muted); }

/* ── TESTIMONIAL ── */
.testi-card {
    background:#fff; border:1.5px solid var(--border);
    border-radius:20px; padding:28px; height:100%;
    box-shadow:0 2px 12px rgba(5,57,130,0.06); position:relative;
}
.testi-card::before {
    content:'"'; position:absolute; top:8px; right:18px;
    font-family:Georgia,serif; font-size:5rem;
    color:rgba(5,57,130,0.08); line-height:1;
}
.testi-stars { color:#F59E0B; margin-bottom:12px; }
.testi-text  { font-size:0.9rem; color:var(--text-muted); line-height:1.75; margin-bottom:1.2rem; }
.testi-author{ display:flex; align-items:center; gap:12px; }
.testi-avatar{ width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Baloo Da 2',cursive;font-weight:700;font-size:1.1rem;color:#fff; }
.testi-name  { font-weight:700; font-size:0.9rem; }
.testi-role  { font-size:0.78rem; color:var(--text-muted); }

/* ── CTA ── */
.cta-section {
    background:
        radial-gradient(circle, rgba(5,57,130,0.07) 1px, transparent 1px),
        linear-gradient(135deg, #DDEAFB 0%, #FFF8ED 55%, #E0F9EF 100%);
    background-size: 26px 26px, 100% 100%;
    border:2px solid var(--border2); border-radius:28px; padding:60px 40px;
    text-align:center; position:relative; overflow:hidden;
}

/* ── CONTACT ── */
.contact-card {
    background:#fff; border:1.5px solid var(--border);
    border-radius:18px; padding:22px; display:flex;
    align-items:flex-start; gap:14px; transition:all 0.3s;
    box-shadow:0 2px 10px rgba(5,57,130,0.05);
}
.contact-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:var(--border2); }
.contact-icon { width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0; }
.contact-card h6 { font-family:'Baloo Da 2',cursive; font-weight:700; margin-bottom:4px; }
.contact-card a { color:var(--text-muted); font-size:0.875rem; text-decoration:none; display:block; }
.contact-card a:hover { color:var(--primary); }

/* ── FOOTER ── */
footer {
    background:#fff; border-top:1.5px solid var(--border);
    padding:28px 0; text-align:center; color:var(--text-muted); font-size:0.85rem;
}
.footer-social {
    display:flex; justify-content:center; gap:14px; margin:14px 0;
}
.footer-social a {
    width:40px; height:40px; border-radius:50%;
    border:1.5px solid var(--border2);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-muted); font-size:1rem;
    text-decoration:none; transition:all 0.25s; background:#fff;
}
.footer-social a:hover {
    background:var(--primary-pale); color:var(--primary);
    border-color:var(--primary-light); transform:translateY(-2px);
}

/* ── FLOATING CTA (mobile) ── */
.floating-cta {
    position:fixed; bottom:0; left:0; right:0;
    padding:12px 16px;
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--border);
    z-index:998;
    box-shadow:0 -4px 20px rgba(5,57,130,0.12);
}

/* ── SCROLL ANIM ── */
.animate-on-scroll { opacity:0; transform:translateY(28px); transition:all 0.55s ease; }
.animate-on-scroll.visible { opacity:1; transform:translateY(0); }

/* ── MODAL ── */
.preview-modal .modal-content { border:none; border-radius:20px; overflow:hidden; }
.preview-modal .modal-header {
    background:var(--bg2); border-bottom:1.5px solid var(--border);
    padding:16px 22px;
}
.preview-modal .modal-title { font-family:'Baloo Da 2',cursive; font-weight:700; color:var(--text); }
.preview-modal .modal-body { padding:24px; background:#fff; }
.preview-modal img { width:100%; border-radius:12px; border:1.5px solid var(--border); }
.preview-nav { display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.preview-thumb {
    width:64px;height:64px; border-radius:8px; overflow:hidden;
    border:2px solid var(--border); cursor:pointer; transition:all 0.2s; flex-shrink:0;
}
.preview-thumb:hover,.preview-thumb.active { border-color:var(--primary-light); }
.preview-thumb img { width:100%;height:100%;object-fit:cover; }

/* color utils */
.icon-purple { background:rgba(5,57,130,0.10); color:#053982; }
.icon-amber  { background:rgba(245,158,11,0.12);  color:#D97706; }
.icon-green  { background:rgba(16,185,129,0.12);  color:#059669; }
.icon-blue   { background:rgba(59,130,246,0.12);  color:#2563EB; }
.icon-red    { background:rgba(239,68,68,0.12);   color:#DC2626; }
.icon-pink   { background:rgba(236,72,153,0.12);  color:#DB2777; }

@media(max-width:768px){
    body { padding-bottom:72px; }
    .hero{padding: 1px 0 1px; min-height: auto;}
    .section{padding:56px 0;}
    .cta-section{padding:36px 20px;}
    .hero-stats{gap:1.2rem;}
    .school-item{width:140px;padding:14px;}
    .feature-tabs-nav .tab-btn{padding:8px 14px;font-size:0.8rem;}

    /* testimonials swipe on mobile */
    #testimonials .row {
        flex-wrap:nowrap;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory;
        padding-bottom:14px;
        margin-right:-12px;
        scrollbar-width:none;
    }
    #testimonials .row::-webkit-scrollbar { display:none; }
    #testimonials .col-lg-4 {
        min-width:82vw;
        scroll-snap-align:start;
    }
}