/* ==========================================================================
   ONEPIXEL — About page
   Sections 1-3 (hero, story, approach) are unchanged. Sections 4-7 are new (see bottom).
   ========================================================================== */

.about-page {
  --orange: #ff5a00;
  --orange-2: #ff8a3d;
  --ink: #0e1015;
  --muted: #5d6370;
  --line: #ece8e4;
  --dark-1: #101216;
  --dark-2: #171a1e;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .75, .25, 1);
  font-family: Inter, Arial, sans-serif;
  font-size: 13px;
  overflow-x: clip;
}
html { scroll-behavior: smooth; }

.about-page .reading-progress { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; }

.about-page main section { position: relative; padding: clamp(36px, 4vw, 64px) max(5vw, 24px); }
.about-page main section[id] { scroll-margin-top: 80px; }

/* ---------- shared type ---------- */
.about-page .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: #3f434c; font: 700 12px/1.2 var(--mono); letter-spacing: .16em; }
.about-page .eyebrow > i { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; background: var(--orange); border-radius: 2px; }
.about-page .eyebrow > b { color: var(--orange); }
.about-page .eyebrow.orange { color: var(--orange); }
.about-page h1, .about-page h2 { margin: 0; color: var(--ink); font-family: Inter, Arial, sans-serif; font-weight: 800; letter-spacing: -.04em; }
.about-page { font-family: Inter, Arial, sans-serif; }
.about-page h1 span, .about-page h2 span { color: var(--orange); }
.about-page main h2 { font-size: clamp(36px, 4.1vw, 64px); line-height: 1.02; }
.about-page .dark h2 { color: #fff; }
.about-page .dark h2 span { color: var(--orange); }
.about-page main p { margin: 0; }
.about-page p { font-size: 15px; }

/* ---------- buttons & links ---------- */
.about-page main .primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 22px;
  min-height: 56px; padding: 0 28px; border: 0; border-radius: 9px;
  background: var(--orange); color: #fff; font-size: 16px; font-weight: 650; letter-spacing: -.005em;
  box-shadow: 0 16px 32px -12px #ff5a00aa; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.about-page main .primary b { transition: transform .3s var(--ease); }
.about-page main .primary:hover { transform: translateY(-3px); background: #ff6a1c; box-shadow: 0 22px 38px -12px #ff5a00cc; }
.about-page main .primary:hover b { transform: translateX(5px); }
.about-page main .button.outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px; padding: 0 24px; border: 1px solid var(--orange); border-radius: 9px;
  background: transparent; color: #fff; font-size: 15px; font-weight: 600; transition: background .3s, transform .3s var(--ease), gap .3s var(--ease);
}
.about-page main .button.outline b { color: var(--orange); }
.about-page main .button.outline:hover { background: #ff5a001f; transform: translateY(-2px); gap: 20px; }
.about-page header .header-actions > a.primary { background: transparent; color: var(--ink); border: 1px solid #d9dee5; box-shadow: none; }
.about-page header .header-actions > a.primary:hover { background: #fff4ed; border-color: var(--orange); color: #bd4709; box-shadow: 0 10px 24px -14px #ff5a0099; }
.about-page .text-link { display: inline-flex; align-items: center; gap: 10px; color: #1c1f26; font-size: 16px; font-weight: 600; transition: color .25s, gap .3s var(--ease); }
.about-page .text-link b { color: var(--orange); font-size: 19px; }
.about-page .text-link:hover { gap: 16px; color: var(--orange); }

/* Match About page action buttons to the header's Start a Project button size. */
.about-page main :is(.primary, .button.outline, .ox-run, .ox-replay, .ox-prof, .ox-back a) {
  min-height: 38px;
  padding: 4px 5px 4px 12px;
  border-radius: 12px;
  gap: 12px;
  font-size: 11px;
  line-height: 1;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.about-hero {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center;
  gap: clamp(20px, 3vw, 56px); min-height: min(88vh, 780px); overflow: hidden;
  background: radial-gradient(ellipse at 78% 45%, #fff1e6 0, transparent 44%), #fff;
  border-bottom: 1px solid var(--line);
}
.about-hero-copy { position: relative; z-index: 2; max-width: 680px; }
.about-hero h1 { font-size: clamp(36px, 4.2vw, 60px); line-height: .96; letter-spacing: -.05em; font-weight: 800; }
.about-lead { max-width: 580px; margin: 26px 0 32px !important; color: var(--muted); font-size: 13px; line-height: 1.6; }
.about-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; }
.hero-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.hero-pillars > div { display: flex; align-items: center; gap: 14px; min-width: 0; padding-right: 14px; border-right: 1px solid var(--line); }
.hero-pillars > div:last-child { border-right: 0; }
.pill-icon { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border: 1.5px solid var(--orange); border-radius: 50%; color: var(--orange); font-size: 18px; transition: transform .4s var(--ease), background .3s, color .3s; }
.hero-pillars > div:hover .pill-icon { transform: scale(1.1) rotate(-6deg); background: var(--orange); color: #fff; }
.hero-pillars b, .hero-pillars small { display: block; }
.hero-pillars b { font-size: 15px; line-height: 1.3; color: var(--ink); }
.hero-pillars small { margin-top: 5px; color: #7b808c; font-size: 13px; line-height: 1.35; }

/* hero entrance */
.about-hero-copy > * { animation: rise .9s var(--ease) both; }
.about-hero-copy > :nth-child(1) { animation-delay: .05s; }
.about-hero-copy > :nth-child(2) { animation-delay: .15s; }
.about-hero-copy > :nth-child(3) { animation-delay: .27s; }
.about-hero-copy > :nth-child(4) { animation-delay: .38s; }
.about-hero-copy > :nth-child(5) { animation-delay: .5s; }
.about-hero-art { animation: art-in 1.2s var(--ease) .2s both; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes art-in { from { opacity: 0; transform: scale(.94) translateY(20px); } to { opacity: 1; transform: none; } }

/* hero art */
.about-hero-art { position: relative; width: 100%; aspect-ratio: 760 / 520; --mx: 0; --my: 0; }
.art-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.art-svg .circ path { fill: none; stroke: #ff6a2b; stroke-width: 1.3; stroke-dasharray: 4 5; animation: dash 1.6s linear infinite; opacity: .85; }
.art-svg .scene, .art-svg .float, .art-svg .screen { transition: transform .5s var(--ease); }
.art-svg .scene { transform: translate(calc(var(--mx) * -6px), calc(var(--my) * -4px)); }
.art-svg .float { transform: translate(calc(var(--mx) * 12px), calc(var(--my) * 8px)); }
.art-svg .float use { animation: bob 6s ease-in-out infinite; }
.art-svg .f2 use { animation-duration: 7.4s; animation-delay: -2s; }
.art-svg .f3 use { animation-duration: 5.4s; animation-delay: -1s; }
.art-svg .f4 use { animation-duration: 6.8s; animation-delay: -3.5s; }
.art-svg .screen { animation: none; }
.art-svg .core-glow { animation: pulse 3.2s ease-in-out infinite alternate; }
.art-svg .core-halo { animation: pulse 2.4s ease-in-out infinite alternate; }
@keyframes dash { to { stroke-dashoffset: -18; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes pulse { from { opacity: .22; } to { opacity: .62; } }

.art-label { position: absolute; z-index: 3; transform: translateY(-100%); white-space: nowrap; pointer-events: none; }
.art-label b, .art-label small { display: block; }
.art-label b { color: #1b1e25; font: 700 clamp(10px, .95vw, 13px)/1.2 var(--mono); letter-spacing: .08em; }
.art-label small { margin-top: 4px; color: #868b96; font: 500 clamp(10px, .9vw, 12px)/1.2 var(--mono); }

/* ==========================================================================
   2. STORY
   ========================================================================== */
.about-story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(32px, 5vw, 84px); background: #fff; }
.story-copy h2 { max-width: 520px; }
.story-copy > p:not(.eyebrow) { max-width: 500px; margin: 24px 0 30px; color: var(--muted); font-size: 15px; line-height: 1.7; }

.story-board { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: clamp(210px, 22vw, 340px) clamp(150px, 14vw, 220px); gap: 12px; }
.story-photo { position: relative; overflow: hidden; border-radius: 12px; background: #171a1d; box-shadow: 0 18px 40px -18px #1b1b1b55; }
.story-photo-main { grid-column: 1 / 3; }
.story-photo img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 1s var(--ease), filter .6s; }
.story-photo-main img { object-position: center 40%; }
.story-photo:hover img { transform: scale(1.06); }
.story-photo-small::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, #07080acc); pointer-events: none; }
.photo-caption { position: absolute; z-index: 2; left: 18px; bottom: 16px; color: #fff; font: 700 clamp(10px, .95vw, 13px)/1.45 var(--mono); letter-spacing: .06em; }
.story-note { position: absolute; z-index: 4; right: -12px; top: 50%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; transform: translateY(-6%) rotate(6deg); color: #1a1c21; font: 600 clamp(20px, 1.9vw, 28px)/1.05 Caveat, "Segoe Script", cursive; animation: note-bob 5s ease-in-out infinite; }
.story-note svg { margin: 0 0 2px 22px; }
@keyframes note-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* ==========================================================================
   3. APPROACH
   ========================================================================== */
.approach {
  display: grid; grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); align-items: center; gap: clamp(32px, 4.5vw, 72px);
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: radial-gradient(ellipse at 88% 76%, #ff5a0014, transparent 38%), radial-gradient(#ffffff0d .8px, transparent .8px), linear-gradient(115deg, var(--dark-1), var(--dark-2));
  background-size: auto, 11px 11px, auto;
}
.approach::after { content: ""; position: absolute; z-index: -1; right: 0; bottom: 0; width: 46%; height: 42%; opacity: .22; background-image: radial-gradient(#ff642b .9px, transparent .9px); background-size: 11px 11px; -webkit-mask-image: linear-gradient(0deg, #000, transparent); mask-image: linear-gradient(0deg, #000, transparent); }
.approach-intro > p:not(.eyebrow) { max-width: 420px; margin: 22px 0 28px; color: #bcc0c7; font-size: 13px; line-height: 1.7; }
.approach-flow { min-width: 0; }
.approach-flow-panel { min-width: 0; padding: clamp(16px, 2vw, 26px); border: 1px solid #ffffff20; border-radius: 12px; background-color: #11161c; background-image: radial-gradient(#9baabc35 1px, transparent 1px); background-size: 18px 18px; box-shadow: 0 24px 70px #0003, inset 0 1px #ffffff0b; }
.approach-flow-label, .approach-flow-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; color: #8994a2; font: 9px/1.5 var(--mono); letter-spacing: .08em; }
.approach-flow-label span:first-child { color: #ff9b68; }
.flow-cards { position: relative; display: flex; align-items: stretch; padding: clamp(28px, 4vw, 44px) 0; }
.flow-cards article {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 0; min-height: 190px; padding: 16px 12px 14px; border: 1px solid #3a434d; border-radius: 9px;
  background: linear-gradient(145deg, #202831, #13181e); box-shadow: 0 6px 16px #0002; transition: transform .4s var(--ease), border-color .3s, box-shadow .4s var(--ease), background .3s;
}
.flow-cards article:hover { transform: translateY(-7px); border-color: #ff713e; background: #242b32; box-shadow: 0 18px 32px -18px #ff5a0066; }
.flow-cards article.is-current { border-color: #ff8a49; box-shadow: 0 0 0 1px #ff5a0030, 0 10px 28px #ff5a001b; }
.flow-cards article > small { display: block; margin-bottom: 13px; color: #ff9a65; font: 600 9px/1.4 var(--mono); letter-spacing: .06em; }
.flow-icon { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 0 13px; border: 1px solid #46515e; border-radius: 9px; background: #252e38; color: #bcc8d5; font: 600 16px var(--mono); transition: transform .4s var(--ease), color .3s, background .3s, border-color .3s; }
.flow-cards article.is-current .flow-icon { border-color: #ff8a49; background: #39271f; color: #ff8950; }
.flow-cards article:hover .flow-icon { transform: translateY(-3px); }
.flow-icon-engineer { font-size: 11px; }
.flow-icon-evolve { font-size: 22px; }
.flow-cards h3 { margin: 0 0 8px; color: #fff; font-size: clamp(17px, 1.45vw, 22px); font-weight: 700; letter-spacing: -.01em; }
.flow-cards p { color: #b2b6bc; font-size: clamp(13px, 1vw, 15px); line-height: 1.55; }
.flow-cards article > em { display: block; margin-top: 16px; padding-top: 10px; border-top: 1px solid #ffffff12; color: #778595; font: 8px/1.5 var(--mono); font-style: normal; letter-spacing: .04em; }
.approach-link { position: relative; z-index: 0; flex: 0 0 clamp(18px, 2.3vw, 34px); align-self: center; height: 1px; background: #485361; }
.approach-link i { position: absolute; top: -2px; left: 0; width: 7px; height: 5px; border-radius: 2px; background: #ff873f; box-shadow: 0 0 9px #ff5a0080; animation: approach-packet 1.8s linear infinite; }
.approach-link:nth-of-type(2) i { animation-delay: .6s; }
.approach-link:nth-of-type(4) i { animation-delay: 1.2s; }
.approach-flow-footer { padding-top: 12px; border-top: 1px solid #ffffff16; font-size: 8px; }
.approach-flow-footer span:first-child { color: #a9b2be; }
.approach-flow-footer i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #68d391; box-shadow: 0 0 8px #68d391; animation: approach-status 1.5s ease-in-out infinite alternate; }
@keyframes approach-packet { 0% { transform: translateX(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateX(calc(100% + 14px)); opacity: 0; } }
@keyframes approach-status { to { opacity: .45; } }
@keyframes approach-packet-vertical { 0% { transform: translateY(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } }

/* ==========================================================================
   Scroll reveal + shared header highlight
   ========================================================================== */
.about-page [data-reveal] { transition: opacity .8s var(--ease), translate .8s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.about-page [data-reveal]:not(.is-visible) { opacity: 0; translate: 0 28px; }
.about-page [data-reveal].is-visible { opacity: 1; translate: 0 0; }
.about-page header nav a.active { color: var(--orange); }

/* ==========================================================================
   Responsive (sections 1-3)
   ========================================================================== */
@media (max-width: 1100px) {
  .flow-cards { gap: 8px; }
  .flow-cards article { padding-right: 9px; padding-left: 9px; }
  .flow-cards article > small { font-size: 8px; }
  .flow-cards article > em { font-size: 7px; }
  .approach-link { display: block; flex-basis: 12px; }
}
@media (max-width: 980px) {
  .about-hero, .about-story, .approach { grid-template-columns: 1fr; }
  .about-hero { min-height: 0; gap: 28px; padding-top: 40px !important; }
  .about-hero-copy { max-width: none; }
  .story-board { margin-right: 14px; }
}
@media (max-width: 720px) {
  /* Match index.html mobile body copy while preserving the terminal typography. */
  .about-page main p:not(.eyebrow):not(.ox-cmd):not(.ox-stackline) {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  .about-page main h2 { font-size: clamp(28px, 8vw, 36px); line-height: 1.08; }
  .hero-pillars { grid-template-columns: 1fr; gap: 14px; }
  .hero-pillars > div { border-right: 0; }
  .story-board { grid-template-rows: clamp(180px, 52vw, 260px) clamp(130px, 38vw, 190px); }
  .story-note { right: 0; }
}
@media (max-width: 720px) {
  .approach-flow-panel { padding: 16px 13px; }
  .approach-flow-label { font-size: 8px; }
  .approach-flow-label span:last-child { display: none; }
  .flow-cards { display: flex; flex-direction: column; gap: 0; padding: 22px 0; }
  .about-page .flow-cards > article { display: grid; flex: 0 0 auto; width: 100%; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 14px; row-gap: 5px; min-height: 112px; padding: 17px; }
  .flow-cards article > small { grid-column: 2; grid-row: 1; align-self: center; margin: 0 0 2px; }
  .flow-icon { grid-column: 1; grid-row: 1 / 5; align-self: center; width: 42px; height: 42px; margin: 0; }
  .flow-cards h3 { grid-column: 2; grid-row: 2; margin: 0 0 2px; font-size: 19px; }
  .flow-cards p { grid-column: 2; grid-row: 3; margin: 0; font-size: 14px; line-height: 1.55; }
  .flow-cards article > em { grid-column: 2; grid-row: 4; margin-top: 6px; padding-top: 6px; }
  .approach-link { display: block; flex: 0 0 22px; align-self: flex-start; width: 1px; height: 22px; margin-left: 32px; }
  .approach-link i { top: 0; left: -2px; width: 5px; height: 7px; animation-name: approach-packet-vertical; }
  .approach-flow-footer { font-size: 7px; }
  .art-label small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .about-page *, .about-page *::before, .about-page *::after { animation: none !important; transition-duration: .01ms !important; }
  .about-page [data-reveal], .about-page [data-reveal]:not(.is-visible) { opacity: 1; translate: none; }
}


/* ==========================================================================
   Sections 4-8 — rebuilt: one shared grid, aligned headings, interactive demos
   ========================================================================== */
.ox-spec, .ox-team, .ox-pipe, .ox-stack, .ox-cta {
  --o: #ff5a00; --m: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  position: relative; overflow: hidden;
}
.ox-spec *, .ox-team *, .ox-pipe *, .ox-stack *, .ox-cta *, .ox-spec *::before, .ox-team *::before, .ox-pipe *::before, .ox-stack *::before, .ox-cta *::before, .ox-spec *::after, .ox-team *::after, .ox-pipe *::after, .ox-stack *::after, .ox-cta *::after { box-sizing: border-box; }
.ox-team a, .ox-stack a, .ox-cta a, .ox-pipe a, .ox-nav a { text-decoration: none; }
.ox-spec h2, .ox-team h2, .ox-pipe h2, .ox-stack h2, .ox-cta h2 { margin: 0; }
.ox-team h2, .ox-stack h2, .ox-cta h2 { color: #fff; }
.about-page .ox-cta h2 span { color: #0c0f13; }
.ox-team > *:not(canvas), .ox-cta > *:not(canvas) { position: relative; z-index: 1; }
.ox-spec button:focus-visible, .ox-team button:focus-visible, .ox-pipe button:focus-visible, .ox-cta button:focus-visible,
.ox-cta a:focus-visible, .ox-team a:focus-visible, .ox-stack a:focus-visible, .ox-badge:focus-visible { outline: 2px solid var(--o); outline-offset: 3px; }

/* ---------- shared heading block ---------- */
.ox-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: clamp(20px, 4vw, 64px); margin-bottom: clamp(28px, 3.5vw, 48px); }
.ox-lede { max-width: 460px; justify-self: end; font-size: 13px; line-height: 1.7; }
.ox-lede-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; text-align: right; }
.ox-lede-wrap .ox-lede { justify-self: auto; }
.ox-spec .ox-lede, .ox-pipe .ox-lede { color: var(--muted); }
.ox-team .ox-lede, .ox-stack .ox-lede { color: #aab4be; }

/* mono section label with trailing rule */
.ox-label { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; color: #bd4709; font: 700 12px/1.2 var(--m); letter-spacing: .14em; text-transform: uppercase; }
.ox-label span { color: #8a909b; font-weight: 500; letter-spacing: .06em; text-transform: none; }
.ox-label::after { content: ""; order: 3; flex: 1; height: 1px; background: currentColor; opacity: .18; }
.ox-label span { order: 2; }
.ox-label-dark { color: #ff9b68; }
.ox-label-dark span { color: #7d8996; }
.about-page main .ox-label { margin: 0 0 18px; }
.about-page main .ox-label-gap { margin-top: clamp(40px, 5vw, 68px); }
.about-page main .ox-card .ox-label { margin: 0; }

/* ---------- shared "window" ---------- */
.ox-win { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #2a3037; border-radius: 12px; background: #0f1318; box-shadow: 0 30px 70px -34px #000b; }
.ox-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #ffffff14; background: #ffffff05; color: #8d99a5; font: 12px var(--m); }
.ox-bar .ox-ttl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ox-bar b { color: #ff9b68; font-weight: 600; }
.ox-dots { display: inline-flex; gap: 5px; }
.ox-dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #ff8650; }
.ox-dots i:nth-child(2) { background: #e1b15c; } .ox-dots i:nth-child(3) { background: #73bd83; }
.ox-pp, .ox-replay { padding: 6px 12px; border: 1px solid #ff5a0066; border-radius: 6px; background: transparent; color: #ff9b68; font: 11px var(--m); cursor: pointer; transition: background .2s; }
.ox-pp:hover, .ox-replay:hover { background: #ff5a0022; }
.ox-live { display: inline-flex; align-items: center; gap: 7px; color: #75c994; font: 10px var(--m); letter-spacing: .12em; }
.ox-live i, .ox-status i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #75c994; box-shadow: 0 0 8px #75c994; animation: ox-blink 1.6s steps(2, start) infinite; }
.ox-status { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 10px 16px; border-top: 1px solid #ffffff12; color: #8d99a5; font: 10px/1.5 var(--m); letter-spacing: .1em; }
.ox-status span:first-child { color: #a9b2be; }
.ox-status i { margin-right: 8px; }
.ox-win .ln { display: block; }
@keyframes ox-line { from { opacity: 0; translate: -8px 0; } }
@keyframes ox-blink { to { opacity: .2; } }

/* ==========================================================================
   4. PRINCIPLES
   ========================================================================== */
.ox-spec { background: #f3f5f8; background-image: linear-gradient(#0e101508 1px, transparent 1px), linear-gradient(90deg, #0e101508 1px, transparent 1px); background-size: 28px 28px; }
.ox-pipe .ox-head h2, .ox-stack .ox-head h2 { position: relative; width: fit-content; letter-spacing: -.055em; font-family: Inter, Arial, sans-serif; font-weight: 800; }
.ox-pipe .ox-head h2::after, .ox-stack .ox-head h2::after { content: ""; display: block; width: 54%; height: 5px; margin-top: 13px; border-radius: 99px; background: linear-gradient(90deg, var(--orange), #ffb27d); }
.ox-pipe .ox-head h2 span, .ox-stack .ox-head h2 span { text-shadow: 0 8px 28px #ff5a0026; }
.ox-pipe .ox-head h2::after { width: 76%; height: 6px; background: linear-gradient(90deg, var(--orange), #ffb27d 72%, transparent); }
.ox-stack .ox-head h2::after { width: 62%; height: 6px; background: linear-gradient(90deg, var(--orange), #ffb27d 72%, transparent); }
.ox-spec h2 { color: var(--ink); }
.ox-runner { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 20px; align-items: stretch; }
.ox-picker { display: grid; grid-template-rows: repeat(6, minmax(62px, 1fr)); gap: 10px; align-content: stretch; align-self: stretch; min-height: 100%; }
.ox-picker button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 62px; padding: 8px 14px; border: 1px solid #dfe3e9; border-radius: 20px; background: #fff; text-align: left; cursor: pointer; transition: transform .35s var(--ease), border-color .25s, box-shadow .35s var(--ease), background .25s; }
.ox-picker button:hover { transform: translateX(3px); }
.ox-picker button:hover { border-color: #ffb48a; }
.ox-picker b { color: var(--o); font: 700 14px var(--m); }
.ox-picker strong { display: block; color: var(--ink); font-size: 16px; font-weight: 750; letter-spacing: -.02em; }
.ox-picker small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.ox-picker i { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--o); color: #fff; font-size: 11px; opacity: 0; scale: .5; transition: .3s var(--ease); }
.ox-picker button.is-on { border-color: var(--o); background: #fff8f3; box-shadow: 0 0 0 1px var(--o), 0 20px 40px -24px #ff5a00bb; }
.ox-picker button.is-on i { opacity: 1; scale: 1; }
.ox-editor { min-height: 360px; box-shadow: 0 30px 70px -34px #0e101599; }
.ox-panels { flex: 1; display: flex; }
.ox-panel { display: none; flex: 1; flex-direction: column; min-width: 0; }
.ox-panel.is-on { display: flex; }
.ox-panel[hidden] { display: none !important; }
.ox-code { flex: 1; margin: 0; padding: 26px clamp(16px, 2.5vw, 34px) 18px; overflow-x: auto; color: #d7dde3; font: clamp(12.5px, 1.05vw, 15px)/1.95 var(--m); counter-reset: ln; }
.ox-code .ln::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 2em; margin-right: 1.3em; color: #46515c; text-align: right; user-select: none; }
.ox-code i { font-style: normal; } .ox-code .k { color: #ff7a3a; } .ox-code .f { color: #ffc27a; } .ox-code .c { color: #6f7b86; } .ox-code .s { color: #8fd19e; }
.ox-out { padding: 16px clamp(16px, 2.5vw, 34px) 20px; border-top: 1px dashed #ffffff22; background: #0a0d11; color: #aab4be; font: clamp(12px, 1vw, 14px)/1.9 var(--m); }
.ox-out b { margin-right: 8px; color: #75c994; }
.ox-out .ok { color: #75c994; }
.ox-panel.is-on .ln { animation: none; }
.ox-panel.is-typing .ox-out .ok::after { content: "▍"; margin-left: 4px; color: var(--o); animation: ox-blink .8s steps(2, start) infinite; }
.ox-foot { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--o); color: #fff; font: 12px var(--m); }
.ox-foot i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #fff; animation: ox-blink 1.4s steps(2, start) infinite; }
.ox-prog { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #00000030; }
.ox-prog span { display: block; height: 100%; background: #fff; transform-origin: left; animation: ox-prog 6s linear both; }
.is-paused .ox-prog span { animation-play-state: paused; }
@keyframes ox-prog { from { transform: scaleX(0); } }

/* ==========================================================================
   5. TEAM
   ========================================================================== */
.ox-team { color: #fff; background: radial-gradient(#ffffff0d .8px, transparent .8px), linear-gradient(115deg, #0c0f13, #12151a); background-size: 14px 14px, auto; }
.ox-team .team-scroll-reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.ox-team .team-scroll-reveal.is-team-visible { opacity: 1; transform: none; }
.ox-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.ox-team::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(520px circle at var(--px, 50%) var(--py, 20%), #ff5a001f, transparent 60%); }
.ox-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; border: 1px solid #ffffff1a; border-radius: 12px; background: #0f1318; }
.ox-stats > div { display: flex; align-items: center; gap: 16px; padding: 20px clamp(14px, 2vw, 28px); border-right: 1px solid #ffffff12; }
.ox-stats > div:last-child { border-right: 0; }
.ox-stats b { min-width: 1.1ch; color: #fff; font: 800 clamp(34px, 4vw, 56px)/1 Inter, sans-serif; letter-spacing: -.04em; }
.ox-stats span { color: #8d99a5; font: 12px/1.5 var(--m); }

.ox-scan { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px; align-items: stretch; }
.ox-hud { display: flex; gap: 14px; padding: 18px; border: 1px solid #ffffff1a; border-radius: 12px; background: #0f1318; }
.ox-ruler { flex: 0 0 12px; background: repeating-linear-gradient(180deg, #ff9b6866 0 1px, transparent 1px 10px), repeating-linear-gradient(180deg, #ff9b68 0 1px, transparent 1px 50px); background-size: 6px 100%, 12px 100%; background-repeat: no-repeat; }
.ox-hud-frame { position: relative; flex: 1; min-height: 430px; overflow: hidden; border-radius: 6px; background: #0a0d11; }
.ox-hud-frame::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(0deg, #00000026 0 1px, transparent 1px 3px), linear-gradient(180deg, #ff5a0014, transparent 40%, #ff5a001f); }
.ox-hud-frame .c { position: absolute; z-index: 4; width: 20px; height: 20px; border: 2px solid var(--o); }
.ox-hud-frame .tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; } .ox-hud-frame .tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.ox-hud-frame .bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; } .ox-hud-frame .br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.ox-hud-photo { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(145deg, #ff5a00, #5a1d00); color: #ffffffcc; font: 700 clamp(48px, 6vw, 84px) var(--m); }
.ox-hud-photo em { font-style: normal; }
.ox-hud-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.is-scan .ox-hud-photo { animation: ox-focus 1.1s ease-out; }
@keyframes ox-focus { from { filter: blur(9px) brightness(.45); } to { filter: none; } }
.ox-sweep { position: absolute; z-index: 2; left: 0; right: 0; top: -25%; height: 22%; border-bottom: 1px solid #ffb48a; background: linear-gradient(transparent, #ff5a0066); opacity: 0; pointer-events: none; }
.is-scan .ox-sweep { animation: ox-sweep 1.2s ease-out; }
@keyframes ox-sweep { 0% { top: -25%; opacity: 1; } 90% { opacity: 1; } 100% { top: 105%; opacity: 0; } }
.ox-hud-tag { position: absolute; z-index: 5; left: 14px; padding: 4px 9px; border-radius: 4px; background: #0c0f13cc; color: #ffb48a; font: 10px var(--m); letter-spacing: .12em; }
.ox-hud-tag.top { top: 36px; } .ox-hud-tag.bot { bottom: 36px; display: inline-flex; align-items: center; gap: 7px; color: #75c994; }
.ox-hud-tag i { width: 6px; height: 6px; border-radius: 50%; background: #75c994; box-shadow: 0 0 8px #75c994; }

.ox-readout { box-shadow: none; border-color: #ffffff1a; }
.ox-ro-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(20px, 2.4vw, 32px); }
.ox-ro-body h3 { margin: 0; color: #fff; font-size: clamp(22px, 2.3vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.about-page main .ox-role { color: #ff9b68; font: 13px var(--m); }
.about-page main .ox-hbio { max-width: 520px; color: #d6dbe0; font-size: 13px; line-height: 1.65; }
.ox-hbio.in { animation: ox-line .5s ease both; }
.ox-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ox-tags li { padding: 5px 12px; border: 1px solid #ffc2a455; border-radius: 999px; background: #ff5a0014; color: #ffb48a; font: 11px var(--m); }
.ox-team-note { width: 100%; max-width: 560px; margin-top: 4px; padding: 14px 16px; border-left: 2px solid var(--o); background: linear-gradient(90deg, #ff5a0012, transparent); }
.ox-team-note > span { color: #ff9b68; font: 10px var(--m); letter-spacing: .14em; }
.about-page main .ox-team-note p { margin: 7px 0 0; color: #aab4be; font-size: 12px; line-height: 1.65; }
.ox-prof { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding: 11px 18px; border: 1px solid var(--o); border-radius: 8px; color: #fff; font-size: 14px; font-weight: 600; transition: background .2s; }
.ox-prof b { color: var(--o); font-weight: 400; }
.ox-prof:hover { background: #ff5a0022; }
.ox-roster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid #ffffff14; }
.ox-roster li { border-right: 1px solid #ffffff10; } .ox-roster li:last-child { border-right: 0; }
.ox-roster button { display: flex; flex-direction: row; align-items: center; gap: 7px; width: 100%; min-width: 0; height: 100%; padding: 10px 8px; border: 0; border-left: 2px solid transparent; border-radius: 0 !important; background: none; color: #aab4be; text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.ox-roster b { flex: 0 0 auto; padding: 3px 4px; border-radius: 4px; background: var(--o); color: #fff; font: 700 9px var(--m); }
.ox-roster span { min-width: 0; overflow: hidden; font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.ox-roster button:hover { color: #fff; }
.ox-roster button.is-on { border-left-color: var(--o); background: #ff5a0014; color: #fff; }
.about-page main .ox-strip { margin: 20px 0 0; }
.ox-strip { display: flex; align-items: center; gap: 10px; color: #8d99a5; font: 11px var(--m); letter-spacing: .1em; }
.ox-strip i { width: 7px; height: 7px; border-radius: 50%; background: #75c994; box-shadow: 0 0 8px #75c994; }
.ox-strip span { margin-left: 8px; color: #ff9b68; }

/* access badges */
.ox-badgewrap { margin-top: clamp(40px, 5vw, 72px); }
.ox-badges { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; perspective: 1100px; }
.ox-badge { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; aspect-ratio: 3 / 4.3; outline: 0; cursor: pointer; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out; }
.ox-badge:not(.is-tilt) { transition-duration: .6s; }
.ox-bin { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s var(--ease); }
.ox-badge.is-flip .ox-bin { transform: rotateY(180deg); }
.ox-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px 14px 12px; overflow: hidden; border: 1px solid #343c44; border-radius: 14px; background: linear-gradient(160deg, #1b2128, #0f1318); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ox-badge:focus-visible .ox-face, .ox-badge:hover .ox-face { border-color: var(--o); }
.ox-slot { align-self: center; flex: 0 0 8px; width: 46px; height: 8px; margin-bottom: 12px; border-radius: 6px; background: #05070a; box-shadow: inset 0 1px 2px #000, 0 1px #ffffff1a; }
.ox-bph { position: relative; display: grid; place-items: center; flex: 0 0 146px; min-height: 0; overflow: hidden; border-radius: 9px; background: linear-gradient(145deg, #ff5a00, #6c2200); color: #fff; font: 700 32px var(--m); }
.ox-bph em { font-style: normal; }
.ox-bph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.ox-face h4 { min-height: 2.5em; margin: 12px 0 2px; color: #fff; font-size: 14px; line-height: 1.25; }
.about-page main .ox-br { color: #ff9b68; font: 10.5px/1.4 var(--m); }
.ox-code128 { height: 20px; margin: 10px 0 6px; background: repeating-linear-gradient(90deg, #d7dde3 0 2px, transparent 2px 4px, #d7dde3 4px 5px, transparent 5px 8px, #d7dde3 8px 11px, transparent 11px 13px); opacity: .85; }
.ox-face small { color: #6f7b86; font: 8.5px var(--m); letter-spacing: .06em; }
.ox-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(220px circle at var(--mx) var(--my), #ffffff2e, transparent 60%), linear-gradient(115deg, transparent 30%, #ff5a0018 50%, transparent 70%); mix-blend-mode: screen; transition: opacity .3s; }
.ox-badge.is-tilt .ox-shine { opacity: 1; }
.ox-back { justify-content: center; gap: 14px; transform: rotateY(180deg); background: linear-gradient(160deg, #20170f, #0f1318); }
.ox-back small { color: #ff9b68; font-size: 10px; }
.about-page main .ox-back p { color: #d6dbe0; font-size: 13px; line-height: 1.55; }
.ox-back a { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border: 1px solid var(--o); border-radius: 8px; color: #fff; font-size: 12.5px; font-weight: 600; }
.ox-back a b { color: var(--o); font-weight: 400; }
.ox-back a:hover { background: #ff5a0022; }

/* ==========================================================================
   6. JOURNEY (timeline + pipeline)
   ========================================================================== */
.ox-pipe { background: #fff; }
.ox-pipe h2 { color: var(--ink); }
.ox-pipe .ox-replay { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 11px 16px; border: 1px solid #ffc2a4; border-radius: 999px; background: #fff8f3; color: #bd4709; font: 600 13px Inter, Arial, sans-serif; box-shadow: 0 8px 20px -14px #ff5a00aa; }
.ox-pipe .ox-replay:hover { background: #fff0e6; border-color: var(--orange); transform: translateY(-2px); }

.ox-tl { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 34px 0 0; list-style: none; }
.ox-tl::before, .ox-tl::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; }
.ox-tl::before { background: #e5e9ee; }
.ox-tl::after { background: var(--o); transform-origin: left; transform: scaleX(0); transition: transform 2.2s linear; }
.ox-time.is-run .ox-tl::after { transform: scaleX(1); }
.ox-tl li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; border: 1px solid #e5e9ee; border-radius: 12px; background: #fff; transition: border-color .3s, box-shadow .4s var(--ease), translate .4s var(--ease); }
.ox-tl li:hover { border-color: #ffc2a4; box-shadow: 0 20px 40px -26px #ff5a0066; translate: 0 -4px; }
.ox-tl li.is-next { border-style: dashed; background: #fff8f3; }
.ox-tl li::before { content: ""; position: absolute; left: 22px; top: -34px; width: 16px; height: 16px; border: 2px solid var(--o); border-radius: 50%; background: #fff; transition: background .3s; }
.ox-time.is-run li::before { background: var(--o); transition-delay: calc(var(--k, 0) * .7s); }
.ox-tl li:nth-child(2) { --k: 1; } .ox-tl li:nth-child(3) { --k: 2; } .ox-tl li:nth-child(4) { --k: 3; }
.ox-tl time { color: var(--o); font: 700 clamp(24px, 2.4vw, 34px)/1 var(--m); }
.ox-tl h4 { margin: 0; color: var(--ink); font-size: clamp(16px, 1.3vw, 19px); }
.about-page main .ox-tl p { color: var(--muted); font-size: 13px; line-height: 1.6; }

.ox-track { position: relative; }
.ox-rail { position: absolute; left: 12.5%; right: 12.5%; top: 28px; height: 2px; background: #e5e9ee; }
.ox-rail span { display: block; height: 100%; width: 0; background: var(--o); }
.ox-rail u { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--o); box-shadow: 0 0 12px var(--o); opacity: 0; }
.ox-track.is-run .ox-rail span { animation: ox-rail 2.4s linear forwards; }
.ox-track.is-run .ox-rail u { animation: ox-pkt 2.4s linear forwards; }
@keyframes ox-rail { to { width: 100%; } }
@keyframes ox-pkt { 0% { left: 0; opacity: 1; } 95% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.ox-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ox-stages li { display: flex; flex-direction: column; align-items: center; }
.ox-stages li > i { position: relative; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 18px; border: 2px solid #d5dbe2; border-radius: 50%; background: #fff; color: #9aa4af; font-size: 22px; }
.ox-stages li > i { width: 48px; height: 48px; margin-bottom: 14px; border: 1px solid #ffd2bd; background: linear-gradient(145deg, #fff 10%, #fff3eb); color: #e34f08; font-size: 18px; box-shadow: 0 8px 20px -14px #ff5a00aa; transition: transform .3s ease, box-shadow .3s ease, color .3s ease, background .3s ease; }
.ox-stages li:nth-child(2) > i { color: #b44711; }
.ox-stages li:nth-child(3) > i { color: #24866c; border-color: #b9e4d7; background: linear-gradient(145deg, #fff 10%, #edfaf5); }
.ox-stages li:nth-child(4) > i { color: #7952b3; border-color: #d8c8f0; background: linear-gradient(145deg, #fff 10%, #f5f0fc); }
.ox-stages li:hover > i { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 24px -14px #ff5a0088; }
.ox-stages li > i.is-complete { border-color: var(--o); color: #fff; background: var(--o); box-shadow: 0 0 0 5px #ff5a0018, 0 8px 20px -10px #ff5a00aa; transform: scale(1.02); }
.ox-stage-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 22px 18px 24px; border: 1px solid #e5e9ee; border-radius: 12px; background: #fff; text-align: center; transition: border-color .3s, box-shadow .4s var(--ease), translate .4s var(--ease); }
.ox-stage-card:hover { border-color: #ffc2a4; box-shadow: 0 20px 40px -26px #ff5a0066; translate: 0 -4px; }
.ox-stage-card small { color: #8a909b; font: 600 10px var(--m); letter-spacing: .12em; }
.ox-stage-card h3 { margin: 0; color: var(--ink); font-size: clamp(18px, 1.5vw, 22px); }
.about-page main .ox-stage-card p { max-width: 250px; color: #6d717c; font-size: 13px; line-height: 1.6; }
.ox-stage-card code { margin-top: auto; padding: 4px 12px; border: 1px solid #ffc2a4; border-radius: 999px; background: #fff5ee; color: #bd4709; font: 12px var(--m); }

.ox-log { margin-top: 28px; }
.ox-log pre { margin: 0; min-height: 10.5em; padding: 18px 22px; color: #bac3cc; font: 13px/1.95 var(--m); overflow-x: auto; }
.ox-log pre b { margin-right: 8px; color: #75c994; }
.ox-log .ln { opacity: 1; }
.ox-log .ok { color: #75c994; }
.ox-track.is-run ~ .ox-log .ln { animation: ox-line .45s ease both; animation-delay: calc(var(--i) * .33s); opacity: 1; }

/* ==========================================================================
   7. TOOLS & ECOSYSTEM
   ========================================================================== */
.ox-stack, .about-page main #stack { color: #fff; background: radial-gradient(#ffffff0d .8px, transparent .8px), linear-gradient(115deg, #0c0f13, #12151a); background-size: 14px 14px, auto; }
.about-page main .ox-stack .ox-head h2 { color: #fff; }
.about-page main .ox-stack .ox-head h2 span { color: #e6530a; text-shadow: none; }
.about-page main .ox-stack .ox-lede { color: #59616b; }
.ox-stack .ox-head .eyebrow { color: #bd4709; }
.ox-layers { display: grid; gap: 14px; }
.ox-layer { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: center; gap: 18px; padding: 16px 0 16px 20px; border: 1px solid #ffffff14; border-radius: 12px; background: #0f1318; overflow: hidden; }
.ox-layer-h { display: flex; align-items: center; gap: 12px; color: #ff9b68; font: 700 12px var(--m); letter-spacing: .1em; }
.ox-layer-h b { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #ff5a0077; border-radius: 8px; background: #ff5a0014; }
.ox-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ox-mq { display: flex; gap: 12px; width: max-content; animation: ox-scroll 38s linear infinite; }
.ox-row.rev .ox-mq { animation-direction: reverse; animation-duration: 46s; }
.ox-layer:hover .ox-mq { animation-play-state: paused; }
.ox-mq span { padding: 10px 18px; border: 1px solid #2f373f; border-radius: 6px; background: #14191f; color: #cfd4d9; font: 13px var(--m); white-space: nowrap; transition: border-color .2s, color .2s; }
.ox-mq span:hover { border-color: var(--o); color: #fff; }
@keyframes ox-scroll { to { transform: translateX(-50%); } }
@media (max-width: 720px) {
  .ox-row { max-width: 100%; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ox-row::-webkit-scrollbar { display: none; }
  .ox-layer:hover .ox-mq { animation-play-state: paused; }
}

.ox-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 3.5vw, 48px); }
.ox-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid #2f373f; border-radius: 12px; background: #14191f; transition: border-color .25s, translate .4s var(--ease); }
.ox-card:hover { border-color: #ff5a0088; translate: 0 -4px; }
.about-page main .ox-card-p { flex: 1; color: #aab4be; font-size: 13px; line-height: 1.6; }
.ox-links { display: flex; flex-direction: column; }
.ox-links a { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #ffffff12; color: #fff; font-size: 15px; font-weight: 600; word-break: break-word; transition: color .2s; }
.ox-links a i { width: 18px; color: var(--o); text-align: center; }
.ox-links a b { margin-left: auto; color: var(--o); font-weight: 400; transition: translate .25s; }
.ox-links a:hover { color: var(--o); } .ox-links a:hover b { translate: 3px -3px; }
.ox-ping { display: inline-block; position: relative; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--o); }
.ox-ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--o); animation: ox-ring 2s ease-out infinite; }
@keyframes ox-ring { to { scale: 3.4; opacity: 0; } }

/* ==========================================================================
   8. CTA (orange)
   ========================================================================== */
.ox-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 80px); color: #fff; background: radial-gradient(circle at 88% 12%, #ffffff2b, transparent 42%), linear-gradient(120deg, #ff5a00, #ff7a26); }
.ox-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(#ffffff2e 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
.about-page .ox-cta, .about-page main .ox-cta { background: #fff; color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-page main .ox-cta h2 { color: var(--ink); }
.about-page main .ox-cta h2 span { color: var(--orange); }
.about-page .ox-cta::before { opacity: .25; background-image: radial-gradient(#ff5a0030 1px, transparent 1px); }
.about-page .ox-cta .eyebrow { color: #bd4709; }
.about-page .ox-cta .eyebrow > i { background: var(--orange); }
.about-page .ox-cta .eyebrow > b { color: #7c8490; }
.about-page main .ox-cta-copy p:not(.eyebrow) { max-width: 420px; margin-top: 22px; color: #636b76; font-size: 13px; line-height: 1.65; }
.about-page .ox-cta-meta li { color: #343a43; }
.about-page .ox-cta-meta i { background: #fff1e8; color: #bd4709; }
.ox-cta-meta { display: grid; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.ox-cta-meta li { display: flex; align-items: center; gap: 14px; color: #fff; font-size: 15px; font-weight: 600; }
.ox-cta-meta i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #0c0f1326; font-size: 13px; }
.ox-cta-meta a { color: #343a43; word-break: break-word; } .ox-cta-meta a:hover { text-decoration: underline; }
.ox-cli { border-color: #0c0f13; box-shadow: 0 40px 80px -30px #5a1d00cc; }
.about-page .ox-cta .ox-cli { border-color: #2a3037; box-shadow: 0 30px 70px -34px #0005; }
.ox-cli-body { display: flex; flex-direction: column; gap: 20px; padding: clamp(20px, 2.4vw, 30px); }
.ox-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ox-chips button { padding: 10px 16px; border: 1px solid #3a434d; border-radius: 6px; background: transparent; color: #c5ccd3; font: 13px var(--m); cursor: pointer; transition: .2s; }
.ox-chips button:hover { border-color: var(--o); }
.ox-chips button.is-on { border-color: var(--o); background: #ff5a0022; color: #fff; box-shadow: inset 0 0 0 1px #ff5a0066; }
.ox-mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ox-mods span { display: grid; justify-items: center; gap: 8px; padding: 14px 6px; border: 1px dashed #3a434d; border-radius: 8px; color: #6f7b86; font: 11px var(--m); transition: .35s; }
.ox-mods i { font-size: 20px; }
.ox-mods span.on { border: 1px solid var(--o); background: #ff5a0018; color: #fff; box-shadow: 0 0 22px #ff5a0033; }
.ox-mods span.on i { color: var(--o); animation: ox-hop .5s ease; }
@keyframes ox-hop { 40% { translate: 0 -6px; } }
.ox-launch { display: flex; align-items: center; gap: 12px; color: #ff9b68; font: 11px var(--m); letter-spacing: .12em; }
.ox-launch span { position: relative; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, #ff6a2b 0 4px, transparent 4px 9px); }
.ox-launch span::after { content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--o); box-shadow: 0 0 10px var(--o); animation: ox-fly 2s linear infinite; }
@keyframes ox-fly { to { left: 100%; } }
.about-page main .ox-cmd { padding: 16px; border-radius: 6px; background: #080a0d; color: #ffc27a; font: clamp(12px, 1.05vw, 15px)/1.6 var(--m); word-break: break-word; }
.ox-cmd b { margin-right: 8px; color: #75c994; }
.ox-cmd u { display: inline-block; width: 8px; height: 15px; margin-left: 4px; vertical-align: -3px; background: var(--o); animation: ox-blink 1s steps(2, start) infinite; }
.about-page main .ox-stackline { display: flex; flex-wrap: wrap; gap: 4px 12px; color: #cfd4d9; font: 12px/1.5 var(--m); }
.ox-stackline small { color: #7d8996; letter-spacing: .12em; }
.ox-cli-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.ox-run { display: inline-flex; align-items: center; gap: 16px; min-height: 52px; padding: 0 26px; border-radius: 8px; background: var(--o); color: #fff; font-weight: 650; transition: background .2s, translate .2s; }
.ox-run:hover { background: #ff6a1c; translate: 0 -2px; }
.ox-alt { color: #bcc0c5; font: 13px var(--m); } .ox-alt:hover { color: var(--o); }

/* ---------- section index rail ---------- */
.ox-nav { position: fixed; z-index: 60; right: 18px; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.ox-nav.is-show { opacity: 1; pointer-events: auto; }
.ox-nav a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 7px 0; }
.ox-nav i { width: 10px; height: 10px; border: 2px solid #ff5a00; border-radius: 3px; background: #ffffffcc; rotate: 45deg; transition: .3s; }
.ox-nav span { padding: 4px 9px; border-radius: 5px; background: #0f1318; color: #ffb48a; font: 11px "JetBrains Mono", monospace; opacity: 0; translate: 6px 0; transition: .3s; white-space: nowrap; }
.ox-nav a:hover span, .ox-nav a.on span { opacity: 1; translate: 0 0; }
.ox-nav a.on i { background: #ff5a00; box-shadow: 0 0 12px #ff5a00; scale: 1.3; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .ox-nav { display: none; }
  .ox-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ox-layer { grid-template-columns: 190px minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .ox-head { grid-template-columns: 1fr; gap: 16px; }
  .ox-lede, .ox-lede-wrap { justify-self: start; align-items: flex-start; text-align: left; }
  .ox-runner, .ox-scan, .ox-cta { grid-template-columns: 1fr; }
  .ox-picker { grid-template-rows: none; }
  .ox-picker button.is-on { transform: none; }
  .ox-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ox-stats > div:nth-child(2) { border-right: 0; }
  .ox-stats > div:nth-child(-n+2) { border-bottom: 1px solid #ffffff12; }
  .ox-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .ox-tl::before, .ox-tl::after { display: none; }
  .ox-tl li::before { display: none; }
  .ox-trio { grid-template-columns: 1fr; }
  .ox-hud-frame { min-height: 300px; }
}
@media (max-width: 720px) {
  /* Keep the principles code and output readable without horizontal scrolling. */
  .about-page .ox-editor { min-height: 0; }
  .about-page .ox-panels, .about-page .ox-panel { min-width: 0; }
  .about-page .ox-code {
    min-width: 0; max-width: 100%; padding: 12px 10px; overflow: hidden;
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
    font-size: 9px; line-height: 1.45;
  }
  .about-page .ox-code .ln::before { width: 1.5em; margin-right: .5em; }
  .about-page .ox-out { padding: 10px; overflow-wrap: anywhere; font-size: 9px; line-height: 1.5; }
  /* Compact the principles cards shown in the mobile preview. */
  .about-page .ox-picker button { min-height: 48px; padding: 6px 10px; gap: 8px; }
  .about-page .ox-picker b { font-size: 10px; }
  .about-page .ox-picker strong { font-size: 12px; }
  .about-page .ox-picker small { font-size: 9px; line-height: 1.2; }
  .ox-roster { display: flex; overflow-x: auto; }
  .ox-roster li { flex: 0 0 150px; }
  .ox-rail { display: none; }
  .ox-stages { grid-template-columns: 1fr; gap: 0; }
  .ox-stages li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; padding-bottom: 14px; }
  .ox-stages li > i { align-self: start; width: 30px; height: 30px; margin: 0; font-size: 13px; }
  .ox-stages li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: -2px; width: 2px; background: #e5e9ee; }
  .ox-stage-card { gap: 5px; padding: 12px; }
  .ox-stage-card small { font-size: 8px; }
  .ox-stage-card h3 { font-size: 15px; }
  .about-page main .ox-stage-card p { font-size: 11px; line-height: 1.45; }
  .ox-stage-card code { padding: 3px 9px; font-size: 10px; }
  .ox-stage-card { align-items: flex-start; text-align: left; }
  .ox-layer { grid-template-columns: 1fr; gap: 12px; padding: 16px 0 16px 16px; }
  .ox-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ox-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ox-tl {
    grid-template-columns: 1fr; gap: 12px; padding: 8px 0 8px 28px;
  }
  .ox-tl::before, .ox-tl::after {
    display: block; left: 8px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto;
  }
  .ox-tl::before { background: #e5e9ee; }
  .ox-tl::after {
    background: var(--o); transform: scaleY(0); transform-origin: top;
    transition: transform 3.2s linear;
  }
  .ox-time.is-run .ox-tl::after { transform: scaleY(1); }
  .ox-tl li { gap: 6px; padding: 14px; }
  .ox-tl li::before {
    display: block; left: -25px; top: 17px; width: 12px; height: 12px; z-index: 1;
  }
  .ox-tl time { font-size: 20px; }
  .ox-tl h4 { font-size: 14px; }
  .about-page main .ox-tl p { font-size: 11px; line-height: 1.45; }
  .ox-time.is-run .ox-tl li { animation: ox-mobile-timeline-card .5s ease both; animation-delay: calc(var(--k, 0) * .35s); }
}
@keyframes ox-mobile-timeline-card {
  from { opacity: .55; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
@media (max-width: 480px) {
  .ox-badges { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ox-badge { aspect-ratio: 3 / 4.8; }
  .ox-face { padding: 17px 15px 13px; }
  .ox-bph { flex-basis: 102px; }
  .ox-bph img { object-fit: cover; object-position: center 20%; background: #15191f; }
  .ox-stats > div { flex-direction: row; align-items: center; gap: 8px; padding: 10px; }
  .ox-stats b { font-size: 25px; }
  .ox-stats span { font-size: 9px; line-height: 1.35; }
  .ox-stages li:not(:last-child)::after { left: 16px; top: 34px; }
  .ox-track.is-run .ox-stages li:not(:last-child)::after {
    background: linear-gradient(to bottom, var(--o) 0 35%, #e5e9ee 35% 100%);
    background-size: 100% 220%; animation: ox-mobile-timeline 1.2s linear infinite;
  }
}
@keyframes ox-mobile-timeline { to { background-position: 0 100%; } }
@media (hover: none) { .ox-badge { transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .ox-spec *, .ox-team *, .ox-pipe *, .ox-stack *, .ox-cta * { animation: none !important; transition-duration: .01ms !important; }
  .ox-badge, .ox-bin { transition-duration: .01ms !important; }
  .ox-rail span { width: 100%; }
  .ox-log .ln { opacity: 1; }
  .ox-stages li > i { border-color: var(--o); color: #fff; background: var(--o); }
  .ox-tl::after { transform: none; } .ox-tl li::before { background: var(--o); }
  .ox-mq { animation: none !important; }
}

/* mobile polish */
.ox-face h4, .ox-ro-body h3 { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .ox-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .ox-chips button { min-width: 0; padding: 7px 3px; font-size: 10px; line-height: 1.25; white-space: normal; }
  .ox-label { flex-wrap: wrap; row-gap: 4px; }
  .ox-label::after { display: none; }
  .ox-strip { flex-wrap: wrap; }
  .ox-strip span { margin-left: 0; }
  .ox-face h4 { font-size: 9px; line-height: 1.2; }
  .ox-badges .ox-badge:first-child { grid-column: 1 / -1; aspect-ratio: 1.05 / 1; }
  .ox-badges .ox-badge:first-child .ox-bph { flex-basis: 160px; }
  .ox-badges .ox-badge:first-child .ox-bph img { object-position: center top; }
  .ox-badges .ox-badge:first-child .ox-face h4 {
    min-height: 1.2em; white-space: nowrap; font-size: 9px; letter-spacing: -.04em;
  }
}