/* ============================================================
   Robotics & Embodied AI — page styles
   ============================================================ */

:root {
  --ro-cyan: #4FC8FF;
  --ro-mint: #9CFFCB;
  --ro-amber: #FFC850;
  --ro-blue: #4F8FFF;
  --ro-line: rgba(255,255,255,0.08);
  --ro-line2: rgba(255,255,255,0.14);
  --ro-bg: #05070F;
  --ro-bg2: #0A0E1F;
  --ro-panel: #0F1530;
  --ro-text: #E6ECFA;
  --ro-mute: rgba(230,236,250,0.65);
}

.ro-section { padding: 120px 0; position: relative; }
.ro-section-alt { background: var(--ro-bg2); }
.ro-section .container { max-width: 1440px; margin: 0 auto; padding: 0 32px; }

.ro-eyebrow { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.18em; color: var(--ro-cyan); text-transform: uppercase; margin-bottom: 16px; }
.ro-h2 { font-family: var(--font-display, ui-sans-serif); font-size: clamp(36px, 4vw, 56px); line-height: 1.05; color: #fff; max-width: 1100px; margin: 0 0 16px; font-weight: 500; letter-spacing: -0.01em; }
.ro-sub { color: var(--ro-mute); font-size: 18px; max-width: 900px; margin: 0 0 40px; line-height: 1.55; }

.ro-vision-section-h { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.2em; color: var(--ro-cyan); text-transform: uppercase; margin: 24px 0 12px; }
.ro-disclaimer { color: var(--ro-mute); font-size: 13px; line-height: 1.5; padding: 16px 20px; border: 1px dashed var(--ro-line2); border-radius: 8px; margin-top: 24px; }

.ro-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ro-chip { display: inline-flex; align-items: center; padding: 7px 12px; border: 1px solid var(--ro-line2); border-radius: 100px; font-size: 12.5px; color: #d8e1f0; background: rgba(255,255,255,0.02); }
.ro-chip-blue { border-color: rgba(79,143,255,0.4); color: #b8cdff; background: rgba(79,143,255,0.06); }
.ro-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ro-bullets li { padding: 10px 14px; border-left: 2px solid var(--ro-cyan); background: rgba(79,200,255,0.04); color: #d8e1f0; font-size: 14px; }

/* ============================================================
   01 · HERO
   ============================================================ */
.ro-hero { padding: 140px 0 80px; background: radial-gradient(120% 80% at 70% 0%, rgba(79,200,255,0.12), transparent 60%), var(--ro-bg); position: relative; overflow: hidden; }
.ro-hero .container { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.ro-hero-tag { display: flex; gap: 16px; align-items: center; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.18em; color: var(--ro-mute); text-transform: uppercase; margin-bottom: 28px; }
.ro-hero-tag .pill { padding: 6px 12px; border: 1px solid var(--ro-cyan); color: var(--ro-cyan); border-radius: 100px; }
.ro-hero-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
.ro-hero-h1 { font-family: var(--font-display, ui-sans-serif); font-size: clamp(40px, 5vw, 72px); line-height: 1.02; color: #fff; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 20px; }
.ro-hero-sub { font-size: 18px; color: var(--ro-mute); line-height: 1.5; margin: 0 0 16px; }
.ro-hero-plain { font-size: 17px; color: #d8e1f0; line-height: 1.5; margin: 0 0 28px; padding-left: 14px; border-left: 2px solid var(--ro-cyan); }
.ro-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.ro-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ro-badge { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.12em; padding: 6px 10px; border: 1px solid var(--ro-line2); border-radius: 4px; color: #b8c5d8; text-transform: uppercase; }

.ro-console { background: #06101e; border: 1px solid var(--ro-line2); border-radius: 6px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.ro-console-chrome { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: #0a1426; border-bottom: 1px solid var(--ro-line2); font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.12em; color: #94a3b8; text-transform: uppercase; }
.ro-console-chrome .left, .ro-console-chrome .right { display: flex; gap: 14px; align-items: center; }
.ro-console-chrome .rec { display: inline-flex; gap: 6px; align-items: center; color: #ff6b6b; }
.ro-console-chrome .rec-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff6b6b; animation: ro-pulse 1.4s infinite; }
.ro-console-chrome .live { color: var(--ro-mint); display: inline-flex; gap: 6px; align-items: center; }
.ro-console-chrome .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ro-mint); animation: ro-pulse 1.4s infinite; }
@keyframes ro-pulse { 0%,100% {opacity:1;} 50% {opacity:0.3;} }
.ro-console-stage { display: grid; grid-template-columns: 1fr; }
.ro-console-quad { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: var(--ro-line2); aspect-ratio: 16 / 9; }
.ro-cam { position: relative; background: #04101e; overflow: hidden; cursor: pointer; }
.ro-cam.active { outline: 2px solid var(--ro-cyan); outline-offset: -2px; }
.ro-cam-art { width: 100%; height: 100%; display: block; }
.ro-cam-overlay { position: absolute; inset: 0; padding: 10px 12px; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; }
.ro-cam-tag { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.14em; color: rgba(255,255,255,0.85); align-self: flex-end; background: rgba(0,0,0,0.5); padding: 3px 6px; border-radius: 2px; }
.ro-cam-body { font-family: var(--font-mono, monospace); }
.ro-cam-label { font-size: 11px; letter-spacing: 0.12em; color: #fff; text-transform: uppercase; }
.ro-cam-sub { font-size: 10px; color: rgba(255,255,255,0.6); margin-top: 2px; }
.ro-console-hud { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; background: var(--ro-line2); border-top: 1px solid var(--ro-line2); }
.ro-hud-cell { padding: 10px 12px; background: #0a1426; }
.ro-hud-cell .k { font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: 0.16em; color: #6b7a96; text-transform: uppercase; }
.ro-hud-cell .v { font-family: var(--font-mono, monospace); font-size: 12px; color: #fff; margin-top: 4px; font-weight: 600; }
.ro-hud-cell.tone-mint .v { color: var(--ro-mint); }
.ro-hud-cell.tone-cyan .v { color: var(--ro-cyan); }
.ro-hud-cell.tone-amber .v { color: var(--ro-amber); }

/* ============================================================
   02 · WHAT WE BUILD — flow grid
   ============================================================ */
.ro-flow { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ro-line2); }
.ro-flow-card { padding: 26px 22px; border-right: 1px solid var(--ro-line2); border-bottom: 1px solid var(--ro-line2); background: rgba(255,255,255,0.01); position: relative; }
.ro-flow-card:nth-child(4n) { border-right: none; }
.ro-flow-card:nth-last-child(-n+4) { border-bottom: none; }
.ro-flow-card .num { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.16em; color: var(--ro-cyan); margin-bottom: 12px; }
.ro-flow-card .k { font-family: var(--font-display, sans-serif); font-size: 20px; color: #fff; margin-bottom: 10px; font-weight: 500; }
.ro-flow-card .d { font-size: 14px; color: var(--ro-mute); line-height: 1.5; }
.ro-flow-card.tone-cyan { border-top: 2px solid var(--ro-cyan); }
.ro-flow-card.tone-blue { border-top: 2px solid var(--ro-blue); }
.ro-flow-card.tone-mint { border-top: 2px solid var(--ro-mint); }
.ro-flow-card.tone-amber { border-top: 2px solid var(--ro-amber); }

/* ============================================================
   03 · STACK — 7 horizontal layers
   ============================================================ */
.ro-stack { display: grid; gap: 1px; background: var(--ro-line2); border: 1px solid var(--ro-line2); }
.ro-stack-row { display: grid; grid-template-columns: 80px 220px 1fr; gap: 24px; padding: 22px 24px; background: #0a1224; align-items: center; }
.ro-stack-row .num { font-family: var(--font-mono, monospace); font-size: 22px; color: var(--ro-cyan); }
.ro-stack-row .name { font-family: var(--font-display, sans-serif); font-size: 18px; color: #fff; font-weight: 500; }
.ro-stack-row .items { display: flex; flex-wrap: wrap; gap: 6px; }
.ro-stack-row.tone-mint .num { color: var(--ro-mint); }
.ro-stack-row.tone-blue .num { color: var(--ro-blue); }

/* ============================================================
   04 · PLATFORMS
   ============================================================ */
.ro-platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ro-platform { background: var(--ro-panel); border: 1px solid var(--ro-line2); border-radius: 4px; overflow: hidden; }
.ro-platform-slot { aspect-ratio: 16/9; background: #04101e; border-bottom: 1px solid var(--ro-line2); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; text-align: center; }
.slot-tag { position: absolute; top: 10px; left: 10px; font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: 0.16em; color: var(--ro-cyan); border: 1px solid var(--ro-cyan); padding: 3px 6px; border-radius: 2px; }
.slot-label { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); text-transform: uppercase; max-width: 80%; line-height: 1.4; }
.ro-platform h3 { font-family: var(--font-display, sans-serif); font-size: 22px; color: #fff; margin: 18px 22px 6px; font-weight: 500; }
.ro-platform-examples { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 22px 12px; }
.ro-tag { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.1em; padding: 4px 8px; border-radius: 3px; background: rgba(79,200,255,0.1); color: var(--ro-cyan); text-transform: uppercase; }
.ro-platform-caps { list-style: none; padding: 0 22px 22px; margin: 0; display: grid; gap: 6px; }
.ro-platform-caps li { font-size: 13px; color: var(--ro-mute); padding-left: 14px; position: relative; }
.ro-platform-caps li::before { content: '›'; position: absolute; left: 0; color: var(--ro-cyan); }

/* ============================================================
   05 · TWO BOTS
   ============================================================ */
.ro-twobots { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ro-twobot { background: var(--ro-panel); border: 1px solid var(--ro-line2); border-radius: 4px; overflow: hidden; }
.ro-twobot-slot { aspect-ratio: 16/9; background: #04101e; border-bottom: 1px solid var(--ro-line2); position: relative; }
.ro-twobot-slot .slot-label { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); }
.ro-twobot-body { padding: 24px 28px 28px; }
.ro-twobot-body h3 { font-family: var(--font-display, sans-serif); font-size: 26px; color: #fff; margin: 0 0 16px; font-weight: 500; }
.ro-twobot-section-h { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.2em; color: var(--ro-cyan); text-transform: uppercase; margin: 16px 0 10px; }
.ro-twobot.tone-mint .ro-twobot-section-h { color: var(--ro-mint); }
.ro-twobot-missions { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ro-twobot-missions li { font-size: 13px; color: var(--ro-mute); padding-left: 14px; position: relative; }
.ro-twobot-missions li::before { content: '›'; position: absolute; left: 0; color: var(--ro-cyan); }
.ro-twobot.tone-mint .ro-twobot-missions li::before { color: var(--ro-mint); }

/* ============================================================
   06 · AGENTS
   ============================================================ */
.ro-agents { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.ro-agent { padding: 24px 22px; background: var(--ro-panel); border: 1px solid var(--ro-line2); border-radius: 4px; }
.ro-agent-ic { width: 36px; height: 36px; color: var(--ro-cyan); margin-bottom: 14px; }
.ro-agent-ic svg { width: 100%; height: 100%; }
.ro-agent-k { font-family: var(--font-display, sans-serif); font-size: 17px; color: #fff; margin-bottom: 8px; font-weight: 500; }
.ro-agent-d { font-size: 13px; color: var(--ro-mute); line-height: 1.5; }
.ro-pipeline { background: #0a1426; border: 1px solid var(--ro-line2); padding: 28px; border-radius: 4px; }
.ro-pipeline-utt { margin-bottom: 20px; }
.ro-pipeline-utt .pill { display: inline-block; font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.18em; padding: 4px 10px; border: 1px solid var(--ro-cyan); color: var(--ro-cyan); border-radius: 100px; margin-bottom: 8px; }
.ro-pipeline-utt .utt { font-family: var(--font-display, sans-serif); font-size: 22px; color: #fff; font-style: italic; }
.ro-pipeline-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ro-pipeline-step { padding: 10px 16px; background: rgba(79,200,255,0.08); border: 1px solid rgba(79,200,255,0.3); border-radius: 4px; font-family: var(--font-mono, monospace); font-size: 12px; color: #fff; letter-spacing: 0.08em; }
.ro-pipeline-arrow { color: var(--ro-cyan); font-size: 18px; }

/* ============================================================
   07 · VISION
   ============================================================ */
.ro-vision { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
.ro-vision-feed { background: var(--ro-panel); border: 1px solid var(--ro-line2); border-radius: 4px; overflow: hidden; }
.ro-vision-chrome { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: #0a1426; border-bottom: 1px solid var(--ro-line2); font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.12em; color: #94a3b8; text-transform: uppercase; }
.ro-vision-chrome .rec { color: var(--ro-cyan); display: inline-flex; gap: 6px; align-items: center; }
.ro-vision-chrome .rec-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ro-cyan); animation: ro-pulse 1.4s infinite; }
.ro-vision-chrome .latency { color: var(--ro-mint); }
.ro-vision-canvas { aspect-ratio: 16/9; position: relative; background: #04101e; }
.ro-vision-slot { position: absolute; bottom: 12px; right: 12px; font-family: var(--font-mono, monospace); font-size: 9px; color: rgba(255,255,255,0.45); letter-spacing: 0.1em; text-transform: uppercase; max-width: 50%; text-align: right; }
.ro-vision-priv { font-size: 12px; color: var(--ro-mute); padding: 12px 14px; border-left: 2px solid var(--ro-amber); background: rgba(255,200,80,0.05); margin-top: 16px; line-height: 1.5; }

/* ============================================================
   08 · DEVICE
   ============================================================ */
.ro-device-pipe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 18px 22px; background: #0a1426; border: 1px solid var(--ro-line2); border-radius: 4px; margin-bottom: 24px; }
.ro-pipe-pill { padding: 8px 14px; background: rgba(79,200,255,0.08); border: 1px solid rgba(79,200,255,0.3); border-radius: 4px; font-family: var(--font-mono, monospace); font-size: 12px; color: #fff; letter-spacing: 0.06em; }
.ro-pipe-arrow { color: var(--ro-cyan); font-size: 16px; }
.ro-device-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; }
.ro-device-slot { aspect-ratio: 4/3; background: #1a2640; border: 1px solid var(--ro-line2); border-radius: 4px; position: relative; padding: 24px; display: flex; align-items: center; justify-content: center; }
.ro-device-mock { width: 100%; max-width: 460px; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.ro-device-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #f0f0f3; border-bottom: 1px solid #d8d8de; }
.ro-device-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #ccc; }
.ro-device-bar .dot.r { background: #ff5f57; } .ro-device-bar .dot.y { background: #febc2e; } .ro-device-bar .dot.g { background: #28c840; }
.ro-device-bar .title { margin-left: auto; font-size: 11px; color: #555; font-weight: 500; }
.ro-device-body { padding: 18px 20px; position: relative; }
.ro-device-body .row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 13px; color: #333; }
.ro-device-body .row b { color: #000; font-weight: 600; }
.ro-device-body .row b.mt { color: #00a86b; }
.ro-device-body .cursor { position: absolute; bottom: 24px; right: 60px; width: 14px; height: 18px; background: linear-gradient(135deg, #000 50%, transparent 50%); animation: ro-cursor 3.6s ease-in-out infinite; }
@keyframes ro-cursor { 0%,100%{transform:translate(0,0);} 30%{transform:translate(-30px,-40px);} 60%{transform:translate(20px,-20px);} }

/* ============================================================
   09 · ROS2
   ============================================================ */
.ro-arch { display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin-bottom: 32px; padding: 24px; background: #0a1426; border: 1px solid var(--ro-line2); border-radius: 4px; }
.ro-arch-node { padding: 12px 18px; background: rgba(79,143,255,0.1); border: 1px solid rgba(79,143,255,0.4); border-radius: 4px; font-family: var(--font-mono, monospace); font-size: 12px; color: #fff; letter-spacing: 0.06em; }
.ro-arch-line { flex: 1; min-width: 16px; height: 1px; background: linear-gradient(90deg, var(--ro-cyan), var(--ro-mint)); margin: 0 4px; max-width: 32px; }
.ro-ros2-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: start; }
.ro-ros2-term { background: #0a1224; border: 1px solid var(--ro-line2); border-radius: 4px; overflow: hidden; }
.ro-ros2-lines { padding: 16px 18px; font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.85; color: var(--ro-mint); }
.ro-ros2-lines div:first-child { color: #fff; }
.ro-ros2-lines div:last-child { color: var(--ro-cyan); }

/* ============================================================
   10 · SIM
   ============================================================ */
.ro-sim-flow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.ro-sim-step { padding: 12px 18px; background: rgba(79,200,255,0.08); border: 1px solid rgba(79,200,255,0.3); border-radius: 4px; font-family: var(--font-mono, monospace); font-size: 13px; color: #fff; }
.ro-sim-step b { color: var(--ro-cyan); margin-right: 8px; }
.ro-sim-arr { color: var(--ro-cyan); font-size: 18px; }
.ro-sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.ro-sim-pane { background: var(--ro-panel); border: 1px solid var(--ro-line2); border-radius: 4px; overflow: hidden; }
.ro-sim-canvas { aspect-ratio: 16/9; background: #04101e; position: relative; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ro-sim-canvas .slot-label { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); }

/* ============================================================
   11 · USE CASES
   ============================================================ */
.ro-uc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ro-uc { background: var(--ro-panel); border: 1px solid var(--ro-line2); border-radius: 4px; overflow: hidden; }
.ro-uc-slot { aspect-ratio: 16/10; background: #04101e; border-bottom: 1px solid var(--ro-line2); position: relative; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ro-uc h3 { font-family: var(--font-display, sans-serif); font-size: 17px; color: #fff; margin: 18px 20px 8px; font-weight: 500; }
.ro-uc p { font-size: 13px; color: var(--ro-mute); line-height: 1.5; margin: 0 20px 20px; }
.ro-uc.tone-mint { border-top: 2px solid var(--ro-mint); }
.ro-uc.tone-cyan { border-top: 2px solid var(--ro-cyan); }
.ro-uc.tone-blue { border-top: 2px solid var(--ro-blue); }

/* ============================================================
   12 · HRI
   ============================================================ */
.ro-hri-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; margin-bottom: 32px; }
.ro-hri-slot { aspect-ratio: 4/3; background: #04101e; border: 1px solid var(--ro-line2); border-radius: 4px; position: relative; }
.ro-hri-slot .slot-label { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); }
.ro-hri-chat { display: flex; flex-direction: column; gap: 14px; }
.ro-hri-line { display: flex; gap: 16px; align-items: start; }
.ro-hri-line .who { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.16em; color: var(--ro-cyan); text-transform: uppercase; padding-top: 12px; min-width: 50px; }
.ro-hri-line.robot .who { color: var(--ro-mint); }
.ro-hri-line .bubble { padding: 14px 18px; background: rgba(79,200,255,0.08); border: 1px solid rgba(79,200,255,0.2); border-radius: 4px; font-size: 15px; color: #fff; flex: 1; }
.ro-hri-line.robot .bubble { background: rgba(156,255,203,0.06); border-color: rgba(156,255,203,0.2); }
.ro-hri-line .meta { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--ro-mute); margin-top: 6px; letter-spacing: 0.1em; }
.ro-hri-flow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 12px; }

/* ============================================================
   13 · FLEET
   ============================================================ */
.ro-fleet { background: #0a1426; border: 1px solid var(--ro-line2); border-radius: 4px; overflow: hidden; margin-bottom: 32px; }
.ro-fleet-chrome { display: flex; justify-content: space-between; padding: 12px 18px; background: #060d1a; border-bottom: 1px solid var(--ro-line2); font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.14em; color: #94a3b8; text-transform: uppercase; }
.ro-fleet-chrome .rec { color: var(--ro-mint); display: inline-flex; gap: 6px; align-items: center; }
.ro-fleet-chrome .rec-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ro-mint); animation: ro-pulse 1.4s infinite; }
.ro-fleet-table { font-family: var(--font-mono, monospace); }
.ro-fleet-head, .ro-fleet-row { display: grid; grid-template-columns: 130px 2fr 1fr 1.4fr 80px 60px; gap: 16px; padding: 14px 18px; align-items: center; font-size: 13px; }
.ro-fleet-head { background: #060d1a; color: #6b7a96; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid var(--ro-line2); }
.ro-fleet-row { border-bottom: 1px solid rgba(255,255,255,0.04); color: #d8e1f0; }
.ro-fleet-row .id { color: var(--ro-cyan); font-weight: 600; }
.ro-fleet-row.tone-mint .id { color: var(--ro-mint); }
.ro-fleet-row.tone-amber .id { color: var(--ro-amber); }
.ro-fleet-row .mode { font-size: 11px; padding: 3px 8px; background: rgba(79,200,255,0.1); border-radius: 100px; color: #fff; display: inline-block; width: fit-content; }
.ro-fleet-row .bat { display: flex; gap: 8px; align-items: center; }
.ro-fleet-row .bat .bar { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 100px; overflow: hidden; max-width: 80px; }
.ro-fleet-row .bat .bar > div { height: 100%; background: var(--ro-mint); border-radius: 100px; }
.ro-fleet-row .alerts { font-weight: 600; padding: 3px 8px; border-radius: 4px; text-align: center; min-width: 28px; }
.ro-fleet-row .alerts.aoff { color: #6b7a96; }
.ro-fleet-row .alerts.aon { color: var(--ro-amber); background: rgba(255,200,80,0.1); }

/* ============================================================
   14 · SAFETY
   ============================================================ */
.ro-safety-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--ro-line2); border: 1px solid var(--ro-line2); }
.ro-safety-card { padding: 24px 22px; background: #0a1224; }
.ro-safety-card .num { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.16em; color: var(--ro-amber); margin-bottom: 10px; }
.ro-safety-card h4 { font-family: var(--font-display, sans-serif); font-size: 16px; color: #fff; margin: 0 0 10px; font-weight: 500; }
.ro-safety-card p { font-size: 13px; color: var(--ro-mute); line-height: 1.5; margin: 0; }

/* ============================================================
   15 · INDUSTRIES
   ============================================================ */
.ro-ind-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--ro-line2); border: 1px solid var(--ro-line2); }
.ro-ind { padding: 22px 20px; background: #0a1224; }
.ro-ind h4 { font-family: var(--font-display, sans-serif); font-size: 15px; color: var(--ro-cyan); margin: 0 0 12px; font-weight: 500; }
.ro-ind ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.ro-ind li { font-size: 12.5px; color: var(--ro-mute); line-height: 1.4; padding-left: 10px; position: relative; }
.ro-ind li::before { content: '·'; position: absolute; left: 0; color: var(--ro-cyan); }
.ro-ind-note { font-size: 11px; color: var(--ro-amber); margin-top: 12px; font-style: italic; }

/* ============================================================
   16 · TECH STACK
   ============================================================ */
.ro-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ro-line2); border: 1px solid var(--ro-line2); }
.ro-tech-col { padding: 26px 24px; background: #0a1224; }
.ro-tech-col h4 { font-family: var(--font-display, sans-serif); font-size: 18px; color: #fff; margin: 0 0 16px; font-weight: 500; border-bottom: 1px solid var(--ro-line2); padding-bottom: 10px; }
.ro-tech-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ro-tech-col li { font-family: var(--font-mono, monospace); font-size: 12px; color: #d8e1f0; padding: 6px 10px; background: rgba(255,255,255,0.02); border-radius: 3px; letter-spacing: 0.04em; }

/* ============================================================
   17 · PILOT JOURNEY
   ============================================================ */
.ro-phase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ro-line2); border: 1px solid var(--ro-line2); }
.ro-phase { padding: 26px 22px; background: #0a1224; position: relative; }
.ro-phase .n { font-family: var(--font-mono, monospace); font-size: 14px; letter-spacing: 0.14em; color: var(--ro-cyan); margin-bottom: 14px; font-weight: 600; }
.ro-phase h4 { font-family: var(--font-display, sans-serif); font-size: 17px; color: #fff; margin: 0 0 10px; font-weight: 500; }
.ro-phase p { font-size: 13px; color: var(--ro-mute); line-height: 1.5; margin: 0; }

/* ============================================================
   18 · WHY (UNITREE+BG)
   ============================================================ */
.ro-why-grid { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 0; align-items: stretch; }
.ro-why-col { padding: 32px 32px; background: #0a1224; border: 1px solid var(--ro-line2); }
.ro-why-col.bg { background: linear-gradient(180deg, rgba(79,200,255,0.08), rgba(156,255,203,0.04)); border-color: var(--ro-cyan); }
.ro-why-col h4 { font-family: var(--font-display, sans-serif); font-size: 22px; color: #fff; margin: 0 0 18px; font-weight: 500; }
.ro-why-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ro-why-col li { font-size: 14px; color: #d8e1f0; padding-left: 18px; position: relative; }
.ro-why-col li::before { content: '✓'; position: absolute; left: 0; color: var(--ro-cyan); }
.ro-why-plus { display: flex; align-items: center; justify-content: center; font-size: 36px; color: var(--ro-cyan); font-family: var(--font-mono, monospace); }

/* ============================================================
   19 · GALLERY
   ============================================================ */
.ro-gal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.ro-gal-tile { background: var(--ro-panel); border: 1px solid var(--ro-line2); border-radius: 4px; overflow: hidden; }
.ro-gal-cinema { aspect-ratio: 16/10; background: #04101e; position: relative; display: flex; align-items: center; justify-content: center; padding: 14px; border-bottom: 1px solid var(--ro-line2); }
.ro-gal-meta { padding: 12px 14px; }
.ro-gal-meta .k { font-size: 12px; color: #fff; font-weight: 500; margin-bottom: 4px; }
.ro-gal-meta .o { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.12em; color: var(--ro-cyan); text-transform: uppercase; }

/* ============================================================
   20 · FAQ
   ============================================================ */
.ro-faq { display: grid; gap: 8px; max-width: 1000px; }
.ro-faq-item { border: 1px solid var(--ro-line2); border-radius: 4px; background: #0a1224; overflow: hidden; }
.ro-faq-q { all: unset; cursor: pointer; padding: 18px 22px; display: flex; justify-content: space-between; gap: 16px; width: 100%; box-sizing: border-box; font-family: var(--font-display, sans-serif); font-size: 17px; color: #fff; align-items: center; }
.ro-faq-q .t { color: var(--ro-cyan); font-size: 22px; font-family: var(--font-mono, monospace); }
.ro-faq-a { padding: 0 22px 20px; color: var(--ro-mute); font-size: 14px; line-height: 1.6; }

/* ============================================================
   21 · FINAL CTA + FORM
   ============================================================ */
.ro-final-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
.ro-final-cta { padding: 24px 0; }
.ro-final-ctas { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-bottom: 28px; }
.ro-final-bullets { display: grid; gap: 12px; }
.ro-final-bullets > div { font-size: 14px; color: #d8e1f0; padding-left: 18px; position: relative; }
.ro-form { background: #0a1224; border: 1px solid var(--ro-line2); border-radius: 4px; padding: 32px; }
.ro-form h3 { font-family: var(--font-display, sans-serif); font-size: 22px; color: #fff; margin: 0 0 22px; font-weight: 500; }
.ro-form-row { display: grid; gap: 6px; margin-bottom: 16px; }
.ro-form-row > span { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.12em; color: var(--ro-cyan); text-transform: uppercase; }
.ro-form input, .ro-form select, .ro-form textarea { width: 100%; padding: 12px 14px; background: #04101e; border: 1px solid var(--ro-line2); border-radius: 3px; color: #fff; font-size: 14px; font-family: inherit; box-sizing: border-box; }
.ro-form input:focus, .ro-form select:focus, .ro-form textarea:focus { outline: none; border-color: var(--ro-cyan); }
.ro-form textarea { resize: vertical; min-height: 70px; }
.ro-form button { margin-top: 12px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .ro-hero-grid, .ro-vision, .ro-device-grid, .ro-ros2-grid, .ro-sim-grid, .ro-hri-grid, .ro-twobots, .ro-final-grid { grid-template-columns: 1fr; }
  .ro-flow, .ro-platforms, .ro-agents, .ro-uc-grid, .ro-gal-grid, .ro-tech-grid, .ro-phase-grid, .ro-safety-grid, .ro-ind-grid, .ro-why-grid { grid-template-columns: 1fr 1fr; }
  .ro-why-grid { grid-template-columns: 1fr; }
  .ro-why-plus { padding: 16px; }
  .ro-stack-row { grid-template-columns: 1fr; gap: 8px; }
  .ro-fleet-head, .ro-fleet-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .ro-section { padding: 80px 0; }
  .ro-flow, .ro-platforms, .ro-agents, .ro-uc-grid, .ro-gal-grid, .ro-tech-grid, .ro-phase-grid, .ro-safety-grid, .ro-ind-grid { grid-template-columns: 1fr; }
  .ro-console-hud { grid-template-columns: repeat(4, 1fr); }
  .ro-console-quad { aspect-ratio: 4/3; }
}

/* ============================================================
   08 · MANIPULATION & DEXTERITY — robot arm scene
   ============================================================ */
.ro-manip-slot { padding: 0 !important; aspect-ratio: 16 / 10 !important; overflow: hidden; }
.ro-manip-slot .slot-tag,
.ro-manip-slot .slot-label {
  position: absolute; z-index: 2;
}
.ro-manip-slot .slot-tag { top: 14px; left: 16px; }
.ro-manip-slot .slot-label {
  bottom: 14px; left: 16px; right: 16px; max-width: none;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.5);
}
.ro-manip-scene { position: absolute; inset: 0; }
.ro-manip-svg { width: 100%; height: 100%; display: block; }

/* belt motion */
.ro-belt-motion rect { animation: ro-belt-shift 1.6s linear infinite; }
@keyframes ro-belt-shift {
  from { transform: translateX(0); }
  to   { transform: translateX(-80px); }
}

/* boxes drift along belt */
.ro-box-1 { animation: ro-box-1 6s ease-in-out infinite; }
.ro-box-2 { animation: ro-box-2 6s ease-in-out infinite; }
.ro-box-3 { animation: ro-box-3 6s ease-in-out infinite; }
@keyframes ro-box-1 {
  0%, 18% { transform: translate(0, 0); }
  35%, 100% { transform: translate(-30px, 0); }
}
@keyframes ro-box-2 {
  /* lifted by gripper at ~35-65% */
  0%, 30%   { transform: translate(0, 0); }
  35%       { transform: translate(0, -2px); }
  45%       { transform: translate(-30px, -38px); }
  55%       { transform: translate(-150px, -52px); }
  62%       { transform: translate(-180px, -34px); }
  68%       { transform: translate(-180px, -16px); }
  72%, 100% { transform: translate(-180px, -16px); }
}
@keyframes ro-box-3 {
  0%, 100% { transform: translate(0, 0); }
  60%      { transform: translate(-110px, 0); }
}

/* gripper open / close */
.ro-finger-l { transform-origin: 192px 186px; animation: ro-finger-l 6s ease-in-out infinite; }
.ro-finger-r { transform-origin: 210px 186px; animation: ro-finger-r 6s ease-in-out infinite; }
@keyframes ro-finger-l {
  0%, 30% { transform: translateX(-3px); }
  40%, 65% { transform: translateX(0); }
  72%, 100% { transform: translateX(-3px); }
}
@keyframes ro-finger-r {
  0%, 30% { transform: translateX(3px); }
  40%, 65% { transform: translateX(0); }
  72%, 100% { transform: translateX(3px); }
}

/* bbox + grasp markers — fade with cycle */
.ro-bbox { animation: ro-bbox-fade 6s ease-in-out infinite; }
@keyframes ro-bbox-fade {
  0%, 25%   { opacity: 1; }
  40%, 65%  { opacity: 0.35; }
  72%, 100% { opacity: 1; }
}

/* status dot pulse */
.ro-pulse-dot { animation: ro-pulse 1.4s ease-in-out infinite; }
@keyframes ro-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* hide old desktop mock styles when not used (kept for any legacy ref) */

@media (max-width: 900px) {
  .ro-manip-slot { aspect-ratio: 4 / 3 !important; }
}