@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Hind+Siliguri:wght@400;500;600;700&display=swap');
@font-face { font-family: 'SutonnyMJ'; src: local('SutonnyMJ'); }
:root{
  --bg-color:#FFFFFF; --dark-section:#F8FAFC; --card-bg:rgba(255,255,255,0.85);
  --primary:#00BCD4; --primary-dark:#0097A7; --text-primary:#0F172A;
  --text-secondary:#475569; --text-muted:#94A3B8; --border-color:rgba(0,0,0,0.06);
  --star-gold:#F59E0B; --shadow-sm:0 15px 35px rgba(0,10,30,0.08);
  --shadow-md:0 25px 50px rgba(0,10,30,0.12); --shadow-lg:0 40px 80px rgba(0,188,212,0.25);
}
*{margin:0;padding:0;box-sizing:border-box}
/* ── Security: Image protection only ── */
img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none; /* blocks right-click "Copy image" & "Copy image address" */
}
html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}
body{font-size:16px;line-height:1.6;overflow-x:hidden;background-color:#FAFAFC;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' width='100%25' height='100%25'%3E%3Cpath fill='none' stroke='%2300BCD4' stroke-width='3' stroke-opacity='0.08' d='M0,160L48,165.3C96,171,192,181,288,160C384,139,480,85,576,96C672,107,768,181,864,213.3C960,245,1056,235,1152,213.3C1248,192,1344,160,1392,144L1440,128'%3E%3C/path%3E%3Cpath fill='none' stroke='%2300BCD4' stroke-width='2' stroke-opacity='0.05' d='M0,64L48,80C96,96,192,128,288,149.3C384,171,480,181,576,154.7C672,128,768,64,864,64C960,64,1056,128,1152,144C1248,160,1344,128,1392,112L1440,96'%3E%3C/path%3E%3Cpath fill='none' stroke='%233B82F6' stroke-width='2' stroke-opacity='0.06' d='M0,224L48,229.3C96,235,192,245,288,234.7C384,224,480,192,576,165.3C672,139,768,117,864,128C960,139,1056,181,1152,186.7C1248,192,1344,160,1392,144L1440,128'%3E%3C/path%3E%3C/svg%3E");background-attachment:fixed;background-size:cover;font-family:'Inter',sans-serif;color:var(--text-primary)}
html[lang="bn"] body, html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3, html[lang="bn"] h4, html[lang="bn"] h5, html[lang="bn"] h6, html[lang="bn"] p, html[lang="bn"] a, html[lang="bn"] span, html[lang="bn"] div, html[lang="bn"] li, html[lang="bn"] button, html[lang="bn"] input {font-family:'SutonnyMJ','Hind Siliguri',sans-serif!important}

h1{font-size:clamp(40px,6vw,72px);font-weight:900;line-height:1.1;letter-spacing:-0.03em}
h2{font-size:clamp(32px,4vw,56px);font-weight:800;line-height:1.2;margin-bottom:24px;letter-spacing:-0.02em}
h3{font-size:28px;font-weight:800;margin-bottom:16px;letter-spacing:-0.01em}
h4{font-size:22px;font-weight:700;margin-bottom:12px}
p{margin-bottom:16px;color:var(--text-secondary);font-size:18px}
a{text-decoration:none;color:inherit}
ul{list-style:none}

.btn-primary{background:var(--primary);color:#FFF;padding:16px 40px;border-radius:100px;font-weight:800;font-size:16px;border:none;cursor:pointer;transition:all 0.3s;display:inline-flex;align-items:center;gap:12px;box-shadow:0 10px 20px rgba(0,188,212,0.2)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-6px) scale(1.02);box-shadow:0 20px 40px rgba(0,188,212,0.4)}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary);padding:14px 36px;border-radius:100px;font-weight:800;transition:all 0.3s;display:inline-flex;align-items:center;gap:12px}
.btn-outline:hover{background:var(--primary);color:#FFF;transform:translateY(-4px);box-shadow:0 15px 30px rgba(0,188,212,0.2)}

.btn-auth{background:rgba(0,188,212,0.1);color:var(--primary-dark);border:1px solid rgba(0,188,212,0.2);padding:8px 18px;border-radius:100px;font-weight:700;font-size:14px;transition:all 0.3s;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.btn-auth:hover{background:var(--primary);color:#FFF;transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,188,212,0.25)}

.btn-browse{background:linear-gradient(135deg,var(--primary) 0%,#3B82F6 100%);color:#FFF;padding:14px 36px;border-radius:100px;font-weight:800;border:none;cursor:pointer;box-shadow:0 10px 20px rgba(0,188,212,0.3);position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;transition:all 0.4s cubic-bezier(0.22,1,0.36,1)}
.btn-browse::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);transition:all 0.5s}
.btn-browse:hover::before{left:100%}
.btn-browse:hover{transform:perspective(400px) translateY(-6px) scale(1.05) rotateX(10deg) rotateY(-5deg);box-shadow:0 20px 40px rgba(0,188,212,0.5)}

.container{max-width:1700px;margin:0 auto;padding:0 32px}
.section{padding:120px 0;background:transparent}
.section-dark{padding:120px 0;background:rgba(244, 248, 252, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}
.mb-24{margin-bottom:24px}.mb-40{margin-bottom:40px}.text-center{text-align:center}

/* Navbar — Full-width Sticky with iOS Liquid Glass */
@keyframes navSlideDown{
    0%{transform:translateY(-100%);opacity:0}
    100%{transform:translateY(0);opacity:1}
}
html.first-load .navbar { animation:navSlideDown 0.9s cubic-bezier(0.22,1,0.36,1) 0.5s both; }

/* Base: highly transparent glass at top */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 76px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  z-index: 9999;
  transition: height 0.45s cubic-bezier(0.22,1,0.36,1),
              background 0.45s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.45s cubic-bezier(0.22,1,0.36,1),
              border-color 0.45s ease,
              backdrop-filter 0.45s ease;
  overflow: visible;
}

/* Scrolled: compress + pure water liquid glass */
.navbar.scrolled {
  height: 58px;
  background: rgba(255,255,255,0.15); /* Pure Water (very little white tint) */
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: none;
  box-shadow: 0 4px 30px rgba(0,0,0,0.08);
}
.navbar.scrolled .logo-text-top { color: #0F172A; }
.navbar.scrolled .nav-links>li>a { color: #0F172A; }
.navbar.scrolled .nav-actions .lang-toggle { color: #0F172A; border-color: rgba(15,23,42,0.3); background: rgba(15,23,42,0.05); }
.navbar.scrolled .nav-actions .btn-auth { color: var(--primary-dark); border-color: rgba(0,188,212,0.2); background: rgba(0,188,212,0.1); }
.navbar.scrolled .more-dropdown .more-btn { color: #0F172A !important; }
.navbar.scrolled .nav-profile-btn { color: var(--primary) !important; border-color: rgba(0,188,212,0.25) !important; background: rgba(0,188,212,0.08) !important; }

.nav-container{display:flex;justify-content:space-between;align-items:center;height:100%;padding:0 40px;max-width:1700px;margin:0 auto}
.logo-area{display:flex;align-items:center;gap:12px;transition:transform 0.3s, opacity 0.3s}
.logo-area:hover{transform:scale(1.04)}
.logo-icon{width:38px;height:38px;background:linear-gradient(135deg,#FFF,#E0F2FE);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);transition:transform 0.4s cubic-bezier(0.22,1,0.36,1)}
.logo-area:hover .logo-icon{transform:rotate(30deg) scale(1.1)}
.logo-text-top{font-size:21px;font-weight:900;color:#0F172A;letter-spacing:-0.5px;display:block;line-height:1;transition:font-size 0.45s cubic-bezier(0.22,1,0.36,1)}
.navbar.scrolled .logo-text-top{font-size:18px;}
.logo-text-bottom{font-size:10px;font-weight:800;color:var(--primary);letter-spacing:4px;text-transform:uppercase;margin-top:3px;display:block;line-height:1;transition:opacity 0.45s ease, max-height 0.45s ease;overflow:hidden;max-height:20px}
.navbar.scrolled .logo-text-bottom{opacity:0;max-height:0;margin-top:0}

.nav-links{display:flex;gap:32px;align-items:center}
.nav-links>li>a{font-size:13.5px;font-weight:700;color:#0F172A;transition:all 0.3s;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:7px;position:relative;padding:6px 0}
.nav-links>li>a i{font-size:18px;transition:transform 0.3s}
.nav-links>li>a:hover, .nav-links>li>a.active{color:var(--primary)}
.nav-links>li>a:hover i{transform:translateY(-2px)}

.dropdown{position:relative}
.dropdown-menu{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(10px) scale(0.96);
  width:270px;
  background:rgba(255,255,255,0.9);
  backdrop-filter: saturate(200%) blur(28px);
  -webkit-backdrop-filter: saturate(200%) blur(28px);
  box-shadow:0 20px 50px rgba(0,0,0,0.12),0 0 0 1px rgba(0,188,212,0.1);
  border-radius:20px;padding:12px;
  opacity:0;visibility:hidden;
  transition:all 0.3s cubic-bezier(0.22,1,0.36,1);
  border:1px solid rgba(255,255,255,0.6);
}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1)}
.dropdown-menu a{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--text-primary);font-size:14px;font-weight:700;transition:all 0.2s;border-radius:12px}
.dropdown-menu a i{color:var(--primary);font-size:20px;background:rgba(0,188,212,0.1);padding:7px;border-radius:8px}
.dropdown-menu a:hover{background:rgba(0,188,212,0.07);color:var(--primary);transform:translateX(4px)}

.nav-actions{display:flex;gap:12px;align-items:center}
/* Bangla toggle hidden but functionality kept */
.lang-toggle{display:none!important}
.lang-toggle{background:transparent;color:var(--text-primary);border:2px solid var(--border-color);padding:10px 24px;border-radius:100px;font-size:14px;font-weight:800;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;gap:8px}
.lang-toggle:hover{border-color:var(--primary);color:var(--primary);background:rgba(0,188,212,0.05)}

/* ── Home Page Top Navbar Overrides (White Text) ── */
body.home-page .navbar:not(.scrolled) .logo-text-top { color: #FFF; }
body.home-page .navbar:not(.scrolled) .nav-links>li>a { color: #FFF; }
body.home-page .navbar:not(.scrolled) .nav-links>li>a:hover, body.home-page .navbar:not(.scrolled) .nav-links>li>a.active { color: var(--primary); }
body.home-page .navbar:not(.scrolled) .lang-toggle { color: #FFF; border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.05); }
body.home-page .navbar:not(.scrolled) .more-dropdown .more-btn { color: #FFF !important; }
body.home-page .navbar:not(.scrolled) .btn-auth { color: #FFF; border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.15); }
body.home-page .navbar:not(.scrolled) .nav-profile-btn { color: #FFF !important; border-color: rgba(255,255,255,0.4) !important; background: rgba(255,255,255,0.15) !important; }
body.home-page .navbar:not(.scrolled) .nav-profile-btn:hover { background: rgba(255,255,255,0.25) !important; color: #FFF !important; }

/* ── MORE Dropdown Button — matches plain nav link style ── */
.more-dropdown .more-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-radius: 0;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary) !important;
  background: transparent;
  box-shadow: none;
  transition: color 0.3s;
  cursor: pointer;
  overflow: visible;
}
.more-dropdown .more-btn::before { display: none; }
.more-dropdown .more-btn::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0%; height: 3px;
  background: var(--primary);
  border-radius: 10px;
  transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
  display: block !important;
}
.more-dropdown:hover .more-btn {
  color: var(--primary) !important;
  transform: none;
  box-shadow: none;
}
.more-dropdown:hover .more-btn::after { width: 100%; }
.more-dropdown:hover .more-btn .more-caret { transform: rotate(180deg); }

/* ── Academics Dropdown ── */
.academics-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-radius: 0;
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-primary);
  background: transparent;
  box-shadow: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s;
  overflow: visible;
}
.academics-btn::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0%; height: 3px;
  background: var(--primary);
  border-radius: 10px;
  transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
  display: block !important;
}
.dropdown:hover .academics-btn {
  color: var(--primary) !important;
}
.dropdown:hover .academics-btn::after { width: 100%; }
.dropdown:hover .academics-btn .more-caret { transform: rotate(180deg); }
.academics-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(10px) scale(0.96);
  width: 280px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: saturate(200%) blur(28px);
  -webkit-backdrop-filter: saturate(200%) blur(28px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,188,212,0.1);
  border-radius: 20px;
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
  border: 1px solid rgba(255,255,255,0.6);
}
.dropdown:hover .academics-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Home page white text for academics btn */
body.home-page .navbar:not(.scrolled) .academics-btn { color: #FFF !important; }
body.home-page .navbar:not(.scrolled) .dropdown:hover .academics-btn { color: var(--primary) !important; }
.navbar.scrolled .academics-btn { color: #0F172A !important; }
/* Active state — when on an academics sub-page */
.academics-btn.active { color: var(--primary) !important; }
.academics-btn.active::after { width: 100%; }
.more-btn .more-caret {
  font-size: 14px;
  transition: transform 0.3s;
}

/* More mega dropdown menu */
.more-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  left: auto;
  transform: translateY(10px);
  width: 420px;
  background: #fff;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,188,212,0.08);
  border: 1px solid rgba(0,188,212,0.12);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.more-dropdown:hover .more-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.more-menu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  transition: all 0.25s cubic-bezier(0.22,1,0.36,1);
  background: transparent;
  border: 1.5px solid transparent;
  transform: none !important;
}
.more-menu a i {
  font-size: 24px;
  color: var(--primary);
  background: rgba(0,188,212,0.1);
  padding: 10px;
  border-radius: 12px;
  transition: all 0.25s;
  font-size: 22px;
}
.more-menu a:hover {
  background: rgba(0,188,212,0.07) !important;
  border-color: rgba(0,188,212,0.25) !important;
  color: var(--primary) !important;
  transform: translateY(-2px) !important;
}
.more-menu a:hover i {
  background: rgba(0,188,212,0.2);
  transform: scale(1.12);
}

/* Mobile Dock */
.mobile-dock{
  display:none;
  position:fixed;
  bottom:20px;
  left:16px;
  right:16px;
  width:auto; /* full width minus margins — no transform needed */
  transform:none;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  padding:10px 8px;
  border-radius:100px;
  box-shadow:0 20px 50px rgba(0,0,0,0.18),0 0 0 1px rgba(0,0,0,0.06);
  z-index:9999;
  justify-content:space-around;
  align-items:center;
}
.mobile-dock a{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  color:var(--text-muted);
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.5px;
  transition:all 0.3s;
  flex:1; /* equal width for all 4 items */
  min-width:0;
}
.mobile-dock a i{font-size:22px;transition:all 0.4s cubic-bezier(0.22,1,0.36,1)}
.mobile-dock a.active{color:var(--primary)}
.mobile-dock a.active i{transform:translateY(-3px) scale(1.15);color:var(--primary)}

/* Mobile More Overlay */
.mobile-more-overlay {
    position: fixed; inset: 0; background: rgba(0,20,40,0.6); z-index: 100000;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.mobile-more-overlay.active { opacity: 1; visibility: visible; }
.mobile-more-content {
    width: 100%; background: #fff; border-radius: 24px 24px 0 0;
    padding: 24px; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
    max-height: 80vh; overflow-y: auto;
}
.mobile-more-overlay.active .mobile-more-content { transform: translateY(0); }
.mobile-more-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.close-more { background: rgba(0,0,0,0.05); border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-primary); transition: background 0.3s; }
.close-more:hover { background: rgba(0,0,0,0.1); }
.mobile-more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mobile-more-grid a {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: #f8fafc; border: 1px solid rgba(0,188,212,0.1); padding: 16px 8px;
    border-radius: 16px; font-size: 13px; font-weight: 700; color: var(--text-primary);
    transition: all 0.3s; text-align: center;
}
.mobile-more-grid a i { font-size: 24px; color: var(--primary); margin-bottom: 4px; }
.mobile-more-grid a:active { transform: scale(0.96); background: rgba(0,188,212,0.05); }

/* Hero Slider */
.hero-slider{position:relative;height:100vh;min-height:800px;width:100%;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity 1s ease-in-out, transform 6s linear;opacity:0;transform:scale(1);z-index:0}
.hero-slide.active{opacity:1;transform:scale(1.05);z-index:1}
/* Top and bottom fade */
.hero-slider::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,10,25,0.95) 0%, rgba(0,10,25,0.6) 12%, transparent 25%, transparent 80%, #002b3d 100%);pointer-events:none;z-index:2;opacity:1}
.hero-content-wrapper{position:relative;z-index:10;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#FFF;text-align:center;padding:0 24px;padding-top:76px}
html { scroll-padding-top: 76px; }
#typeTarget{white-space:pre-wrap;}
.cursor{display:inline-block;width:4px;height:1em;background:var(--primary);animation:blink 1s infinite;vertical-align:bottom;margin-left:4px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

@keyframes slideUpFade{
    0%{transform:translateY(60px);opacity:0}
    100%{transform:translateY(0);opacity:1}
}
.hero-badge, .hero-title, .hero-desc {animation: slideUpFade 1.5s ease-in-out 0.8s both;}
.hero-buttons {animation: slideUpFade 1.5s ease-in-out 1s both;}

/* Framer Animations */
.framer-reveal{opacity:0;transform:translateY(50px);transition:all 1s ease-in-out}
.framer-reveal.active{opacity:1;transform:translateY(0)}

.reveal-left { opacity: 0; transform: translateX(-150px); transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-right { opacity: 0; transform: translateX(150px); transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-up { opacity: 0; transform: translateY(80px); transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-left.active, .reveal-right.active, .reveal-up.active { opacity: 1; transform: translate(0,0); }

.slider-dots { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; gap: 12px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.3); border: none; cursor: pointer; transition: all 0.4s ease-in-out; padding: 0; }
.dot.active { width: 36px; border-radius: 100px; background: var(--primary); }

/* ── Skip intro animation on page switch ── */
html.no-intro #pageTransition { display: none !important; }
html.no-intro .navbar { animation: none !important; }

/* Staggered Blinds Transition */
.blinds-transition{
  position:fixed;
  top:-4px; left:-4px; right:-4px; bottom:-4px; /* bleed 4px past viewport on ALL sides */
  z-index:100000;
  display:flex;
  pointer-events:none;
  overflow:hidden;
  gap:0;
}
.blind{
  flex:1;
  background:var(--primary);
  transition:transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
  will-change:transform;
  /* box-shadow bleeds the color 3px into each neighboring strip — kills sub-pixel gaps */
  box-shadow: 3px 0 0 0 var(--primary), -3px 0 0 0 var(--primary);
}
.blinds-transition .blind{transform:translateY(0)}
.blinds-transition.loaded .blind:nth-child(odd){transform:translateY(calc(-100% - 8px))}
.blinds-transition.loaded .blind:nth-child(even){transform:translateY(calc(100% + 8px))}
.blinds-transition.active .blind{transform:translateY(0);pointer-events:all}
.blind:nth-child(1){transition-delay:0.00s}
.blind:nth-child(2){transition-delay:0.06s}
.blind:nth-child(3){transition-delay:0.12s}
.blind:nth-child(4){transition-delay:0.18s}
.blind:nth-child(5){transition-delay:0.12s}
.blind:nth-child(6){transition-delay:0.06s}
.blind:nth-child(7){transition-delay:0.00s}

/* Scroll To Top */
.scroll-to-top {position: fixed; bottom: 100px; right: 24px; width: 50px; height: 50px; border-radius: 50%; background: var(--primary); color: #FFF; border: none; font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 20px rgba(0,188,212,0.3); z-index: 9998; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);}
.scroll-to-top.show {opacity: 1; visibility: visible; transform: translateY(0);}
.scroll-to-top:hover {transform: translateY(-5px); background: var(--primary-dark);}

/* Bento Grid */
.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(300px,auto);gap:32px;margin-top:60px}
.bento-box{background:var(--card-bg);border-radius:40px;padding:48px;border:2px solid rgba(0,188,212,0.1);display:flex;flex-direction:column;justify-content:center;transition:all 0.5s cubic-bezier(0.16,1,0.3,1);box-shadow:0 20px 50px rgba(0,0,0,0.12);position:relative;overflow:hidden}
.bento-box:hover{transform:translateY(-12px) scale(1.02);box-shadow:0 30px 60px rgba(0,188,212,0.25);border-color:var(--primary)}
.bento-large{grid-column:span 2;grid-row:span 2}
.bento-wide{grid-column:span 2}
.bento-icon{font-size:64px;color:var(--primary);margin-bottom:24px}
.bento-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.8;transition:transform 1s;z-index:0}
.bento-box:hover .bento-img{transform:scale(1.05)}
.bento-content{position:relative;z-index:1}

/* Marquee */
.marquee{overflow:hidden;white-space:nowrap;padding:40px 0;background:#002b3d;border-top:none;border-bottom:none}
.marquee-content{display:inline-block;animation:marquee 30s linear infinite}
.marquee:hover .marquee-content {animation-play-state: paused;}
.marquee-item{display:inline-flex;align-items:center;gap:16px;margin:0 40px;font-size:24px;font-weight:800;color:rgba(255,255,255,0.85)}
.marquee-item:nth-child(even){animation: marqueeWave 3s ease-in-out infinite alternate}
.marquee-item:nth-child(odd){animation: marqueeWave 3s ease-in-out infinite alternate-reverse; animation-delay: 1.5s}
.marquee-item i{font-size:36px;color:var(--primary)}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes marqueeWave{0%{transform:translateY(-10px)}100%{transform:translateY(10px)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* LMS Course List View */
.lms-course-list{display:flex;flex-direction:column;gap:32px}
.lms-card{display:flex;background:var(--card-bg);border-radius:32px;border:1px solid var(--border-color);overflow:hidden;box-shadow:var(--shadow-sm);transition:all 0.4s;height:300px}
.lms-card:hover{transform:translateX(10px);box-shadow:var(--shadow-md);border-color:var(--primary)}
.lms-image{width:400px;height:100%;position:relative;overflow:hidden}
.lms-image img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.lms-card:hover .lms-image img{transform:scale(1.05)}
.lms-body{padding:40px;flex:1;display:flex;flex-direction:column;justify-content:center}
.lms-tags{display:flex;gap:12px;margin-bottom:16px}
.lms-tag{padding:6px 16px;background:rgba(0,188,212,0.1);color:var(--primary-dark);border-radius:100px;font-size:12px;font-weight:800;text-transform:uppercase}
.lms-meta{display:flex;gap:24px;color:var(--text-secondary);font-size:15px;font-weight:600;margin-bottom:24px;align-items:center}
.lms-meta i{color:var(--primary);font-size:20px}
.lms-instructor{display:flex;align-items:center;gap:12px;margin-top:auto}
.lms-instructor img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.lms-instructor-info h5{margin:0;font-size:16px;font-weight:800}
.lms-instructor-info p{margin:0;font-size:13px;color:var(--text-muted)}
.lms-price-box{width:250px;background:var(--dark-section);padding:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-left:1px solid var(--border-color)}

/* Background Liquid Orbs */
.bg-orbs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(150px);opacity:0.3}
.orb-1{top:-20%;left:-10%;width:800px;height:800px;background:var(--primary);animation:float 15s infinite alternate}
.orb-2{bottom:-20%;right:-10%;width:1000px;height:1000px;background:#3B82F6;animation:float 20s infinite alternate-reverse}
@keyframes float{100%{transform:translate(150px,150px)}}

/* Footer */
footer{background:var(--text-primary);color:var(--text-muted);padding-top:120px;border-radius:80px 80px 0 0;margin-top:120px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:60px;padding-bottom:80px;border-bottom:1px solid rgba(255,255,255,0.1)}
.footer-col h4{color:#FFF;margin-bottom:32px;font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:18px}
.footer-col ul li{margin-bottom:20px}
.footer-col ul li a{transition:all 0.3s;font-size:16px;display:flex;align-items:center;gap:12px;font-weight:500}
.footer-col ul li a i{color:var(--primary);font-size:20px}
.footer-col ul li a:hover{color:var(--primary);transform:translateX(10px)}
.footer-bottom{padding:40px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;font-size:15px;font-weight:600}

/* Stats */
.stat-bar{padding:120px 0;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);background:rgba(255,255,255,0.6);backdrop-filter:blur(40px)}
.stat-box{text-align:center;position:relative;flex:1}
.stat-box:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:var(--border-color)}
.stat-num{font-size:80px;font-weight:900;line-height:1;margin-bottom:16px;letter-spacing:-3px;color:var(--text-primary)}
.stat-label{font-size:16px;color:var(--primary);text-transform:uppercase;letter-spacing:2px;font-weight:800}

/* LMS Sidebar */
.course-layout{display:flex;gap:60px;align-items:flex-start}
.sidebar{width:360px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:40px;padding:48px;position:sticky;top:140px;box-shadow:var(--shadow-sm)}
.main-content{flex:1}
.filter-title{font-weight:900;margin-bottom:24px;color:var(--text-primary);text-transform:uppercase;letter-spacing:1px;font-size:18px}
.checkbox-label{display:flex;align-items:center;gap:16px;margin-bottom:20px;cursor:pointer;color:var(--text-secondary);font-weight:700;font-size:16px;transition:color 0.3s}
.checkbox-label:hover{color:var(--primary)}
.checkbox-label input{width:24px;height:24px;accent-color:var(--primary);border-radius:6px;cursor:pointer}

/* Mobile Fixes */
.grid-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; }
.flex-wrap-mobile { display: flex; flex-wrap: wrap; }

@media(max-width:1200px){
  .lms-card{flex-direction:column;height:auto}
  .lms-image{width:100%;height:250px}
  .lms-price-box{width:100%;border-left:none;border-top:1px solid var(--border-color);padding:30px}
}
@media(max-width:992px){
  .navbar{display:none !important}
  .mobile-dock{display:flex}
  body{padding-bottom:100px}
  .bento-grid, .grid-cols-2, .grid-cols-3, .grid-cols-4, .contact-grid {grid-template-columns:1fr !important;grid-auto-rows:auto}
  .bento-large,.bento-wide{grid-column:span 1;grid-row:span 1}
  .course-layout{flex-direction:column}
  .sidebar{width:100%;position:static}
  .stat-box:not(:last-child)::after{display:none}
  .stat-bar{padding:80px 0}
  .section,.section-dark{padding:80px 0}
  footer{border-radius:60px 60px 0 0;margin-top:80px}
  .footer-grid{grid-template-columns:1fr !important;}
  
  /* Flex wrap fixes */
  .hero-buttons{flex-direction:column;width:100%}
  .hero-buttons a{width:100%;justify-content:center}
  
  .eid-offer-card { flex-direction: column !important; text-align: center !important; gap: 30px !important; }
  .eid-offer-inner { flex-direction: column !important; text-align: center !important; }
  .app-download-section { flex-direction: column !important; text-align: center !important; }
  .app-download-section > div { align-items: center !important; justify-content: center !important; }
  /* footer-bottom: allow the copyright+social row to wrap cleanly on mobile */
  .footer-bottom { flex-direction: column; text-align: center; gap: 12px; }
}

/* Extra small phones */
@media(max-width:400px){
  .mobile-dock { left:8px; right:8px; padding:8px 4px; }
  .mobile-dock a { font-size:8px; gap:2px; }
  .mobile-dock a i { font-size:20px; }
}

@media(max-width:768px){
  h1{font-size:clamp(32px,8vw,48px)}
  h2{font-size:clamp(28px,6vw,36px)}
  .stat-bar .container { flex-direction: column; gap: 40px !important; }
  .stat-box { width: 100%; }
  .bento-box { padding: 32px; min-height: 250px; }
  .hero-title { min-height: 120px !important; }
  .hero-content-wrapper { padding-top: 40px; }
  .hero-desc { font-size: 18px !important; margin-bo/* ── Global Auth Modal ── */
.auth-modal-overlay {
    position: fixed; inset: 0; background: rgba(0, 10, 30, 0.8); z-index: 100000;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; padding: 16px;
}
.auth-modal-overlay.active { opacity: 1; visibility: visible; }

.auth-modal-content {
    background: linear-gradient(160deg, #0d1b2e 0%, #071020 100%);
    border: 1px solid rgba(0,188,212,0.18);
    border-radius: 24px; width: 100%; max-width: 440px; padding: 36px 40px;
    position: relative; overflow: hidden;
    transform: scale(0.94) translateY(24px);
    transition: all 0.42s cubic-bezier(0.22,1,0.36,1);
    box-shadow: 0 48px 96px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,188,212,0.06);
    color: #fff;
}
.auth-modal-content::before {
    content: ''; position: absolute; top: -60px; right: -60px;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,188,212,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.auth-modal-overlay.active .auth-modal-content { transform: scale(1) translateY(0); }

.close-auth-modal {
    position: absolute; top: 18px; right: 18px;
    background: rgba(255,255,255,0.06); border: none;
    width: 34px; height: 34px; border-radius: 50%; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: rgba(255,255,255,0.6); transition: all 0.25s;
}
.close-auth-modal:hover { background: rgba(239,68,68,0.18); color: #ef4444; transform: rotate(90deg); }

/* Title & Subtitle */
.auth-modal-title { font-size: 22px; font-weight: 800; margin-bottom: 4px; line-height: 1.2; }
.auth-modal-sub   { color: rgba(255,255,255,0.45); font-size: 13px; margin-bottom: 18px; }

/* ── Tab Switcher (Sign In / Create Account) ── */
.auth-tabs {
    display: flex; background: rgba(255,255,255,0.05); border-radius: 10px;
    padding: 4px; gap: 4px; margin-bottom: 22px;
}
.auth-tab {
    flex: 1; padding: 9px; border: none; border-radius: 8px; font-size: 13px;
    font-weight: 700; cursor: pointer; transition: all 0.22s;
    background: transparent; color: rgba(255,255,255,0.45);
}
.auth-tab.active {
    background: linear-gradient(135deg, #00bcd4, #0097a7);
    color: #fff; box-shadow: 0 4px 14px rgba(0,188,212,0.35);
}
.auth-tab:not(.active):hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7); }

/* ── Input Group with Icon ── */
.auth-input-group { margin-bottom: 14px; text-align: left; }
.auth-input-label {
    display: block; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.9px;
    color: #86868b; margin-bottom: 7px;
}
.auth-input-wrap { position: relative; }
.auth-input-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 17px; color: #b0b8c1; pointer-events: none;
    transition: color 0.2s;
}
.auth-input-field {
    width: 100%; padding: 13px 16px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 11px; color: #1d1d1f; font-size: 15px;
    font-family: 'Inter', sans-serif; outline: none; transition: border-color 0.2s;
    -webkit-text-fill-color: #1d1d1f;
    box-shadow: none;
}
.auth-input-field::placeholder { color: #b0b8c1 !important; opacity: 1; }
.auth-input-field::-webkit-input-placeholder { color: #b0b8c1 !important; }
.auth-input-field::-moz-placeholder { color: #b0b8c1 !important; opacity: 1; }
.auth-input-field.auth-has-icon { padding-left: 42px; }
.auth-input-field:focus {
    border-color: #00bcd4;
    background: #fff;
    box-shadow: none;
}
.auth-input-field:focus ~ .auth-input-icon,
.auth-input-wrap:focus-within .auth-input-icon { color: #00bcd4; }

/* Password eye-toggle */
.auth-toggle-pass {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: rgba(255,255,255,0.35);
    cursor: pointer; font-size: 16px; padding: 4px; transition: color 0.2s;
    display: flex; align-items: center;
}
.auth-toggle-pass:hover { color: #00bcd4; }

/* ── Buttons ── */
.auth-btn-primary {
    width: 100%; padding: 14px 16px; margin-top: 6px;
    background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
    color: #fff; border: none; border-radius: 11px;
    font-size: 15px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 8px 22px rgba(0,188,212,0.28);
    transition: all 0.22s;
}
.auth-btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,188,212,0.4); }
.auth-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.auth-divider {
    display: flex; align-items: center; gap: 10px;
    margin: 18px 0; color: rgba(255,255,255,0.2); font-size: 12px; font-weight: 600;
}
.auth-divider span { white-space: nowrap; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.07); }

.auth-btn-google {
    width: 100%; padding: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 11px;
    color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: all 0.22s;
}
.auth-btn-google:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.22);
    transform: translateY(-1px);
}

/* Back button (OTP step) */
.auth-back-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; margin-top: 12px; padding: 10px;
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.35); font-size: 13px; font-weight: 600;
    transition: color 0.2s; border-radius: 8px;
}
.auth-back-btn:hover { color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.04); }

/* ── Messages ── */
.auth-msg-box {
    padding: 11px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
    margin-bottom: 14px; display: none; align-items: center; gap: 8px; line-height: 1.4;
}
.auth-msg-box.error   { background: rgba(239,68,68,0.12);  border: 1px solid rgba(239,68,68,0.25);  color: #fca5a5; display: flex; }
.auth-msg-box.success { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25); color: #6ee7b7;  display: flex; }

/* ── OTP Info Block ── */
.auth-otp-info {
    display: flex; align-items: center; gap: 14px;
    background: rgba(0,188,212,0.07);
    border: 1px solid rgba(0,188,212,0.18);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 20px;
    color: rgba(255,255,255,0.8);
}
.auth-otp-info i { color: #00bcd4; flex-shrink: 0; }

/* ── 6-Digit OTP Boxes ── */
.auth-otp-boxes {
    display: flex; gap: 8px; justify-content: center; margin-bottom: 16px;
}
.auth-otp-box {
    width: 46px; height: 54px;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: #fff; font-size: 22px; font-weight: 800; text-align: center;
    outline: none; transition: all 0.18s; caret-color: #00bcd4;
    font-family: 'Inter', monospace;
}
.auth-otp-box:focus {
    border-color: #00bcd4;
    background: rgba(0,188,212,0.1);
    box-shadow: 0 0 0 3px rgba(0,188,212,0.18);
    transform: scale(1.08);
}
.auth-otp-box:not(:placeholder-shown) { border-color: rgba(0,188,212,0.5); }

/* OTP Shake animation on wrong code */
@keyframes authOtpShake {
    0%, 100% { transform: translateX(0); }
    15%  { transform: translateX(-8px); }
    30%  { transform: translateX(8px); }
    45%  { transform: translateX(-6px); }
    60%  { transform: translateX(6px); }
    75%  { transform: translateX(-3px); }
    90%  { transform: translateX(3px); }
}
.auth-otp-shake { animation: authOtpShake 0.5s ease; }
.auth-otp-shake .auth-otp-box { border-color: #ef4444 !important; }

/* ── Countdown Timer ── */
.auth-otp-timer {
    text-align: center; font-size: 12px; font-weight: 600;
    color: rgba(255,255,255,0.4); margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: color 0.3s;
}

/* ── Logged-in Avatar ── */
.auth-avatar-lg {
    width: 68px; height: 68px; border-radius: 50%;
    background: linear-gradient(135deg, #00bcd4, #6366f1);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 900; color: #fff;
    margin: 0 auto 16px; box-shadow: 0 8px 24px rgba(0,188,212,0.35);
}

/* ── Navbar Profile Icon / Badge ── */
.nav-profile-btn {
    background: rgba(0,188,212,0.08);
    border: 2px solid rgba(0,188,212,0.25);
    width: 46px; height: 46px; border-radius: 50%;
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; cursor: pointer; flex-shrink: 0;
    transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
    position: relative; overflow: visible;
}
.nav-profile-btn::after {
    content: '';
    position: absolute; inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(0,188,212,0);
    transition: all 0.35s;
}
.nav-profile-btn:hover {
    background: var(--primary); color: #fff;
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 10px 28px rgba(0,188,212,0.35);
    border-color: var(--primary);
}
.nav-profile-btn:hover::after { border-color: rgba(0,188,212,0.3); inset: -6px; }

/* Logged-in avatar badge in navbar */
.nav-avatar-badge {
    width: 38px; height: 38px; border-radius: 50%;
    background: #00BCD4;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 900; color: #fff;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0,188,212,0.3);
}

/* ── Mobile Dock Profile Tab ── */
.mobile-dock .dock-profile-tab {
    display: flex; flex-direction: column; align-items: center;
    gap: 3px; font-size: 9px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.5px;
    transition: all 0.3s; flex: 1; min-width: 0;
    color: var(--primary);
}
.mobile-dock .dock-profile-tab i { font-size: 22px; transition: all 0.4s cubic-bezier(0.22,1,0.36,1); color: var(--text-muted); }
.mobile-dock .dock-profile-tab:hover i,
.mobile-dock .dock-profile-tab.active i { color: var(--primary); }
.dock-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, #00bcd4, #6366f1);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 900; color: #fff;
    box-shadow: 0 0 0 2px rgba(0,188,212,0.35);
    margin-bottom: 1px;
}

/* ── Spin animation for loading state ── */
@keyframes authSpin { to { transform: rotate(360deg); } }
.auth-spin { display: inline-block; animation: authSpin 0.8s linear infinite; }

@media(max-width: 480px) {
    .auth-modal-content { padding: 28px 22px; }
    .auth-otp-box { width: 40px; height: 48px; font-size: 18px; }
    .auth-otp-boxes { gap: 6px; }
}