* { box-sizing: border-box; }
  html, body { margin: 0; }
  html { scrollbar-gutter: stable; }
  html { background: var(--ink-950); }  /* overscroll areas match the page */  /* same content width as short subpages — no sideways shift */
  body {
    background: var(--ink-950);
    color: var(--text-body);
    font-family: var(--font-brand);
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
  a { color: inherit; }
  ::selection { background: rgba(16,173,255,0.3); }

  /* ---- Hero animation ---- */
  @keyframes rh-rise { from { opacity:0; transform: translateY(22px); } to { opacity:1; transform: translateY(0); } }
  .rh-rise { opacity:0; animation: rh-rise 0.9s cubic-bezier(0.16,1,0.3,1) forwards; }

  @keyframes rh-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
  .rh-float { animation: rh-float 7s ease-in-out infinite; }

  @keyframes rh-glow { 0%,100% { opacity:0.5; transform: scale(0.95); } 50% { opacity:0.9; transform: scale(1.08); } }
  .rh-glow { animation: rh-glow 6s ease-in-out infinite; }

  /* scan line sweeping the shelf — angled to match the isometric slope */
  @keyframes rh-scan { 0% { top:4%; opacity:0; } 8% { opacity:1; } 92% { opacity:1; } 100% { top:96%; opacity:0; } }
  .rh-scan {
    position:absolute; left:-8%; right:-8%; height:2px; border-radius:2px;
    transform: rotate(-17deg);
    background: linear-gradient(90deg, transparent, var(--blue-300), transparent);
    box-shadow: 0 0 14px 3px rgba(16,173,255,0.55);
    animation: rh-scan 3.6s cubic-bezier(0.45,0,0.55,1) infinite;
  }
  .rh-scan::after { content:""; position:absolute; left:0; right:0; top:2px; height:46px;
    background: linear-gradient(180deg, rgba(16,173,255,0.16), transparent); }

  /* detection boxes */
  @keyframes rh-detect { 0% { opacity:0; transform: scale(0.9); } 60% { opacity:0; transform: scale(0.9); } 72% { opacity:1; transform: scale(1.03); } 80% { opacity:1; transform: scale(1); } 100% { opacity:1; } }
  .rh-box {
    position:absolute; border:1.5px solid var(--blue-400); border-radius:6px;
    background: rgba(16,173,255,0.06); opacity:0;
    animation: rh-detect 3.6s ease-out infinite;
  }
  .rh-tag {
    position:absolute; top:-11px; left:-1px; display:inline-flex; align-items:center; gap:5px;
    font-family: var(--font-mono); font-size:10px; font-weight:600; line-height:1;
    padding:4px 7px; border-radius:5px; white-space:nowrap; color:#02121f;
  }
  .rh-tag .d { width:5px; height:5px; border-radius:50%; background:#02121f; }
  @keyframes rh-blink { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
  .rh-blink { animation: rh-blink 1.4s ease-in-out infinite; }

  @media (prefers-reduced-motion: reduce) {
    .rh-rise,.rh-float,.rh-glow,.rh-scan,.rh-box,.rh-blink,.rh-scanx,.rh-det,.rh-detpulse,.rh-frame,.rh-det2,.rh-scan2 { animation: none !important; opacity:1 !important; }
  }

  /* ---- Vector shelf scene ---- */
  @keyframes rh-scanx { 0% { transform: translateX(40px); opacity:0; } 7% { opacity:1; } 93% { opacity:1; } 100% { transform: translateX(392px); opacity:0; } }
  .rh-scanx { animation: rh-scanx 4s cubic-bezier(0.45,0,0.55,1) infinite; }

  @keyframes rh-detpulse { 0%,100% { opacity:0.55; } 50% { opacity:1; } }
  .rh-detpulse { animation: rh-detpulse 2.4s ease-in-out infinite; }

  @keyframes rh-pop { 0% { opacity:0; transform: translateY(10px) scale(0.96); } 100% { opacity:1; transform: none; } }
  .rh-pop { transform-box: fill-box; transform-origin: center bottom; animation: rh-pop 0.6s cubic-bezier(0.16,1,0.3,1) both; }

  /* ---- Product orbit ---- */
  @keyframes rh-orbit-in { 0% { opacity:0; transform: translate(-50%,-50%) scale(0.2); } 60% { opacity:1; } 100% { opacity:1; transform: translate(-50%,-50%) scale(1); } }
  .rh-orbit { opacity:0; animation: rh-orbit-in 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards; }
  @keyframes rh-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  .rh-bob { animation: rh-bob 5s ease-in-out infinite; }
  @keyframes rh-spin { to { transform: rotate(360deg); } }
  .rh-spin { animation: rh-spin 60s linear infinite; }
  @keyframes rh-spin-rev { to { transform: rotate(-360deg); } }
  .rh-spin-rev { animation: rh-spin-rev 40s linear infinite; }
  @keyframes rh-corepulse { 0%,100% { opacity:0.55; transform: translate(-50%,-50%) scale(0.94); } 50% { opacity:1; transform: translate(-50%,-50%) scale(1.06); } }
  .rh-corepulse { animation: rh-corepulse 4.5s ease-in-out infinite; }

  /* ---- Per-letter scan tags ---- */
  .rh-ltr { position: relative; display: inline-block; }
  .rh-glyph { transition: opacity .45s ease; }
  .rh-ltr.oos .rh-glyph { opacity: 0.25; }
  @keyframes rh-tagin { from { opacity:0; transform: scale(0.8); } to { opacity:1; transform: scale(1); } }
  .rh-tag-frame { position:absolute; top:-3px; bottom:-3px; left:-2px; right:-2px; border:1.5px solid var(--c);
    border-radius:4px; pointer-events:none; box-shadow:0 0 8px var(--c); animation: rh-tagin .25s ease-out both; }
  .rh-tag-frame.dashed { border-style:dashed; background:rgba(255,93,98,0.14); }
  .rh-tag-lbl { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:5px;
    font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:0.02em; line-height:1;
    padding:3px 5px; border-radius:3px; white-space:nowrap; color:#02121f; }
  .rh-tag-lbl::after { content: attr(data-lbl); }

  /* ---- Bento cards (2026) ---- */
  .rh-bento { transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, box-shadow .35s; }
  .rh-bento:hover { transform: translateY(-4px); border-color: rgba(16,173,255,.42) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(16,173,255,.18); }
  .rh-chip { transition: background .25s, border-color .25s, color .25s; }
  .rh-chip:hover { background: rgba(16,173,255,.12); border-color: rgba(16,173,255,.5); color: var(--blue-300); }
  @keyframes rh-mini-scan { 0% { transform: translateX(-120%);} 100% { transform: translateX(420%);} }
  .rh-mini-scan { animation: rh-mini-scan 2.8s cubic-bezier(.45,0,.55,1) infinite; }
  @keyframes rh-grow { from { transform: scaleX(0);} to { transform: scaleX(1);} }
  .rh-pt-ico svg { width:15px; height:15px; }
  .j-key { color:#59c7fc; }
  .j-str { color:#7fe0a8; }
  .j-num { color:#ffb43a; }
  .j-bool { color:#ff8fb0; }
  .rh-json { margin:0; font-family:var(--font-mono); font-size:13.5px; line-height:1.7; color:var(--text-secondary);
    white-space:pre; overflow-x:auto; }
  .rh-resolve-in { background:var(--bg-raised); border:1px solid var(--border-default); border-radius:var(--radius-md);
    color:var(--text-strong); font-family:var(--font-mono); font-size:16px; padding:14px 16px; outline:none; transition:border-color .2s, box-shadow .2s; }
  .rh-resolve-in:focus { border-color:var(--accent); box-shadow:var(--focus-ring-shadow); }
  .rh-nav-link { transition: color .2s; }
  .rh-nav-link:hover { color: var(--blue-300) !important; }
  @media (max-width: 860px){
    .wrap { padding: 0 20px; }
    .rh-desktop-only { display: none !important; }
    .rh-hero-img { opacity: 0.18 !important; width: 96% !important; right: -26% !important; }
    .rh-form-card { grid-template-columns: 1fr !important; gap: 30px !important; padding: 30px 22px 28px !important; }
    .rh-form-fields { grid-template-columns: 1fr !important; }
    .rh-catalog-left { position: static !important; top: auto !important; }
    .rh-access-row { gap: 6px !important; flex-wrap: nowrap !important; }
    .rh-access-chip { gap: 5px !important; font-size: 11px !important; padding: 6px 9px !important; white-space: nowrap; }
    .rh-access-chip i { width: 12px !important; height: 12px !important; }
    .rh-backedby { display: none !important; }
    .rh-marquee { display: block !important; width: 100vw !important; margin-left: calc(-50vw + 50%) !important; }
  }
  @media (min-width: 861px){ .rh-mobile-only { display: none !important; } }
  @keyframes rh-marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .rh-marquee-track { animation: rh-marquee-x 22s linear infinite; }
  @media (prefers-reduced-motion: reduce){ .rh-marquee-track { animation: none !important; } }
  @keyframes rh-cyl { from { background-position: 0 0;} to { background-position: 96px 0;} }
  .rh-cyl { animation: rh-cyl 2.4s linear infinite; }
  .rh-cyl-d { animation: rh-cyl 2.4s linear infinite; animation-delay: -1.2s; }
  @keyframes rh-disc { to { transform: rotate(360deg);} }
  .rh-disc { animation: rh-disc 4.5s linear infinite; }
  @keyframes rh-bob2 { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-6px);} }
  .rh-bob2 { animation: rh-bob2 4.6s ease-in-out infinite; }
  @keyframes rh-spin360 { from { transform: rotateY(0deg);} to { transform: rotateY(360deg);} }
  .rh-spin360 { animation: rh-spin360 7s linear infinite; transform-style: preserve-3d; will-change: transform; }
  .rh-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
  @keyframes rh-edge { from { background-position: 0 0;} to { background-position: 220px 0;} }
  .rh-edge { animation: rh-edge 2.6s linear infinite; }
  @keyframes rh-cylsoft { 0% { background-position: 190% 0;} 100% { background-position: -90% 0;} }
  .rh-cylsoft { animation: rh-cylsoft 3.6s ease-in-out infinite; }
  @keyframes rh-glow2 { 0%,100% { filter: drop-shadow(0 12px 16px rgba(7,20,33,0.42)) drop-shadow(0 0 5px rgba(120,205,255,0.3)); } 50% { filter: drop-shadow(0 12px 16px rgba(7,20,33,0.42)) drop-shadow(0 0 16px rgba(120,205,255,0.85)); } }
  .rh-glow2 { animation: rh-glow2 2.8s ease-in-out infinite; }
  @keyframes rh-shadow360 {
    0%   { transform: translateX(-50%) scaleX(1);    opacity:.5; }
    25%  { transform: translateX(-62%) scaleX(0.62); opacity:.4; }
    50%  { transform: translateX(-50%) scaleX(1.12); opacity:.56; }
    75%  { transform: translateX(-38%) scaleX(0.62); opacity:.4; }
    100% { transform: translateX(-50%) scaleX(1);    opacity:.5; }
  }
  .rh-shadow360 { animation: rh-shadow360 4s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce){ .rh-cyl,.rh-cyl-d,.rh-disc,.rh-shadow360,.rh-bob2,.rh-spin360,.rh-edge,.rh-cylsoft,.rh-glow2{ animation:none !important; } }

  /* ---- Premium detection overlay ---- */
  @keyframes rh-fadein { from { opacity:0; transform: scale(0.985); } to { opacity:1; transform: none; } }
  .rh-frame { position:absolute; opacity:0; filter: drop-shadow(0 0 5px var(--c)); animation: rh-fadein 0.85s cubic-bezier(0.16,1,0.3,1) forwards; }
  /* angled detection box — top/bottom edges follow the shelf rails, sides vertical */
  .rh-det2 { position:absolute; opacity:0; animation: rh-fadein 0.85s cubic-bezier(0.16,1,0.3,1) forwards; }
  .rh-det2-box { position:absolute; inset:0; border:1.6px solid var(--c); border-radius:5px;
    transform: skewY(-27deg); filter: drop-shadow(0 0 4px var(--c));
    box-shadow: inset 0 0 22px -8px var(--c); }
  .rh-corner { position:absolute; width:15px; height:15px; border:2px solid var(--c); }
  .rh-corner.tl { top:-1px; left:-1px; border-right:0; border-bottom:0; border-top-left-radius:7px; }
  .rh-corner.tr { top:-1px; right:-1px; border-left:0; border-bottom:0; border-top-right-radius:7px; }
  .rh-corner.bl { bottom:-1px; left:-1px; border-right:0; border-top:0; border-bottom-left-radius:7px; }
  .rh-corner.br { bottom:-1px; right:-1px; border-left:0; border-top:0; border-bottom-right-radius:7px; }
  .rh-lbl { position:absolute; bottom:100%; left:-1px; margin-bottom:10px; display:inline-flex; align-items:center; gap:7px;
    font-family:var(--font-brand); font-size:12px; font-weight:600; letter-spacing:0.01em; color:#fff; white-space:nowrap;
    padding:7px 13px; border-radius:999px; background:rgba(7,15,26,0.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid var(--c); box-shadow:0 6px 22px rgba(0,0,0,0.45); }
  .rh-dot { width:7px; height:7px; border-radius:50%; background:var(--c); box-shadow:0 0 9px var(--c); }
  @keyframes rh-sweep { 0% { top:-14%; opacity:0; } 12% { opacity:1; } 88% { opacity:1; } 100% { top:100%; opacity:0; } }
  .rh-scan2 { position:absolute; left:-16%; right:-16%; height:76px; transform: rotate(-27deg);
    background: linear-gradient(180deg, transparent 0%, rgba(16,173,255,0.10) 42%, rgba(150,220,255,0.5) 50%, rgba(16,173,255,0.10) 58%, transparent 100%);
    animation: rh-sweep 5.2s cubic-bezier(0.45,0,0.55,1) infinite; }


  /* Catalog demo — locked result on phones: full-width CTA, tighter panel */
  @media (max-width: 860px){
    .rh-gated-panel { padding: 28px 8px 24px !important; }
    .rh-gated-cta { width: 100%; }
    .rh-gated-cta button { width: 100% !important; padding: 15px 20px !important; font-size: 16px !important; }
    #catalog .rh-bento { padding: 20px 18px 22px !important; }
    .rh-statement { padding: 28px 22px 24px !important; gap: 26px !important; }
    .rh-resolve-row > span, .rh-resolve-row button { width: 100% !important; }
  }

  /* Human check (Cloudflare Turnstile), styled as a form field. Zero height for normal visitors;
     unfolds only when Cloudflare asks for an interaction. The widget's own border and square
     corners are clipped by a frame that matches the inputs (radius, border colour). */
  .rh-form-intro { display: flex; flex-direction: column; }
  /* desktop: always anchored to the bottom of the intro column (also while collapsed, so it unfolds
     in place instead of jumping down from under the subtitle); its bottom edge sits on the Send button's line */
  .rh-check { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: auto; transition: grid-template-rows .45s cubic-bezier(.16,1,.3,1), opacity .35s ease, padding-top .45s cubic-bezier(.16,1,.3,1); }
  .rh-check-inner { overflow: hidden; min-height: 0; }
  .rh-check.is-shown { grid-template-rows: 1fr; opacity: 1; padding-top: 24px; }
  /* the frame keeps the widget's height even if Cloudflare re-renders or hides its iframe */
  .rh-check.is-shown .rh-check-frame { min-height: 65px; }
  .rh-check-label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
  .rh-check-label svg { color: var(--blue-400); }
  .rh-check-hint { font-weight: 400; color: var(--text-dim); }
  .rh-check-frame { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-raised); transition: border-color .25s, box-shadow .25s; }
  .rh-check-box { margin: -1px; width: calc(100% + 2px); line-height: 0; }
  .rh-check-box > div { width: 100%; }
  .rh-check.is-nudged .rh-check-frame { border-color: var(--accent); box-shadow: var(--focus-ring-shadow); }
  .rh-check.is-nudged .rh-check-label { color: var(--blue-300); }
  @media (max-width: 860px) {
    .rh-form-card { padding-left: 16px !important; padding-right: 16px !important; }
    .rh-check { margin-top: 0; }
    .rh-check.is-shown { margin: 0 0 18px; padding-top: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .rh-check { transition: none; } }