:root{
  --bg:#0a0c13; --bg-alt:#12141e; --panel:#141826; --panel-2:#1a1f30;
  --border:#262c40; --border-soft:#1c2133;
  --text:#eef0f7; --text-muted:#a4aac0; --text-dim:#6c728a;
  --teal:#31e0b4; --teal-10:rgba(49,224,180,.10);
  --amber:#ffb545; --amber-10:rgba(255,181,69,.10); --amber-dim:#e0a256;
  --red:#ff5f6d;
  --radius:12px; --radius-sm:8px; --radius-lg:18px;
  --shadow:0 24px 60px rgba(0,0,0,.4); --shadow-sm:0 8px 22px rgba(0,0,0,.28);
  --font-display:'Space Grotesk', sans-serif; --font-body:'Inter', sans-serif; --font-mono:'JetBrains Mono', monospace;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5{ font-family:var(--font-display); margin:0; font-weight:600; }
p{ margin:0; } a{ text-decoration:none; color:inherit; } ul{ list-style:none; margin:0; padding:0; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }
::selection{ background:var(--teal-10); color:var(--teal); }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

.topnav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #e5f3ea;
}
.topnav .container{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:flex; align-items:center; gap:10px; }
.nav-links{
  display:flex; align-items:center; gap:2px;
  margin-left:auto;
  font-family:var(--font-mono); font-size:14px;
}
.nav-links a{
  color:#52685c;
  padding:9px 14px;
  border-radius:6px 6px 0 0;
  border-bottom:2px solid transparent;
  transition:.15s;
}
.nav-links a:hover{ color:#142420; background:#f4fbf7; }
.nav-links a.on{ color:#22c55e; border-bottom-color:#22c55e; background:#f4fbf7; }
.nav-cta{
  margin-left:24px;
  font-family:var(--font-mono); font-size:14px; font-weight:600;
  color:#181206;
  background:#22c55e;
  padding:12px 22px;
  border-radius:6px;
  transition:.18s ease;
  white-space:nowrap;
}
.nav-cta:hover{ background:#3ddc84; transform:translateY(-2px); box-shadow:0 10px 24px rgba(34,197,94,.35); }
@media(max-width:860px){ .nav-links{ display:none; } }

.breadcrumb{ font-family:var(--font-mono); font-size:12.5px; color:rgba(255,255,255,.55); }
.breadcrumb a:hover{ color:#fff; } .breadcrumb .sep{ margin:0 6px; opacity:.5; }
.chs-item b{ font-variant-numeric:tabular-nums; }

.course-main > section{ scroll-margin-top:130px; }
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.02s; } .reveal-stagger.in > *:nth-child(2){ transition-delay:.08s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.14s; } .reveal-stagger.in > *:nth-child(4){ transition-delay:.20s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.26s; } .reveal-stagger.in > *:nth-child(6){ transition-delay:.32s; }

.roadmap-wrap{ overflow-x:auto; padding-bottom:6px; }
.roadmap-svg{ min-width:920px; width:100%; height:auto; display:block; }
.rm-node-bg{ fill:var(--panel); stroke:var(--border); stroke-width:1.5; }
.rm-node-bg.active{ stroke:var(--teal); }
.rm-node-icon{ font-family:var(--font-mono); font-size:20px; }
.rm-node-title{ font-family:var(--font-display); font-size:14px; font-weight:600; fill:var(--text); }
.rm-node-sub{ font-family:var(--font-mono); font-size:10.5px; fill:var(--text-dim); }
.rm-flow-line{ fill:none; stroke:var(--border); stroke-width:2; }
.rm-flow-dash{ fill:none; stroke:var(--teal); stroke-width:2; stroke-dasharray:6 10; animation:rmFlow 1.6s linear infinite; }
@keyframes rmFlow{ to{ stroke-dashoffset:-64; } }
.rm-pulse-ring{ fill:none; stroke:var(--teal); stroke-width:1.5; opacity:.6; transform-origin:center; animation:rmPulseRing 2.4s ease-out infinite; }
@keyframes rmPulseRing{ 0%{ opacity:.55; transform:scale(1); } 100%{ opacity:0; transform:scale(2.6); } }

.curriculum{ position:relative; }
.curriculum::before{ content:''; position:absolute; left:37px; top:22px; bottom:22px; width:2px; background:linear-gradient(var(--teal), var(--border) 60%); opacity:.35; }
.module{ position:relative; z-index:1; transition:border-color .2s ease; }
.module:hover{ border-color:var(--teal); }
.module-head:hover{ background:rgba(255,255,255,.02); }
.module-num{ transition:transform .25s ease, box-shadow .25s ease; }
.module.open .module-num{ transform:scale(1.08); box-shadow:0 0 0 4px var(--teal-10); }
.module-body-inner li{ opacity:0; transform:translateX(-6px); transition:opacity .3s ease, transform .3s ease; }
.module.open .module-body-inner li{ opacity:1; transform:translateX(0); }
.module.open .module-body-inner li:nth-child(1){ transition-delay:.05s; } .module.open .module-body-inner li:nth-child(2){ transition-delay:.10s; }
.module.open .module-body-inner li:nth-child(3){ transition-delay:.15s; } .module.open .module-body-inner li:nth-child(4){ transition-delay:.20s; }

.day-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.day-chip{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-muted); background:var(--panel); border:1px solid var(--border); padding:8px 14px; border-radius:999px; cursor:pointer; transition:.18s ease; }
.day-chip:hover{ border-color:var(--teal); color:var(--text); }
.day-chip.active{ background:var(--teal-10); border-color:var(--teal); color:var(--teal); }
.timetable tr{ transition:background .2s ease, opacity .2s ease; }
.timetable tr.dim{ opacity:.3; }
.timetable tr.now-row{ background:var(--amber-10); }
.tt-session{ position:relative; }
.tt-session.live::after{ content:''; position:absolute; top:50%; right:-11px; width:6px; height:6px; border-radius:50%; background:var(--amber-dim); transform:translateY(-50%); animation:ttLive 1.6s ease-in-out infinite; }
@keyframes ttLive{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,181,69,.5);} 50%{ box-shadow:0 0 0 5px rgba(255,181,69,0);} }
.now-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; color:var(--amber-dim); background:var(--amber-10); padding:3px 9px; border-radius:999px; margin-left:8px; }
.now-badge .d{ width:5px; height:5px; border-radius:50%; background:var(--amber-dim); }

.tool-chip{ transition:.18s ease; cursor:default; }
.tool-chip:hover{ border-color:var(--teal); color:var(--text); transform:translateY(-2px); }
.outcome-card{ transition:transform .2s ease, border-color .2s ease; }
.outcome-card:hover{ transform:translateY(-3px); border-color:var(--teal); }

.enq-field.shake{ animation:enqShake .35s ease; }
@keyframes enqShake{ 20%,60%{ transform:translateX(-6px);} 40%,80%{ transform:translateX(6px);} }
.enq-submit{ width:100%; margin-top:6px; background:var(--teal); color:var(--bg); border:none; font-family:var(--font-mono); font-weight:700; font-size:14px; padding:13px; border-radius:var(--radius-sm); cursor:pointer; transition:filter .15s ease, transform .15s ease; }
.enq-submit:hover{ filter:brightness(1.08); } .enq-submit:active{ transform:scale(.98); }

footer{ border-top:1px solid var(--border-soft); margin-top:80px; padding:36px 0; }
footer .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--text-dim); font-family:var(--font-mono); }

/* ---- hero quick-query card (replaces the old clock) ---- */
.hero-query{
  background:#ffffff;
  border:none;
  border-radius:20px;
  padding:34px 32px;
  width:100%;
  max-width:400px;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  position:relative;
}
.hero-query::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,#2563eb,#10b981);
  border-radius:20px 20px 0 0;
}
.hero-query h5{
  color:#12131a;
  font-size:20px;
  font-family:var(--font-display);
  font-weight:700;
  margin-bottom:6px;
}
.hero-query .hq-lead{
  color:#6b7280;
  font-size:13.5px;
  margin-bottom:22px;
  line-height:1.5;
}
.hero-query .hq-field{ margin-bottom:4px; }
.hero-query input, .hero-query select{
  width:100%;
  background:#f8f9fb;
  border:1.5px solid #e2e5ea;
  color:#1a1a1a;
  padding:13px 16px;
  border-radius:10px;
  font-size:14.5px;
  font-family:var(--font-body);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.hero-query input::placeholder{ color:#9099a8; }
.hero-query input:focus, .hero-query select:focus{
  outline:none;
  border-color:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.15);
}
.hero-query .hq-error{ color:#e0424f; font-size:11.5px; margin-top:5px; display:none; }
.hero-query .hq-field.err input{ border-color:#e0424f; }
.hero-query .hq-field.err .hq-error{ display:block; }
.hero-query .hq-field.shake{ animation:enqShake .35s ease; }

.hero-query button{
  width:100%;
  background:linear-gradient(90deg, #2563eb, #10b981);
  color:#fff;
  border:none;
  font-family:var(--font-display);
  font-weight:700;
  padding:15px;
  border-radius:10px;
  cursor:pointer;
  font-size:15px;
  margin-top:8px;
  transition:filter .15s ease, transform .1s ease;
}
.hero-query button:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.hero-query button:active{ transform:scale(.98); }
.hero-query .hq-note{
  color:#9099a8;
  font-size:11.5px;
  text-align:center;
  margin-top:14px;
}

/* main spacing */
main{ padding-top:0; }
/* =========================================================
   TechPanda — Course Detail Pages (add-on stylesheet)
   Load AFTER styles.css. Only styles new elements used on
   the 5 course subpages: gen-ai / etl / data-science /
   data-engineering / data-analytics.
   ========================================================= */

/* ---------------------------------------------------------
   Course hero (banner under navbar, above main content)
   --------------------------------------------------------- */
.course-hero{
  position:relative;
  overflow:hidden;
  padding:64px 0 60px;
  background: linear-gradient(135deg, #0f1f5c 0%, #1a3a8f 30%, #1e5f74 65%, #0f7a5a 100%);
  border-bottom:1px solid var(--border-soft);
}
.course-hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.10), transparent 38%),
    radial-gradient(circle at 88% 80%, rgba(127,255,212,.14), transparent 42%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 46px);
  pointer-events:none;
}
.course-hero .container{ position:relative; z-index:1; }

.course-hero-top{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:48px;
  align-items:start;
}

.course-hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; color:#baf7cf;
  background:rgba(127,255,212,.12); border:1px solid rgba(127,255,212,.3);
  padding:6px 14px; border-radius:999px; margin-bottom:20px;
}
.course-hero-badge .dot{
  width:7px; height:7px; border-radius:50%; background:#45ff85;
  animation:heroPulse 2s ease-in-out infinite;
}
@keyframes heroPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(69,255,133,.45); }
  50%{ box-shadow:0 0 0 5px rgba(69,255,133,0); }
}

.course-hero .breadcrumb{ margin-bottom:16px; }
.course-hero h1{ font-size:clamp(30px,4vw,46px); color:#fff; margin-bottom:16px; letter-spacing:-.5px; }
.course-hero-sub{ color:rgba(255,255,255,.85); font-size:16.5px; max-width:560px; margin-bottom:0; line-height:1.6; }

.course-hero-stats{
  margin-top:36px;
  display:flex; gap:14px; flex-wrap:wrap;
}
.chs-item{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding:16px 20px;
  min-width:110px;
  font-family:var(--font-mono); font-size:12.5px; color:rgba(255,255,255,.75);
}
.chs-item b{ display:block; font-size:22px; color:#fff; font-family:var(--font-display); margin-bottom:2px; }

@media (max-width:980px){
  .course-hero-top{ grid-template-columns:1fr; }
}

/* live-batch clock chip */
.batch-clock{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-lg);
  padding:18px 22px;
  min-width:210px;
  text-align:center;
}
.batch-clock .bc-label{ font-family:var(--font-mono); font-size:11.5px; color:#7fffd4; letter-spacing:.5px; margin-bottom:6px; }
.batch-clock .bc-time{ font-family:var(--font-mono); font-size:26px; font-weight:700; color:#fff; letter-spacing:1px; }
.batch-clock .bc-date{ font-size:12px; color:rgba(255,255,255,.65); margin-top:4px; }

/* ---------------------------------------------------------
   Sticky sub-nav (in-page anchor tabs)
   --------------------------------------------------------- */
.course-subnav{
  position:sticky; top:72px; z-index:80;
  background:rgba(11, 11, 11, 0.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-soft);
}
.course-subnav .container{ display:flex; gap:4px; overflow-x:auto; }
.course-subnav a{
  font-family:var(--font-mono); font-size:13.5px; color:var(--text-muted);
  padding:14px 16px; white-space:nowrap; border-bottom:2px solid transparent;
}
.course-subnav a:hover{ color:var(--text); }
.course-subnav a.active{ color:var(--teal); border-bottom-color:var(--teal); }

/* ---------------------------------------------------------
   Two-col layout: main content + sticky sidebar
   --------------------------------------------------------- */
.course-layout{ display:grid; grid-template-columns:1fr 340px; gap:44px; align-items:start; }
.course-main{ display:grid; gap:64px; }
.course-side{ position:sticky; top:132px; display:grid; gap:20px; }

.side-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px; box-shadow:var(--shadow-sm);
}
.side-card h4{ font-size:15px; color:var(--text); margin-bottom:14px; }
.side-price{ font-family:var(--font-mono); font-size:28px; font-weight:700; color:var(--text); margin-bottom:4px; }
.side-price span{ font-size:13px; color:var(--text-dim); font-weight:400; }
.side-list{ display:grid; gap:10px; margin:16px 0; }
.side-list li{ display:flex; gap:8px; font-size:13.5px; color:var(--text-muted); align-items:flex-start; }
.side-list .chk{ color:var(--teal); font-family:var(--font-mono); flex-shrink:0; }

/* ---------------------------------------------------------
   Section title (in-page, not the dark section-head)
   --------------------------------------------------------- */
.blk-title{ font-size:clamp(22px,2.6vw,28px); color:var(--text); margin-bottom:8px; }
.blk-sub{ color:var(--text-muted); font-size:15px; margin-bottom:26px; max-width:640px; }

/* ---------------------------------------------------------
   Curriculum accordion (module list)
   --------------------------------------------------------- */
.curriculum{ display:grid; gap:12px; }
.module{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
}
.module-head{
  width:100%; background:none; border:none; text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:16px; padding:18px 20px;
}
.module-num{
  font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--bg);
  background:var(--teal); width:34px; height:34px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.module-head .m-title{ flex:1; }
.module-head h4{ font-size:15.5px; color:var(--text); margin-bottom:2px; }
.module-head span{ font-size:12.5px; color:var(--text-dim); font-family:var(--font-mono); }
.module-head .plus{ font-family:var(--font-mono); color:var(--teal); font-size:18px; transition:.2s; }
.module.open .plus{ transform:rotate(45deg); }
.module-body{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.module.open .module-body{ max-height:400px; }
.module-body-inner{ padding:0 20px 20px 70px; display:grid; gap:8px; }
.module-body-inner li{ font-size:14px; color:var(--text-muted); display:flex; gap:8px; }
.module-body-inner li::before{ content:'▸'; color:var(--teal); flex-shrink:0; }

/* ---------------------------------------------------------
   Weekly timetable (institute-style schedule grid)
   --------------------------------------------------------- */
.timetable-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); }
.timetable{ width:100%; border-collapse:collapse; min-width:640px; font-size:13.5px; }
.timetable th{
  background:var(--panel-2); color:var(--text-dim); font-family:var(--font-mono);
  font-size:11.5px; font-weight:600; text-align:left; padding:12px 14px; border-bottom:1px solid var(--border);
}
.timetable td{ padding:14px; border-bottom:1px solid var(--border-soft); color:var(--text-muted); vertical-align:top; }
.timetable tr:last-child td{ border-bottom:none; }
.timetable td.slot-time{ font-family:var(--font-mono); color:var(--text-dim); font-size:12.5px; white-space:nowrap; }
.tt-session{ display:inline-block; padding:6px 10px; border-radius:6px; font-size:12.5px; font-weight:500; }
.tt-session.live{ background:var(--amber-10); color:var(--amber-dim); }
.tt-session.lab{ background:var(--teal-10); color:var(--teal); }
.tt-session.off{ color:var(--text-dim); font-family:var(--font-mono); font-size:12px; }

/* ---------------------------------------------------------
   Instructor card
   --------------------------------------------------------- */
.instructor{ display:flex; gap:20px; align-items:center; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; }
.instructor-avatar{
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:20px; color:#12131a;
  background:linear-gradient(135deg, var(--amber), var(--teal));
}
.instructor h4{ font-size:16px; color:var(--text); margin-bottom:3px; }
.instructor span{ font-size:13px; color:var(--text-dim); font-family:var(--font-mono); }
.instructor p{ font-size:13.5px; color:var(--text-muted); margin-top:6px; }

/* ---------------------------------------------------------
   Tools / tech strip
   --------------------------------------------------------- */
.tools-strip{ display:flex; flex-wrap:wrap; gap:10px; }
.tool-chip{
  font-family:var(--font-mono); font-size:13px; color:var(--text-muted);
  border:1px solid var(--border); padding:9px 15px; border-radius:999px;
  display:flex; align-items:center; gap:7px;
}

/* ---------------------------------------------------------
   Outcomes grid
   --------------------------------------------------------- */
.outcome-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.outcome-card{ display:flex; gap:12px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
.outcome-card .ic{ font-size:20px; flex-shrink:0; }
.outcome-card h5{ font-size:14.5px; color:var(--text); margin-bottom:3px; }
.outcome-card p{ font-size:13px; color:var(--text-muted); }

/* Responsive */
@media (max-width:980px){
  .course-layout{ grid-template-columns:1fr; }
  .course-side{ position:static; }
  .outcome-grid{ grid-template-columns:1fr; }
  .course-hero-top{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:760px){
  .course-subnav{ top:0; }
}

/* =========================================================
   Course pages — banner upgrade + enquiry form
   Append this to course-detail.css
   ========================================================= */

/* ---------------------------------------------------------
   Richer hero banner — pattern overlay, badge, floating card
   --------------------------------------------------------- */
.course-hero{
  position:relative;
  overflow:hidden;
  padding:60px 0 56px;
}
.course-hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.08), transparent 35%),
    radial-gradient(circle at 88% 75%, rgba(127,255,212,.10), transparent 40%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 46px);
  pointer-events:none;
}
.course-hero .container{ position:relative; z-index:1;padding-top:8px; }

.course-hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; color:#baf7cf;
  background:rgba(127,255,212,.12); border:1px solid rgba(127,255,212,.3);
  padding:6px 14px; border-radius:999px; margin-bottom:16px;
}
.course-hero-badge .dot{
  width:7px; height:7px; border-radius:50%; background:#45ff85;
  box-shadow:0 0 0 0 rgba(69,255,133,.5);
  animation:heroPulse 2s ease-in-out infinite;
}
@keyframes heroPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(69,255,133,.45); }
  50%{ box-shadow:0 0 0 5px rgba(69,255,133,0); }
}

.course-hero-stats{ margin-top:26px; }
.chs-item{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:12px 16px;
  min-width:100px;
}

/* ---------------------------------------------------------
   Enquiry form (real lead capture — sidebar + inline block)
   --------------------------------------------------------- */
.enquiry-card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow);
}
.enquiry-card h4{ font-size:16px; color:var(--text); margin-bottom:4px; }
.enquiry-card .enq-sub{ font-size:13px; color:var(--text-muted); margin-bottom:18px; }
.enq-field{ margin-bottom:4px; }
.enq-field label{ display:block; font-size:12.5px; color:var(--text-muted); margin-bottom:6px; font-family:var(--font-mono); }
.enq-field input, .enq-field select{
  width:100%; background:var(--bg-alt); border:1px solid var(--border); color:var(--text);
  padding:11px 13px; border-radius:var(--radius-sm); font-size:14px; font-family:var(--font-body);
}
.enq-field input:focus, .enq-field select:focus{ border-color:var(--teal); outline:none; }
.enq-note{ font-size:11.5px; color:var(--text-dim); text-align:center; margin-top:10px; }
.enq-error{ color:var(--red); font-size:12px; margin-top:5px; display:none; }
.enq-field.err input{ border-color:var(--red); }
.enq-field.err .enq-error{ display:block; }

/* Inline banner-style form (below hero, full width) */
.enquiry-banner{
  background:linear-gradient(135deg, #0f1f5c 0%, #1a3a8f 30%, #1e5f74 65%, #0f7a5a 100%);
  border-radius:var(--radius-lg);
  padding:36px;
  display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:center;
}
.enquiry-banner-copy h3{ color:#fff; font-size:22px; margin-bottom:8px; }
.enquiry-banner-copy p{ color:rgba(255,255,255,.8); font-size:14.5px; }
.enquiry-banner-copy ul{ margin-top:14px; display:grid; gap:8px; }
.enquiry-banner-copy li{ font-size:13.5px; color:rgba(255,255,255,.82); display:flex; gap:8px; }
.enquiry-banner-copy .chk{ color:#7fffd4; font-family:var(--font-mono); }
.enquiry-banner .enquiry-card{ background:rgba(255,255,255,.97); }

@media (max-width:760px){
  .enquiry-banner{ grid-template-columns:1fr; }
}
/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
footer{ background:#0c1f16; border-top:1px solid #173627; padding:64px 0 0; }
.footer-grid{ display:grid; grid-template-columns:2.6fr 2fr 2fr 2.2fr; gap:40px; padding-bottom:44px; }
.footer-brand p{ color:#b9d1c2; font-size:14px; margin:16px 0 20px; max-width:280px; }
.footer-brand .brand{ color:#f2fbf5; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:34px; height:34px; border:1px solid #20422f; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; color:#b9d1c2; }
.footer-social a:hover{ color:var(--teal); border-color:var(--teal); }
.footer-col h5{ font-family:var(--font-mono); font-size:13px; color:#7c9a86; margin-bottom:16px; text-transform:uppercase; letter-spacing:.5px; }
.footer-col ul{ display:grid; gap:11px; }
.footer-col a{ color:#b9d1c2; font-size:14.5px; }
.footer-col a:hover{ color:var(--teal); }
.footer-contact li{ display:flex; gap:9px; font-size:14px; color:#b9d1c2; align-items:flex-start; }
.footer-bottom{
  border-top:1px solid #173627;
  padding:22px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:13px;
  color:#7c9a86;
  width:100%;
}
.footer-bottom span:last-child{ margin-left:auto; }
.footer-bottom a{ color:#7c9a86; }
.footer-bottom a:hover{ color:var(--teal); }


.popup-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(6,10,20,.75);
  backdrop-filter:blur(3px);
  z-index:9999;
  align-items:center; justify-content:center;
  padding:20px;
}
.popup-overlay.open{ display:flex; }

.popup-box{
  position:relative;
  display:flex;
  max-width:760px; width:100%;
  background:var(--panel, #141826);
  border:1px solid var(--border, #262c40);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  animation:popupIn .25s ease;
}
@keyframes popupIn{
  from{ opacity:0; transform:scale(.96) translateY(10px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}

.popup-left{
  flex:1.15;
  padding:36px 34px;
  display:flex;
  flex-direction:column;
}
.popup-left h3{
  color:#fff;
  font-size:22px;
  font-family:var(--font-display, inherit);
  margin-bottom:8px;
}
.popup-left > p{
  color:var(--text-muted, #a4aac0);
  font-size:13.5px;
  margin-bottom:22px;
}
.popup-left > p span{
  color:var(--teal, #31e0b4);
  font-family:var(--font-mono, monospace);
  font-weight:700;
}

.popup-left input, .popup-left select{
  width:100%;
  background:var(--bg-alt, #12141e);
  border:1px solid var(--border, #262c40);
  color:#fff;
  padding:12px 14px;
  border-radius:9px;
  font-size:14px;
  font-family:inherit;
  margin-bottom:6px;
  transition:border-color .15s ease;
}
.popup-left input::placeholder{ color:#6c728a; }
.popup-left input:focus, .popup-left select:focus{
  outline:none;
  border-color:var(--teal, #31e0b4);
}
.popup-left select{ color:#a4aac0; cursor:pointer; }
.popup-left select:valid{ color:#fff; }

.field-err{
  display:block;
  color:#ff5f6d;
  font-size:11.5px;
  min-height:14px;
  margin:-2px 0 8px 2px;
}

#pop-submit{
  width:100%;
  background:var(--teal, #31e0b4);
  color:#0a0c13;
  border:none;
  font-weight:700;
  font-size:14.5px;
  padding:13px;
  border-radius:9px;
  cursor:pointer;
  margin-top:8px;
  transition:filter .15s ease, transform .1s ease;
}
#pop-submit:hover{ filter:brightness(1.08); }
#pop-submit:active{ transform:scale(.98); }

#pop-success{
  margin-top:14px;
  text-align:center;
  color:var(--teal, #31e0b4);
  font-size:13.5px;
  font-weight:600;
}

.popup-right{
  flex:1;
  background:
    radial-gradient(circle at 30% 20%, rgba(49,224,180,.25), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255,181,69,.18), transparent 50%),
    linear-gradient(160deg, #0f1f5c 0%, #1a3a8f 45%, #0f7a5a 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px;
  position:relative;
  overflow:hidden;
}
.popup-right::before{
  content:'';
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 1px, transparent 1px, transparent 40px);
}
.popup-right-content{
  position:relative;
  z-index:1;
  text-align:center;
  color:#fff;
}
.popup-right-content .big-num{
  font-family:var(--font-mono, monospace);
  font-size:52px;
  font-weight:700;
  color:#7fffd4;
  line-height:1;
  margin-bottom:8px;
}
.popup-right-content p{
  font-size:13.5px;
  color:rgba(255,255,255,.8);
}

.popup-close{
  position:absolute; top:14px; right:16px;
  width:32px; height:32px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  z-index:2;
  transition:background .15s ease;
}
.popup-close:hover{ background:rgba(255,255,255,.18); }

@media (max-width:640px){
  .popup-box{ flex-direction:column; }
  .popup-right{ display:none; }
  .popup-left{ padding:28px 24px; }
}

.pop-label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--text, #1a1a1a);
  margin-bottom:5px;
  margin-top:2px;
}
.popup-left input, .popup-left select{
  width:100%;
  background:#f8f9fb;
  border:1px solid #e2e5ea;
  color:#1a1a1a;
  padding:12px 14px;
  border-radius:9px;
  font-size:14px;
  font-family:inherit;
  margin-bottom:4px;
  transition:border-color .15s ease;
}
.popup-left input::placeholder{ color:#9099a8; }
.popup-left input:focus, .popup-left select:focus{
  outline:none;
  border-color:#31e0b4;
  box-shadow:0 0 0 3px rgba(49,224,180,.15);
}

.popup-left select option,
.course-select option{
  color:#1a1a1a;
  background:#ffffff;
}
.popup-left select.course-select{
  color:#1a1a1a !important;
  background:#f8f9fb;
}
.popup-left select.course-select option{
  color:#1a1a1a;
  background:#ffffff;
}
.popup-left select option,
.course-select option{
  color:#1a1a1a;
  background:#ffffff;
}
.field-err-msg {
  display: block;
  visibility: hidden;
  color: #d93025;
  font-size: 13px;
  margin-top: 4px;
  min-height: 16px;
}
.field.field-error input,
.field.field-error select {
  border-color: #d93025;
}
.field.field-error .field-err-msg {
  visibility: visible;
}
.hero-query .field-err-msg{
  display:block;
  visibility:hidden;
  font-size:11.5px;
  margin-top:5px;
  min-height:14px;
}
.hero-query .field.field-error .field-err-msg{
  visibility:visible;
}.hero-query .form-success{
  display:none;
  background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.3);
  color:#15803d;
  padding:10px 14px;
  border-radius:8px;
  font-size:13px;
  margin-bottom:14px;
}
.hero-query .form-success.show{ display:block; }
.enq-field .field-err-msg{
  display:block;
  visibility:hidden;
  font-size:11.5px;
  margin-top:5px;
  min-height:14px;
}
.enq-field.field-error .field-err-msg{
  visibility:visible;
}
.enq-field.field-error input,
.enq-field.field-error select{
  border-color:#d93025;
}
.enq-field select.course-select{
  color:var(--text) !important;
  background:var(--bg-alt) !important;
}
.enq-field select.course-select option{
  color:#1a1a1a;
  background:#ffffff;
}
/* ---------------------------------------------------------
   Floating scroll arrows (left)
   --------------------------------------------------------- */
.scroll-arrows{
  position:fixed;
  left:24px; bottom:28px;
  z-index:95;
  display:flex; flex-direction:column; gap:10px;
}
.scroll-arrow{
  width:44px; height:44px;
  border-radius:50%;
  border:none;
  background:var(--amber);
  color:#181206;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(34,197,94,.35);
  transition:.2s ease;
}
.scroll-arrow:hover{
  background:#3ddc84;
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(34,197,94,.45);
}
.scroll-arrow.down{
  background:var(--teal);
  box-shadow:0 8px 20px rgba(13,148,136,.3);
}
.scroll-arrow.down:hover{
  background:#0fb3a3;
  box-shadow:0 12px 26px rgba(13,148,136,.4);
}
@media (max-width:640px){
  .scroll-arrows{ left:14px; bottom:80px; }
  .scroll-arrow{ width:38px; height:38px; }
}

/* ---------------------------------------------------------
   Floating action buttons (right) — Call / WhatsApp / Demo
   --------------------------------------------------------- */
.float-actions{
  position:fixed;
  right:24px; bottom:28px;
  z-index:95;
  display:flex; flex-direction:column; gap:12px;
  align-items:flex-end;
}
.fab{
  display:flex; align-items:center; gap:8px;
  padding:12px 20px;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:13.5px; font-weight:600;
  white-space:nowrap;
  box-shadow:0 10px 24px rgba(16,23,40,.18);
  transition:.2s ease;
}
.fab:hover{ transform:translateY(-3px); }

.fab-call{
  background:#fff8f8;
  color:black;
  border:1px solid var(--border);
}
.fab-call:hover{ box-shadow:0 14px 30px rgba(16,23,40,.22); }

.fab-whatsapp{
  background:#25D366;
  color:#ffffff;
}
.fab-whatsapp:hover{ background:#1ebe5a; box-shadow:0 14px 30px rgba(37,211,102,.4); }

.fab-demo{
  background:var(--amber);
  color:#181206;
}
.fab-demo:hover{ background:#3ddc84; box-shadow:0 14px 30px rgba(34,197,94,.4); }

@media (max-width:640px){
  .float-actions{ right:14px; bottom:80px; gap:10px; }
  .fab{ padding:10px 14px; font-size:12.5px; }
  .fab span.label{ display:none; }
}

/* =========================================================
   MOBILE RESPONSIVE — append at the very end of the file
   ========================================================= */

@media (max-width:980px){
  .course-hero-top{ grid-template-columns:1fr; gap:32px; }
  .hero-query{ max-width:100%; }
  .course-layout{ grid-template-columns:1fr; gap:36px; }
  .course-side{ position:static; }
  .outcome-grid{ grid-template-columns:1fr; }
  .enquiry-banner{ grid-template-columns:1fr; padding:28px; }
  .why-grid, .value-grid, .team-grid, .testi-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:760px){
  /* ---- navbar ---- */
  .topnav .container{ height:60px; }
  .nav-cta{ font-size:12.5px; padding:9px 14px; margin-left:12px; }

  /* ---- course hero ---- */
  .course-hero{ padding:36px 0 32px; }
  .course-hero h1{ font-size:26px; margin-bottom:10px; }
  .course-hero-sub{ font-size:14.5px; }
  .course-hero-badge{ font-size:11px; padding:5px 11px; margin-bottom:14px; }
  .course-hero-stats{ gap:8px; margin-top:22px; }
  .chs-item{ min-width:80px; padding:10px 12px; font-size:11px; }
  .chs-item b{ font-size:17px; }

  /* ---- hero-query form card ---- */
  .hero-query{ padding:24px 20px; border-radius:16px; }
  .hero-query h5{ font-size:17px; }
  .hero-query .hq-lead{ font-size:12.5px; margin-bottom:16px; }
  .hero-query input, .hero-query select{ padding:11px 13px; font-size:14px; }
  .hero-query button{ padding:13px; font-size:14px; }

  /* ---- sticky subnav ---- */
  .course-subnav{ top:0; }
  .course-subnav a{ padding:11px 12px; font-size:12.5px; }

  /* ---- section titles ---- */
  .blk-title{ font-size:22px; }
  .blk-sub{ font-size:13.5px; margin-bottom:18px; }

  /* ---- roadmap (horizontal scroll on mobile) ---- */
  .roadmap-wrap{ margin:0 -24px; padding:0 24px 6px; }
  .roadmap-svg{ min-width:760px; }

  /* ---- curriculum modules ---- */
  .curriculum::before{ left:29px; }
  .module-head{ padding:14px 14px; gap:12px; }
  .module-num{ width:28px; height:28px; font-size:12px; }
  .module-head h4{ font-size:14px; }
  .module-head span{ font-size:11.5px; }
  .module-body-inner{ padding:0 14px 16px 54px; }
  .module-body-inner li{ font-size:13px; }

  /* ---- outcome cards ---- */
  .outcome-card{ padding:14px; }
  .outcome-card h5{ font-size:14px; }
  .outcome-card p{ font-size:12.5px; }

  /* ---- weekly timetable ---- */
  .timetable-wrap{ margin:0 -24px; border-radius:0; border-left:none; border-right:none; }
  .timetable{ font-size:12.5px; min-width:560px; }
  .timetable th{ padding:10px 10px; font-size:10.5px; }
  .timetable td{ padding:10px; }
  .day-filters{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; margin:0 -24px 14px; padding-left:24px; padding-right:24px; }
  .day-chip{ flex-shrink:0; font-size:11.5px; padding:7px 12px; }

  /* ---- instructor card ---- */
  .instructor{ flex-direction:column; text-align:center; padding:20px; gap:14px; }
  .instructor-avatar{ margin:0 auto; }

  /* ---- tools strip ---- */
  .tool-chip{ font-size:12px; padding:7px 12px; }

  /* ---- enquiry banner + cards ---- */
  .enquiry-banner{ padding:20px; border-radius:14px; }
  .enquiry-banner-copy h3{ font-size:19px; }
  .enquiry-banner-copy p{ font-size:13.5px; }
  .enquiry-card{ padding:18px; }
  .enq-field input, .enq-field select{ padding:10px 12px; font-size:13.5px; }

  /* ---- footer ---- */
  .footer-grid{ grid-template-columns:1fr; gap:28px; padding-bottom:32px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:8px; }
  .footer-bottom span:last-child{ margin-left:0; }

  /* ---- popup form ---- */
  .popup-box{ flex-direction:column; max-height:90vh; overflow-y:auto; }
  .popup-right{ display:none; }
  .popup-left{ padding:26px 20px; }
  .popup-left h3{ font-size:19px; }

  /* ---- floating scroll arrows + FAB buttons ---- */
  .scroll-arrows{ left:12px; bottom:76px; gap:8px; }
  .scroll-arrow{ width:36px; height:36px; }
  .float-actions{ right:12px; bottom:76px; gap:8px; }
  .fab{ padding:9px 14px; font-size:12px; gap:6px; }
  .fab svg{ width:15px; height:15px; }

  /* ---- generic card grids ---- */
  .why-grid, .value-grid, .team-grid, .testi-grid{ grid-template-columns:1fr; }
  .partner-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:480px){
  .course-hero h1{ font-size:22px; }
  .course-hero-sub{ font-size:13.5px; }
  .hero-query{ padding:20px 16px; }
  .chs-item{ min-width:70px; padding:8px 10px; }
  .chs-item b{ font-size:15px; }

  /* stack float actions more compactly, hide text labels */
  .float-actions{ gap:6px; }
  .fab{ padding:10px; border-radius:50%; width:40px; height:40px; justify-content:center; }
  .fab .label{ display:none; }
  .fab svg{ margin:0; }

  .scroll-arrow{ width:34px; height:34px; }

  .timetable{ min-width:480px; font-size:11.5px; }
  .roadmap-svg{ min-width:640px; }
}