@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-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 */
@keyframes navSlideDown{
    0%{transform:translateX(-50%) translateY(-150%);opacity:0}
    100%{transform:translateX(-50%) translateY(0);opacity:1}
}
html.first-load .navbar { animation:navSlideDown 1.5s ease-in-out 0.8s both; }

.navbar{position:fixed;top:20px;left:50%;transform:translateX(-50%);width:92%;max-width:1300px;height:84px;background:#FFFFFF;border:1px solid rgba(0,0,0,0.1);border-radius:100px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:9999;transition:all 0.4s cubic-bezier(0.22,1,0.36,1);box-shadow:0 20px 60px rgba(0,20,40,0.15);overflow:visible}
.navbar.scrolled{top:12px;width:96%;height:76px;background:#FFFFFF;box-shadow:0 20px 50px rgba(0,0,0,0.12);overflow:visible}
.nav-container{display:flex;justify-content:space-between;align-items:center;height:100%;padding:0 24px}
.logo-area{display:flex;align-items:center;gap:12px;transition:transform 0.3s}
.logo-area:hover{transform:scale(1.05)}
.logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--primary),#3B82F6);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}
.logo-text-top{font-size:24px;font-weight:900;color:var(--text-primary);letter-spacing:-0.5px;display:block;line-height:1}
.logo-text-bottom{font-size:11px;font-weight:800;color:var(--primary);letter-spacing:4px;text-transform:uppercase;margin-top:4px;display:block;line-height:1}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-links>li>a{font-size:15px;font-weight:800;color:var(--text-secondary);transition:all 0.3s;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:8px;position:relative;padding:8px 0}
.nav-links>li>a i{font-size:20px;transition:transform 0.3s}
.nav-links>li>a::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)}
.nav-links>li>a:hover, .nav-links>li>a.active{color:var(--primary)}
.nav-links>li>a:hover::after, .nav-links>li>a.active::after{width:100%}
.nav-links>li>a:hover i{transform:translateY(-2px)}
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(20px);width:280px;background:#FFF;box-shadow:0 30px 60px rgba(0,0,0,0.15);border-radius:24px;padding:16px;opacity:0;visibility:hidden;transition:all 0.3s cubic-bezier(0.22,1,0.36,1);border:1px solid var(--border-color)}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(10px)}
.dropdown-menu a{display:flex;align-items:center;gap:12px;padding:14px 20px;color:var(--text-primary);font-size:15px;font-weight:700;transition:all 0.2s;border-radius:12px}
.dropdown-menu a i{color:var(--primary);font-size:22px;background:rgba(0,188,212,0.1);padding:8px;border-radius:8px}
.dropdown-menu a:hover{background:rgba(0,188,212,0.08);color:var(--primary);transform:translateX(6px)}
.nav-actions{display:flex;gap:16px;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)}

/* ── MORE Dropdown Button ── */
.more-dropdown .more-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff !important;
  background: linear-gradient(135deg, var(--primary) 0%, #3B82F6 100%);
  box-shadow: 0 4px 18px rgba(0,188,212,0.35);
  transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
  cursor: pointer;
  overflow: hidden;
}
.more-dropdown .more-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s;
}
.more-dropdown:hover .more-btn::before { transform: translateX(100%); }
.more-dropdown:hover .more-btn {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 30px rgba(0,188,212,0.5);
}
.more-dropdown .more-btn::after { display: none; } /* remove underline */
.more-btn .more-caret {
  font-size: 14px;
  transition: transform 0.3s;
}
.more-dropdown:hover .more-btn .more-caret { transform: rotate(180deg); }

/* 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, #002b3d 0%,transparent 20%,transparent 85%, #002b3d 100%);pointer-events:none;z-index:2;opacity:0.95}
.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:80px}
#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}
  .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}
  
  div[style*="display: flex"] { flex-wrap: wrap; }
  .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; }
}

/* 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-bottom: 30px !important; }
}