:root{
  --slate-50:#f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-300:#cbd5e1;
  --slate-400:#94a3b8;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-800:#1f2937;
  --slate-900:#0f172a;

  --blue-50:#eff6ff;
  --blue-100:#dbeafe;
  --blue-500:#3b82f6;
  --blue-600:#2563eb;
  --blue-700:#1d4ed8;

  --indigo-50:#eef2ff;
  --indigo-500:#6366f1;
  --indigo-600:#4f46e5;
  --indigo-700:#4338ca;

  --purple-50:#faf5ff;
  --purple-500:#a855f7;

  --green-100:#dcfce7;
  --green-500:#22c55e;
  --green-600:#16a34a;
  --green-700:#15803d;

  --emerald-600:#059669;
  --emerald-700:#047857;

  --orange-500:#f97316;
  --red-500:#ef4444;
}

/* Tailwind breakpoints:
   sm: 640px
   md: 768px
   lg: 1024px
*/

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--slate-900);
  background: linear-gradient(to bottom, var(--slate-50), #ffffff);
}

.page{ min-height:100vh; }

/* Container */
.container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 640px){
  .container{ padding: 0 24px; }
}
@media (min-width: 1024px){
  .container{ padding: 0 32px; }
}

/* Icons */
.icon{
  display:inline-block;
  color: currentColor;
}
.icon-cap{ width:20px; height:20px; color:#fff; }
@media (min-width: 640px){
  .icon-cap{ width:24px; height:24px; }
}
.icon-hero{ width:16px; height:16px; }
@media (min-width: 640px){
  .icon-hero{ width:20px; height:20px; }
}
.icon-trust{
  width:16px; height:16px;
  color: var(--green-600);
  flex-shrink:0;
}
@media (min-width: 640px){
  .icon-trust{ width:20px; height:20px; }
}
.icon-stat{ width:20px; height:20px; color:#fff; }
@media (min-width: 640px){
  .icon-stat{ width:24px; height:24px; }
}
.icon-feature{ width:28px; height:28px; color:#fff; }
@media (min-width: 640px){
  .icon-feature{ width:32px; height:32px; }
}

/* Show/hide helpers */
.show-sm{ display:none; }
.hide-sm{ display:inline; }
@media (min-width: 640px){
  .show-sm{ display:inline; }
  .hide-sm{ display:none; }
}

/* Navigation */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background:#fff;
  border-bottom: 1px solid var(--slate-200);
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
.nav-row{
  height: 64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 8px; /* gap-2 */
}
@media (min-width: 640px){
  .brand{ gap: 12px; } /* sm:gap-3 */
}
.brand-icon{
  /* background: linear-gradient(to bottom right, var(--blue-600), var(--indigo-600)); */
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.brand-text{
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 20px; /* text-xl */
  background: linear-gradient(to right, var(--blue-600), var(--indigo-600));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
@media (min-width: 640px){
  .brand-text{ font-size: 24px; } /* sm:text-2xl */
}

.nav-actions{
  display:flex;
  align-items:center;
  gap: 8px; /* gap-2 */
}
@media (min-width: 640px){
  .nav-actions{ gap: 16px; } /* sm:gap-4 */
}
@media (min-width: 1024px){
  .nav-actions{ gap: 24px; } /* lg:gap-6 */
}

.nav-link{
  color: var(--slate-700);
  text-decoration:none;
  font-weight: 600;
  transition: color .2s ease;
}
.nav-link:hover{ color: var(--blue-600); }

/* hidden md:block */
.nav-link-md{ display:none; }
@media (min-width: 768px){
  .nav-link-md{ display:inline; }
}

/* Buttons */
.btn{
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font-weight: 600;
  border-radius: 12px;
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  user-select:none;
  line-height: 1;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: linear-gradient(to right, var(--blue-600), var(--indigo-600));
  color:#fff;
}
.btn-primary:hover{
  background: linear-gradient(to right, var(--blue-700), var(--indigo-700));
}

.btn-outline{
  background:#fff;
  border-color: var(--blue-600);
  color: var(--blue-600);
}
.btn-outline:hover{ background: var(--blue-50); }

.btn-outline-strong{
  background:#fff;
  border-width: 2px;
  border-color: var(--slate-300);
  color: var(--slate-900);
}
.btn-outline-strong:hover{
  border-color: var(--blue-600);
  color: var(--blue-600);
}

.btn-nav{
  font-size: 14px;           /* text-sm */
  padding: 10px 12px;        /* px-3-ish */
}
@media (min-width: 640px){
  .btn-nav{
    font-size: 16px;         /* sm:text-base */
    padding: 10px 16px;      /* sm:px-4 */
  }
}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.badge-blue{
  background: var(--blue-100);
  color: #1d4ed8;
}
.badge-green{
  background: var(--green-100);
  color: var(--green-700);
}
.badge-hero{
  font-size: 12px; /* text-xs */
}
@media (min-width: 640px){
  .badge-hero{ font-size: 14px; } /* sm:text-sm */
}
.badge-section{
  font-size: 12px;
}
@media (min-width: 640px){
  .badge-section{ font-size: 14px; }
}

/* Hero */
.hero{
  position: relative;
  overflow:hidden;
  padding: 48px 0; /* py-12 */
}
@media (min-width: 640px){
  .hero{ padding: 64px 0; } /* sm:py-16 */
}
@media (min-width: 1024px){
  .hero{ padding: 128px 0; } /* lg:py-32 */
}

.hero-bg{
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom right, var(--blue-50), var(--indigo-50), var(--purple-50));
  opacity: .70;
}
.hero-inner{ position: relative; }

.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 32px; /* gap-8 */
  align-items:center;
}
@media (min-width: 1024px){
  .hero-grid{
    grid-template-columns: 1fr 1fr;
    gap: 48px; /* lg:gap-12 */
  }
}

.hero-title{
  margin: 16px 0 16px; /* mb-4 base */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-size: 30px; /* text-3xl */
}
@media (min-width: 640px){
  .hero-title{
    font-size: 36px; /* sm:text-4xl */
    margin-bottom: 24px; /* sm:mb-6 */
  }
}
@media (min-width: 768px){
  .hero-title{ font-size: 48px; } /* md:text-5xl */
}
@media (min-width: 1024px){
  .hero-title{ font-size: 60px; } /* lg:text-6xl */
}

.hero-title-accent{
  display:block;
  background: linear-gradient(to right, var(--blue-600), var(--indigo-600));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.hero-subtitle{
  margin: 0 0 24px;
  color: var(--slate-600);
  line-height: 1.7;
  font-size: 16px; /* text-base */
}
@media (min-width: 640px){
  .hero-subtitle{
    font-size: 18px; /* sm:text-lg */
    margin-bottom: 32px; /* sm:mb-8 */
  }
}
@media (min-width: 1024px){
  .hero-subtitle{ font-size: 20px; } /* lg:text-xl */
}

.hero-cta{
  display:flex;
  flex-direction: column; /* flex-col */
  gap: 12px;              /* gap-3 */
}
@media (min-width: 640px){
  .hero-cta{
    flex-direction: row; /* sm:flex-row */
    gap: 16px;           /* sm:gap-4 */
  }
}

.btn-hero{
  font-size: 16px;          /* text-base */
  padding: 20px 24px;       /* py-5 px-6 */
  border-radius: 16px;
  width: 100%;              /* w-full */
}
@media (min-width: 640px){
  .btn-hero{
    font-size: 18px;        /* sm:text-lg */
    padding: 24px 32px;     /* sm:py-6 sm:px-8 */
    width: auto;            /* sm:w-auto */
  }
}

/* Trust indicators: grid on mobile, flex from sm */
.trust{
  margin-top: 32px; /* mt-8 */
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px; /* gap-3 */
  color: var(--slate-600);
}
@media (min-width: 640px){
  .trust{
    margin-top: 48px; /* sm:mt-12 */
    display:flex;
    flex-wrap:wrap;
    gap: 24px; /* sm:gap-6 */
  }
}
.trust-item{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 600;
  font-size: 12px; /* text-xs */
}
@media (min-width: 640px){
  .trust-item{ font-size: 14px; } /* sm:text-sm */
}

/* Hero images hidden on mobile (hidden sm:block) */
.hero-images{
  position: relative;
  display:none;
}
@media (min-width: 640px){
  .hero-images{ display:block; }
}
.img-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px; /* gap-2 */
}
@media (min-width: 640px){
  .img-grid{ gap: 12px; } /* sm:gap-3 */
}
.img-tile{
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow:hidden;
  box-shadow: 0 10px 15px rgba(15, 23, 42, 0.08);
  transition: transform .3s ease;
  transform: translateZ(0);
}
.img-tile:hover{ transform: scale(1.05); }
.img-tile img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.img-fade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(to top, #ffffff, rgba(255,255,255,0), rgba(255,255,255,0));
  border-radius: 0.5rem;
}

/* Stats */
.stats{
  padding: 48px 0; /* py-12 */
  background: linear-gradient(to right, var(--blue-600), var(--indigo-600));
}
@media (min-width: 640px){
  .stats{ padding: 64px 0; } /* sm:py-16 */
}
.stats-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px; /* gap-6 */
}
@media (min-width: 640px){
  .stats-grid{ gap: 32px; } /* sm:gap-8 */
}
@media (min-width: 1024px){
  .stats-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.stat{ text-align:center; }
.stat-icon{
  width: 40px; height: 40px; /* w-10 h-10 */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: rgba(255,255,255,0.20);
  margin-bottom: 12px; /* mb-3 */
}
@media (min-width: 640px){
  .stat-icon{
    width: 48px; height: 48px; /* sm:w-12 sm:h-12 */
    margin-bottom: 16px;       /* sm:mb-4 */
  }
}
.stat-value{
  font-weight: 800;
  color:#fff;
  margin-bottom: 4px; /* mb-1 */
  font-size: 24px;    /* text-2xl */
}
@media (min-width: 640px){
  .stat-value{
    font-size: 30px;  /* sm:text-3xl */
    margin-bottom: 8px; /* sm:mb-2 */
  }
}
@media (min-width: 1024px){
  .stat-value{ font-size: 36px; } /* lg:text-4xl */
}
.stat-label{
  color: rgba(219,234,254,0.95);
  font-size: 14px; /* text-sm */
}
@media (min-width: 640px){
  .stat-label{ font-size: 16px; } /* sm:text-base */
}

/* Sections */
.section{
  padding: 48px 0; /* py-12 */
}
@media (min-width: 640px){
  .section{ padding: 64px 0; } /* sm:py-16 */
}
@media (min-width: 1024px){
  .section{ padding: 80px 0; } /* lg:py-20 */
}
.section-white{ background:#fff; }
.section-slate{ background: var(--slate-50); }

.section-head{
  text-align:center;
  margin-bottom: 48px; /* mb-12 */
}
@media (min-width: 640px){
  .section-head{ margin-bottom: 64px; } /* sm:mb-16 */
}

.section-title{
  margin: 12px 0 12px; /* mb-3 */
  padding: 0 16px; /* px-4 */
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  font-size: 24px; /* text-2xl */
}
@media (min-width: 640px){
  .section-title{
    font-size: 30px;  /* sm:text-3xl */
    margin-bottom: 16px; /* sm:mb-4 */
  }
}
@media (min-width: 1024px){
  .section-title{ font-size: 36px; } /* lg:text-4xl */
}

.section-subtitle{
  margin:0 auto;
  padding: 0 16px; /* px-4 */
  max-width: 720px;
  color: var(--slate-600);
  line-height: 1.7;
  font-size: 16px; /* text-base */
}
@media (min-width: 640px){
  .section-subtitle{ font-size: 18px; } /* sm:text-lg */
}
@media (min-width: 1024px){
  .section-subtitle{ font-size: 20px; } /* lg:text-xl */
}

/* Cards grids */
.cards-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 24px; /* gap-6 */
}
@media (min-width: 640px){
  .cards-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px){
  .cards-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; } /* sm:gap-8-ish */
}

/* Card */
.card{
  border: 2px solid var(--slate-200);
  border-radius: 18px;
  background:#fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.card-white{ background:#fff; }

.card-content{
  padding: 24px; /* p-6 */
  text-align:center;
}
@media (min-width: 640px){
  .card-content{ padding: 32px; } /* sm:p-8 */
}

.card-title{
  margin: 0 0 12px; /* mb-3 */
  font-weight: 800;
  color: var(--slate-900);
  font-size: 18px; /* text-lg */
}
@media (min-width: 640px){
  .card-title{
    font-size: 20px; /* sm:text-xl */
    margin-bottom: 16px; /* sm:mb-4 */
  }
}

.card-desc{
  margin:0;
  color: var(--slate-600);
  line-height: 1.7;
  font-size: 14px; /* text-sm */
}
@media (min-width: 640px){
  .card-desc{ font-size: 16px; } /* sm:text-base */
}

.card-hover-blue:hover{
  border-color: rgba(147,197,253,0.9); /* blue-300-ish */
  box-shadow: 0 20px 25px rgba(15,23,42,0.10);
}
.card-hover-green:hover{
  border-color: rgba(134,239,172,0.9); /* green-300-ish */
  box-shadow: 0 20px 25px rgba(15,23,42,0.10);
}

/* Feature icon block (group-hover scale) */
.feature-icon{
  width: 56px; height: 56px; /* w-14 h-14 */
  border-radius: 20px; /* rounded-2xl */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 16px; /* mb-4 */
  transition: transform .2s ease;
  color:#fff;
}
@media (min-width: 640px){
  .feature-icon{
    width: 64px; height: 64px; /* sm:w-16 sm:h-16 */
    margin-bottom: 24px; /* sm:mb-6 */
  }
}
.card:hover .feature-icon{ transform: scale(1.10); }

/* Feature colors */
.bg-blue-500{ background: var(--blue-500); }
.bg-green-500{ background: var(--green-500); }
.bg-purple-500{ background: var(--purple-500); }
.bg-orange-500{ background: var(--orange-500); }
.bg-red-500{ background: var(--red-500); }
.bg-indigo-500{ background: var(--indigo-500); }

/* Section CTA buttons */
.section-cta{
  text-align:center;
  margin-top: 32px; /* mt-8 */
  padding: 0 16px;
}
@media (min-width: 640px){
  .section-cta{ margin-top: 48px; } /* sm:mt-12 */
}
.btn-section{
  padding: 12px 24px;
  border-radius: 14px;
  width: 100%; /* w-full */
  font-size: 14px; /* text-sm */
}
@media (min-width: 640px){
  .btn-section{
    width: auto; /* sm:w-auto */
    padding: 12px 32px;
    font-size: 16px; /* sm:text-base */
  }
}

.btn-green{
  background: linear-gradient(to right, var(--green-600), var(--emerald-600));
  color:#fff;
}
.btn-green:hover{
  background: linear-gradient(to right, var(--green-700), var(--emerald-700));
}

/* Footer */
.footer{
  background: var(--slate-900);
  color:#fff;
  padding: 48px 0; /* py-12 */
}
@media (min-width: 640px){
  .footer{ padding: 64px 0; } /* sm:py-16 */
}
.footer-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* grid-cols-2 */
  gap: 24px; /* gap-6 */
  margin-bottom: 32px;
}
@media (min-width: 640px){
  .footer-grid{ gap: 32px; } /* sm:gap-8 */
}
@media (min-width: 768px){
  .footer-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } /* md:grid-cols-4 */
}
.footer-col-span{
  grid-column: span 2 / span 2; /* col-span-2 */
}
@media (min-width: 768px){
  .footer-col-span{
    grid-column: span 1 / span 1; /* md:col-span-1 */
  }
}

.footer-brand{
  display:flex;
  align-items:center;
  gap: 8px; /* gap-2 */
  margin-bottom: 16px;
}
@media (min-width: 640px){
  .footer-brand{ gap: 12px; } /* sm:gap-3 */
}
.footer-brand-icon{
  /* background: linear-gradient(to bottom right, var(--blue-600), var(--indigo-600)); */
  padding: 8px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.footer-brand-text{
  font-weight: 800;
  font-size: 18px; /* text-lg */
}
@media (min-width: 640px){
  .footer-brand-text{ font-size: 20px; } /* sm:text-xl */
}
.footer-muted{
  color: var(--slate-400);
  margin:0;
  font-size: 14px;
}
@media (min-width: 640px){
  .footer-muted{ font-size: 16px; }
}

.footer-title{
  margin: 0 0 12px; /* mb-3 */
  font-weight: 800;
  font-size: 14px; /* text-sm */
}
@media (min-width: 640px){
  .footer-title{
    margin-bottom: 16px; /* sm:mb-4 */
    font-size: 16px;     /* sm:text-base */
  }
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 8px;
  color: var(--slate-400);
  font-size: 14px;
}
@media (min-width: 640px){
  .footer-links{ font-size: 16px; }
}
.footer-links a{
  color: var(--slate-400);
  text-decoration:none;
  transition: color .2s ease;
}
.footer-links a:hover{ color:#fff; }

.footer-bottom{
  border-top: 1px solid rgba(30,41,59,0.9); /* slate-800-ish */
  padding-top: 24px; /* pt-6 */
  text-align:center;
  color: var(--slate-400);
  font-size: 14px;
}
@media (min-width: 640px){
  .footer-bottom{
    padding-top: 32px; /* sm:pt-8 */
    font-size: 16px;
  }
}


/* --- Shuffle grid (works with your shuffle.js) --- */
.grid-container{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;            /* matches the old grid spacing vibe */
  width: 100%;
}

.shuffle-item{
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 15px rgba(15, 23, 42, 0.10);
  transform: translateZ(0);
  will-change: transform;
}

.shuffle-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Same behavior as the React version: hidden on mobile, visible from sm */
.hero-images{ display:none; position:relative; }
@media (min-width: 640px){
  .hero-images{ display:block; }
}

/* --- Logo sizing (prevents giant logo) --- */
.brand-icon-img,
.footer-brand-icon-img{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
}

.brand-icon-img img,
.footer-brand-icon-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* use 'cover' if you want it cropped */
  display: block;
}

@media (min-width: 640px){
  .brand-icon-img,
  .footer-brand-icon-img{
    width: 50px !important;
    height: 60px;
    flex-basis: 44px;
  }
}

a{
    text-decoration: none;
}

/* =========================================================
   Added: Sidebar + Logged-in Navbar (Home)
   Paste at the end of home_test.css
   ========================================================= */

/* missing tokens used by dropdown shadows/rings */
:root{
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-2xl: 0 25px 60px rgba(2,6,23,.18);
  --ring: 0 0 0 4px rgba(37,99,235,.20);
}

/* sidebar icons use .icon without size on home -> give a safe default */
.icon{ width:20px; height:20px; }
.icon--small{ width:16px; height:16px; }

/* nav layout: menu + brand on the left */
.nav-left{
  display:flex;
  align-items:center;
  gap: 12px;
}

/* active link in navbar */
.nav-link-active{ color: var(--blue-600); }

/* icon button (menu / bell) */
.iconbtn{
  border:0;
  background: transparent;
  padding: 8px;
  border-radius: 12px;
  cursor:pointer;
  color: var(--slate-700);
  transition: background .2s ease, color .2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.iconbtn:hover{ background: var(--slate-100); }
.iconbtn--ghost{ background: transparent; color: var(--slate-700); }
.iconbtn--ghost:hover{ background: var(--slate-100); }

/* auth group (logged-in controls) */
.nav-auth{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* dropdown (notifications) */
.dropdown{ position: relative; }

.dropdown__menu{
  position:absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 320px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  box-shadow: var(--shadow-2xl);
  overflow:hidden;
  z-index: 1200;
}

.dropdown__header{
  padding: 14px 16px;
  border-bottom: 1px solid var(--slate-200);
}
.dropdown__header h3{
  margin:0;
  font-size: 15px;
  font-weight: 900;
  color: var(--slate-900);
}

.dropdown__item{
  width:100%;
  text-align:left;
  background: transparent;
  border:0;
  padding: 14px 16px;
  cursor:pointer;
  transition: background .2s ease;
}
.dropdown__item:hover{ background: var(--slate-50); }

.dropdown__title{
  margin:0 0 4px 0;
  font-size: 14px;
  font-weight: 900;
  color: var(--slate-900);
}
.dropdown__desc{
  margin:0;
  font-size: 13px;
  color: var(--slate-600);
}

.notif-dot{
  position:absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: var(--red-500);
  border-radius: 999px;
}

/* overlay + sidebar (same behavior as Courses page) */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1100; /* above navbar */
}

.sidebar{
  position: fixed;
  top:0; left:0;
  height: 100%;
  width: 256px;
  background: #fff;
  border-right: 1px solid var(--slate-200);
  z-index: 1150;
  transform: translateX(-100%);
  transition: transform .3s ease;
}

.sidebar--open{ transform: translateX(0); }
.sidebar--closed{ transform: translateX(-100%); }

.sidebar__inner{
  height: 100%;
  display:flex;
  flex-direction: column;
}

.sidebar__top{
  padding: 24px;
  border-bottom: 1px solid var(--slate-200);
  position: relative;
}

.sidebar__close{
  position:absolute;
  top: 16px; right: 16px;
  border:0;
  background: transparent;
  padding: 8px;
  border-radius: 12px;
  color: var(--slate-600);
  cursor:pointer;
  transition: background .2s ease, color .2s ease;
}
.sidebar__close:hover{
  background: var(--slate-100);
  color: var(--slate-700);
}

.sidebar__logo{
  display:flex;
  flex-direction: column;
  align-items: center;
}
.sidebar__logoMark{
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sidebar__logoSvg{ width:100%; height:100%; display:block; }

.sidebar__brand{
  margin:0;
  font-size: 24px;
  font-weight: 900;
  color: var(--slate-900);
}

.sidebar__nav{
  flex:1;
  overflow:auto;
  padding: 24px;
}

.sidebar__section{ margin-bottom: 32px; }
.sidebar__sectionTitle{
  margin: 0 0 16px 0;
  font-size: 12px;
  font-weight: 900;
  color: var(--slate-400);
  letter-spacing: .08em;
}

.sidebar__list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 8px;
}

.sidebar__link{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--slate-700);
  font-weight: 700;
  transition: background .2s ease, color .2s ease;
}
.sidebar__link:hover{ background: var(--slate-100); }

.sidebar__link--active{
  color: var(--blue-600);
  background: var(--blue-50);
}

.main{ min-height: 100vh; }

body.sidebar-open{ overflow:hidden; }