/* ══════════════════════════════════════════════════════════════════════
   AI ROBOTICS ACADEMY — homepage layout
   Loads after ui.css, scoped to `body.ui2` for the same reason.

   The structural idea is a BENTO MOSAIC: nothing orbits anything, every
   picture is a tile you drop a photo into, and the page reads as a set of
   rounded blocks rather than one hero illustration with chrome around it.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .hero {
  position: relative;
  overflow: hidden;                 /* the blobs hang outside on purpose */
  background: var(--bg);
  margin-top: -68px;                /* the bar floats over the top of it */
  padding: clamp(118px, 12vw, 160px) 0 clamp(28px, 4vw, 44px);
  min-height: 0;
}
/* The vertical rules the old hero drew are gone; this one is lit by two
   soft brand blobs instead. */
body.ui2 .hero::before { content: none; }
body.ui2 .hero .b1 {
  width: min(620px, 80vw); aspect-ratio: 1;
  background: rgba(74, 155, 232, .26);
  inset-block-start: -220px; inset-inline-start: -180px;
}
body.ui2 .hero .b2 {
  width: min(420px, 60vw); aspect-ratio: 1;
  background: rgba(242, 196, 155, .26);
  inset-block-end: -160px; inset-inline-end: -80px;
}
html[data-theme="dark"] body.ui2 .hero .b1 { background: rgba(74, 155, 232, .20); }
html[data-theme="dark"] body.ui2 .hero .b2 { background: rgba(242, 196, 155, .10); }

/* ── the mosaic ─────────────────────────────────────────────────────── */
body.ui2 .bento {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(84px, auto);
}
body.ui2 .t-head {
  grid-column: span 7;
  grid-row: span 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 3vw, 44px);
}
body.ui2 .t-photo { grid-column: span 5; grid-row: span 4; padding: 0; }
body.ui2 .t-photo .ph { position: absolute; inset: 0; border-radius: var(--r-xl); }
body.ui2 .t-photo .ph::before { inset: 14px; border-radius: calc(var(--r-xl) - 6px); }

/* the four facts under the fold-line */
body.ui2 .t-stat {
  grid-column: span 3;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--royal);
  color: var(--w);
  padding: 18px 22px;
}
html[data-theme="dark"] body.ui2 .t-stat { background: var(--royal-700); }
body.ui2 .t-stat .num { font-size: clamp(26px, 2.6vw, 32px); font-weight: 700; line-height: 1.05; color: var(--w); }
body.ui2 .t-stat .label,
body.ui2 .t-stat .lbl { font-size: 12.5px; color: rgba(255, 255, 255, .84); font-weight: 500; }
body.ui2 .t-badge {
  grid-column: span 3;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  background: var(--surface-soft);
  padding: 18px 22px;
}
body.ui2 .t-badge b { font-size: 14.5px; font-weight: 700; }
body.ui2 .t-badge span { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
body.ui2 .t-warm { background: var(--sand-200); }
body.ui2 .t-warm b { color: var(--sand-ink); }
body.ui2 .t-warm span { color: var(--sand-ink); opacity: .82; }
html[data-theme="dark"] body.ui2 .t-warm { background: rgba(242, 196, 155, .14); }
html[data-theme="dark"] body.ui2 .t-warm b,
html[data-theme="dark"] body.ui2 .t-warm span { color: var(--sand); }
body.ui2 .t-mark { grid-column: span 3; display: flex; align-items: center; gap: 12px; padding: 18px 22px; }
body.ui2 .t-mark img { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
body.ui2 .t-mark .brand-name b { font-size: 13px; }
body.ui2 .t-mark .brand-name span { font-size: 9px; }

/* ── headline ───────────────────────────────────────────────────────── */
body.ui2 .hero h1 {
  font-size: clamp(30px, 3.9vw, 50px);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -.02em;
  margin: 18px 0;
}
/* The emphasis: a sky stroke under the phrase. Painted as a background on
   the span itself rather than a z-index:-1 pseudo-element — inside an
   opaque tile a negative z-index sits behind the tile and vanishes. */
body.ui2 .hero h1 .mark,
body.ui2 .hero h1 .ul {
  display: inline;
  /* .mark in the old layer is a solid highlighter block set with the
     `background` SHORTHAND, so overriding background-image alone leaves its
     background-COLOR painted underneath. Clear the colour explicitly. */
  background-color: transparent;
  background-image: linear-gradient(rgba(74, 155, 232, .45), rgba(74, 155, 232, .45));
  background-repeat: no-repeat;
  background-size: 100% .17em;
  background-position: 0 97%;
  color: inherit;
  padding: 0 .04em;
  box-shadow: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
body.ui2 .hero .lead {
  font-size: clamp(15.5px, 1.4vw, 17px);
  color: var(--text-muted);
  line-height: 1.9;
  max-width: 520px;
  margin: 0 0 24px;
}
/* The company's slogan, between the age pill and the headline: brand ink,
   a short sky rule leading into it so it reads as a signature line rather
   than one more sentence of body copy. */
body.ui2 .hero .slogan {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--brand);
}
body.ui2 .hero .slogan::before {
  content: "";
  flex: 0 0 auto;
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: var(--sky);
}
body.ui2 .hero .slogan + h1 { margin-top: 10px; }
body.ui2 .hero .fineprint { margin-top: 16px; font-size: 13px; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════
   TOPIC MARQUEE — a brand device of its own, not a ring of icons
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .strip {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  padding: 18px 0;
  overflow: hidden;                 /* the track is wider than the page by design */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
body.ui2 .strip-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: ui2Slide 38s linear infinite;
}
@keyframes ui2Slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
body.ui2 .strip:hover .strip-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  body.ui2 .strip-track { animation: none; }
  body.ui2 .strip { mask-image: none; -webkit-mask-image: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   ACCREDITATION — the hero tile, the certificate in «من نحن», its viewer
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .t-accredit {
  text-decoration: none;
  color: var(--text);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  body.ui2 .t-accredit:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
}
body.ui2 .t-accredit-ic { width: 38px; height: 38px; flex-shrink: 0; color: var(--brand); }
body.ui2 .t-accredit-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.ui2 .t-accredit-txt b { font-size: 14.5px; font-weight: 700; }
body.ui2 .t-accredit-txt span { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }

body.ui2 .cert-card { margin: 0; scroll-margin-top: 110px; }
body.ui2 .cert-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: zoom-in;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
body.ui2 .cert-open img { display: block; width: 100%; height: auto; border-radius: calc(var(--r-xl) - 8px); }
@media (hover: hover) and (pointer: fine) {
  body.ui2 .cert-open:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
}
body.ui2 .cert-open:active { transform: scale(.99); }
body.ui2 .cert-open:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
body.ui2 .cert-zoom {
  position: absolute;
  inset-block-end: 20px;
  inset-inline-end: 20px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--navy);
  color: var(--w);
  font-size: 12.5px;
  font-weight: 600;
}
body.ui2 .cert-cap { display: grid; gap: 4px; margin-top: 16px; text-align: center; }
body.ui2 .cert-cap b { font-size: 16px; }
body.ui2 .cert-cap > span { color: var(--text-muted); font-size: 14px; }
body.ui2 .cert-cap a { color: var(--brand); font-weight: 600; font-size: 14px; }

body.ui2 .cert-dialog {
  /* style.css's `* { margin: 0 }` wipes the UA's `margin: auto`, which is
     what centres a modal dialog — without this it sits in a top corner. */
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(1100px, 94vw);
  max-height: 92vh;
  padding: 10px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--w);
  box-shadow: var(--shadow-lg);
}
body.ui2 .cert-dialog::backdrop { background: rgba(6, 19, 31, .72); }
body.ui2 .cert-dialog img { display: block; width: 100%; height: auto; max-height: calc(92vh - 20px); object-fit: contain; }
body.ui2 .cert-dialog form { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; }
body.ui2 .cert-x {
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: var(--navy); color: var(--w);
  font-size: 24px; line-height: 1; cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════
   QODEVA AI — the fifth step of the journey, and its own section
   ══════════════════════════════════════════════════════════════════════ */
/* The step's circle carries the company's mark on white: its navy would
   vanish on the dark theme's surface. */
body.ui2 .node.node-next .n { background: var(--w); }
body.ui2 .node.node-next .n img { width: 34px; height: 34px; object-fit: contain; }

/* The section: a band in Qodeva's colours. Its three are kept as tokens
   on the band itself rather than written into the rules, so the brand is
   one place to change. */
body.ui2 .qodeva-band {
  --q-ink:  #061633;
  --q-navy: #082860;               /* the wordmark's navy */
  --q-blue: #1a66f0;               /* its "AI" blue */
  --q-text: #c9d8f5;               /* 10.9:1 on --q-ink */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-xl);
  padding: clamp(28px, 5vw, 56px);
  color: var(--w);
  background:
    radial-gradient(circle at 8% 115%, rgba(26, 102, 240, .55), transparent 55%),
    linear-gradient(135deg, var(--q-ink) 0%, var(--q-navy) 58%, var(--q-blue) 135%);
  box-shadow: var(--shadow-lg);
}
html[data-theme="dark"] body.ui2 .qodeva-band { border: 1px solid var(--line); }
/* The mark, large and faint, on the far side — fills the band's open end
   without a box in it. */
body.ui2 .qodeva-watermark {
  position: absolute;
  z-index: -1;
  inset-inline-end: -40px;
  top: 50%;
  width: clamp(220px, 30vw, 380px);
  transform: translateY(-50%);
  filter: brightness(0) invert(1);
  opacity: .06;
  pointer-events: none;
}
body.ui2 .qodeva-inner { max-width: 640px; }
/* Qodeva's white wordmark, cut out, straight on the band. */
body.ui2 .qodeva-logo { display: inline-block; border-radius: 6px; }
body.ui2 .qodeva-logo img { display: block; width: clamp(180px, 20vw, 240px); height: auto; }
body.ui2 .qodeva-eyebrow {
  display: block;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sky-300);
}
body.ui2 .qodeva-band h2 {
  margin: 10px 0 12px;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--w);
}
body.ui2 .qodeva-band p { color: var(--q-text); line-height: 1.9; font-size: clamp(15px, 1.3vw, 16.5px); }
body.ui2 .qodeva-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 28px;
  padding: 0;
}
body.ui2 .qodeva-chips li {
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 14px;
  font-weight: 500;
}
body.ui2 .qodeva-cta {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  background: var(--w);
  color: var(--q-navy);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--t-press) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  body.ui2 .qodeva-cta:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
}
body.ui2 .qodeva-cta:active { transform: scale(.97); }
body.ui2 .qodeva-cta:focus-visible,
body.ui2 .qodeva-logo:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════════════
   THE PATH — a journey line, not an orbit
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  padding-top: 30px;
}
body.ui2 .path::before {
  content: "";
  position: absolute;
  inset-inline: 7%;
  top: 48px;
  height: 2px;
  z-index: 0;
  background-image: linear-gradient(90deg, rgba(31, 78, 156, .30) 0 10px, transparent 10px 20px);
  background-size: 20px 2px;
}
html[data-theme="dark"] body.ui2 .path::before {
  background-image: linear-gradient(90deg, rgba(160, 200, 240, .3) 0 10px, transparent 10px 20px);
}
body.ui2 .node { position: relative; z-index: 1; text-align: center; }
body.ui2 .node .n {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--brand);
  font-weight: 700;
  font-size: 19px;
  /* The ring is the page colour, so the dotted line appears to pass
     behind each node instead of through it. */
  box-shadow: 0 0 0 7px var(--surface-soft), 0 8px 22px rgba(11, 31, 58, .10);
}
body.ui2 .node:nth-child(2) .n { background: var(--sky); color: var(--navy); }
body.ui2 .node:nth-child(3) .n { background: var(--royal); color: var(--w); }
body.ui2 .node:nth-child(4) .n { background: var(--sand); color: var(--sand-ink); }
body.ui2 .node h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 6px; }
body.ui2 .node p { font-size: 14px; color: var(--text-muted); line-height: 1.8; max-width: 230px; margin-inline: auto; }

/* ══════════════════════════════════════════════════════════════════════
   WHY US — feature tiles
   ══════════════════════════════════════════════════════════════════════ */
/* Three across, so six cards read as two full rows. auto-fit gave four
   columns at desktop width and orphaned the last two. */
body.ui2 .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
body.ui2 .feature { background: var(--surface); border: 0; border-radius: var(--r-xl); padding: 26px 24px; box-shadow: var(--shadow-sm); }
@media (hover: hover) and (pointer: fine) {
  body.ui2 .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
}
body.ui2 .feature .ic {
  width: 48px; height: 48px;
  border: 0;
  border-radius: var(--r);
  background: var(--surface-soft);
  color: var(--brand);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
html[data-theme="dark"] body.ui2 .feature .ic { color: var(--sky); }
body.ui2 .feature .ic svg { width: 23px; height: 23px; }
body.ui2 .feature h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
body.ui2 .feature p { color: var(--text-muted); font-size: 14.5px; line-height: 1.8; }

/* ══════════════════════════════════════════════════════════════════════
   ABOUT — text beside a photo card
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
body.ui2 .split-media .ph { aspect-ratio: 4 / 3; border-radius: var(--r-xl); box-shadow: var(--shadow); }
body.ui2 .split-media .ph::before { inset: 14px; border-radius: calc(var(--r-xl) - 6px); }
body.ui2 .feature-list { list-style: none; margin-top: 20px; display: grid; gap: 12px; }
body.ui2 .feature-list li { position: relative; padding-inline-start: 34px; font-weight: 500; color: var(--text); }
body.ui2 .feature-list li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  display: grid; place-items: center;
}

/* ══════════════════════════════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════════════════════════════ */
/* Our branches — a card each: name, address, number. */
body.ui2 .branch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
body.ui2 .branch-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 20px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 110px;
}
body.ui2 .branch-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.ui2 .branch-ic {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--brand);
}
html[data-theme="dark"] body.ui2 .branch-ic { color: var(--sky); }
body.ui2 .branch-ic svg { width: 20px; height: 20px; }
body.ui2 .branch-top h3 { margin: 0; font-size: 18px; font-weight: 700; }
body.ui2 .branch-main { margin-inline-start: auto; font-size: 12px; padding: 4px 10px; }
body.ui2 .branch-addr { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.8; flex: 1; }
body.ui2 .branch-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  color: var(--brand);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
body.ui2 .branch-phone svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
  body.ui2 .branch-phone:hover { background: var(--brand); color: var(--text-on-brand); }
}
html[data-theme="dark"] body.ui2 .branch-phone { color: var(--sky); }
body.ui2 .branch-phone:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
/* Email, hours and WhatsApp — the same for every branch, under the cards. */
body.ui2 .contact-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 22px;
  padding: 16px 22px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
body.ui2 .contact-strip p { margin: 0; font-size: 15px; }
body.ui2 .contact-strip strong { color: var(--brand); font-weight: 600; }
html[data-theme="dark"] body.ui2 .contact-strip strong { color: var(--sky); }
body.ui2 .contact-strip .btn { margin-inline-start: auto; }
@media (max-width: 640px) {
  body.ui2 .contact-strip .btn { margin-inline-start: 0; width: 100%; justify-content: center; }
}
body.ui2 .contact-info { display: grid; gap: 14px; }
body.ui2 .contact-info p { margin: 0; font-size: 15px; }
body.ui2 .contact-info strong { color: var(--brand); font-weight: 600; }
html[data-theme="dark"] body.ui2 .contact-info strong { color: var(--sky); }
body.ui2 .contact-info a:hover { color: var(--brand); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   CLOSING — a card inside the page, not a full-bleed band
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .cta-band { background: transparent; padding: 0 0 clamp(52px, 6vw, 84px); color: var(--text); text-align: start; }
body.ui2 .cta-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(32px, 4.4vw, 56px);
  /* The gradient's LIGHTEST stop decides whether white text passes. Ending
     on --sky put white at 2.9:1 against the end of the ramp — and in RTL
     the heading sits exactly there. Ending on --royal-500 keeps the
     lightest point at 5.4:1. */
  background: linear-gradient(135deg, var(--royal-900) 0%, var(--royal) 55%, var(--royal-500) 100%);
  color: var(--w);
  box-shadow: 0 4px 14px rgba(11, 31, 58, .10), 0 30px 64px rgba(31, 78, 156, .26);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
body.ui2 .cta-card > * { position: relative; z-index: 1; }
body.ui2 .cta-card h2 {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 700;
  line-height: 1.34;
  max-width: 560px;
  color: var(--w);
  margin: 0;
}
body.ui2 .cta-card p { color: rgba(255, 255, 255, .86); margin-top: 10px; max-width: 520px; font-size: 15.5px; }
body.ui2 .cta-card .btn-row { justify-content: flex-start; }

/* ══════════════════════════════════════════════════════════════════════
   THE 3D BRAND MARK
   It lives in the hero tile. The flat logo underneath is not a
   placeholder to be deleted — it is the fallback, and logo3d.js only
   fades it out once a WebGL scene is genuinely running.
   ══════════════════════════════════════════════════════════════════════ */
body.ui2 .t-logo3d {
  padding: 0;
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-soft) 100%);
}
html[data-theme="dark"] body.ui2 .t-logo3d {
  background: linear-gradient(165deg, var(--surface) 0%, #0A1E36 100%);
}
/* The faint circuit grid sits behind the robot so it reads as a workbench
   rather than a cut-out. */
body.ui2 .t-logo3d::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--net-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--net-line) 1px, transparent 1px),
    radial-gradient(circle, var(--net-dot) 1.5px, transparent 1.6px);
  background-size: 52px 52px, 52px 52px, 52px 52px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, transparent 30%, #000 100%);
  mask-image: radial-gradient(70% 60% at 50% 50%, transparent 30%, #000 100%);
}
body.ui2 .logo3d {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  overflow: hidden;
}
body.ui2 .logo3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* The grab cursor is a desktop affordance; on touch the canvas hands the
     gesture back to the page so the hero never eats a scroll. */
  cursor: grab;
}
@media (hover: hover) and (pointer: fine) {
  body.ui2 .logo3d-canvas:active { cursor: grabbing; }
}
body.ui2 .logo3d-fallback {
  position: relative;
  width: clamp(110px, 34%, 210px);
  aspect-ratio: 1;
  object-fit: contain;
  transition: opacity var(--t-slow) var(--ease-out);
}
/* Set by logo3d.js only after the first frame is drawn. */
body.ui2 .logo3d[data-logo3d-ready] .logo3d-fallback { opacity: 0; }

/* "Drag to spin" — only where dragging is possible, and only once it is. */
body.ui2 .logo3d-hint {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  display: none;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--glass-bg-solid);
  border: 1px solid var(--glass-stroke);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out);
}
html[dir="ltr"] body.ui2 .logo3d-hint { transform: translateX(-50%); }
@supports (backdrop-filter: blur(1px)) {
  body.ui2 .logo3d-hint { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
}
@media (hover: hover) and (pointer: fine) {
  body.ui2 .logo3d[data-logo3d-ready] + .logo3d-hint { display: block; opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   "ركّب الروبوت" — THE GAME ON THE MARK
   Everything here is a layer on top of the same tile. The whole block only
   appears once logo-game.js has mounted: [data-game-start] ships `hidden`
   and the script clears it, so a device with no WebGL never shows a Play
   button that cannot do anything.
   ══════════════════════════════════════════════════════════════════════ */

/* The play affordance takes the bottom-centre spot, which is the one the eye
   lands on; "drag to spin" moves to the corner, because it is a hint and this
   is an invitation. */
body.ui2 .t-logo3d .logo3d-hint {
  inset-block-end: auto;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  transform: none;
}
html[dir="ltr"] body.ui2 .t-logo3d .logo3d-hint { transform: none; }

body.ui2 .g-start {
  position: absolute;
  inset-block-end: 16px;
  inset-inline: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
body.ui2 .g-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
  background: var(--glass-bg-solid);
  box-shadow: var(--shadow);
  color: var(--brand);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t) var(--ease-out);
}
body.ui2 .g-play:hover { background: var(--surface-soft); }
body.ui2 .g-play:active { transform: scale(.97); }
@supports (backdrop-filter: blur(1px)) {
  body.ui2 .g-play {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}
body.ui2 .g-best:empty { display: none; }
body.ui2 .g-best {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--sand-200);
  color: var(--sand-ink);
  font-size: 12.5px;
  font-weight: 700;
}

/* ── the HUD, while a round is on ─────────────────────────────────── */
body.ui2 .g-hud,
body.ui2 .g-tip { display: none; }
body.ui2 .t-logo3d.is-playing .g-hud { display: flex; }
body.ui2 .t-logo3d.is-playing .g-tip { display: flex; }
body.ui2 .t-logo3d.is-playing .g-start,
body.ui2 .t-logo3d.is-playing .logo3d-hint { display: none; }
/* The pointer is a tool during a round, not a handle. */
body.ui2 .t-logo3d.is-playing .logo3d-canvas { cursor: default; }

body.ui2 .g-hud {
  position: absolute;
  inset-block-start: 14px;
  inset-inline: 14px;
  z-index: 3;
  align-items: center;
  gap: 8px;
  pointer-events: none;           /* the canvas under it is the playfield */
}
body.ui2 .g-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
  background: var(--glass-bg-solid);
  box-shadow: var(--shadow-sm);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
body.ui2 .g-chip b { color: var(--brand); font-variant-numeric: tabular-nums; }
body.ui2 .g-chip.g-warm { background: var(--sand-200); border-color: transparent; color: var(--sand-ink); }
body.ui2 .g-chip.g-warm b { color: var(--sand-ink); }
@supports (backdrop-filter: blur(1px)) {
  body.ui2 .g-chip:not(.g-warm) {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}
body.ui2 .g-x {
  margin-inline-start: auto;
  pointer-events: auto;
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
  background: var(--glass-bg-solid);
  color: var(--text-muted);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out);
}
body.ui2 .g-x:active { transform: scale(.94); }
/* .g-x carries `margin-inline-start: auto` to push itself to the far end of
   the HUD. With two of them that auto splits the free space and they end up
   at opposite ends, so the second one gets a plain gap instead and the pair
   travels together — whichever way the page reads. */
body.ui2 .g-mute { font-size: 14px; }
body.ui2 .g-x + .g-x { margin-inline-start: 6px; }

/* ── the blast ────────────────────────────────────────────────────── */
/* The robot coming apart gets a flash and a shockwave ring. Both are one
   element over the canvas and under the HUD, so the 3D scene pays nothing
   for them — the parts flying outward is the animation, this is the bang. */
body.ui2 .g-flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, .92) 0%,
    rgba(74, 155, 232, .55) 34%,
    rgba(74, 155, 232, 0) 62%);
}
body.ui2 .g-flash::after {
  content: "";
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  border: 3px solid rgba(74, 155, 232, .7);
}
html[data-theme="dark"] body.ui2 .g-flash {
  background: radial-gradient(circle at 50% 50%,
    rgba(175, 214, 246, .85) 0%,
    rgba(74, 155, 232, .5) 34%,
    rgba(74, 155, 232, 0) 62%);
}
body.ui2 .t-logo3d.is-blast .g-flash { animation: ui2Blast 640ms var(--ease-out); }
@keyframes ui2Blast {
  0%   { opacity: 0;   transform: scale(.2); }
  16%  { opacity: .95; transform: scale(.5); }
  100% { opacity: 0;   transform: scale(1.85); }
}
/* scatter() already skips the blast under reduced motion; this is the
   belt-and-braces half, for the flash that CSS owns. */
@media (prefers-reduced-motion: reduce) {
  body.ui2 .t-logo3d.is-blast .g-flash { animation: none; }
}

body.ui2 .g-tip {
  position: absolute;
  inset-block-end: 14px;
  inset-inline: 14px;
  z-index: 3;
  justify-content: center;
  pointer-events: none;
}
body.ui2 .g-tip span {
  padding: 8px 16px;
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
  background: var(--glass-bg-solid);
  box-shadow: var(--shadow-sm);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}
@supports (backdrop-filter: blur(1px)) {
  body.ui2 .g-tip span {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}

/* ── the score card ───────────────────────────────────────────────── */
body.ui2 .g-end {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  border-radius: inherit;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  body.ui2 .g-end { background: var(--glass-bg-solid); }
}
body.ui2 .g-card {
  max-width: 340px;
  padding: 22px 24px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
body.ui2 .g-card h2 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 10px; }
body.ui2 .g-score-lbl { font-size: 12.5px; color: var(--text-muted); }
body.ui2 .g-score {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
body.ui2 .g-card .g-best { margin: 10px 0 16px; }
body.ui2 .g-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
body.ui2 .g-row .btn { padding: 11px 20px; font-size: 14px; }
body.ui2 .g-score.is-pop { animation: ui2GamePop 500ms var(--ease-out); }
@keyframes ui2GamePop {
  0% { transform: scale(.8); }
  60% { transform: scale(1.08); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.ui2 .g-score.is-pop { animation: none; }
  body.ui2 .g-play:active, body.ui2 .g-x:active { transform: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — last in the file, as the project requires
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1040px) {
  body.ui2 .bento { grid-template-columns: repeat(6, 1fr); }
  body.ui2 .t-head { grid-column: span 6; grid-row: span 3; }
  body.ui2 .t-photo { grid-column: span 6; grid-row: span 3; min-height: 280px; }
  /* The game needs room. Six parts on a ring around the robot inside a
     240px-tall tile land on top of each other and on the HUD. The selector
     is deliberately more specific than .t-photo so the narrower breakpoints
     below do not shrink it back. */
  body.ui2 .t-logo3d[data-game] { min-height: clamp(360px, 108vw, 460px); }
  /* Three chips and two buttons in one row do not fit a narrow tile at full
     size — measured, the row hung 67px off the side of a 320px screen. */
  body.ui2 .g-hud { gap: 5px; inset-inline: 10px; }
  body.ui2 .g-chip { padding: 5px 9px; font-size: 11px; gap: 4px; }
  body.ui2 .g-x { width: 27px; height: 27px; font-size: 12px; }
  body.ui2 .g-mute { font-size: 11px; }
  body.ui2 .g-x + .g-x { margin-inline-start: 3px; }
  body.ui2 .t-stat, body.ui2 .t-badge { grid-column: span 3; }
  body.ui2 .t-mark { grid-column: span 6; }
  body.ui2 .features { grid-template-columns: repeat(2, 1fr); }
  body.ui2 .path { grid-template-columns: repeat(2, 1fr); gap: 34px 18px; }
  body.ui2 .path .node:last-child:nth-child(odd) { grid-column: 1 / -1; }
  body.ui2 .path::before { display: none; }
  body.ui2 .split { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  body.ui2 .hero { padding-top: clamp(104px, 20vw, 140px); }
  body.ui2 .hero h1 { font-size: clamp(28px, 6.2vw, 40px); }
}
@media (max-width: 640px) {
  body.ui2 .bento { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  body.ui2 .t-head { grid-column: span 2; padding: 24px; }
  body.ui2 .t-photo { grid-column: span 2; min-height: 240px; }
  body.ui2 .t-stat, body.ui2 .t-badge { grid-column: span 1; }
  body.ui2 .t-mark { grid-column: span 2; }
  body.ui2 .features { grid-template-columns: 1fr; }
  body.ui2 .path { grid-template-columns: 1fr; gap: 28px; }
  body.ui2 .cta-card { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  body.ui2 .hero .btn-row .btn { flex: 1 1 100%; }
}