*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html,
body {
    overflow-x: hidden;
}

img,
iframe,
video {
    max-width: 100%;
    height: auto;
}

.wp-video,
.wp-video-shortcode {
    width: 100% !important;
    max-width: 100% !important;
}



table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}
html { scroll-behavior:smooth }
body { font-family:'Manrope',sans-serif; background:#ffffff; color:#111827; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
img { max-width:100%; display:block }
a { text-decoration:none; color:inherit }
button { cursor:pointer; font-family:inherit }

.section-hidden { opacity:0; transform:translateY(40px); transition:opacity 0.7s ease, transform 0.7s ease }
.section-visible { opacity:1; transform:translateY(0) }


  .card-lift .how_diff_card_content p {
    font-family: 'Manrope', sans-serif;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 12px;
}

.card-lift .how_diff_card_content ul {
    font-family: 'Manrope', sans-serif;
    color: #6b7280;
    line-height: 1.9;
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 12px;
}
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.robot-bob { animation:bob 3s ease-in-out infinite }

@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.marquee-content { display:inline-flex; animation:marquee 30s linear infinite; white-space:nowrap }

@media (prefers-reduced-motion:reduce) {
  .marquee-content { animation:none }
  .robot-bob { animation:none }
  #hero-canvas { display:none }
  #testimonials { animation:none !important }
}

h1,h2,h3,h4,h5,h6,nav a,button,.badge,.stat-num,.stat-tag,.blog-date { font-family:'Space Grotesk',sans-serif }

.container { max-width:1280px; margin:0 auto }
.section-pad { padding: 25px 24px 32px 24px; }
@media (max-width:768px) { .section-pad { padding:24px 16px } }

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; max-width:1100px; margin:0 auto }

/* Hero blobs */
.hero-blob-1 { position:absolute; top:-60px; left:-80px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(186,158,255,0.18),transparent 70%); pointer-events:none; z-index:1 }
.hero-blob-2 { position:absolute; bottom:-80px; right:-60px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(58,223,250,0.14),transparent 70%); pointer-events:none; z-index:1 }

/* Empowering section left accent */
.section-pad > .container > .two-col { position:relative }

/* Check items for values section */
.check-item { display:flex; gap:14px; align-items:flex-start; margin-bottom:20px }
.check-icon { width:28px; height:28px; min-width:28px; border-radius:50%; background:linear-gradient(135deg,#8455ef,#3adffa); display:flex; align-items:center; justify-content:center; margin-top:2px }

/* Benefits grid */
.benefits-grid { display:grid; gap:16px }
.glass-card { background:#ffffff; border:1px solid #e5e7eb; border-radius:16px; transition:transform 0.3s ease, box-shadow 0.3s ease }
.glass-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(132,85,239,0.12) }

/* Team grid */
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px }
.team-card { background:#ffffff; border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; text-align:center; transition:transform 0.35s cubic-bezier(0.23,1,0.32,1), box-shadow 0.35s ease; display:flex; flex-direction:column }
.team-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(132,85,239,0.14) }
.team-card img { width:100%; height:320px; object-fit:cover; object-position:top }

/* Instructors grid */
.instructors-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px }
.instructors-grid .team-card { border:1.5px solid rgba(186,158,255,0.25); background:#fdfdff }
.instructors-grid .team-card:nth-child(2) { transform:translateY(-10px) }
.instructors-grid .team-card:nth-child(2):hover { transform:translateY(-16px) }
.instructors-grid .team-card img { height:440px; object-fit:contain; object-position:bottom; background:linear-gradient(180deg,#f4f2ff 0%,#ffffff 100%) }

@media (max-width:1024px) { .team-grid { grid-template-columns:repeat(2,1fr) } .instructors-grid { grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px) { .team-grid { grid-template-columns:1fr } .instructors-grid { grid-template-columns:1fr } }

.card-lift { transition:transform 0.35s cubic-bezier(0.23,1,0.32,1), box-shadow 0.35s ease }
.card-lift:hover { transform:translateY(-6px); box-shadow:0 12px 40px rgba(132,85,239,0.15) }

/* ---- NAV ---- */
@keyframes orbDrift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(30px,8px) scale(1.1); }
  66%      { transform: translate(-20px,4px) scale(0.95); }
}
@keyframes orbDrift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(-25px,6px) scale(1.08); }
  66%      { transform: translate(15px,-4px) scale(1.05); }
}
nav#navbar {
  position:sticky; top:0; z-index:50;
  background:rgba(10,6,18,0.82);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,rgba(132,85,239,0),rgba(132,85,239,0.6) 25%,rgba(58,223,250,0.7) 50%,rgba(236,99,255,0.6) 75%,rgba(132,85,239,0)) 1;
  box-shadow:0 1px 0 rgba(255,255,255,0.05) inset,0 4px 32px rgba(0,0,0,0.4),0 0 60px rgba(132,85,239,0.06);
}
nav#navbar::before {
  content:'';
  position:absolute;
  width:400px; height:130px;
  top:-65px; left:4%;
  background: radial-gradient(ellipse, rgba(132,85,239,0.5) 0%, rgba(132,85,239,0.12) 50%, transparent 70%);
  filter: blur(36px);
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  animation: orbDrift1 10s ease-in-out infinite;
}
nav#navbar::after {
  content:'';
  position:absolute;
  width:340px; height:110px;
  top:-55px; right:5%;
  background: radial-gradient(ellipse, rgba(58,223,250,0.4) 0%, rgba(236,99,255,0.3) 50%, transparent 70%);
  filter: blur(30px);
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  animation: orbDrift2 12s ease-in-out infinite;
}
.nav-inner { position:relative; z-index:1; max-width:1500px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 24px; height:64px }
.nav-links { display:flex; align-items:center; gap:32px }
.nav-link { font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:0.9rem; color:rgba(255,255,255,0.85); transition:color 0.2s }
.nav-link:hover, .nav-link.active { color:#b08ffd }
.nav-cta { background:linear-gradient(to right,#8455ef,#ec63ff); color:#ffffff !important; border-radius:99px; padding:7px 16px; font-weight:700; font-size:0.875rem; transition:transform 0.2s, box-shadow 0.2s }
.nav-cta:hover { transform:scale(1.05); box-shadow:0 0 18px rgba(132,85,239,0.4) }
#hamburger { display:none; background:none; border:none; font-size:1.5rem; color:#fff; padding:4px; cursor:pointer }

/* ---- NAV DROPDOWN ---- */
.nav-item { position:relative; display:inline-flex; align-items:center }
.nav-dropdown-toggle { display:inline-flex; align-items:center; gap:4px }
.nav-dropdown-arrow { font-size:0.7rem; transition:transform 0.2s }
.nav-dropdown:hover .nav-dropdown-arrow { transform:rotate(180deg) }
.nav-dropdown-menu {
  display:none;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  min-width:230px;
  margin-top:14px;
  padding:10px;
  background:rgba(255,255,255,0.98);
  backdrop-filter:blur(12px);
  border:1px solid rgba(186,158,255,0.3);
  border-radius:14px;
  box-shadow:0 16px 48px rgba(132,85,239,0.18);
  z-index:60;
}
.nav-dropdown:hover .nav-dropdown-menu { display:block }
.nav-dropdown-menu::before {
  content:'';
  position:absolute;
  top:-14px;
  left:0;
  right:0;
  height:14px;
}
.nav-dropdown-menu .nav-dropdown-link {
  display:block;
  padding:10px 16px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:500;
  font-size:0.85rem;
  color:#374151;
  border-radius:10px;
  transition:background 0.2s, color 0.2s;
}
.nav-dropdown-menu .nav-dropdown-link:hover { background:rgba(132,85,239,0.08); color:#8455ef }


/* Nav blur on scroll */
nav#navbar.scrolled {
  background:rgba(10,6,18,0.95);
  backdrop-filter:blur(32px) saturate(200%);
  -webkit-backdrop-filter:blur(32px) saturate(200%);
  box-shadow:0 1px 0 rgba(255,255,255,0.07) inset,0 8px 40px rgba(132,85,239,0.28),0 2px 12px rgba(58,223,250,0.12);
}

/* Sub-header gradient glow */
.sub-header {
  overflow: visible !important;
}
.sub-header::after {
  content:'' !important;
  position:absolute !important;
  bottom:-1px !important;
  left:0 !important;
  right:0 !important;
  height:2px !important;
  background:linear-gradient(90deg,rgba(132,85,239,0),rgba(132,85,239,0.6) 25%,rgba(58,223,250,0.7) 50%,rgba(236,99,255,0.6) 75%,rgba(132,85,239,0)) !important;
  pointer-events:none !important;
  z-index:99 !important;
}

/* Testimonial card pause */
.testimonial-card { transition:transform 0.35s cubic-bezier(0.23,1,0.32,1), box-shadow 0.35s ease }

@media (max-width:768px) {
  #navLinks { display:none }
  #hamburger { display:block !important }
  .hero-h1 { font-size:40px !important }
  .hero-sub { font-size:20px !important }
  .panel-grid { grid-template-columns:1fr !important; gap:24px !important }
  .cards-3 { grid-template-columns:1fr !important }
  .cards-4 { grid-template-columns:repeat(2,1fr) !important }
  .cards-2-full { grid-template-columns:1fr !important; max-width:none !important; width:100% !important }
  .footer-grid { grid-template-columns:repeat(2,1fr) !important }
  .blog-grid { grid-template-columns:repeat(2,1fr) !important }
  .two-col { grid-template-columns:1fr !important; gap:32px !important }
  .testimonial-card { flex:0 0 300px !important }
  .panel-heading { font-size:2rem !important }
  .section-heading { font-size:2rem !important }
  .stats-number { font-size:2.5rem !important }
  /* disable horizontal scroll panels on mobile — show as normal stacked section */
  #panels-section { height:auto !important }
  #panels-sticky { position:relative !important; height:auto !important; overflow:visible !important }
  #panels-track { flex-direction:column !important; width:100% !important; transform:none !important }
  #panels-track > div { flex:none !important; width:100% !important; height:auto !important; min-height:0 !important; padding:60px 20px !important }
  #panels-track .panel-grid img { max-height:220px !important; margin:0 auto }
  /* sub-header */
  .sub-header { padding:6px 12px !important; font-size:0.72rem !important }
  .sub-header a.active { color:#b08ffd !important; font-weight:700 !important; }
  /* hero */
  #hero-section { min-height:70vh !important }
  /* footer stats */
  #statsSection { padding:48px 16px !important }
}

@media (max-width:480px) {
  .cards-4 { grid-template-columns:1fr !important }
  .blog-grid { grid-template-columns:1fr !important }
  .footer-grid { grid-template-columns:1fr !important }
  .hero-h1 { font-size:32px !important }
  .sub-header { flex-direction:column !important; height:auto !important; gap:4px !important; text-align:center !important }
  .sub-header > div { gap:12px !important }
}
/* Program card */
.prog-card {
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  transition:transform 0.35s cubic-bezier(0.23,1,0.32,1), box-shadow 0.35s ease, border-color 0.25s ease;
  display:flex;
  flex-direction:column;
}
.prog-card:hover {
  transform:translateY(-8px);
  box-shadow:0 20px 48px rgba(132,85,239,0.15);
  border-color:#ae8dff;
}
.prog-card img {
  width:100%;
  /*aspect-ratio:16/9;*/
  object-fit:cover;
  display:block;
  transition:transform 0.5s ease;
}
.prog-card:hover img { transform:scale(1.04) }
.prog-card-body {
  padding:16px 20px 20px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.prog-card-body h3 {
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:1rem;
  color:#111827;
  margin-bottom:6px;
}
.prog-card-body p {
  font-family:'Manrope',sans-serif;
  color:#6b7280;
  font-size:0.875rem;
  line-height:1.5;
  margin-bottom:16px;
  max-height:2.625rem;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* Category pill */
.cat-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 14px;
  border-radius:99px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:0.75rem;
  margin-bottom:14px;
}

/* Hero */
.page-eyebrow { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.2em; color:#8455ef; margin-bottom:16px }
#hero-section { position:relative; background:#ffffff; overflow:hidden; min-height:420px; display:flex; align-items:center; justify-content:center }
#hero-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none }

/* Grid */
.programs-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px }

@media (max-width:1024px) { .programs-grid { grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px)  { .programs-grid { grid-template-columns:1fr } }
@media (max-width:768px)  {
  #navLinks { display:none }
  #hamburger { display:block !important }
  .footer-grid { grid-template-columns:repeat(2,1fr) !important }
}
@media (max-width:480px) {
  .footer-grid { grid-template-columns:1fr !important }
}

/* Filter tabs */
.filter-tab {
  padding:8px 22px;
  border-radius:99px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:0.875rem;
  border:1px solid #e5e7eb;
  background:#ffffff;
  color:#6b7280;
  cursor:pointer;
  transition:all 0.2s ease;
}
.filter-tab:hover, .filter-tab.active {
  background:linear-gradient(to right,#8455ef,#3adffa);
  color:#ffffff;
  border-color:transparent;
}

/* Article card */
.article-card {
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  overflow:hidden;
  transition:transform 0.35s cubic-bezier(0.23,1,0.32,1), box-shadow 0.35s ease;
  display:flex;
  flex-direction:column;
}
.article-card:hover {
  transform:translateY(-6px);
  box-shadow:0 16px 48px rgba(132,85,239,0.14);
  border-color:rgba(186,158,255,0.4);
}
.article-card img {
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
.article-card-body {
  padding:24px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Hero gradient text */
.text-gradient {
  background:linear-gradient(to right,#ba9eff,#3adffa);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Badge */
.page-eyebrow { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.2em; color:#8455ef; margin-bottom:16px }
.badge-purple {
  display:inline-block;
  background:rgba(186,158,255,0.15);
  border:1px solid rgba(186,158,255,0.35);
  color:#8455ef;
  border-radius:99px;
  padding:5px 16px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:0.78rem;
  letter-spacing:0.04em;
}

/* Page hero */
.page-hero {
  background:#f9fafb;
  border-bottom:1px solid #e5e7eb;
  padding:64px 24px 56px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

/* Grid */
.articles-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}
@media (max-width:900px) {
  .articles-grid { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:560px) {
  .articles-grid { grid-template-columns:1fr }
  .article-card img { height:180px }
}

/* ---- BLOG GRID ---- */
.blog-section { padding:32px 24px 32px 24px }
.blog-grid { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:32px }
@media (max-width:960px) { .blog-grid { grid-template-columns:repeat(2,1fr) } }
@media (max-width:580px) { .blog-grid { grid-template-columns:1fr } }

.blog-card { background:#ffffff; border:1px solid rgba(186,158,255,0.2); border-radius:20px; overflow:hidden; box-shadow:0 2px 16px rgba(132,85,239,0.06); transition:transform 0.35s cubic-bezier(0.23,1,0.32,1), box-shadow 0.35s ease }
.blog-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(132,85,239,0.14) }

.blog-card-img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:#f3f4f6 }
.blog-card-img-placeholder { width:100%; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(186,158,255,0.18),rgba(58,223,250,0.12)) }

.blog-card-body { padding:24px 24px 28px }
.blog-card-date { font-family:'Space Grotesk',sans-serif; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; color:#ae8dff; margin-bottom:10px }
.blog-card-title { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.0625rem; color:#111827; line-height:1.4; margin-bottom:12px }
.blog-card-desc { font-family:'Manrope',sans-serif; color:#6b7280; font-size:0.875rem; line-height:1.65; margin-bottom:20px }
.blog-read-more { display:inline-flex; align-items:center; gap:6px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:0.875rem; color:#8455ef; transition:gap 0.2s, color 0.2s }
.blog-read-more:hover { gap:10px; color:#ba9eff }
.blog-read-more svg { width:16px; height:16px; flex-shrink:0 }


/* ---- MARQUEE ---- */
.marquee-bar { background:linear-gradient(to right,rgba(186,158,255,0.18),rgba(58,223,250,0.16)); border-bottom:1px solid rgba(132,85,239,0.12); overflow:hidden; padding:10px 0 }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.marquee-content { display:inline-flex; animation:marquee 30s linear infinite; white-space:nowrap; color:#374151; font-family:'Manrope',sans-serif; font-weight:500; font-size:0.875rem }
.marquee-content span { padding:0 48px }
@media (prefers-reduced-motion:reduce) { .marquee-content { animation:none } }

#hero-section { position:relative; overflow:hidden }
#hero-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none }

/* ---- HERO ---- */
.page-hero { background:linear-gradient(135deg,rgba(186,158,255,0.12) 0%,rgba(58,223,250,0.08) 100%); border-bottom:1px solid rgba(186,158,255,0.2); padding:72px 24px 64px }
.page-hero-inner { max-width:860px; margin:0 auto; text-align:center }
.page-eyebrow { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.2em; color:#8455ef; margin-bottom:16px }
.page-hero h1 { font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:clamp(2rem,5vw,3.5rem); line-height:1.1; color:#111827; margin-bottom:20px }
.page-hero h1 span { background:linear-gradient(to right,#ba9eff,#3adffa); -webkit-background-clip:text; -webkit-text-fill-color:transparent }
.page-hero p { font-family:'Manrope',sans-serif; color:#6b7280; font-size:1.0625rem; line-height:1.7; max-width:640px; margin:0 auto }

/* ---- NAV ---- */

/* Program card */
/*.prog-card {
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  transition:transform 0.35s cubic-bezier(0.23,1,0.32,1), box-shadow 0.35s ease, border-color 0.25s ease;
  display:flex;
  flex-direction:column;
}
.prog-card:hover {
  transform:translateY(-8px);
  box-shadow:0 20px 48px rgba(132,85,239,0.15);
  border-color:#ae8dff;
}
.prog-card img {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  transition:transform 0.5s ease;
}
.prog-card:hover img { transform:scale(1.04) }
.prog-card-body {
  padding:16px 20px 20px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.prog-card-body h3 {
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:1rem;
  color:#111827;
  margin-bottom:6px;
}
.prog-card-body p {
  font-family:'Manrope',sans-serif;
  color:#6b7280;
  font-size:0.875rem;
  line-height:1.5;
  margin-bottom:16px;
  max-height:2.625rem;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
*/
/* Category pill */
.cat-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 14px;
  border-radius:99px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:0.75rem;
  margin-bottom:14px;
}

/* Hero */
.page-eyebrow { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.2em; color:#8455ef; margin-bottom:16px }
#hero-section { position:relative; background:#ffffff; overflow:hidden; min-height:420px; display:flex; align-items:center; justify-content:center }
#hero-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none }

/* Grid */
.programs-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px }

@media (max-width:1024px) { .programs-grid { grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px)  { .programs-grid { grid-template-columns:1fr } }
@media (max-width:768px)  {
  #navLinks { display:none }
  #hamburger { display:block !important }
  .footer-grid { grid-template-columns:repeat(2,1fr) !important }
}
@media (max-width:480px) {
  .footer-grid { grid-template-columns:1fr !important }
}

/* Filter tabs */
.filter-tab {
  padding:8px 22px;
  border-radius:99px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:0.875rem;
  border:1px solid #e5e7eb;
  background:#ffffff;
  color:#6b7280;
  cursor:pointer;
  transition:all 0.2s ease;
}
.filter-tab:hover, .filter-tab.active {
  background:linear-gradient(to right,#8455ef,#3adffa);
  color:#ffffff;
  border-color:transparent;
}


/* ---- BLOG SINGLE LAYOUT ---- */
.blog-single-section { max-width:1280px; margin:0 auto; padding:48px 24px 80px; display:grid; grid-template-columns:1fr 360px; gap:48px }

/* ---- ARTICLE ---- */
.article-header { margin-bottom:32px }
.article-meta { display:flex; align-items:center; gap:16px; margin-bottom:16px }
.article-date { font-family:'Space Grotesk',sans-serif; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; color:#ae8dff }
.article-category { font-family:'Space Grotesk',sans-serif; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; background:linear-gradient(135deg,rgba(186,158,255,0.15),rgba(58,223,250,0.1)); color:#8455ef; padding:4px 12px; border-radius:99px }
.article-title { font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:clamp(1.75rem,4vw,2.5rem); line-height:1.2; color:#111827; margin-bottom:20px }
.article-featured-img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:16px; margin-bottom:32px; background:#f3f4f6 }

.article-content { font-family:'Manrope',sans-serif; font-size:1.0625rem; line-height:1.85; color:#374151 }
.article-content h2 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.5rem; color:#111827; margin:40px 0 16px }
.article-content h3 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.2rem; color:#111827; margin:32px 0 12px }
.article-content p { margin-bottom:20px }
.article-content ul, .article-content ol { margin:0 0 20px 24px }
.article-content li { margin-bottom:8px ; list-style:disc;}
.article-content blockquote { border-left:4px solid #ba9eff; padding:16px 24px; margin:24px 0; background:rgba(186,158,255,0.06); border-radius:0 12px 12px 0; font-style:italic; color:#6b7280 }
.article-content a { color:#8455ef; font-weight:600; transition:color 0.2s }
.article-content a:hover { color:#ba9eff }

.article-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:40px; padding-top:24px; border-top:1px solid #e5e7eb }
.article-tag { font-family:'Space Grotesk',sans-serif; font-size:0.75rem; font-weight:600; padding:6px 14px; border-radius:99px; background:rgba(186,158,255,0.1); color:#8455ef; transition:background 0.2s }
.article-tag:hover { background:rgba(186,158,255,0.2) }

/* ---- SIDEBAR ---- */
.sidebar { position:sticky; top:120px; align-self:start }
.sidebar-title { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.125rem; color:#111827; margin-bottom:20px; padding-bottom:12px; border-bottom:2px solid rgba(186,158,255,0.3) }

.sidebar-card { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid #f3f4f6; transition:transform 0.2s }
.sidebar-card:hover { transform:translateX(4px) }
.sidebar-card:last-child { border-bottom:none }
.sidebar-card-img { width:80px; height:60px; border-radius:10px; object-fit:cover; flex-shrink:0; background:#f3f4f6 }
.sidebar-card-body { display:flex; flex-direction:column; justify-content:center }
.sidebar-card-date { font-family:'Space Grotesk',sans-serif; font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:#ae8dff; margin-bottom:4px }
.sidebar-card-title { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.84rem; color:#111827; line-height:1.35 }
.sidebar-card-title:hover { color:#8455ef }

/* ---- RESPONSIVE ---- */
@media (max-width:960px) {
  .blog-single-section { grid-template-columns:1fr; gap:40px }
  .sidebar { position:static }
}
@media (max-width:768px) {
  nav#navbar #navLinks,
  nav#navbar .nav-links {
    display: none;
    position: fixed;
    top: 70px;
    left: 12px;
    right: 12px;
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(132,85,239,0.15);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(132,85,239,0.12);
    padding: 8px 0;
    flex-direction: column;
    gap: 0;
    z-index: 999;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  nav#navbar #navLinks.open,
  nav#navbar .nav-links.open { display: flex; }
  nav#navbar #navLinks.visible,
  nav#navbar .nav-links.visible { opacity: 1; transform: translateY(0) scale(1); }
  nav#navbar #navLinks .nav-link,
  nav#navbar .nav-links .nav-link {
    width: 100%;
    padding: 16px 24px;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, #8455ef, #ec63ff) 1;
    display: flex !important;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    transition: color 0.18s, background 0.18s;
  }
  nav#navbar #navLinks .nav-link:last-child,
  nav#navbar .nav-links .nav-link:last-child { border-bottom: none; }
    nav#navbar #navLinks .nav-link:hover,
    nav#navbar .nav-links .nav-link:hover { background: rgba(132,85,239,0.06) !important; color: #8455ef !important; }
    nav#navbar #navLinks .nav-item,
    nav#navbar .nav-links .nav-item { width: 100%; display: block; }
    nav#navbar #navLinks .nav-dropdown-menu,
    nav#navbar .nav-links .nav-dropdown-menu {
      position: static;
      transform: none;
      box-shadow: none;
      border: none;
      background: rgba(132,85,239,0.04);
      margin: 0;
      padding: 0 0 8px;
      display: none;
    }
    nav#navbar #navLinks .nav-dropdown-menu.mobile-open,
    nav#navbar .nav-links .nav-dropdown-menu.mobile-open {
      display: block;
    }
    nav#navbar .nav-dropdown-arrow.rotated {
      transform: rotate(180deg);
    }
    nav#navbar #navLinks .nav-dropdown-menu .nav-dropdown-link,
    nav#navbar .nav-links .nav-dropdown-menu .nav-dropdown-link {
      padding: 10px 24px 10px 48px;
      width: 100%;
      color: #374151 !important;
      font-size: 0.9rem !important;
      font-weight: 500 !important;
    }
    nav#navbar #navLinks .nav-dropdown-menu .nav-dropdown-link:hover,
    nav#navbar .nav-links .nav-dropdown-menu .nav-dropdown-link:hover {
      background: rgba(132,85,239,0.08) !important;
      color: #8455ef !important;
    }
    nav#navbar #navLinks .nav-cta,
    nav#navbar .nav-links .nav-cta {
    margin: 12px 24px;
    width: calc(100% - 48px);
    background: linear-gradient(to right, #8455ef, #ec63ff) !important;
    color: #ffffff !important;
    text-align: center !important;
    border-radius: 99px;
    padding: 12px 22px;
  }
  #hamburger { display: block !important; }
}

@media (max-width: 768px) {
  #navLinks .nav-icon { display: inline-flex !important; }
  #navLinks.open {
    display: flex !important;
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }
  #navLinks .nav-link {
    color: #374151 !important;
  }
}

@media (max-width: 768px) {
    .blog-single-section,
    .blog-single-section article,
    .article-header,
    .article-content {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 5px !important;
        /*padding-left: 10px !important;*/
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        
    }
}