:root{
  --cream:#e4c3ad; --light:#fae1df; --gray:#9ea3b0; --dark:#323f49; --deep:#0d1f2d;
  --bg:#0a151d; --panel:#0f1b26; --panel2:#0c1822; --border:#173246;
}

/* ========== Global ========== */
*{box-sizing:border-box}
html,body{min-height:100%; overflow-x:hidden;}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  background:var(--bg); color:#dbe7f3;
  display:flex; flex-direction:column;
}

/* Wider desktop container */
.container{
  max-width:1320px;   /* wider desktop feel */
  width:100%;
  margin:0 auto;
  padding:clamp(16px, 4vw, 32px);
}
@media (min-width:1400px){ .container{ max-width:1480px; } }

/* Prevent mobile focus auto-zoom */
input,select,textarea,button{ font-size:16px; -webkit-text-size-adjust:100%; }

/* ========== Header / Top Nav ========== */
.site-header{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(90deg,#0d1f2d,#0b1a24);
  border-bottom:1px solid #132330;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:16px}

/* brand on the right (desktop) */
#sideOpen, #moreBtn{ order:1; }            /* menu button on the left */
.brand{
  order:2; margin-left:auto;
  color:#fff; font-weight:800; font-size:24px; text-decoration:none;
  letter-spacing:.5px;
}
.brand span{color:var(--cream)}
.primary-nav{display:flex; align-items:center; gap:6px; order:3}
.primary-nav a{
  color:#c9d2dc; text-decoration:none; padding:10px 12px; border-radius:12px;
}
.primary-nav a:hover{background:#102636; color:#eaf2fb}
.primary-nav a.active{background:#102636; color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.25)}
.desktop-only{display:flex}
.mobile-only{display:none}

/* small icon button (hamburger / close) */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px;border-radius:10px;border:1px solid #23445a;background:#0b1620;color:#cfe3f8;cursor:pointer
}
.icon-btn:hover{background:#102a3b;color:#fff;border-color:#2c5b76}

/* ========== Drawer (LEFT slide menu) ========== */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:80;
}
.drawer{
  position:fixed;top:0;left:0;right:auto;height:100dvh;width:min(92vw,380px);
  background:#0f1b26;border-right:1px solid #173246;box-shadow:16px 0 40px rgba(0,0,0,.45);
  transform:translateX(-100%);transition:transform .18s ease-out;z-index:90;display:flex;flex-direction:column
}
.drawer.show{transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:14px 16px;border-bottom:1px solid #173246;background:linear-gradient(180deg,#0f2433,#0e1f2c)}
.drawer-body{padding:12px 14px;overflow:auto}
.drawer-section{margin-bottom:14px}
.drawer-title{color:#e4c3ad;font-weight:800;margin:4px 0 8px}
.link-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.link-line{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  text-decoration:none;color:#cfe3f8;background:#0b1620;border:1px solid #23445a;border-radius:12px;padding:10px 12px
}
.link-line:hover{background:#102a3b;color:#fff;border-color:#2c5b76}
.muted{color:#9fb7c7}
.w-full{width:100%}

/* ========== Buttons & Utilities ========== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid #2c5b76;
  background:linear-gradient(90deg,#1c3a52,#29526d);
  color:#fff; text-decoration:none; font-weight:700;
}
.btn:hover{filter:brightness(1.05)}
.btn.secondary{ background:#13283a; border-color:#29455d; color:#cfe3f8; }
.small{padding:8px 10px; border-radius:10px; font-size:13px}

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #183042; padding:10px; text-align:left}
.table th{color:#9fb7c7}

.ok{color:#9ef7b7}
.bad{color:#ffb9c1}

/* ========== Hero (Home) ========== */
.hero{
  position:relative; text-align:center;
  padding:clamp(64px, 8vw, 120px) clamp(16px, 4vw, 48px);
  background:radial-gradient(circle at 20% 20%, #182a3d, #0d1f2d 80%);
  color:#fff; overflow:hidden;
  border:1px solid var(--border); border-radius:22px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.hero h1{
  font-size:clamp(32px, 4vw, 54px);
  line-height:1.15; font-weight:700; margin:0 0 12px;
}
.hero h1 span{color:var(--cream)}
.hero p{font-size:clamp(16px, 2vw, 20px); color:#d1e3f0; max-width:900px; margin:0 auto}

/* ========== Courses grid/cards ========== */
.courses{margin-top:60px; text-align:center}
.courses h2{color:var(--cream); font-size:28px; margin:0 0 20px}
.grid{
  display:grid;
  gap:clamp(18px, 2vw, 28px);
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  align-items:stretch;
}
.course-card{
  width:100%; max-width:none;
  background:#0f1b26; border:1px solid #20384a; border-radius:20px;
  overflow:hidden; transition:.25s;
  box-shadow:0 5px 15px rgba(0,0,0,.3);
}
.course-card:hover{transform:translateY(-6px); box-shadow:0 10px 25px rgba(0,0,0,.45)}
.course-card img{width:100%; height:200px; object-fit:cover; display:block; background:#0b1620}
.course-card .card-body{padding:18px}
.course-card h3{margin:0 0 6px; color:#fff; font-size:21px}
.course-card .cat{color:#a7b8c7; font-size:14px; margin:0 0 6px}
.course-card .price{color:#ffd8b1; font-weight:800; margin:0 0 12px}

/* ========== Page helpers ========== */
.order-status .btn{margin-top:8px}

/* ========== Sticky Footer ========== */
main.container{flex:1}
.site-footer{
  background:#0b1620; color:#a7b3c0; padding:30px 0; text-align:center; border-top:1px solid #132330;
}

/* ========== Mobile styles ========== */
@media (max-width:768px){
  .desktop-only{display:none}
  .mobile-only{display:flex}

  /* put brand back to normal flow on mobile (menu hidden if not used) */
  .brand{order:1; margin-left:0}
  .primary-nav{order:2}

  /* Bottom Navigation Bar */
  .bottom-nav{
    position:fixed; left:12px; right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom,0));
    background:#0f1b26; border:1px solid #173246;
    border-radius:20px; padding:8px;
    box-shadow:0 18px 40px rgba(0,0,0,.5);
    z-index:60; justify-content:space-between; gap:6px;
  }
  .bn-link{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; padding:8px 6px; text-decoration:none; color:#cfe3f8; border-radius:14px;
  }
  .bn-link svg{width:22px; height:22px; fill:#cfe3f8; opacity:.95}
  .bn-link span{font-size:12px; line-height:1}
  .bn-link:hover{background:#112a3a}
  .bn-link.active{background:#102a3b; color:#fff}
  .bn-link.active svg{fill:#fff}

  /* keep content above bottom bar */
  main.container{padding-bottom:84px}
  .site-footer{padding-bottom:calc(30px + 72px + env(safe-area-inset-bottom,0))}

  /* Hero scale */
  .hero{padding:56px 16px}
  .hero h1{font-size:30px}
  .hero p{font-size:15px}
}