/* =========================================================================
   Dragonfly Interactive — Page-level components
   Real product-marketing vocabulary, not deck patterns.
   ========================================================================= */

/* ---------- Home hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(7rem, 5rem + 8vw, 12rem) clamp(4rem, 3rem + 4vw, 7rem);
  background:
    radial-gradient(ellipse at 80% 0%, rgba(30, 91, 255, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(215, 25, 32, 0.12) 0%, transparent 50%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: var(--platinum);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: center;
}
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-12); }
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.42em 0.85em;
  border: 1px solid rgba(230, 234, 240, 0.22);
  border-radius: var(--r-pill);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(230, 234, 240, 0.85);
}
.hero__kicker .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hk-red);
  box-shadow: 0 0 12px rgba(215, 25, 32, 0.6);
}
.hero__h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-top: var(--sp-6);
}
.hero__lede {
  margin-top: var(--sp-6);
  font-size: var(--text-lg);
  color: rgba(230, 234, 240, 0.7);
  max-width: 56ch;
  line-height: 1.5;
}
.hero__meta {
  margin-top: var(--sp-10);
  display: flex;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
.hero__meta-item { display: flex; flex-direction: column; gap: var(--sp-1); }
.hero__meta-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.hero__meta-label {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(230, 234, 240, 0.55);
}

/* Hero visual — the brand logo treatment */
.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
}
.hero__visual img {
  width: 100%;
  max-width: 520px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at center, black 50%, transparent 92%);
  mask-image: radial-gradient(ellipse 70% 65% at center, black 50%, transparent 92%);
  filter:
    drop-shadow(0 0 50px rgba(215, 25, 32, 0.20))
    drop-shadow(0 0 50px rgba(30, 91, 255, 0.20));
}

/* ---------- Subpage hero (interior pages) ---------- */
.subhero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(6rem, 5rem + 4vw, 9rem) clamp(3rem, 2rem + 3vw, 5rem);
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: var(--platinum);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.subhero__crumb {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(230, 234, 240, 0.5);
  margin-bottom: var(--sp-5);
}
.subhero__crumb a { color: inherit; }
.subhero__crumb a:hover { color: var(--platinum); }
.subhero__crumb .sep { opacity: 0.45; }
.subhero__h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.subhero__lede {
  margin-top: var(--sp-5);
  font-size: var(--text-lg);
  color: rgba(230, 234, 240, 0.7);
  max-width: 58ch;
  line-height: 1.5;
}
.subhero__actions {
  margin-top: var(--sp-8);
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
}

/* Subtle dot grid for hero atmosphere */
.dot-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(230, 234, 240, 0.06) 1px, transparent 0);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 90%);
}

/* ---------- Section primitives ---------- */
.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.surface-light { background: var(--platinum); color: var(--graphite); }
.surface-mist  { background: var(--platinum-3); color: var(--graphite); }
.surface-soft  { background: #F1F3F8; color: var(--graphite); }
.surface-dark  { background: var(--navy); color: var(--platinum); }
.surface-deepest { background: var(--navy-deep); color: var(--platinum); }
.surface-violet-dark {
  background: radial-gradient(ellipse at 30% 30%, rgba(123, 92, 255, 0.15) 0%, transparent 55%), #080814;
  color: var(--platinum);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.06;
  max-width: 22ch;
}
.section-title--center { margin-inline: auto; text-align: center; }
.section-sub {
  margin-top: var(--sp-4);
  font-size: var(--text-md);
  color: var(--steel);
  max-width: 56ch;
  line-height: 1.55;
}
.surface-dark .section-sub, .surface-deepest .section-sub, .surface-violet-dark .section-sub {
  color: rgba(230, 234, 240, 0.68);
}

/* ---------- Customer/partner logo strip ---------- */
.logo-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-4);
  align-items: center;
}
@media (max-width: 880px) { .logo-strip { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } }
.logo-strip__item {
  display: grid;
  place-items: center;
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.5);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--steel);
  letter-spacing: 0.04em;
  text-align: center;
  min-height: 64px;
}
.surface-dark .logo-strip__item, .surface-deepest .logo-strip__item {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
  color: rgba(230, 234, 240, 0.7);
}
.logo-strip__caption {
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: var(--sp-6);
}
.surface-dark .logo-strip__caption { color: rgba(230, 234, 240, 0.55); }

/* ---------- Portfolio overview cards (home + /portfolio) ---------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 760px) { .portfolio-grid { grid-template-columns: 1fr; } }

.portfolio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-8);
  background: var(--platinum-3);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  min-height: 380px;
}
.portfolio-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--p-accent);
}
.portfolio-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(17, 24, 39, 0.14);
}
.portfolio-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.portfolio-card__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--steel-soft);
}
.portfolio-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--p-accent-bg);
  color: var(--p-accent);
}
.portfolio-card__icon svg { width: 24px; height: 24px; }
.portfolio-card__kind {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--p-accent);
}
.portfolio-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-top: var(--sp-1);
}
.portfolio-card__desc {
  font-size: var(--text-md);
  color: var(--steel);
  line-height: 1.55;
  margin-top: var(--sp-3);
  max-width: 38ch;
}
.portfolio-card__inner {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-dark);
  display: grid;
  gap: var(--sp-2);
}
.portfolio-card__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--text-sm);
}
.portfolio-card__row dt {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-soft);
  font-weight: 600;
  flex-shrink: 0;
  width: 92px;
}
.portfolio-card__row dd { color: var(--graphite); }
.portfolio-card__cta {
  margin-top: var(--sp-6);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--p-accent);
}
.portfolio-card__cta .arrow { transition: transform var(--dur-base) var(--ease-out); }
.portfolio-card:hover .portfolio-card__cta .arrow { transform: translateX(4px); }

.portfolio-card--hub     { --p-accent: var(--accent-cinnabar); --p-accent-bg: rgba(215, 25, 32, 0.08); }
.portfolio-card--skylink { --p-accent: var(--accent-jade); --p-accent-bg: rgba(47, 125, 106, 0.08); }
.portfolio-card--kodex   { --p-accent: var(--accent-gold); --p-accent-bg: rgba(156, 122, 31, 0.10); }
.portfolio-card--bao     { --p-accent: var(--accent-violet); --p-accent-bg: rgba(123, 92, 255, 0.10); }

/* ---------- "What we do" three-up summary ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 880px) { .work-grid { grid-template-columns: 1fr; } }
.work {
  padding: var(--sp-6);
}
.work__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--steel-soft);
  margin-bottom: var(--sp-3);
}
.work__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.work__body {
  font-size: var(--text-md);
  color: var(--steel);
  line-height: 1.55;
}

/* ---------- Group-structure diagram (About) ---------- */
.org-tree {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
.org-tree__parent {
  padding: var(--sp-8);
  background: var(--platinum-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
}
.org-tree__parent::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -28px;
  width: 2px; height: 28px;
  background: var(--line-dark);
}
.org-tree__children {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  position: relative;
}
.org-tree__children::before {
  content: "";
  position: absolute;
  top: -28px; left: 16.66%; right: 16.66%;
  height: 2px;
  background: var(--line-dark);
}
@media (max-width: 880px) {
  .org-tree__children { grid-template-columns: 1fr; }
  .org-tree__children::before { display: none; }
}
.org-tree__node {
  position: relative;
  padding: var(--sp-6);
  background: var(--platinum-3);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  border-top: 3px solid var(--node-accent);
}
.org-tree__node::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 50%; transform: translateX(-50%);
  width: 2px; height: 28px;
  background: var(--line-dark);
}
@media (max-width: 880px) { .org-tree__node::before { display: none; } }
.org-tree__label {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--steel);
}
.org-tree__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-top: var(--sp-2);
}
.org-tree__body {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--steel);
  line-height: 1.5;
}
.org-tree__node--horizon { --node-accent: var(--hk-red); }
.org-tree__node--kontrol { --node-accent: var(--cobalt); }
.org-tree__node--bao     { --node-accent: var(--accent-violet); }
.org-tree__parent-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.org-tree__parent-body {
  font-size: var(--text-sm);
  color: var(--steel);
  margin-top: var(--sp-1);
}
.org-tree__flag {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--hk-red);
  padding: 0.32em 0.6em;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
}

/* ---------- Two-column generic ---------- */
.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-12);
  align-items: start;
}
.split--reverse { grid-template-columns: 1fr 1.1fr; }
.split--reverse > :first-child { order: 2; }
@media (max-width: 880px) {
  .split, .split--reverse { grid-template-columns: 1fr; gap: var(--sp-8); }
  .split--reverse > :first-child { order: 0; }
}

/* ---------- Bao dashboard mock (real visual) ---------- */
.bao-mock {
  background: linear-gradient(180deg, #11132A 0%, #0A0C1F 100%);
  border: 1px solid rgba(123, 92, 255, 0.32);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  color: var(--platinum);
  box-shadow: 0 30px 80px rgba(123, 92, 255, 0.18),
              0 0 0 1px rgba(123, 92, 255, 0.06) inset;
  font-family: var(--font-body);
}
.bao-mock__top {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(123, 92, 255, 0.2);
  margin-bottom: var(--sp-5);
}
.bao-mock__brand {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--text-sm);
}
.bao-mock__brand-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-violet);
  box-shadow: 0 0 12px var(--accent-violet);
}
.bao-mock__time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(230, 234, 240, 0.5);
  letter-spacing: 0.08em;
}
.bao-mock__score {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.bao-mock__score-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 5rem;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(120deg, #FFFFFF 0%, var(--accent-violet) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bao-mock__score-of { color: rgba(230,234,240,0.5); font-size: var(--text-lg); }
.bao-mock__score-meta { margin-left: auto; text-align: right; }
.bao-mock__score-label {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(230, 234, 240, 0.55);
  margin-bottom: var(--sp-1);
}
.bao-mock__score-status {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: #5BD3A4;
  font-weight: 600;
}
.bao-mock__signals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.bao-mock__signal {
  padding: var(--sp-3);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--r-sm);
}
.bao-mock__signal-name {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(230, 234, 240, 0.55);
  margin-bottom: var(--sp-1);
  font-weight: 600;
}
.bao-mock__signal-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
}
.bao-mock__signal--ok .bao-mock__signal-value { color: #5BD3A4; }
.bao-mock__signal--warn .bao-mock__signal-value { color: #F5C26B; }
.bao-mock__signal--alert .bao-mock__signal-value { color: #FF6B7A; }
.bao-mock__issue {
  padding: var(--sp-4);
  background: rgba(255, 107, 122, 0.08);
  border: 1px solid rgba(255, 107, 122, 0.22);
  border-radius: var(--r-sm);
  display: flex; gap: var(--sp-3); align-items: flex-start;
}
.bao-mock__issue-badge {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.32em 0.5em;
  background: #FF6B7A;
  color: #2A0009;
  border-radius: var(--r-xs);
  flex-shrink: 0;
}
.bao-mock__issue-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: 2px;
}
.bao-mock__issue-meta {
  font-size: var(--text-xs);
  color: rgba(230, 234, 240, 0.55);
  font-family: var(--font-mono);
}

/* ---------- Caterease event card mock ---------- */
.event-mock {
  background: var(--platinum-3);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-width: 480px;
}
.event-mock__top {
  padding: var(--sp-5);
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line-dark);
  background: linear-gradient(135deg, rgba(215,25,32,0.04), rgba(215,25,32,0.10));
}
.event-mock__ref {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--steel);
}
.event-mock__status {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35em 0.6em;
  background: var(--hk-red);
  color: #fff;
  border-radius: var(--r-pill);
}
.event-mock__body { padding: var(--sp-5); }
.event-mock__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.event-mock__sub {
  font-size: var(--text-sm);
  color: var(--steel);
  margin-top: var(--sp-1);
}
.event-mock__rows {
  margin-top: var(--sp-5);
  display: grid; gap: var(--sp-3);
}
.event-mock__row {
  display: grid; grid-template-columns: 100px 1fr;
  font-size: var(--text-sm); gap: var(--sp-3);
}
.event-mock__row dt {
  color: var(--steel);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.event-mock__row dd { color: var(--graphite); }
.event-mock__pay {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; align-items: baseline;
}
.event-mock__pay-label {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  font-weight: 600;
}
.event-mock__pay-amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

/* ---------- Skylink rack mock ---------- */
.rack-mock {
  background: linear-gradient(180deg, #0E1424, #060912);
  border: 1px solid rgba(47, 125, 106, 0.32);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  color: var(--platinum);
  box-shadow: 0 30px 80px rgba(47, 125, 106, 0.12);
}
.rack-mock__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rack-mock__pulse {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #5BD3A4;
}
.rack-mock__pulse::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #5BD3A4;
  box-shadow: 0 0 12px #5BD3A4;
  animation: pulse 1.6s var(--ease-in-out) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.rack-mock__units { display: grid; gap: 6px; }
.rack-mock__u {
  display: grid; grid-template-columns: 32px 1fr auto;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.rack-mock__u-id { color: rgba(230,234,240,0.45); }
.rack-mock__u-name { color: var(--platinum); }
.rack-mock__u-status {
  display: inline-flex; align-items: center; gap: 6px;
  color: #5BD3A4;
}
.rack-mock__u-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5BD3A4;
}
.rack-mock__u--warn .rack-mock__u-status { color: #F5C26B; }
.rack-mock__u--warn .rack-mock__u-status::before { background: #F5C26B; }

/* ---------- Kodex library mock ---------- */
.lib-mock {
  background: linear-gradient(180deg, #1A1408 0%, #0E0A04 100%);
  border: 1px solid rgba(156, 122, 31, 0.32);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  color: var(--platinum);
  box-shadow: 0 30px 80px rgba(156, 122, 31, 0.14);
}
.lib-mock__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--sp-5);
}
.lib-mock__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lib-mock__chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--accent-gold);
}
.lib-mock__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.lib-mock__tile {
  aspect-ratio: 3/4;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--tile-from), var(--tile-to));
  position: relative;
  overflow: hidden;
  display: flex; align-items: flex-end;
  padding: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}
.lib-mock__tile--1 { --tile-from: #7c4a1a; --tile-to: #2a1605; }
.lib-mock__tile--2 { --tile-from: #2a3a7a; --tile-to: #0a0e2a; }
.lib-mock__tile--3 { --tile-from: #5a2a5a; --tile-to: #1a0e1c; }
.lib-mock__tile--4 { --tile-from: #1a5a4a; --tile-to: #051a14; }
.lib-mock__tile--5 { --tile-from: #6a4a1a; --tile-to: #1a1004; }
.lib-mock__tile--6 { --tile-from: #4a2a1a; --tile-to: #1a0a04; }
.lib-mock__platform {
  position: absolute;
  top: var(--sp-2); right: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  background: rgba(0,0,0,0.45);
  border-radius: 3px;
  font-weight: 600;
}

/* ---------- Module list (Horizon Hub overview) ---------- */
.module-list {
  display: grid;
  gap: var(--sp-3);
}
.module-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: var(--platinum-3);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  color: inherit;
}
.module-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(17, 24, 39, 0.14);
}
.module-row__icon {
  width: 44px; height: 44px;
  background: var(--m-accent-bg, rgba(215,25,32,0.08));
  color: var(--m-accent, var(--hk-red));
  border-radius: var(--r-sm);
  display: grid; place-items: center;
}
.module-row__icon svg { width: 22px; height: 22px; }
.module-row__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.005em;
}
.module-row__desc {
  font-size: var(--text-sm);
  color: var(--steel);
  margin-top: 2px;
}
.module-row__arrow {
  font-size: var(--text-lg);
  color: var(--steel);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.module-row:hover .module-row__arrow { transform: translateX(4px); color: var(--m-accent); }
@media (max-width: 540px) {
  .module-row { grid-template-columns: 44px 1fr; }
  .module-row__arrow { display: none; }
}

/* ---------- Feature row (alternating image/text) ---------- */
.feature {
  padding-block: var(--sp-20);
  position: relative;
}
.feature--alt + .feature--alt { padding-top: 0; }
.feature__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
.feature--reverse .feature__grid { direction: rtl; }
.feature--reverse .feature__grid > * { direction: ltr; }
@media (max-width: 980px) {
  .feature__grid { grid-template-columns: 1fr; gap: var(--sp-10); direction: ltr !important; }
}
.feature__kicker {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--feature-accent, var(--hk-red));
  margin-bottom: var(--sp-3);
}
.feature__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
  max-width: 16ch;
}
.feature__body {
  font-size: var(--text-md);
  color: var(--steel);
  line-height: 1.55;
  max-width: 48ch;
}
.surface-dark .feature__body, .surface-violet-dark .feature__body { color: rgba(230, 234, 240, 0.68); }
.feature__list {
  margin-top: var(--sp-6);
  display: grid;
  gap: var(--sp-3);
  list-style: none;
}
.feature__list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--sp-3);
  font-size: var(--text-md);
  line-height: 1.5;
}
.feature__list li::before {
  content: "";
  width: 14px; height: 14px;
  margin-top: 0.3em;
  border-radius: 50%;
  background: var(--feature-accent);
  opacity: 0.18;
  box-shadow: 0 0 0 1px var(--feature-accent);
}

/* ---------- Pricing (Bao real pricing) ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  max-width: 880px;
  margin-inline: auto;
}
@media (max-width: 720px) { .pricing-grid { grid-template-columns: 1fr; } }
.tier {
  padding: var(--sp-8);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-dark);
  background: var(--platinum-3);
  display: flex; flex-direction: column;
}
.tier--featured {
  background: linear-gradient(180deg, #11132A, #0A0C1F);
  color: var(--platinum);
  border-color: rgba(123, 92, 255, 0.4);
  box-shadow: 0 0 0 1px rgba(123, 92, 255, 0.3), 0 20px 60px rgba(123, 92, 255, 0.16);
}
.tier__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tier__pitch {
  font-size: var(--text-sm);
  color: var(--steel);
  margin-top: var(--sp-2);
}
.tier--featured .tier__pitch { color: rgba(230, 234, 240, 0.7); }
.tier__price {
  display: flex; align-items: baseline; gap: var(--sp-2);
  margin-top: var(--sp-6);
}
.tier__price-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  letter-spacing: -0.025em;
  line-height: 1;
}
.tier__price-unit {
  font-size: var(--text-sm);
  color: var(--steel);
}
.tier--featured .tier__price-unit { color: rgba(230, 234, 240, 0.65); }
.tier__cta {
  margin-top: var(--sp-6);
  display: inline-flex; align-self: flex-start;
}
.tier__features {
  list-style: none;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-dark);
  display: grid; gap: var(--sp-3);
}
.tier--featured .tier__features { border-color: rgba(255,255,255,0.1); }
.tier__features li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.tier__features li::before {
  content: "";
  width: 14px; height: 14px;
  margin-top: 0.3em;
  border-radius: 3px;
  background: var(--accent-violet);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7l3 3 7-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7l3 3 7-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* ---------- Spec table (Skylink / Security) ---------- */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.spec-table th,
.spec-table td {
  text-align: left;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line-dark);
  vertical-align: top;
}
.spec-table th {
  width: 30%;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  font-weight: 600;
}
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

/* ---------- Newsroom card ---------- */
.news-list { display: grid; gap: var(--sp-4); }
.news-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--sp-8);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--line-dark);
  align-items: baseline;
}
@media (max-width: 640px) {
  .news-card { grid-template-columns: 1fr; gap: var(--sp-2); }
}
.news-card__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--steel);
}
.news-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.005em;
}
.news-card__tag {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--hk-red);
  padding: 0.32em 0.65em;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-3);
}
.news-card__body {
  margin-top: var(--sp-2);
  font-size: var(--text-md);
  color: var(--steel);
  line-height: 1.55;
  max-width: 65ch;
}

/* ---------- Leadership card ---------- */
.leader-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 880px) { .leader-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .leader-grid { grid-template-columns: 1fr; } }
.leader {
  padding: var(--sp-6);
  background: var(--platinum-3);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.leader__role {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
}
.leader__name {
  font-size: var(--text-sm);
  color: var(--graphite);
  font-weight: 500;
}
.leader__body {
  font-size: var(--text-sm);
  color: var(--steel);
  line-height: 1.55;
  flex: 1;
}
.leader__tba {
  margin-top: auto;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--steel-soft);
}

/* ---------- Compliance / security badges ---------- */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 720px) { .badge-grid { grid-template-columns: repeat(2, 1fr); } }
.badge-cell {
  padding: var(--sp-5);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  background: var(--platinum-3);
  text-align: center;
}
.badge-cell__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: 0.01em;
}
.badge-cell__sub {
  margin-top: var(--sp-1);
  font-size: var(--text-xs);
  color: var(--steel);
  letter-spacing: 0.04em;
}

/* ---------- Bao six signals grid (real product detail) ---------- */
.signals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 880px) { .signals { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .signals { grid-template-columns: 1fr; } }
.signal {
  padding: var(--sp-6);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(123, 92, 255, 0.2);
  border-radius: var(--r-md);
  position: relative;
}
.signal__icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(123, 92, 255, 0.14);
  color: var(--accent-violet);
  margin-bottom: var(--sp-4);
}
.signal__icon svg { width: 18px; height: 18px; }
.signal__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.005em;
  margin-bottom: var(--sp-2);
}
.signal__body {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(230, 234, 240, 0.7);
}

/* ---------- How-it-works numbered steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  position: relative;
}
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }
.step {
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
  position: relative;
}
.step__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(120deg, var(--accent-violet), #4B96FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
}
.step__body {
  font-size: var(--text-md);
  color: rgba(230, 234, 240, 0.65);
  line-height: 1.55;
}
.surface-light .step__body, .surface-mist .step__body { color: var(--steel); }

/* ---------- Sub-nav (within a product mini-site) ---------- */
.subnav {
  position: sticky;
  top: 64px;
  z-index: 30;
  background: rgba(252, 253, 254, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.subnav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: 52px;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--section-x);
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav__label {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--steel-soft);
  padding-right: var(--sp-2);
  border-right: 1px solid var(--line-dark);
  white-space: nowrap;
}
.subnav__link {
  font-size: var(--text-sm);
  color: var(--steel);
  font-weight: 500;
  white-space: nowrap;
  padding: var(--sp-2) 0;
  position: relative;
  transition: color var(--dur-base) var(--ease-out);
}
.subnav__link:hover, .subnav__link[aria-current="page"] { color: var(--graphite); }
.subnav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--subnav-accent, var(--hk-red));
}

/* ---------- Form (Contact / Careers) ---------- */
.form {
  display: grid;
  gap: var(--sp-5);
  max-width: 560px;
}
.form-row { display: grid; gap: var(--sp-2); }
.form-row label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--graphite);
}
.form-row label .req { color: var(--hk-red); }
.form-row input,
.form-row select,
.form-row textarea {
  font: inherit;
  font-size: var(--text-md);
  background: var(--platinum-3);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-sm);
  padding: 0.85em 1em;
  color: var(--graphite);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--cobalt);
  background: #fff;
  outline: none;
}
.form-row textarea { min-height: 140px; resize: vertical; }
.form-row__hint { font-size: var(--text-xs); color: var(--steel); }
.honeypot { position: absolute; left: -9999px; }
.form-success, .form-error {
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
}
.form-success { background: rgba(47, 125, 106, 0.10); color: #1F5849; border: 1px solid rgba(47,125,106,0.22); }
.form-error   { background: rgba(215, 25, 32, 0.08); color: var(--hk-red); border: 1px solid rgba(215,25,32,0.2); }

/* ---------- HK page: phased plan timeline (kept here, used ONLY on /hong-kong) ---------- */
.phased {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  counter-reset: phase;
}
@media (max-width: 880px) { .phased { grid-template-columns: 1fr; } }
.phase {
  counter-increment: phase;
  padding: var(--sp-8);
  background: var(--platinum-3);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  position: relative;
}
.phase::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--phase-accent, var(--hk-red));
}
.phase__year {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--steel);
  text-transform: uppercase;
}
.phase__year strong { color: var(--graphite); font-weight: 600; }
.phase__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  margin: var(--sp-3) 0;
}
.phase__body {
  font-size: var(--text-md);
  color: var(--steel);
  line-height: 1.55;
}
.phase--1 { --phase-accent: var(--cobalt); }
.phase--2 { --phase-accent: #6B5BFF; }
.phase--3 { --phase-accent: var(--hk-red); }

/* ---------- Helpers ---------- */
.eyebrow {
  display: inline-block;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--steel);
  margin-bottom: var(--sp-4);
}
.surface-dark .eyebrow, .surface-violet-dark .eyebrow, .surface-deepest .eyebrow {
  color: rgba(230, 234, 240, 0.6);
}
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.muted { color: var(--steel); }
.surface-dark .muted, .surface-violet-dark .muted, .surface-deepest .muted { color: rgba(230, 234, 240, 0.6); }
.mt-3 { margin-top: var(--sp-3); }
.mt-5 { margin-top: var(--sp-5); }
.mt-8 { margin-top: var(--sp-8); }
.mt-12 { margin-top: var(--sp-12); }
.mt-16 { margin-top: var(--sp-16); }

/* Inline gradient text — used for selective headline emphasis only */
.grad {
  background: linear-gradient(90deg, var(--hk-red) 0%, var(--hk-red) 35%, var(--cobalt) 65%, var(--cobalt) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-violet {
  background: linear-gradient(120deg, var(--accent-violet) 0%, #4B96FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* CTA — used sparingly */
.cta-card {
  padding: clamp(var(--sp-10), 3rem + 2vw, var(--sp-16));
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: var(--r-lg);
  color: var(--platinum);
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: var(--sp-8);
  align-items: center;
}
@media (max-width: 720px) {
  .cta-card { grid-template-columns: 1fr; }
}
.cta-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.cta-card__sub {
  margin-top: var(--sp-3);
  font-size: var(--text-md);
  color: rgba(230, 234, 240, 0.65);
  max-width: 50ch;
}
.cta-card__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }