/* =========================================================
   File location: assets/css/style.css
   This file lives in the assets/css/ folder, so image or other
   file paths need to account for that folder level.
   For example, to reach the assets/images/ folder, use ../images/
   (../  means go back one folder, then into the images folder)
   ========================================================= */

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

html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    display: none;
}

/* ====== HIDE-EMPTY ======
   Google Sheet থেকে আসা ফিল্ডগুলোর (নাম, নাম্বার, লিংক, প্যাকেজ ইত্যাদি)
   কোনো হার্ডকোড ভ্যালু/ফলব্যাক টেক্সট নেই — শিটে ভ্যালু না পাওয়া পর্যন্ত
   এই ক্লাসটা এলিমেন্ট হাইড রাখে। assets/js/main.js শিট থেকে ভ্যালু পেলে
   এই ক্লাস সরিয়ে দেখায়, ভ্যালু না পেলে হাইডই থেকে যায়/আবার হাইড হয়ে যায়। */
.hide-empty {
    display: none !important;
}

/* The theme's core colors are set here. Changing any one color
   will update it everywhere on the site (buttons, icons, borders,
   glows, etc.), because every part of the site references these
   variables using var(--green) and so on */
:root {
    --green: #30d158;
    --green-glow: rgba(48, 209, 88, .45);
    --green-soft: rgba(48, 209, 88, .15);
    --green-border: rgba(48, 209, 88, .28);
    --blue: #0a84ff;
    --blue-glow: rgba(10, 132, 255, .4);
    --orange: #ff9f0a;
    --red: #ff453a;
    --purple: #bf5af2;
    --cyan: #32d2fe;
    --glass: rgba(255, 255, 255, .08);
    --glass-strong: rgba(255, 255, 255, .13);
    --glass-border: rgba(255, 255, 255, .18);
    --text: #f0f0f5;
    --text-sub: rgba(235, 235, 245, .55);
    --text-dim: rgba(235, 235, 245, .3);
}

html,
body {
    font-family: 'Hind Siliguri', sans-serif;
    background: transparent;
    color: var(--text);
}

body {
    position: relative;
    min-height: 100vh;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
}

.pg {
    max-width: 840px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .pg {
        animation: none;
    }
}

.reveal {
    opacity: 0;
    transition: opacity .35s ease;
}

.reveal.in {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transition: none !important;
    }
}

.shine {
    position: relative;
}

.reveal.in .ci2,
.reveal.in .fi,
.reveal.in .si2,
.reveal.in .pkg-speed {
}

.htl .gr {
    color: var(--green);
    text-shadow: 0 0 28px var(--green-glow);
}

@media (prefers-reduced-motion: reduce) {
    .li {
        animation: none;
    }
}

.cbig,
.gb2,
.cbtn,
.app-btn-header,
.qlink {
    animation: none;
}

.cbig:focus-visible,
.gb2:focus-visible,
.cbtn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .5);
    outline-offset: 2px;
}

.pg {
    max-width: 840px;
    margin: 0 auto;
    padding: 0 0 0;
    position: relative;
    z-index: 2;
}

.tl {
    height: 1.8px;
    background: linear-gradient(90deg, transparent, var(--green) 30%, var(--cyan) 50%, var(--purple) 70%, transparent);
    opacity: .9;
    box-shadow: 0 0 12px rgba(48, 209, 88, .4);
}

.glass-card {
    background: rgba(4, 10, 20, .20);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 25.2px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(48, 209, 88, .08) inset, 0 32px 80px rgba(0, 0, 0, .6);
}

.glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, transparent 60%);
    pointer-events: none;
    border-radius: inherit;
}

.ci {
    padding: clamp(18px, 3.8vw, 34.2px) clamp(16.2px, 4.7vw, 39.6px) clamp(8px, 1.6vw, 12px);
}

.ch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10.6px;
    margin-bottom: clamp(18px, 3.8vw, 28.8px);
}

/* ====== STICKY HEADER WRAPPER ======
   কোম্পানি নাম/অ্যাড্রেস/App Download/Connected + ব্যানার — এই পুরো অংশটা
   স্ক্রল করলেও স্ক্রিনের উপরেই আটকে (sticky) থাকবে, বাকি কনটেন্ট এর নিচ
   দিয়ে স্ক্রল হবে। */
.site-header-sticky {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: clamp(14px, 3vw, 22px) clamp(16.2px, 4.7vw, 39.6px) 0;
    background: #04150a;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

.site-header-sticky .ch {
    margin-bottom: 12px;
}

.lb {
    display: flex;
    align-items: center;
    gap: 12.3px;
}

.li {
    width: clamp(39.6px, 6.6vw, 48.6px);
    height: clamp(39.6px, 6.6vw, 48.6px);
    background: linear-gradient(160deg, rgba(48, 209, 88, .22), rgba(50, 210, 254, .12));
    border: 1.5px solid rgba(48, 209, 88, .5);
    border-radius: 14.4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 3.8vw, 23.4px);
    box-shadow: 0 0 28px rgba(48, 209, 88, .35), 0 0 60px rgba(48, 209, 88, .12), inset 0 1px 0 rgba(255, 255, 255, .2);
    font-weight: 800;
    letter-spacing: -1px;
    font-size: clamp(13.5px, 2.8vw, 17px);
    color: #fff;
}

.li-accent {
    color: var(--green);
    text-shadow: 0 0 14px var(--green-glow);
}

.ln {
    color: #fff;
    font-size: clamp(15.3px, 3.8vw, 19.8px);
    font-weight: 700;
    letter-spacing: -.3px;
}

.ln span {
    color: var(--green);
}

.ls {
    color: var(--text-dim);
    font-size: clamp(9px, 2vw, 9.5px);
    letter-spacing: 1.7px;
    margin-top: 1.8px;
}

.ch-right {
    display: flex;
    align-items: center;
    gap: 8.8px;
    flex-wrap: wrap;
}

/* .app-btn-header: the small "App Download" button in the header (a website-btn-header used to be here) */
.app-btn-header {
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    background: rgba(50, 210, 254, .12);
    border: 1.3px solid rgba(50, 210, 254, .35);
    border-radius: 40px;
    padding: 5px 12px;
    color: #fff;
    font-size: clamp(9px, 1.7vw, 10.3px);
    font-weight: 700;
    text-decoration: none;
    font-family: 'Hind Siliguri', sans-serif;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 4px 14px rgba(0, 0, 0, .18);
    transition: all .2s ease;
    position: relative;
    overflow: hidden;
}

.app-btn-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .12) 0%, transparent 60%);
    pointer-events: none;
}

.app-btn-header:hover {
    background: rgba(50, 210, 254, .2);
    border-color: rgba(50, 210, 254, .55);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 22px rgba(0, 0, 0, .28);
}

.qlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 8.8px;
    margin-bottom: clamp(16.2px, 3.3vw, 25.2px);
}

.qlink {
    flex: 1 1 calc(50% - 5px);
    min-width: 115.2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6.2px;
    text-decoration: none;
    background: rgba(255, 255, 255, .09);
    border: 1.5px solid rgba(255, 255, 255, .15);
    border-radius: 16.2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 6px 18px rgba(0, 0, 0, .18);
    padding: clamp(12.6px, 2.8vw, 16.2px) 10px;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .3s;
}

.qlink::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .07) 0%, transparent 60%);
    pointer-events: none;
}

.qlink:hover {
    transform: translateY(-2px);
}

.qlink:active {
    transform: scale(.97);
}

.qlink-ic {
    font-size: 23.2px;
    position: relative;
    z-index: 1;
    line-height: 1;
}

.qlink-tx {
    color: #fff;
    font-size: clamp(10.8px, 2.3vw, 12.2px);
    font-weight: 700;
    font-family: 'Hind Siliguri', sans-serif;
    letter-spacing: .1px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.qlink.ql-green {
    border-color: rgba(48, 209, 88, .4);
}

.qlink.ql-green:hover {
    box-shadow: 0 14px 36px rgba(48, 209, 88, .25);
    border-color: rgba(48, 209, 88, .6);
}

/* The Live TV button gets a distinct, professional/highlighted look
   so it stands out more than the other buttons */
.qlink.qlink-live {
    background: linear-gradient(160deg, rgba(48, 209, 88, .16), rgba(48, 209, 88, .05));
    border: 1.5px solid rgba(48, 209, 88, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 24px rgba(48, 209, 88, .18);
}

.qlink.qlink-live:hover {
    background: linear-gradient(160deg, rgba(48, 209, 88, .24), rgba(48, 209, 88, .08));
    border-color: rgba(48, 209, 88, .8);
    box-shadow: 0 16px 40px rgba(48, 209, 88, .3);
}

.qlink-live-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(48, 209, 88, .18);
    border: 1px solid rgba(48, 209, 88, .55);
    border-radius: 30px;
    padding: 2.5px 7px 2.5px 6px;
    font-size: 8.6px;
    font-weight: 800;
    letter-spacing: .6px;
    color: #6dffa0;
    z-index: 1;
    text-shadow: 0 0 8px rgba(48, 209, 88, .6);
}

.qlink-live-badge .qlb-dot {
    position: static;
    width: 5.4px;
    height: 5.4px;
}

.qlink.ql-blue {
    border-color: rgba(10, 132, 255, .4);
}

.qlink.ql-blue:hover {
    box-shadow: 0 14px 36px rgba(10, 132, 255, .25);
    border-color: rgba(10, 132, 255, .6);
}

.qlink.ql-orange {
    border-color: rgba(255, 159, 10, .4);
}

.qlink.ql-orange:hover {
    box-shadow: 0 14px 36px rgba(255, 159, 10, .25);
    border-color: rgba(255, 159, 10, .6);
}

.qlink.ql-purple {
    border-color: rgba(191, 90, 242, .4);
}

.qlink.ql-purple:hover {
    box-shadow: 0 14px 36px rgba(191, 90, 242, .25);
    border-color: rgba(191, 90, 242, .6);
}

.qlink.ql-cyan {
    border-color: rgba(50, 210, 254, .4);
}

.qlink.ql-cyan:hover {
    box-shadow: 0 14px 36px rgba(50, 210, 254, .25);
    border-color: rgba(50, 210, 254, .6);
}

.qlink.ql-red {
    border-color: rgba(255, 69, 58, .4);
}

.qlink.ql-red:hover {
    box-shadow: 0 14px 36px rgba(255, 69, 58, .25);
    border-color: rgba(255, 69, 58, .6);
}

.qlink.ql-yellow {
    border-color: rgba(255, 214, 10, .4);
}

.qlink.ql-yellow:hover {
    box-shadow: 0 14px 36px rgba(255, 214, 10, .25);
    border-color: rgba(255, 214, 10, .6);
}

.qlink.ql-pink {
    border-color: rgba(226, 19, 110, .4);
}

.qlink.ql-pink:hover {
    box-shadow: 0 14px 36px rgba(226, 19, 110, .25);
    border-color: rgba(226, 19, 110, .6);
}

.qlb-dot {
    width: 7.2px;
    height: 7.2px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
    animation: blip 2s ease-in-out infinite;
    position: absolute;
    top: 8.3px;
    right: 8.3px;
    z-index: 1;
}

.hb {
    background: rgba(48, 209, 88, .1);
    border: 1px solid rgba(48, 209, 88, .4);
    border-radius: 45px;
    padding: 6.3px 14.4px;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 0 20px rgba(48, 209, 88, .25), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.ld {
    width: 7.2px;
    height: 7.2px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--green), 0 0 24px rgba(48, 209, 88, .4);
    animation: blip 2s ease-in-out infinite;
    position: relative;
}

@keyframes blip {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .2;
    }
}

.bt {
    color: var(--green);
    font-size: clamp(10px, 2.3vw, 11.7px);
    font-weight: 600;
    letter-spacing: .3px;
}

.hr {
    margin-bottom: clamp(16.2px, 3.8vw, 25.2px);
}

.ht {
    color: rgba(48, 209, 88, .85);
    font-size: clamp(9px, 2vw, 9.5px);
    letter-spacing: 3.8px;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.htl {
    font-size: clamp(21.6px, 5.2vw, 39.6px);
    font-weight: 700;
    color: #fff;
    line-height: 1.12;
    margin-bottom: 10.8px;
    letter-spacing: -.5px;
}

.htl .gr {
    color: var(--green);
    text-shadow: 0 0 36px var(--green-glow);
}

.hs {
    color: var(--text-sub);
    font-size: clamp(11.7px, 2.2vw, 13.5px);
    line-height: 1.75;
    max-width: 500px;
}

.dv {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
    margin-bottom: clamp(14.4px, 2.8vw, 23.4px);
}

.cc {
    display: flex;
    flex-direction: column;
    gap: clamp(7px, 1.6vw, 9px);
    margin-bottom: clamp(4px, 1vw, 8px);
}

.cd {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 18px rgba(0, 0, 0, .18);
    padding: clamp(9px, 1.8vw, 13px) clamp(10px, 3vw, 16px);
    display: flex;
    align-items: center;
    gap: clamp(9px, 2.2vw, 13px);
    transition: all .2s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.cd::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .05) 0%, transparent 70%);
    pointer-events: none;
    border-radius: inherit;
}

.cd:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 56px rgba(0, 0, 0, .4);
}

.cd.cd-green:hover {
    border-color: rgba(48, 209, 88, .4);
    box-shadow: 0 16px 48px rgba(48, 209, 88, .15);
}

.cd.cd-orange:hover {
    border-color: rgba(255, 159, 10, .4);
    box-shadow: 0 16px 48px rgba(255, 159, 10, .15);
}

.cd.cd-pink:hover {
    border-color: rgba(226, 19, 110, .4);
    box-shadow: 0 16px 48px rgba(226, 19, 110, .15);
}

.ci2 {
    width: clamp(32px, 5.4vw, 40px);
    height: clamp(32px, 5.4vw, 40px);
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(15px, 3.2vw, 19px);
    position: relative;
    z-index: 1;
}

.ig {
    background: rgba(48, 209, 88, .12);
    border: 1.5px solid rgba(48, 209, 88, .3);
    box-shadow: 0 0 20px rgba(48, 209, 88, .15);
}

.iw {
    background: rgba(50, 210, 254, .12);
    border: 1.5px solid rgba(50, 210, 254, .3);
    box-shadow: 0 0 20px rgba(50, 210, 254, .12);
}

.ih {
    background: rgba(255, 159, 10, .1);
    border: 1.5px solid rgba(255, 159, 10, .3);
    box-shadow: 0 0 20px rgba(255, 159, 10, .1);
}

.ip {
    background: rgba(226, 19, 110, .12);
    border: 1.5px solid rgba(226, 19, 110, .3);
    box-shadow: 0 0 20px rgba(226, 19, 110, .12);
}

.cb {
    flex: 1;
    z-index: 1;
    min-width: 0;
}

.cl {
    color: rgba(48, 209, 88, .8);
    font-size: clamp(8.3px, 1.5vw, 9px);
    letter-spacing: 2.3px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.ct {
    color: rgba(255, 255, 255, .75);
    font-size: clamp(9.8px, 2vw, 11px);
    font-weight: 500;
    margin-bottom: 2px;
}

.cv {
    color: var(--green);
    font-size: clamp(11px, 2.8vw, 14.5px);
    font-weight: 700;
    text-shadow: 0 0 22px var(--green-glow);
    text-decoration: none;
    display: block;
    letter-spacing: -.2px;
}

.cv.or {
    color: var(--orange);
    text-shadow: 0 0 22px rgba(255, 159, 10, .5);
}

.cv.pk {
    color: #ff5fad;
    text-shadow: 0 0 22px rgba(226, 19, 110, .5);
}

.cd2 {
    color: var(--text-dim);
    font-size: clamp(9px, 1.7vw, 10.3px);
}

.cbtn {
    background: rgba(48, 209, 88, .1);
    border: 1.5px solid rgba(48, 209, 88, .35);
    color: var(--green);
    border-radius: 40px;
    padding: clamp(7px, 1.6vw, 9px) clamp(10px, 2.3vw, 15px);
    font-size: clamp(9px, 1.8vw, 10.5px);
    font-weight: 700;
    font-family: 'Hind Siliguri', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    z-index: 1;
    transition: all .2s ease;
    box-shadow: 0 4px 16px rgba(48, 209, 88, .1);
}

.cbtn.ob {
    background: rgba(255, 159, 10, .08);
    border-color: rgba(255, 159, 10, .35);
    color: var(--orange);
    box-shadow: 0 4px 16px rgba(255, 159, 10, .1);
}

.cbtn.pb {
    background: rgba(226, 19, 110, .1);
    border-color: rgba(226, 19, 110, .35);
    color: #ff5fad;
    box-shadow: 0 4px 16px rgba(226, 19, 110, .1);
}

.cbtn.pb:hover {
    transform: translateY(-2px);
    background: rgba(226, 19, 110, .22);
    box-shadow: 0 8px 28px rgba(226, 19, 110, .35);
}

.cbtn:hover {
    transform: translateY(-2px);
    background: rgba(48, 209, 88, .22);
    box-shadow: 0 8px 28px rgba(48, 209, 88, .35);
}

.cbtn.ob:hover {
    transform: translateY(-2px);
    background: rgba(255, 159, 10, .18);
    box-shadow: 0 8px 28px rgba(255, 159, 10, .3);
}

.cta-panel {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 19.8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 18px rgba(0, 0, 0, .18);
    padding: clamp(14.4px, 2.8vw, 19.8px) clamp(14.4px, 3.8vw, 23.4px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12.3px;
    flex-wrap: wrap;
    margin-bottom: 10.8px;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.cta-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .05) 0%, transparent 60%);
    pointer-events: none;
}

.cta-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .3);
}

.cta-panel.pink:hover {
    box-shadow: 0 14px 40px rgba(226, 19, 110, .2);
}

.cta-panel.green:hover {
    box-shadow: 0 14px 40px rgba(48, 209, 88, .15);
}

.cta-panel.red:hover {
    box-shadow: 0 14px 40px rgba(255, 69, 58, .2);
}

.ctt {
    color: #fff;
    font-size: clamp(11.7px, 2.8vw, 14.4px);
    font-weight: 700;
    margin-bottom: 2.7px;
    letter-spacing: -.2px;
}

.cts {
    color: var(--text-sub);
    font-size: clamp(10px, 2vw, 11.7px);
}

.cbig {
    border: none;
    border-radius: 45px;
    padding: clamp(10.8px, 2.3vw, 13.5px) clamp(18px, 4.7vw, 28.8px);
    font-size: clamp(11.7px, 2.6vw, 13.5px);
    font-weight: 700;
    font-family: 'Hind Siliguri', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    letter-spacing: .2px;
}

.cbig::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .25) 0%, transparent 50%);
    pointer-events: none;
}

.cbig.pink {
    color: #fff;
    background: linear-gradient(135deg, #e2136e, #c00f5e);
    box-shadow: 0 8px 30px rgba(226, 19, 110, .45);
}

.cbig.green {
    color: #fff;
    background: linear-gradient(135deg, #30d158, #1db045);
    box-shadow: 0 8px 30px rgba(48, 209, 88, .45);
}

.cbig.red {
    color: #fff;
    background: linear-gradient(135deg, #ff453a, #d63028);
    box-shadow: 0 8px 30px rgba(255, 69, 58, .4);
}

.cbig:hover {
    transform: translateY(-2px);
}

.cbig.pink:hover {
    box-shadow: 0 16px 44px rgba(226, 19, 110, .65);
}

.cbig.green:hover {
    box-shadow: 0 16px 44px rgba(48, 209, 88, .65);
}

.cbig.red:hover {
    box-shadow: 0 16px 44px rgba(255, 69, 58, .6);
}

.cbig:active {
    transform: scale(.97);
}

.cbig::before {
    display: none;
}

.br {
    padding: clamp(8px, 1.6vw, 14px) clamp(16.2px, 4.7vw, 39.6px) clamp(14.4px, 2.8vw, 25.2px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.brd {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
    margin-bottom: clamp(10px, 2vw, 16px);
}

.bbi {
    display: block;
    width: 100%;
    text-align: center;
    background: linear-gradient(90deg, var(--green), var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 9.8px;
    font-weight: 700;
    letter-spacing: 3.8px;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.btt {
    display: block;
    width: 100%;
    text-align: center;
    font-size: clamp(19.8px, 4.7vw, 28.8px);
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    letter-spacing: -.4px;
}

.btl {
    width: 54px;
    height: 2.7px;
    background: linear-gradient(90deg, var(--green), var(--cyan));
    margin: 14px auto 0;
    border-radius: 2.7px;
    flex-shrink: 0;
}

.si {
    padding: clamp(9px, 2vw, 18px) clamp(16.2px, 4.7vw, 39.6px) clamp(9px, 2vw, 14.4px);
}

.fc {
    display: flex;
    flex-direction: column;
    gap: 8.8px;
    margin-bottom: 16.2px;
}

.fcd {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16.2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 18px rgba(0, 0, 0, .18);
    padding: clamp(14.4px, 2.3vw, 18px);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform .2s ease, border-color .2s, box-shadow .2s;
    position: relative;
    overflow: hidden;
}

.fcd::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .05) 0%, transparent 70%);
    pointer-events: none;
}

.fcd:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .28);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .3);
}

.fi {
    width: 46.8px;
    height: 46.8px;
    flex-shrink: 0;
    border-radius: 14.4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22.3px;
    position: relative;
}

.fig {
    background: rgba(48, 209, 88, .12);
    border: 1.5px solid rgba(48, 209, 88, .3);
    box-shadow: 0 0 22px rgba(48, 209, 88, .15);
}

.fip {
    background: rgba(191, 90, 242, .12);
    border: 1.5px solid rgba(191, 90, 242, .3);
    box-shadow: 0 0 22px rgba(191, 90, 242, .12);
}

.fic {
    background: rgba(50, 210, 254, .12);
    border: 1.5px solid rgba(50, 210, 254, .3);
    box-shadow: 0 0 22px rgba(50, 210, 254, .12);
}

.ft {
    flex: 1;
}

.fn {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2.3px;
    color: var(--green);
    text-transform: uppercase;
    margin-bottom: 3.6px;
}

.fti {
    font-size: clamp(12.6px, 2.6vw, 14.4px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 2.7px;
    letter-spacing: -.2px;
}

.fd {
    font-size: clamp(10.8px, 2vw, 12.2px);
    color: var(--text-sub);
    line-height: 1.6;
}

.sl {
    text-align: center;
    font-size: 9.5px;
    letter-spacing: 3.3px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 14.4px;
    margin-top: 3.6px;
}

.pkg-list {
    display: flex;
    flex-direction: column;
    gap: 8.8px;
    margin-bottom: 18px;
}

.pkg-row {
    display: flex;
    align-items: center;
    gap: clamp(10.8px, 2.6vw, 14.4px);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16.2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 18px rgba(0, 0, 0, .18);
    padding: clamp(10.8px, 2.3vw, 13.5px) clamp(12.6px, 2.8vw, 16.2px);
    position: relative;
    overflow: hidden;
    transition: all .2s ease;
}

.pkg-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .05) 0%, transparent 70%);
    pointer-events: none;
}

.pkg-row:hover {
    transform: translateY(-2px);
    border-color: rgba(48, 209, 88, .4);
    box-shadow: 0 14px 36px rgba(48, 209, 88, .15);
}

.pkg-row.popular {
    border-color: rgba(48, 209, 88, .7);
    box-shadow: 0 0 0 1px rgba(48, 209, 88, .25), 0 8px 32px rgba(48, 209, 88, .22), inset 0 1px 0 rgba(48, 209, 88, .15);
}

.pkg-badge {
    position: absolute;
    top: 0;
    right: 16.6px;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    color: #04150a;
    font-size: 9.5px;
    font-weight: 700;
    padding: 3.6px 10px;
    border-radius: 0 0 9px 9px;
    letter-spacing: .3px;
    z-index: 2;
    box-shadow: 0 3px 10px rgba(48, 209, 88, .3);
}

.pkg-speed {
    flex-shrink: 0;
    width: clamp(43.2px, 8.5vw, 52.2px);
    height: clamp(43.2px, 8.5vw, 52.2px);
    border-radius: 14.4px;
    background: rgba(48, 209, 88, .12);
    border: 1.5px solid rgba(48, 209, 88, .3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--green);
    font-weight: 700;
    font-size: clamp(12.6px, 2.8vw, 15.3px);
    line-height: 1.05;
    box-shadow: 0 0 18px rgba(48, 209, 88, .15);
    position: relative;
    z-index: 1;
}

.pkg-speed span {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .4px;
    opacity: .85;
    margin-top: 1px;
}

.pkg-info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.pkg-name {
    color: #fff;
    font-size: clamp(12.2px, 2.6vw, 14.4px);
    font-weight: 700;
    margin-bottom: 1.8px;
    letter-spacing: -.1px;
}

.pkg-sub {
    color: var(--text-sub);
    font-size: clamp(9.5px, 2vw, 11.2px);
    line-height: 1.4;
}

.pkg-price {
    flex-shrink: 0;
    color: var(--green);
    font-size: clamp(13.5px, 3vw, 16.7px);
    font-weight: 700;
    text-shadow: 0 0 16px var(--green-glow);
    text-align: right;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.pkg-price span {
    display: block;
    color: var(--text-dim);
    font-size: 9.5px;
    font-weight: 600;
    margin-top: 1px;
}

.fb {
    background: rgba(255, 255, 255, .1);
    border-top: 1px solid var(--glass-border);
    border-radius: 0 0 28px 28px;
    padding: clamp(12.6px, 2.3vw, 16.2px) clamp(16.2px, 4.7vw, 39.6px);
    display: flex;
    flex-direction: column;
    gap: 8.8px;
}

.fb-row1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
}

.fb-row2 {
    font-size: clamp(9px, 1.7vw, 10.8px);
    letter-spacing: .8px;
    color: var(--text-dim);
}

.ftg {
    background: rgba(48, 209, 88, .08);
    border: 1px solid rgba(48, 209, 88, .22);
    border-radius: 45px;
    padding: 4.5px 12.6px;
    color: rgba(48, 209, 88, .85);
    font-size: clamp(9px, 1.7vw, 10.8px);
    font-weight: 600;
    transition: all .25s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.ftg:hover {
    background: rgba(48, 209, 88, .16);
    border-color: rgba(48, 209, 88, .4);
}

.ftg.dev {
    color: rgba(10, 132, 255, .85);
    background: rgba(10, 132, 255, .08);
    border-color: rgba(10, 132, 255, .28);
}

.ftg.dev:hover {
    background: rgba(10, 132, 255, .2);
    border-color: rgba(10, 132, 255, .5);
    box-shadow: 0 4px 16px rgba(10, 132, 255, .25);
}

.fr {
    color: var(--text-dim);
    font-size: clamp(9px, 1.7vw, 10.8px);
    letter-spacing: .8px;
}

/* ====== BACKGROUND - PHOTO ======
   To change the background image, just swap the filename in
   url('../images/bg.png') below, e.g.: url('../images/new-bg.jpg')
   The image must be placed inside the assets/images/ folder
   (../ is used because this CSS file lives in assets/css/, so it
   needs to go back one folder first, then into the images folder) */
html,
body {
    background: transparent !important;
}

body {
    background-color: #04150a !important;
}

.bg-anim {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(48, 209, 88, .14) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(50, 210, 254, .12) 0%, transparent 55%),
        linear-gradient(rgba(2, 6, 14, .22), rgba(2, 6, 14, .38)),
        url('../images/bg.png') !important;
    background-size: cover, cover, cover, cover !important;
    background-position: center, center, center, center !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
}

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none !important;
    }
}

.orb1 {
    opacity: 0.18 !important;
}

.orb2 {
    opacity: 0.18 !important;
}

/* ====== GLASS CARD ======
   Controls the transparency and border of the main card (which holds
   all the content). Increasing the last number in the background's
   rgba() (0.14) makes the card more solid/opaque; decreasing it makes
   it more transparent */
.glass-card {
    background: rgba(6, 14, 30, 0.14) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 32px 80px rgba(0, 0, 0, 0.2) !important;
}

.glass-card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%) !important;
}

/* ====== QUICK LINKS ======
   Colors/borders for the homepage buttons (Live TV, Company Owner, App, etc.).
   Changing the border-color on rules like .qlink.ql-green, .qlink.ql-blue
   will change the border color of that specific button */
.qlink {
    background: rgba(10, 20, 40, 0.45) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

.qlink:hover {
    background: rgba(10, 20, 40, 0.55) !important;
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 16px 40px rgba(0, 0, 0, 0.3) !important;
}

.qlink.ql-green {
    border-color: rgba(48, 209, 88, 0.5) !important;
}

.qlink.ql-blue {
    border-color: rgba(10, 132, 255, 0.5) !important;
}

.qlink.ql-orange {
    border-color: rgba(255, 159, 10, 0.5) !important;
}

.qlink.ql-purple {
    border-color: rgba(191, 90, 242, 0.5) !important;
}

.qlink.ql-cyan {
    border-color: rgba(50, 210, 254, 0.5) !important;
}

.qlink.ql-red {
    border-color: rgba(255, 69, 58, 0.5) !important;
}

.qlink.ql-yellow {
    border-color: rgba(255, 214, 10, 0.5) !important;
}

.qlink.ql-pink {
    border-color: rgba(226, 19, 110, 0.5) !important;
}

/* ====== CONTACT CARDS ====== */
.cd {
    background: rgba(10, 20, 40, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

/* ====== CTA PANELS ====== */
.cta-panel {
    background: rgba(10, 20, 40, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

/* ====== FEATURE CARDS ====== */
.fcd {
    background: rgba(10, 20, 40, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

/* ====== PACKAGE ROWS ======
   Styling for each row of the internet package list (Turbo, Boost, etc.).
   The price and speed text aren't set here — they're written as text
   inside .pkg-price and .pkg-speed in index.html; this is just the design */
.pkg-row {
    background: rgba(10, 20, 40, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 10px rgba(0, 0, 0, 0.15) !important;
}

.pkg-row.popular {
    border-color: rgba(48, 209, 88, 0.6) !important;
    background: rgba(10, 40, 20, 0.55) !important;
}

/* ====== BUTTONS ====== */
.app-btn-header {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
}

.cbig {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 22px rgba(0, 0, 0, 0.2) !important;
}

/* ====== STATUS / FAB / FOOTER / MODAL ====== */
.hb {
    background: rgba(48, 209, 88, 0.08) !important;
}

.fb {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.glass-card {
    will-change: auto;
    transform: translateZ(0);
}

.qlink,
.cd,
.cta-panel,
.fcd,
.pkg-row,
.cbig,
.cbtn,
.app-btn-header {
    will-change: transform;
    transform: translateZ(0);
    -webkit-tap-highlight-color: transparent;
}

.qlink:hover,
.cd:hover,
.cta-panel:hover,
.fcd:hover,
.pkg-row:hover {
    transform: translateY(-2px) translateZ(0);
}

.qlink:hover {
    transform: translateY(-4px) scale(1.03) translateZ(0) !important;
}

.cbig:hover,
.cbtn:hover,
.app-btn-header:hover {
    transform: translateY(-2px) translateZ(0);
}

.cbig:active,
.cbtn:active,
.qlink:active {
    transform: scale(.97) translateZ(0);
}

.qlink,
.cd,
.cta-panel,
.cbig,
.cbtn {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.reveal {
    opacity: 0;
    transform: translateY(12px) translateZ(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ====== DESKTOP 2-COLUMN LAYOUT ====== */
.dt-wrap {
    display: flex;
    flex-direction: column;
}

.dt-left,
.dt-right {
    width: 100%;
}

@media (min-width: 900px) {
    .pg {
        max-width: 1300px !important;
        padding: 0 22px;
    }

    .dt-wrap {
        flex-direction: row;
        align-items: flex-start;
        gap: 18px;
    }

    .dt-left {
        width: 380px;
        flex-shrink: 0;
        position: sticky;
        top: 18px;
        max-height: calc(100vh - 36px);
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .dt-left::-webkit-scrollbar {
        display: none;
    }

    .dt-right {
        flex: 1;
        min-width: 0;
    }

    .br {
        padding: 25px 32px 18px;
    }

    .si {
        padding: 0 32px 18px;
    }

    .fc {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 11px;
        margin-bottom: 18px;
    }

    .fcd {
        flex-direction: column;
        align-items: flex-start;
        gap: 11px;
        padding: 16px;
    }

    .fi {
        flex-shrink: 0;
    }

    .pkg-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 11px;
    }

    .qlink {
        flex: 1 1 calc(20% - 8px);
        min-width: 80px;
    }

    .ci {
        padding: 25px 29px;
    }

    .htl {
        font-size: clamp(20px, 2.3vw, 29px);
    }
}

/* ====== NOTICE MODAL STYLES ====== */
.notice-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(4, 8, 16, .75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.notice-overlay.show {
    display: flex;
    animation: noticeFade .25s ease;
}

@keyframes noticeFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.notice-modal {
    position: relative;
    width: 100%;
    max-width: 320px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #14100c;
    border: 1px solid rgba(255, 159, 10, .4);
    border-radius: 28px;
    padding: 34px 24px 26px;
    text-align: center;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .65), 0 0 70px rgba(255, 159, 10, .2), inset 0 1px 0 rgba(255, 255, 255, .08);
    animation: noticePop .4s cubic-bezier(.34, 1.56, .64, 1);
    overflow: hidden;
}

.notice-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 8, 14, .4) 0%, rgba(12, 9, 15, .55) 40%, rgba(10, 7, 12, .93) 100%);
    z-index: 1;
}

.notice-close,
.notice-icon-wrap,
.notice-title,
.notice-msg,
.notice-ok {
    position: relative;
    z-index: 2;
}

@keyframes noticePop {
    0% {
        opacity: 0;
        transform: scale(.7) translateY(18px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.notice-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
    padding: 0;
    z-index: 3;
}

.notice-close:active {
    background: rgba(255, 255, 255, .22);
    transform: scale(.9);
}

.notice-icon-wrap {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 159, 10, .28), rgba(255, 159, 10, .04));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(255, 159, 10, .35), 0 0 44px rgba(255, 159, 10, .4);
    animation: noticePulse 2.2s ease-in-out infinite;
}

@keyframes noticePulse {
    0%,
    100% {
        box-shadow: 0 0 0 1px rgba(255, 159, 10, .3), 0 0 30px rgba(255, 159, 10, .3);
    }

    50% {
        box-shadow: 0 0 0 1px rgba(255, 159, 10, .55), 0 0 54px rgba(255, 159, 10, .6);
    }
}

.notice-icon {
    font-size: 36px;
    line-height: 1;
}

.notice-title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 9px;
    letter-spacing: -.2px;
}

.notice-msg {
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(235, 235, 245, .65);
    margin-bottom: 24px;
}

.notice-ok {
    border: none;
    border-radius: 40px;
    padding: 12px 36px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1a1206;
    background: linear-gradient(135deg, #ffb339, #ff9f0a);
    box-shadow: 0 10px 28px rgba(255, 159, 10, .45);
    cursor: pointer;
    font-family: 'Hind Siliguri', sans-serif;
    transition: transform .2s ease, box-shadow .2s ease;
}

.notice-ok:active {
    transform: scale(.95);
    box-shadow: 0 6px 18px rgba(255, 159, 10, .4);
}

@media (prefers-reduced-motion: reduce) {
    .notice-overlay.show,
    .notice-modal,
    .notice-icon-wrap {
        animation: none;
    }
}

/* ====== ANIMATIONS ====== */
@keyframes qlinkFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes qlinkGlow {
    0%,
    100% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 6px 18px rgba(0, 0, 0, .18), 0 0 0 rgba(0, 0, 0, 0);
    }

    50% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 6px 18px rgba(0, 0, 0, .18), 0 0 26px var(--glow, transparent);
    }
}

.qlink {
    animation: qlinkGlow 3.2s ease-in-out infinite;
}

.qlink.ql-green {
    --glow: rgba(48, 209, 88, .45);
}

.qlink.ql-blue {
    --glow: rgba(10, 132, 255, .45);
}

.qlink.ql-orange {
    --glow: rgba(255, 159, 10, .45);
}

.qlink.ql-purple {
    --glow: rgba(191, 90, 242, .45);
}

.qlink.ql-cyan {
    --glow: rgba(50, 210, 254, .45);
}

.qlink.ql-red {
    --glow: rgba(255, 69, 58, .45);
}

.qlink.ql-yellow {
    --glow: rgba(255, 214, 10, .45);
}

.qlink.ql-pink {
    --glow: rgba(226, 19, 110, .45);
}

.qlink-ic {
    display: inline-block;
    animation: qlinkFloat 2.6s ease-in-out infinite;
}

.qlinks .qlink:nth-child(2) .qlink-ic {
    animation-delay: .15s;
}

.qlinks .qlink:nth-child(3) .qlink-ic {
    animation-delay: .3s;
}

.qlinks .qlink:nth-child(4) .qlink-ic {
    animation-delay: .45s;
}

.qlinks .qlink:nth-child(5) .qlink-ic {
    animation-delay: .6s;
}

.qlinks .qlink:nth-child(6) .qlink-ic {
    animation-delay: .75s;
}

.qlinks .qlink:nth-child(7) .qlink-ic {
    animation-delay: .9s;
}

.qlink:active {
    transform: scale(.94);
}

.cbig {
    isolation: isolate;
}

.cbig::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 45%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-20deg);
    animation: cbigSweep 3.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.cbig > * {
    position: relative;
    z-index: 1;
}

@keyframes cbigSweep {
    0%,
    40% {
        left: -75%;
    }

    70% {
        left: 130%;
    }

    100% {
        left: 130%;
    }
}

.cbig:active {
    transform: scale(.95);
}

@media (prefers-reduced-motion: reduce) {
    .qlink,
    .qlink-ic,
    .cbig::after {
        animation: none !important;
    }
}

/* ====== SITE FOOTER BAR (persistent copyright) ======
   Always fixed to the very bottom of the screen, on every scroll position.
   Height is stored in --footer-bar-h so other fixed elements can leave
   enough space above it and never overlap it. */
:root {
    --footer-bar-h: 21px;
}

body {
    padding-bottom: var(--footer-bar-h);
}

.site-footer-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    height: var(--footer-bar-h);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, .06);
    color: var(--text-dim);
    font-family: 'Hind Siliguri', sans-serif;
    font-size: clamp(9.5px, 2vw, 11px);
    letter-spacing: .3px;
    text-align: center;
    padding: 0 8px;
    line-height: 1;
}

/* Only the developer name ("TrioTech-Solution") gets the moving rainbow
   gradient that continuously flows from right to left — the rest of the
   copyright line stays a plain, muted color as before. */
.sfb-name {
    background: linear-gradient(90deg,
        #30d158, #32d2fe, #0a84ff, #bf5af2, #ff453a, #ff9f0a, #30d158);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: sfbShimmer 7s linear infinite;
    font-weight: 700;
    text-decoration: none;
}

.sfb-name:hover {
    text-decoration: underline;
}

@keyframes sfbShimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sfb-name {
        animation: none;
        background-position: 50% 0;
    }
}

/* ====== BANNER (news-ticker) ======
   Google Sheet-এর "Banner" সেলে লেখা থাকলে assets/js/main.js এটা fill করে
   হেডারের ঠিক নিচে দেখায় (ডান→বাম স্ক্রল, নিউজ-টিকারের মতো)। এজ-টু-এজ
   (কার্ডের সাইড পাডিং কেটে ফুল-উইথ) গাঢ় ব্যাকগ্রাউন্ড, বাম পাশে মেগাফোন
   আইকন — স্ক্রিনশটের রেফারেন্স স্টাইল অনুযায়ী। সেল খালি থাকলে JS-ই হাইড
   করে দেয়। */
.banner-bar {
    display: none;
    align-items: center;
    gap: 12px;
    width: auto;
    margin: 14px calc(clamp(16.2px, 4.7vw, 39.6px) * -1) 0;
    padding: 10px clamp(16.2px, 4.7vw, 39.6px) 10px clamp(12px, 3.5vw, 22px);
    overflow: hidden;
    background: #0a0f0c;
    border-top: 1px solid rgba(48, 209, 88, .35);
    border-bottom: 1px solid rgba(48, 209, 88, .35);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.banner-bar.show {
    display: flex;
}

.banner-icon {
    flex-shrink: 0;
    width: clamp(30px, 5vw, 36px);
    height: clamp(30px, 5vw, 36px);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(14px, 3vw, 17px);
    background: rgba(48, 209, 88, .15);
    border: 1px solid rgba(48, 209, 88, .35);
}

.banner-track-wrap {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.banner-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: bannerScroll linear infinite;
    animation-duration: 18s;
    will-change: transform;
}

.banner-track span {
    color: #ffffff;
    font-family: 'Hind Siliguri', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding-right: 70px;
}

@keyframes bannerScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .banner-track {
        animation: none;
    }
}