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

/* ====== লং-প্রেস/কনটেক্সট মেনু বন্ধ ======
   কোনো কিছুতে ক্লিক করে ধরে রাখলে (long-press) কপি/সিলেক্ট/সেভ করার মতো
   ব্রাউজারের সিক্রেট/কনটেক্সট অপশন যেন না আসে, তার জন্য পুরো পেজে টেক্সট
   সিলেকশন আর টাচ-কলআউট বন্ধ করে দেওয়া হয়েছে। */
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ইনপুট ফিল্ডে (যেমন Login ফর্ম) টাইপ করা/কার্সার বসানো/টেক্সট এডিট করা
   যেন স্বাভাবিকভাবে কাজ করে, তাই এগুলোর জন্য উপরের ব্লক থেকে বাদ রাখা হলো */
input,
textarea {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

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

/* html/body নিজেরা আর স্ক্রল হয় না (overflow: hidden) — তাই হেডার/ফুটার
   কখনোই স্ক্রল বা বাউন্সের সাথে নড়ে না। আসল স্ক্রলটা নিচের
   .app-scroll কনটেইনারের ভেতরে হয়, যেটা header আর footer-এর মাঝে বসানো
   flex-এর একটা অংশ মাত্র। */
html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* মাঝখানের একমাত্র স্ক্রলযোগ্য এলাকা — হেডার আর ফুটারের মাঝে বসে,
   এদের বাইরে বলে তারা কখনো নড়ে না */
.app-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    position: relative;
}

.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 18px 46px rgba(0, 0, 0, .55);
}

.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: nowrap;
    gap: 8px;
}

.ch-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.lb {
    display: flex;
    align-items: center;
    gap: 12.3px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.ln {
    color: #fff;
    font-size: clamp(13px, 3.4vw, 19.8px);
    font-weight: 700;
    letter-spacing: -.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ls {
    color: var(--text-dim);
    font-size: clamp(8px, 1.8vw, 9.5px);
    letter-spacing: 1.2px;
    margin-top: 1.8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ====== STICKY HEADER WRAPPER ======
   কোম্পানি নাম/অ্যাড্রেস/App Download/Connected + ব্যানার — এই পুরো অংশটা
   স্ক্রল করলেও স্ক্রিনের উপরেই আটকে (sticky) থাকবে, বাকি কনটেন্ট এর নিচ
   দিয়ে স্ক্রল হবে। কমপ্যাক্ট রাখা হয়েছে যাতে হেডার বড়/ভাঙা না দেখায়। */
.site-header-sticky {
    flex-shrink: 0;
    width: 100%;
    max-width: 840px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    z-index: 50;
    padding: clamp(10px, 2.2vw, 14px) clamp(16.2px, 4.7vw, 39.6px) 0;
    background: #0c331a;
    border-bottom: 1px solid rgba(48, 209, 88, .18);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

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

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

.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;
    flex-shrink: 0;
}

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

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

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

.logout-btn-header {
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    background: rgba(255, 90, 90, .12);
    border: 1.3px solid rgba(255, 90, 90, .4);
    border-radius: 40px;
    padding: 5px 12px;
    color: #ff8a8a;
    font-size: clamp(9px, 1.7vw, 10.3px);
    font-weight: 700;
    font-family: 'Hind Siliguri', sans-serif;
    cursor: pointer;
}

.logout-btn-header:active {
    opacity: .8;
}

.logout-btn-header.hide-empty {
    display: none !important;
}

/* .login-btn-header: হেডারের 🔐 Login বাটন (লগইন করা না থাকলে দেখা যায়) —
   logout-btn-header-এর মতোই ডিজাইন, শুধু green tone (logout-এর red থেকে
   আলাদা বোঝানোর জন্য) */
.login-btn-header {
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    background: rgba(48, 209, 88, .12);
    border: 1.3px solid rgba(48, 209, 88, .4);
    border-radius: 40px;
    padding: 5px 12px;
    color: var(--green);
    font-size: clamp(9px, 1.7vw, 10.3px);
    font-weight: 700;
    font-family: 'Hind Siliguri', sans-serif;
    cursor: pointer;
}

.login-btn-header:active {
    opacity: .8;
}

.login-btn-header.hide-empty {
    display: none !important;
}

/* ====== LOGOUT CONFIRM MODAL ======
   Logout বাটনে ক্লিক করলে খুলবে — নিজের Customer ID লিখে কনফার্ম করলেই
   লগআউট হবে। hide-empty ক্লাস থাকলে হাইড থাকে। */
.logout-modal {
    position: fixed;
    inset: 0;
    z-index: 999998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(4, 21, 10, .35);
}

.logout-modal .login-card {
    background: #0a190f;
}

.logout-modal.hide-empty {
    display: none !important;
}

.logout-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.logout-modal-actions .login-btn {
    flex: 1 1 auto;
}

.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: var(--text);
    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.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);
}

.qlink.ql-neutral {
    border-color: rgba(255, 255, 255, .16);
}

.qlink.ql-neutral:hover {
    box-shadow: 0 14px 36px rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .3);
}

/* ====== QUICK LINK TILES (Live TV / Movie / Customer Search / Store) ======
   ৪টা বাটন এক সারিতে (কম্প্যাক্ট স্কয়ার টাইল, আইকন উপরে/টেক্সট নিচে) —
   স্ক্রিনশটের মতো। */
.qlink-tile {
    flex: 1 1 calc(25% - 6.6px);
    min-width: 0;
    padding: clamp(10px, 2.6vw, 14px) 4px;
}

.qlink-tile .qlink-ic {
    font-size: clamp(18px, 4.6vw, 23px);
}

.qlink-tile .qlink-tx {
    font-size: clamp(9.3px, 2vw, 11px);
}

@media (max-width: 340px) {
    .qlink-tile {
        flex: 1 1 calc(50% - 4.4px);
    }
}

/* ====== QUICK LINK LIST ITEMS (Founder & CEO / Our Team) ======
   পাশাপাশি অর্ধেক-অর্ধেক প্রস্থে, আইকন-বৃত্ত বামে, টেক্সট মাঝে, chevron ডানে —
   কার্ড-স্টাইল সারি হিসেবে দেখায়। */
.qlink-list {
    flex-direction: row;
    justify-content: flex-start;
    gap: 9px;
    padding: clamp(11px, 2.4vw, 14px) clamp(10px, 3vw, 14px);
}

.qlink-list .qlink-tx {
    flex: 1 1 auto;
    text-align: left;
}

.qlink-list-ic {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    position: relative;
    z-index: 1;
}

.qlink-list-ic.ic-blue {
    background: rgba(10, 132, 255, .16);
    border: 1px solid rgba(10, 132, 255, .4);
}

.qlink-list-ic.ic-purple {
    background: rgba(191, 90, 242, .16);
    border: 1px solid rgba(191, 90, 242, .4);
}

.qlink-chevron {
    flex-shrink: 0;
    color: var(--text-dim);
    font-size: 18px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.qlb-dot {
    width: 7.2px;
    height: 7.2px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
    animation: blip 2.6s 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 2.6s 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);
}

/* ====== HERO Wi-Fi ORB GRAPHIC ======
   হেডলাইনের ডান পাশে একটা গ্লোয়িং নীল-সবুজ Wi-Fi অরব গ্রাফিক দেখায়
   (স্ক্রিনশটের মতো), pure CSS/SVG দিয়ে বানানো — কোনো ইমেজ ফাইল লাগে না। */
.hr-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px, 3vw, 22px);
}

.hr-text {
    flex: 1 1 auto;
    min-width: 0;
}

.hero-orb {
    position: relative;
    flex-shrink: 0;
    width: clamp(84px, 22vw, 168px);
    height: clamp(84px, 22vw, 168px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-orb-glow {
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(50, 210, 254, .35), rgba(48, 209, 88, .18) 55%, transparent 75%);
    filter: blur(8px);
    animation: heroOrbPulse 3.2s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes heroOrbPulse {
    0%, 100% { transform: scale(1); opacity: .85; }
    50% { transform: scale(1.08); opacity: 1; }
}

.hero-orb-svg {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    filter: drop-shadow(0 0 18px rgba(48, 209, 88, .5));
}

.hero-orb-ring {
    fill: none;
    stroke-width: 1.2;
}

.hero-orb-ring1 {
    stroke: rgba(50, 210, 254, .35);
}

.hero-orb-ring2 {
    stroke: rgba(48, 209, 88, .3);
}

.hero-wifi-arc {
    fill: none;
    stroke: var(--green);
    stroke-linecap: round;
    stroke-width: 6;
    filter: drop-shadow(0 0 6px var(--green-glow));
}

.hero-wifi-arc1 { opacity: .55; }
.hero-wifi-arc2 { opacity: .8; }
.hero-wifi-arc3 { opacity: 1; }

.hero-wifi-dot {
    fill: var(--green);
    filter: drop-shadow(0 0 8px var(--green-glow));
}

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

@media (max-width: 420px) {
    .hero-orb {
        width: 30vw;
        height: 30vw;
    }
}

/* ====== ROUTER CONTROL BUTTON (Wi-Fi orb-এর নিচে) ======
   orb-টা একটু ছোট করা হয়েছে (hero-orb-sm) যাতে নতুন বাটন যোগ হলেও
   ডান পাশের কলাম আগের মতোই কমপ্যাক্ট/সুন্দর থাকে, সাইজ বড় না হয়। */
.hero-orb-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.hero-orb-sm {
    width: clamp(68px, 18vw, 138px);
    height: clamp(68px, 18vw, 138px);
}

@media (max-width: 420px) {
    .hero-orb-sm {
        width: 25vw;
        height: 25vw;
    }
}

.router-ctrl-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    background: rgba(50, 210, 254, .12);
    border: 1.5px solid rgba(50, 210, 254, .4);
    border-radius: 999px;
    padding: 5px 11px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 12px rgba(50, 210, 254, .15);
    transition: transform .2s ease, box-shadow .2s ease, border-color .3s;
    white-space: nowrap;
    position: relative;
}

/* বাটনটা চোখে একই সাইজে থাকবে, কিন্তু ট্যাপ/ক্লিক করার জায়গাটা এই
   অদৃশ্য (transparent) লেয়ারের মাধ্যমে চারদিকে সামান্য বড় করে দেওয়া
   হলো (~১০px), যাতে বাটনের ঠিক কিনারা বরাবর চাপ দিলেও প্রথমবারেই
   কাজ করে। এটা position:absolute + অদৃশ্য background — তাই আশেপাশের
   অন্য কোনো এলিমেন্টের লেআউট/স্টাইল/সাইজ পরিবর্তন হবে না, শুধু
   ক্লিক-এরিয়া বাড়ে। */
.router-ctrl-btn::before {
    content: '';
    position: absolute;
    inset: -10px;
    background: transparent;
}

.router-ctrl-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(50, 210, 254, .65);
    box-shadow: 0 8px 20px rgba(50, 210, 254, .25);
}

.router-ctrl-btn:active {
    transform: scale(.96);
}

.router-ctrl-ic {
    font-size: 12px;
    line-height: 1;
}

.router-ctrl-tx {
    color: var(--text);
    font-size: clamp(8.6px, 1.9vw, 10px);
    font-weight: 700;
    font-family: 'Hind Siliguri', sans-serif;
    letter-spacing: .1px;
}

@media (max-width: 340px) {
    .router-ctrl-tx {
        display: none;
    }
}

.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: var(--text);
    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: var(--text-sub);
    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: var(--text);
    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: var(--text);
    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: var(--text);
    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: var(--text);
    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;
    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 18px 46px 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;
    }

    .qlink-tile {
        flex: 1 1 calc(25% - 8px);
    }

    .qlink-list {
        flex: 1 1 calc(50% - 8px);
    }

    .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 ====== */
.qlink {
    animation: none;
}

.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;
}

.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: none;
    pointer-events: none;
    z-index: 0;
}

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

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

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

/* ====== SITE FOOTER BAR (persistent copyright) ======
   এখন body-র flex লেআউটের শেষ (অ-সঙ্কোচনযোগ্য) অংশ — .app-scroll-এর
   বাইরে, তাই position:fixed/translateZ hack ছাড়াই এটা সবসময় নিচে
   স্থির থাকে, স্ক্রল/বাউন্সে একদমই নড়ে না। */
:root {
    --footer-bar-h: 21px;
}

.site-footer-bar {
    flex-shrink: 0;
    width: 100%;
    height: var(--footer-bar-h);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(3, 12, 7, .82);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    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 11s 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: 5px;
    width: auto;
    line-height: 1;
    margin: 5px calc(clamp(16.2px, 4.7vw, 39.6px) * -1) 0;
    padding: 4px clamp(16.2px, 4.7vw, 39.6px) 4px clamp(12px, 3.5vw, 22px);
    overflow: hidden;
    background: rgba(9, 38, 48, .85);
    /* backdrop-filter blur সরিয়ে দেওয়া হয়েছে — banner-এর টেক্সট সবসময়
       স্ক্রল/এনিমেট হতে থাকে, তার সাথে blur মিলে প্রতি ফ্রেমেই ভারী রিপেইন্ট
       হচ্ছিল, ফলে পুরো অ্যাপ স্লো লাগছিল। solid রঙের (সায়ান-টিন্টেড)
       ব্যাকগ্রাউন্ড দিয়ে প্রায় একই লুক রাখা হয়েছে, কিন্তু কোনো রানটাইম
       পারফরম্যান্স খরচ ছাড়াই। */
    border-top: 1px solid rgba(50, 210, 254, .3);
    border-bottom: 1px solid rgba(50, 210, 254, .3);
}

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

.banner-icon {
    flex-shrink: 0;
    width: clamp(20px, 4vw, 24px);
    height: clamp(20px, 4vw, 24px);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(12px, 2.6vw, 14px);
    line-height: 1;
    background: rgba(50, 210, 254, .18);
    border: 1px solid rgba(50, 210, 254, .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;
    transform: translateX(var(--banner-start, 100%));
}

.banner-track span {
    color: #ffffff;
    font-family: 'Hind Siliguri', 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    white-space: pre;
}

/* লেখাটা পুরোপুরি ডান পাশের বাইরে থেকে শুরু হয়ে, পুরোপুরি বাম পাশের
   বাইরে গিয়ে সম্পূর্ণ শেষ হওয়ার পরেই (অদৃশ্য অবস্থায়) আবার রিস্টার্ট
   হয় — assets/js/main.js প্রতিবার লেখা বদলালে --banner-start ও
   --banner-end (পিক্সেল ভ্যালু) হিসাব করে বসিয়ে দেয়, তাই যেকোনো
   লম্বার লেখাতেও ঠিকভাবে কাজ করে। */
@keyframes bannerScroll {
    from {
        transform: translateX(var(--banner-start, 100%));
    }

    to {
        transform: translateX(var(--banner-end, -100%));
    }
}

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

/* ====== BOOT SPINNER ======
   পেজ ওপেন হলে সবচেয়ে আগে এটাই দেখা যায় (login-gate-এরও উপরে বসানো
   z-index দিয়ে) — যাতে আগে থেকে লগইন করা ইউজার পেজ খুললে এক মুহূর্তের
   জন্যও Login ফর্মের "ঝলক" দেখতে না পান। assets/js/main.js লগইন-স্ট্যাটাস
   ঠিক করার পর (কমপক্ষে ~০.৯ সেকেন্ড পর) এটা হাইড করে দেয়। */
.boot-spinner {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #04150a 0%, #030d07 100%);
}

.boot-spinner.hide-empty {
    display: none !important;
}

.boot-spinner-ring {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(48, 209, 88, .22);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: bootSpinnerSpin .75s linear infinite;
}

@keyframes bootSpinnerSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .boot-spinner-ring {
        animation-duration: 1.5s;
    }
}

/* ====== LOGIN পপআপ ======
   হেডারের 🔐 Login বাটনে ক্লিক করলে এই পপআপ খোলে — Logout কনফার্ম
   মোডালের (.logout-modal) মতোই ছোট, কম্প্যাক্ট কার্ড, ঝাপসা (dim)
   ব্যাকড্রপের উপর মাঝখানে। পুরো স্ক্রিন ঢাকা ব্র্যান্ডেড পেজ না —
   বাইরে ক্লিক করলে বা Escape চাপলে বন্ধ হয়ে যায়। assets/js/main.js
   এই লজিক চালায়। */
.login-gate {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(4, 21, 10, .35);
}

.login-gate.hide-empty {
    display: none !important;
}

.login-gate .login-card {
    background: #0a190f;
}

.login-icon {
    font-size: 60px;
    margin-bottom: 14px;
    filter: drop-shadow(0 0 22px rgba(48, 209, 88, .5));
}

.login-brand {
    color: var(--green);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.4px;
    text-shadow: 0 0 22px var(--green-glow);
    margin-bottom: 8px;
}

.login-sub {
    color: var(--text-dim);
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 32px;
}

.login-input {
    width: 100%;
    padding: 16px 18px;
    margin-bottom: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 15px;
    font-family: 'Hind Siliguri', sans-serif;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.login-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(48, 209, 88, .15);
}

.login-input::placeholder {
    color: rgba(255, 255, 255, .35);
}

.login-btn {
    width: 100%;
    padding: 16px 18px;
    margin-top: 6px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--green), #22b04c);
    color: #04150a;
    font-size: 15.5px;
    font-weight: 800;
    font-family: 'Hind Siliguri', sans-serif;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(48, 209, 88, .3);
    transition: transform .15s ease;
}

.login-btn:active {
    transform: scale(.98);
    opacity: .9;
}

.login-error {
    color: #ff6b6b;
    font-size: 12.5px;
    font-weight: 700;
    margin: -4px 0 14px;
    line-height: 1.4;
}

/* Logout কনফার্ম মোডালের ছোট কার্ড — এটা এখনও একটা compact পপ-আপ হিসেবেই
   থাকবে (পুরো স্ক্রিন না), তাই এর নিজস্ব বক্স/বর্ডার স্টাইল রাখা হলো */
.login-card {
    width: 100%;
    max-width: 360px;
    background: rgba(10, 25, 15, .9);
    border: 1px solid rgba(48, 209, 88, .3);
    border-radius: 22px;
    padding: 32px 26px;
    text-align: center;
    box-shadow: 0 0 0 1px rgba(48, 209, 88, .08) inset, 0 18px 46px rgba(0, 0, 0, .55);
}

.login-title {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 6px;
}

/* ====== WELCOME CARD ======
   লগইন করার পর কাস্টমারের User Name, ID, Phone, Speed ও G কলামের
   স্ট্যাটাস টেক্সট এই কার্ডে দেখায়। লগইন করা না থাকলে hide-empty
   ক্লাসের কারণে হাইড থাকে।
   গঠন: উপরের সারি (আইকন + WELCOME লেবেল + বড় হেডলাইন স্টাইলে নাম, ডান
   পাশে G কলামের স্ট্যাটাস টেক্সট) — মাঝে একটা পাতলা ডিভাইডার লাইন —
   নিচের সারি (ID / Phone / Speed, তিনটা বক্স পাশাপাশি, মাঝে ছোট ডট
   সেপারেটর)। */
.welcome-card {
    margin: 0 0 clamp(10px, 2vw, 14px);
    padding: clamp(8px, 1.8vw, 11px) clamp(10px, 2.2vw, 14px);
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(48, 209, 88, .1), rgba(50, 210, 254, .05));
    border: 1px solid rgba(48, 209, 88, .3);
    box-shadow: 0 0 24px rgba(48, 209, 88, .08);
}

/* ---- উপরের সারি: আইকন + লেবেল/নাম + ডান পাশে স্ট্যাটাস টেক্সট ---- */
.wc-top {
    display: flex;
    align-items: center;
    gap: clamp(9px, 2.2vw, 13px);
}

.wc-icon {
    flex-shrink: 0;
    width: clamp(30px, 6vw, 38px);
    height: clamp(30px, 6vw, 38px);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 4vw, 22px);
    background: rgba(48, 209, 88, .15);
    border: 1px solid rgba(48, 209, 88, .35);
}

.wc-title {
    flex: 1 1 auto;
    min-width: 0;
}

.wc-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--green);
    font-size: clamp(9.5px, 2.2vw, 11px);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.wc-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
    flex-shrink: 0;
}

.wc-name {
    margin-top: 2px;
    color: var(--green);
    text-shadow: 0 0 10px var(--green-glow);
    font-size: clamp(15px, 3.6vw, 20px);
    font-weight: 800;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* G কলামের স্ট্যাটাস/কাস্টমার-স্ট্যাট টেক্সট — কার্ডের ডান পাশের খালি
   জায়গায় বসে, বাংলা/ইংরেজি/নাম্বার যাই থাকুক সুন্দরভাবে ফিট করে দেখায়।
   G কলাম খালি থাকলে hide-empty দিয়ে পুরো জায়গাটাই হাইড থাকে। */
.wc-stat {
    flex-shrink: 0;
    max-width: 42%;
    padding: clamp(5px, 1.4vw, 7px) clamp(9px, 2.2vw, 13px);
    border-radius: 30px;
    background: rgba(48, 209, 88, .12);
    border: 1px solid rgba(48, 209, 88, .3);
    color: var(--green);
    font-size: clamp(9.5px, 2.4vw, 11.5px);
    font-weight: 700;
    text-align: right;
    text-shadow: 0 0 14px var(--green-glow);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- মাঝের পাতলা ডিভাইডার লাইন ---- */
.wc-divider {
    height: 1px;
    margin: clamp(6px, 1.6vw, 9px) 0 clamp(6px, 1.4vw, 8px);
    background: linear-gradient(90deg, transparent, rgba(48, 209, 88, .25) 15%, rgba(48, 209, 88, .25) 85%, transparent);
}

/* ---- নিচের সারি: ID / Phone / Speed — ছোট সাইজে, সবসময় এক লাইনে ---- */
.wc-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: clamp(3px, 1vw, 6px);
    width: 100%;
    overflow: hidden;
}

.wc-item {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: clamp(3px, .9vw, 5px) clamp(6px, 1.6vw, 9px);
    border-radius: 30px;
    background: rgba(10, 25, 15, .5);
    border: 1px solid rgba(48, 209, 88, .22);
    overflow: hidden;
}

.wc-item-ic {
    flex-shrink: 0;
    font-size: clamp(8px, 2vw, 10px);
}

.wc-item-tx {
    min-width: 0;
    color: var(--text-dim);
    font-size: clamp(6.8px, 2vw, 8.5px);
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc-item-tx b {
    color: var(--green);
    font-weight: 800;
    text-transform: none;
    text-shadow: 0 0 10px var(--green-glow);
}

/* ID / Phone / Speed — সবগুলো একই সবুজ রঙে */
.wc-item.wc-id,
.wc-item.wc-phone,
.wc-item.wc-speed {
    border-color: rgba(48, 209, 88, .32);
}

/* ====== USER BANNER (H কলাম) ======
   Welcome card-এরই ভেতরের শেষ একটা row (ID/Phone/Speed row-এর মতোই) —
   নিজস্ব কোনো ব্যাকগ্রাউন্ড/বর্ডার/শ্যাডো নেই, তাই আলাদা বক্স মনে হয়
   না; উপরে শুধু কার্ডের নিজস্ব .wc-divider লাইন দিয়ে আলাদা করা। H
   কলামে লেখা থাকলে কার্ড এমনিতেই লম্বা হয়ে যায়, খালি থাকলে
   hide-empty ক্লাসের কারণে এই পুরো row-টাই (এর উপরের divider সহ) বাদ
   পড়ে — কার্ড তখন আগের মতোই ছোট থাকে (main.js showWelcomeCard()
   হ্যান্ডেল করে)। উপরের হেডার নিউজ-টিকারের (.banner-bar) মতোই টেক্সট
   ডান পাশ থেকে ঢুকে বাম পাশে বেরিয়ে যায়, তাই লম্বা টেক্সটেও row-এর
   উচ্চতা বাড়ে না। */
.wc-user-banner-row {
    display: flex;
    align-items: center;
    gap: clamp(7px, 1.8vw, 10px);
    overflow: hidden;
}

.wc-user-banner-ic {
    flex-shrink: 0;
    font-size: clamp(13px, 3vw, 15px);
}

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

.wc-user-banner-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: bannerScroll linear infinite;
    animation-duration: 18s;
    will-change: transform;
    transform: translateX(var(--banner-start, 100%));
}

.wc-user-banner-track span {
    color: var(--green);
    text-shadow: 0 0 10px var(--green-glow);
    font-family: 'Hind Siliguri', 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(11px, 2.6vw, 13px);
    line-height: 1;
    white-space: pre;
}

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

/* welcome card-কে ক্লিকযোগ্য বাটনের মতো দেখানো — ক্লিক করলে নিচের
   ডিটেইল মোডাল খোলে (main.js হ্যান্ডেল করে) */
.welcome-card {
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease;
}

.welcome-card:active {
    transform: scale(.98);
}

/* ====== WELCOME DETAILS MODAL ======
   Welcome card-এ ক্লিক করলে খোলে — বড় করে, কোনো টেক্সট না কেটে
   User Name, Status, ID, Phone, Speed দেখায়। hide-empty থাকলে হাইড। */
.wc-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 999997;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(4, 21, 10, .35);
}

.wc-detail-modal.hide-empty {
    display: none !important;
}

.wc-detail-card {
    position: relative;
    max-width: 340px;
    padding: 30px 24px 24px;
    background: #0a190f;
}

.wc-detail-icon {
    font-size: 30px;
    margin-bottom: 4px;
}

.wc-detail-label {
    color: var(--green);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.wc-detail-name {
    color: var(--green);
    text-shadow: 0 0 10px var(--green-glow);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
    margin-top: 4px;
    word-break: break-word;
    white-space: normal;
}

.wc-detail-stat {
    margin-top: 8px;
    color: var(--green);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    word-break: break-word;
    white-space: normal;
}

.wc-detail-divider {
    height: 1px;
    margin: 16px 0 14px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
}

.wc-detail-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wc-detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 12px;
    background: rgba(10, 25, 15, .5);
    border: 1px solid rgba(48, 209, 88, .32);
    text-align: left;
}

/* ট্যাপ করলে কপি হয় এমন row (Customer ID / Phone) — cursor আর হালকা
   active/copied ফিডব্যাক, আলাদা কোনো বাটন নেই */
.wc-copyable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
}

.wc-copyable:active {
    transform: scale(.97);
}

.wc-copyable.wc-copied {
    background: rgba(48, 209, 88, .18);
    border-color: rgba(48, 209, 88, .6);
}

.wc-copyable.wc-copied .wc-detail-row-val {
    color: var(--green);
}

.wc-detail-row-ic {
    font-size: 15px;
}

.wc-detail-row-lb {
    flex: 1 1 auto;
    color: var(--text-dim);
    font-size: 11.5px;
    font-weight: 600;
}

.wc-detail-row-val {
    color: var(--green);
    text-shadow: 0 0 10px var(--green-glow);
    font-size: 13.5px;
    font-weight: 800;
    text-align: right;
    word-break: break-word;
}

/* দুইটা বক্সের মাঝে ছোট গোল ডট সেপারেটর */
.wc-sep {
    display: none;
}

@media (max-width: 380px) {
    .wc-sep { display: none; }
}

/* ====== গ্লোবাল ব্লার সরানো হয়েছে ======
   .site-header-sticky-এর লাগাতার (infinite) গ্রেডিয়েন্ট অ্যানিমেশন,
   Welcome Card-এর ভেতরের স্ক্রলিং ব্যানার, আর .glass-card-এর ভেতরের
   পালস-অ্যানিমেশন ওয়াইফাই আইকন — এই তিনটাই প্রতি ফ্রেমে বদলায়। এমন
   কোনো এলিমেন্টে backdrop-filter blur থাকলে ব্রাউজারকে প্রতি ফ্রেমেই
   পুরো ব্লার-লেয়ারটা আবার হিসাব করতে হয়, ফলে GPU-তে অনেক চাপ পড়ে
   ফোন গরম ও অ্যাপ স্লো হয়ে যাচ্ছিল। তাই ব্লার ফিচারটা সম্পূর্ণ বাদ
   দেওয়া হলো (banner-bar-এ আগে একই কারণে এটা সরানো হয়েছিল, সেই একই
   নীতি এখানেও প্রযোজ্য)। */

/* ====== ফ্ল্যাট থিম: সাদা/কালো ব্যাকগ্রাউন্ড (ইউজারের অনুরোধে) ======
   এখান থেকে নিচের সবগুলো রুল ফাইলের একদম শেষে থাকায় উপরের সব
   !important রুলকে override করে। কোনো ছবি/গ্র্যাডিয়েন্ট ব্যাকগ্রাউন্ড
   লেয়ার নেই — পেজের ব্যাকগ্রাউন্ড ইউজারের ফোনের সিস্টেম থিম
   (prefers-color-scheme) অনুযায়ী পুরো সাদা অথবা পুরো কালো হবে,
   এবং টেক্সট তার বিপরীত রঙে (কালো/সাদা) বসবে যাতে স্পষ্ট দেখা যায়। */
:root {
    --bg-page: #000000;
    --border-soft: rgba(255, 255, 255, .15);
    --shadow-soft: rgba(255, 255, 255, .12);
    --glass-bg: rgba(255, 255, 255, .08);
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-page: #ffffff;
        --text: #000000;
        --text-sub: rgba(0, 0, 0, .6);
        --text-dim: rgba(0, 0, 0, .35);
        --border-soft: rgba(0, 0, 0, .15);
        --shadow-soft: rgba(0, 0, 0, .12);
        --glass-bg: rgba(0, 0, 0, .06);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-page: #000000;
        --text: #ffffff;
        --text-sub: rgba(255, 255, 255, .6);
        --text-dim: rgba(255, 255, 255, .35);
        --border-soft: rgba(255, 255, 255, .15);
        --shadow-soft: rgba(255, 255, 255, .12);
        --glass-bg: rgba(255, 255, 255, .08);
    }
}

/* ====== ম্যানুয়াল টগল (ইউজার হেডারের বাটনে ক্লিক করলে) ======
   ডিফল্টে উপরের prefers-color-scheme অনুযায়ী অটো চলে। ইউজার হেডারের
   ☀️/🌙 বাটনে ক্লিক করলে main.js html ট্যাগে এই ক্লাস দুটোর একটা বসায়
   (আর localStorage-এ সেভ রাখে, পরের বার খুললেও মনে থাকে) — html+class
   হওয়ায় স্পেসিফিসিটি বেশি, তাই ফোনের সিস্টেম থিম যা-ই থাকুক, এটাই জিতবে। */
html.theme-force-light:root {
    --bg-page: #ffffff;
    --text: #000000;
    --text-sub: rgba(0, 0, 0, .6);
    --text-dim: rgba(0, 0, 0, .35);
    --border-soft: rgba(0, 0, 0, .15);
    --shadow-soft: rgba(0, 0, 0, .12);
    --glass-bg: rgba(0, 0, 0, .06);
}

html.theme-force-dark:root {
    --bg-page: #000000;
    --text: #ffffff;
    --text-sub: rgba(255, 255, 255, .6);
    --text-dim: rgba(255, 255, 255, .35);
    --border-soft: rgba(255, 255, 255, .15);
    --shadow-soft: rgba(255, 255, 255, .12);
    --glass-bg: rgba(255, 255, 255, .08);
}

html,
body {
    background: var(--bg-page) !important;
}

/* ব্যাকগ্রাউন্ড ছবি ও গ্র্যাডিয়েন্ট গ্লো লেয়ার সম্পূর্ণ বাদ */
.bg-anim,
.orb1,
.orb2 {
    display: none !important;
}

/* মূল কার্ড ও প্যানেলগুলো — ফ্ল্যাট সাদা/কালোর বদলে এখন হালকা গ্লাসি
   ব্লার লুক (ইউজারের অনুরোধে "সবকিছুতে" ব্লার)। এই এলিমেন্টগুলো নিজে
   কখনো নড়ে/অ্যানিমেট হয় না (শুধু স্ক্রল করলে reveal হয়, তারপর স্থির) —
   তাই ব্লার থাকলেও প্রতি ফ্রেমে রিক্যালকুলেট হওয়ার সমস্যা হবে না, স্লো
   হবে না। */
.glass-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: 0 4px 16px var(--shadow-soft) !important;
}

.glass-card::before {
    background: transparent !important;
}

.qlink,
.qlink:hover,
.cd,
.cta-panel,
.fcd,
.pkg-row,
.pkg-row.popular {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-color: var(--border-soft) !important;
    box-shadow: 0 3px 12px var(--shadow-soft) !important;
}

.hb,
.fb {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* ====== হেডার + কপিরাইট ফুটার — একই ফ্ল্যাট সাদা/কালো থিমে (ইউজারের অনুরোধে) ======
   উপরের ব্লকের মতোই --bg-page/--text/--border-soft ভ্যারিয়েবল ব্যবহার করে, তাই
   ফোনের সিস্টেম থিম (বা ম্যানুয়াল টগল) অনুযায়ী পুরো পেজের সাথে হেডার/ফুটারও
   এক রঙেই বদলায়। বাটন/আইকনগুলো একদম ফ্ল্যাট/অদৃশ্য না লাগার জন্য হালকা
   বর্ডার + শ্যাডো রাখা হয়েছে (--shadow-soft), যাতে সাদা বা কালো — দুই
   ব্যাকগ্রাউন্ডেই স্পষ্ট, সুন্দর দেখায়। */
.site-header-sticky {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border-bottom-color: var(--border-soft) !important;
    box-shadow: 0 4px 14px var(--shadow-soft) !important;
}

.ln,
.ln span,
.li-accent {
    color: var(--text) !important;
    text-shadow: none !important;
}

.ls {
    color: var(--text-dim) !important;
}

.li {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border-color: var(--border-soft) !important;
    box-shadow: 0 2px 10px var(--shadow-soft), inset 0 1px 0 var(--shadow-soft) !important;
    color: var(--text) !important;
}

.app-btn-header,
.login-btn-header,
.logout-btn-header,
.theme-toggle-btn {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border-color: var(--border-soft) !important;
    color: var(--text) !important;
    box-shadow: 0 2px 10px var(--shadow-soft), inset 0 1px 0 var(--shadow-soft) !important;
}

.app-btn-header::before {
    display: none !important;
}

.app-btn-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px var(--shadow-soft), inset 0 1px 0 var(--shadow-soft) !important;
}

/* ব্যানার বার-এও এখন ব্লার (আগে পারফরম্যান্সের কারণে বাদ দেওয়া হয়েছিল,
   কিন্তু এই বারটা নিজে নড়ে না — ভেতরের টেক্সট (.banner-track) আলাদা
   লেয়ারে স্ক্রল করে, বারের নিজের ব্যাকগ্রাউন্ড ব্লার এতে প্রভাবিত হয় না,
   তাই স্লো হওয়ার ঝুঁকি ছাড়াই দেওয়া গেলো) */
.banner-bar {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-top-color: var(--border-soft) !important;
    border-bottom-color: var(--border-soft) !important;
    color: var(--text) !important;
}

/* আসল টেক্সট এতদিন সাদা রঙে (#fff) ফিক্সড ছিল বলে সাদা মোডে ব্যানারের
   লেখা দেখা যাচ্ছিল না (সাদার উপর সাদা) — থিম ভ্যারিয়েবলে বদলে দেওয়া হলো */
.banner-track span {
    color: var(--text) !important;
}

.banner-icon {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border-color: var(--border-soft) !important;
    color: var(--text) !important;
    box-shadow: 0 2px 8px var(--shadow-soft) !important;
}

.site-footer-bar {
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border-top-color: var(--border-soft) !important;
    color: var(--text-dim) !important;
    box-shadow: 0 -4px 14px var(--shadow-soft) !important;
}

.sfb-name {
    background: none !important;
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
    animation: none !important;
    font-weight: 700 !important;
}

/* ====== থিম টগল বাটন (☀️/🌙) — হেডারে, App Download বাটনের পাশে ====== */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(26px, 6vw, 30px);
    height: clamp(26px, 6vw, 30px);
    flex-shrink: 0;
    border-radius: 50%;
    font-size: clamp(11px, 2.6vw, 13px);
    line-height: 1;
    cursor: pointer;
    transition: transform .2s ease;
}

.theme-toggle-btn:active {
    transform: scale(.9);
}