:root {
    --bg: #0D1117; 
    --lighter-bg: #161B22; 
    --surface: #161B22; 
    --surface3: #2A2F3A;
    --border: #2A2F3A; 
    --border-bright: rgba(245, 188, 73, 0.45); 
    --text: #F8F6F2; 
    --muted: #B8C2D1; 
    --primary: #F5BC49; 
    --accent: #E67E22; 
    --gold: #FFC857; 
    --coupon: #4ade80; 
    --radius: 20px; 
    --radius-sm: 12px;
    --nav-h: 65px; 
    --notice-h: 36px;
    --whatsapp: #25d366; 
    --messenger: #0084ff; 
    --phone: #F5BC49;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;background:var(--bg)}
body{font-family:'Hind Siliguri',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;width:100%;min-height:100vh;padding-bottom:calc(90px + env(safe-area-inset-bottom));max-width:1800px;margin:0 auto}
button,select,input,textarea{font-family:inherit}

/* কীবোর্ড দিয়ে Tab চেপে নেভিগেট করার সময় কোন এলিমেন্ট ফোকাসে আছে তা দেখানোর জন্য —
   :focus-visible শুধু কীবোর্ড ফোকাসেই দেখায়, মাউস ক্লিকে দেখায় না, তাই বিদ্যমান কোনো hover/focus ডিজাইনের সাথে সাংঘর্ষিক হয় না */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.logo-img { width: 100%; height: 100%; object-fit: contain; }

.notice-bar{background:linear-gradient(90deg,#0D1117,#161B22);height:var(--notice-h);overflow:hidden;position:sticky;top:0;z-index:1000;display:flex;align-items:center;padding-top:env(safe-area-inset-top)}
.ticker-inner{display:inline-flex;gap:72px;padding-left:100%;animation:ticker 35s linear infinite;white-space:nowrap}
.ticker-inner span{font-size:13px;font-weight:600;color:#F8F6F2;display:flex;align-items:center;gap:6px}
.highlight-num{background:rgba(248, 246, 242, 0.18);color:#F8F6F2;font-weight:800;font-size:15px;padding:2px 8px;border-radius:6px;margin:0 2px}

header{background:rgba(13, 17, 23, 0.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border);height:var(--nav-h);padding:0 16px;position:sticky;top:var(--notice-h);z-index:999;display:flex;align-items:center;justify-content:space-between;gap:8px}
.logo-wrap{display:flex;align-items:center;gap:10px;cursor:pointer}
.logo-ring{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-size:18px; transition: transform 0.6s ease; overflow:hidden;}
.logo-wrap:hover .logo-ring { transform: rotate(180deg) scale(1.1); }
.logo-text{font-size:18px;font-weight:800;background:linear-gradient(90deg,var(--primary),#F8F6F2,var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.header-right{display:flex;align-items:center;gap:6px}

/* --- Hero Section & Glass Container Layout Correction --- */
.hero {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: radial-gradient(circle at 15% 50%, rgba(244, 183, 61, 0.12) 0%, #0D1117 85%) !important;
    z-index: 5 !important;
    padding: 40px 0 40px 4% !important; 
    min-height: 85vh !important;
    perspective: 1000px;
}

.hero-glass-container {
    position: relative !important;
    z-index: 10 !important;
    background: rgba(13, 17, 23, 0.35) !important;
    backdrop-filter: blur(14px) -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(245, 188, 73, 0.2) !important;
    padding: 36px 28px !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 
                inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    width: 38% !important;
    max-width: 420px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    transform-style: preserve-3d !important;
    will-change: transform;
}