/* ============================================================
   RIVET — Design System v2  ·  Light / Editorial / Science×Art
   Paper-white canvas · Ink dark-purple type · Magenta accent (sparing)
   Clean, minimal, restrained type. Mono labels = science. Script = art.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&family=Square+Peg&family=Almarai:wght@400;700;800&display=swap');

:root {
  /* ---- Brand ---- */
  --ink: #0F0025;            /* dark purple — primary text */
  --ink-2: #2a1850;          /* softer heading on light */
  --magenta: #FF00D4;        /* hot accent — reserved for true emphasis */
  --magenta-soft: #ffd6f6;   /* magenta wash for fills */
  --violet: #3b06d4;
  --lilac: #b9a6e6;          /* periwinkle from the diagrams (EXPANSION/Monthly) */
  --lilac-soft: #ece7f8;
  --cyan: #18a8c0;           /* structural accent — used widely, like the diagrams */
  --cyan-bright: #4cf3fe;
  --cyan-soft: #d6f7fb;
  --amber: #d9981a;
  --orange: #ff8a47;
  --green: #00a865;

  /* ---- Color system v3: 65-26-9 + defined gradient pairs ---- */
  /* Foundation 65% = ink/black + ghost-white + silver (the neutrals above).
     Identity 26% = violet (lead) · cyan · magenta (precious, 8–13% MAX).
     Functional 9% = green (success) · orange (warmth) · orange-red (warning, rare). */
  --silver: #9ca3af;
  --ghost: #f1f2f2;
  --orange-red: #ff4d2e;     /* warnings only — very sparingly */
  /* Defined gradient pairs (use these, not random mixes) */
  --mix-cyan-violet: linear-gradient(120deg, #4cf3fe, #3b06d4);
  --mix-violet-magenta: linear-gradient(120deg, #3b06d4, #FF00D4);
  --mix-tri: linear-gradient(100deg, #4cf3fe, #3b06d4 50%, #FF00D4);
  --mix-ink-violet: linear-gradient(160deg, #160a38, #0c0630);
  --mix-success: linear-gradient(120deg, #00d982, #4cf3fe);
  --mix-warm: linear-gradient(120deg, #f5c24b, #ff8a47);

  /* ---- Surfaces (light) ---- */
  --paper: #ffffff;
  --paper-2: #f6f5f9;        /* faint lilac-tinted off-white */
  --paper-3: #efeef4;
  --grid-line: rgba(15,0,37,0.06);

  /* ---- Semantic ---- */
  --bg: var(--paper);
  --fg: #1a0838;             /* near-ink body text */
  --fg-soft: #5a5172;        /* muted purple-gray */
  --fg-mute: #8b84a0;        /* captions / labels */
  --ink-mute: #8b84a0;       /* alias used in inline SVG strokes */
  --line: rgba(15,0,37,0.11);
  --line-soft: rgba(15,0,37,0.07);
  --line-strong: rgba(15,0,37,0.20);

  /* ---- Card / glass (light, restrained) ---- */
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(15,0,37,0.04), 0 8px 24px - 16px rgba(15,0,37,0.18);
  --card-shadow-hover: 0 2px 6px rgba(15,0,37,0.06), 0 18px 40px - 20px rgba(15,0,37,0.28);
  --glass-bg: rgba(255,255,255,0.72);

  /* ---- Type scale (restrained, editorial) ---- */
  --step--2: clamp(0.69rem, 0.67rem + 0.08vw, 0.74rem);
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0:  clamp(0.97rem, 0.95rem + 0.12vw, 1.05rem);
  --step-1:  clamp(1.1rem, 1.05rem + 0.22vw, 1.25rem);
  --step-2:  clamp(1.3rem, 1.2rem + 0.45vw, 1.6rem);
  --step-3:  clamp(1.6rem, 1.42rem + 0.78vw, 2.1rem);
  --step-4:  clamp(1.95rem, 1.7rem + 1.05vw, 2.7rem);
  --step-5:  clamp(2.3rem, 1.95rem + 1.5vw, 3.3rem);

  /* ---- Radius / space ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 60px);

  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-script: 'Square Peg', cursive;
  --font-ar: 'Almarai', 'IBM Plex Sans', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--fg);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Faint engineering grid — the "science" substrate, very subtle */
.bg-field {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--paper);
  background-size: 46px 46px, 46px 46px, 100% 100%;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 75%);
  opacity: 0.7;
}

/* ---- Layout ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(48px, 6vw, 92px); position: relative; }
.section--tight { padding-block: clamp(34px, 4vw, 60px); }
.section--paper { background: var(--paper-2); border-block: 1px solid var(--line-soft); }

/* ---- Type ---- */
h1,h2,h3,h4 { line-height: 1.12; letter-spacing: -0.018em; font-weight: 600; margin: 0; color: var(--ink); text-wrap: balance; }
.display { font-size: var(--step-5); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; }
.h1 { font-size: var(--step-4); }
.h2 { font-size: var(--step-3); }
.h3 { font-size: var(--step-2); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet);
  display: inline-flex; align-items: center; gap: 0.7em;
}
.eyebrow::before { content:""; width: 22px; height: 1.5px; background: currentColor; display:inline-block; opacity:0.6; }
.eyebrow--mark::before { display:none; }
.eyebrow__mark { height: 30px; width: auto; display:block; flex:none; margin-right: 0.1em; }
.lead { font-size: var(--step-1); color: var(--fg-soft); line-height: 1.55; text-wrap: pretty; font-weight: 400; }
.muted { color: var(--fg-mute); }
.soft { color: var(--fg-soft); }
.script { font-family: var(--font-script); color: var(--magenta); font-weight: 400; font-size: 1.18em; line-height: 0.9; }
/* ---- Arabic / bilingual ---- */
.ar { font-family: var(--font-ar); font-weight: 700; direction: rtl; unicode-bidi: isolate; letter-spacing: 0; }
.bi-ar { font-family: var(--font-ar); direction: rtl; unicode-bidi: isolate; font-weight: 700; color: var(--violet); }
.eyebrow .ar { font-size: 1.05em; color: inherit; font-weight: 800; }
.lead .ar, h1 .ar, h2 .ar { color: var(--violet); }
.grad-text {
  background: linear-gradient(96deg, var(--violet) 0%, var(--magenta) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ink-text { color: var(--ink); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--step-0);
  line-height: 1; padding: 0.82em 1.35em; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); color: var(--ink); cursor: pointer;
  text-decoration: none; white-space: nowrap; background: var(--paper);
  transition: transform .16s ease, box-shadow .22s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px - 8px rgba(15,0,37,0.3); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.btn--primary:hover { background: #1c0747; box-shadow: 0 10px 26px - 10px rgba(15,0,37,0.5); }
.btn--magenta {
  background: var(--magenta); border-color: var(--magenta); color: #fff;
}
.btn--magenta:hover { box-shadow: 0 10px 26px - 8px rgba(255,0,212,0.5); }
.btn--ghost { background: transparent; border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--paper-2); border-color: var(--ink); }
.btn--lg { padding: 0.82em 1.4em; font-size: var(--step-0); }
.btn--sm { padding: 0.62em 1em; font-size: var(--step--1); }
.btn .arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* ---- Chips / tags ---- */
.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.02em;
  padding: 0.36em 0.8em; border-radius: var(--r-pill);
  background: var(--paper); border: 1px solid var(--line); color: var(--fg-soft);
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in oklab, var(--green) 16%, transparent); }
.swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ---- Cards ---- */
.grid { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.card {
  background: var(--card-bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(20px, 2.2vw, 30px);
  box-shadow: var(--card-shadow);
}
.card h3 { font-size: var(--step-1); margin-bottom: 0.45em; }
.card p { color: var(--fg-soft); margin: 0; }
.card--flat { box-shadow: none; }

/* glass kept only for floating chrome — frosted white */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
}

/* ---- Section heads ---- */
.sec-head { display:flex; flex-direction:column; gap:12px; margin-bottom: clamp(30px,3.5vw,48px); }
.sec-head.center { align-items:center; text-align:center; }
.sec-head h2 { letter-spacing:-0.02em; }

/* ---- Reveal-on-scroll (visible by default; hidden only when JS is active) ---- */
[data-reveal] { transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
html.js [data-reveal] { opacity: 0; transform: translateY(16px); }
html.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity:1 !important; transform:none !important; transition:none; }
  html { scroll-behavior: auto; }
}

/* ---- Utilities ---- */
.stack { display:flex; flex-direction:column; }
.row { display:flex; align-items:center; }
.gap-1{gap:8px}.gap-2{gap:14px}.gap-3{gap:22px}.gap-4{gap:30px}
.center { text-align:center; }
.mx-auto { margin-inline:auto; }
.maxw-sm{max-width:46ch}.maxw-md{max-width:60ch}.maxw-lg{max-width:72ch}
.hr { height:1px; background: var(--line); border:0; margin:0; }
a { color: inherit; }
img { max-width:100%; display:block; }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---- a11y + anchor offset (fixed header) ---- */
html { scroll-padding-top: 100px; }
[id] { scroll-margin-top: 100px; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: fixed; left: 12px; top: -64px; z-index: 300; background: var(--ink); color:#fff; padding: 11px 18px; border-radius: var(--r-pill); font-weight:600; text-decoration:none; box-shadow: var(--card-shadow-hover); transition: top .2s ease; }
.skip-link:focus { top: 12px; }
.mono { font-family: var(--font-mono); }
.label { font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-mute); }

/* ---- Image placeholder (light) ---- */
.ph {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(15,0,37,0.035) 0 10px, rgba(15,0,37,0.015) 10px 20px),
    var(--paper-2);
  border: 1px dashed var(--line-strong);
  display: grid; place-items: center; min-height: 160px; color: var(--fg-mute);
}
.ph span { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.04em; padding: 0.4em 0.9em; }

/* ---- Portrait (testimonial photo) ---- */
.portrait {
  border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1/1; position: relative;
  background: var(--paper-3);
}
.portrait image-slot, .portrait .imgslot { width:100%; height:100%; display:block; }