/* ═══════════════════════════════════════
   STEM NINJA — Global Stylesheet
   Font: Ubuntu (headings) + DM Sans (body)
═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

:root {
  --navy:     #0d1b3e;
  --navy-mid: #152652;
  --gold:     #f5a623;
  --gold-lt:  #ffd06a;
  --red:      #e8394a;
  --white:    #ffffff;
  --off:      #f7f5f0;
  --muted:    rgba(255,255,255,0.55);
  --border:   rgba(255,255,255,0.09);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--navy);
  color: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.6;
}
img { max-width:100%; display:block; }
a { text-decoration:none; }

/* ── NAV ── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 52px);
  background: rgba(13,27,62,0.97);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(245,166,35,0.14);
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; text-decoration: none;
  flex-shrink: 0;
}
.nav-logo img { height:40px; width:40px; object-fit:contain; }
.nav-logo-text {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700; font-size: 17px;
  color: var(--white); letter-spacing: 0.4px;
}
.nav-logo-text span { color: var(--gold); }

.nav-links {
  display: flex; align-items: center;
  gap: 2px; list-style: none;
}
.nav-links a {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.62);
  padding: 7px 13px; border-radius: 8px;
  transition: all .2s; cursor: pointer; display:block;
}
.nav-links a:hover,
.nav-links a.active { color:var(--white); background:rgba(245,166,35,0.11); }
.nav-links a.active  { color:var(--gold); }
.nav-cta {
  background: var(--gold) !important;
  color: var(--navy) !important;
  font-weight: 700 !important;
  border-radius: 9px !important;
}
.nav-cta:hover { background: var(--gold-lt) !important; }

/* Hamburger */
.nav-hamburger {
  display: none; flex-direction: column; gap:5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-hamburger span {
  display: block; width:24px; height:2px;
  background: var(--white); border-radius:2px;
  transition: all .3s;
}
.nav-mobile {
  display: none; flex-direction: column;
  background: rgba(13,27,62,0.98);
  border-bottom: 1px solid rgba(245,166,35,0.14);
  padding: 12px 20px 20px;
  position: fixed; top:68px; left:0; right:0; z-index:199;
}
.nav-mobile.open { display:flex; }
.nav-mobile a {
  font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,0.72);
  padding: 11px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
}
.nav-mobile a.active { color:var(--gold); }
.nav-mobile a:last-child { border:none; }

/* ── PAGE WRAPPER ── */
.page-wrap { padding-top: 68px; min-height: 100vh; }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4 { font-family:'Ubuntu',sans-serif; line-height:1.12; }
h1 { font-size: clamp(34px,5vw,64px); font-weight:700; }
h2 { font-size: clamp(24px,3vw,38px); font-weight:700; }
h3 { font-size: clamp(17px,2vw,22px); font-weight:700; }

.label {
  font-family:'DM Sans',sans-serif;
  font-size:11px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--gold); margin-bottom:10px;
  display:block;
}
.muted { color: var(--muted); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items:center; gap:7px;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700; font-size: 14px;
  border-radius: 11px; border: none;
  padding: 13px 28px;
  cursor: pointer; transition: all .2s;
  text-decoration: none; white-space:nowrap;
}
.btn-gold  { background:var(--gold); color:var(--navy); }
.btn-gold:hover { background:var(--gold-lt); transform:translateY(-2px); box-shadow:0 10px 28px rgba(245,166,35,.3); }
.btn-outline { background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.22); }
.btn-outline:hover { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.06); }
.btn-outline-gold { background:transparent; color:var(--gold); border:1px solid rgba(245,166,35,.35); }
.btn-outline-gold:hover { background:rgba(245,166,35,.1); border-color:var(--gold); }
.btn-sm { padding:9px 18px; font-size:12px; border-radius:8px; }

/* Resource badges */
.res-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.res-btn {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.4px;
  padding:7px 14px; border-radius:7px;
  border:none; cursor:pointer; text-decoration:none;
  transition: all .2s;
}
.res-free { background:rgba(46,204,113,.14); color:#2ecc71; border:1px solid rgba(46,204,113,.28); }
.res-free:hover { background:rgba(46,204,113,.24); }
.res-paid { background:rgba(245,166,35,.13); color:var(--gold); border:1px solid rgba(245,166,35,.28); }
.res-paid:hover { background:rgba(245,166,35,.22); }
.res-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.res-free .res-dot { background:#2ecc71; }
.res-paid .res-dot { background:var(--gold); }

/* ── SECTIONS ── */
.section { padding: clamp(52px,8vw,88px) clamp(16px,5vw,56px); }
.section-alt { background: rgba(255,255,255,.025); }

/* ── CARDS ── */
.card {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  transition: all .3s;
}
.card:hover {
  border-color: rgba(245,166,35,.24);
  background: rgba(245,166,35,.05);
  transform: translateY(-3px);
}

/* ── GRID HELPERS ── */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }

/* ── FOOTER ── */
footer {
  background: rgba(0,0,0,.28);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 36px clamp(16px,5vw,56px);
  display: flex; align-items:center;
  justify-content: space-between; flex-wrap:wrap; gap:16px;
}
footer p { font-size:12px; color:rgba(255,255,255,.3); }
.footer-links { display:flex; gap:20px; flex-wrap:wrap; }
.footer-links a { font-size:12px; color:rgba(255,255,255,.4); transition:color .2s; cursor:pointer; }
.footer-links a:hover { color:var(--gold); }
.footer-social { display:flex; gap:12px; }
.footer-social a {
  width:34px; height:34px; border-radius:8px;
  background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:all .2s;
}
.footer-social a:hover { background:rgba(245,166,35,.15); }

/* ── PLATFORM BADGES ── */
.platform-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  padding:3px 9px; border-radius:5px; margin-bottom:12px;
}
.badge-google   { background:rgba(66,133,244,.14); color:#4285f4; }
.badge-preply   { background:rgba(245,166,35,.13);  color:var(--gold); }
.badge-superprof{ background:rgba(232,57,74,.12);   color:#f07888; }
.badge-youtube  { background:rgba(255,0,0,.11);     color:#ff5555; }

/* ── FORM ── */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:12px; font-weight:600; color:rgba(255,255,255,.62); margin-bottom:6px; }
.form-input, .form-select, .form-textarea {
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.11);
  border-radius:10px;
  padding:11px 14px;
  font-family:'DM Sans',sans-serif; font-size:14px;
  color:var(--white); outline:none; transition:all .2s;
  -webkit-appearance:none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--gold);
  background:rgba(245,166,35,.05);
}
.form-select option { background:var(--navy); color:var(--white); }
.form-textarea { resize:vertical; min-height:90px; }
.form-submit {
  width:100%;
  background:var(--gold); color:var(--navy);
  font-family:'Ubuntu',sans-serif; font-weight:700; font-size:16px;
  border:none; border-radius:12px; padding:15px;
  cursor:pointer; transition:all .2s; margin-top:6px;
}
.form-submit:hover { background:var(--gold-lt); transform:translateY(-1px); box-shadow:0 8px 24px rgba(245,166,35,.3); }
.form-submit:disabled { background:#555; color:#999; transform:none; box-shadow:none; cursor:not-allowed; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
@keyframes spin    { to{transform:rotate(360deg);} }
.anim-1 { animation:fadeUp .55s .05s ease both; }
.anim-2 { animation:fadeUp .55s .15s ease both; }
.anim-3 { animation:fadeUp .55s .25s ease both; }
.anim-4 { animation:fadeUp .55s .35s ease both; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .nav-links    { display:none; }
  .nav-hamburger{ display:flex; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  h1 { font-size:clamp(28px,8vw,40px); }
  .btn { padding:12px 22px; font-size:13px; }
}