/* ============================================================
   GIA INTELLIGENCE — Design System
   AI Solutions for Geoscience and Mining
   Built from Brand_assets/brand_guidelines.png
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Primary palette */
  --midnight-navy: #071321;
  --deep-space-blue: #0D1B2A;
  --electric-blue: #2F80ED;
  --azure-blue: #56CCF2;
  --white: #F8FAFC;

  /* Neutral palette */
  --slate-900: #111827;
  --slate-700: #374151;
  --slate-500: #6B7280;
  --slate-300: #CBD5E1;
  --slate-100: #F1F5F9;
  --platinum: #D1D5DB;

  /* Semantic surfaces (dark theme) */
  --bg: var(--midnight-navy);
  --bg-elevated: #0B1826;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --text-primary: var(--white);
  --text-secondary: var(--slate-300);
  --text-muted: var(--slate-500);

  /* Solid accent (highlights + buttons) — dark blue, no gradient */
  --accent: #1E5FBF;          /* dark blue, solid */
  --accent-hover: #1A50A3;    /* darker on hover */
  --accent-strong: var(--electric-blue);
  --gradient-primary: var(--accent); /* kept as var name for compatibility; now solid */
  --gradient-dark: linear-gradient(160deg, var(--midnight-navy) 0%, var(--deep-space-blue) 100%);
  --glow: 0 0 40px rgba(30, 95, 191, 0.35);

  /* Typography */
  --font-heading: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 9rem;

  /* Layout */
  --container: 1200px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 72px;
}

/* ---------- Reset / Base ---------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth; /* fallback; Lenis handles the rest */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Always reserve the scrollbar gutter so the layout (and the fixed nav)
     never shifts between pages that scroll and ones that don't — e.g. the
     Services page locks body scroll while its modal is open. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;      /* 18px body */
  line-height: 1.65;
  color: var(--text-secondary);
  background: var(--bg);
  overflow-x: hidden;
}

/* When Lenis is active it manages scrolling */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 600;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }   /* 64–72px */
h2 { font-size: clamp(2rem, 4vw, 3rem); }        /* 48px */
h3 { font-size: clamp(1.35rem, 2.2vw, 2rem); }   /* 32px */

p { margin: 0 0 1rem; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--electric-blue); color: var(--white); }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section {
  padding: var(--space-2xl) 0;
  position: relative;
}

.section--tight { padding: var(--space-xl) 0; }

/* Alternating band — separates the two course audiences */
.section--alt {
  background: var(--deep-space-blue);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* Straight after a page hero the band would stack its own top border on the
   hero's accent line and border-bottom — three lines in a row. Drop it. */
.page-hero + .section--alt { border-top: none; }

.eyebrow {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azure-blue);
  margin-bottom: var(--space-sm);
  display: inline-block;
}

.section__header { max-width: 720px; margin-bottom: var(--space-lg); }
.section__header p { color: var(--text-secondary); font-size: 1.15rem; }

/* Text highlight — solid electric blue for legibility on dark surfaces */
.text-gradient { color: var(--electric-blue); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background 0.25s var(--ease), border-color 0.25s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(30, 95, 191, 0.28);
}
.btn--primary:hover { background: var(--accent-hover); box-shadow: var(--glow); }

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--secondary:hover { border-color: var(--accent); background: var(--surface-hover); }

.btn--ghost { background: transparent; color: var(--electric-blue); padding-left: 0; padding-right: 0; }
.btn--ghost:hover { gap: 0.9rem; }

/* Compact button — sized to the nav bar */
.btn--sm { padding: 0.5rem 1rem; font-size: 0.9rem; }
.btn--sm svg { width: 16px; height: 16px; }

/* Hero: "Get in Touch" — solid dark navy */
.btn--navy {
  background: var(--deep-space-blue);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.btn--navy:hover { background: var(--midnight-navy); border-color: var(--azure-blue); }

/* Hero: "Our Programs" — light blue (navy text for contrast) */
.btn--azure {
  background: var(--azure-blue);
  color: var(--midnight-navy);
  box-shadow: 0 8px 24px rgba(86, 204, 242, 0.28);
}
.btn--azure:hover { background: #7BD8F5; box-shadow: 0 0 40px rgba(86, 204, 242, 0.4); }

/* WhatsApp CTA — recognizable green */
.btn--whatsapp {
  background: #25D366;
  color: #06231A;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.28);
}
.btn--whatsapp:hover { background: #1FBE5A; box-shadow: 0 0 40px rgba(37, 211, 102, 0.4); }
.btn--whatsapp svg { width: 20px; height: 20px; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  /* Black header */
  background: #020B1C;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nav.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.nav__logo { display: flex; align-items: center; height: 52px; }
.nav__logo img { height: 100%; width: auto; }

.nav__links { display: flex; align-items: center; gap: var(--space-md); }
.nav__link {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--text-secondary);
  transition: color 0.2s var(--ease);
  position: relative;
}
.nav__link:hover, .nav__link.is-active { color: var(--text-primary); }
/* Underline reveals on hover and for the active page */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--electric-blue);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

/* Courses emphasized in electric blue */
.nav__link--accent { color: var(--electric-blue); font-weight: 500; }
.nav__link--accent:hover { color: var(--azure-blue); }

.nav__actions { display: flex; align-items: center; gap: var(--space-sm); }

/* Contact button: in the bar on desktop, inside the burger menu on mobile */
.nav__contact--mobile { display: none; }

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-family: var(--font-heading);
  font-size: 0.8rem;
}
.lang-toggle button {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-toggle button.is-active { background: var(--electric-blue); color: var(--white); }

.nav__toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0.4rem;
}
.nav__toggle svg { width: 26px; height: 26px; }

/* ---------- Hero (looping video background) ---------- */
.hero {
  position: relative;
  height: 100vh;   /* fallback for older browsers */
  height: 100svh;  /* small viewport height — avoids mobile URL-bar jump */
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--midnight-navy); /* shown while the video loads */
}
/* Looping background video */
.hero__video-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
/* Gradient overlay: tints the video to the brand palette and fades to the
   exact page background at the bottom, so the hero blends seamlessly into
   the section below (and under the black nav at the top). */
.hero__video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(7, 19, 33, 0.55) 0%,
    rgba(7, 19, 33, 0.18) 22%,
    rgba(7, 19, 33, 0.32) 55%,
    rgba(7, 19, 33, 0.80) 85%,
    var(--midnight-navy) 100%
  );
}

/* Left-aligned hero message.
   Text-shadow keeps it legible over the raw video without a full overlay. */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-md);
  text-align: left;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.4);
}
.hero__title {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 900px;
  margin: 0 0 var(--space-md);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  text-shadow: none;
}

.hero__scroll-hint {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 1px; height: 46px;
  background: linear-gradient(var(--azure-blue), transparent);
  animation: scrollpulse 2s var(--ease) infinite;
}
@keyframes scrollpulse {
  0%, 100% { opacity: 0.25; transform: translateX(-50%) scaleY(0.6); }
  50% { opacity: 1; transform: translateX(-50%) scaleY(1); }
}

/* ---------- Cards / Grids ---------- */
.grid { display: grid; gap: var(--space-md); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Auto-flow grid — handles 3 or 4 cards per row gracefully */
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.card__icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: rgba(47, 128, 237, 0.12);
  border: 1px solid rgba(47, 128, 237, 0.25);
  margin-bottom: var(--space-sm);
  color: var(--azure-blue);
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.4rem; }

/* Card with a leading image (Services / Courses) */
.card--media { padding-top: 0; overflow: hidden; }
.card__media {
  margin: 0 calc(-1 * var(--space-md)) var(--space-md);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--gradient-dark);
  border-bottom: 1px solid var(--border);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.card--media:hover .card__media img { transform: scale(1.04); }
.card--media .card__icon { margin-top: 0; }

/* Small "Includes" label above a card's course list */
.card__subhead {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}

/* ---------- GIA Academy: course cards ---------- */
.course { display: flex; flex-direction: column; }
.course__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-sm); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.badge svg { width: 14px; height: 14px; color: var(--text-muted); }
.badge--level { color: var(--azure-blue); border-color: rgba(86, 204, 242, 0.3); }
.badge--level svg { color: var(--azure-blue); }
.course__cta { margin-top: var(--space-md); align-self: flex-start; }

/* ---------- Page hero with a photo backdrop (Academy, Products…) ----------
   Shared treatment: tall hero, brand overlay, accent separation line.
   Each page only supplies its own image via --hero-image.
   Double class so it beats the base .page-hero rule regardless of source order. */
.page-hero.page-hero--feature {
  min-height: 82vh;
  display: flex;
  align-items: center;
  background:
    /* bottom fade so it blends into the section below */
    linear-gradient(180deg, transparent 55%, var(--midnight-navy) 100%),
    /* lighter tint, a touch darker on the left for text legibility */
    linear-gradient(90deg, rgba(7, 19, 33, 0.82) 0%, rgba(7, 19, 33, 0.5) 55%, rgba(7, 19, 33, 0.32) 100%),
    var(--hero-image, none) center / cover no-repeat;
}
.page-hero--feature .page-hero__inner { text-shadow: 0 2px 22px rgba(0, 0, 0, 0.6); }
/* Accent separation line, same as the flagship band rule on the home page */
.page-hero.page-hero--feature::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--electric-blue), var(--azure-blue), transparent);
}

/* Per-page backdrops */
.page-hero--academy  { --hero-image: url("../assets/images/academy_background_section.webp"); }
.page-hero--products { --hero-image: url("../assets/images/products_background.webp"); }
/* Services uses the brand gradient instead of a dedicated photo. */
.page-hero--services { --hero-image: radial-gradient(78% 130% at 72% 0%, rgba(47, 128, 237, 0.26) 0%, transparent 62%); }

/* ---------- GIA Academy: learning-paths area ---------- */
.academy-paths { position: relative; }

/* Intro band: pull the first path much closer to the heading */
.academy-intro { padding-top: var(--space-lg); padding-bottom: var(--space-sm); }
.academy-path { padding: var(--space-lg) 0; }
.academy-intro + .academy-path { padding-top: var(--space-sm); }

/* Academy: per-path section header (icon + title + level) */
.academy-path__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  max-width: 820px;
}
.academy-path__header .card__icon { margin: 0; flex-shrink: 0; }

/* ---------- Flagship services band (premium tier) ---------- */
.flagship {
  position: relative;
  background:
    radial-gradient(55% 45% at 12% 0%, rgba(47, 128, 237, 0.14) 0%, transparent 62%),
    radial-gradient(50% 45% at 88% 100%, rgba(86, 204, 242, 0.09) 0%, transparent 62%),
    var(--bg-elevated);
  border-top: 1px solid rgba(47, 128, 237, 0.32);
  border-bottom: 1px solid rgba(47, 128, 237, 0.32);
}
/* thin accent rule along the very top of the band */
.flagship::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--electric-blue), var(--azure-blue), transparent);
}

.flagship__intro { padding: var(--space-2xl) 0 var(--space-md); }
.flagship-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 1.05rem;
  margin-bottom: var(--space-sm);
  border-radius: 999px;
  background: rgba(47, 128, 237, 0.14);
  border: 1px solid rgba(47, 128, 237, 0.45);
  color: var(--azure-blue);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.flagship-badge svg { width: 15px; height: 15px; }

/* Each flagship service gets its own breathing room */
.flagship__item { padding: var(--space-lg) 0; }

/* Home: match the flagship section rhythm across the rest of the page
   (other services, track record, CTA) — less airy than the default section. */
.section[data-digital-geoscience],
.section[data-custom-software],
.section[data-ai-strategy],
.section[data-experience],
.section[data-cta] { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.flagship__head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.flagship__head .card__icon { margin: 0; flex-shrink: 0; }
.flagship__num {
  font-family: var(--font-heading);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(47, 128, 237, 0.38);
  letter-spacing: -0.04em;
}
/* Elevated media to reinforce the premium tier */
.flagship__item .feature__media {
  border-color: rgba(47, 128, 237, 0.32);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 44px rgba(47, 128, 237, 0.12);
}

/* ---------- Product cards ---------- */
.product-card { display: flex; flex-direction: column; }
.product-card__action { margin-top: auto; padding-top: var(--space-md); }
.product__btn { width: 100%; justify-content: center; }
/* "Coming soon" state */
.product__soon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.9rem;
}
.product__soon svg { width: 16px; height: 16px; }

/* ---------- Course carousel ---------- */
.carousel { position: relative; }
.carousel__track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.carousel__track::-webkit-scrollbar { height: 8px; }
.carousel__track::-webkit-scrollbar-track { background: transparent; }
.carousel__track::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.carousel__track > .card { flex: 0 0 340px; scroll-snap-align: start; }
.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.carousel__nav:hover { background: var(--surface-hover); border-color: var(--accent); transform: translateY(-50%) scale(1.06); }
.carousel__nav svg { width: 22px; height: 22px; }
.carousel__nav--prev { left: -14px; }
.carousel__nav--next { right: -14px; }

/* ---------- Row-by-row card alignment (subgrid) ----------
   Titles, descriptions and bullet lists vary in length, so without this every
   block starts at a different height. Making the track a grid and each card a
   subgrid aligns each row across all cards in the carousel.
   Falls back to the plain flex layout where subgrid isn't supported. */
@supports (grid-template-rows: subgrid) {
  .carousel__track--courses,
  .carousel__track--combos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 340px;
    align-items: stretch;
  }
  /* media · title · desc · prereq · topics · date · footer */
  .carousel__track--courses { grid-template-rows: auto auto auto auto 1fr auto auto; }
  /* media · badge · title · desc · subhead · includes · price · cta */
  .carousel__track--combos  { grid-template-rows: auto auto auto auto auto 1fr auto auto; }
  /* One row fewer when prices are hidden (no price/savings row) */
  .carousel__track--combos:not(:has(.combo-card__footer)) {
    grid-template-rows: auto auto auto auto auto 1fr auto;
  }

  .carousel__track--courses > .card,
  .carousel__track--combos > .card {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
  }
  /* In subgrid the rows do the spacing — drop the flex push-downs */
  .carousel__track--courses .course-card__meta,
  .carousel__track--combos .combo-card__footer { margin-top: 0; }

  /* The track gap must only separate cards horizontally: as a grid it would
     also apply between rows and stack on top of each block's own margin.
     Row rhythm is set by the margins below (~one line of text). */
  .carousel__track--courses,
  .carousel__track--combos { row-gap: 0; }

  .carousel__track--courses .course-card h3,
  .carousel__track--courses .course-card .card__desc,
  .carousel__track--courses .course-card__prereq,
  .carousel__track--courses .course-topics,
  .carousel__track--combos .combo-card h3,
  .carousel__track--combos .combo-card .card__desc,
  .carousel__track--combos .combo-card .card__subhead,
  .carousel__track--combos .combo-card .bullet-list { margin-bottom: 1.25rem; }

  .carousel__track--courses .course-card__prereq { margin-top: 0; }
  .carousel__track--courses .course-card__prereq.is-empty { margin: 0; }
  .carousel__track--courses .course-card__meta { padding-top: 0; }
  .carousel__track--combos .combo-card__badge { margin-bottom: 1rem; }
  .carousel__track--combos .combo-card__footer { padding: 0; }
}

/* ---------- E-learning course cards ---------- */
.course-card { display: flex; flex-direction: column; }
.course-card .card__desc { font-size: 0.95rem; margin-bottom: var(--space-sm); }
.course-topics { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: var(--space-sm); }
.course-topics li {
  display: flex; gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}
.course-topics svg { width: 15px; height: 15px; color: var(--electric-blue); flex-shrink: 0; margin-top: 3px; }
/* Prerequisite note */
.course-card__prereq {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: -0.4rem 0 var(--space-sm);
  font-size: 0.82rem;
  color: var(--azure-blue);
}
.course-card__prereq svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
/* Placeholder when a course has no prerequisite: keeps the row, no height */
.course-card__prereq.is-empty { margin: 0; }

/* "Coming soon" instead of a start date */
.course-card__meta.is-soon { color: var(--azure-blue); }
.course-card__meta.is-soon svg { color: var(--azure-blue); }
.course-card__meta {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.85rem; color: var(--text-muted);
  margin-top: auto; padding-top: var(--space-sm);
}
.course-card__meta svg { width: 15px; height: 15px; color: var(--azure-blue); }
.course-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-sm); padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}
.course-card__price {
  font-family: var(--font-heading);
  font-size: 1.3rem; font-weight: 600; line-height: 1;
  color: var(--text-primary);
}
.course-card__price small {
  display: block; margin-top: 0.2rem;
  font-size: 0.68rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
/* Prices hidden: the CTA takes the whole row */
.course-card__footer.is-nopricing { justify-content: stretch; }
.course-card__footer.is-nopricing .btn { width: 100%; justify-content: center; }

/* Why GIA Academy */
.why-point { padding: var(--space-sm) 0; }
.why-point h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.why-point .card__desc { font-size: 0.95rem; margin: 0; }

/* Compact in-company training band */
.team-training {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(47, 128, 237, 0.25);
  background:
    radial-gradient(90% 160% at 0% 0%, rgba(47, 128, 237, 0.16) 0%, transparent 60%),
    var(--bg-elevated);
}
.team-training h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.team-training p { color: var(--text-secondary); max-width: 620px; margin-bottom: var(--space-sm); }
.team-training__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.team-training__action { flex-shrink: 0; }
.card__desc { color: var(--text-secondary); font-size: 1rem; margin-bottom: var(--space-sm); }

.card__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  font-size: 0.82rem;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.card:hover .tag { border-color: var(--border-strong); }

/* Bullet list — one item per line with a big dot (Services + Products cards) */
.bullet-list { display: flex; flex-direction: column; }
.bullet-list li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.4rem 0;
  color: var(--text-secondary);
  font-size: 0.98rem;
  border-top: 1px solid var(--border);
}
.bullet-list li:first-child { border-top: none; }
.bullet-list li::before {
  content: "";
  flex-shrink: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--electric-blue);
  transform: translateY(1px);
}

/* Feature block (image + text) */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.feature--reverse .feature__media { order: 2; }
.feature__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
  background: var(--gradient-dark);
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-md); }

/* ---------- Metrics / Experience ---------- */
/* auto-fit so the row stays balanced with 3 or 4 metrics */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); }
.metric {
  text-align: center;
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.metric__value {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.metric__label { font-size: 0.95rem; color: var(--text-muted); }

/* ---------- CTA ---------- */
.cta {
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  overflow: hidden;
  border: 1px solid rgba(47, 128, 237, 0.25);
  background:
    radial-gradient(80% 140% at 50% 0%, rgba(47,128,237,0.22) 0%, transparent 60%),
    var(--bg-elevated);
}
.cta h2 { max-width: 700px; margin-inline: auto; }
.cta p { max-width: 560px; margin: 0 auto var(--space-md); color: var(--text-secondary); }
.cta__actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }

/* ---------- Experience: Industry / Research / Recognition ---------- */
.exp-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.exp-group {
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.exp-group__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: var(--space-sm); }
.exp-group__head .card__icon { margin: 0; width: 44px; height: 44px; flex-shrink: 0; }
.exp-group__head .card__icon svg { width: 22px; height: 22px; }
.exp-group__head h3 { font-size: 1.15rem; margin: 0; }
.exp-group__list { display: flex; flex-direction: column; gap: 0.55rem; }
.exp-group__list li {
  position: relative;
  padding-left: 1rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}
.exp-group__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--electric-blue);
}

/* ---------- Academy: combo / career-path bundles ---------- */
.combo-card { display: flex; flex-direction: column; }
.combo-card__badge {
  align-self: flex-start;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azure-blue);
  background: rgba(86, 204, 242, 0.12);
  border: 1px solid rgba(86, 204, 242, 0.35);
  border-radius: 999px;
  padding: 0.28rem 0.8rem;
  margin-bottom: var(--space-sm);
}
.combo-card h3 { font-size: 1.2rem; }
.combo-card__cta { align-self: stretch; justify-content: center; }

/* Price block: original struck through + bundle price + savings badge */
.combo-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: auto;
  padding: var(--space-sm) 0;
}
.combo-card__price { display: flex; flex-direction: column; line-height: 1.15; }
.combo-card__before {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: line-through;
}
.combo-card__now {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--text-primary);
}
.combo-card__price small {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
.combo-card__save {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 500;
  color: #6BE8A6;
  background: rgba(107, 232, 166, 0.12);
  border: 1px solid rgba(107, 232, 166, 0.35);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}
/* Career-path bundle stands out from the software combos */
.combo-card--featured {
  border-color: rgba(47, 128, 237, 0.45);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(47, 128, 237, 0.14) 0%, transparent 65%),
    var(--surface);
}
.combo-card--featured .combo-card__badge {
  color: var(--white);
  background: var(--accent);
  border-color: transparent;
}

/* ---------- CTA: AI Assistant experience ---------- */
.assistant {
  display: grid;
  grid-template-columns: 40% 60%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elevated);
  min-height: 560px;
}
/* Left column — Aria (looping GIF) centerpiece */
.assistant__brand {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-md);
  background:
    radial-gradient(90% 90% at 50% 40%, rgba(30,95,191,0.18) 0%, transparent 65%),
    var(--gradient-dark);
  border-right: 1px solid var(--border);
}
.assistant__gif {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: contain;
  border-radius: var(--radius);
}

/* Right column — chat interface */
.assistant__chat { display: flex; flex-direction: column; padding: var(--space-md); min-width: 0; }
.assistant__head { padding: 0 var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--border); }
.assistant__head h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 0.25rem; }
.assistant__head p { color: var(--text-muted); font-size: 0.98rem; margin: 0; }

.chat {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md) var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  scroll-behavior: smooth;
  min-height: 260px;
  max-height: 420px;
}
.msg {
  max-width: 82%;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  font-size: 0.98rem;
  line-height: 1.5;
  border: 1px solid var(--border);
  opacity: 0;
  transform: translateY(8px);
  animation: msgIn 0.4s var(--ease) forwards;
  white-space: pre-line;
}
@keyframes msgIn { to { opacity: 1; transform: none; } }
.msg--bot { align-self: flex-start; background: var(--surface); color: var(--text-primary); border-bottom-left-radius: 4px; }
.msg--user { align-self: flex-end; background: var(--accent); color: var(--white); border-color: transparent; border-bottom-right-radius: 4px; }

.typing { display: inline-flex; gap: 5px; padding: 0.9rem 1rem; align-self: flex-start; }
.typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-muted);
  animation: typing 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* Input area */
.chat__input { padding-top: var(--space-sm); border-top: 1px solid var(--border); }
.chat__row { display: flex; gap: 0.6rem; align-items: flex-end; }
.chat__field {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7rem 0.9rem;
  resize: none;
  transition: border-color 0.2s var(--ease);
}
.chat__field:focus { outline: none; border-color: var(--accent); }
textarea.chat__field { min-height: 90px; line-height: 1.5; }
.chat__send {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--accent);
  color: var(--white);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.2s var(--ease);
}
.chat__send:hover { background: var(--accent-hover); }
.chat__send svg { width: 20px; height: 20px; }
.chat__count { font-size: 0.78rem; color: var(--text-muted); text-align: right; margin-top: 0.35rem; }

/* Actions area (chips + WhatsApp + fallback), appears after the greeting */
.chat__actions-wrap { padding-top: var(--space-sm); border-top: 1px solid var(--border); }
.chat__chips-label { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.7rem; }

/* Topic chips — pre-fill the WhatsApp message */
.chat__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-md); }
.chat__option {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
.chat__option:hover { border-color: #25D366; background: var(--surface-hover); transform: translateY(-2px); }

/* Primary WhatsApp button */
.chat__whatsapp { width: 100%; justify-content: center; }

/* Reassurance + email fallback */
.chat__reassure {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.85rem; color: var(--text-muted);
  margin-top: 0.7rem;
}
.chat__reassure svg { width: 15px; height: 15px; }
.chat__fallback { font-size: 0.9rem; color: var(--text-muted); margin-top: 0.5rem; }
.chat__fallback a { color: var(--azure-blue); }
.chat__fallback a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  padding: var(--space-xl) 0 var(--space-lg);
  background: #020B1C;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.footer__brand img { height: 56px; margin-bottom: var(--space-sm); }
.footer__brand p { color: var(--text-muted); max-width: 320px; font-size: 0.95rem; }
.footer__col h4 {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}
.footer__col a {
  display: block;
  color: var(--text-secondary);
  font-size: 0.95rem;
  padding: 0.3rem 0;
  transition: color 0.2s var(--ease);
}
.footer__col a:hover { color: var(--text-primary); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.9rem;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ---------- Modal (Services page) ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: var(--space-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 19, 33, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.35s var(--ease);
}
.modal.is-open .modal__panel { transform: translateY(0) scale(1); }
.modal__close {
  position: absolute;
  top: var(--space-sm); right: var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: grid; place-items: center;
}
.modal__options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: var(--space-md); }
.modal__option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-align: left;
  padding: var(--space-sm);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
  color: var(--text-primary);
  font-family: var(--font-heading);
  width: 100%;
}
.modal__option:hover { border-color: var(--azure-blue); background: var(--surface-hover); transform: translateY(-2px); }
.modal__option .card__icon { margin: 0; width: 44px; height: 44px; }
.modal__option-text small { display: block; color: var(--text-muted); font-family: var(--font-body); font-weight: 400; font-size: 0.85rem; }

/* ---------- Page hero (secondary pages) ---------- */
.page-hero {
  padding: calc(var(--nav-h) + var(--space-xl)) 0 var(--space-lg);
  position: relative;
  background:
    radial-gradient(70% 120% at 80% -10%, rgba(47,128,237,0.18) 0%, transparent 55%),
    var(--gradient-dark);
  border-bottom: 1px solid var(--border);
}
.page-hero__inner { max-width: 760px; }

/* ---------- Reveal animation (fallback + GSAP) ---------- */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-visible { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------- Responsive ---------- */
/* Tablet / small laptop */
@media (max-width: 1024px) {
  .assistant { grid-template-columns: 42% 58%; min-height: 520px; }
  /* Shorter hero => the landscape video is cropped less aggressively */
  .hero { height: 88svh; min-height: 480px; }
}
@media (max-width: 980px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .feature { grid-template-columns: 1fr; gap: var(--space-md); }
  .feature--reverse .feature__media { order: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .team-training { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  /* Assistant stacks: logo above the chat */
  .assistant { grid-template-columns: 1fr; min-height: 0; }
  .assistant__brand { border-right: none; border-bottom: 1px solid var(--border); padding: var(--space-md); }
  .assistant__gif { max-height: 320px; width: auto; }
}
/* Landscape phones */
@media (max-width: 720px) {
  :root { --nav-h: 60px; }
  .hero { height: 80svh; min-height: 440px; }
  /* Carousel: one card at a time, swipe to scroll (arrows hidden) */
  .carousel__track > .card { flex: 0 0 82vw; }
  .carousel__nav { display: none; }
  .nav__logo { height: 42px; }
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--nav-h); left: 0; right: 0;
    background: #000;
    border-bottom: 1px solid var(--border);
    padding: var(--space-md);
    gap: var(--space-md);
  }
  .nav.is-open .nav__link::after { display: none; }
  /* Free up bar space for the logo: Contact moves into the burger menu.
     Stretch it across the full row instead of hugging its label. */
  .nav__contact--desktop { display: none; }
  .nav__contact--mobile {
    display: flex;
    align-self: stretch;
    width: 100%;
    justify-content: center;
  }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .modal__options { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .section { padding: var(--space-xl) 0; }
  .cta { padding: var(--space-lg) var(--space-md); }
  .msg { max-width: 88%; }
  .chat { max-height: 340px; }
}
/* Small phones */
@media (max-width: 420px) {
  :root { --space-md: 1.4rem; }
  .container { padding: 0 1.1rem; }
  .hero { height: 76svh; min-height: 420px; }
  .btn { width: 100%; justify-content: center; }
  .nav__actions .btn { width: auto; }
  /* Keep the two hero buttons side by side, just tighter */
  .hero__actions { flex-wrap: nowrap; gap: 0.6rem; }
  .hero__actions .btn { flex: 1; padding: 0.75rem 0.6rem; font-size: 0.88rem; }
  .hero__actions .btn svg { display: none; }
  .chat__send { width: 44px; }
  .exp-group { padding: var(--space-sm); }
}

/* Landscape phones / short viewports — keep the hero from swallowing the screen */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { height: 100svh; min-height: 320px; }
  .hero__title { font-size: clamp(1.6rem, 5vw, 2.4rem); margin-bottom: var(--space-sm); }
  .hero__scroll-hint { display: none; }
}