/* ============================================================================
   QENTRA TECH — reset, primitives, motion vocabulary.
   Everything directional uses LOGICAL properties so Arabic mirrors from this one
   stylesheet. The RTL exception list is at the bottom.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg); color: var(--fg);
  font-family: var(--body); font-size: var(--t-base); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; font-synthesis-weight: none;
  min-height: 100svh;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--signal); }

:where(h1, h2, h3, h4) {
  font-family: var(--display); font-weight: 800;
  letter-spacing: var(--tr-tight); line-height: var(--lh-head);
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: var(--radius-sm); }
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--s-4);
  z-index: 1000; background: var(--signal); color: var(--ink);
  padding: var(--s-3) var(--s-5);
}
.skip-link:focus { inset-block-start: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- Layout --------------------------------------------------------------- */
.shell { width: var(--shell); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.grid { display: grid; gap: var(--s-5); }

/* ---------------------------------------------------------------------------
   MOTION VOCABULARY — three jobs, and no others.
     draw     a line drawing itself = this is being measured right now
     rise     staggered arrival = here is the order to read in
     pulse    live state = a real machine answered a moment ago
   Everything is disabled by prefers-reduced-motion. Motion is a layer, never
   load-bearing: every animated element is fully legible at its end state.
   ------------------------------------------------------------------------ */
@keyframes qt-rise  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes qt-draw  { from { stroke-dashoffset: var(--len, 400); } to { stroke-dashoffset: 0; } }
@keyframes qt-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes qt-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, -18px); } }
@keyframes qt-drift2{ 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-18px, 12px); } }
@keyframes qt-tick  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes qt-spin  { to { transform: rotate(360deg); } }

.rise { animation: qt-rise var(--dur-slow) var(--ease) both; }
.d1 { animation-delay: .06s } .d2 { animation-delay: .14s } .d3 { animation-delay: .22s }
.d4 { animation-delay: .30s } .d5 { animation-delay: .38s } .d6 { animation-delay: .46s }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; opacity: 1; transform: none; }
  .orb, .ticker__row, .spin, .live-dot, .trace, [class*="anim"] { animation: none !important; }
  .trace { stroke-dashoffset: 0 !important; }
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: var(--t-sm);
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease2), color var(--dur-fast) var(--ease2),
              border-color var(--dur-fast) var(--ease2), transform var(--dur-fast) var(--ease2);
}
[lang="ar"] .btn { text-transform: none; letter-spacing: 0; font-family: var(--body); font-weight: 600; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--signal); color: var(--on-accent); }
.btn-line { border-color: var(--line-3); color: var(--fg); }
.btn-line:hover { border-color: var(--signal); color: var(--signal); }
.btn-ghost { color: var(--fg-dim); padding-inline: 0; }
.btn-ghost:hover { color: var(--signal); }

/* --- Eyebrow / mono labels ------------------------------------------------ */
.eyebrow {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--accent);
}
.eyebrow--cool { color: var(--accent-2); }
[lang="ar"] .eyebrow { text-transform: none; font-family: var(--body); font-weight: 600; }
.lede { margin-block-start: var(--s-4); font-size: var(--t-lg); color: var(--fg-muted); max-width: 58ch; }

/* --- Status chip. Colour is never the only carrier: text always rides with it. */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .28em .65em; border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .13em; text-transform: uppercase;
  background: var(--line); color: var(--fg-dim);
}
[lang="ar"] .chip { text-transform: none; letter-spacing: 0; font-family: var(--body); }
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.chip--live  { background: var(--lime-wash); color: var(--signal); }
.chip--pilot { background: var(--clay-wash); color: var(--accent); }
.chip--dev   { background: var(--aqua-wash); color: var(--accent-2); }
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--signal);
  display: inline-block; flex: none; animation: qt-blink 2.4s ease-in-out infinite;
}

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-6);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.card--hover:hover { border-color: var(--line-3); transform: translateY(-5px); background: var(--bg-high); }

/* --- States: every list ships all three ----------------------------------- */
.state { display: grid; gap: var(--s-3); justify-items: center; text-align: center;
  padding: var(--s-8) var(--s-5); color: var(--fg-dim); }

/* --- Machine text --------------------------------------------------------- */
code, kbd, pre, .mono { font-family: var(--mono); font-size: .92em; }
pre.log {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--s-3); overflow-x: auto; direction: ltr; text-align: left;
  font-size: var(--t-xs); line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   RTL exceptions. Arabic mirrors the layout, but these stay LTR because
   mirroring them changes their meaning: machine output, code, paths, versions,
   IPs, hashes, phone numbers, prices, and the wordmark.
   ------------------------------------------------------------------------ */
[dir="rtl"] :is(.mono-ltr, .version, .ip, .hash, .tel, code, pre, .wordmark, time.stamp) {
  direction: ltr; unicode-bidi: isolate;
}
[dir="rtl"] .wordmark { text-align: right; }
/* Icons that point must flip; icons of physical objects must not. */
[dir="rtl"] .icon-directional { transform: scaleX(-1); }