/* OxyLumina corporate site - shared stylesheet (EN + CN)
   Layout system adapted from VSL Solutions; colours from the OxyLumina logo.
   System fonts only: Google Fonts is unreliable in mainland China. */

:root {
  /* Brand colours (sampled from the logo) */
  --color-accent: #283c9d;        /* logo blue (top of the logo gradient) */
  --color-accent-deep: #151f5d;   /* logo deep blue (bottom of the gradient) */
  --color-gold: #56649b;          /* muted slate blue for small labels */
  --color-gold-bright: #c3cbe3;   /* logo silver, decorative only */

  --color-text: #1f2430;
  --color-muted: #525a68;
  --color-page: #f7f8fa;
  --color-white: #ffffff;
  --color-line: #dbe0e8;
  --color-card: #eceff8;
  --color-cta: #1f2f7d;
  --color-footer: #141b45;

  --content-max: 1100px;
  --header-height: 62px;
  --button-radius: 999px;

  --font-ui: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-serif: Georgia, "Times New Roman", "Songti SC", "Noto Serif SC", "SimSun", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-page); color: var(--color-text); font-family: var(--font-ui); overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { color: var(--color-muted); font-size: 18px; line-height: 28px; margin: 0; }
h1, h2, h3 { color: var(--color-text); font-family: var(--font-serif); font-weight: 400; margin: 0; }
[id] { scroll-margin-top: calc(var(--header-height) + 24px); }

/* ---------- Header ---------- */
.site-header { align-items: center; background: var(--color-white); border-bottom: 1px solid var(--color-line); display: flex; height: var(--header-height); justify-content: space-between; padding: 8px 22px; position: sticky; top: 0; z-index: 50; }
.brand img { height: 42px; width: auto; }
.menu-toggle { align-items: center; background: var(--color-accent); border: 0; border-radius: var(--button-radius); color: var(--color-white); cursor: pointer; display: inline-flex; font-family: var(--font-serif); font-size: 15px; height: 34px; padding: 0 20px; text-transform: uppercase; }
.menu-toggle::after { content: attr(data-open); }
.menu-toggle[aria-expanded="true"]::after { content: attr(data-close); }
.main-nav { background: rgba(255,255,255,.98); border: 1px solid var(--color-line); box-shadow: 0 20px 45px rgba(0,0,0,.08); display: none; flex-direction: column; left: 18px; min-width: 240px; padding: 14px; position: absolute; right: 18px; top: calc(100% + 6px); }
.main-nav.is-open { display: flex; }
.main-nav a { color: #3d4148; display: block; font-family: var(--font-serif); font-size: 15px; padding: 12px 14px; text-align: center; text-transform: uppercase; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--color-accent); }
.main-nav .nav-lang { font-family: var(--font-ui); letter-spacing: .04em; }
.main-nav .nav-cta { align-items: center; align-self: center; background: var(--color-accent); border-radius: var(--button-radius); color: var(--color-white); display: inline-flex; height: 36px; justify-content: center; margin-top: 8px; padding: 0 18px; white-space: nowrap; width: 150px; }
.main-nav .nav-cta:hover { color: var(--color-white); background: var(--color-accent-deep); }

/* ---------- Buttons / eyebrow ---------- */
.eyebrow { color: var(--color-accent); font-size: 18px; letter-spacing: 0; line-height: 1.2; margin-bottom: 20px; text-transform: uppercase; }
.button-row { display: flex; flex-wrap: wrap; gap: 16px; }
.button { align-items: center; border-radius: var(--button-radius); display: inline-flex; font-family: var(--font-serif); font-size: 15px; height: 38px; justify-content: center; padding: 0 24px; white-space: nowrap; }
.button-primary { background: var(--color-accent); color: var(--color-white); }
.button-primary:hover { background: var(--color-accent-deep); }
.button-secondary { background: rgba(255,255,255,.55); border: 1px solid rgba(31,36,48,.26); color: var(--color-text); }

/* ---------- Hero (full-bleed photo, text on the left, as on VSL) ---------- */
.page-hero { align-items: flex-start; background-color: #dce7f7; background-position: 70% center; background-repeat: no-repeat; background-size: cover; display: flex; flex-direction: column; justify-content: center; min-height: 350px; overflow: hidden; padding: 54px 24px 40px; position: relative; }
.page-hero::before { background: linear-gradient(90deg, rgba(247,249,253,.92) 0%, rgba(247,249,253,.7) 45%, rgba(247,249,253,0) 78%); content: ""; inset: 0; position: absolute; }
.page-hero::after { background: linear-gradient(90deg, var(--color-gold-bright), transparent); bottom: 0; content: ""; height: 3px; left: 0; position: absolute; width: 38%; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; margin-bottom: 22px; }
.page-hero h1 { font-size: 36px; line-height: 1.22; max-width: 460px; }
.page-hero .button-row { margin-top: 30px; }


/* Dark hero variant (corporate look): add class "page-hero--dark" to the hero section */
.page-hero--dark { background-color: #050b1f; background-position: center right; }
.page-hero--dark::before { background: linear-gradient(90deg, rgba(5,11,31,.88) 0%, rgba(5,11,31,.55) 42%, rgba(5,11,31,0) 72%); }
.page-hero--dark::after { background: linear-gradient(90deg, var(--color-gold-bright), transparent); }
.page-hero--dark h1 { color: var(--color-white); }
.page-hero--dark .hero-copy .eyebrow { color: var(--color-gold-bright); }
.page-hero--dark .button-primary { background: var(--color-white); color: var(--color-accent-deep); }
.page-hero--dark .button-primary:hover { background: var(--color-gold-bright); }
.page-hero--dark .button-secondary { background: transparent; border-color: rgba(255,255,255,.55); color: var(--color-white); }
.page-hero--dark .button-secondary:hover { background: rgba(255,255,255,.12); }

/* ---------- Intro + proof strip ---------- */
.home-intro, .home-products, .home-approach, .home-brands { margin-inline: auto; max-width: var(--content-max); padding-inline: 22px; }
.home-intro { padding-bottom: 42px; padding-top: 44px; }
.home-intro h2, .section-title { font-size: 34px; line-height: 40px; }
.home-intro p { margin-top: 24px; }
.proof-strip { border-bottom: 1px solid var(--color-line); border-top: 1px solid var(--color-line); display: grid; grid-template-columns: repeat(2, 1fr); margin: 28px auto 56px; max-width: calc(var(--content-max) - 48px); width: calc(100% - 44px); }
.proof-strip div { border-left: 1px solid var(--color-line); padding: 15px 8px 13px; position: relative; text-align: center; }
.proof-strip div:nth-child(odd) { border-left: 0; }
.proof-strip div:nth-child(n+3) { border-top: 1px solid var(--color-line); }
.proof-strip div::before, .section-kicker::before { background: var(--color-accent); border-radius: 999px; content: ""; height: 5px; left: 50%; position: absolute; top: -3px; transform: translateX(-50%); width: 28px; }
.proof-strip strong { display: block; font-family: var(--font-serif); font-size: 23px; font-weight: 400; line-height: 28px; }
.proof-strip span { color: var(--color-gold); display: block; font-size: 16px; line-height: 22px; margin-top: 6px; }

/* ---------- Section kicker ---------- */
.section-kicker { border-top: 1px solid var(--color-line); display: inline-block; margin-bottom: 40px; padding-top: 22px; position: relative; text-align: center; }
.section-kicker .eyebrow { font-family: var(--font-serif); font-size: 19px; letter-spacing: .12em; margin: 0; white-space: nowrap; }

/* ---------- Products ---------- */
.home-products { padding-bottom: 72px; }
.product-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
.product-card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.product-card figure { aspect-ratio: 1.25; background: var(--color-card); margin: 0; overflow: hidden; }
.product-card img { height: 100%; object-fit: cover; width: 100%; }
.product-card .card-body { display: flex; flex: 1; flex-direction: column; padding: 22px 22px 24px; }
.product-card h3 { font-size: 22px; line-height: 28px; }
.product-card p { font-size: 16px; line-height: 24px; margin-top: 10px; }
.text-link { color: var(--color-accent); font-family: var(--font-serif); font-size: 15px; margin-top: auto; padding-top: 18px; text-transform: uppercase; }
.text-link:hover { color: var(--color-accent-deep); }

/* ---------- Approach card ---------- */
.home-approach { padding-bottom: 72px; }
.approach-card { background: #e7eaf6; border-radius: 8px; padding: 28px 24px 32px; }
.approach-card h2 { font-size: 34px; line-height: 40px; margin-bottom: 26px; }
.approach-card h2 span { display: block; }
.rich-copy p + p { margin-top: 18px; }
.rich-copy p { font-size: 17px; line-height: 25px; }
.steps { counter-reset: step; display: grid; gap: 24px; grid-template-columns: 1fr; list-style: none; margin: 34px 0 0; padding: 0; }
.steps li { border-top: 2px solid var(--color-accent); padding-top: 14px; }
.steps li::before { color: var(--color-gold); content: "0" counter(step); counter-increment: step; display: block; font-family: var(--font-serif); font-size: 15px; letter-spacing: .1em; margin-bottom: 6px; }
.steps h3 { font-size: 21px; line-height: 27px; }
.steps p { font-size: 16px; line-height: 24px; margin-top: 8px; }
.pillars-divider { margin: 40px 0 26px; }
.pillars-divider .eyebrow { font-family: var(--font-serif); font-size: 19px; letter-spacing: .12em; margin: 0; padding-top: 20px; position: relative; }
.pillars-divider .eyebrow::before { background: var(--color-accent); border-radius: 999px; content: ""; height: 5px; left: 0; position: absolute; top: 0; width: 28px; }
.pillar-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
.pillar-icon { color: var(--color-accent); display: block; margin-bottom: 14px; }
.pillar-icon svg { display: block; height: 28px; width: 28px; }
.pillar-grid h3 { font-size: 21px; line-height: 27px; margin-bottom: 10px; }
.pillar-grid p { font-size: 16px; line-height: 24px; }

/* ---------- Brands ---------- */
.home-brands { padding-bottom: 80px; }
.brand-grid { display: grid; gap: 0; grid-template-columns: 1fr; }
.brand-item { border-top: 1px solid var(--color-line); padding: 22px 4px; }
.brand-item:last-child { border-bottom: 1px solid var(--color-line); }
.brand-item h3 { font-size: 22px; line-height: 28px; }
.brand-item h3 small { color: var(--color-gold); font-family: var(--font-ui); font-size: 14px; letter-spacing: .08em; margin-left: 8px; text-transform: uppercase; }
.brand-item p { font-size: 16px; line-height: 24px; margin-top: 8px; }

/* ---------- CTA + footer ---------- */
.cta-block { background: var(--color-cta); color: var(--color-white); padding: 40px 24px 44px; text-align: center; }
.cta-block .eyebrow { color: var(--color-gold-bright); font-size: 16px; letter-spacing: .1em; margin-inline: auto; }
.cta-block .eyebrow::after { background: currentColor; content: ""; display: block; height: 2px; margin: 10px auto 0; width: 34px; }
.cta-block h2 { color: var(--color-white); font-size: 30px; line-height: 36px; }
.cta-block p:not(.eyebrow) { color: #dbe6fa; font-size: 17px; line-height: 27px; margin: 22px auto 28px; max-width: 760px; }
.cta-block .button { background: var(--color-white); color: var(--color-cta); min-width: 220px; }
.cta-block .button:hover { background: var(--color-gold-bright); color: var(--color-accent-deep); }
.site-footer { background: var(--color-footer); border-top: 1px solid rgba(255,255,255,.08); color: var(--color-white); display: grid; gap: 16px; grid-template-columns: 1fr; padding: 24px 22px calc(24px + env(safe-area-inset-bottom)); text-align: center; }
.footer-brand strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: 5px; }
.footer-brand span, .footer-contact, .footer-legal a { color: #cfd6e4; display: block; font-size: 14px; line-height: 1.5; }
.footer-brand span { margin-top: 4px; }
.footer-contact span { color: #cfd6e4; display: block; font-size: 14px; line-height: 1.5; margin-top: 4px; }
.footer-contact a { display: block; }
.footer-contact a + a { margin-top: 4px; }
.footer-contact a:hover, .footer-legal a:hover { color: var(--color-white); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; }
.footer-legal a:not(:last-child)::after { color: rgba(255,255,255,.3); content: "|"; margin-left: 16px; pointer-events: none; }
.footer-legal a:hover::after { color: rgba(255,255,255,.3); }

/* ---------- Tablet / desktop ---------- */
@media (min-width: 768px) {
  .site-header { padding-inline: 32px; }
  .page-hero { padding-inline: max(32px, calc((100vw - 900px) / 2)); }
  .proof-strip { grid-template-columns: repeat(4, 1fr); }
  .proof-strip div:nth-child(n+3) { border-top: 0; }
  .proof-strip div:nth-child(odd) { border-left: 1px solid var(--color-line); }
  .proof-strip div:first-child { border-left: 0; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .pillar-grid { gap: 34px; grid-template-columns: repeat(3, 1fr); }
  .brand-grid { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .brand-item:nth-last-child(2) { border-bottom: 1px solid var(--color-line); }
  .approach-card { padding: 36px 40px 40px; }
}
@media (min-width: 1024px) {
  .page-hero { padding-block: 44px; }
  .page-hero h1 { font-size: 44px; }
  .home-intro p, .rich-copy p { font-size: 20px; line-height: 28px; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .site-header { display: block; padding: 0; }
  .site-header .brand { left: max(24px, calc((100vw - (var(--content-max) - 48px)) / 2)); position: absolute; top: 50%; transform: translateY(-50%); }
  .menu-toggle { display: none; }
  .main-nav { align-items: center; background: transparent; border: 0; box-shadow: none; display: flex; flex-direction: row; gap: 20px; left: auto; min-width: 0; padding: 0; position: absolute; right: max(24px, calc((100vw - (var(--content-max) - 48px)) / 2)); top: 50%; transform: translateY(-50%); }
  .main-nav a { padding: 8px 0; width: auto; white-space: nowrap; }
  .main-nav .nav-cta { margin: 0 0 0 16px; padding: 0 18px; width: 138px; }
  .site-footer { align-items: center; column-gap: 24px; grid-template-columns: auto 1fr auto; padding-inline: max(24px, calc((100% - (var(--content-max) - 48px)) / 2)); text-align: left; }
  .footer-contact { text-align: center; }
  .footer-legal { flex-wrap: nowrap; gap: 6px 12px; justify-content: flex-end; white-space: nowrap; }
  .footer-legal a:not(:last-child)::after { margin-left: 12px; }
  .footer-brand span { white-space: nowrap; }
}

/* ---------- Chinese page tuning ---------- */
:lang(zh) p { line-height: 1.75; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 { line-height: 1.35; letter-spacing: .02em; }
:lang(zh) .eyebrow, :lang(zh) .text-link, :lang(zh) .main-nav a { letter-spacing: .06em; text-transform: none; }
:lang(zh) .steps li::before { font-size: 14px; }

/* =====================================================================
   HOME v2 - immersive dark hero, numbers band, closed-loop diagram,
   featured technologies, research row.  (Only used by the homepages.)
   No external libraries.  Motion is off for prefers-reduced-motion.
   ===================================================================== */
.wrap { margin-inline: auto; max-width: 1100px; padding-inline: 24px; }
.section { padding: 56px 0; }
.section-light { background: var(--color-white); }
.section-tint { background: #f1f3fa; }
.section-dark { background: #0a1030; color: var(--color-white); }
.section h2, .section .h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.2; }
.section-dark h2 { color: var(--color-white); }
.lead { font-size: 19px; line-height: 30px; margin-top: 18px; }
.section-dark .lead { color: #c3cbe3; }
.kicker { color: var(--color-accent); font-family: var(--font-serif); font-size: 16px; letter-spacing: .14em; margin-bottom: 18px; text-transform: uppercase; }
.kicker::before { background: var(--color-accent); border-radius: 999px; content: ""; display: block; height: 5px; margin-bottom: 14px; width: 28px; }
.section-dark .kicker { color: var(--color-gold-bright); }
.section-dark .kicker::before { background: var(--color-gold-bright); }

/* --- transparent header over the hero, white once scrolled --- */
.home-page .site-header { background: transparent; border-bottom-color: transparent; left: 0; position: fixed; right: 0; top: 0; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.home-page .site-header .logo-dark { display: none; }
.home-page .site-header.is-scrolled { background: rgba(255,255,255,.97); border-bottom-color: var(--color-line); box-shadow: 0 6px 24px rgba(20,27,69,.08); }
.home-page .site-header.is-scrolled .logo-light { display: none; }
.home-page .site-header.is-scrolled .logo-dark { display: block; }
.home-page .site-header:not(.is-scrolled) .menu-toggle { background: var(--color-white); color: var(--color-accent-deep); }
@media (min-width: 1024px) {
  .home-page .site-header:not(.is-scrolled) .main-nav a:not(.nav-cta) { color: var(--color-white); }
  .home-page .site-header:not(.is-scrolled) .main-nav a:not(.nav-cta):hover { color: var(--color-gold-bright); }
  .home-page .site-header:not(.is-scrolled) .main-nav .nav-cta { background: var(--color-white); color: var(--color-accent-deep); }
}

/* --- full-height hero --- */
.hero-full { align-items: center; background: #050b1f; display: flex; isolation: isolate; min-height: max(600px, 100vh); min-height: max(600px, 100svh); overflow: hidden; padding: 120px 0 110px; position: relative; }
.hero-bg { animation: heroDrift 28s ease-in-out infinite alternate; background-position: 72% center; background-repeat: no-repeat; background-size: cover; inset: 0; position: absolute; transform-origin: 70% 50%; z-index: -3; }
.hero-full::before { background: linear-gradient(90deg, rgba(5,11,31,.92) 0%, rgba(5,11,31,.62) 40%, rgba(5,11,31,0) 74%); content: ""; inset: 0; position: absolute; z-index: -1; }
.hero-glow { animation: heroGlow 10s ease-in-out infinite alternate; background: radial-gradient(closest-side, rgba(120,160,255,.30), rgba(120,160,255,0) 70%); height: 70vw; max-height: 900px; max-width: 900px; mix-blend-mode: screen; pointer-events: none; position: absolute; right: -12vw; top: 4%; width: 70vw; z-index: -2; }
.hero-full .wrap { width: 100%; }
.hero-full .eyebrow { color: var(--color-gold-bright); font-size: 13px; font-weight: 600; letter-spacing: .12em; margin-bottom: 24px; }
.hero-full h1 { color: var(--color-white); font-size: clamp(40px, 6.2vw, 76px); line-height: 1.06; max-width: 760px; }
.hero-full h1 .silver { background: linear-gradient(90deg, #ffffff 0%, #c3cbe3 55%, #8f9fd8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; }
.hero-sub { color: #d3daee; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; margin-top: 26px; max-width: 540px; }
.hero-full .button-row { margin-top: 36px; }
.hero-full .button-primary { background: var(--color-white); color: var(--color-accent-deep); }
.hero-full .button-primary:hover { background: var(--color-gold-bright); }
.hero-full .button-secondary { background: transparent; border-color: rgba(255,255,255,.55); color: var(--color-white); }
.hero-full .button-secondary:hover { background: rgba(255,255,255,.12); }
.scroll-cue { align-items: center; bottom: 28px; color: #c3cbe3; display: flex; flex-direction: column; font-size: 11px; gap: 10px; left: 50%; letter-spacing: .28em; position: absolute; text-transform: uppercase; transform: translateX(-50%); }
.scroll-cue::after { animation: cueLine 2.2s ease-in-out infinite; background: linear-gradient(#c3cbe3, transparent); content: ""; height: 44px; width: 1px; }
@keyframes heroDrift { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(1.09) translate3d(-1.5%,0,0); } }
@keyframes heroGlow { from { opacity: .5; transform: translate3d(0,0,0); } to { opacity: 1; transform: translate3d(-5%,4%,0); } }
@keyframes cueLine { 0% { opacity: 0; transform: scaleY(.2); transform-origin: top; } 45% { opacity: 1; transform: scaleY(1); transform-origin: top; } 100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; } }

/* --- mission statement --- */
.statement { color: var(--color-text); font-family: var(--font-serif); font-size: clamp(26px, 3.9vw, 44px); line-height: 1.28; }
.statement .hl { color: var(--color-accent); }
.mission-copy { margin-top: 32px; }
.mission-copy p { font-size: 19px; line-height: 30px; }
.mission-copy p + p { margin-top: 14px; }
.arrow-link { color: var(--color-accent); display: inline-block; font-family: var(--font-serif); font-size: 15px; letter-spacing: .06em; margin-top: 24px; text-transform: uppercase; }
.arrow-link:hover { color: var(--color-accent-deep); }
.arrow-link.on-dark { color: var(--color-gold-bright); }

/* --- numbers band --- */
.stats { background: linear-gradient(135deg, #0d1442 0%, #1f2f7d 100%); color: var(--color-white); padding: 58px 0; }
.stat-grid { display: grid; gap: 30px 0; grid-template-columns: 1fr; }
.stat { border-top: 1px solid rgba(195,203,227,.28); padding: 26px 20px 0; }
.stat:first-child { border-top: 0; padding-top: 4px; }
.stat strong { background: linear-gradient(180deg, #ffffff 0%, #b9c3e6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; font-family: var(--font-serif); font-size: clamp(32px, 4vw, 48px); font-weight: 400; line-height: 1.1; white-space: nowrap; }
.stat > span { color: #c3cbe3; display: block; font-size: 16px; line-height: 22px; margin-top: 8px; }
.stat strong span { color: inherit; display: inline; font-size: inherit; line-height: inherit; margin: 0; }

/* --- brand ladder --- */
.ladder { list-style: none; margin: 52px 0 0; padding: 0; position: relative; }
.rung:not(:last-child)::after { background: rgba(40,60,157,.3); bottom: -18px; content: ""; left: 25px; position: absolute; top: 70px; width: 2px; }
.rung { padding: 0 0 26px 76px; position: relative; }
.rung:last-child { padding-bottom: 0; }
.rung-node { align-items: center; background: linear-gradient(145deg, var(--color-accent), var(--color-accent-deep)); border-radius: 50%; box-shadow: 0 0 0 7px rgba(241,243,250,1), 0 0 0 8px rgba(40,60,157,.15); color: var(--color-white); display: flex; font-family: var(--font-serif); font-size: 19px; height: 52px; justify-content: center; left: 0; position: absolute; top: 18px; width: 52px; }
.rung-card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: 12px; padding: 22px 24px 24px; transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.rung-card:hover { border-color: var(--color-accent); box-shadow: 0 14px 34px rgba(21,31,93,.10); transform: translateX(4px); }
.rung-tag { color: var(--color-gold); font-family: var(--font-serif); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.rung-card h3 { color: var(--color-accent-deep); font-size: 28px; line-height: 1.15; margin-top: 6px; }
.rung-card p { font-size: 16px; line-height: 25px; margin-top: 10px; }
.rung-card .arrow-link { display: inline-block; margin-top: 14px; }
.ladder-note { border-left: 3px solid var(--color-accent); color: var(--color-accent-deep); font-family: var(--font-serif); font-size: 19px; line-height: 1.5; margin-top: 40px; padding-left: 20px; }
@media (min-width: 860px) {
  .rung-card { align-items: center; display: grid; gap: 8px 40px; grid-template-columns: 230px 1fr auto; }
  .rung-card h3 { margin-top: 4px; }
  .rung-card p { margin-top: 0; }
  .rung-card .arrow-link { margin-top: 0; white-space: nowrap; }
}
.tech-brand { color: var(--color-gold-bright); font-family: var(--font-serif); font-size: 13px; letter-spacing: .14em; margin-bottom: 8px; text-transform: uppercase; }

/* --- featured technologies (dark) --- */
.tech-grid { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 48px; }
.tech-card { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid rgba(195,203,227,.2); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; transition: transform .35s ease, border-color .35s ease; }
.tech-card:hover { border-color: rgba(195,203,227,.6); transform: translateY(-5px); }
.tech-card figure { aspect-ratio: 1.25; margin: 0; overflow: hidden; }
.tech-card img { height: 100%; object-fit: cover; transition: transform .8s ease; width: 100%; }
.tech-card:hover img { transform: scale(1.05); }
.tech-body { display: flex; flex: 1; flex-direction: column; padding: 24px 24px 26px; }
.tech-card h3 { color: var(--color-white); font-size: 23px; line-height: 1.25; }
.tech-card p { color: #c3cbe3; font-size: 16px; line-height: 25px; margin-top: 12px; }
.tech-card .arrow-link { margin-top: auto; padding-top: 20px; }

/* --- research row --- */
.partners { border-top: 1px solid var(--color-line); display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 40px; padding-top: 30px; }
.partners-label { color: var(--color-gold); flex-basis: 100%; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.partner { color: #2c3350; font-family: var(--font-serif); font-size: clamp(18px, 2vw, 22px); line-height: 1.3; }

/* --- scroll reveal: content is visible unless JS is running --- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

@media (min-width: 768px) {
  .section { padding: 72px 0; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .stat { border-left: 1px solid rgba(195,203,227,.28); border-top: 0; padding: 4px 20px; }
  .stat:first-child { border-left: 0; }
  .tech-grid { grid-template-columns: repeat(3, 1fr); }
}
:lang(zh) .statement { line-height: 1.5; }
:lang(zh) .hero-full h1 { line-height: 1.2; }
:lang(zh) .kicker, :lang(zh) .partners-label, :lang(zh) .arrow-link { letter-spacing: .08em; text-transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-glow, .scroll-cue::after { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .tech-card, .tech-card img { transition: none; }
}
@media print { .js .reveal { opacity: 1; transform: none; } .home-page .site-header { position: static; } }


/* --- research partners strip inside the numbers band --- */
.stats .partners { border-top: 1px solid rgba(195,203,227,.22); margin-top: 44px; padding-top: 28px; }
.stats .partners-label { color: var(--color-gold-bright); }
.stats .partner { color: #e6ebfa; font-size: clamp(16px, 1.6vw, 19px); }
.stats .partners-line { color: #c3cbe3; flex-basis: 100%; font-size: 17px; line-height: 26px; margin: -4px 0 4px; }
.rung-logo { display: block; height: 64px; margin-bottom: 14px; max-width: 170px; object-fit: contain; object-position: left center; width: auto; }
.rung-card > div:first-child { align-items: center; column-gap: 18px; display: grid; grid-template-columns: 64px 1fr; }
.rung-card > div:first-child .rung-logo { grid-row: 1 / span 2; margin-bottom: 0; }
.rung-card > div:first-child .rung-logo ~ .rung-tag { grid-column: 2; align-self: end; }
.rung-card > div:first-child .rung-logo ~ h3 { grid-column: 2; align-self: start; }
@media (min-width: 860px) { .rung-card { grid-template-columns: 300px 1fr auto; } }
.rung-card > div:first-child .rung-logo { height: 64px; max-width: none; object-fit: contain; object-position: center; width: 64px; }

/* --- partners: three even columns --- */
.stats .partners { display: grid; gap: 12px 40px; grid-template-columns: 1fr; }
.stats .partners-label, .stats .partners-line { grid-column: 1 / -1; }
.stats .partner { line-height: 1.35; }
@media (min-width: 860px) { .stats .partners { grid-template-columns: repeat(3, 1fr); } }
.stats { padding: 48px 0; }

/* --- small registered mark --- */
.reg { font-family: var(--font-ui); font-size: .4em; line-height: 0; margin-left: 2px; vertical-align: super; }

/* --- numbers centred --- */
.stat { text-align: center; }
.stat-grid { justify-items: stretch; }
.stats .partners { text-align: center; }
.stats .partners-line { margin-inline: auto; }


/* =====================================================================
   INNER PAGES (Brands, Technology, About, Contact)
   ===================================================================== */
.logo-light { display: none; }
.home-page .site-header .logo-light { display: block; }
.page-banner { background: linear-gradient(135deg, #0a1030 0%, #1f2f7d 100%); color: var(--color-white); padding: 64px 0 56px; position: relative; }
.page-banner::after { background: linear-gradient(90deg, var(--color-gold-bright), transparent); bottom: 0; content: ""; height: 3px; left: 0; position: absolute; width: 38%; }
.page-banner .kicker { color: var(--color-gold-bright); }
.page-banner .kicker::before { background: var(--color-gold-bright); }
.page-banner h1 { color: var(--color-white); font-size: clamp(34px, 5vw, 56px); line-height: 1.12; }
.page-banner .lead { color: #d3daee; }

.brand-block { align-items: start; display: grid; gap: 28px 64px; }
.brand-id { align-items: center; display: flex; gap: 20px; }
.brand-id img { border-radius: 4px; flex: none; height: 96px; object-fit: contain; width: 96px; }
.brand-id h2 { font-size: clamp(30px, 3.6vw, 40px); }
.brand-body p { font-size: 18px; line-height: 29px; }
.brand-body p + p { margin-top: 16px; }
.brand-body .button-row { margin-top: 28px; }
.brand-facts { border-top: 1px solid var(--color-line); display: grid; gap: 0; margin: 28px 0 0; }
.brand-facts div { border-bottom: 1px solid var(--color-line); display: grid; gap: 4px 24px; padding: 14px 0; }
.brand-facts dt { color: var(--color-gold); font-family: var(--font-serif); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.brand-facts dd { margin: 0; }
@media (min-width: 860px) {
  .brand-block { grid-template-columns: 340px 1fr; }
  .brand-facts div { grid-template-columns: 170px 1fr; }
}
:lang(zh) .brand-facts dt { letter-spacing: .06em; text-transform: none; }
.brand-facts dd { line-height: 1.45; }
.brand-note { color: #56649b; font-size: 14px; line-height: 22px; margin-top: 18px; }
.brand-body .brand-note { color: #56649b; font-size: 14px; line-height: 22px; margin-top: 16px; }

/* --- Technology page --- */
.anchor-nav { background: var(--color-white); border-bottom: 1px solid var(--color-line); }
@media (min-width: 960px) { .anchor-nav { position: sticky; top: var(--header-height); z-index: 40; } }
.anchor-nav .wrap { display: flex; flex-wrap: wrap; gap: 6px 28px; padding-block: 14px; }
.anchor-nav a { color: var(--color-accent-deep); font-family: var(--font-serif); font-size: 15px; }
.anchor-nav a:hover { color: var(--color-accent); text-decoration: underline; }
.device { display: grid; gap: 36px 64px; }
.device-fig { margin: 0; }
.device-fig img { aspect-ratio: 4 / 3; border-radius: 12px; object-fit: cover; width: 100%; }
.device-sub { color: var(--color-accent); font-family: var(--font-serif); font-size: 22px; line-height: 1.35; margin-top: 12px; }
.device-copy { margin-top: 18px; }
.device-copy p { font-size: 17px; line-height: 28px; }
.device-copy p + p { margin-top: 14px; }
.spec-head { color: var(--color-gold); font-family: var(--font-serif); font-size: 13px; letter-spacing: .14em; margin: 34px 0 14px; text-transform: uppercase; }
:lang(zh) .spec-head { letter-spacing: .06em; text-transform: none; }
.spec-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.spec-card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: 10px; padding: 16px 18px 18px; }
.spec-card h4 { color: var(--color-accent-deep); font-family: var(--font-serif); font-size: 18px; font-weight: 400; line-height: 1.3; margin: 0; }
.spec-card p { font-size: 15px; line-height: 23px; margin-top: 6px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tags li { background: var(--color-white); border: 1px solid rgba(21,31,93,.28); border-radius: 999px; color: var(--color-accent-deep); font-size: 14px; line-height: 1.2; padding: 8px 14px; }
.device-body .brand-note { margin-top: 26px; }
.device-cta { margin-top: 20px; }
@media (min-width: 640px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
  .device { grid-template-columns: 5fr 6fr; }
  .device .device-fig { align-self: start; position: sticky; top: calc(var(--header-height) + 70px); }
  .device--flip { grid-template-columns: 6fr 5fr; }
  .device--flip .device-fig { order: 2; }
}
#ihht, #robot, #chamber { scroll-margin-top: 110px; }

/* --- long-form product copy (IHHT) --- */
.prose h3 { color: var(--color-accent-deep); font-size: 24px; line-height: 1.25; margin-top: 34px; }
.prose > .device-lead { font-size: 19px; line-height: 30px; margin-top: 18px; }
.prose p { font-size: 17px; line-height: 28px; margin-top: 12px; }
.prose ul { list-style: none; margin: 16px 0 0; padding: 0; }
.prose li { font-size: 17px; line-height: 27px; margin-top: 14px; padding-left: 30px; position: relative; }
.check-list li::before { color: var(--color-accent); content: "\2713"; font-weight: 700; left: 0; position: absolute; top: 0; }
.dot-list li::before { background: var(--color-accent); border-radius: 50%; content: ""; height: 8px; left: 8px; position: absolute; top: 10px; width: 8px; }
.prose .safety { background: var(--color-white); border-left: 3px solid var(--color-accent); border-radius: 0 8px 8px 0; color: #56649b; font-size: 15px; line-height: 24px; margin-top: 14px; padding: 16px 18px; }
.prose .device-cta { margin-top: 28px; }

/* --- expandable full details --- */
.more { margin-top: 26px; }
.more > summary { align-items: center; background: var(--color-white); border: 1px solid var(--color-accent); border-radius: var(--button-radius, 999px); color: var(--color-accent-deep); cursor: pointer; display: inline-flex; font-family: var(--font-serif); font-size: 15px; gap: 10px; list-style: none; padding: 11px 22px; transition: background .2s ease, color .2s ease; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "+"; font-size: 20px; line-height: 1; }
.more[open] > summary::after { content: "\2212"; }
.more > summary:hover { background: var(--color-accent); color: var(--color-white); }
.more[open] > summary .when-closed, .more:not([open]) > summary .when-open { display: none; }
.more[open] > summary { margin-bottom: 4px; }
.more > h3:first-of-type { margin-top: 26px; }
@media print { .more { display: block; } .more > *:not(summary) { display: block; } }

/* --- ABOUT --- */
.about-grid { align-items: center; display: grid; gap: 32px; grid-template-columns: 1fr; }
.about-p { font-size: 18px; line-height: 30px; margin-top: 16px; max-width: 62ch; }
.about-grid .kicker + .about-p { margin-top: 14px; }
.statement--side { border-left: 3px solid var(--color-accent); padding-left: 22px; }
.pillars { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 30px; }
.pillar { background: var(--color-white); border: 1px solid var(--color-line); border-radius: 12px; padding: 24px 24px 26px; }
.pillar h3 { color: var(--color-accent-deep); font-family: var(--font-serif); font-size: 22px; font-weight: 400; margin: 0; }
.pillar p { font-size: 16px; line-height: 26px; margin-top: 10px; }
.about-link { margin-top: 28px; }
.about-research .lead { color: #c3cbe3; margin-top: 16px; max-width: 70ch; }
.about-research h2 { color: var(--color-white); }
.res-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 32px; }
.res-item { border: 1px solid rgba(195,203,227,.25); border-radius: 12px; padding: 20px 22px; }
.res-item h3 { color: var(--color-white); font-family: var(--font-serif); font-size: 20px; font-weight: 400; margin: 0; }
.res-item p { color: #c3cbe3; font-size: 15px; line-height: 24px; margin-top: 8px; }
.mini-brands { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 28px; }
.mini-brand { align-items: flex-start; background: var(--color-white); border: 1px solid var(--color-line); border-radius: 12px; color: inherit; display: flex; flex-direction: column; gap: 4px; padding: 20px; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.mini-brand:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.mini-brand img { height: 52px; margin-bottom: 8px; object-fit: contain; width: 52px; }
.mb-tag { color: var(--color-gold); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.mb-name { color: var(--color-accent-deep); font-family: var(--font-serif); font-size: 20px; }
:lang(zh) .mb-tag { letter-spacing: .06em; text-transform: none; }
@media (min-width: 860px) {
  .about-grid { gap: 64px; grid-template-columns: 6fr 5fr; }
  .pillars, .res-grid { grid-template-columns: repeat(3, 1fr); }
  .mini-brands { grid-template-columns: repeat(4, 1fr); }
}

/* --- CONTACT --- */
.contact-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
.contact-info h2, .contact-form-wrap h2 { color: var(--color-accent-deep); font-size: 26px; margin: 0 0 6px; }
.contact-info .brand-facts { margin-top: 18px; }
.contact-form-wrap { background: var(--color-white); border: 1px solid var(--color-line); border-radius: 14px; padding: 26px 22px; }
.contact-form { margin-top: 18px; }
.field { margin-top: 16px; }
.field-row { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
.field label { color: var(--color-accent-deep); display: block; font-size: 15px; margin-bottom: 6px; }
.field input, .field select, .field textarea { background: var(--color-page); border: 1px solid var(--color-line); border-radius: 8px; color: var(--color-text); font: inherit; font-size: 16px; padding: 12px 14px; width: 100%; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(40,60,157,.15); outline: none; }
.field .invalid { border-color: #b3261e; }
.req { color: #b3261e; }
.hp { height: 0; left: -9999px; overflow: hidden; position: absolute; width: 0; }
.form-note { color: var(--color-muted); font-size: 14px; margin-top: 16px; }
.form-submit { border: 0; cursor: pointer; font: inherit; margin-top: 18px; }
.form-submit[disabled] { opacity: .6; cursor: wait; }
.form-status { font-size: 15px; line-height: 24px; margin-top: 14px; min-height: 24px; }
.form-status.ok { color: #1c6b3a; }
.form-status.err { color: #b3261e; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } .contact-form-wrap { padding: 32px; } }
@media (min-width: 900px) { .contact-grid { gap: 56px; grid-template-columns: 4fr 6fr; } }

/* --- PARTNERS / PRIVACY --- */
.pillars--two { grid-template-columns: 1fr; }
.pillar-link { margin-top: 14px; }
.psteps { counter-reset: s; display: grid; gap: 16px; grid-template-columns: 1fr; list-style: none; margin: 30px 0 0; padding: 0; }
.pstep { border-top: 2px solid var(--color-accent); padding-top: 16px; }
.pstep-n { color: var(--color-accent); display: block; font-family: var(--font-serif); font-size: 34px; line-height: 1; }
.pstep h3 { color: var(--color-accent-deep); font-family: var(--font-serif); font-size: 21px; font-weight: 400; margin: 10px 0 0; }
.pstep p { font-size: 16px; line-height: 26px; margin-top: 8px; }
.privacy { max-width: 760px; }
.privacy h3:first-child { margin-top: 0; }
.privacy a { color: var(--color-accent); text-decoration: underline; }
@media (min-width: 860px) { .pillars--two { grid-template-columns: repeat(2, 1fr); } .psteps { gap: 32px; grid-template-columns: repeat(3, 1fr); } }

/* --- WORK WITH US: icons, roadmap --- */
.pillar-icon { color: var(--color-accent); display: block; margin-bottom: 14px; }
.oem-line { color: var(--color-muted); font-size: 17px; margin-top: 10px; }
.oem-line .arrow-link { margin-left: 8px; white-space: nowrap; }
/* --- small icons: About, research bands, Contact details --- */
.res-icon { color: var(--color-gold-bright); display: block; margin-bottom: 12px; }
.contact-info dt { align-items: center; display: flex; gap: 8px; }
.contact-info .dt-icon { color: var(--color-accent); flex: none; }

/* --- BRANDS v3: animated group tree, sticky brand switcher, highlights --- */
.brand-tags { margin-top: 26px; }
.brand-avail { color: var(--color-muted); font-size: 16px; line-height: 25px; margin-top: 20px; }
.brand-photo { border-radius: 12px; margin: 22px 0 0; overflow: hidden; }
.brand-photo img { display: block; height: auto; width: 100%; }
.brand-side { min-width: 0; }
.brand-block[id], section[id="cybcure"], section[id="yeatype"], section[id="livf"], section[id="yotapian"] { scroll-margin-top: 130px; }
.group-section { padding-bottom: 8px; }
.section.section--tight.group-section { padding-bottom: 8px; }
.tile-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.brand-tile { background: linear-gradient(160deg, var(--t1, #1f2f7d) 0%, var(--t2, #151f5d) 100%); background-position: center; background-size: cover; border-radius: 16px; color: #fff; display: flex; flex-direction: column; gap: 14px; justify-content: flex-start; min-height: 300px; overflow: hidden; padding: 20px; position: relative; text-decoration: none; transition: box-shadow .3s ease, transform .3s ease; }
.brand-tile::before { background: radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%); content: ""; inset: 0; pointer-events: none; position: absolute; transition: opacity .3s ease; }
.brand-tile.has-photo { background-image: linear-gradient(180deg, rgba(10,16,48,.15) 0%, rgba(10,16,48,.85) 100%), var(--tile); }
.brand-tile > * { position: relative; }
.tile-cybcure { --t1: #2b40a8; --t2: #141d58; }
.tile-yeatype { --t1: #3a5a47; --t2: #1d3126; }
.tile-livf { --t1: #5d7a58; --t2: #33472f; }
.tile-yotapian { --t1: #2f9a22; --t2: #196013; }
.brand-tile:hover, .brand-tile:focus-visible { box-shadow: 0 22px 44px rgba(21,31,93,.28); transform: translateY(-6px); }
.brand-tile:active { transform: translateY(-2px) scale(.99); }
.tc-logo { align-items: center; background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--color-gold-bright); display: flex; justify-content: center; overflow: hidden; padding: 3px; transition: transform .3s ease; height: 68px; width: 68px; }
.tc-logo img { border-radius: 11px; height: 100%; object-fit: cover; width: 100%; }
.brand-tile:hover .tc-logo { transform: scale(1.08) rotate(-3deg); }
.tile-text { display: block; }
.brand-tile .mb-tag { color: rgba(255,255,255,.78); display: block; }
.brand-tile .mb-name { color: #fff; display: block; font-size: 26px; line-height: 1.15; margin-top: 4px; }
.tc-desc { color: rgba(255,255,255,.9); display: block; font-size: 15px; line-height: 23px; margin-top: 10px; }
.tc-go { font-family: var(--font-serif); font-size: 13px; letter-spacing: .12em; margin-top: auto; padding-top: 14px; text-transform: uppercase; transition: transform .3s ease; }
.brand-tile:hover .tc-go { transform: translateY(4px); }
:lang(zh) .tc-go { letter-spacing: .06em; text-transform: none; }
.js .brand-tile { opacity: 0; transform: translateY(18px); }
.js .group-tree.is-drawn .brand-tile { opacity: 1; transform: none; transition: opacity .6s ease var(--d, .2s), transform .6s ease var(--d, .2s), box-shadow .3s ease; }
.js .group-tree.is-drawn .brand-tile:hover { transform: translateY(-6px); transition-delay: 0s; }
.fit-line { color: var(--color-muted); font-family: var(--font-ui); font-size: 18px; line-height: 28px; margin-top: 10px; max-width: none; }
:lang(zh) .fit-line { line-height: 1.7; }
.section--tight.fit-section { padding-top: 4px; }
@media (min-width: 860px) {
  .tile-grid { grid-template-columns: repeat(4, 1fr); }
  .brand-tile { min-height: 360px; padding: 24px; }
  .brand-block--flip { grid-template-columns: 1fr 340px; }
  .brand-block--flip .brand-side { order: 2; }
}
/* sticky switcher */
.brand-switch { background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-line); left: 0; opacity: 0; pointer-events: none; position: fixed; right: 0; top: var(--header-height); transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; visibility: hidden; z-index: 45; }
.brand-switch.is-visible { opacity: 1; pointer-events: auto; transform: none; visibility: visible; }
.bs-inner { display: flex; gap: 8px; justify-content: flex-start; margin: 0 auto; max-width: var(--content-max); overflow-x: auto; padding: 8px 16px; scrollbar-width: none; }
.bs-inner::-webkit-scrollbar { display: none; }
.bs-inner a { align-items: center; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-accent-deep); display: inline-flex; flex: none; font-size: 15px; gap: 8px; padding: 6px 16px 6px 8px; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.bs-inner img { border-radius: 6px; height: 26px; object-fit: contain; width: 26px; }
.bs-inner a:hover { border-color: var(--color-accent); }
.bs-inner a.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
@media (min-width: 720px) { .bs-inner { justify-content: center; } }
/* target flash after a click */
@keyframes brandPop { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes brandGlow { 0% { box-shadow: 0 0 0 0 rgba(40,60,157,.35); } 100% { box-shadow: 0 0 0 26px rgba(40,60,157,0); } }
.brand-flash .brand-id img { animation: brandPop .8s ease, brandGlow 1.2s ease-out; }
.brand-flash .brand-tags li { animation: tagIn .5s ease both; }
.brand-flash .brand-tags li:nth-child(2) { animation-delay: .08s; }
.brand-flash .brand-tags li:nth-child(3) { animation-delay: .16s; }
.brand-flash .brand-tags li:nth-child(4) { animation-delay: .24s; }
@keyframes tagIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- WORK WITH US: tighter sections, animated icon roadmap --- */
.section.section--tight { padding: 30px 0; }
@media (min-width: 1024px) { .section.section--tight { padding: 38px 0; } }
.section--tight .pillars, .section--tight .res-grid { margin-top: 24px; }
.roadmap { list-style: none; margin: 26px 0 0; padding: 0; }
.road-step { padding: 0 0 26px 76px; position: relative; }
.road-step:last-child { padding-bottom: 0; }
.road-step::before, .road-step::after { content: ""; height: calc(100% - 52px); left: 25px; position: absolute; top: 58px; width: 2px; }
.road-step::before { background: var(--color-line); }
.road-step::after { background: var(--color-accent); transform: scaleY(var(--fill, 1)); transform-origin: top; transition: transform .12s linear; }
.road-step:last-child::before, .road-step:last-child::after { display: none; }
.road-node { align-items: center; background: var(--color-accent); border: 2px solid var(--color-accent); border-radius: 50%; box-shadow: 0 0 0 6px rgba(40,60,157,.08); color: #fff; display: flex; height: 52px; justify-content: center; left: 0; position: absolute; top: 0; transition: background .4s ease, color .4s ease, transform .4s ease; width: 52px; }
.road-num { color: var(--color-gold); display: block; font-family: var(--font-serif); font-size: 13px; letter-spacing: .14em; padding-top: 2px; }
.road-step h3 { color: var(--color-accent-deep); font-family: var(--font-serif); font-size: 20px; font-weight: 400; margin: 2px 0 0; }
.road-step p { font-size: 15px; line-height: 24px; margin-top: 6px; }
.js .road-step:not(.is-on) .road-node { background: var(--color-white); color: var(--color-accent); transform: scale(.9); }
.js .road-step:not(.is-on) h3, .js .road-step:not(.is-on) p, .js .road-step:not(.is-on) .road-num { opacity: .35; }
.road-step h3, .road-step p, .road-num { transition: opacity .4s ease; }
@media (min-width: 1000px) {
  .roadmap { display: grid; gap: 0 22px; grid-template-columns: repeat(6, 1fr); }
  .road-step { padding: 72px 0 0; }
  .road-step::before, .road-step::after { height: 2px; left: 60px; right: -22px; top: 25px; width: auto; }
  .road-step::after { transform: scaleX(var(--fill, 1)); transform-origin: left; }
  .road-num { padding-top: 0; }
  .road-step h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .brand-tile, .js .road-step .road-node { opacity: 1; transform: none; }
  .brand-flash .brand-id img, .brand-flash .brand-tags li { animation: none; }
}

/* roadmap: icons draw in, one soft pulse, hover response */
.road-node svg * { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s ease .1s; }
.js .road-step:not(.is-on) .road-node svg * { stroke-dashoffset: 1; }
@keyframes roadPulse { 0% { box-shadow: 0 0 0 0 rgba(40,60,157,.45); } 100% { box-shadow: 0 0 0 18px rgba(40,60,157,0); } }
.js .road-step.is-on .road-node { animation: roadPulse 1.1s ease-out; }
.road-step:hover .road-node { transform: translateY(-3px); }
.road-step:hover h3, .js .road-step:not(.is-on):hover h3 { color: var(--color-accent); opacity: 1; }
.road-step:hover p, .js .road-step:not(.is-on):hover p, .js .road-step:not(.is-on):hover .road-num { color: var(--color-text); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .road-step.is-on .road-node { animation: none; } .road-node svg * { transition: none; } }

/* --- page banner: OxyLumina mark watermark (Brands hero) --- */
.page-banner--mark { --mark-w: clamp(160px, 15vw, 240px); overflow: hidden; }
.page-banner--mark .wrap { position: relative; z-index: 1; }
.page-banner--mark h1, .page-banner--mark .lead { max-width: min(620px, calc(100% - var(--mark-w) - 90px)); }
.banner-mark { align-items: center; display: flex; flex-direction: column; pointer-events: none; position: absolute; right: 20px; text-align: center; top: 50%; transform: translateY(-50%); width: var(--mark-w); z-index: 0; }
.bm-glow { background: radial-gradient(closest-side, rgba(255,255,255,.24), rgba(150,180,255,.24) 45%, rgba(120,160,255,0) 76%); border-radius: 50%; inset: calc(var(--mark-w) * -0.4) calc(var(--mark-w) * -0.24); position: absolute; }
.bm-icon { filter: drop-shadow(0 0 30px rgba(150,180,255,.4)) drop-shadow(0 16px 26px rgba(5,11,31,.45)); height: auto; opacity: 1; position: relative; width: 84%; }
.bm-word { color: rgba(255,255,255,.85); display: block; font-family: var(--font-ui); font-size: clamp(13px, 1.15vw, 18px); font-weight: 600; letter-spacing: .24em; margin: 10px -0.24em 0 0; position: relative; }
.bm-word-cn { color: var(--color-gold-bright); display: block; font-family: var(--font-ui); font-size: clamp(20px, 1.7vw, 27px); letter-spacing: .28em; margin: 6px -0.28em 0 0; opacity: .95; }
:lang(zh) .bm-word, :lang(zh) .bm-word-cn { letter-spacing: .2em; }
:lang(zh) .bm-word { margin-right: -0.2em; }
:lang(zh) .bm-word-cn { margin-right: -0.2em; }
.bm-floor { background: radial-gradient(closest-side, rgba(195,203,227,.4), rgba(195,203,227,0) 70%); border-radius: 50%; height: 12px; margin-top: 6px; position: relative; transform: scaleY(.35); width: 78%; }
.js .banner-mark, .js .bm-glow { animation: bmIn 1s ease both .1s; }
@keyframes bmIn { from { opacity: 0; transform: translateY(-50%) scale(.94); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
@media (max-width: 759px) { .banner-mark { display: none; } }
@media (prefers-reduced-motion: reduce) { .js .banner-mark, .js .bm-glow { animation: none; } }

/* About page: research section, intro beside the three points (desktop) */
@media (min-width: 1024px) {
  .rx2 { align-items: center; display: grid; gap: 64px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rx2 .res-grid.rx2-list { gap: 0; grid-template-columns: 1fr; margin-top: 0; }
  .rx2-list .res-item { border: 0; border-radius: 0; border-top: 1px solid rgba(195,203,227,.25); padding: 18px 0 18px 52px; position: relative; }
  .rx2-list .res-item:last-child { border-bottom: 1px solid rgba(195,203,227,.25); }
  .rx2-list .res-icon { left: 0; position: absolute; top: 20px; }
  .rx2-list .res-item h3 { font-size: 21px; }
  .rx2-list .res-item p { margin-top: 4px; }
}