/* INCHUB 360 prototype base: layout primitives built only from approved tokens (--ih-*). */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ih-bg);
  color: var(--ih-text);
  font-family: var(--ih-font-family-brand);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
}
:lang(ar) body, body:lang(ar) { font-family: var(--ih-font-family-arabic); }
:lang(zh-Hans) body, body:lang(zh-Hans) { font-family: var(--ih-font-family-brand), var(--ih-font-family-chinese); }
h1, h2, h3 { margin: 0; letter-spacing: var(--ih-font-tracking-heading); line-height: 1.15; text-wrap: balance; font-weight: 800; }
:lang(ar) :is(h1, h2, h3) { letter-spacing: 0; line-height: 1.35; }
p { margin: 0; }
a { color: var(--ih-text-accent); }
img, svg { max-width: 100%; }

.container { inline-size: min(1160px, 100% - 2 * var(--ih-space-4)); margin-inline: auto; }
.stack { display: grid; gap: var(--ih-space-4); }
.muted { color: var(--ih-text-muted); }
.eyebrow { font-size: var(--ih-font-size-xs); letter-spacing: var(--ih-font-tracking-label); text-transform: uppercase; font-weight: 700; color: var(--ih-text-muted); }
:lang(ar) .eyebrow { letter-spacing: 0; text-transform: none; }

/* Buttons: orange takes ink text (brand rule) */
.btn { font: inherit; font-weight: 700; font-size: var(--ih-font-size-sm); display: inline-flex; align-items: center; justify-content: center; gap: var(--ih-space-2);
  padding: 12px 18px; border-radius: var(--ih-radius-md); border: 1px solid var(--ih-border); background: var(--ih-surface); color: var(--ih-text); cursor: pointer; text-decoration: none; min-block-size: 44px; }
.btn--primary { background: var(--ih-primary); border-color: var(--ih-primary); color: var(--ih-on-primary); }
.btn--primary:hover { background: var(--ih-primary-hover); border-color: var(--ih-primary-hover); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--ih-focus-ring); outline-offset: 2px; }

/* Site header with the Living Hub */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--ih-bg) 92%, transparent); backdrop-filter: blur(8px); border-block-end: 1px solid var(--ih-border); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ih-space-4); padding-block: var(--ih-space-3); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ih-text); text-decoration: none; direction: ltr; }
.brand ih-hub { --ih-hub-size: 32px; }
.brand .wm { display: block; block-size: 20px; }
.brand .wm svg { block-size: 100%; inline-size: auto; display: block; }
.site-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.site-nav a { color: var(--ih-text-muted); text-decoration: none; font-weight: 700; font-size: var(--ih-font-size-sm); padding: 8px 12px; border-radius: var(--ih-radius-sm); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ih-text); background: var(--ih-surface-alt); }
.lang-switch { display: flex; gap: 4px; }
.lang-switch button { font: inherit; font-size: var(--ih-font-size-xs); font-weight: 700; border: 1px solid var(--ih-border); background: transparent; color: var(--ih-text-muted); border-radius: var(--ih-radius-pill); padding: 4px 10px; cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: var(--ih-text); color: var(--ih-bg); border-color: var(--ih-text); }

.site-footer { border-block-start: 1px solid var(--ih-border); margin-block-start: var(--ih-space-16); padding-block: var(--ih-space-8); color: var(--ih-text-muted); font-size: var(--ih-font-size-sm); }
.proto-flag { position: fixed; inset-block-end: 12px; inset-inline-end: 12px; z-index: 60; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--ih-radius-pill); background: var(--ih-text); color: var(--ih-bg); opacity: .8; }