/* ==========================================================================
 *  Magic Data — Home page stylesheet
 *
 *  Loaded only from page-home.php. Deliberately decoupled from
 *  magicdata-explorer.css so the Dataset Explorer and Home evolve
 *  independently — but the `:root` tokens below mirror the explorer's
 *  design system 1:1, so the two surfaces stay visually coherent.
 *
 *  Block layout (top → bottom):
 *    1. Hero with two-layer fire video composite + headline
 *    2. Client / frontier-AI logo strip            (placeholder)
 *    3. Explore Datasets portal                    (placeholder)
 *    4. Two-card Ready-to-Use / Targeted            (placeholder)
 *    5. Featured Industries w/ tabs                 (placeholder)
 *    6. Trust & Privacy + certifications            (placeholder)
 *    7. Flagship Datasets showcase                  (placeholder)
 *    8. Contact Us form                             (placeholder)
 *
 *  Placeholders ship so the static-front-page swap renders an
 *  intentional-looking dark page rather than a half-built stub.
 * ======================================================================== */

/* ============================  Fonts  ============================
 * Re-declared here (not imported) because magicdata-home.css is the
 * only stylesheet loaded on the home surface — magicdata-explorer.css
 * is NOT loaded, and the shared chrome partial declares no @font-face
 * rules of its own (it just lists font-family). Keep file paths in
 * sync with the explorer stylesheet.
 *
 * ChineseHero — a subsetting font containing only the characters
 * used in the ZH hero headline (用以人为本的数据点燃AI革命).
 * Declared once here; reference via --mdh-font-chinese-hero anywhere
 * on the home surface that needs those same glyphs. */
@font-face {
  font-family: 'ChineseHero';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    url('fonts/chinesehero.woff2') format('woff2'),
    url('fonts/chinesehero.woff')  format('woff');
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ubuntu/ubuntu-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ubuntu/ubuntu-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/nunito-sans/nunito-sans-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/nunito-sans/nunito-sans-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/nunito-sans/nunito-sans-700.ttf') format('truetype');
}

/* ============================  Tokens  ============================
 * Parallel to magicdata-explorer.css's `:root`. Prefix is --mdh-*
 * (Magic Data Home) so home-specific additions are easy to spot and
 * won't collide if a future refactor merges the stylesheets. */
:root {
  --mdh-bg: #000000;
  --mdh-text: #f4f1f7;
  --mdh-muted: rgba(244, 241, 247, 0.72);
  --mdh-muted-2: rgba(244, 241, 247, 0.42);
  --mdh-border: rgba(255, 255, 255, 0.14);
  --mdh-border-soft: rgba(255, 255, 255, 0.08);

  /* Lavender family — mirrors explorer for site-wide cohesion. */
  --mdh-accent: #c4b5fd;
  --mdh-accent-strong: #a78bfa;
  --mdh-accent-rgb: 196, 181, 253;

  /* Fire family — drives the hero accent.
   * Coral tone lifted from the TouchDesigner composite
   * (rgb 1.0, 0.515, 0.498 → 255, 131, 127). */
  --mdh-fire: rgb(255, 131, 127);
  --mdh-fire-rgb: 255, 131, 127;
  --mdh-fire-warm: rgb(255, 178, 122);
  --mdh-fire-deep: rgb(232, 64, 120);

  --mdh-radius-pill: 999px;
  --mdh-radius-card: 20px;
  --mdh-radius-lg: 24px;

  --mdh-font-display: 'Ubuntu', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --mdh-font-body: 'Nunito Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  /* Custom Chinese headline font — the subset woff2/woff contains only
   * the glyphs needed for hero/section headings in Chinese. Use this
   * variable on any ZH-specific heading that should share this font. */
  --mdh-font-chinese-hero: 'ChineseHero', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

  --mdh-shell: 1280px;
  --mdh-shell-pad-x: 32px;
}

/* ============================  Full-bleed reset  ============================
 *
 * Page-home.php calls get_header() / get_footer(). Twentytwentyfive is
 * a BLOCK theme, but it ships no `header.php` / `footer.php`, so WP
 * quietly falls back to `wp-includes/theme-compat/header.php` — the
 * legacy "compat" scaffolding that emits:
 *
 *     <div id="page">
 *       <div id="header"><div id="headerimg">
 *         <h1><a href=""></a></h1>
 *         <div class="description"></div>
 *       </div></div>
 *       <hr />
 *       …page-home template body…
 *
 * None of that scaffolding is useful for a marketing home, and the
 * empty `#header` / `<hr>` push our sticky chrome (and therefore our
 * hero) down the page, breaking the edge-to-edge effect.
 *
 * We also defensively cover the BLOCK-theme wrapper classes
 * (`.wp-site-blocks`, `.wp-block-post-content`, `.wp-block-post-title`,
 * etc.) for the day a future WP version decides to honour the block
 * template path for this PHP template too.
 *
 * All selectors are scoped to `body.page-template-page-home(-php)`
 * so nothing leaks to other surfaces, and tagged !important because
 * upstream block-theme rules are emitted later in the cascade.
 * ============================================================================= */

html:has(body.page-template-page-home),
html:has(body.page-template-page-home-php) {
  background: var(--mdh-bg) !important;
  overflow-x: clip !important;
  /* NOTE — deliberately NOT resetting `html { margin: 0 }` here.
   * WordPress's admin bar injects `html { margin-top: 32px !important }`
   * (46px under 782px) so the bar doesn't cover the chrome header.
   * Zeroing it would pull the chrome up under the bar and hide the
   * primary nav. */
}
body.page-template-page-home,
body.page-template-page-home-php {
  background: var(--mdh-bg) !important;
  margin: 0 !important;
  overflow-x: clip !important;
}

/* Classic-fallback wrappers emitted by wp-includes/theme-compat/header.php.
 * `#page` stays in the DOM as our page shell, but zeroed out;
 * `#header` / the leading `<hr>` are purely decorative placeholders
 * for an (unused) classic header and we hide them so the hero can
 * reach the very top of the viewport. */
body.page-template-page-home #page,
body.page-template-page-home-php #page {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--mdh-bg) !important;
}
body.page-template-page-home #header,
body.page-template-page-home-php #header,
body.page-template-page-home #page > hr:first-of-type,
body.page-template-page-home-php #page > hr:first-of-type,
body.page-template-page-home #footer,
body.page-template-page-home-php #footer {
  display: none !important;
}

/* Block-theme wrappers (defensive — not actually rendered today). */
body.page-template-page-home .wp-site-blocks,
body.page-template-page-home-php .wp-site-blocks,
body.page-template-page-home main,
body.page-template-page-home-php main,
body.page-template-page-home main .wp-block-group,
body.page-template-page-home-php main .wp-block-group,
body.page-template-page-home .wp-block-post-content,
body.page-template-page-home-php .wp-block-post-content,
body.page-template-page-home .wp-block-post-content > .mdx-home,
body.page-template-page-home-php .wp-block-post-content > .mdx-home {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
}

body.page-template-page-home .wp-block-post-title,
body.page-template-page-home-php .wp-block-post-title,
body.page-template-page-home .wp-block-post-featured-image,
body.page-template-page-home-php .wp-block-post-featured-image,
body.page-template-page-home .wp-block-post-date,
body.page-template-page-home-php .wp-block-post-date,
body.page-template-page-home .wp-block-post-terms,
body.page-template-page-home-php .wp-block-post-terms,
body.page-template-page-home .wp-block-post-navigation-link,
body.page-template-page-home-php .wp-block-post-navigation-link,
body.page-template-page-home .wp-block-comments,
body.page-template-page-home-php .wp-block-comments {
  display: none !important;
}

/* UA figure margin fix — same pitfall that bit single-dataset.php. */
body.page-template-page-home figure,
body.page-template-page-home-php figure {
  margin: 0;
}

/* ============================  Brand fire tint  ==========================
 * The fire-sampling JS writes --brand-fire on .mdx-chrome__brand svg
 * every ~180ms. We pipe it into the SVG fill so the logo shifts with
 * the hero fire. The transition smooths out the discrete 180ms jumps.
 * Scoped to page-template-page-home so other surfaces keep white.     */

.mdx-chrome__brand svg {
  --brand-fire: #fff;
  transition: filter 0.3s ease;
}

.mdx-chrome__brand svg path {
  fill: var(--brand-fire) !important;
  transition: fill 0.3s ease;
}

/* ============================  Page shell  ============================ */

.mdx-home {
  color: var(--mdh-text);
  background: var(--mdh-bg);
  font-family: var(--mdh-font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: clip;
}

.mdx-home__shell {
  max-width: var(--mdh-shell);
  margin: 0 auto;
  padding: 0 var(--mdh-shell-pad-x);
}

.mdx-home__section {
  padding: 96px 0;
}

.mdx-home__section-head {
  text-align: center;
  margin-bottom: 40px;
}

.mdx-home__eyebrow {
  display: block;
  font-family: var(--mdh-font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.005em;
  margin: 0 0 12px;
  color: var(--mdh-text);
}

/* Horizontal gradient headlines */
.mdx-home__section--industries .mdx-home__eyebrow,
.mdx-home__section--trust .mdx-home__eyebrow,
.mdx-home__section--flagship .mdx-home__eyebrow {
  background: linear-gradient(90deg, #FFFFFF 0%, #F4C0F4 81%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--mdh-text);
}

.mdx-home__section-desc {
  font-size: 15px;
  color: var(--mdh-muted);
  max-width: 60ch;
  margin: 0 auto;
}

/* ============================  Hero  ============================
 *
 * Goal: a single, immersive cinematic band that reads as one painted
 * scene (nebula bleeding into fire) — NOT a dark container with a
 * framed picture inside it. No radial glows, no drop-shadows, no
 * vignettes. Every soft edge is achieved with mask-image.
 *
 *   .mdx-home-hero
 *     ├ .mdx-home-hero__bg          ← absolutely-positioned composite
 *     │   ├ .mdx-home-hero__nebula  ← LEFT band, feathered right edge
 *     │   └ .mdx-home-hero__fire    ← RIGHT band, contained video(s),
 *     │                               blended additively (screen) so
 *     │                               black pixels drop out and fire
 *     │                               pixels glow over the nebula
 *     └ .mdx-home-hero__shell       ← foreground copy, left-aligned
 *         └ .mdx-home-hero__copy
 *             └ .mdx-home-hero__title
 *
 * The hero is pulled up under the sticky chrome with a negative
 * margin-top (matched by padding-top so headline content still sits
 * below the nav). That lets the nebula and fire reach the very top
 * of the viewport, as in the Figma reference.
 * ================================================================ */

.mdx-home-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--mdh-bg);

  /* Pull the hero up behind the sticky .mdx-chrome (which is
   * transparent at scroll=0) so the nebula and fire reach the very
   * top of the viewport under the nav. `padding-top` re-opens the
   * space we stole so the headline still clears the nav.
   *
   * Chrome height ≈ 52px (20px logo + 18+14 padding). The padding
   * re-opens a little more than that so the title has breathing
   * room below the nav. */
  margin-top: -52px;
  padding-top: clamp(96px, 11vh, 145px);
  padding-bottom: clamp(0px, 11vh, 0px);

  /* Row layout; headline block sits in the vertical middle of this section. */
  display: flex;
  align-items: center;

  /* Figma reference is a wide cinematic band — not a full viewport
   * cover. Keep the hero proportioned like the mock: ~580px at 1440
   * viewport, never taller than ~88% of the window, never shorter
   * than enough to fit the 3-line headline + padding comfortably. */
  min-height: clamp(520px, 42vw, 720px);
}

/* ----------  Background composite (nebula + fire) ---------- */

.mdx-home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Nebula — pinned to the LEFT edge, right edge feathered into the fire.
 * background-size: auto 130% makes the image taller than the div so
 * background-position-y can actually pan it vertically.
 * Change background-position-y (0% = top, 50% = centre, 100% = bottom)
 * to move the nebula up or down. */
.mdx-home-hero__nebula {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: clamp(640px, 62vw, 1100px);
  background-repeat: no-repeat;
  background-size: auto 90%;
  background-position-x: 140%;
  background-position-y: -300%;

  /* Feather the right edge so the nebula blends seamlessly into the
   * fire rather than ending in a hard seam. */
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 55%,
    rgba(0, 0, 0, 0.55) 78%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 55%,
    rgba(0, 0, 0, 0.55) 78%,
    transparent 100%
  );
}

/* Fire/people composite — right-aligned, vertically centered.
 * `banner.webm` is landscape; a portrait aspect (old 523:587) plus
 * `object-fit: cover` cropped the left/right of the frame. Match the
 * asset (16:9) and use `contain` so the full frame stays visible even
 * if the file is re-exported with a slightly different ratio.
 * `mix-blend-mode: screen` drops black to the nebula.
 * translate(-20%, …) shifts the fire strip left (~20% of its width).
 * `top` is how far down the strip sits; smaller values move it higher. */
.mdx-home-hero__fire {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: clamp(616px, 70vw, 1075px);
  aspect-ratio: 16 / 9;
  mix-blend-mode: screen;
}

/* .fire-h: single-layer horizontal fade (left + right). No blend mode so
 * the single-layer mask renders reliably in all browsers. */
.mdx-home-hero__fire-h {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 15%, #000 35%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 15%, #000 35%, #000 80%, transparent 100%);
}

/* .fire-v: single-layer vertical fade (top + bottom). Nested inside .fire-h
 * so the two single-layer masks combine to fade all 4 edges — no
 * mask-composite needed anywhere. */
.mdx-home-hero__fire-v {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.mdx-home-hero__fire-v > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.mdx-home-hero__fire-v > video.is-base {
  z-index: 1;
}
.mdx-home-hero__fire-v > video.is-slow {
  z-index: 2;
  mix-blend-mode: plus-lighter;
  opacity: 0.9;
}

/* ----------  Foreground copy ---------- */

.mdx-home-hero__shell {
  position: relative;
  z-index: 2;
  max-width: var(--mdh-shell);
  margin: 0 auto;
  padding: 0 var(--mdh-shell-pad-x);
  width: 100%;
}

.mdx-home-hero__copy {
  width: 100%;
  max-width: 100%;
  text-align: center;
}

.mdx-home-hero__title {
  margin: 80px auto 0;
  display: inline-block;
  font-family: var(--mdh-font-display);
  font-weight: 700;
  /* Figma reference ~56px @ 1440 viewport; scales fluidly but never
   * exceeds the Figma proportion on ultra-wide monitors. */
  font-size: clamp(38px, 4.2vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  mix-blend-mode: plus-lighter;

  /* Two-layer radial gradient:
   *   Layer 1 (top): JS-sampled fire colour — radial ellipse centred at
   *                  the bottom-middle of the text box so the reactive
   *                  shimmer pools where the fire sits visually.
   *   Layer 2 (base): Static brand radial — bright pink blooms from the
   *                   lower-centre, deepens to rose toward the top edges. */
  background:
    radial-gradient(ellipse 50% 55% at 50% 88%,
      var(--mdx-fire-tint, transparent) 0%,
      transparent 100%
    ),
    radial-gradient(ellipse 55% 65% at 50% 88%,
      rgb(255, 143, 197) 0%,
      rgb(218, 47, 91) 50%,
      rgb(145, 18, 55) 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: rgb(255, 143, 197); /* fallback for non-clip browsers */
}

/* ZH hero headline — swap in the custom Chinese subset font.
 * The fallback stack ensures readable glyphs even if the woff2 fails.
 * Tighten line-height slightly: CJK characters render optically taller
 * than Latin glyphs at the same em size.
 *
 * font-variation-settings axes (阿里妈妈方圆体 VF):
 *   BEVL — bevel/chamfer depth of the stroke corners (0 = sharp, 100 = fully rounded)
 *   wght — weight; mirrors the font-weight value for Chrome < 140 compatibility */
.mdx-home-hero__title--zh {
  font-family: var(--mdh-font-chinese-hero);
  font-weight: 700;
  font-variation-settings: "BEVL" 57.85, "wght" 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

/* ============================  Hero — responsive ============================
 *
 *  ≥ 1600px  : nebula can breathe; fire is capped smaller than 1440’s
 *              46vw growth and nudged left so ultra-wide doesn’t
 *              dominate the frame.
 *   ≤ 1024px : keep the side-by-side composite but lean the fire
 *              further right so the headline gets more room.
 *   ≤ 720px  : collapse to a single-column stack — fire lives as an
 *              atmospheric ceiling above the copy, not beside it.
 *              Kill the slower video layer to spare phone CPUs.
 * ============================================================================ */

/* Wide screens: edit the three numbers below to move the hero up/down.
 *   padding-top     — space below the site header (must stay large enough
 *                       that the title does not sit under the menu)
 *   margin-top      — negative margin pulls the headline block upward
 *   .mdx-home-hero__fire top — fire strip; lower percent = higher */
@media (min-width: 1200px) {
  .mdx-home-hero {
    padding-top: clamp(72px, 7.5vh, 100px);
  }
  .mdx-home-hero__shell {
    margin-top: -530px;
  }
  .mdx-home-hero__fire {
    top: 62%;
  }
}

@media (min-width: 1600px) {
  .mdx-home-hero {
    padding-top: clamp(64px, 6.5vh, 88px);
  }
  .mdx-home-hero__shell {
    margin-top: -530px;
  }
  .mdx-home-hero__nebula {
    width: clamp(800px, 52vw, 1000px);
  }
  .mdx-home-hero__fire {
    top: 62%;
    width: clamp(616px, 70vw, 1075px);
  }
  .mdx-home-hero__copy {
    width: 100%;
  }
  .mdx-home-hero__title {
    font-size: clamp(48px, 3.6vw, 64px);
  }
}

@media (max-width: 1200px) {
  .mdx-home-hero__copy {
    width: 100%;
  }
}

/* ----------  Mid sizes (tablet / narrow desktop): title above image  ---------- */
@media (max-width: 900px) {
  .mdx-home-hero {
    min-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .mdx-home-hero__bg {
    position: relative;
    inset: auto;
    height: 52vw;
    min-height: 280px;
    max-height: 480px;
    margin: 0;
    order: 1;
  }
  .mdx-home-hero__shell {
    padding: 20px 32px 16px;
    order: 0;
  }
  .mdx-home-hero__copy {
    width: 100%;
    text-align: center;
  }
  .mdx-home-hero__title {
    display: block;
    text-align: center;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .mdx-home-hero {
    min-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 24px;
    /* Column layout; title first (order:0 default), bg below (order:1). */
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .mdx-home-hero__bg {
    position: relative;
    inset: auto;
    height: 62vw;
    min-height: 220px;
    max-height: 360px;
    margin: 0;
    /* Visually after the title */
    order: 1;
  }
  /* Fade the top edge so the nebula bleeds upward gradually. */
  .mdx-home-hero__bg::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 25%;
    background: linear-gradient(to bottom, var(--mdh-bg) 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
  }
  /* Fade the bottom edge so the hero bg dissolves into the text area
   * instead of ending in a hard horizontal seam. */
  .mdx-home-hero__bg::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 35%;
    background: linear-gradient(to top, var(--mdh-bg) 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
  }
  .mdx-home-hero__nebula {
    width: 100%;
    background-size: cover;
    background-position: center 30%;
    /* Full-width nebula on mobile — no right-side fade so the visual
     * weight is symmetric and the title text looks properly centred. */
    -webkit-mask-image: none;
            mask-image: none;
  }
  .mdx-home-hero__fire {
    width: min(100vw, calc(72vw * 1.4));
    left: 50%;
    top: 55%;
  }
  .mdx-home-hero__shell {
    padding: 10px 0px 0px;
    order: 0;
  }
  .mdx-home-hero__copy {
    width: 100%;
    text-align: center;
  }
  .mdx-home-hero__title {
    display: block;
    text-align: center;
    font-size: clamp(30px, 6.5vw, 44px);
    margin: 0 auto;
  }
}

@media (max-width: 500px) {
  .mdx-home-hero {
    min-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .mdx-home-hero__bg {
    position: relative;
    inset: auto;
    height: 58vw;
    min-height: 200px;
    max-height: 320px;
    margin: 0;
    order: 1;
  }
  .mdx-home-hero__nebula {
    width: 100%;
    background-size: cover;
    background-position: center 30%;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .mdx-home-hero__fire {
    width: min(96vw, calc(80vw * 1.4));
    left: 50%;
    top: 55%;
  }
  .mdx-home-hero__fire-v > video.is-slow {
    display: none;
  }
  .mdx-home-hero__copy {
    width: 100%;
    text-align: center;
  }
  .mdx-home-hero__title {
    display: block;
    text-align: center;
    font-size: clamp(28px, 7.5vw, 40px);
    margin: 0 auto;
  }
}

@media (max-width: 380px) {
  .mdx-home-hero {
    padding-top: 0;
    padding-bottom: 16px;
  }
  .mdx-home-hero__bg {
    height: 56vw;
    min-height: 180px;
    max-height: 280px;
    margin: 0;
  }
  .mdx-home-hero__title {
    font-size: clamp(26px, 7vw, 36px);
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mdx-home-hero__fire-v > video.is-slow {
    display: none;
  }
  /* JS also pauses the base video on reduced-motion — poster carries the LCP. */
}

/* ============================  Logo strip  ============================
 *
 * Infinite horizontal scroll of client logos. Two copies of the logo
 * set sit side-by-side inside a flex track; a CSS animation slides the
 * track left by exactly 50% (one full copy) then resets, producing a
 * seamless loop. Gradient masks on left/right edges fade logos in/out.
 * ================================================================= */

.mdx-home__section--logos {
  padding: 0px 0 0px;
  overflow: hidden;
}

.mdx-logo-strip__title {
  margin: 0 0 20px;
  font-family: var(--mdh-font-body);
  font-weight: 400;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.04em;
  color: var(--mdh-muted-2);
  text-align: center;
}

.mdx-logo-strip {
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
}

.mdx-logo-strip__track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: mdx-logo-scroll 55s linear infinite;
}

.mdx-logo-strip__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
}

.mdx-logo-strip__item img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  opacity: 0.65;
  filter: grayscale(100%) brightness(2);
  user-select: none;
  pointer-events: none;
}

/* Per-logo size overrides — height relative to the default 20px strip */
.mdx-logo-strip__item[data-logo="tencent"] { height: 32px; }
.mdx-logo-strip__item[data-logo="ali"]     { height: 13px; }
.mdx-logo-strip__item[data-logo="meta"]    { height: 14px; }
.mdx-logo-strip__item[data-logo="naver"]   { height: 10px; }
.mdx-logo-strip__item[data-logo="zoom"]   { height: 13px; }
.mdx-logo-strip__item[data-logo="soundhound"]   { height: 15px; }
.mdx-logo-strip__item[data-logo="nvidia"]   { height: 15px; }
.mdx-logo-strip__item[data-logo="qualcomm"]   { height: 17px; }
.mdx-logo-strip__item[data-logo="byd"]   { height: 11px; }
.mdx-logo-strip__item[data-logo="ms"]   { height: 20px; }
.mdx-logo-strip__item[data-logo="zai"]   { height: 17px; }
.mdx-logo-strip__item[data-logo="minimax"]   { height: 18px; }




@keyframes mdx-logo-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 24px)); }
}

@media (max-width: 720px) {
  .mdx-home__section--logos {
    padding: 20px 0 28px;
  }
  .mdx-logo-strip__track {
    gap: 36px;
    animation-duration: 28s;
  }
  .mdx-logo-strip__item {
    height: 16px;
  }
  @keyframes mdx-logo-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 18px)); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .mdx-logo-strip__track {
    animation-play-state: paused;
  }
}

/* ============================  Nebula backdrop  ============================
 *
 * Wraps logo-strip (§2), Explore Datasets (§3) and two-card (§4).
 * A <canvas> is positioned behind the three sections so the WebGL
 * black-hole / nebula shader bleeds through all three bands.
 * ================================================================= */

.mdx-nebula-wrap {
  position: relative;
  overflow: hidden;
  background: var(--mdh-bg);
  /* Pull the wrap up so the nebula bleeds under the hero's bottom edge,
   * making it gradually visible on first arrival without scrolling. */
  margin-top: -5px;
  padding-top: 0px;
}

/* Soft gradient fade from the page bg into the nebula at the top of the wrap,
 * so there is no abrupt colour boundary with the hero above. */
.mdx-nebula-wrap::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 240px;
  background: linear-gradient(to bottom, var(--mdh-bg) 0%, transparent 100%);
  pointer-events: none;
  /* Above the canvas, below sections — was z-index: 2 and sat on top of the
   * logo strip, tinting logos with this gradient. */
  z-index: 1;
}

.mdx-nebula-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.mdx-nebula-wrap > section {
  position: relative;
  z-index: 2;
}

/* ============================  Explore Datasets portal  =================== */

.mdx-home__section--explore {
  padding: clamp(160px, 18vw, 280px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mdx-explore__title {
  margin: 0 0 16px;
  font-family: var(--mdh-font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  word-spacing: 100vw;
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(196,181,253,0.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--mdh-text);
}

.mdx-explore__cta {
  display: inline-block;
  color: var(--mdh-muted);
  text-decoration: none;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.02em;
  transition: color 0.25s ease, transform 0.25s ease;
  position: relative;
}

.mdx-explore__cta::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--mdh-muted-2);
  transition: background 0.25s ease;
}

.mdx-explore__cta:hover {
  color: var(--mdh-text);
  transform: translateX(4px);
}

.mdx-explore__cta:hover::after {
  background: var(--mdh-text);
}

/* Invisible click zone over the dark center of the nebula */
.mdx-explore__hole-link {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(180px, 22vw, 320px);
  height: clamp(180px, 22vw, 320px);
  border-radius: 50%;
  z-index: 2;
  cursor: pointer;
}

.mdx-home__section--explore {
  position: relative;
}

/* ============================  Two-card section  ============================
 *
 * Sits directly below the Explore Datasets portal, still inside the
 * nebula wrap so the WebGL backdrop bleeds through the card gaps.
 *
 * Card art: ReadytoUseDatasets.webp / TargetedDataSolutions.webp
 * =========================================================================== */

.mdx-home__section--twocard {
  padding-top: 0;
  padding-bottom: 96px;
}

.mdx-twocard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.mdx-twocard {
  position: relative;
  border: 1px solid var(--mdh-border);
  border-radius: var(--mdh-radius-card);
  padding: 32px 32px 40px;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.35s ease;
}

/* Radial top-glow accent — stronger on the left card, softer on the right */
.mdx-twocard::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.mdx-twocard--ready::before {
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(196, 181, 253, 0.13), transparent 70%);
}

.mdx-twocard--targeted::before {
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(196, 181, 253, 0.07), transparent 70%);
}

/* Mouse-proximity glow layer — positioned via JS custom properties */
.mdx-twocard__glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    600px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(196, 181, 253, 0.12),
    transparent 40%
  );
}

/* Border glow — a masked overlay that creates an illuminated border segment near the cursor */
.mdx-twocard__border-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    400px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(196, 181, 253, 0.55),
    transparent 40%
  );
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}

.mdx-twocard--targeted .mdx-twocard__glow {
  background: radial-gradient(
    600px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(196, 181, 253, 0.08),
    transparent 40%
  );
}

/* Active glow state — toggled by JS when mouse enters */
.mdx-twocard.is-glowing .mdx-twocard__glow,
.mdx-twocard.is-glowing .mdx-twocard__border-glow {
  opacity: 1;
}

.mdx-twocard.is-glowing {
  border-color: rgba(196, 181, 253, 0.06);
}

/* ----------  Card image (top, matches mock) ---------- */
.mdx-twocard__icon {
  display: block;
  width: 100%;
  max-width: 100px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 24px;
  flex-shrink: 0;
  user-select: none;
  pointer-events: none;
}

/* ----------  Text  ---------- */

.mdx-twocard__title {
  margin: 0 0 12px;
  font-family: var(--mdh-font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.mdx-twocard--ready .mdx-twocard__title {
  color: var(--mdh-accent);
}

.mdx-twocard--targeted .mdx-twocard__title {
  color: var(--mdh-text);
}

.mdx-twocard__desc {
  margin: 0 0 32px;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.65;
  color: var(--mdh-muted);
  flex: 1;
}

/* ----------  CTA button (mobile only)  ---------- */

.mdx-twocard__cta {
  display: none;
  align-self: flex-start;
  padding: 10px 24px;
  border-radius: var(--mdh-radius-pill);
  border: 1px solid var(--mdh-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--mdh-text);
  font-family: var(--mdh-font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
}

/* ----------  Responsive  ---------- */

@media (max-width: 720px) {
  .mdx-twocard-grid {
    grid-template-columns: 1fr;
  }

  .mdx-home__section--twocard {
    padding-bottom: 64px;
  }

  .mdx-twocard__cta--mobile {
    display: inline-block;
  }
}

@media (max-width: 480px) {
  .mdx-twocard {
    padding: 12px 12px 16px;
  }

  .mdx-twocard__icon {
    max-width: 80px;
    margin-bottom: 12px;
  }
}

/* ============================  Featured Industries  ============================
 *
 * Tab bar + panel stage. The background image is absolutely positioned
 * behind the text and CTA columns, creating a layered aesthetic where
 * the image bleeds behind both content areas.
 *
 *   .mdx-ind-panel
 *     ├ .mdx-ind-panel__visual  — abs-positioned background image layer
 *     ├ .mdx-ind-panel__body    — left foreground (desc + tags)
 *     └ .mdx-ind-panel__actions — right foreground (CTAs)
 * ================================================================= */

.mdx-home__section--industries {
  padding: 96px 0;
}

/* ----------  Tab bar  ---------- */

.mdx-ind-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.mdx-ind-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 14px;
  border: 1px solid var(--mdh-border);
  background: transparent;
  color: var(--mdh-muted);
  font-family: var(--mdh-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
  white-space: nowrap;
  user-select: none;
}

.mdx-ind-tab:hover {
  border-color: rgba(var(--mdh-accent-rgb), 0.4);
  color: var(--mdh-text);
}

.mdx-ind-tab.is-active {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 40%, #7c3aed 100%);
  border-color: rgba(147, 51, 234, 0.6);
  color: #fff;
  box-shadow: 0 4px 24px rgba(124, 58, 237, 0.35), 0 0 0 1px rgba(147, 51, 234, 0.3);
}

.mdx-ind-tab__icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: 0.55;
  transition: opacity 0.3s ease, filter 0.3s ease;
  pointer-events: none;
}

.mdx-ind-tab.is-active .mdx-ind-tab__icon {
  opacity: 1;
  filter: brightness(10);
}

.mdx-ind-tab:focus {
  outline: none;
}

.mdx-ind-tab:focus-visible {
  outline: 2px solid var(--mdh-accent);
  outline-offset: 2px;
}

.mdx-ind-tab__label {
  pointer-events: none;
}

/* ----------  Panel stage  ---------- */

.mdx-ind-stage {
  position: relative;
  border: 1px solid var(--mdh-border);
  border-radius: var(--mdh-radius-card);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

/* ----------  Individual panels  ---------- */

.mdx-ind-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease, visibility 0.55s ease;
  z-index: 0;
}

.mdx-ind-panel.is-active {
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 1;
}

.mdx-ind-panel.is-exiting {
  opacity: 0;
  visibility: visible;
  position: absolute;
  z-index: 0;
}

/* ----------  Background image layer (behind everything)  ---------- */

.mdx-ind-panel__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.mdx-ind-panel__bg {
  position: absolute;
  top: 50%;
  left: 62%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 110%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  pointer-events: none;

  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, black 15%, black 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, black 15%, black 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-composite: intersect;
}

/* ----------  Body (left — desc + tags)  ---------- */

.mdx-ind-panel__body {
  flex: 1 1 55%;
  min-width: 0;
  padding: 40px 20px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  position: relative;
  z-index: 2;
}

.mdx-ind-panel__desc {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.75;
  color: var(--mdh-muted);
  max-width: 56ch;
}

/* ----------  Tags  ---------- */

.mdx-ind-panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mdx-ind-tag {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--mdh-radius-pill);
  border: 1px solid var(--mdh-border);
  background: transparent;
  color: var(--mdh-muted);
  font-family: var(--mdh-font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ----------  Actions (right — CTAs, layered over image)  ---------- */

.mdx-ind-panel__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  align-items: stretch;
  width: fit-content;
  justify-content: center;
  gap: 16px;
  padding: 40px 40px 40px 20px;
  position: relative;
  z-index: 2;
}

.mdx-ind-cta {
  display: block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  font-family: var(--mdh-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.mdx-ind-cta--primary {
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #7c3aed 100%);
  border: 1px solid rgba(147, 51, 234, 0.5);
  color: #fff;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.25);
}

.mdx-ind-cta--primary:hover {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #8b5cf6 100%);
  box-shadow: 0 6px 28px rgba(124, 58, 237, 0.4);
  transform: translateY(-1px);
}

.mdx-ind-cta--ghost {
  color: var(--mdh-muted);
  border: 1px solid var(--mdh-border);
  border-radius: 12px;
  padding: 12px 28px;
  background: transparent;
}

.mdx-ind-cta--ghost:hover {
  color: var(--mdh-text);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ----------  Responsive  ---------- */

@media (max-width: 720px) {
  .mdx-ind-panel {
    flex-direction: column;
  }

  .mdx-ind-panel__visual {
    position: relative;
    height: 200px;
    order: -1;
  }

  .mdx-ind-panel__bg {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: none;
  }

  .mdx-ind-panel__body {
    padding: 24px 24px 16px;
  }

  /* Override desktop `align-self: flex-end` + `width: fit-content` so the
     strip spans the column and CTAs are centered on small screens. */
  .mdx-ind-panel__actions {
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    padding: 0 24px 28px;
    gap: 10px;
  }
  .mdx-ind-panel__actions .mdx-ind-cta {
    width: 100%;
    max-width: 100%;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 600px) {
  .mdx-ind-tabs {
    gap: 8px;
  }

  .mdx-ind-tab {
    padding: 9px 16px;
    font-size: 13px;
    gap: 7px;
    border-radius: 10px;
  }

  .mdx-ind-tab__icon {
    width: 18px;
    height: 18px;
  }

  .mdx-ind-panel__body {
    padding: 20px 16px 12px;
    gap: 14px;
  }

  .mdx-ind-panel__actions {
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0 16px 24px;
  }
  .mdx-ind-panel__actions .mdx-ind-cta {
    width: 100%;
    max-width: 100%;
    text-align: center;
    white-space: normal;
  }
}

/* ============================  Trust & Privacy  ============================ */

.mdx-trust {
  display: flex;
  align-items: center;
  gap: 64px;
}

.mdx-trust__copy {
  flex: 1 1 0%;
  min-width: 0;
}

.mdx-trust__heading {
  font-family: var(--mdh-font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 36px);
  letter-spacing: -0.005em;
  color: var(--mdh-text);
  margin: 0 0 16px;
}

.mdx-trust__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--mdh-muted);
  max-width: 50ch;
  margin: 0;
}

.mdx-trust__certs {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
}

.mdx-trust-cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 140px;
  padding: 24px 16px;
  border-radius: var(--mdh-radius-card);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--mdh-border-soft);
}

.mdx-trust-cert__icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mdx-trust-cert__icon img {
  max-width: 120%;
  max-height: 80%;
  object-fit: contain;
}

.mdx-trust-cert__label {
  font-family: var(--mdh-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--mdh-muted);
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .mdx-trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .mdx-trust__certs {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .mdx-trust__certs {
    gap: 12px;
  }

  .mdx-trust-cert {
    width: 0;
    flex: 1 1 0%;
    padding: 20px 12px;
  }

  .mdx-trust-cert__icon {
    width: 56px;
    height: 56px;
  }

  .mdx-trust-cert__label {
    font-size: 11.5px;
  }
}

/* ============================  Flagship Datasets  ============================ */

.mdx-flagship {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: stretch;
}

/* ---- Featured card (left) — visualization as full background ---- */
.mdx-flagship__featured {
  position: relative;
  border-radius: var(--mdh-radius-card);
  overflow: hidden;
  background: #06010b;
  border: 1px solid var(--mdh-border-soft);
  display: flex;
  flex-direction: column;
  transition: opacity 0.4s ease;
  min-height: 420px;
}

.mdx-flagship__featured[hidden] {
  display: none;
}

.mdx-flagship__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  z-index: 0;
}

.mdx-flagship__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 32px 36px 28px;
}

.mdx-flagship__title {
  font-family: var(--mdh-font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--mdh-text);
  margin: 0 0 10px;
}

.mdx-flagship__desc {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 48ch;
}

.mdx-flagship__spacer {
  flex: 1 1 auto;
  min-height: 60px;
}

.mdx-flagship__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.mdx-flagship__tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--mdh-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.25);
}

.mdx-flagship__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.mdx-flagship__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: var(--mdh-radius-pill);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.mdx-flagship__cta--primary {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 40%, #7c3aed 100%);
  color: #fff;
  border: none;
}

.mdx-flagship__cta--primary:hover {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #8b5cf6 100%);
}

.mdx-flagship__cta--ghost {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.mdx-flagship__cta--ghost:hover {
  border-color: var(--mdh-text);
  color: var(--mdh-text);
}

/* ---- Sidebar selector (right) — stretches to match card ---- */
.mdx-flagship__sidebar {
  display: flex;
  flex-direction: column;
  border-radius: var(--mdh-radius-card);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--mdh-border-soft);
  overflow: hidden;
}

.mdx-flagship__sidebar-label {
  display: block;
  padding: 18px 20px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mdh-muted);
  letter-spacing: 0.01em;
}

.mdx-flagship__pick {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 0%;
  padding: 14px 18px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--mdh-border-soft);
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
}

.mdx-flagship__pick:hover {
  background: rgba(255, 255, 255, 0.04);
}

.mdx-flagship__pick.is-active {
  background: rgba(124, 58, 237, 0.10);
  border-left: 3px solid #9333ea;
}

.mdx-flagship__pick-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.mdx-flagship__pick-title {
  font-family: var(--mdh-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--mdh-text);
  line-height: 1.3;
}

.mdx-flagship__pick-cat {
  font-size: 12px;
  color: var(--mdh-muted-2);
}

.mdx-flagship__pick-thumb {
  display: none;
  position: relative;
  width: 72px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background:
    radial-gradient(ellipse 70% 50% at 60% 55%, rgba(200, 100, 255, 0.25), transparent 70%),
    radial-gradient(ellipse 50% 40% at 35% 45%, rgba(255, 140, 220, 0.18), transparent 60%),
    #06010b;
}

/* Responsive */
@media (max-width: 900px) {
  .mdx-flagship {
    grid-template-columns: 1fr;
  }

  .mdx-flagship__sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    /* Move selector above the featured card on mobile */
    order: -1;
  }

  .mdx-flagship__sidebar-label {
    width: 100%;
  }

  .mdx-flagship__pick {
    flex: 1 1 auto;
    min-width: 160px;
    border-top: 1px solid var(--mdh-border-soft);
  }

  .mdx-flagship__pick.is-active {
    border-left: none;
    border-bottom: 3px solid #9333ea;
  }

  .mdx-flagship__pick-thumb {
    display: none;
  }
}

@media (max-width: 900px) {
  .mdx-flagship__actions {
    flex-direction: column;
  }

  .mdx-flagship__cta {
    width: 80%;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .mdx-flagship__content {
    padding: 24px 20px 22px;
  }

  .mdx-flagship__featured {
    min-height: 360px;
  }
}

/* ============================  Placeholder sections  ============================
 *
 * Visual stubs for the 8 content sections below the hero (logo strip,
 * Explore portal, two-card, Featured Industries, Trust & Privacy,
 * Flagship, Contact Us, richer footer). These exist so the page
 * doesn't look half-shipped after P2-A/P2-B; each will be replaced
 * with real content in P2-C.
 * ================================================================= */

.mdx-home-placeholder {
  border: 1px dashed var(--mdh-border);
  border-radius: var(--mdh-radius-lg);
  padding: 56px 32px;
  text-align: center;
  color: var(--mdh-muted);
  font-size: 14px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(var(--mdh-accent-rgb), 0.08), transparent 70%),
    rgba(255, 255, 255, 0.015);
}

.mdx-home-placeholder__label {
  display: block;
  font-family: var(--mdh-font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.005em;
  color: var(--mdh-text);
  margin-bottom: 8px;
}

.mdx-home-placeholder__note {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: var(--mdh-radius-pill);
  border: 1px solid var(--mdh-border-soft);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mdh-muted-2);
}

/* ============================  Small-screen polish  ============================ */

@media (max-width: 720px) {
  .mdx-home__shell {
    padding: 0 20px;
  }
  .mdx-home__section {
    padding: 64px 0;
  }
  .mdx-nebula-wrap {
    margin-top: -80px;
  }
  /* Shorten the top-fade overlay so the nebula canvas is visible
   * by the time the Explore Datasets section scrolls into view. */
  .mdx-nebula-wrap::before {
    height: 120px;
  }
  .mdx-home__section--explore {
    padding: clamp(100px, 14vw, 200px) 0;
  }
}

@media (max-width: 600px) {
  .mdx-nebula-wrap {
    margin-top: -48px;
  }
  .mdx-nebula-wrap::before {
    height: 80px;
  }
  .mdx-home__section--explore {
    padding: clamp(80px, 16vw, 160px) 0;
  }
}

@media (max-width: 500px) {
  .mdx-nebula-wrap {
    margin-top: -32px;
    padding-top: 0;
  }
  .mdx-nebula-wrap::before {
    height: 60px;
  }
  .mdx-home__section--explore {
    padding: clamp(64px, 14vw, 140px) 0;
  }
}

/* ============================  CTA → Contact prefill highlight  ============================
 * Subtle pulse applied to the message textarea after a CTA prefills
 * it, so the user sees where the content landed. Uses the existing
 * accent palette; removed automatically by JS after 1.5 s.           */

@keyframes md-prefill-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(196, 181, 253, 0.55); }
  40%  { box-shadow: 0 0 0 6px rgba(196, 181, 253, 0.25); }
  100% { box-shadow: 0 0 0 0 rgba(196, 181, 253, 0); }
}

.md-prefill-highlight {
  animation: md-prefill-pulse 1.5s ease-out;
  border-color: rgba(196, 181, 253, 0.5) !important;
  transition: border-color 0.3s ease !important;
}