/* ==========================================================================
   GO4AI EDU — Homepage "Premium AI EdTech" redesign layer
   --------------------------------------------------------------------------
   Scope: body.home ONLY. Every rule is prefixed, so no other page is touched.
   Palette: GO4AI Blue #2563EB · Deep Navy #0B1220 · Cyan #22D3EE
   Direction: bright premium AI EdTech — white / off-white / very light blue,
   soft gradient, atmospheric glow, subtle grid, light glassmorphism.
   Motion is additive only: content is fully readable with JS disabled.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
body.home {
  --g4a-blue: #2563eb;
  --g4a-blue-600: #1d4ed8;
  --g4a-blue-700: #1e40af;
  --g4a-blue-100: #dbe7ff;
  --g4a-blue-50: #eff5ff;
  --g4a-cyan: #22d3ee;
  --g4a-cyan-600: #0891b2;
  --g4a-violet: #7c3aed;
  --g4a-navy: #0b1220;
  --g4a-navy-2: #131f38;
  --g4a-ink: #0b1220;
  --g4a-ink-2: #1f2c46;
  --g4a-muted: #56688c;
  --g4a-muted-2: #7d8caa;
  --g4a-line: #e4ebf7;
  --g4a-line-2: #eef3fb;
  --g4a-bg: #ffffff;
  --g4a-bg-soft: #f6f9fe;
  --g4a-bg-mist: #eef4ff;
  --g4a-green: #10b981;

  --g4a-r-sm: 12px;
  --g4a-r: 18px;
  --g4a-r-lg: 26px;
  --g4a-r-xl: 34px;

  --g4a-shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.05);
  --g4a-shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05), 0 10px 24px -14px rgba(11, 18, 32, 0.18);
  --g4a-shadow: 0 2px 4px rgba(11, 18, 32, 0.04), 0 22px 48px -22px rgba(11, 18, 32, 0.24);
  --g4a-shadow-blue: 0 2px 4px rgba(11, 18, 32, 0.04), 0 26px 56px -22px rgba(37, 99, 235, 0.38);
  --g4a-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.85);

  --g4a-grad-blue: linear-gradient(135deg, #2563eb 0%, #1d4ed8 52%, #0ea5e9 100%);
  --g4a-grad-ink: linear-gradient(140deg, #0b1220 0%, #16233f 58%, #1b2f57 100%);
  --g4a-grad-text: linear-gradient(100deg, #2563eb 0%, #1d4ed8 40%, #06b6d4 100%);
  --g4a-grad-hair: linear-gradient(90deg, rgba(37, 99, 235, 0) 0%, rgba(37, 99, 235, 0.5) 50%, rgba(37, 99, 235, 0) 100%);

  --g4a-ease: cubic-bezier(0.22, 0.68, 0.32, 1);
  --g4a-shell: 1200px;
  --g4a-pad: clamp(18px, 4vw, 40px);
  --g4a-section-y: clamp(66px, 7.6vw, 122px);
  --g4a-section-y-tight: clamp(54px, 6vw, 92px);

  background: var(--g4a-bg);
  color: var(--g4a-ink);
  font-family: "Noto Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.home h1,
body.home h2,
body.home h3,
body.home h4,
body.home h5 {
  font-family: "Space Grotesk", "Noto Sans", ui-sans-serif, system-ui, sans-serif;
  color: var(--g4a-ink);
  letter-spacing: -0.028em;
}

body.home p {
  color: var(--g4a-muted);
}

body.home a {
  text-decoration: none;
}

body.home .material-symbols-outlined {
  font-variation-settings: "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Shared shell: every section container aligns to the same grid, and is
   lifted above the section's own decorative ::before layer. */
body.home #go4ai-hero > div > div,
body.home #go4ai-ai-passport .max-w-7xl,
body.home #go4ai-evidence .max-w-7xl,
body.home #workplace-ai-foundation-go4ai .max-w-7xl,
body.home #go4ai-team .max-w-7xl,
body.home #go4ai-final-cta .max-w-4xl,
body.home #go4ai-faq .max-w-3xl,
body.home #go4ai-activities > .max-w-\[1200px\],
body.home footer .max-w-7xl {
  max-width: var(--g4a-shell);
}

/* The content shell must sit above the section decorations. Scoped to the
   known shells on purpose — a blanket `section > div:first-child` would also
   catch the hero's decorative blur blobs and pull them back into flow. */
body.home main section > .max-w-7xl,
body.home main section > .max-w-3xl,
body.home main section > .max-w-4xl,
body.home main section > .g4a-media-container,
body.home main section > div:last-child > .max-w-7xl {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   2. GLOBAL TEXT GRADIENT + EYEBROW LABEL SYSTEM
   -------------------------------------------------------------------------- */
body.home .text-gradient {
  background: var(--g4a-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Section eyebrows: the two small uppercase section labels get a premium pill
   treatment. Scoped to spans with .tracking-wider so the hero badge, the
   "Verified" chips and the video captions keep their own styling. */
body.home main section span.uppercase.tracking-wider {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f4f8ff 0%, #eaf1ff 100%);
  border: 1px solid var(--g4a-blue-100);
  color: var(--g4a-blue-600) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

body.home main section span.uppercase.tracking-wider::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g4a-grad-blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
  flex: none;
}

/* --------------------------------------------------------------------------
   3. SECTION RHYTHM
   Alternating surfaces + generous whitespace so sections read as distinct
   movements rather than one long card list.
   -------------------------------------------------------------------------- */
body.home main > .elementor > .elementor-element > .e-con-inner > .elementor-element {
  position: relative;
}

body.home main section {
  position: relative;
  scroll-margin-top: 96px;
}

/* Soft blueprint grid — used as a background texture on light bands. */
body.home .g4a-grid-tex::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 30%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 62% at 50% 30%, #000 25%, transparent 78%);
}

/* --------------------------------------------------------------------------
   4. HEADER — light glass, hairline, shadow appears on scroll
   -------------------------------------------------------------------------- */
body.home > header {
  border-bottom: 1px solid transparent;
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  transition: box-shadow 0.3s var(--g4a-ease), border-color 0.3s var(--g4a-ease),
    background 0.3s var(--g4a-ease);
}

body.home > header.g4a-scrolled {
  border-bottom-color: var(--g4a-line);
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 10px 30px -22px rgba(11, 18, 32, 0.5);
}

body.home > header .max-w-7xl {
  max-width: 1280px;
}

body.home > header .go4ai-primary-menu > li > a {
  font-weight: 600;
  font-size: 14px;
  color: var(--g4a-ink-2) !important;
  position: relative;
  padding: 6px 2px;
  transition: color 0.22s var(--g4a-ease);
}

body.home > header .go4ai-primary-menu > li > a:hover {
  color: var(--g4a-blue) !important;
}

/* Active item: colour + weight only — no underline anywhere in the header. */
body.home > header .go4ai-primary-menu > li > a.text-primary {
  color: var(--g4a-blue) !important;
  font-weight: 700;
}

body.home > header .go4ai-primary-menu > li > a::before,
body.home > header .go4ai-primary-menu > li > a::after {
  content: none !important;
  display: none !important;
}

body.home > header .go4ai-cta-wrap > button {
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

body.home > header .go4ai-cta-wrap > button:last-child {
  background: var(--g4a-grad-blue) !important;
  box-shadow: 0 10px 24px -12px rgba(37, 99, 235, 0.85) !important;
}

body.home > header .go4ai-cta-wrap > button:last-child:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

body.home > header .go4ai-cta-wrap > button:first-child {
  background: #fff !important;
  border: 1px solid var(--g4a-line);
  color: var(--g4a-ink) !important;
  box-shadow: var(--g4a-shadow-xs);
}

body.home > header .go4ai-cta-wrap > button:first-child:hover {
  border-color: var(--g4a-blue-100);
  color: var(--g4a-blue) !important;
}

/* --------------------------------------------------------------------------
   5. HERO — the visual highlight
   -------------------------------------------------------------------------- */
body.home #go4ai-hero {
  padding: clamp(56px, 7vw, 104px) 0 clamp(72px, 8vw, 132px);
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(37, 99, 235, 0.14), transparent 62%),
    radial-gradient(760px 520px at 4% 8%, rgba(34, 211, 238, 0.14), transparent 60%),
    radial-gradient(900px 700px at 50% 118%, rgba(124, 58, 237, 0.07), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 52%, #f2f7ff 100%);
  overflow: hidden;
}

/* The two decorative blur blobs already in the markup become softer aurora. */
body.home #go4ai-hero > div[aria-hidden="true"]:first-of-type {
  width: min(760px, 78vw);
  height: min(760px, 78vw);
  background: radial-gradient(circle, rgba(37, 99, 235, 0.22), transparent 66%) !important;
  filter: blur(60px);
  opacity: 0.9;
}

body.home #go4ai-hero > div[aria-hidden="true"]:nth-of-type(2) {
  width: min(520px, 62vw);
  height: min(520px, 62vw);
  background: radial-gradient(circle, rgba(34, 211, 238, 0.22), transparent 66%) !important;
  filter: blur(64px);
}

/* Blueprint grid behind the hero. */
body.home #go4ai-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 34%, #000 20%, transparent 74%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 34%, #000 20%, transparent 74%);
  z-index: 0;
}

body.home #go4ai-hero .grid {
  gap: clamp(40px, 5vw, 72px);
}

body.home #go4ai-hero .grid > div:first-child {
  gap: 24px !important;
  max-width: 620px;
}

/* Hero badge */
body.home #go4ai-hero .inline-flex.items-center.gap-2 {
  padding: 9px 17px 9px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(37, 99, 235, 0.18);
  box-shadow: 0 8px 24px -16px rgba(37, 99, 235, 0.6), var(--g4a-shadow-inset);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--g4a-blue-600);
}

body.home #go4ai-hero .inline-flex.items-center.gap-2 .material-symbols-outlined {
  color: var(--g4a-blue);
}

body.home #go4ai-hero .inline-flex.items-center.gap-2 span:last-child {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

/* Hero headline */
body.home #go4ai-hero h1 {
  font-size: clamp(34px, 5.1vw, 66px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.038em;
  color: var(--g4a-ink);
  text-wrap: balance;
  margin: 2px 0 0;
}

body.home #go4ai-hero h1 .text-gradient {
  white-space: nowrap;
}

/* Scoped to the copy column: a bare `#go4ai-hero p` also matched the <p> tags
   inside the AI Passport mockup and overrode their own type scale. */
body.home #go4ai-hero .g4a-hero-copy p {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.75;
  color: var(--g4a-muted);
  max-width: 560px;
}

/* Hero CTAs */
body.home #go4ai-hero .flex.flex-wrap.gap-4 > button,
body.home #go4ai-hero .flex.flex-wrap.gap-4 > a {
  border-radius: 14px;
  padding: 16px 26px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

body.home #go4ai-hero .flex.flex-wrap.gap-4 > button {
  background: var(--g4a-grad-blue) !important;
  box-shadow: 0 16px 34px -16px rgba(37, 99, 235, 0.85), var(--g4a-shadow-inset);
  position: relative;
  overflow: hidden;
}

body.home #go4ai-hero .flex.flex-wrap.gap-4 > button::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--g4a-ease);
}

body.home #go4ai-hero .flex.flex-wrap.gap-4 > button:hover::after {
  left: 120%;
}

body.home #go4ai-hero .flex.flex-wrap.gap-4 > a {
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid var(--g4a-line) !important;
  color: var(--g4a-ink) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--g4a-shadow-xs);
}

body.home #go4ai-hero .flex.flex-wrap.gap-4 > a:hover {
  border-color: rgba(37, 99, 235, 0.35) !important;
  color: var(--g4a-blue) !important;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   6. HERO RIGHT — "AI Passport 3D + Capability Orbit"
   Centre: one glass AI Passport tilted in perspective. Four data layers
   (Skills / Outputs / Evidence / KPI) branch out of it, and a thin orbital
   ring carries the four journey points Learn -> Build -> Apply -> Prove.
   Every size is a container-query unit (cqw) against .g4a-hv-stage; a px value
   is always declared first as the fallback.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* The hero gets a slightly wider shell than the rest of the page (1400px vs
     the shared max-w-7xl / 1280px) purely so the right-hand composition can
     grow ~22% without squeezing the headline column. Scoped to #go4ai-hero, so
     no other section changes width. */
  body.home #go4ai-hero .max-w-7xl {
    max-width: 1400px;
  }

  /* ~50/50 instead of 54/46: the visual column grows from ~523px to ~636px at
     1440 while the copy column keeps enough measure that the headline does not
     gain a line. Row height is still driven by the copy, so the hero barely
     gets taller.
     `max-width: none` is required because the shared shell rule
     (`#go4ai-hero > div > div { max-width: var(--g4a-shell) }`, 1200px) also
     matches this grid element — widening only the container would have left the
     grid pinned at 1200px. */
  body.home #go4ai-hero .g4a-hero-grid {
    max-width: none;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 4.4vw, 64px);
  }

  body.home #go4ai-hero .g4a-hero-copy {
    max-width: none;
  }
}

body.home .g4a-hero-visual {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.home .g4a-hv-stage {
  position: relative;
  width: 100%;
  /* Raised from 560px so the square stage is no longer capped below the column
     width (~636px at 1440) — every child is sized in % / cqw of the stage, so
     the whole composition (passport, orbit, 4 layers, 4 points) scales together. */
  max-width: 720px;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  perspective: 1500px;
  perspective-origin: 50% 44%;
}

/* Faint classroom photo — keeps the Education DNA without stealing focus. */
body.home .g4a-hv-photo {
  position: absolute;
  inset: 7% 3% 11% 3%;
  z-index: 0;
  overflow: hidden;
  border-radius: 30px;
  opacity: 0.1;
  filter: saturate(0.5) contrast(1.03);
  -webkit-mask-image: radial-gradient(ellipse 76% 72% at 50% 46%, #000 6%, transparent 70%);
  mask-image: radial-gradient(ellipse 76% 72% at 50% 46%, #000 6%, transparent 70%);
  pointer-events: none;
}

body.home .g4a-hv-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.home .g4a-hv-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(rgba(37, 99, 235, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.07) 1px, transparent 1px);
  background-size: 12% 12%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 76%);
}

body.home .g4a-hv-glow {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  filter: blur(42px);
  pointer-events: none;
}

body.home .g4a-hv-glow--blue {
  top: 4%;
  left: 2%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.3), transparent 68%);
}

body.home .g4a-hv-glow--cyan {
  right: 0;
  bottom: 4%;
  width: 52%;
  height: 52%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.3), transparent 68%);
}

/* ---- Orbital ring: a hairline circle with a slow travelling light -------- */
body.home .g4a-hv-orbit {
  position: absolute;
  inset: 4%;
  z-index: 1;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 50%;
  pointer-events: none;
}

body.home .g4a-hv-orbit::before {
  content: "";
  position: absolute;
  inset: 7%;
  border: 1px dashed rgba(37, 99, 235, 0.13);
  border-radius: 50%;
}

body.home .g4a-hv-orbit::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(37, 99, 235, 0) 0deg,
    rgba(37, 99, 235, 0) 230deg,
    rgba(37, 99, 235, 0.5) 286deg,
    rgba(34, 211, 238, 0.78) 330deg,
    rgba(34, 211, 238, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 1.4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 1.4px));
}

html.g4a-motion body.home .g4a-hv-orbit::after {
  animation: g4aOrbitSpin 24s linear infinite;
}

@keyframes g4aOrbitSpin {
  to { transform: rotate(360deg); }
}

/* Connector lines from the passport out to each data layer. */
body.home .g4a-hv-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

body.home .g4a-hv-link {
  fill: none;
  stroke: url(#g4aHvLine);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 4 7;
  opacity: 0.72;
}

html.g4a-motion body.home .g4a-hv-link {
  animation: g4aHvDash 30s linear infinite;
}

@keyframes g4aHvDash {
  to { stroke-dashoffset: -260; }
}

/* ---- The product: one glass AI Passport, tilted in perspective ---------- */
body.home .g4a-passport-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: 38%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}

html.g4a-motion body.home .g4a-passport-wrap {
  animation: g4aHvFloat3d 9s ease-in-out infinite;
}

@keyframes g4aHvFloat3d {
  0%, 100% { transform: translate(-50%, -50%) translateZ(0); }
  50% { transform: translate(-50%, calc(-50% - 9px)) translateZ(22px); }
}

/* Two ghost cards behind give the passport real depth. */
body.home .g4a-passport-stack {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(37, 99, 235, 0.13);
  border-radius: 4.4cqw;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 22px 40px -30px rgba(11, 18, 32, 0.35);
  transform: translate(4.5%, 6%) scale(0.955) rotateY(-15deg) rotateX(7deg);
}

body.home .g4a-passport-stack--2 {
  transform: translate(9%, 12%) scale(0.91) rotateY(-15deg) rotateX(7deg);
  opacity: 0.6;
}

body.home .g4a-passport {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 22px 19px 18px;
  padding: 4.4cqw 3.8cqw 3.6cqw;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 22px;
  border-radius: 4.4cqw;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.5) 100%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.97) 0%, rgba(246, 250, 255, 0.92) 54%, rgba(230, 240, 255, 0.94) 100%);
  box-shadow: 0 40px 68px -34px rgba(11, 18, 32, 0.42),
    0 16px 38px -26px rgba(37, 99, 235, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  transform: rotateY(-15deg) rotateX(7deg);
  transform-style: preserve-3d;
  text-align: left;
}

body.home .g4a-passport::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -12%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(11, 18, 32, 0.3), transparent 72%);
  filter: blur(10px);
  pointer-events: none;
}

body.home .g4a-passport-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.home .g4a-passport-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-size: 2.5cqw;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--g4a-ink);
}

body.home .g4a-passport-brand .material-symbols-outlined {
  font-size: 18px;
  font-size: 3.5cqw;
  color: var(--g4a-blue);
}

body.home .g4a-passport-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  color: var(--g4a-blue-600);
  font-family: "Space Grotesk", sans-serif;
  font-size: 10px;
  font-size: 1.9cqw;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

body.home .g4a-passport-verified .material-symbols-outlined {
  font-size: 13px;
  font-size: 2.5cqw;
}

html.g4a-motion body.home .g4a-passport-verified {
  animation: g4aVerifiedPulse 3.6s ease-in-out infinite;
}

@keyframes g4aVerifiedPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.32); }
  60% { box-shadow: 0 0 0 7px rgba(37, 99, 235, 0); }
}

body.home .g4a-passport-kicker {
  margin: 14px 0 0;
  margin: 2.7cqw 0 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 10px;
  font-size: 1.95cqw;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g4a-blue);
}

body.home .g4a-passport-title {
  margin: 2px 0 0;
  font-size: 15px;
  font-size: 2.85cqw;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--g4a-ink);
}

body.home .g4a-passport-meter {
  height: 5px;
  height: 0.95cqw;
  margin-top: 16px;
  margin-top: 3.1cqw;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
}

body.home .g4a-passport-meter > i {
  display: block;
  width: 78%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--g4a-blue), var(--g4a-cyan));
}

html.g4a-motion body.home .g4a-passport-meter > i {
  animation: g4aMeter 1.9s var(--g4a-ease) 0.5s both;
}

@keyframes g4aMeter {
  from { width: 6%; }
  to { width: 78%; }
}

body.home .g4a-passport-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 11px;
  margin-top: 2.2cqw;
  padding-top: 9px;
  padding-top: 1.8cqw;
  border-top: 1px dashed rgba(37, 99, 235, 0.2);
}

body.home .g4a-passport-id {
  font-family: "Space Grotesk", sans-serif;
  font-size: 10px;
  font-size: 1.9cqw;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--g4a-muted-2);
}

body.home .g4a-passport-qr {
  font-size: 19px;
  font-size: 3.7cqw;
  color: var(--g4a-ink);
  opacity: 0.78;
}

/* ---- The four data layers branching out of the passport ---------------- */
body.home .g4a-hv-layer {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  gap: 1.15cqw;
  width: 24%;
  padding: 9px 12px;
  padding: 1.7cqw 2.3cqw;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(37, 99, 235, 0.17);
  border-radius: 12px;
  border-radius: 2.3cqw;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 32px -22px rgba(11, 18, 32, 0.6);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

body.home .g4a-hv-layer .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 19px;
  font-size: 3.4cqw;
  color: var(--g4a-blue);
}

body.home .g4a-hv-layer b {
  min-width: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-size: 2.3cqw;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--g4a-ink);
  white-space: nowrap;
}

body.home .g4a-hv-layer--skills   { top: 17%; left: 50%; }
body.home .g4a-hv-layer--outputs  { top: 50%; left: 83%; }
body.home .g4a-hv-layer--evidence { top: 83%; left: 50%; }
body.home .g4a-hv-layer--kpi      { top: 50%; left: 17%; }

html.g4a-motion body.home .g4a-hv-layer {
  animation: g4aHvFloat 8.5s ease-in-out infinite;
}

html.g4a-motion body.home .g4a-hv-layer--outputs { animation-delay: -2.1s; }
html.g4a-motion body.home .g4a-hv-layer--evidence { animation-delay: -4.2s; }
html.g4a-motion body.home .g4a-hv-layer--kpi { animation-delay: -6.3s; }

/* ---- The four orbital journey points ----------------------------------- */
body.home .g4a-hv-orbit-node {
  position: absolute;
  z-index: 3;
  width: 9cqw;
  height: 9cqw;
  transform: translate(-50%, -50%);
}

body.home .g4a-hv-orbit-dot {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 26px -16px rgba(37, 99, 235, 0.8),
    0 0 0 6px rgba(37, 99, 235, 0.045);
  color: var(--g4a-blue);
}

body.home .g4a-hv-orbit-dot .material-symbols-outlined {
  font-size: 4.2cqw;
}

body.home .g4a-hv-orbit-node em {
  position: absolute;
  top: calc(100% + 0.9cqw);
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  font-family: "Space Grotesk", sans-serif;
  font-size: 2.1cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--g4a-ink-2);
  white-space: nowrap;
}

body.home .g4a-hv-orbit-node--build em,
body.home .g4a-hv-orbit-node--apply em {
  top: auto;
  bottom: calc(100% + 0.9cqw);
}

body.home .g4a-hv-orbit-node--learn { top: 17.5%; left: 82.5%; }
body.home .g4a-hv-orbit-node--build { top: 82.5%; left: 82.5%; }
body.home .g4a-hv-orbit-node--apply { top: 82.5%; left: 17.5%; }
body.home .g4a-hv-orbit-node--prove { top: 17.5%; left: 17.5%; }

html.g4a-motion body.home .g4a-hv-orbit-node {
  animation: g4aHvFloat 8.5s ease-in-out infinite;
}

html.g4a-motion body.home .g4a-hv-orbit-node--build { animation-delay: -2.1s; }
html.g4a-motion body.home .g4a-hv-orbit-node--apply { animation-delay: -4.2s; }
html.g4a-motion body.home .g4a-hv-orbit-node--prove { animation-delay: -6.3s; }

@keyframes g4aHvFloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 7px)); }
}

/* --------------------------------------------------------------------------
   7. AI PASSPORT — product / credential showcase
   -------------------------------------------------------------------------- */
body.home #go4ai-ai-passport {
  padding: var(--g4a-section-y) 0;
  background: linear-gradient(180deg, #f2f7ff 0%, #ffffff 46%, #ffffff 100%);
  border-top: 1px solid var(--g4a-line-2);
  overflow: hidden;
}

body.home #go4ai-ai-passport::before {
  content: "";
  position: absolute;
  right: -180px;
  top: 40px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.13), transparent 68%);
  pointer-events: none;
}

body.home #go4ai-ai-passport .flex.flex-col.md\:flex-row {
  gap: clamp(36px, 5vw, 76px);
}

body.home #go4ai-ai-passport .md\:w-1\/3 > span.uppercase {
  margin-bottom: 18px !important;
}

body.home #go4ai-ai-passport h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: 20px !important;
  text-wrap: balance;
}

body.home #go4ai-ai-passport p {
  font-size: 17px;
  line-height: 1.72;
  margin-bottom: 28px;
}

/* Primary action of this section becomes a filled premium button */
body.home #go4ai-ai-passport button[onclick*="passport.go4ai.org"] {
  background: var(--g4a-grad-blue) !important;
  border: none !important;
  color: #fff !important;
  padding: 15px 24px !important;
  border-radius: 14px !important;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  box-shadow: 0 16px 34px -16px rgba(37, 99, 235, 0.85), var(--g4a-shadow-inset);
}

body.home #go4ai-ai-passport button[onclick*="passport.go4ai.org"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* The four steps become a connected credential pipeline */
body.home #go4ai-ai-passport .grid.grid-cols-1.sm\:grid-cols-2 {
  gap: 18px;
  position: relative;
}

body.home #go4ai-ai-passport .grid.grid-cols-1.sm\:grid-cols-2 > div {
  border-radius: var(--g4a-r-lg) !important;
  padding: 26px 24px !important;
  background: #fff !important;
  border: 1px solid var(--g4a-line) !important;
  box-shadow: var(--g4a-shadow-sm) !important;
  transition: transform 0.35s var(--g4a-ease), box-shadow 0.35s var(--g4a-ease),
    border-color 0.35s var(--g4a-ease);
  overflow: hidden;
}

body.home #go4ai-ai-passport .grid.grid-cols-1.sm\:grid-cols-2 > div::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--g4a-grad-blue);
  opacity: 0;
  transition: opacity 0.35s var(--g4a-ease);
}

body.home #go4ai-ai-passport .grid.grid-cols-1.sm\:grid-cols-2 > div:hover {
  transform: translateY(-6px);
  border-color: rgba(37, 99, 235, 0.28) !important;
  box-shadow: var(--g4a-shadow-blue) !important;
}

body.home #go4ai-ai-passport .grid.grid-cols-1.sm\:grid-cols-2 > div:hover::after {
  opacity: 1;
}

/* Big ghost numerals */
body.home #go4ai-ai-passport .grid.grid-cols-1.sm\:grid-cols-2 > div > div:first-child {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 62px !important;
  line-height: 1;
  font-weight: 700 !important;
  color: transparent !important;
  -webkit-text-stroke: 1.4px rgba(37, 99, 235, 0.22);
  opacity: 1 !important;
  padding: 14px 16px !important;
}

body.home #go4ai-ai-passport .grid.grid-cols-1.sm\:grid-cols-2 > div:hover > div:first-child {
  -webkit-text-stroke-color: rgba(37, 99, 235, 0.45);
}

body.home #go4ai-ai-passport .grid.grid-cols-1.sm\:grid-cols-2 > div h4 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px !important;
}

body.home #go4ai-ai-passport .grid.grid-cols-1.sm\:grid-cols-2 > div p {
  font-size: 14.5px !important;
  line-height: 1.68;
  margin: 0;
}

body.home #go4ai-ai-passport .grid.grid-cols-1.sm\:grid-cols-2 > div > div.size-10 {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  background: var(--g4a-blue-50) !important;
  border: 1px solid var(--g4a-blue-100);
  margin-bottom: 18px !important;
}

/* Step 04 keeps its filled emphasis but gains depth */
body.home #go4ai-ai-passport .grid.grid-cols-1.sm\:grid-cols-2 > div.bg-gradient-to-br {
  background: var(--g4a-grad-ink) !important;
  border-color: transparent !important;
  box-shadow: 0 26px 56px -24px rgba(11, 18, 32, 0.7) !important;
}

body.home #go4ai-ai-passport .grid.grid-cols-1.sm\:grid-cols-2 > div.bg-gradient-to-br h4,
body.home #go4ai-ai-passport .grid.grid-cols-1.sm\:grid-cols-2 > div.bg-gradient-to-br p {
  color: #fff !important;
}

body.home #go4ai-ai-passport .grid.grid-cols-1.sm\:grid-cols-2 > div.bg-gradient-to-br p {
  color: rgba(219, 234, 254, 0.92) !important;
}

body.home #go4ai-ai-passport .grid.grid-cols-1.sm\:grid-cols-2 > div.bg-gradient-to-br > div:first-child {
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.32);
}

body.home #go4ai-ai-passport .grid.grid-cols-1.sm\:grid-cols-2 > div.bg-gradient-to-br > div.size-10 {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   8. AI PASSPORT DIRECTORY — credential cards
   -------------------------------------------------------------------------- */
body.home #go4ai-passport-directory {
  padding: var(--g4a-section-y-tight) 0;
  background: #ffffff;
}

body.home #go4ai-passport-directory > div {
  max-width: var(--g4a-shell) !important;
  padding-left: var(--g4a-pad) !important;
  padding-right: var(--g4a-pad) !important;
}

body.home #go4ai-passport-directory h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
}

body.home #go4ai-passport-directory .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4 {
  gap: 18px;
}

body.home #go4ai-passport-directory .grid > a {
  border-radius: var(--g4a-r-lg) !important;
  border-color: var(--g4a-line) !important;
  box-shadow: var(--g4a-shadow-sm) !important;
  transition: transform 0.35s var(--g4a-ease), box-shadow 0.35s var(--g4a-ease),
    border-color 0.35s var(--g4a-ease);
  position: relative;
  overflow: hidden;
}

body.home #go4ai-passport-directory .grid > a::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.06), transparent 42%);
  opacity: 0;
  transition: opacity 0.35s var(--g4a-ease);
}

body.home #go4ai-passport-directory .grid > a:hover {
  transform: translateY(-6px);
  border-color: rgba(37, 99, 235, 0.3) !important;
  box-shadow: var(--g4a-shadow-blue) !important;
}

body.home #go4ai-passport-directory .grid > a:hover::before {
  opacity: 1;
}

body.home #go4ai-passport-directory .grid > a > div:first-child {
  padding: 22px !important;
}

body.home #go4ai-passport-directory .grid > a .size-11 {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  background: var(--g4a-blue-50) !important;
  border-color: var(--g4a-blue-100) !important;
}

body.home #go4ai-passport-directory .grid > a h3 {
  font-size: 16px;
  font-weight: 700;
}

body.home #go4ai-passport-directory .grid > a > div:last-child {
  background: #f8fbff !important;
  border-top-color: var(--g4a-line) !important;
}

/* --------------------------------------------------------------------------
   9. EVIDENCE — data wall + case studies + social proof + video strip
   -------------------------------------------------------------------------- */
body.home #go4ai-evidence {
  padding: var(--g4a-section-y) 0;
  background:
    radial-gradient(900px 460px at 88% 0%, rgba(37, 99, 235, 0.09), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  border-top: 1px solid var(--g4a-line-2);
  overflow: hidden;
}

body.home #go4ai-evidence h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  position: relative;
  display: inline-block;
  padding-bottom: 18px;
}

body.home #go4ai-evidence h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 76px;
  height: 4px;
  border-radius: 4px;
  background: var(--g4a-grad-blue);
}

/* Data wall */
body.home #go4ai-evidence .grid.grid-cols-2.md\:grid-cols-4 {
  gap: clamp(18px, 2.6vw, 34px) !important;
  border-bottom: 1px solid var(--g4a-line) !important;
  padding-bottom: clamp(38px, 5vw, 64px) !important;
  margin-bottom: clamp(44px, 5vw, 72px) !important;
}

body.home #go4ai-evidence .grid.grid-cols-2.md\:grid-cols-4 > div {
  position: relative;
  padding-left: 22px;
}

body.home #go4ai-evidence .grid.grid-cols-2.md\:grid-cols-4 > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--g4a-grad-blue);
  opacity: 0.85;
}

body.home #go4ai-evidence .grid.grid-cols-2.md\:grid-cols-4 > div > p:first-child {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: clamp(40px, 5.4vw, 68px) !important;
  line-height: 0.98;
  font-weight: 700 !important;
  letter-spacing: -0.05em;
  color: var(--g4a-ink) !important;
  margin-bottom: 12px !important;
  gap: 10px !important;
}

body.home #go4ai-evidence .js-countup {
  background: var(--g4a-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration: none !important;
  text-underline-offset: 6px;
}

body.home #go4ai-evidence .grid.grid-cols-2.md\:grid-cols-4 > div > p:last-child {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  color: var(--g4a-muted) !important;
  max-width: 190px;
}

/* Case studies — enterprise education case layout (not a plain card) */
body.home #go4ai-evidence .md\:grid-cols-2 > div {
  border-radius: var(--g4a-r-lg) !important;
  background: #fff !important;
  border: 1px solid var(--g4a-line) !important;
  box-shadow: var(--g4a-shadow-sm);
  padding: 0 !important;
  overflow: hidden;
  display: grid !important;
  grid-template-columns: 152px 1fr;
  transition: transform 0.35s var(--g4a-ease), box-shadow 0.35s var(--g4a-ease),
    border-color 0.35s var(--g4a-ease);
}

body.home #go4ai-evidence .md\:grid-cols-2 > div:hover {
  transform: translateY(-5px);
  border-color: rgba(37, 99, 235, 0.26) !important;
  box-shadow: var(--g4a-shadow-blue);
}

/* Left rail: turns the existing header (avatar + org) into a vertical spine */
body.home #go4ai-evidence .md\:grid-cols-2 > div > div:first-child {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 26px 20px;
  background: var(--g4a-grad-ink);
  color: #fff;
}

body.home #go4ai-evidence .md\:grid-cols-2 > div > div:first-child .size-10 {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

body.home #go4ai-evidence .md\:grid-cols-2 > div > div:first-child p:first-child {
  color: #fff !important;
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px !important;
  line-height: 1.3;
}

body.home #go4ai-evidence .md\:grid-cols-2 > div > div:first-child p:last-child {
  color: #93c5fd !important;
  font-size: 11px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 5px;
}

/* Right: the Bối cảnh / Triển khai / Kết quả rows */
body.home #go4ai-evidence .md\:grid-cols-2 > div > div:last-child {
  padding: 26px 26px 26px 24px;
  gap: 16px !important;
}

body.home #go4ai-evidence .md\:grid-cols-2 > div > div:last-child > div {
  display: grid !important;
  grid-template-columns: 92px 1fr;
  gap: 12px !important;
  align-items: baseline;
  font-size: 14.5px !important;
}

body.home #go4ai-evidence .md\:grid-cols-2 > div > div:last-child > div > span:first-child {
  min-width: 0 !important;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g4a-blue) !important;
}

body.home #go4ai-evidence .md\:grid-cols-2 > div > div:last-child > div > span:last-child {
  color: var(--g4a-muted);
  line-height: 1.65;
}

body.home #go4ai-evidence .md\:grid-cols-2 > div > div:last-child > div:last-child > span:last-child {
  color: var(--g4a-ink) !important;
  font-weight: 600;
}

/* Testimonials — premium social proof, quotes not cards */
body.home #go4ai-evidence .md\:grid-cols-3:not(.grid) > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 26px 24px 24px 28px !important;
  border-radius: var(--g4a-r) !important;
  position: relative;
  transition: background 0.35s var(--g4a-ease), transform 0.35s var(--g4a-ease);
}

body.home #go4ai-evidence .md\:grid-cols-3:not(.grid) > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 42px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 34'%3E%3Cpath fill='%232563eb' fill-opacity='0.24' d='M0 34V21C0 9.3 6.9 1.8 19.5 0l2.3 6.3C14.3 8 10.8 11.4 10.2 16h9.3v18H0Zm28.5 0V21C28.5 9.3 35.4 1.8 48 0l2.3 6.3C42.8 8 39.3 11.4 38.7 16h9.3v18H28.5Z'/%3E%3C/svg%3E");
}

body.home #go4ai-evidence .md\:grid-cols-3:not(.grid) > div::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--g4a-line);
}

body.home #go4ai-evidence .md\:grid-cols-3:not(.grid) > div:hover {
  background: #ffffff !important;
  transform: translateY(-4px);
  box-shadow: var(--g4a-shadow-sm) !important;
}

body.home #go4ai-evidence .md\:grid-cols-3:not(.grid) > div:hover::after {
  background: var(--g4a-grad-blue);
}

body.home #go4ai-evidence .md\:grid-cols-3:not(.grid) > div > div:first-child {
  font-size: 13px !important;
  letter-spacing: 0.14em;
  color: #f59e0b !important;
  margin-bottom: 12px !important;
}

body.home #go4ai-evidence .md\:grid-cols-3:not(.grid) > div > p {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--g4a-ink-2) !important;
  font-style: normal !important;
  margin-bottom: 16px !important;
}

body.home #go4ai-evidence .md\:grid-cols-3:not(.grid) > div > p:last-child {
  font-size: 12.5px !important;
  color: var(--g4a-muted-2) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

/* Before/after video strip */
body.home #go4ai-evidence .grid.md\:grid-cols-3.gap-6 > div {
  border-radius: var(--g4a-r-lg) !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--g4a-shadow);
  transition: transform 0.4s var(--g4a-ease), box-shadow 0.4s var(--g4a-ease);
}

body.home #go4ai-evidence .grid.md\:grid-cols-3.gap-6 > div:hover {
  transform: translateY(-6px);
  box-shadow: var(--g4a-shadow-blue);
}

body.home #go4ai-evidence .grid.md\:grid-cols-3.gap-6 > div > div:nth-child(2) > div {
  width: 62px !important;
  height: 62px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

body.home #go4ai-evidence .grid.md\:grid-cols-3.gap-6 > div > div:last-child {
  padding: 20px !important;
}

body.home #go4ai-evidence .grid.md\:grid-cols-3.gap-6 > div > div:last-child p:first-child {
  font-size: 10.5px !important;
  letter-spacing: 0.16em;
  color: #7dd3fc !important;
}

/* --------------------------------------------------------------------------
   10. PROGRAM — learning path / learning architecture
   -------------------------------------------------------------------------- */
body.home #workplace-ai-foundation-go4ai {
  padding: var(--g4a-section-y) 0;
  background: #ffffff;
  overflow: hidden;
}

body.home #workplace-ai-foundation-go4ai > div > div:first-child {
  margin-bottom: clamp(44px, 5vw, 72px) !important;
}

body.home #workplace-ai-foundation-go4ai h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  font-weight: 700;
  margin-bottom: 18px !important;
}

body.home #workplace-ai-foundation-go4ai > div > div:first-child p {
  font-size: 17px !important;
  line-height: 1.75;
  max-width: 820px;
  margin: 0 auto;
}

/* The three pillars become numbered architecture stages on a connecting rail */
body.home #workplace-ai-foundation-go4ai .grid.md\:grid-cols-3 {
  position: relative;
  gap: 26px !important;
  margin-bottom: clamp(48px, 5.5vw, 82px) !important;
  counter-reset: g4aStage;
}

body.home #workplace-ai-foundation-go4ai .grid.md\:grid-cols-3::before {
  content: "";
  position: absolute;
  top: 62px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(37, 99, 235, 0.35) 0 10px, transparent 10px 20px);
  z-index: 0;
}

body.home #workplace-ai-foundation-go4ai .grid.md\:grid-cols-3 > div {
  counter-increment: g4aStage;
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%) !important;
  border: 1px solid var(--g4a-line) !important;
  border-radius: var(--g4a-r-lg) !important;
  padding: 30px 26px 28px !important;
  box-shadow: var(--g4a-shadow-sm);
  transition: transform 0.35s var(--g4a-ease), box-shadow 0.35s var(--g4a-ease),
    border-color 0.35s var(--g4a-ease);
}

body.home #workplace-ai-foundation-go4ai .grid.md\:grid-cols-3 > div:hover {
  transform: translateY(-7px);
  border-color: rgba(37, 99, 235, 0.3) !important;
  box-shadow: var(--g4a-shadow-blue);
}

body.home #workplace-ai-foundation-go4ai .grid.md\:grid-cols-3 > div::after {
  content: "0" counter(g4aStage);
  position: absolute;
  top: 20px;
  right: 22px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--g4a-blue);
  opacity: 0.5;
}

body.home #workplace-ai-foundation-go4ai .grid.md\:grid-cols-3 > div > div.size-12 {
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  margin-bottom: 20px !important;
  border: 1px solid rgba(37, 99, 235, 0.14);
  background: var(--g4a-blue-50) !important;
  color: var(--g4a-blue) !important;
  box-shadow: 0 10px 22px -14px rgba(37, 99, 235, 0.8);
}

body.home #workplace-ai-foundation-go4ai .grid.md\:grid-cols-3 > div > div.size-12 .material-symbols-outlined {
  font-size: 26px;
}

body.home #workplace-ai-foundation-go4ai .grid.md\:grid-cols-3 > div h3 {
  font-size: 19px !important;
  font-weight: 700;
  margin-bottom: 10px !important;
}

body.home #workplace-ai-foundation-go4ai .grid.md\:grid-cols-3 > div p {
  font-size: 14.5px !important;
  line-height: 1.7;
  margin: 0;
}

/* Audience cards */
body.home #workplace-ai-foundation-go4ai .grid.grid-cols-2.md\:grid-cols-4 {
  gap: 16px !important;
}

body.home #workplace-ai-foundation-go4ai .grid.grid-cols-2.md\:grid-cols-4 > div {
  border-radius: var(--g4a-r-lg) !important;
  box-shadow: var(--g4a-shadow-sm);
  transition: transform 0.4s var(--g4a-ease), box-shadow 0.4s var(--g4a-ease);
}

/* Hover feedback is the image zoom only (group-hover:scale-105) — no extra
   darkening and no card lift. */
body.home #workplace-ai-foundation-go4ai .grid.grid-cols-2.md\:grid-cols-4 > div:hover {
  box-shadow: var(--g4a-shadow-blue);
}

body.home #workplace-ai-foundation-go4ai .grid.grid-cols-2.md\:grid-cols-4 > div > div:last-child {
  padding: 22px 20px !important;
  /* Clear for the top ~58% of the image, then only a light scrim in the bottom
     band so the photo keeps its true colour and the copy stays readable. */
  background: linear-gradient(180deg, rgba(9, 15, 28, 0) 0%, rgba(9, 15, 28, 0) 56%, rgba(9, 15, 28, 0.32) 70%, rgba(9, 15, 28, 0.68) 85%, rgba(9, 15, 28, 0.9) 100%) !important;
  text-shadow: 0 1px 14px rgba(6, 12, 24, 0.72), 0 1px 4px rgba(6, 12, 24, 0.55);
}

body.home #workplace-ai-foundation-go4ai .grid.grid-cols-2.md\:grid-cols-4 > div > div:last-child p:first-child {
  font-size: 18px !important;
  letter-spacing: -0.02em;
}

body.home #workplace-ai-foundation-go4ai .grid.grid-cols-2.md\:grid-cols-4 > div > div:last-child p:last-child {
  font-size: 12px !important;
  line-height: 1.6;
  color: rgba(233, 238, 246, 0.94) !important;
  margin-top: 7px !important;
}

/* --------------------------------------------------------------------------
   11. FAQ — quiet, airy light band (a visual rest between busy sections)
   -------------------------------------------------------------------------- */
body.home #go4ai-faq {
  padding: var(--g4a-section-y) 0;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border-top: 1px solid var(--g4a-line-2);
  border-bottom: 1px solid var(--g4a-line-2);
}

body.home #go4ai-faq h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  margin-bottom: clamp(34px, 4vw, 54px) !important;
}

body.home #go4ai-faq .space-y-4 > * + * {
  margin-top: 14px !important;
}

body.home #go4ai-faq details {
  background: #ffffff !important;
  border: 1px solid var(--g4a-line) !important;
  border-radius: var(--g4a-r) !important;
  padding: 0 !important;
  box-shadow: var(--g4a-shadow-xs);
  transition: border-color 0.3s var(--g4a-ease), box-shadow 0.3s var(--g4a-ease);
  overflow: hidden;
}

body.home #go4ai-faq details[open] {
  border-color: rgba(37, 99, 235, 0.28) !important;
  box-shadow: var(--g4a-shadow-sm);
}

body.home #go4ai-faq details summary {
  padding: 22px 24px;
  gap: 16px !important;
  align-items: center;
}

body.home #go4ai-faq details summary h3 {
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
}

body.home #go4ai-faq details summary .material-symbols-outlined {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--g4a-blue-50);
  color: var(--g4a-blue);
  border: 1px solid var(--g4a-blue-100);
  font-size: 20px;
}

body.home #go4ai-faq details p {
  padding: 0 24px 24px;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.78;
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   12. TEAM — six uniform mentor cards
   -------------------------------------------------------------------------- */
body.home #go4ai-team {
  padding: var(--g4a-section-y) 0;
  background: #ffffff;
  border-top: none;
  border-bottom: none;
}

body.home #go4ai-team > div > div:first-child {
  margin-bottom: clamp(34px, 4vw, 54px) !important;
}

body.home #go4ai-team h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
}

body.home #go4ai-team > div > div:first-child p {
  font-size: 17px !important;
  line-height: 1.75;
  max-width: 860px;
}

body.home #go4ai-team .md\:grid-cols-2.lg\:grid-cols-3 {
  gap: 26px !important;
  grid-auto-rows: 1fr;
}

/* Remaining mentors */
body.home #go4ai-team .md\:grid-cols-2.lg\:grid-cols-3 > a {
  border-radius: var(--g4a-r-lg) !important;
  border: 1px solid var(--g4a-line) !important;
  background: #fff !important;
  box-shadow: var(--g4a-shadow-sm);
  transition: transform 0.4s var(--g4a-ease), box-shadow 0.4s var(--g4a-ease),
    border-color 0.4s var(--g4a-ease);
}

body.home #go4ai-team .md\:grid-cols-2.lg\:grid-cols-3 > a:hover {
  transform: translateY(-7px);
  border-color: rgba(37, 99, 235, 0.3) !important;
  box-shadow: var(--g4a-shadow-blue);
}

body.home #go4ai-team .md\:grid-cols-2.lg\:grid-cols-3 > a > div:first-child {
  background: #eef3fb !important;
}

body.home #go4ai-team .md\:grid-cols-2.lg\:grid-cols-3 > a > div:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0) 55%, rgba(11, 18, 32, 0.42) 100%);
  pointer-events: none;
}

body.home #go4ai-team .md\:grid-cols-2.lg\:grid-cols-3 > a h3 {
  font-size: 18px !important;
}

body.home #go4ai-team .md\:grid-cols-2.lg\:grid-cols-3 > a > div:last-child > div:first-child p {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12.5px !important;
  letter-spacing: 0.04em;
  font-weight: 600 !important;
  min-height: 44px !important;
}

body.home #go4ai-team .md\:grid-cols-2.lg\:grid-cols-3 > a ul {
  font-size: 13.5px !important;
  line-height: 1.65;
  min-height: 0 !important;
}

body.home #go4ai-team .md\:grid-cols-2.lg\:grid-cols-3 > a ul li {
  margin-bottom: 7px;
}

body.home #go4ai-team .md\:grid-cols-2.lg\:grid-cols-3 > a > div:last-child > div:last-child span {
  font-family: "Space Grotesk", sans-serif;
  font-size: 13.5px;
}

/* Mobile: the mentor strip is a horizontal swipe carousel (the theme's own
   markup: flex + snap-x + overflow-x-auto). `h-full` (height:100%) against an
   auto-height flex row is indefinite, so each card fell back to its own content
   height and Lucas's card came out the tallest (685px vs 552px). `height:auto`
   + stretch makes all six identical, which is what the brief requires. */
@media (max-width: 767px) {
  body.home #go4ai-team .md\:grid-cols-2.lg\:grid-cols-3 {
    align-items: stretch;
  }

  body.home #go4ai-team .md\:grid-cols-2.lg\:grid-cols-3 > a {
    align-self: stretch;
    height: auto !important;
  }
}

/* --------------------------------------------------------------------------
   13. FINAL CTA — deep navy with a blue glow (the strongest close)
   -------------------------------------------------------------------------- */
body.home #go4ai-final-cta {
  padding: clamp(72px, 8vw, 128px) 0;
  background: var(--g4a-grad-ink) !important;
  overflow: hidden;
  border-radius: 0;
}

body.home #go4ai-final-cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -34%;
  transform: translateX(-50%);
  width: min(1100px, 118%);
  aspect-ratio: 1 / 0.6;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.55), rgba(34, 211, 238, 0.16) 46%, transparent 72%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

body.home #go4ai-final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 10%, transparent 76%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 10%, transparent 76%);
  z-index: 0;
}

/* Remove the external texture image, keep the container clean. */
body.home #go4ai-final-cta > div[aria-hidden="true"] {
  display: none !important;
}

body.home #go4ai-final-cta h2 {
  font-size: clamp(28px, 3.8vw, 50px);
  line-height: 1.12;
  font-weight: 700;
  color: #fff !important;
  margin-bottom: 22px !important;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

body.home #go4ai-final-cta p {
  color: rgba(191, 219, 254, 0.92) !important;
  font-size: clamp(15.5px, 1.4vw, 18px) !important;
  line-height: 1.75;
}

body.home #go4ai-final-cta .flex.flex-col.sm\:flex-row {
  gap: 14px !important;
  margin-bottom: 26px;
}

body.home #go4ai-final-cta button,
body.home #go4ai-final-cta a {
  border-radius: 14px !important;
  padding: 17px 30px !important;
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 0.3s var(--g4a-ease), box-shadow 0.3s var(--g4a-ease),
    background 0.3s var(--g4a-ease);
}

body.home #go4ai-final-cta button {
  background: #fff !important;
  color: var(--g4a-blue-700) !important;
  box-shadow: 0 20px 46px -18px rgba(255, 255, 255, 0.55);
}

body.home #go4ai-final-cta button:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 56px -18px rgba(255, 255, 255, 0.7);
}

body.home #go4ai-final-cta a {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(147, 197, 253, 0.5) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body.home #go4ai-final-cta a:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(191, 219, 254, 0.85) !important;
  transform: translateY(-2px);
}

body.home #go4ai-final-cta > div:last-child > p:last-child {
  color: rgba(148, 163, 184, 0.85) !important;
  font-size: 12.5px !important;
  line-height: 1.7;
  max-width: 640px;
}

/* --------------------------------------------------------------------------
   14. PRESS — editorial layout
   -------------------------------------------------------------------------- */
body.home #go4ai-media-section {
  padding: clamp(66px, 7.4vw, 118px) 0 !important;
  background:
    radial-gradient(circle at 6% 0%, rgba(37, 99, 235, 0.07), transparent 34%),
    radial-gradient(circle at 94% 8%, rgba(34, 211, 238, 0.07), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f6f9fe 100%) !important;
}

body.home #go4ai-media-section .g4a-media-title {
  font-size: clamp(28px, 3.6vw, 48px) !important;
  letter-spacing: -0.04em !important;
  font-weight: 700 !important;
  color: var(--g4a-ink) !important;
}

body.home #go4ai-media-section .g4a-media-tag {
  border-radius: 999px !important;
  background: linear-gradient(180deg, #f4f8ff 0%, #eaf1ff 100%) !important;
  border-color: var(--g4a-blue-100) !important;
  color: var(--g4a-blue-600) !important;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: 0.12em !important;
}

body.home #go4ai-media-section .g4a-media-lead {
  color: var(--g4a-muted) !important;
  line-height: 1.78 !important;
}

body.home #go4ai-media-section .g4a-media-card {
  flex: 0 0 372px !important;
  max-width: 372px !important;
  min-height: 300px !important;
  border-radius: var(--g4a-r-lg) !important;
  border-color: var(--g4a-line) !important;
  background: #ffffff !important;
  box-shadow: var(--g4a-shadow-sm) !important;
  padding: 28px !important;
  counter-increment: g4aPress;
  position: relative;
  transition: transform 0.35s var(--g4a-ease), box-shadow 0.35s var(--g4a-ease),
    border-color 0.35s var(--g4a-ease) !important;
}

body.home #go4ai-media-section .g4a-media-track {
  counter-reset: g4aPress;
}

body.home #go4ai-media-section .g4a-media-card::after {
  content: counter(g4aPress, decimal-leading-zero);
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--g4a-blue);
  opacity: 0.45;
}

body.home #go4ai-media-section .g4a-media-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
  box-shadow: var(--g4a-shadow-blue) !important;
}

body.home #go4ai-media-section .g4a-media-source {
  border-radius: 999px !important;
  background: var(--g4a-blue-50) !important;
  border-color: var(--g4a-blue-100) !important;
  color: var(--g4a-blue-600) !important;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.home #go4ai-media-section .g4a-media-card h3 {
  font-size: 20px !important;
  line-height: 1.32 !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  padding-right: 34px;
}

body.home #go4ai-media-section .g4a-media-card p {
  font-size: 14.5px !important;
  line-height: 1.68 !important;
}

body.home #go4ai-media-section .g4a-media-readmore {
  border-top-color: var(--g4a-line-2) !important;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13.5px !important;
}

body.home #go4ai-media-section .g4a-media-arrow {
  border-color: var(--g4a-line) !important;
  box-shadow: var(--g4a-shadow-xs) !important;
}

body.home #go4ai-media-section .g4a-media-arrow:hover {
  background: var(--g4a-blue) !important;
  border-color: var(--g4a-blue) !important;
}

body.home #go4ai-media-section .g4a-media-track::-webkit-scrollbar-thumb {
  background: #c9d8f2 !important;
}

/* --------------------------------------------------------------------------
   15. ACTIVITIES + PARTNERS — clean logo wall
   -------------------------------------------------------------------------- */
body.home #go4ai-activities {
  padding: var(--g4a-section-y) 0 !important;
  background: linear-gradient(180deg, #f6f9fe 0%, #eef4ff 100%) !important;
  padding-left: var(--g4a-pad) !important;
  padding-right: var(--g4a-pad) !important;
}

body.home #go4ai-activities h2 {
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 700;
}

body.home #go4ai-activities > div:first-child > div:first-child p {
  font-size: 16.5px !important;
  color: var(--g4a-muted) !important;
}

/* Activity cards are injected by the page's own script — style them here. */
body.home #g4aiActTrack .g4ai-act-card {
  border-radius: var(--g4a-r-lg) !important;
  border: 1px solid var(--g4a-line) !important;
  box-shadow: var(--g4a-shadow-sm) !important;
  transition: transform 0.35s var(--g4a-ease), box-shadow 0.35s var(--g4a-ease),
    border-color 0.35s var(--g4a-ease);
}

body.home #g4aiActTrack .g4ai-act-card:hover {
  transform: translateY(-6px);
  border-color: rgba(37, 99, 235, 0.3) !important;
  box-shadow: var(--g4a-shadow-blue) !important;
}

/* Logo wall */
body.home #go4ai-activities .g4ai-logo-card {
  height: 96px !important;
  border-radius: var(--g4a-r) !important;
  border: 1px solid var(--g4a-line) !important;
  background: #ffffff !important;
  box-shadow: var(--g4a-shadow-xs) !important;
  transition: transform 0.3s var(--g4a-ease), box-shadow 0.3s var(--g4a-ease),
    border-color 0.3s var(--g4a-ease);
}

body.home #go4ai-activities .g4ai-logo-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.28) !important;
  box-shadow: var(--g4a-shadow-sm) !important;
}

body.home #go4ai-activities .g4ai-logo-card img {
  max-height: 60px !important;
  filter: grayscale(0.15);
  transition: filter 0.3s var(--g4a-ease), transform 0.3s var(--g4a-ease);
}

body.home #go4ai-activities .g4ai-logo-card:hover img {
  filter: grayscale(0);
  transform: scale(1.04);
}

body.home #go4ai-activities .grid.grid-cols-2.sm\:grid-cols-3.md\:grid-cols-6 {
  gap: 14px !important;
}

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
body.home > footer {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fe 100%) !important;
  border-top: 1px solid var(--g4a-line) !important;
  padding-top: clamp(48px, 5vw, 76px) !important;
}

body.home > footer h4 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px !important;
  letter-spacing: 0.01em;
  margin-bottom: 16px !important;
}

body.home > footer .rounded-2xl {
  border-radius: var(--g4a-r-lg) !important;
  background: #ffffff !important;
  border-color: var(--g4a-line) !important;
  box-shadow: var(--g4a-shadow-xs);
}

body.home > footer ul a {
  transition: color 0.2s var(--g4a-ease), padding-left 0.2s var(--g4a-ease);
}

body.home > footer ul a:hover {
  color: var(--g4a-blue) !important;
  padding-left: 3px;
}

/* --------------------------------------------------------------------------
   17. MOTION LAYER
   Everything below is additive: without the `g4a-motion` class on <html>
   (i.e. JS disabled or failed) the page renders fully visible.
   -------------------------------------------------------------------------- */
body.home .g4a-reveal {
  opacity: 1;
  transform: none;
}

html.g4a-motion body.home .g4a-reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.72s var(--g4a-ease), transform 0.72s var(--g4a-ease);
  transition-delay: var(--g4a-delay, 0ms);
  will-change: opacity, transform;
}

html.g4a-motion body.home .g4a-reveal.g4a-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.g4a-motion body.home .g4a-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

}

/* --------------------------------------------------------------------------
   18. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  body.home .g4a-hv-stage {
    max-width: 500px;
  }
}

@media (max-width: 1023px) {
  body.home #go4ai-hero {
    padding-top: clamp(40px, 8vw, 64px);
  }

  body.home #go4ai-hero .grid > div:first-child {
    max-width: none;
  }

  body.home .g4a-hero-visual {
    margin-top: 12px;
  }

  body.home .g4a-hv-stage {
    max-width: 470px;
    margin: 0 auto;
  }

  body.home #workplace-ai-foundation-go4ai .grid.md\:grid-cols-3::before {
    display: none;
  }
}

@media (max-width: 767px) {
  body.home #go4ai-evidence .md\:grid-cols-2 > div {
    grid-template-columns: 1fr;
  }

  body.home #go4ai-evidence .md\:grid-cols-2 > div > div:first-child {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 18px 20px;
  }

  body.home #go4ai-evidence .md\:grid-cols-2 > div > div:last-child {
    padding: 22px 20px;
  }

  body.home #go4ai-media-section .g4a-media-card {
    flex: 0 0 84vw !important;
    max-width: 84vw !important;
    min-height: 0 !important;
    padding: 24px !important;
  }
}

@media (max-width: 640px) {
  body.home #go4ai-hero h1 {
    font-size: clamp(30px, 8.6vw, 40px);
    letter-spacing: -0.03em;
  }

  body.home #go4ai-hero .flex.flex-wrap.gap-4 > button,
  body.home #go4ai-hero .flex.flex-wrap.gap-4 > a {
    width: 100%;
    justify-content: center;
    padding: 15px 22px;
  }

  /* Hero visual keeps the DESKTOP concept on mobile: the glass passport stays
     the centred anchor, and the orbital ring, connector lines, four data layers
     and four journey points all keep their desktop positions. Only the scale and
     the type ramp change — nothing is un-positioned and nothing becomes a list.

     The geometry is deliberately left alone (same 38% passport, 24% layers,
     9cqw points, 4% orbit inset), because a uniform scale of a composition that
     does not overlap on desktop cannot overlap on mobile either. The cqw values
     below are raised only where the desktop ramp would fall under ~10px. */
  body.home .g4a-hv-stage {
    max-width: 380px;
    margin: 0 auto;
    /* Slightly stronger perspective than desktop, so the tilt still reads at a
       small size (desktop ratio is ~2.4x the stage width). */
    perspective: 1000px;
  }

  body.home .g4a-hv-photo {
    opacity: 0.08;
  }

  body.home .g4a-hv-glow {
    opacity: 0.55;
  }

  /* Passport — same 38% footprint and the same tilt/ghost stack. */
  body.home .g4a-passport {
    padding: 3.2cqw 2.4cqw 2.6cqw;
    border-radius: 3.4cqw;
  }

  body.home .g4a-passport-stack {
    border-radius: 3.4cqw;
  }

  body.home .g4a-passport-top {
    gap: 1.2cqw;
  }

  body.home .g4a-passport-brand { font-size: 2.85cqw; }
  body.home .g4a-passport-brand .material-symbols-outlined { font-size: 3.3cqw; }
  body.home .g4a-passport-verified {
    gap: 0.65cqw;
    padding: 0.5cqw 1.15cqw;
    font-size: 2.9cqw;
  }
  body.home .g4a-passport-verified .material-symbols-outlined { font-size: 2.7cqw; }
  body.home .g4a-passport-kicker { margin-top: 2.2cqw; font-size: 3.0cqw; }
  body.home .g4a-passport-title { font-size: 3.5cqw; }
  body.home .g4a-passport-meter { height: 0.8cqw; margin-top: 2.4cqw; }
  body.home .g4a-passport-foot { margin-top: 1.7cqw; padding-top: 1.4cqw; }
  body.home .g4a-passport-id { font-size: 3.05cqw; }
  body.home .g4a-passport-qr { font-size: 4.4cqw; }

  /* Data layers — same 24% width, same four positions. */
  body.home .g4a-hv-layer {
    gap: 1.1cqw;
    padding: 1.3cqw 1.9cqw;
    border-radius: 2.6cqw;
  }

  body.home .g4a-hv-layer .material-symbols-outlined { font-size: 3.5cqw; }
  body.home .g4a-hv-layer b { font-size: 3.4cqw; }

  /* Orbital points — same 9cqw diameter, same diagonal positions. */
  body.home .g4a-hv-orbit-dot {
    box-shadow: 0 8px 18px -12px rgba(37, 99, 235, 0.8),
      0 0 0 4px rgba(37, 99, 235, 0.05);
  }

  body.home .g4a-hv-orbit-dot .material-symbols-outlined { font-size: 4.1cqw; }

  body.home .g4a-hv-orbit-node em { font-size: 3.1cqw; }

  body.home #go4ai-evidence .grid.grid-cols-2.md\:grid-cols-4 > div {
    padding-left: 16px;
  }

  body.home #go4ai-evidence .grid.grid-cols-2.md\:grid-cols-4 > div > p:first-child {
    font-size: 34px !important;
  }

  body.home #go4ai-evidence .grid.grid-cols-2.md\:grid-cols-4 > div > p:last-child {
    font-size: 12.5px !important;
  }

  body.home #go4ai-faq details summary {
    padding: 18px 18px;
  }

  body.home #go4ai-faq details p {
    padding: 0 18px 20px;
  }

  body.home #go4ai-final-cta button,
  body.home #go4ai-final-cta a {
    width: 100%;
  }

  body.home #go4ai-activities .g4ai-logo-card {
    height: 78px !important;
  }

  body.home #go4ai-activities .g4ai-logo-card img {
    max-height: 46px !important;
  }
}

@media (max-width: 420px) {
  body.home #go4ai-evidence .md\:grid-cols-2 > div > div:last-child > div {
    grid-template-columns: 1fr;
    gap: 4px !important;
  }
}

/* --------------------------------------------------------------------------
   19. MARQUEE — auto-scrolling strips (press · activities · partner logos)
   --------------------------------------------------------------------------
   Additive and non-destructive: with JS off — or with reduced motion — every
   strip is an ordinary, swipeable overflow row in which each item appears
   exactly once. When motion is allowed the script clones the set once, sets
   `width: max-content` on the track and drives `transform: translate3d()` in a
   rAF loop.

   Why transform and not `scrollLeft`: `scrollLeft` is quantised to whole pixels
   in every browser, so a 40–60 px/s strip can only advance in 1 px steps —
   measured on production, 33% of frames showed a delta of exactly 0 and the
   rest 1 px, which reads as "chạy quá chậm / chưa mượt". A transform accepts
   fractional pixels and is composited on the GPU, so the same speed is smooth.
   -------------------------------------------------------------------------- */

/* The section's inner container is `max-w-[1200px] w-full` inside a BLOCK
   parent, so it sat flush left at x=40 and left a 126px (1366) / 200px (1440)
   strip of empty section to its right — the "large blank on the right" next to
   the activities strip and the logo walls. The strips have to span the section's
   own content box, so drop the cap here (the shared shell rule sets it to
   var(--g4a-shell); same specificity, so this must stay after it). */
body.home #go4ai-activities > .max-w-\[1200px\] {
  max-width: none;
}

body.home .g4a-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
}

body.home .g4a-marquee__inner {
  display: flex;
  /* Failsafe state (no JS, or reduced motion): an ordinary, swipeable overflow
     row. The script flips the strip to `--ready`, which is what switches the
     track to `width: max-content` + transform. */
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.home .g4a-marquee__inner::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Driven state: the track is exactly as wide as its two cloned sets and the
   script owns the position through `transform`. */
body.home .g4a-marquee--ready .g4a-marquee__inner {
  width: max-content;
  overflow: visible;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Let the browser keep vertical page scrolling while we own the horizontal
     drag, so touch swipe still works on the strip itself. */
  touch-action: pan-y;
}

/* Soft edge fade: a moving strip should never hard-cut at the container edge.
   Wide enough to dissolve the part of a card that is leaving/entering, which is
   what the old 3.2% (~38px) band could not do for 176px logo cards or 340px
   activity cards. Only applied once the script has taken over, so the no-JS row
   stays clean. */
body.home .g4a-marquee--ready {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

@media (min-width: 1024px) {
  body.home .g4a-marquee--ready {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
  }
}

/* The cloned half is renumbered by the script (inline `counter-set`) so the
   decorative press numbers read 01..N on both halves of the loop. */

/* Activities strip: gap + shadow room (the old utility classes moved here so
   the markup stays a plain list). */
body.home #g4aiActTrack {
  gap: 16px;
  padding: 4px 0 18px;
}

/* Partner logo walls: a fixed footprint per cell keeps the loop predictable. */
body.home .g4a-logo-marquee .g4a-marquee__inner {
  gap: 16px;
  padding: 8px 0 12px;
}

body.home .g4a-logo-cell {
  flex: 0 0 176px;
  width: 176px;
}

@media (max-width: 640px) {
  body.home .g4a-logo-cell {
    flex: 0 0 148px;
    width: 148px;
  }

  body.home #g4aiActTrack {
    gap: 14px;
  }
}