/* ============================================================
   Pioneer Forge Labs — Design System
   Theme: "The Forge" — molten amber on deep charcoal.
   Self-contained, build-free. Per-division theming via --accent.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --bg:            #0A0A0F;
  --bg-2:          #0D0D14;
  --bg-3:          #101018;
  --surface:       rgba(255, 255, 255, 0.028);
  --surface-2:     rgba(255, 255, 255, 0.05);
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text:      #F6F4F1;
  --text-dim:  #ABA8B4;
  --text-mute: #6E6B79;

  --brand:      #FF7A18;
  --brand-2:    #FF3D3D;
  --brand-soft: #FFB067;
  --brand-glow: rgba(255, 122, 24, 0.35);

  /* Default accent (overridden per-division inline) */
  --accent:    #FF7A18;
  --accent-to: #FF3D3D;

  --radius:    18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  --shadow:    0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 1px var(--border), 0 30px 80px -30px var(--brand-glow);

  --maxw: 1200px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient forge glow fixed behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 500px at 50% -8%, rgba(255, 122, 24, 0.14), transparent 60%),
    radial-gradient(700px 500px at 88% 8%, rgba(124, 58, 237, 0.10), transparent 55%),
    radial-gradient(600px 500px at 6% 22%, rgba(45, 212, 191, 0.07), transparent 55%);
  pointer-events: none;
}

/* Subtle grid texture */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, #000 40%, transparent 85%);
  pointer-events: none;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
}

p { margin: 0; }

::selection { background: var(--brand); color: #fff; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding-block: clamp(56px, 7vw, 104px); position: relative; }
.section--tight { padding-block: clamp(44px, 5.5vw, 76px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1.5px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.section-head { max-width: 640px; margin-bottom: 52px; }
.section-head h2 {
  font-size: clamp(30px, 4.4vw, 46px);
  margin-top: 16px;
}
.section-head p {
  margin-top: 18px;
  color: var(--text-dim);
  font-size: 17px;
}

.text-gradient {
  background: linear-gradient(105deg, var(--brand-soft), var(--brand) 45%, var(--brand-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.accent-gradient {
  background: linear-gradient(105deg, var(--accent), var(--accent-to));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn--primary {
  background: linear-gradient(105deg, var(--accent), var(--accent-to));
  color: #fff;
  box-shadow: 0 10px 30px -8px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn--ghost {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--text-mute); background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.btn--sm { padding: 10px 16px; font-size: 14px; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(10, 10, 15, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--border);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px var(--border-strong), 0 8px 20px -8px rgba(0,0,0,0.6);
}
.brand__mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand__name { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name b { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.brand__name span { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  color: var(--text-dim);
  font-weight: 500;
  transition: color 0.2s, background 0.2s;
}
.nav__links a:hover { color: var(--text); background: var(--surface-2); }
.nav__cta { display: flex; align-items: center; gap: 10px; }

.nav__toggle {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  border-radius: 11px;
  color: var(--text);
  cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__toggle svg { width: 20px; height: 20px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: clamp(48px, 8vw, 90px); padding-bottom: clamp(56px, 9vw, 110px); overflow: hidden; }
.hero__orb {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55;
  z-index: -1; pointer-events: none;
  animation: drift 18s var(--ease) infinite alternate;
}
.hero__orb--1 { width: 460px; height: 460px; top: -120px; left: -60px; background: radial-gradient(circle, rgba(255,122,24,0.55), transparent 70%); }
.hero__orb--2 { width: 420px; height: 420px; top: 40px; right: -80px; background: radial-gradient(circle, rgba(124,58,237,0.45), transparent 70%); animation-delay: -6s; }
@keyframes drift { to { transform: translate3d(30px, 40px, 0) scale(1.12); } }

.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  font-size: 13px; color: var(--text-dim);
  margin-bottom: 26px;
}
.hero__badge b { color: var(--text); font-weight: 600; }
.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(255,122,24,0); } }

.hero h1 {
  font-size: clamp(40px, 7.2vw, 82px);
  letter-spacing: -0.035em;
  max-width: 15ch;
}
.hero__lede {
  margin-top: 26px;
  font-size: clamp(17px, 2vw, 21px);
  color: var(--text-dim);
  max-width: 62ch;
}
.hero__legal {
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
}
.hero__actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; }

.hero__focus { margin-top: 54px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  font-size: 13.5px; color: var(--text-dim);
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.chip svg { width: 15px; height: 15px; color: var(--brand-soft); }
.chip:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-2px); }

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat { background: var(--bg-2); padding: 30px 26px; }
.stat__value {
  font-size: clamp(34px, 5vw, 50px);
  font-weight: 700; letter-spacing: -0.03em;
  line-height: 1;
}
.stat__label { margin-top: 10px; color: var(--text-dim); font-size: 14px; }

/* ---------- Ecosystem / division cards ---------- */
.grid-div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.dcard {
  position: relative;
  display: flex; flex-direction: column;
  padding: 30px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
  isolation: isolate;
}
.dcard::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 100% 0%, var(--accent), transparent 55%);
  opacity: 0.10;
  transition: opacity 0.35s var(--ease);
}
.dcard:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow); }
.dcard:hover::before { opacity: 0.2; }

.dcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.dcard__badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 72%, var(--text));
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.dcard__arrow {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--text-dim);
  transition: background 0.3s var(--ease), color 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}
.dcard__arrow svg { width: 16px; height: 16px; }
.dcard:hover .dcard__arrow {
  background: linear-gradient(140deg, var(--accent), var(--accent-to));
  color: #fff; border-color: transparent; transform: scale(1.08);
}

.dcard h3 { font-size: 21px; }
.dcard__tag { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: color-mix(in srgb, var(--accent) 70%, var(--text)); letter-spacing: 0.01em; }
.dcard__sum { margin-top: 14px; color: var(--text-dim); font-size: 14.5px; flex: 1; }
.dcard__link {
  margin-top: 24px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600;
  color: color-mix(in srgb, var(--accent) 68%, var(--text));
}
.dcard__link::after { content: "→"; transition: transform 0.25s var(--ease); }
.dcard:hover .dcard__link::after { transform: translateX(5px); }

/* Tags/pills on product & division pages */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  border: 1px solid var(--border-strong);
  color: var(--text-dim); background: var(--surface);
}
.pill--live { color: #6EE7B7; border-color: rgba(110,231,183,0.3); }
.pill--live .dot { width: 6px; height: 6px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 3px rgba(52,211,153,0.2); }
.pill--client { color: #9DBBFF; border-color: rgba(157,187,255,0.32); background: rgba(77,140,255,0.09); }

/* ---------- Products ---------- */
.grid-prod { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pcard {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
  overflow: hidden;
}
.pcard::after {
  content: "";
  position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-to));
  opacity: 0.85;
}
.pcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); }
.pcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pcard__name { font-size: 20px; }
.pcard__domain { font-size: 13px; color: color-mix(in srgb, var(--accent) 70%, var(--text)); font-weight: 600; margin-top: 3px; }
.pcard__tag { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.pcard__desc { font-size: 14.5px; color: var(--text-dim); flex: 1; }
.pcard__foot { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; }
.pcard__by { font-size: 12.5px; color: var(--text-mute); }
.pcard__visit { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.pcard__visit svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.pcard:hover .pcard__visit svg { transform: translate(3px, -3px); }

/* ---------- CTA band ---------- */
.cta {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 72px);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,122,24,0.22), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(124,58,237,0.22), transparent 55%),
    var(--bg-3);
  border: 1px solid var(--border-strong);
  overflow: hidden;
  text-align: center;
}
.cta h2 { font-size: clamp(28px, 4.5vw, 48px); max-width: 18ch; margin-inline: auto; }
.cta p { margin-top: 18px; color: var(--text-dim); font-size: 17px; max-width: 54ch; margin-inline: auto; }
.cta__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); background: var(--bg-2); padding-block: 60px 32px; margin-top: 40px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.footer__about { max-width: 34ch; }
.footer__about p { margin-top: 18px; color: var(--text-dim); font-size: 14.5px; }
.footer__col h4 { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 16px; }
.footer__col a { display: block; padding: 6px 0; color: var(--text-dim); font-size: 14.5px; transition: color 0.2s; }
.footer__col a:hover { color: var(--text); }
.footer__bottom {
  margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--text-mute); font-size: 13.5px;
}

/* ============================================================
   Division page
   ============================================================ */
.dhero { position: relative; padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(40px, 6vw, 70px); overflow: hidden; }
.dhero__orb {
  position: absolute; width: 520px; height: 520px; border-radius: 50%;
  top: -160px; right: -80px; z-index: -1; filter: blur(80px); opacity: 0.5;
  background: radial-gradient(circle, var(--accent), transparent 68%);
}
.crumbs { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-mute); margin-bottom: 30px; }
.crumbs a { color: var(--text-dim); transition: color 0.2s; }
.crumbs a:hover { color: var(--text); }
.crumbs svg { width: 14px; height: 14px; opacity: 0.5; }

.dhero__head { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.dhero__icon {
  width: 68px; height: 68px; flex: none;
  display: grid; place-items: center; border-radius: 18px; color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-to));
  box-shadow: 0 16px 34px -10px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 1px 0 rgba(255,255,255,0.3);
}
.dhero__icon svg { width: 34px; height: 34px; }
.dhero h1 { font-size: clamp(34px, 5.6vw, 60px); }
.dhero__tag { margin-top: 8px; font-size: 15px; font-weight: 600; color: color-mix(in srgb, var(--accent) 72%, var(--text)); letter-spacing: 0.02em; }
.dhero__intro { margin-top: 26px; font-size: clamp(17px, 2vw, 20px); color: var(--text-dim); max-width: 64ch; }
.dhero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

/* Capabilities */
.grid-cap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.cap {
  padding: 28px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-2); transition: border-color 0.3s, transform 0.3s var(--ease);
}
.cap:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); transform: translateY(-3px); }
.cap__num { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: color-mix(in srgb, var(--accent) 75%, var(--text)); }
.cap h3 { margin-top: 12px; font-size: 19px; }
.cap p { margin-top: 10px; color: var(--text-dim); font-size: 14.5px; }

/* Next divisions strip */
.siblings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sibling {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-2); transition: border-color 0.3s, transform 0.3s var(--ease), background 0.3s;
}
.sibling:hover { border-color: color-mix(in srgb, var(--sib) 45%, var(--border)); transform: translateY(-3px); }
.sibling__dot { width: 14px; height: 14px; flex: none; border-radius: 50%; background: linear-gradient(140deg, var(--sib), var(--sib-to)); box-shadow: 0 0 14px -2px var(--sib); }
.sibling b { font-size: 15px; display: block; }
.sibling span { font-size: 12.5px; color: var(--text-mute); }

/* ---------- Reveal on scroll ---------- */
/* Only hide when JS is present (it adds .js to <html>) — no-JS keeps all content visible. */
.reveal { opacity: 1; }
html.js .reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; filter: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }

/* ---------- Mobile nav panel ---------- */
.nav__panel { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .grid-div, .grid-prod, .siblings { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .nav__links, .nav__cta .btn { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav.is-open .nav__panel {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; left: 16px; right: 16px; top: 78px;
    padding: 14px; border: 1px solid var(--border);
    background: rgba(13,13,20,0.96); backdrop-filter: blur(16px);
    border-radius: var(--radius); box-shadow: var(--shadow);
  }
  .nav__panel a { padding: 12px 14px; border-radius: 10px; color: var(--text-dim); font-weight: 500; }
  .nav__panel a:hover { background: var(--surface-2); color: var(--text); }
  .nav__panel .btn { justify-content: center; margin-top: 6px; }
  .grid-div, .grid-prod, .grid-cap, .siblings { grid-template-columns: 1fr; }
  .dhero__head { gap: 16px; }
  .dhero__icon { width: 56px; height: 56px; }
  .dhero__icon svg { width: 28px; height: 28px; }
}
@media (max-width: 460px) {
  .wrap { padding-inline: 18px; }
  /* Keep stats as a compact 2×2 grid (not a tall single column) so the
     block fills its space instead of stacking into four full-width cards. */
  .stat { padding: 22px 18px; }
}
@media (max-width: 340px) {
  .stats { grid-template-columns: 1fr; }
}

/* ---------- Phone vertical rhythm ----------
   The hero's fixed margins and each section's block padding are tuned for
   desktop; on a narrow phone they stack into large empty gaps (most visibly
   between the hero chips and the stats block). Tighten them here so sections
   sit closer together and the hero is no longer taller than the viewport. */
@media (max-width: 600px) {
  .hero { padding-top: 30px; padding-bottom: 40px; }
  .hero__badge { margin-bottom: 18px; }
  .hero__lede { margin-top: 18px; }
  .hero__actions { margin-top: 26px; }
  .hero__focus { margin-top: 30px; gap: 8px; }
  .section { padding-block: 52px; }
  .section--tight { padding-block: 38px; }
  .section-head { margin-bottom: 32px; }
}

/* ============================================================
   Motion graphics & refined transitions
   ============================================================ */

/* Animated hero grid */
.hero__grid {
  position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 42%, #000 28%, transparent 80%);
  mask-image: radial-gradient(ellipse 78% 68% at 50% 42%, #000 28%, transparent 80%);
  animation: gridPan 34s linear infinite;
}
@keyframes gridPan { to { background-position: 56px 56px; } }

/* Section transition glows (soften the seams between sections) */
.section-glow {
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 70%; height: 360px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--brand-glow), transparent 70%);
  opacity: 0.5; filter: blur(30px);
}
.section-glow--right {
  left: auto; right: 0; transform: none; width: 45%; max-width: 100%;
  background: radial-gradient(ellipse at center, rgba(124,58,237,0.18), transparent 70%);
}

/* Ecosystem intro + orbital motion graphic */
.eco-intro {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px;
  align-items: center; margin-bottom: 60px;
}
.section-head--flush { margin-bottom: 0; }

.orbit { position: relative; width: 360px; height: 360px; margin-inline: auto; --r: 140px; }
.orbit__glow {
  position: absolute; top: 50%; left: 50%; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow), transparent 68%); filter: blur(12px);
  animation: orbGlow 3.8s ease-in-out infinite;
}
@keyframes orbGlow {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.9; transform: translate(-50%, -50%) scale(1.15); }
}
.orbit__ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.13); }
.orbit__ring--outer { width: 300px; height: 300px; margin: -150px 0 0 -150px; animation: spinCW 60s linear infinite; }
.orbit__ring--inner { width: 188px; height: 188px; margin: -94px 0 0 -94px; border-style: dotted; border-color: rgba(255,255,255,0.09); animation: spinCCW 46s linear infinite; }

.orbit__core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: #fff; z-index: 2;
  box-shadow: 0 0 0 1px var(--border-strong), 0 0 50px -6px var(--brand-glow), 0 20px 44px -14px rgba(0,0,0,0.65);
}
.orbit__core img { width: 100%; height: 100%; object-fit: cover; }

.orbit__spin { position: absolute; inset: 0; z-index: 3; animation: spinCW 48s linear infinite; }
.orbit__slot { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: rotate(var(--angle)) translateY(calc(-1 * var(--r))); }
.orbit__upright { position: absolute; transform: rotate(calc(-1 * var(--angle))); }
.orbit__node {
  position: absolute; top: -30px; left: -44px; width: 88px; height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  animation: spinCCW 48s linear infinite;
}
.orbit__dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(140deg, var(--a), var(--a2));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 18%, transparent), 0 0 18px -1px var(--a);
}
.orbit__label { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim); white-space: nowrap; }

@keyframes spinCW  { to { transform: rotate(360deg); } }
@keyframes spinCCW { to { transform: rotate(-360deg); } }

/* Expertise cards (icon-free) */
.grid-exp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.exp {
  position: relative; padding: 30px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-2); overflow: hidden; transition: border-color 0.3s, transform 0.3s var(--ease);
}
.exp::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); opacity: 0.55; }
.exp:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.exp__num { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; color: var(--brand-soft); }
.exp h3 { margin-top: 16px; font-size: 19px; }
.exp p { margin-top: 10px; color: var(--text-dim); font-size: 14.5px; }

/* Footer plain (non-link) items */
.footer__item { display: block; padding: 6px 0; color: var(--text-mute); font-size: 14.5px; }

/* Responsive: motion graphic + expertise */
@media (max-width: 940px) {
  .grid-exp { grid-template-columns: repeat(2, 1fr); }
  .eco-intro { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .grid-exp { grid-template-columns: 1fr; }
  .orbit { width: 300px; height: 300px; --r: 116px; }
  .orbit__ring--outer { width: 250px; height: 250px; margin: -125px 0 0 -125px; }
  .orbit__ring--inner { width: 156px; height: 156px; margin: -78px 0 0 -78px; }
  .orbit__core { width: 82px; height: 82px; }
}

/* ============================================================
   Legal / long-form pages (privacy policy, terms)
   ============================================================ */
.legal-hero { position: relative; padding-block: clamp(40px, 6vw, 76px) 40px; border-bottom: 1px solid var(--border); overflow: hidden; }
.legal-hero .crumbs { margin-bottom: 26px; }
.legal-hero h1 { font-size: clamp(32px, 5vw, 50px); margin-top: 14px; }
.legal-hero .updated { margin-top: 14px; color: var(--text-mute); font-size: 14px; letter-spacing: 0.02em; }

.prose { max-width: 76ch; margin-inline: auto; color: var(--text-dim); font-size: 16px; }
.prose > p { margin-bottom: 16px; line-height: 1.75; }
.prose h2 { color: var(--text); font-size: 21px; margin-top: 46px; margin-bottom: 14px; letter-spacing: -0.01em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 9px; line-height: 1.65; }
.prose a { color: var(--brand-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.2s; }
.prose a:hover { color: var(--brand); }
.prose strong { color: var(--text); font-weight: 600; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 34px 0; }
.prose__table { overflow-x: auto; margin: 10px 0 22px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 460px; }
.prose th, .prose td { text-align: left; padding: 13px 15px; border: 1px solid var(--border); vertical-align: top; line-height: 1.55; }
.prose th { background: var(--surface-2); color: var(--text); font-weight: 600; }
.prose td:first-child { color: var(--text); font-weight: 500; white-space: nowrap; }

/* ---------- Footer legal link ---------- */
.footer__legal { color: var(--text-mute); transition: color 0.2s; }
.footer__legal:hover { color: var(--text); }

/* ---------- Product card action links ---------- */
.pcard__actions {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 9px 18px; align-items: center;
}
.pcard__action { font-size: 13.5px; font-weight: 600; color: var(--text-dim); transition: color 0.2s; }
.pcard__action:hover { color: var(--text); }
.pcard__action--primary { color: color-mix(in srgb, var(--accent) 72%, var(--text)); }

/* ---------- App detail page ---------- */
.app__meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.app__meta .pill { font-size: 12.5px; }
.grid-cap--3 { grid-template-columns: repeat(3, 1fr); }

.reslist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.res {
  display: flex; align-items: center; gap: 16px; padding: 20px 22px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2); color: var(--text);
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.res:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); transform: translateY(-3px); }
.res__icon {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-to));
  box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--accent) 55%, transparent);
}
.res__icon svg { width: 22px; height: 22px; }
.res > span:not(.res__icon) { flex: 1; }
.res b { display: block; font-size: 16px; }
.res b + span { display: block; margin-top: 3px; color: var(--text-dim); font-size: 13.5px; font-weight: 400; line-height: 1.5; }
.res > svg { flex: none; width: 18px; height: 18px; color: var(--text-mute); transition: transform 0.25s var(--ease), color 0.25s; }
.res:hover > svg { transform: translate(3px, -3px); color: var(--text); }

@media (max-width: 900px) { .grid-cap--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-cap--3 { grid-template-columns: 1fr; } .reslist { grid-template-columns: 1fr; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal, html.js .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}