/* ==========================================================================
   WBMCZ — Premium Navy & Gold Design System
   Self-contained: the landing page does NOT depend on Tailwind arbitrary
   values any more. Everything below is plain CSS so it renders identically
   even if the Tailwind CDN is slow, blocked or cached.
   ========================================================================== */

:root {
    --navy-900:#050D1F; --navy-800:#0A1733; --navy-700:#0F2149;
    --navy-600:#142C5E; --navy-500:#1B3A78; --navy-400:#24509E;
    --gold-600:#B8952B; --gold-500:#D4AF37; --gold-400:#E4C662;
    --gold-300:#F0D98C; --gold-200:#F6E7A8;

    --ink:#0B1220; --body:#5A6478; --muted:#8A93A6;
    --surface:#FFFFFF; --surface-2:#F7F8FB;

    --grad-gold: linear-gradient(135deg,#B8952B 0%,#D4AF37 25%,#F6E7A8 50%,#D4AF37 75%,#B8952B 100%);
    --grad-navy: linear-gradient(135deg,#0A1733 0%,#142C5E 55%,#0F2149 100%);

    --sh-sm:0 2px 10px rgba(10,23,51,.06);
    --sh-md:0 12px 30px -10px rgba(10,23,51,.18);
    --sh-lg:0 30px 60px -20px rgba(10,23,51,.35);
    --sh-gold:0 16px 40px -12px rgba(212,175,55,.45);

    --hdr-h:80px;
}

/* ---------- Reset / base ------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:100px; }
body{
    margin:0;
    font-family:'Plus Jakarta Sans','Hind Siliguri','Noto Sans Devanagari',system-ui,sans-serif;
    color:var(--ink); background:#fff; overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
button{ font:inherit; }
*{ -webkit-tap-highlight-color:transparent; }

.wrap{ width:100%; max-width:1240px; margin:0 auto; padding:0 20px; }

/* ---------- Type helpers ------------------------------------------------- */
.font-display{ font-family:'Playfair Display','Plus Jakarta Sans',serif; }

.gold-text{
    background:var(--grad-gold); -webkit-background-clip:text; background-clip:text;
    color:transparent; background-size:200% auto; animation:goldShift 6s linear infinite;
}
@keyframes goldShift{ to{ background-position:200% center; } }

.gold-line{ height:3px; width:84px; border-radius:99px; background:var(--grad-gold); background-size:200% auto; animation:goldShift 4s linear infinite; }
.gold-line.sm{ width:40px; height:2px; }
.gold-line.center{ margin-left:auto; margin-right:auto; }

.divider-gold{ height:1px; width:100%; background:linear-gradient(90deg,transparent,rgba(212,175,55,.55),transparent); }

.badge-gold{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.42rem 1rem; border-radius:99px;
    font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:var(--gold-300); background:rgba(212,175,55,.10); border:1px solid rgba(212,175,55,.34);
}
.badge-gold.dark{ color:var(--gold-600); background:rgba(212,175,55,.12); border-color:rgba(212,175,55,.42); }
.badge-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-400); }

/* ---------- Buttons ------------------------------------------------------ */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
    padding:.9rem 1.6rem; border-radius:14px; border:0; cursor:pointer;
    font-weight:800; font-size:.94rem; letter-spacing:.01em; line-height:1;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background-position .6s ease, background-color .35s ease, color .35s ease, border-color .35s ease;
}
.btn i{ font-size:.85em; }
.btn-sm{ padding:.62rem 1.1rem; font-size:.82rem; border-radius:11px; }
.btn-lg{ padding:1.05rem 2.2rem; font-size:1rem; }
.btn-block{ width:100%; }

.btn-gold{
    position:relative; overflow:hidden;
    background:var(--grad-gold); background-size:200% auto;
    color:#10203F; box-shadow:var(--sh-gold);
}
.btn-gold:hover{ transform:translateY(-3px); background-position:right center; box-shadow:0 22px 50px -12px rgba(212,175,55,.6); }
.btn-gold:active{ transform:translateY(-1px); }
.btn-gold::after{
    content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
    transform:skewX(-22deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
}
.btn-gold:hover::after{ animation:sheen .9s ease; }
@keyframes sheen{ to{ left:130%; } }

.btn-ghost{
    border:1.5px solid rgba(212,175,55,.55); color:var(--gold-300);
    background:rgba(255,255,255,.05); backdrop-filter:blur(8px);
}
.btn-ghost:hover{ background:rgba(212,175,55,.15); border-color:var(--gold-400); color:#fff; transform:translateY(-3px); }

.btn-outline-navy{ border:1.5px solid rgba(10,23,51,.16); color:var(--navy-800); background:#fff; }
.btn-outline-navy:hover{ border-color:var(--gold-500); background:rgba(212,175,55,.08); transform:translateY(-3px); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.topbar{ position:relative; background:var(--navy-900); color:#fff; overflow:hidden; }
.topbar-in{ display:flex; align-items:center; justify-content:center; gap:14px; padding:9px 0; }
.topbar-msg{ display:none; align-items:center; gap:9px; font-size:13px; font-weight:500; color:rgba(240,217,140,.9); }
.topbar-msg i{ color:var(--gold-400); }

.site-header{
    position:sticky; top:0; z-index:60;
    background:rgba(10,23,51,.97); backdrop-filter:blur(12px);
    transition:background .45s ease, box-shadow .45s ease;
}
.site-header.scrolled{ background:rgba(5,13,31,.95); box-shadow:0 14px 34px -20px rgba(0,0,0,.95); }
.hdr-in{ display:flex; align-items:center; justify-content:space-between; gap:14px; height:68px; }

.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand-logo-wrap{ position:relative; display:block; }
.brand-glow{ position:absolute; inset:-5px; border-radius:14px; background:rgba(212,175,55,.28); filter:blur(10px); opacity:0; transition:opacity .5s ease; }
.brand:hover .brand-glow{ opacity:1; }
.brand-logo{ position:relative; height:42px; width:auto; border-radius:10px; background:#fff; padding:4px; box-shadow:0 8px 20px -8px rgba(0,0,0,.6); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.brand:hover .brand-logo{ transform:scale(1.05); }
.brand-name{ display:block; font-family:'Playfair Display',serif; font-size:18px; font-weight:800; color:#fff; letter-spacing:.02em; line-height:1.15; }
.brand-tag{ display:none; font-size:9.5px; text-transform:uppercase; letter-spacing:.2em; color:rgba(228,198,98,.9); font-weight:700; margin-top:2px; }

.hdr-nav{ display:none; align-items:center; gap:30px; }
.nav-link{ position:relative; padding-bottom:4px; font-size:14px; font-weight:600; color:rgba(255,255,255,.78); transition:color .3s ease; white-space:nowrap; }
.nav-link:hover{ color:var(--gold-300); }
.nav-link.active{ color:var(--gold-300); }
.nav-link::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:0; border-radius:2px; background:var(--grad-gold); transition:width .38s cubic-bezier(.2,.8,.2,1); }
.nav-link:hover::after,.nav-link.active::after{ width:100%; }

.hdr-right{ display:flex; align-items:center; gap:9px; }
.hdr-social{ display:none; align-items:center; gap:4px; }
.ico-btn{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); font-size:13px; transition:all .3s ease; }
.ico-btn:hover{ color:var(--gold-300); background:rgba(255,255,255,.1); }

/* Language switcher */
.lang{ position:relative; }
.lang-btn{
    display:flex; align-items:center; gap:8px; padding:8px 10px 8px 10px;
    border-radius:12px; border:1px solid rgba(212,175,55,.35);
    background:rgba(255,255,255,.06); color:#fff; cursor:pointer; transition:all .3s ease;
}
.lang-btn:hover{ background:rgba(212,175,55,.15); border-color:rgba(212,175,55,.7); }
.lang-code{
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:20px; border-radius:5px; flex-shrink:0;
    background:var(--grad-gold); color:#10203F;
    font-size:10px; font-weight:900; letter-spacing:.03em;
}
.lang-name{ display:none; font-size:13px; font-weight:700; color:var(--gold-200); }
.lang-caret{ font-size:9px; color:var(--gold-400); transition:transform .3s ease; }
.lang-btn[aria-expanded="true"] .lang-caret{ transform:rotate(180deg); }

.lang-menu{
    position:absolute; right:0; top:calc(100% + 8px); width:230px; z-index:80;
    border-radius:16px; overflow:hidden;
    background:rgba(10,23,51,.985); border:1px solid rgba(212,175,55,.28);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.9); backdrop-filter:blur(16px);
    transform-origin:top right; opacity:0; visibility:hidden; transform:translateY(-8px) scale(.96);
    transition:opacity .26s ease, transform .26s cubic-bezier(.2,.8,.2,1), visibility .26s;
}
.lang-menu.open{ opacity:1; visibility:visible; transform:none; }
.lang-menu-t{ padding:12px 16px 8px; font-size:10px; text-transform:uppercase; letter-spacing:.2em; color:rgba(228,198,98,.8); font-weight:800; margin:0; }
.lang-item{ display:flex; align-items:center; gap:12px; padding:12px 16px; font-size:14px; color:rgba(255,255,255,.8); transition:background .25s ease,color .25s ease; }
.lang-item:hover{ background:rgba(255,255,255,.08); color:var(--gold-300); }
.lang-item.is-active{ background:rgba(212,175,55,.15); color:var(--gold-300); font-weight:700; }
.lang-item span.f{ flex:1; }
.lang-item i.chk{ font-size:11px; color:var(--gold-400); }

.hdr-cta{ display:none; }
.burger{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:12px; flex-shrink:0;
    border:1px solid rgba(212,175,55,.35); background:rgba(255,255,255,.06);
    color:var(--gold-300); cursor:pointer; transition:all .3s ease;
}
.burger:hover{ background:rgba(212,175,55,.15); }

/* Drawer */
.drawer-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); z-index:90; opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease; }
.drawer-backdrop.open{ opacity:1; visibility:visible; }
.drawer{
    position:fixed; top:0; left:0; height:100%; width:86%; max-width:330px; z-index:100;
    background:var(--grad-navy); border-right:1px solid rgba(212,175,55,.25);
    box-shadow:20px 0 60px -20px rgba(0,0,0,.8); overflow-y:auto;
    transform:translateX(-100%); transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.drawer.open{ transform:none; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; height:68px; padding:0 18px; border-bottom:1px solid rgba(212,175,55,.2); }
.drawer-head .brand-name{ font-size:17px; }
.drawer-close{ width:36px; height:36px; border-radius:10px; border:0; background:transparent; color:var(--gold-300); cursor:pointer; font-size:16px; transition:background .3s ease; }
.drawer-close:hover{ background:rgba(255,255,255,.1); }
.drawer-nav{ display:flex; flex-direction:column; gap:2px; padding:18px 14px; }
.drawer-nav a{ display:flex; align-items:center; gap:13px; padding:12px; border-radius:12px; color:rgba(255,255,255,.85); font-weight:600; font-size:15px; transition:background .3s ease,color .3s ease; }
.drawer-nav a:hover{ background:rgba(212,175,55,.12); color:var(--gold-300); }
.drawer-nav a i{ width:20px; text-align:center; font-size:14px; color:rgba(228,198,98,.8); }
.drawer-sec{ padding:0 14px 16px; }
.drawer-label{ font-size:10px; text-transform:uppercase; letter-spacing:.2em; color:rgba(228,198,98,.8); font-weight:800; margin:0 0 10px 4px; }
.drawer-langs{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.drawer-lang{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:11px 4px; border-radius:12px; border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.7); font-size:11px; font-weight:700; transition:all .3s ease; }
.drawer-lang:hover{ border-color:rgba(212,175,55,.6); color:var(--gold-300); }
.drawer-lang.is-active{ border-color:var(--gold-500); background:rgba(212,175,55,.18); color:var(--gold-300); }
.drawer-actions{ display:flex; flex-direction:column; gap:10px; padding:0 14px 20px; }
.drawer-social{ display:flex; gap:12px; padding:0 14px 30px; }
.drawer-social a{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.7); font-size:14px; transition:all .3s ease; }
.drawer-social a:hover{ color:var(--gold-300); border-color:rgba(212,175,55,.6); }

#scrollProgress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--grad-gold); z-index:200; transition:width .1s linear; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; background:var(--navy-900); overflow:hidden; }
.hero .swiper{ height:520px; }
.hero .swiper-slide{ position:relative; overflow:hidden; }
.hero-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-veil-1{ position:absolute; inset:0; background:linear-gradient(100deg,rgba(5,13,31,.96) 0%,rgba(10,23,51,.86) 42%,rgba(15,33,73,.55) 72%,rgba(5,13,31,.72) 100%); }
.hero-veil-2{ position:absolute; inset:0; background:radial-gradient(ellipse at 20% 100%, rgba(212,175,55,.20), transparent 55%); }
.hero-body{ position:relative; z-index:3; height:100%; display:flex; align-items:center; }
.hero-inner{ max-width:820px; }
.hero-title{ font-family:'Playfair Display',serif; font-size:2rem; line-height:1.16; font-weight:800; color:#fff; margin:20px 0 16px; }
.hero-sub{ font-size:15px; line-height:1.75; color:rgba(255,255,255,.75); max-width:620px; margin:0 0 30px; }
.hero-actions{ display:flex; flex-direction:column; gap:12px; }
.hero-trust{ display:none; align-items:center; gap:22px; margin-top:38px; }
.hero-trust span{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:rgba(255,255,255,.65); }
.hero-trust i{ color:var(--gold-400); }
.hero-trust .sep{ width:1px; height:16px; background:rgba(255,255,255,.2); padding:0; }
.hero-scroll{ display:none; position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:5; flex-direction:column; align-items:center; gap:6px; color:rgba(228,198,98,.7); transition:color .3s ease; }
.hero-scroll:hover{ color:var(--gold-300); }
.hero-scroll span{ font-size:10px; text-transform:uppercase; letter-spacing:.28em; font-weight:800; }

/* --------------------------------------------------------------------------
   HERO SIDE CARD  (Login / Register — sits on the right of the slider)
   Hidden on small screens: the header + mobile drawer already carry the
   Login / Register buttons there.
   -------------------------------------------------------------------------- */
.hero-side{ display:none; }
.hero-side-card{
    width:310px; padding:26px 24px; border-radius:22px;
    background:linear-gradient(160deg,rgba(10,23,51,.92),rgba(5,13,31,.88));
    border:1px solid rgba(212,175,55,.38);
    box-shadow:0 30px 70px -26px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
}
.hero-side-t{ font-family:'Playfair Display',serif; font-size:1.25rem; font-weight:800; color:#fff; margin:0 0 6px; }
.hero-side-d{ font-size:13px; line-height:1.6; color:rgba(255,255,255,.65); margin:0 0 18px; }
.hero-side-actions{ display:flex; flex-direction:column; gap:10px; }
.hero-side-list{ list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid rgba(212,175,55,.22); display:flex; flex-direction:column; gap:9px; }
.hero-side-list li{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:500; color:rgba(255,255,255,.7); }
.hero-side-list i{ width:14px; text-align:center; color:var(--gold-400); }

@keyframes kenburns{ 0%{ transform:scale(1); } 100%{ transform:scale(1.14) translate3d(-1.5%,-1.5%,0); } }
.kenburns{ animation:kenburns 9s ease-out forwards; }

@keyframes fadeInUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }
.animate-fadeInUp{ animation:fadeInUp .9s cubic-bezier(.2,.8,.2,1) both; }
.delay-100{ animation-delay:.15s; } .delay-200{ animation-delay:.3s; } .delay-300{ animation-delay:.45s; }

@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
.floaty{ animation:floaty 6s ease-in-out infinite; }

@keyframes pulseRing{ 0%{ box-shadow:0 0 0 0 rgba(212,175,55,.55);} 70%{ box-shadow:0 0 0 22px rgba(212,175,55,0);} 100%{ box-shadow:0 0 0 0 rgba(212,175,55,0);} }
.pulse-gold{ animation:pulseRing 2.6s infinite; }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{ position:relative; overflow:hidden; background:var(--navy-800); border-top:1px solid rgba(212,175,55,.2); border-bottom:1px solid rgba(212,175,55,.2); padding:13px 0; }
.marquee__track{ display:flex; flex-wrap:nowrap; width:max-content; align-items:center; animation:marquee 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ text-decoration:none; transition:color .25s ease; display:inline-flex; align-items:center; gap:10px; padding:0 26px; font-size:13px; font-weight:600; color:rgba(240,217,140,.85); white-space:nowrap; }
.marquee__item i{ color:var(--gold-500); font-size:12px; }
.marquee__item::after{ content:''; width:4px; height:4px; border-radius:50%; background:rgba(212,175,55,.4); margin-left:18px; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{ position:relative; padding:70px 0; overflow:hidden; }
.section-white{ background:#fff; }
.section-soft{ background:var(--surface-2); }
.section-dark{ background:var(--navy-900); }
.section-navy{ background:var(--grad-navy); }

.sec-head{ max-width:660px; margin:0 auto 46px; text-align:center; position:relative; z-index:2; }
.sec-title{ font-family:'Playfair Display',serif; font-size:1.85rem; line-height:1.2; font-weight:800; color:var(--navy-800); margin:16px 0 16px; }
.section-dark .sec-title,.section-navy .sec-title{ color:#fff; }
.sec-sub{ font-size:15px; line-height:1.7; color:var(--body); margin:0; }
.section-dark .sec-sub,.section-navy .sec-sub{ color:rgba(255,255,255,.58); }

.aurora{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.3; pointer-events:none; z-index:0; }
.aurora-gold{ background:radial-gradient(circle,#D4AF37 0%,transparent 70%); }
.aurora-blue{ background:radial-gradient(circle,#24509E 0%,transparent 70%); }
.a1{ width:360px; height:360px; top:-90px; right:-90px; }
.a2{ width:400px; height:400px; top:0; left:-140px; }
.a3{ width:340px; height:340px; bottom:-80px; right:-70px; }
@keyframes drift{ 0%,100%{ transform:translate(0,0) scale(1);} 33%{ transform:translate(36px,-26px) scale(1.1);} 66%{ transform:translate(-26px,22px) scale(.95);} }
.drift{ animation:drift 18s ease-in-out infinite; }
.drift-slow{ animation:drift 26s ease-in-out infinite reverse; }

.grid-overlay{
    position:absolute; inset:0; pointer-events:none; z-index:1;
    background-image:linear-gradient(rgba(212,175,55,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.07) 1px,transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 78%);
    mask-image:radial-gradient(ellipse at center,#000 20%,transparent 78%);
}

/* ---------- Grids -------------------------------------------------------- */
.grid{ display:grid; gap:20px; position:relative; z-index:2; }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:1fr; }
.grid-stats{ grid-template-columns:repeat(2,1fr); gap:14px; }

/* ==========================================================================
   QUICK ACTION BAR
   ========================================================================== */
.quickbar{ position:relative; z-index:20; }
.quickbar-card{
    max-width:900px; margin:26px auto 0; background:#fff;
    border:1px solid rgba(10,23,51,.08); border-radius:24px;
    box-shadow:0 30px 60px -28px rgba(10,23,51,.45); padding:22px;
}
.quickbar-in{ display:flex; flex-direction:column; align-items:stretch; gap:14px; text-align:center; }
.quickbar-t{ font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:800; color:var(--navy-800); margin:0 0 4px; }
.quickbar-d{ font-size:13.5px; color:var(--muted); margin:0; }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card{
    position:relative; background:#fff; border:1px solid rgba(10,23,51,.07);
    border-radius:20px; box-shadow:var(--sh-sm); overflow:hidden;
    transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
}
.card::before{
    content:''; position:absolute; inset:0; border-radius:20px; padding:1px;
    background:var(--grad-gold); pointer-events:none; opacity:0; transition:opacity .5s ease;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
}
.card:hover{ transform:translateY(-9px); box-shadow:var(--sh-lg); }
.card:hover::before{ opacity:1; }

.card-glass{
    position:relative; background:rgba(255,255,255,.06); border:1px solid rgba(212,175,55,.22);
    backdrop-filter:blur(14px); border-radius:20px; z-index:2;
    transition:transform .5s cubic-bezier(.2,.8,.2,1), background .5s ease, border-color .5s ease;
}
.card-glass:hover{ transform:translateY(-8px); background:rgba(212,175,55,.1); border-color:rgba(212,175,55,.5); }

.medallion{
    display:flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink:0;
    background:var(--grad-navy); color:var(--gold-400);
    box-shadow:inset 0 0 0 1.5px rgba(212,175,55,.45),0 12px 26px -12px rgba(10,23,51,.6);
    transition:transform .5s cubic-bezier(.2,.8,.2,1), color .4s ease;
}
.medallion.lg{ width:74px; height:74px; font-size:26px; }
.medallion.xl{ width:78px; height:78px; font-size:28px; }
.medallion.md{ width:56px; height:56px; font-size:20px; }
.medallion.sm{ width:44px; height:44px; font-size:14px; }
.card:hover .medallion,.card-glass:hover .medallion{ transform:translateY(-4px) rotate(-6deg) scale(1.08); color:var(--gold-300); }

/* Service card */
.svc{ display:flex; flex-direction:column; height:100%; }
.svc-body{ flex:1; display:flex; flex-direction:column; text-align:center; padding:26px 24px 8px; }
.svc-icon{ margin:0 auto 22px; }
.svc-title{ font-family:'Playfair Display',serif; font-size:1.14rem; font-weight:800; color:var(--navy-800); margin:0 0 10px; transition:color .35s ease; }
.card:hover .svc-title{ color:var(--gold-600); }
.svc-desc{ font-size:13.5px; line-height:1.65; color:var(--muted); margin:0; transition:all .3s ease; }
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.read-more-btn{
    display:none; align-items:center; gap:6px; margin-top:8px; padding:0; border:0; background:none; cursor:pointer;
    color:var(--gold-600); font-weight:800; font-size:10px; text-transform:uppercase; letter-spacing:.14em;
}
.read-more-btn.show{ display:inline-flex; }
.read-more-btn:hover{ color:var(--navy-700); }
.read-more-btn i{ font-size:9px; transition:transform .3s ease; }
.svc-foot{ padding:0 24px 24px; margin-top:auto; }
.svc-btn{
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
    padding:12px 16px; border-radius:13px; border:1.5px solid rgba(10,23,51,.12);
    color:var(--navy-800); font-weight:700; font-size:13.5px;
    transition:background .4s ease,color .4s ease,border-color .4s ease;
}
.svc-btn i{ font-size:11px; transition:transform .4s ease; }
.card:hover .svc-btn{ background:var(--navy-800); color:var(--gold-300); border-color:var(--navy-800); }
.card:hover .svc-btn i{ transform:translateX(4px); }

/* Stat card */
.stat{ padding:22px 14px; text-align:center; }
.stat-icon{ margin:0 auto 16px; }
.stat-num{ font-family:'Playfair Display',serif; font-size:1.85rem; font-weight:800; line-height:1; margin-bottom:8px; }
.stat-label{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.15em; color:rgba(255,255,255,.55); }

/* Why card */
.why{ padding:34px 26px; text-align:center; }
.why-num{ position:absolute; top:14px; right:20px; font-family:'Playfair Display',serif; font-size:3.4rem; font-weight:900; color:rgba(10,23,51,.045); line-height:1; user-select:none; }
.why-icon{ margin:0 auto 24px; }
.why-title{ font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:800; color:var(--navy-800); margin:0 0 12px; }
.why-desc{ font-size:14.5px; line-height:1.75; color:var(--body); margin:0; }

/* Team card */
.team-photo{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--navy-700); }
.team-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.8,.2,1); }
.card:hover .team-photo img{ transform:scale(1.1); }
.team-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; opacity:0; transition:opacity .5s ease; background:linear-gradient(to top,rgba(5,13,31,.92),rgba(5,13,31,.15) 55%,transparent); }
.card:hover .team-overlay{ opacity:1; }
.team-overlay p{ display:flex; align-items:center; gap:8px; margin:0; font-size:12.5px; color:rgba(255,255,255,.9); word-break:break-all; }
.team-overlay i{ color:var(--gold-400); }
.team-info{ padding:20px 16px; text-align:center; }
.team-name{ font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:800; color:var(--navy-800); margin:0 0 4px; }
.team-role{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; color:var(--gold-600); margin:0; }

/* Video card */
.video-card{ border-radius:18px; overflow:hidden; border:1px solid rgba(212,175,55,.25); background:var(--navy-800); box-shadow:var(--sh-lg); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.video-card:hover{ transform:translateY(-7px); }
.video-ratio{ position:relative; padding-bottom:56.25%; height:0; }
.video-ratio iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-card{ max-width:1060px; margin:0 auto; display:flex; flex-direction:column; background:#fff; border:1px solid rgba(10,23,51,.08); border-radius:24px; overflow:hidden; box-shadow:0 40px 80px -40px rgba(10,23,51,.5); }
.contact-info{ position:relative; padding:34px 28px; background:var(--grad-navy); color:#fff; overflow:hidden; }
.contact-info-in{ position:relative; z-index:3; }
.contact-info h3{ font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:800; margin:0 0 12px; }
.contact-info .lead{ font-size:14px; line-height:1.75; color:rgba(255,255,255,.6); margin:22px 0 32px; }
.contact-row{ display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.contact-row span.txt{ padding-top:10px; font-size:14px; line-height:1.6; color:rgba(255,255,255,.85); word-break:break-word; transition:color .3s ease; }
a.contact-row:hover span.txt{ color:var(--gold-300); }
.contact-form{ padding:30px 26px; }

.field{ margin-bottom:18px; }
.field label{ display:block; margin-bottom:8px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.14em; color:var(--navy-800); }
.input-premium{
    width:100%; padding:14px 16px; border-radius:13px; font:inherit; font-size:15px;
    border:1.5px solid rgba(10,23,51,.1); background:var(--surface-2); color:var(--ink);
    outline:none; transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.input-premium:focus{ background:#fff; border-color:var(--gold-500); box-shadow:0 0 0 4px rgba(212,175,55,.16); }
.input-premium::placeholder{ color:#A6AEBE; }
textarea.input-premium{ resize:none; }
.form-note{ margin-top:14px; text-align:center; font-size:13.5px; font-weight:700; }
.form-note.ok{ color:#059669; } .form-note.err{ color:#E11D48; }
.hidden{ display:none !important; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ position:relative; background:var(--navy-900); color:#fff; padding:60px 0 26px; overflow:hidden; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:36px; margin-bottom:44px; position:relative; z-index:3; }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.footer-brand img{ height:46px; width:auto; border-radius:12px; background:#fff; padding:6px; }
.footer-brand span{ font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:800; }
.footer-about{ font-size:14px; line-height:1.8; color:rgba(255,255,255,.5); margin:0 0 26px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.6); font-size:14px; transition:all .4s ease; }
.footer-social a:hover{ background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-900); transform:translateY(-4px); }
.footer-h{ font-family:'Playfair Display',serif; font-size:1.08rem; font-weight:800; margin:0 0 8px; }
.footer-list{ list-style:none; margin:0; padding:0; }
.footer-list li{ margin-bottom:13px; }
.footer-list a,.footer-list span{ display:inline-flex; align-items:flex-start; gap:10px; font-size:14px; color:rgba(255,255,255,.5); line-height:1.6; transition:color .3s ease; }
.footer-list a:hover{ color:var(--gold-300); }
.footer-list i{ color:var(--gold-500); font-size:12px; width:14px; text-align:center; margin-top:4px; flex-shrink:0; }
.footer-list a:hover i.arw{ transform:translateX(3px); }
.footer-list i.arw{ transition:transform .3s ease; font-size:9px; }
.footer-note{ font-size:14px; line-height:1.7; color:rgba(255,255,255,.5); margin:0 0 18px; }
.news-form{ position:relative; }
.news-form input{
    width:100%; padding:14px 54px 14px 16px; border-radius:13px; font:inherit; font-size:14px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#fff; outline:none;
    transition:border-color .3s ease, background .3s ease;
}
.news-form input::placeholder{ color:rgba(255,255,255,.35); }
.news-form input:focus{ border-color:var(--gold-500); background:rgba(255,255,255,.1); }
.news-form button{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:11px; box-shadow:none; padding:0; }
.news-form button:hover{ transform:translateY(-50%) scale(1.06); }
.news-msg{ margin-top:12px; font-size:12.5px; font-weight:700; color:var(--gold-300); }
.footer-badge{ display:flex; align-items:center; gap:10px; margin-top:26px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.4); }
.footer-badge i{ color:rgba(212,175,55,.7); }
.footer-bottom{ position:relative; z-index:3; padding-top:24px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.footer-bottom p{ margin:0; }
.footer-copy{ font-size:13px; color:rgba(255,255,255,.4); }
.footer-made{ font-size:12px; color:rgba(255,255,255,.3); }
.footer-made i{ color:rgba(212,175,55,.7); margin:0 4px; font-size:10px; }

/* Floating buttons */
.fab{
    position:fixed; z-index:80; width:52px; height:52px; border-radius:50%; border:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-lg);
    transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease, visibility .35s;
}
.fab:hover{ transform:translateY(-4px) scale(1.08); }
.fab-wa{ bottom:18px; left:18px; background:#25D366; color:#fff; font-size:24px; }
.fab-top{ bottom:18px; right:18px; background:var(--grad-gold); color:var(--navy-800); font-size:15px; opacity:0; visibility:hidden; }
.fab-top.show{ opacity:1; visibility:visible; }

/* ==========================================================================
   SWIPER
   ========================================================================== */
.swiper-button-next,.swiper-button-prev{
    width:50px !important; height:50px !important; border-radius:50%;
    background:rgba(255,255,255,.1); border:1px solid rgba(212,175,55,.5);
    backdrop-filter:blur(8px); color:var(--gold-300) !important; transition:all .35s ease;
}
.swiper-button-next:hover,.swiper-button-prev:hover{ background:var(--gold-500); color:#0A1733 !important; transform:scale(1.08); }
.swiper-button-next:after,.swiper-button-prev:after{ font-size:16px !important; font-weight:900; }
.swiper-pagination-bullet{ width:9px; height:9px; background:var(--gold-400); opacity:.38; transition:all .35s ease; }
.swiper-pagination-bullet-active{ opacity:1; width:28px; border-radius:99px; background:var(--gold-500); }
.team-pagination .swiper-pagination-bullet,.video-pagination .swiper-pagination-bullet{ background:var(--navy-600); }
.team-pagination .swiper-pagination-bullet-active,.video-pagination .swiper-pagination-bullet-active{ background:var(--gold-500); }
.teamSwiper,.videoSwiper{ padding-bottom:44px !important; }
.teamSwiper .swiper-slide,.videoSwiper .swiper-slide{ height:auto; }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal-zoom{ opacity:0; transform:scale(.92); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal-zoom.in{ opacity:1; transform:none; }
/* hover lift must beat `.reveal.in{transform:none}` — keep these last */
.card.reveal.in:hover,.card.reveal-zoom.in:hover{ transform:translateY(-9px); }
.card-glass.reveal.in:hover,.card-glass.reveal-zoom.in:hover{ transform:translateY(-8px); }
.video-card.reveal.in:hover{ transform:translateY(-7px); }

/* ==========================================================================
   SCROLLBAR
   ========================================================================== */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#0A1733; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#D4AF37,#B8952B); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:#E4C662; }

/* Legacy aliases so older pages keep working */
.gradient-bg{ background:var(--grad-navy); }
.hover-scale{ transition:transform .35s ease; }
.hover-scale:hover{ transform:scale(1.05); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width:480px){
    .hero-actions{ flex-direction:row; }
    .quickbar-in{ flex-direction:row; align-items:center; justify-content:space-between; text-align:left; }
    .quickbar-actions{ display:flex; gap:10px; flex-shrink:0; }
    .footer-bottom{ flex-direction:row; justify-content:space-between; }
}

@media (min-width:640px){
    .wrap{ padding:0 26px; }
    .topbar-msg{ display:flex; }
    .brand-tag{ display:block; }
    .lang-name{ display:inline; }
    .hero .swiper{ height:580px; }
    .hero-title{ font-size:2.7rem; }
    .hero-sub{ font-size:17px; }
    .hero-trust{ display:flex; }
    .section{ padding:84px 0; }
    .sec-title{ font-size:2.2rem; }
    .grid{ gap:24px; }
    .grid-2,.grid-4{ grid-template-columns:repeat(2,1fr); }
    .marquee__item{ font-size:13.5px; }
    .footer-grid{ grid-template-columns:repeat(2,1fr); }
    .contact-info,.contact-form{ padding:40px 36px; }
    .fab{ width:56px; height:56px; }
    .fab-wa{ bottom:24px; left:24px; }
    .fab-top{ bottom:24px; right:24px; }
}

@media (min-width:768px){
    .hdr-in{ height:80px; }
    .brand-logo{ height:48px; }
    .brand-name{ font-size:20px; }
    .hdr-cta{ display:inline-flex; }
    .grid-3{ grid-template-columns:repeat(3,1fr); }
    .grid-stats{ grid-template-columns:repeat(4,1fr); gap:20px; }
    .quickbar-card{ padding:28px; }
}

@media (min-width:1024px){
    .hero .swiper{ height:640px; }
    .hero-title{ font-size:3.5rem; line-height:1.1; }
    .hero-sub{ font-size:19px; }
    .hero-scroll{ display:flex; }
    /* Login / Register card on the right hand side of the hero slider.
       The right offset follows the .wrap gutter on wide screens but never
       comes closer than 80px to the edge, so the "next" arrow stays clear. */
    .hero-side{
        display:block; position:absolute; z-index:6; top:50%;
        transform:translateY(-50%);
        right:clamp(80px, calc((100vw - 1240px) / 2 + 20px), 420px);
    }
    .hero-inner{ max-width:880px; }
    .hero-sub{ max-width:700px; }
    .hdr-nav{ display:flex; }
    .hdr-social{ display:flex; }
    .burger{ display:none; }
    .section{ padding:104px 0; }
    .sec-title{ font-size:2.7rem; }
    .grid{ gap:28px; }
    .grid-4{ grid-template-columns:repeat(4,1fr); }
    .footer-grid{ grid-template-columns:repeat(4,1fr); gap:46px; }
    .contact-card{ flex-direction:row; }
    .contact-info{ width:42%; padding:46px 42px; }
    .contact-form{ width:58%; padding:46px 42px; }
    .stat{ padding:30px 20px; }
    .stat-num{ font-size:2.5rem; }
    .why{ padding:42px 36px; }
}

@media (min-width:1280px){
    .hero .swiper{ height:700px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
    .reveal,.reveal-zoom{ opacity:1 !important; transform:none !important; }
}


/* ==========================================================================
   INDIC TYPOGRAPHY FIX
   Playfair Display and Plus Jakarta Sans carry no Bengali or Devanagari
   glyphs, so those characters used to drop to whatever the browser had
   lying around and looked broken. Listing a real Bengali / Devanagari face
   after the Latin one in the SAME stack keeps Latin on Playfair and hands
   every Indic glyph to a proper font, with no lang-specific markup needed.
   ========================================================================== */
body,
.font-body{
    font-family:'Plus Jakarta Sans','Hind Siliguri','Noto Sans Bengali','Noto Sans Devanagari',system-ui,sans-serif;
}

.font-display,
.brand-name,
.hero-title,
.hero-side-t,
.sec-title,
.quickbar-t,
.svc-title,
.stat-num,
.why-num,
.why-title,
.team-name,
.contact-info h3,
.footer-brand span,
.footer-h{
    font-family:'Playfair Display','Baloo Da 2','Baloo 2','Noto Sans Bengali','Noto Sans Devanagari','Plus Jakarta Sans',serif;
}

/* Bengali and Hindi sit lower and need a little more air than Latin */
html[lang="bn"] body,
html[lang="hi"] body{ line-height:1.8; }

html[lang="bn"] .hero-title,
html[lang="hi"] .hero-title{ line-height:1.35; letter-spacing:0; }

html[lang="bn"] .sec-title,
html[lang="hi"] .sec-title{ line-height:1.4; }

html[lang="bn"] .svc-title,
html[lang="hi"] .svc-title{ line-height:1.5; }

html[lang="bn"] .badge-gold,
html[lang="hi"] .badge-gold,
html[lang="bn"] .marquee__item,
html[lang="hi"] .marquee__item{ line-height:1.9; }

/* the strip under the hero now carries the service categories, so each
   item is a link — keep it looking exactly like the old plain text */
.marquee__item:hover{ color:var(--gold-300); }
.marquee__item:hover i{ color:var(--gold-400); }

/* the hero no longer has a side card, so the writing may use the full width */
.hero-inner.is-center{ margin-left:auto; margin-right:auto; text-align:center; }
.hero-inner.is-center .hero-sub{ margin-left:auto; margin-right:auto; }
.hero-inner.is-center .hero-actions{ justify-content:center; }
.hero-inner.is-center .hero-trust{ justify-content:center; }


/* ==========================================================================
   READABILITY PASS — small text over a photo, and Indic scripts
   --------------------------------------------------------------------------
   Two things were making the small lines hard to read:

   1. letter-spacing + text-transform:uppercase. Latin small-caps look smart
      with a wide track, but Bengali and Devanagari are joined scripts —
      spreading the letters apart pulls a conjunct like "স্ক্রল" into
      "স্ক  ল" and it stops looking like a word. Neither script has capitals
      either, so uppercase does nothing but confuse the renderer.

   2. 13px at weight 500 in 65% white sat directly on a photograph. Latin
      survives that; Bengali, with its head-line and stacked conjuncts, does
      not. The lines below make the type a little larger, a lot more solid,
      and give it something to sit on.
   ========================================================================== */

/* ---- the trust row under the hero buttons ---- */
.hero-trust{ gap:10px; flex-wrap:wrap; margin-top:30px; }
.hero-trust span:not(.sep){
    padding:8px 15px; border-radius:999px;
    background:rgba(5,13,31,.55);
    border:1px solid rgba(212,175,55,.28);
    font-size:14px; font-weight:700; color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,.55);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hero-trust i{ color:var(--gold-300); font-size:14px; }
.hero-trust .sep{ display:none; }

/* ---- the hero writing itself, so it survives a busy photograph ---- */
.hero-title{ text-shadow:0 3px 18px rgba(0,0,0,.55); }
.hero-sub{ color:rgba(255,255,255,.9); font-weight:500; text-shadow:0 2px 10px rgba(0,0,0,.5); }

/* ---- the little "Scroll" hint ---- */
.hero-scroll span{ font-size:11px; color:rgba(240,217,140,.95); text-shadow:0 1px 4px rgba(0,0,0,.6); }

/* ---- the gold pill above the title ---- */
.badge-gold{ font-size:.78rem; }

/* --------------------------------------------------------------------------
   INDIC: no letter tracking, no uppercase, a touch more size.
   Every place the design used wide small-caps is listed here once.
   -------------------------------------------------------------------------- */
html[lang="bn"] .badge-gold,      html[lang="hi"] .badge-gold,
html[lang="bn"] .brand-tag,       html[lang="hi"] .brand-tag,
html[lang="bn"] .lang-menu-t,     html[lang="hi"] .lang-menu-t,
html[lang="bn"] .drawer-label,    html[lang="hi"] .drawer-label,
html[lang="bn"] .hero-scroll span,html[lang="hi"] .hero-scroll span,
html[lang="bn"] .hero-trust span, html[lang="hi"] .hero-trust span,
html[lang="bn"] .stat-label,      html[lang="hi"] .stat-label,
html[lang="bn"] .team-role,       html[lang="hi"] .team-role,
html[lang="bn"] .field label,     html[lang="hi"] .field label,
html[lang="bn"] .footer-badge,    html[lang="hi"] .footer-badge,
html[lang="bn"] .read-more-btn,   html[lang="hi"] .read-more-btn,
html[lang="bn"] .sec-head .badge-gold, html[lang="hi"] .sec-head .badge-gold{
    letter-spacing:.01em;
    text-transform:none;
}

/* Bengali and Devanagari render optically smaller than Latin at the same
   px value, so the smallest labels get a nudge up. */
html[lang="bn"] .hero-trust span:not(.sep),
html[lang="hi"] .hero-trust span:not(.sep){ font-size:14.5px; font-weight:700; line-height:1.6; }

html[lang="bn"] .hero-scroll span,
html[lang="hi"] .hero-scroll span{ font-size:12.5px; font-weight:700; }

html[lang="bn"] .badge-gold,
html[lang="hi"] .badge-gold{ font-size:.84rem; padding-top:.4rem; padding-bottom:.4rem; line-height:1.6; }

html[lang="bn"] .stat-label,  html[lang="hi"] .stat-label,
html[lang="bn"] .team-role,   html[lang="hi"] .team-role,
html[lang="bn"] .footer-badge,html[lang="hi"] .footer-badge{ font-size:12px; }

html[lang="bn"] .field label, html[lang="hi"] .field label{ font-size:12.5px; }

html[lang="bn"] .marquee__item,
html[lang="hi"] .marquee__item{ font-size:14px; font-weight:700; color:rgba(246,231,168,.95); }

html[lang="bn"] .brand-tag,
html[lang="hi"] .brand-tag{ font-size:11px; }

html[lang="bn"] .hero-sub,
html[lang="hi"] .hero-sub{ font-size:16px; line-height:1.85; }

@media (min-width:640px){
    html[lang="bn"] .hero-sub, html[lang="hi"] .hero-sub{ font-size:18px; }
}
@media (min-width:1024px){
    html[lang="bn"] .hero-sub, html[lang="hi"] .hero-sub{ font-size:20px; }
}