/* ==========================================================================
   Glass + 3D layer  (loaded last, after enhance.css)
   --------------------------------------------------------------------------
   Three things happen here, and nothing about layout or content order changes:

   1. GLASSMORPHION  - every card, panel, tile and toolbar becomes a real
      frosted pane: translucent fill, backdrop blur, a light-refraction border
      and a specular glare that tracks the pointer.
   2. 3D DEPTH       - cards tilt in perspective, their inner chrome floats on
      separate Z planes, and every hero gets a live 3D scene (drifting orbs,
      a rotating glass cube, orbit rings) that parallaxes to the pointer.
   3. CATEGORIES     - a dedicated .category-grid / .category-card component
      with its own accent hue per card, so category browsing reads as a
      first-class destination instead of a filter pill.

   Cascade notes
   -------------
   Several pages declare a <style> block in the body (lms.php, courses.php,
   lms-course.php...). Those come AFTER this file in document order, so every
   surface rule below is written `body <selector>` to win on specificity
   without resorting to !important.

   Tilt is driven by inline transforms from main.js; the rules here only
   declare the resting state and compose with the two scroll-reveal systems
   already in the codebase (.reveal and the inline-style reveal in main.js).

   Everything collapses to a static, flat presentation under
   prefers-reduced-motion, and decorative layers never print.
   ========================================================================== */

@property --g3-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  /* Glass recipe — tuned for a light canvas: frosted white fill, a soft
     slate edge with a gold/cyan refraction, and light elevation shadows. */
  --g3-fill-1: rgba(255, 255, 255, 0.72);
  --g3-fill-2: rgba(255, 255, 255, 0.42);
  --g3-tint: rgba(255, 255, 255, 0.55);
  --g3-stroke: rgba(255, 255, 255, 0.9);
  --g3-stroke-2: rgba(15, 23, 42, 0.10);
  --g3-blur: 16px;
  --g3-radius: 20px;

  /* Accent channels: gold is the brand, cyan/violet ride along for variety */
  --g3-gold: 212, 175, 55;
  --g3-cyan: 8, 145, 178;
  --g3-violet: 124, 58, 237;
  --g3-accent: 212, 175, 55;

  --g3-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --g3-shadow:
    0 20px 48px rgba(15, 23, 42, 0.12),
    0 4px 14px rgba(15, 23, 42, 0.08);
  --g3-shadow-hi:
    0 28px 64px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(15, 23, 42, 0.05),
    0 0 48px rgba(var(--g3-accent), 0.22);
}

/* ==========================================================================
   1. AMBIENT AURORA  (injected by main.js as body > .g3-ambient)
   Fixed colour blooms + a slow conic sweep behind everything. Separate from
   the body::before blooms in enhance.css so neither has to fight for the
   pseudo-element.
   ========================================================================== */
.g3-ambient {
  position: fixed;
  inset: -12vmax;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

.g3-ambient span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}

.g3-ambient .b1 {
  width: 46vmax; height: 46vmax; left: -8vmax; top: -6vmax;
  background: radial-gradient(circle at 30% 30%, rgba(var(--g3-gold), 0.55), transparent 68%);
  animation: g3-drift-a 34s var(--g3-ease) infinite alternate;
}
.g3-ambient .b2 {
  width: 42vmax; height: 42vmax; right: -10vmax; top: 8vmax;
  background: radial-gradient(circle at 60% 40%, rgba(var(--g3-cyan), 0.42), transparent 66%);
  animation: g3-drift-b 41s var(--g3-ease) infinite alternate;
}
.g3-ambient .b3 {
  width: 52vmax; height: 52vmax; left: 26vmax; bottom: -18vmax;
  background: radial-gradient(circle at 50% 50%, rgba(var(--g3-violet), 0.36), transparent 68%);
  animation: g3-drift-c 47s var(--g3-ease) infinite alternate;
}

@keyframes g3-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vmax, 6vmax, 0) scale(1.14); }
}
@keyframes g3-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-8vmax, 9vmax, 0) scale(0.94); }
}
@keyframes g3-drift-c {
  from { transform: translate3d(0, 0, 0) scale(0.96); }
  to   { transform: translate3d(-11vmax, -7vmax, 0) scale(1.12); }
}

/* ==========================================================================
   2. GLASS SURFACES
   The shared recipe: a translucent pane over a light-refraction border.
   `padding-box / border-box` gives a genuine glass edge with no extra node.
   ========================================================================== */
body :is(
  .card,
  .program-card,
  .course-card,
  .module-card,
  .testimonial-card,
  .benefit-card,
  .quote-card,
  .faq-item,
  .stat-card,
  .sidebar-card,
  .pricing-card,
  .form-container,
  .culture-card,
  .course-info-card,
  .blog-card,
  .auth-card,
  .panel,
  .tile,
  .svc-card,
  .mini-card,
  .catalog-card,
  .filter-card,
  .lms-welcome,
  .resume-card,
  .empty-panel,
  .empty-results,
  .quiz-card,
  .quiz-foot,
  .result-card,
  .rs-card,
  .ai-card,
  .side-card,
  .db-card,
  .ecard,
  .or-card,
  .res-block,
  .course-sb,
  .category-card,
  .ceo-container,
  .cta-content,
  .ad-content
) {
  position: relative;
  border-radius: var(--g3-radius);
  border: 1px solid transparent;
  background:
    linear-gradient(158deg, var(--g3-fill-1) 0%, var(--g3-fill-2) 46%, rgba(255, 255, 255, 0.055) 100%) padding-box,
    linear-gradient(140deg,
      var(--g3-stroke) 0%,
      var(--g3-stroke-2) 34%,
      rgba(var(--g3-accent), 0.42) 74%,
      rgba(var(--g3-cyan), 0.30) 100%) border-box;
  box-shadow:
    var(--g3-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -30px 46px -38px rgba(var(--g3-accent), 0.75);
  backdrop-filter: blur(var(--g3-blur)) saturate(165%);
  -webkit-backdrop-filter: blur(var(--g3-blur)) saturate(165%);
  perspective: 1000px;
  transform-style: flat;
  transition:
    transform 0.55s var(--g3-ease),
    box-shadow 0.55s var(--g3-ease),
    border-color 0.45s var(--g3-ease);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body :is(.card, .program-card, .course-card, .tile, .catalog-card, .category-card) {
    background:
      linear-gradient(158deg, var(--g3-fill-1) 0%, rgba(255, 255, 255, 0.92) 60%, rgba(244, 247, 252, 0.96) 100%) padding-box,
      linear-gradient(140deg, var(--g3-stroke), rgba(var(--g3-accent), 0.42)) border-box;
  }
}

/* Specular glare: a soft highlight that follows the pointer, plus a sheen
   that sweeps the pane on hover. ::after is free on every card class here. */
body :is(
  .card, .program-card, .course-card, .module-card, .testimonial-card,
  .benefit-card, .quote-card, .stat-card, .culture-card, .auth-card,
  .tile, .svc-card, .mini-card, .catalog-card, .category-card,
  .quiz-card, .result-card, .ai-card, .panel, .resume-card, .filter-card
)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s var(--g3-ease);
  background:
    radial-gradient(420px 260px at var(--gx, 50%) var(--gy, 0%),
      rgba(212, 175, 55, 0.12), rgba(8, 145, 178, 0.05) 42%, transparent 70%),
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 66%);
}

body :is(
  .card, .program-card, .course-card, .module-card, .testimonial-card,
  .benefit-card, .quote-card, .stat-card, .culture-card, .auth-card,
  .tile, .svc-card, .mini-card, .catalog-card, .category-card,
  .quiz-card, .result-card, .ai-card, .panel, .resume-card, .filter-card
):hover::after,
body :is(.card, .catalog-card, .category-card, .tile, .svc-card):focus-visible::after {
  opacity: 1;
}

/* Keep card content above the glare layer. */
body :is(.card, .program-card, .course-card, .tile, .catalog-card, .category-card, .svc-card, .mini-card, .quiz-card, .result-card, .ai-card) > * {
  position: relative;
  z-index: 1;
}

/* The gold hairline from enhance.css, reborn as a slow conic sweep so the
   edge of every card quietly catches the light. */
body :is(.card, .program-card, .course-card, .module-card, .benefit-card,
         .quote-card, .stat-card, .category-card, .tile, .catalog-card)::before {
  background: conic-gradient(from var(--g3-angle),
    rgba(var(--g3-gold), 0.75),
    rgba(var(--g3-cyan), 0.45) 22%,
    transparent 46%,
    transparent 68%,
    rgba(var(--g3-gold), 0.55) 100%);
  opacity: 0.42;
  animation: g3-edge 9s linear infinite;
}

@keyframes g3-edge {
  to { --g3-angle: 360deg; }
}

/* ==========================================================================
   3. HOVER DEPTH
   ========================================================================== */
@media (hover: hover) {
  body :is(
    .card, .program-card, .course-card, .module-card, .testimonial-card,
    .benefit-card, .quote-card, .stat-card, .culture-card, .auth-card,
    .tile, .svc-card, .mini-card, .catalog-card, .category-card,
    .quiz-card, .result-card, .ai-card, .resume-card, .filter-card,
    .lms-welcome, .pricing-card, .blog-card
  ):hover {
    border-color: transparent;
    box-shadow: var(--g3-shadow-hi);
  }

  body .program-card:hover,
  body .benefit-card:hover,
  body .stat-card:hover,
  body .category-card:hover,
  body .svc-card:hover,
  body .mini-card:hover {
    transform: translateY(-8px);
  }
}

/* ==========================================================================
   4. INNER Z-PLANES
   The pane carries `perspective`, so its chrome can sit on real depth planes.
   Parent must not flatten: overflow is clipped, which is fine, because the
   depth comes from the perspective property rather than preserve-3d.
   ========================================================================== */
body .program-card .program-icon,
body .benefit-card .benefit-icon,
body .card.benefit-card .benefit-icon,
body .category-card .cc-icon,
body .tile .tile-icon,
body .svc-card > i,
body .stat-card .stat-number,
body .testimonial-card .test-icon {
  transform: translateZ(46px);
  transform-style: preserve-3d;
  transition: transform 0.5s var(--g3-ease), box-shadow 0.4s var(--g3-ease);
}

body .course-card .p-ring,
body .resume-card .p-ring,
body .cc-head .p-ring {
  transform: translateZ(38px);
  filter: drop-shadow(0 12px 20px rgba(2, 6, 16, 0.6));
}

body .program-card:hover .program-icon,
body .benefit-card:hover .benefit-icon,
body .category-card:hover .cc-icon,
body .tile:hover .tile-icon,
body .svc-card:hover > i {
  transform: translateZ(72px) rotateX(-10deg) rotateY(12deg);
}

body .category-card .cc-icon i,
body .svc-card > i {
  font-size: 1.5rem;
}

/* ==========================================================================
   5. CATEGORY CARDS
   ========================================================================== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(238px, 100%), 1fr));
  gap: 22px;
  perspective: 1600px;
}

.category-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px 22px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}

/* Per-card accent so a wall of categories never reads as one flat block. */
.category-grid .category-card:nth-child(3n + 2) { --g3-accent: var(--g3-cyan); }
.category-grid .category-card:nth-child(3n + 3) { --g3-accent: var(--g3-violet); }

.category-card .cc-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #161004;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)) padding-box,
    linear-gradient(140deg, rgba(var(--g3-accent), 1), rgba(var(--g3-accent), 0.55));
  box-shadow:
    0 16px 30px rgba(var(--g3-accent), 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.category-card h3 {
  margin: 0;
  font-size: 1.08rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.category-card p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--gray);
  line-height: 1.65;
  flex: 1;
}

.category-card .cc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.category-card .cc-count {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgb(var(--g3-accent));
  background: rgba(var(--g3-accent), 0.12);
  border: 1px solid rgba(var(--g3-accent), 0.35);
  padding: 5px 11px;
  border-radius: 999px;
}

.category-card .cc-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #eaf0fb;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: transform 0.4s var(--g3-ease), background 0.4s var(--g3-ease), color 0.4s var(--g3-ease);
}

.category-card:hover .cc-arrow {
  background: rgb(var(--g3-accent));
  color: #12100a;
  transform: translateX(5px) scale(1.06);
}

.category-card:hover h3 {
  color: #fff;
}

/* Section header used above any category grid. */
.categories-section { padding: 88px 0; }
.catalog-categories { padding: 46px 0 6px; }

.cat-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-soft);
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.30);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.category-card.is-active {
  border-color: transparent;
  box-shadow:
    0 30px 66px rgba(2, 6, 16, 0.6),
    0 0 0 2px rgba(var(--g3-accent), 0.65),
    0 0 52px rgba(var(--g3-accent), 0.30);
}

.category-card.is-active .cc-arrow {
  background: rgb(var(--g3-accent));
  color: #12100a;
  transform: translateX(5px) scale(1.06);
}

.category-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.category-head .ch-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 8px;
}

.category-head .ch-eyebrow i { color: var(--gold); }

/* ==========================================================================
   6. 3D HERO SCENES  (built by main.js inside [data-3d-scene])
   ========================================================================== */
[data-3d-scene] {
  position: relative;
  overflow: hidden;
}

/* Everything the scene sits behind is lifted one layer, so the decoration can
   never end up on top of a headline. */
[data-3d-scene] > *:not(.g3-scene) {
  position: relative;
  z-index: 1;
}

[data-3d-scene] > .g3-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  perspective: 900px;
  overflow: hidden;
}

.g3-layer {
  position: absolute;
  inset: 0;
  transition: transform 0.9s var(--g3-ease);
  will-change: transform;
}

/* --- drifting glass orbs --- */
.g3-orb {
  position: absolute;
  border-radius: 50%;
  display: block;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.06) 38%, transparent 62%),
    radial-gradient(circle at 70% 78%, rgba(var(--g3-accent), 0.42), transparent 60%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, 0.12),
    0 20px 50px rgba(2, 6, 16, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: g3-float 14s ease-in-out infinite alternate;
  will-change: transform;
}

.g3-orb.o1 { --g3-accent: var(--g3-gold);   width: 190px; height: 190px; left: 4%;  top: 12%; animation-duration: 15s; opacity: .72; }
.g3-orb.o2 { --g3-accent: var(--g3-cyan);   width: 116px; height: 116px; right: 8%; top: 20%; animation-duration: 19s; animation-delay: -4s; opacity: .66; }
.g3-orb.o3 { --g3-accent: var(--g3-violet); width: 76px;  height: 76px;  left: 22%; bottom: 12%; animation-duration: 12s; animation-delay: -7s; opacity: .6; }
.g3-orb.o4 { --g3-accent: var(--g3-gold);   width: 46px;  height: 46px;  right: 26%; bottom: 22%; animation-duration: 10s; animation-delay: -2s; opacity: .7; }

@keyframes g3-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  55%  { transform: translate3d(14px, -26px, 0) scale(1.05); }
  to   { transform: translate3d(-12px, 16px, 0) scale(0.97); }
}

/* --- orbit rings --- */
.g3-ring {
  position: absolute;
  right: 6%;
  top: 50%;
  width: 340px;
  height: 340px;
  margin-top: -170px;
  border-radius: 50%;
  border: 1px dashed rgba(212, 175, 55, 0.34);
  box-shadow: 0 0 44px rgba(212, 175, 55, 0.14), inset 0 0 44px rgba(212, 175, 55, 0.08);
  animation: g3-orbit 38s linear infinite;
}

.g3-ring.r2 {
  right: calc(6% + 44px);
  width: 252px;
  height: 252px;
  margin-top: -126px;
  border-style: solid;
  border-color: rgba(110, 198, 232, 0.30);
  animation-duration: 26s;
  animation-direction: reverse;
}

@keyframes g3-orbit {
  from { transform: rotate(0deg) translateZ(0); }
  to   { transform: rotate(360deg) translateZ(0); }
}

/* --- rotating glass cube --- */
.g3-cube-wrap {
  position: absolute;
  left: 7%;
  top: 26%;
  width: 132px;
  height: 132px;
  perspective: 800px;
}

.g3-cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: g3-cube-spin 26s linear infinite;
}

.g3-cube span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background:
    linear-gradient(140deg, rgba(212, 175, 55, 0.16), rgba(110, 198, 232, 0.07));
  box-shadow: inset 0 0 26px rgba(212, 175, 55, 0.18);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.g3-cube span:nth-child(1) { transform: translateZ(66px); }
.g3-cube span:nth-child(2) { transform: rotateY(180deg) translateZ(66px); }
.g3-cube span:nth-child(3) { transform: rotateY(90deg) translateZ(66px); }
.g3-cube span:nth-child(4) { transform: rotateY(-90deg) translateZ(66px); }
.g3-cube span:nth-child(5) { transform: rotateX(90deg) translateZ(66px); }
.g3-cube span:nth-child(6) { transform: rotateX(-90deg) translateZ(66px); }

@keyframes g3-cube-spin {
  from { transform: rotateX(-22deg) rotateY(0deg); }
  to   { transform: rotateX(-22deg) rotateY(360deg); }
}

/* Small screens: the scene is decoration, keep it out of the reading path. */
@media (max-width: 900px) {
  .g3-ring, .g3-cube-wrap { display: none; }
  .g3-orb.o1 { width: 130px; height: 130px; }
  .g3-orb.o2 { width: 84px; height: 84px; }
}

/* ==========================================================================
   7. LMS 3D  (lms.php / lms-course.php / my-results.php)
   Solid #111a30 panes in the body style blocks are replaced with glass, and
   progress furniture gets real depth.
   ========================================================================== */
body .lms-welcome,
body .resume-card,
body .tile,
body .svc-card,
body .mini-card,
body .empty-panel {
  overflow: hidden;
}

body .lms-hero .hero-stat {
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.05), rgba(255, 255, 255, 0.6));
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  transition: transform 0.45s var(--g3-ease), background 0.45s var(--g3-ease);
}

@media (hover: hover) {
  body .lms-hero .hero-stats .hero-stat:hover {
    transform: translateZ(0) translateY(-4px) scale(1.03);
    background: linear-gradient(160deg, rgba(212, 175, 55, 0.22), rgba(255, 255, 255, 0.04));
    z-index: 2;
  }
}

body .hero-stats {
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.04);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Progress rings read as a lit dial instead of a flat donut. */
body .p-ring {
  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(15, 23, 42, 0.06),
    0 0 26px rgba(212, 175, 55, 0.22);
  background:
    conic-gradient(var(--ring) calc(var(--p) * 1%), rgba(148, 163, 184, 0.16) 0);
}

body .p-ring::after {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(240, 245, 251, 0.98));
  box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.10);
}

body .p-ring::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px dashed rgba(212, 175, 55, 0.34);
  animation: g3-orbit 30s linear infinite;
  pointer-events: none;
}

/* Course cards inside the dashboard: lit edge + floating chrome. */
body .my-courses .course-card .cc-head {
  background:
    linear-gradient(150deg, rgba(212, 175, 55, 0.20), rgba(8, 145, 178, 0.10)),
    rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

body .my-courses .course-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px 180px at 90% -10%, rgba(var(--g3-gold), 0.22), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--g3-ease);
  pointer-events: none;
}

body .my-courses .course-card:hover::after { opacity: 1; }

/* Week pips: lit keys on a keyboard. */
body .week-track .pip {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.25s var(--g3-ease), box-shadow 0.25s var(--g3-ease);
}

body .week-track .pip.done {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 14px rgba(5, 150, 105, 0.35);
}

body .week-track .pip.open {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 6px 16px rgba(212, 175, 55, 0.30);
}

@media (hover: hover) {
  body .week-track .pip:hover { transform: translateY(-3px) scale(1.08); z-index: 2; }
}

/* Momentum bars glow from the base. */
body .momentum .m-bar i {
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.45);
}

/* Buttons inside glass panes get a lit pill treatment. */
body .resume-cta,
body .hero-cta .btn.solid {
  box-shadow: 0 16px 34px rgba(212, 175, 55, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   8. CATALOGUE  (courses.php)
   ========================================================================== */
body .filter-card {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  padding: 22px;
}

body .catalog-card .card-top {
  background:
    radial-gradient(320px 180px at 85% -30%, rgba(var(--g3-violet), 0.20), transparent 72%),
    linear-gradient(145deg, #eef2fb, #e4eef8);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

body .catalog-card:hover .card-top {
  background:
    radial-gradient(320px 200px at 85% -30%, rgba(var(--g3-gold), 0.28), transparent 72%),
    linear-gradient(145deg, #f3f6fc, #e8f1fa);
}

body .cat-pill {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.3s var(--g3-ease), background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

@media (hover: hover) {
  body .cat-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14); }
  body .cat-pill.active { box-shadow: 0 12px 26px rgba(139, 92, 246, 0.35); }
}

body .catalog-hero .hero-badge,
body .hero-badge {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ==========================================================================
   9. PUBLIC SITE FURNITURE
   ========================================================================== */
body .benefit-icon,
body .program-icon {
  box-shadow:
    0 16px 32px rgba(var(--g3-gold), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

body .stats-container .stat-card {
  text-align: center;
  padding: 30px 22px;
}

body .stat-card .stat-number {
  font-size: 2.4rem;
  background: linear-gradient(120deg, var(--gold-deep) 10%, var(--gold-soft) 55%, var(--gold) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

body .quote-card .author-image {
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.45), 0 10px 22px rgba(15, 23, 42, 0.18);
}

body .culture-card .culture-img {
  transition: transform 0.9s var(--g3-ease), filter 0.6s var(--g3-ease);
}

@media (hover: hover) {
  body .culture-card:hover .culture-img { transform: scale(1.07) translateZ(0); filter: saturate(120%); }
}

/* Header: a harder frost with a lit bottom edge so content scrolls under it. */
body .header,
body .new-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.68));
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid transparent;
  box-shadow:
    0 1px 0 rgba(212, 175, 55, 0.22),
    0 14px 34px rgba(15, 23, 42, 0.08);
}

/* Global resume strip + footer panels join the glass system. */
body .resume-bar-global .rbg-inner {
  background: linear-gradient(120deg, rgba(212, 175, 55, 0.14), rgba(255, 255, 255, 0.5));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

/* ==========================================================================
   10. BUTTONS, BADGES, FORMS
   ========================================================================== */
body .btn,
body a.btn,
body button.btn {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 26px rgba(180, 132, 31, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

body .btn:not(.btn-outline):not(.btn-ghost):not(.btn-sm),
body .btn-primary,
body .btn-gold {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0)) padding-box,
              linear-gradient(135deg, var(--gold-soft), var(--gold)) border-box;
  background-color: transparent;
  color: #161004;
}

/* The base rule is more specific than style.css's .btn:hover, so the hover
   fill has to be restated here rather than left to the cascade. */
body .btn:not(.btn-outline):not(.btn-ghost):not(.btn-sm):hover,
body .btn-primary:hover,
body .btn-gold:hover {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08)) padding-box,
    linear-gradient(135deg, var(--gold-soft), var(--gold-deep)) border-box;
  color: #161004;
}

body .badge,
body .pill,
body .tag,
body .chip,
body .course-badge,
body .level-badge,
body .status-pill,
body .score-pill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 16px rgba(15, 23, 42, 0.10);
}

body input,
body select,
body textarea {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.14);
  color: var(--ink);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body input::placeholder,
body textarea::placeholder { color: rgba(91, 107, 132, 0.7); }

/* ==========================================================================
   11. REVEAL / TILT COMPOSITION
   Two scroll-reveal systems exist (.reveal from enhance.css and the inline
   one in main.js). Cards that are also tilt targets keep their reveal pose
   until the pointer takes over, which happens through inline styles in
   main.js - these rules are the no-JS resting state.
   ========================================================================== */
.g3-tilt {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: flat;
}

.g3-tilt.reveal { transform: perspective(1100px) translateY(26px); }
.g3-tilt.reveal.is-visible { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* ==========================================================================
   12. ACCESSIBILITY, REDUCED MOTION, PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .g3-ambient span,
  .g3-orb,
  .g3-ring,
  .g3-cube,
  body :is(.card, .program-card, .course-card, .tile, .catalog-card, .category-card)::before,
  body .p-ring::before {
    animation: none !important;
  }

  .g3-layer { transition: none; }

  body :is(.card, .program-card, .course-card, .tile, .svc-card, .category-card):hover {
    transform: none !important;
  }

  body .program-card:hover .program-icon,
  body .benefit-card:hover .benefit-icon,
  body .category-card:hover .cc-icon,
  body .tile:hover .tile-icon,
  body .svc-card:hover > i {
    transform: translateZ(46px);
  }
}

@media print {
  .g3-ambient,
  .g3-scene,
  body .card::after,
  body .tile::after {
    display: none !important;
  }

  body :is(.card, .program-card, .course-card, .tile, .catalog-card, .category-card) {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ==========================================================================
   BACKGROUND IMAGERY  ·  royalty-free Unsplash stock
   A lightweight photographic layer behind the key sections and summary
   cards so the page reads richer and more "alive". Every photo sits under a
   soft white (or gold) wash so headings, icons and copy keep full contrast
   on the light theme. Per-surface layer order: wash -> photo -> colour.
   ========================================================================== */
:root {
  --img-hero:       url("https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=1920&q=80");
  --img-stats:      url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1920&q=80");
  --img-categories: url("https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1920&q=80");
  --img-why:        url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1920&q=80");
  --img-programs:   url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1920&q=80");
  --img-cta:        url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1920&q=80");
  --img-moving:     url("https://images.unsplash.com/photo-1550439062-609e1531270e?auto=format&fit=crop&w=1920&q=80");
  --img-culture:    url("https://images.unsplash.com/photo-1541339907198-e08756dedf3f?auto=format&fit=crop&w=1920&q=80");
  --img-highlights: url("https://images.unsplash.com/photo-1497215728101-856f4ea42174?auto=format&fit=crop&w=1920&q=80");
  --img-ceo:        url("https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1920&q=80");
  --img-band:       url("https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?auto=format&fit=crop&w=1920&q=80");
  --img-ad:         url("https://images.unsplash.com/photo-1526628953301-3e589a6a8b74?auto=format&fit=crop&w=1920&q=80");
  --img-c-net:      url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=900&q=80");
  --img-c-code:     url("https://images.unsplash.com/photo-1487058792275-0ad4aaf24ca7?auto=format&fit=crop&w=900&q=80");
  --img-c-write:    url("https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?auto=format&fit=crop&w=900&q=80");
  --img-c-desk:     url("https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=900&q=80");
  --img-c-study:    url("https://images.unsplash.com/photo-1434030216411-0b793f4b4173?auto=format&fit=crop&w=900&q=80");
}

/* --- HERO: photograph under the light wash (dark ink preserved) --- */
body .hero {
  background-color: #ffffff;
  background-image:
    radial-gradient(900px 520px at 84% -22%, rgba(212, 175, 55, 0.16), transparent 62%),
    linear-gradient(150deg, rgba(255,255,255,0.90) 0%, rgba(243,247,253,0.92) 52%, rgba(233,241,251,0.94) 100%),
    var(--img-hero);
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}

/* --- LIGHT SECTIONS: white wash over a topical photo --- */
body :is(.stats, .why-cmti, .programs, .cta-section, .moving-courses,
         .culture, .culture-section, .highlights, .ceo-message) {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body .stats          { background-image: linear-gradient(rgba(255,255,255,0.90), rgba(255,255,255,0.95)), var(--img-stats); }
body .why-cmti       { background-image: linear-gradient(rgba(255,255,255,0.90), rgba(255,255,255,0.95)), var(--img-why); }
body .programs       { background-image: linear-gradient(rgba(255,255,255,0.90), rgba(255,255,255,0.95)), var(--img-programs); }
body .cta-section    { background-image: linear-gradient(rgba(255,255,255,0.90), rgba(255,255,255,0.95)), var(--img-cta); }
body .moving-courses { background-image: linear-gradient(rgba(255,255,255,0.90), rgba(255,255,255,0.95)), var(--img-moving); }
body .culture        { background-image: linear-gradient(rgba(255,255,255,0.90), rgba(255,255,255,0.95)), var(--img-culture); }
body .culture-section{ background-image: linear-gradient(rgba(255,255,255,0.90), rgba(255,255,255,0.95)), var(--img-culture); }
body .highlights     { background-image: linear-gradient(rgba(255,255,255,0.90), rgba(255,255,255,0.95)), var(--img-highlights); }
body .ceo-message    { background-image: linear-gradient(rgba(255,255,255,0.90), rgba(255,255,255,0.95)), var(--img-ceo); }

/* Categories band on the main page gets its own topical photo. */
body .categories-section {
  background-image: linear-gradient(rgba(255,255,255,0.91), rgba(255,255,255,0.95)), var(--img-categories);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- GOLD CTA BANDS: faint photo under a rich gold wash --- */
body .advertisement,
body .final-cta {
  background-image:
    linear-gradient(135deg, rgba(227,200,119,0.90) 0%, rgba(212,175,55,0.92) 55%, rgba(184,148,31,0.95) 100%),
    var(--img-band);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
body .advertisement { --img-band: var(--img-ad); }

/* --- SUMMARY CARDS: glass pane over a faint photo tile --- */
body :is(.category-card, .program-card, .benefit-card, .stat-card, .quote-card) {
  background-color: #ffffff;
  background-image:
    linear-gradient(158deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.74) 46%, rgba(244,247,252,0.92) 100%),
    linear-gradient(140deg,
      var(--g3-stroke) 0%,
      var(--g3-stroke-2) 34%,
      rgba(var(--g3-accent), 0.42) 74%,
      rgba(var(--g3-cyan), 0.30) 100%),
    var(--bg-photo, none);
  background-origin: padding-box, border-box, padding-box;
  background-clip: padding-box, border-box, padding-box;
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}
body .category-card { --bg-photo: var(--img-c-net); }
body .program-card  { --bg-photo: var(--img-c-write); }
body .benefit-card  { --bg-photo: var(--img-c-code); }
body .stat-card     { --bg-photo: var(--img-c-desk); }
body .quote-card    { --bg-photo: var(--img-c-study); }

@media print {
  body :is(.hero, .stats, .why-cmti, .programs, .cta-section, .moving-courses,
           .culture, .culture-section, .highlights, .ceo-message,
           .advertisement, .final-cta, .categories-section),
  body :is(.category-card, .program-card, .benefit-card, .stat-card, .quote-card) {
    background-image: none !important;
  }
}