/* ── PAGE HERO ── */
.og-hero {
  background: linear-gradient(135deg, var(--teal-950) 0%, var(--teal-900) 100%);
  padding: 108px 24px 68px; text-align: center; position: relative; overflow: hidden;
}
.og-hero::before {
  content:''; position: absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size: 52px 52px;
}
.og-hero-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.og-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(31,207,150,.12); border: 1px solid rgba(31,207,150,.25);
  color: var(--teal-300); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 18px; border-radius: 100px; margin-bottom: 22px;
}
.og-hero-badge::before { content:''; width:6px; height:6px; border-radius:50%; background: var(--teal-400); animation: og-pulse 2s infinite; }
@keyframes og-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.75)} }
.og-hero h1 { font-family: var(--font-display); font-size: clamp(28px,5vw,50px); font-weight: 800; color:#fff; letter-spacing:-.03em; margin-bottom:14px; }
.og-hero h1 em { font-style:normal; color: var(--teal-300); }
.og-hero p { font-size:15px; color:rgba(255,255,255,.68); max-width:520px; margin:0 auto; }

/* ── EYEBROW / SECTION TITLE ── */
.og-eyebrow {
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color: var(--teal-600); display:flex; align-items:center; gap:10px; margin-bottom:8px;
}
.og-eyebrow::before { content:''; display:inline-block; width:24px; height:2px; background: var(--teal-400); border-radius:2px; }
.og-section-title { font-family: var(--font-display); font-size: clamp(22px,3vw,30px); font-weight:700; color: var(--ink); letter-spacing:-.025em; line-height:1.15; }

/* ── LEVEL TABS (Bootstrap nav-pills override) ── */
.og-level-nav {
  background: var(--surface); border:1px solid var(--border);
  border-radius: 14px; padding: 5px; width: fit-content;
  margin: 0 auto 48px; box-shadow: var(--shadow-card);
  display:flex; gap:0;
}
.og-level-nav .nav-link {
  font-size:13px; font-weight:600; border-radius:10px;
  padding: 10px 26px !important; color: var(--ink-faint) !important;
  background:transparent; display:flex; align-items:center; gap:8px; border:none;
  transition: background .2s, color .2s, box-shadow .2s;
}
.og-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.og-dot-basic { background:#12a878; }
.og-dot-inter { background:#3b82f6; }
.og-dot-adv   { background:#f59e0b; }
.og-level-nav .nav-link.active { color: var(--ink) !important; box-shadow: 0 2px 10px rgba(6,110,80,.10); }
.og-level-nav .nav-link.og-tab-basic.active  { background: var(--teal-50); color: var(--teal-800) !important; }
.og-level-nav .nav-link.og-tab-inter.active  { background: #eff6ff; color:#1d4ed8 !important; }
.og-level-nav .nav-link.og-tab-adv.active    { background: #fffbeb; color:#92400e !important; }

/* ── LEVEL BADGE ── */
.og-level-badge {
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.08em; padding:6px 16px; border-radius:100px; text-transform:uppercase;
}
.og-level-badge.basic { background: var(--teal-100); color: var(--teal-800); }
.og-level-badge.inter { background:#dbeafe; color:#1e40af; }
.og-level-badge.adv   { background:#fef3c7; color:#92400e; }
.og-level-desc { font-size:14px; color: var(--ink-faint); margin:0; }

/* ── MODULE CARD ── */
.og-module-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px 20px; height:100%;
  box-shadow: var(--shadow-card);
  transition: transform .22s, box-shadow .22s, border-color .22s;
  position:relative; overflow:hidden;
}
.og-module-card:hover { transform:translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--border-mid); }
.og-module-icon {
  width:40px; height:40px; border-radius:11px; margin-bottom:14px;
  background: linear-gradient(135deg, var(--teal-50) 0%, rgba(31,207,150,.08) 100%);
  border:1px solid rgba(15,136,98,.18);
  display:flex; align-items:center; justify-content:center;
  color: var(--teal-600); font-size:16px;
  transition: background .22s, border-color .22s;
}
.og-module-card:hover .og-module-icon { background: linear-gradient(135deg, var(--teal-100) 0%, rgba(31,207,150,.15) 100%); border-color: var(--teal-400); }
.og-module-num { font-family: var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.1em; color: var(--teal-500); text-transform:uppercase; margin-bottom:6px; }
.og-module-card h5 { font-family: var(--font-display); font-size:15px; font-weight:700; color: var(--ink); letter-spacing:-.02em; margin-bottom:14px; }
.og-topic-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.og-topic-list li { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color: var(--ink-faint); line-height:1.5; }
.og-topic-list li::before { content:''; width:5px; height:5px; border-radius:50%; background: var(--teal-400); flex-shrink:0; margin-top:5px; }

/* ── DURATION STRIP ── */
.og-strip { background: linear-gradient(135deg, var(--teal-900) 0%, var(--teal-800) 100%); padding: 48px 0; }
.og-stat-val { font-family: var(--font-display); font-size: clamp(26px,4vw,40px); font-weight:800; color: var(--teal-300); letter-spacing:-.03em; display:block; }
.og-stat-lbl { font-size:13px; font-weight:500; color:rgba(255,255,255,.6); letter-spacing:.04em; }
.og-strip-divider { border-right: 1px solid rgba(255,255,255,.1); }
@media(max-width:576px){ .og-strip-divider { border-right:none; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:24px; margin-bottom:24px; } }

/* ── ENROLL SECTION ── */
.og-enroll-card {
  background: linear-gradient(135deg, var(--teal-50) 0%, rgba(31,207,150,.06) 100%);
  border: 1px solid var(--border-mid); border-radius: 20px;
  padding: 48px 36px; text-align:center; position:relative; overflow:hidden;
}
.og-enroll-card::before {
  content:''; position:absolute; inset:0;
  background-image: linear-gradient(rgba(15,136,98,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(15,136,98,.04) 1px,transparent 1px);
  background-size: 32px 32px;
}
.og-enroll-card > * { position:relative; z-index:1; }
.og-offer-badge {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--teal-900); color: var(--teal-300);
  font-family: var(--font-mono); font-size:12px; font-weight:600;
  letter-spacing:.08em; padding:7px 20px; border-radius:100px; margin-bottom:20px;
}
.og-enroll-card h3 { font-family: var(--font-display); font-size: clamp(22px,3.5vw,32px); font-weight:800; color: var(--ink); letter-spacing:-.03em; margin-bottom:10px; }
.og-enroll-card h3 em { font-style:normal; color: var(--teal-600); }
.og-enroll-card .og-sub { font-size:15px; color: var(--ink-faint); max-width:520px; margin:0 auto 32px; }

/* ── SCHEDULE CHIPS ── */
.og-schedule-chip {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--surface); border: 1.5px solid var(--border-mid);
  color: var(--ink-muted); font-size:13px; font-weight:600;
  padding:10px 20px; border-radius:10px; cursor:pointer;
  transition: border-color .18s, background .18s, color .18s, transform .15s var(--ease-spring);
  user-select:none;
}
.og-schedule-chip:hover, .og-schedule-chip.active {
  border-color: var(--teal-500); background: var(--teal-50); color: var(--teal-700); transform:translateY(-2px);
}
.og-schedule-chip.active { border-color: var(--teal-600); background: var(--teal-100); }
.og-schedule-chip i { font-size:13px; color: var(--teal-500); }

/* ── CTA BUTTONS ── */
.btn-og-wa {
  display:inline-flex; align-items:center; gap:9px;
  background:#25D366; color:#fff; font-weight:700; font-size:14px;
  padding:13px 28px; border-radius:10px; border:none;
  transition: background .18s, transform .18s var(--ease-spring);
}
.btn-og-wa:hover { background:#1ebe5b; transform:translateY(-2px); color:#fff; }
.btn-og-call {
  display:inline-flex; align-items:center; gap:9px;
  background: var(--surface); color: var(--ink-muted); font-weight:600; font-size:14px;
  padding:13px 26px; border-radius:10px; border:1.5px solid var(--border-mid);
  transition: border-color .18s, background .18s, transform .18s;
}
.btn-og-call:hover { border-color: var(--teal-500); background: var(--teal-50); color: var(--teal-700); transform:translateY(-2px); }

/* ── CONTACT CARD ── */
.og-contact-card {
  background: var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:34px 28px; text-align:center; box-shadow: var(--shadow-card); height:100%;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.og-contact-card:hover { transform:translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--border-mid); }
.og-contact-card i { font-size:32px; color: var(--teal-600); margin-bottom:16px; display:block; }
.og-contact-card h5 { font-family: var(--font-display); font-size:17px; font-weight:700; color: var(--ink); margin-bottom:8px; }
.og-contact-card p { font-size:14px; line-height:1.8; color: var(--ink-faint); margin:0; }
.og-contact-card a { color: var(--teal-600); font-weight:600; }
.og-contact-card a:hover { color: var(--teal-700); text-decoration:underline; }

/* ── misc ── */
.section-pad { padding: 72px 0; }
.section-pad-sm { padding: 52px 0; }
.bg-surface { background: var(--surface); }
.bg-surface-2 { background: var(--surface-2); }
@media(max-width:768px){ .og-level-nav { flex-direction:column; width:100%; } .og-enroll-card { padding:32px 20px; } .navbar { padding:0 16px; } }