/* ==========================================================================
   OXIN RTL v3 — homepage v2 (sections after the server-room walk)
   figures ribbon · families + location marquee · why-Oxin bento · domain
   band · step cards · build-your-own banner. Headings stay on one line.
   ========================================================================== */

/* the corridor: shorter stops, so the walk has no long empty stretches */
.ox-stop{min-block-size:78vh}
.ox-stop.is-first{min-block-size:100vh}

/* ---- section headings: one line, fluid ---- */
.ox-body .oxh-h,.ox-body .ox-sec-h.oxh-h{max-inline-size:none;margin:0;font-size:clamp(1.15rem,4.6vw,2.6rem)!important;font-weight:900;line-height:1.3;white-space:nowrap;letter-spacing:0}
.oxh-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s4)}
.oxh-head.is-center{justify-content:center;text-align:center}
.oxh-head.is-center .ox-eye{justify-content:center}
.oxh-head.is-center .ox-eye::after{content:'';inline-size:24px;block-size:2px;background:currentColor;flex:none}
.oxh-lede{margin:var(--s3) 0 0;max-inline-size:62ch;font-size:var(--fs-400);color:var(--ink-3);line-height:1.9}
.oxh-headlink{display:inline-flex;align-items:center;gap:8px;min-block-size:44px;padding-inline:16px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);
  color:var(--ink)!important;font-weight:700;font-size:var(--fs-300);text-decoration:none!important;transition:border-color .15s,color .15s}
.oxh-headlink:hover{border-color:var(--blue);color:var(--blue)!important}
.ox-eye.is-light{color:#7DD3FC}

/* ---- figures ribbon ---- */
.oxh-stats{position:relative;z-index:3;margin-block-start:calc(-1 * var(--s12))}
.oxh-stats-in{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:0 30px 60px -36px rgba(14,23,38,.35);overflow:hidden}
.oxh-stats-in li{display:flex;align-items:center;gap:14px;padding:22px 20px;min-inline-size:0}
.oxh-stats-in li+li{border-inline-start:1px solid var(--line)}
.oxh-stats-in i{display:grid;place-items:center;flex:none;inline-size:46px;block-size:46px;border-radius:14px;background:var(--blue-tint);color:var(--blue);font-size:18px}
.oxh-stats-in li:nth-child(2) i{background:var(--teal-tint);color:var(--teal)}
.oxh-stats-in li:nth-child(3) i{background:color-mix(in srgb,#7C3AED 12%,var(--surface));color:#7C3AED}
.oxh-stats-in li:nth-child(4) i{background:var(--amber-tint);color:var(--amber)}
.oxh-stats-in li:nth-child(5) i{background:color-mix(in srgb,#DB2777 12%,var(--surface));color:#DB2777}
.oxh-stats-in li[hidden]{display:none}
.oxh-stats-in span{display:flex;flex-direction:column;min-inline-size:0}
.oxh-stats-in b{font-size:var(--fs-700);font-weight:900;color:var(--ink);line-height:1.2}
.oxh-stats-in small{font-size:var(--fs-200);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- products ---- */
.oxh-products{position:relative;overflow:hidden;isolation:isolate}
.oxh-deco{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(600px 300px at 85% 0%,color-mix(in srgb,var(--blue) 10%,transparent),transparent 70%),
             radial-gradient(500px 280px at 5% 60%,color-mix(in srgb,var(--teal) 9%,transparent),transparent 70%),
             linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 48px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/48px 100%;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 70%);mask-image:linear-gradient(to bottom,#000,transparent 70%);opacity:.75}
.oxh-products .ox-fam{background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* location marquee */
.oxh-locs{margin-block-start:var(--s10)}
.oxh-locs[hidden]{display:none}
.oxh-locs-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-block-end:var(--s3);font-size:var(--fs-300);font-weight:800;color:var(--ink-2)}
.oxh-locs-h span{display:inline-flex;align-items:center;gap:8px}
.oxh-locs-h span i{color:var(--teal)}
.oxh-locs-h a{font-size:var(--fs-200);font-weight:700;color:var(--teal)!important}
.oxh-marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.oxh-track{display:flex;gap:10px;inline-size:max-content;padding-block:6px;animation:oxh-scroll 70s linear infinite}
.oxh-marquee:hover .oxh-track{animation-play-state:paused}
@keyframes oxh-scroll{to{transform:translateX(50%)}}
.oxh-loc{display:inline-flex;align-items:center;gap:8px;block-size:44px;padding-inline:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);
  color:var(--ink)!important;font-size:var(--fs-200);font-weight:700;white-space:nowrap;text-decoration:none!important;transition:border-color .15s,transform .15s}
.oxh-loc:hover{border-color:var(--teal);transform:translateY(-2px)}
.oxh-loc .ox-flag{inline-size:22px;block-size:16px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(14,23,38,.12)}
.oxh-loc small{font-weight:600;color:var(--ink-3)}

/* ---- why: bento ---- */
.oxh-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(190px,auto);gap:var(--s4)}
.oxh-tile{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:20px;background:var(--surface);border:1px solid var(--line);overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.oxh-tile:hover{transform:translateY(-3px);box-shadow:0 24px 48px -28px rgba(14,23,38,.35)}
.ox-body .oxh-tile h3{margin:6px 0 0;font-size:var(--fs-500);font-weight:800}
.oxh-tile p{margin:0;font-size:var(--fs-300);color:var(--ink-3);line-height:1.85}
.oxh-ic{display:grid;place-items:center;inline-size:48px;block-size:48px;border-radius:14px;background:var(--blue-tint);color:var(--blue);font-size:19px}
.oxh-ic.is-teal{background:var(--teal-tint);color:var(--teal)}
.oxh-ic.is-amber{background:var(--amber-tint);color:var(--amber)}
.oxh-ic.is-violet{background:color-mix(in srgb,#7C3AED 12%,var(--surface));color:#7C3AED}
.oxh-ic.is-ink{background:#0E1726;color:#7DD3FC}
.oxh-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;block-size:30px;padding-inline:12px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:var(--fs-100);font-weight:700}
.oxh-chip.is-dark{background:var(--blue-tint);color:var(--blue)}
@keyframes oxh-blink{50%{opacity:.2}}
.oxh-tile.is-panel{grid-column:span 2}
.oxh-meters{display:grid;gap:8px;margin-block-start:auto;padding-block-start:8px}
.oxh-meters span{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:10px}
.oxh-meters small{font-size:var(--fs-100);font-weight:800;color:var(--ink-3);direction:ltr;text-align:left}
.oxh-meters i{position:relative;block-size:8px;border-radius:8px;background:var(--surface-2);overflow:hidden}
.oxh-meters i::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:var(--v);border-radius:inherit;background:linear-gradient(90deg,var(--blue),#60A5FA);animation:oxh-pulse 3.2s ease-in-out infinite alternate}
.oxh-meters span:nth-child(2) i::after{background:linear-gradient(90deg,var(--teal),#2DD4BF);animation-delay:-1s}
.oxh-meters span:nth-child(3) i::after{background:linear-gradient(90deg,#7C3AED,#A78BFA);animation-delay:-2s}
@keyframes oxh-pulse{to{inline-size:calc(var(--v) + 18%)}}
.oxh-tile.is-term,.oxh-tile.is-wide{grid-column:span 2}
.oxh-term{margin:auto 0 0;padding:12px 14px;border-radius:12px;background:#0B1220;color:#B7F0D2;font:500 12px/1.7 var(--mono);text-align:left;white-space:pre}
.oxh-term .d{color:#6E8BA3}
.oxh-term .cur{display:inline-block;inline-size:8px;block-size:14px;vertical-align:middle;background:#B7F0D2;animation:oxh-blink 1s steps(2) infinite}

/* ---- domains ---- */
.oxh-dom-sec{padding-block:clamp(40px,6vw,72px)}
.oxh-dom{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center;gap:var(--s8);padding:clamp(24px,4vw,48px);border-radius:26px;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,#0B1424,#102A4C 55%,#0B2A33);color:#E2E8F0;box-shadow:0 40px 80px -40px rgba(11,20,36,.6)}
.oxh-dom::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.45;background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/100% 30px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/30px 100%;
  -webkit-mask-image:radial-gradient(ellipse at 20% 30%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 20% 30%,#000,transparent 70%)}
.oxh-dom-glow{position:absolute;z-index:-1;inset-block-end:-40%;inset-inline-end:-10%;inline-size:50%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(45,212,191,.28),transparent 65%)}
.oxh-dom .oxh-h{color:#fff}
.oxh-dom-tx p{margin:var(--s3) 0 0;color:#94A3B8}
.oxh-dsearch{display:grid;gap:14px}
.oxh-dfield{display:flex;align-items:center;gap:8px;padding:6px;padding-inline-start:16px;border-radius:16px;background:#fff;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.oxh-dfield>i{color:#64748B}
.oxh-dfield input{flex:1;min-inline-size:0;block-size:50px;border:0;outline:0;background:none;color:#0E1726;font:600 var(--fs-500) var(--font);text-align:left}
.oxh-dbtn{display:inline-flex;align-items:center;gap:8px;block-size:50px;padding-inline:22px;border:0;border-radius:12px;background:linear-gradient(180deg,#3B82F6,#1463D8);color:#fff;font:800 var(--fs-300) var(--font);cursor:pointer}
.oxh-dbtn:hover{filter:brightness(1.08)}
.oxh-tlds{display:flex;flex-wrap:wrap;gap:8px}
.oxh-tld{display:inline-flex;align-items:center;gap:8px;block-size:40px;padding-inline:14px;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:rgba(255,255,255,.06);color:#fff;font:700 var(--fs-300) var(--font);cursor:pointer;transition:background .15s,border-color .15s}
.oxh-tld:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.oxh-tld small{font-size:var(--fs-100);font-weight:600;color:#7DD3FC}
.oxh-dlinks{display:flex;flex-wrap:wrap;gap:6px 18px}
.oxh-dlink{display:inline-flex;align-items:center;gap:6px;min-block-size:36px;padding:0;border:0;background:none;color:#CBD5E1!important;font:600 var(--fs-200) var(--font);cursor:pointer;text-decoration:none!important}
.oxh-dlink:hover{color:#fff!important}

/* ---- how it works ---- */
.oxh-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin:0;padding:0;list-style:none;counter-reset:s}
.oxh-steps::before{content:"";position:absolute;inset-block-start:38px;inset-inline:12%;block-size:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 14px)}
.oxh-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 10px 4px;text-align:center}
.oxh-step-ic{position:relative;display:grid;place-items:center;inline-size:76px;block-size:76px;margin-block-end:8px;border-radius:24px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 16px 32px -20px rgba(14,23,38,.35);color:var(--blue);font-size:26px}
.oxh-steps li:nth-child(2) .oxh-step-ic{color:var(--teal)}.oxh-steps li:nth-child(3) .oxh-step-ic{color:#7C3AED}.oxh-steps li:nth-child(4) .oxh-step-ic{color:var(--amber)}
.oxh-step-ic em{position:absolute;inset-block-start:-8px;inset-inline-end:-8px;display:grid;place-items:center;inline-size:26px;block-size:26px;border-radius:50%;background:var(--ink);color:var(--surface);font-style:normal;font-size:var(--fs-100);font-weight:800}
.oxh-steps b{font-size:var(--fs-500);font-weight:800}
.oxh-steps p{margin:0;max-inline-size:30ch;font-size:var(--fs-300);color:var(--ink-3);line-height:1.85}

/* ---- build-your-own banner ---- */
.oxh-calc-sec{padding-block:0 clamp(48px,7vw,88px)}
.oxh-calc{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:var(--s8);padding:clamp(24px,4vw,44px);border-radius:26px;
  background:radial-gradient(600px 300px at 100% 0%,var(--blue-tint),transparent 70%),var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2)}
.oxh-calc-tx p{margin:var(--s3) 0 0;color:var(--ink-3);font-size:var(--fs-400)}
.oxh-calc-tx .oxh-chip{margin-block-end:var(--s3)}
.oxh-calc-act{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:var(--s6)}
.oxh-calc-act .ox-btn i{margin-inline-end:6px}

/* ---- footer call to action: one line ---- */
@media (min-width:992px){.ox-body .oxf-cta h2{white-space:nowrap;font-size:clamp(1.25rem,2vw,1.6rem)}}

/* ---- responsive ---- */
@media (max-width:1199px){
  .oxh-stats-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .oxh-stats-in li:nth-child(4){border-inline-start:0}
  .oxh-stats-in li:nth-child(n+4){border-block-start:1px solid var(--line)}
  .oxh-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:991px){
  .oxh-dom,.oxh-calc{grid-template-columns:1fr}
  .oxh-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s8)}
  .oxh-steps::before{display:none}
}
@media (max-width:767px){
  .oxh-stats{margin-block-start:calc(-1 * var(--s6))}
  .oxh-stats-in{grid-template-columns:1fr 1fr;border-radius:16px}
  .oxh-stats-in li{padding:14px 12px;gap:10px}
  .oxh-stats-in li:nth-child(n){border-inline-start:0;border-block-start:1px solid var(--line)}
  .oxh-stats-in li:nth-child(-n+2){border-block-start:0}
  .oxh-stats-in li:nth-child(2n){border-inline-start:1px solid var(--line)}
  .oxh-stats-in li:last-child{grid-column:1/-1;border-inline-start:0}
  .oxh-stats-in i{inline-size:38px;block-size:38px;border-radius:11px;font-size:15px}
  .oxh-stats-in b{font-size:var(--fs-500)}
  .oxh-head{align-items:flex-start}
  .oxh-headlink{align-self:stretch;justify-content:center}
  .oxh-bento{grid-template-columns:1fr}
  .oxh-tile{padding:20px}
  .oxh-dfield{padding-inline-start:12px}
  .oxh-dfield input{block-size:46px;font-size:var(--fs-400)}
  .oxh-dbtn{block-size:46px;padding-inline:14px}
  .oxh-dbtn span{display:none}
  .oxh-steps{grid-template-columns:1fr;row-gap:var(--s6)}
  .oxh-steps li{flex-direction:row;align-items:flex-start;text-align:start;flex-wrap:wrap;column-gap:14px}
  .oxh-step-ic{inline-size:56px;block-size:56px;border-radius:18px;font-size:20px;margin:0}
  .oxh-steps li b{align-self:center}
  .oxh-steps p{flex-basis:100%;max-inline-size:none}
  .oxh-calc-act .ox-btn{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .oxh-track,.oxh-meters i::after,.oxh-term .cur{animation:none}
  .oxh-marquee{overflow-x:auto}
}

/* ==========================================================================
   homepage v3: infrastructure tile (rack cabinet + 3D HPE server), payment
   tile with bank logos, interactive configurator, live demo console
   ========================================================================== */

/* "how it works": room between the heading and the steps */
.oxh-steps.ox-sec-body{margin-block-start:clamp(36px,5vw,56px)}
.oxh-bento.ox-sec-body{margin-block-start:clamp(32px,4.5vw,52px)}

/* ---- infrastructure tile ---- */
.oxh-tile.is-hero{grid-column:span 2;grid-row:span 2;display:grid;grid-template-columns:150px minmax(0,1fr);align-items:stretch;gap:24px;padding:24px;color:#E2E8F0;border-color:transparent;
  background:radial-gradient(520px 320px at 70% 0%,rgba(1,169,130,.18),transparent 70%),radial-gradient(420px 300px at 0% 100%,rgba(96,165,250,.16),transparent 70%),linear-gradient(150deg,#0A1220,#112440 60%,#0B1A2A)}
.oxh-tile.is-hero h3{margin:0;color:#fff;font-size:var(--fs-600)}
.oxh-tile.is-hero p{color:#9FB0C6;font-size:var(--fs-300)}
.oxh-hero-main{display:flex;flex-direction:column;gap:10px;min-inline-size:0}

/* rack cabinet */
.oxh-cab{display:flex;flex-direction:column;min-block-size:330px;padding:6px;border-radius:12px;background:linear-gradient(180deg,#1A2433,#0E1520);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 0 0 3px #0B111B,0 20px 40px -24px #000}
.oxh-cab-top{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:4px 6px 7px;font:800 10px/1 var(--mono);color:#7B8CA5;letter-spacing:.06em}
.oxh-cab-body{flex:1;display:grid;grid-template-columns:8px minmax(0,1fr) 8px;gap:4px}
.oxh-cab-rail{border-radius:2px;background:radial-gradient(circle,#05090F 1.2px,transparent 1.8px) 50% 0/8px 9px repeat-y,#263347}
.oxh-cab-units{display:flex;flex-direction:column;gap:4px}
.oxh-cab-units i{position:relative;flex:1 1 0;min-block-size:13px;border-radius:3px;border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,#2A3850,#1C2738);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.oxh-cab-units i.is-2u{flex-grow:2}
.oxh-cab-units i::before{content:"";position:absolute;inset-block-start:50%;inset-inline-start:6px;inline-size:5px;block-size:5px;margin-block-start:-2.5px;border-radius:50%;background:#34D399;box-shadow:0 0 6px #34D399}
.oxh-cab-units i::after{content:"";position:absolute;inset-block:3px;inset-inline:16px 8px;border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 2px,transparent 2px 5px)}
.oxh-cab-units i:nth-child(odd)::before{animation:oxh-blink 1.6s steps(2) infinite}
.oxh-cab-units i:nth-child(3n)::before{background:#60A5FA;box-shadow:0 0 6px #60A5FA;animation-delay:-.7s}
.oxh-cab-units i.is-patch{background:#151E2B}
.oxh-cab-units i.is-patch::before{display:none}
.oxh-cab-units i.is-patch::after{inset-inline:6px;background:radial-gradient(circle,#F59E0B 1.6px,transparent 2.2px) 0 50%/7px 100% repeat-x,radial-gradient(circle,#38BDF8 1.6px,transparent 2.2px) 3.5px 50%/7px 100% repeat-x}
.oxh-cab-units i.is-switch::after{background:repeating-linear-gradient(90deg,#0A0F18 0 4px,transparent 4px 6px),linear-gradient(#34D399,#34D399);background-size:auto,100% 2px;background-repeat:repeat,no-repeat;background-position:0 0,0 100%;opacity:.9}
.oxh-cab-units i.is-gpu{border-color:#01A982;background:linear-gradient(180deg,#123B36,#0D2A27);box-shadow:0 0 0 1px #01A982,0 0 18px rgba(1,169,130,.55)}
.oxh-cab-units i.is-gpu::before{background:#01A982;box-shadow:0 0 8px #01A982}
.oxh-cab-units i.is-gpu em{position:absolute;inset-block-start:50%;inset-inline-end:8px;transform:translateY(-50%);font:800 8px/1 var(--mono);font-style:normal;color:#5EEAD4;z-index:1}
.oxh-cab-units i.is-storage::after{background:repeating-linear-gradient(90deg,#111827 0 9px,#64748B 9px 10px)}
.oxh-cab-units i.is-blank{background:#141C28}
.oxh-cab-units i.is-blank::before{display:none}
.oxh-cab-units i.is-ups{background:linear-gradient(180deg,#232F42,#18212F)}
.oxh-cab-units i.is-ups::after{inset-inline:auto 8px;inline-size:22px;inset-block:28%;background:#0B3B2E;box-shadow:inset 0 0 0 1px #34D399}
.oxh-cab-foot{display:flex;justify-content:space-between;padding:6px 8px 0}
.oxh-cab-foot span{inline-size:16px;block-size:5px;border-radius:2px;background:#0B111B}

/* 3D server (HPE ProLiant DL380a Gen11 style, 2U with four GPUs) */
.oxh-scene{position:relative;block-size:178px;perspective:900px;perspective-origin:50% 30%;direction:ltr}
.oxh-srv{--w:270px;--h:44px;--d:170px;position:absolute;left:50%;top:44%;inline-size:var(--w);block-size:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(-30deg);animation:oxh-float 7s ease-in-out infinite}
@keyframes oxh-float{50%{transform:rotateX(-20deg) rotateY(-20deg) translateY(-6px)}}
.oxh-f{position:absolute;box-sizing:border-box}
.oxh-f.is-front{inset:0;transform:translateZ(calc(var(--d) / 2));display:flex;align-items:center;gap:5px;padding:4px 0;
  background:linear-gradient(180deg,#2F3B4E,#1A2332);border:1px solid #3B4A61;border-radius:3px}
.oxh-ear{flex:none;inline-size:12px;align-self:stretch;background:linear-gradient(90deg,#4B5B73,#2A3546);border-radius:2px}
.oxh-bays{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;inline-size:92px;align-self:stretch}
.oxh-bays i{position:relative;border-radius:1px;background:#0E141E;border:1px solid #3A475B}
.oxh-bays i::after{content:"";position:absolute;right:2px;top:2px;inline-size:3px;block-size:3px;border-radius:50%;background:#34D399;box-shadow:0 0 4px #34D399}
.oxh-bays i:nth-child(3n)::after{animation:oxh-blink .9s steps(2) infinite}
.oxh-vent{flex:1;align-self:stretch;border-radius:2px;background:radial-gradient(circle,#0B1019 1.3px,transparent 1.8px) 0 0/6px 6px,#232E40}
.oxh-badge{flex:none;padding:3px 5px;border-radius:2px;background:#01A982;color:#fff;font:900 9px/1 Arial,sans-serif;letter-spacing:.04em}
.oxh-pwr{flex:none;inline-size:8px;block-size:8px;border-radius:50%;background:#34D399;box-shadow:0 0 0 2px #1A2332,0 0 8px #34D399}
.oxh-f.is-top{left:0;top:calc((var(--h) - var(--d)) / 2);inline-size:var(--w);block-size:var(--d);transform:rotateX(90deg) translateZ(calc(var(--h) / 2));
  display:grid;grid-template-columns:repeat(4,1fr) 1fr 1fr;grid-template-rows:1fr 18px 1fr;gap:6px;padding:10px;
  background:linear-gradient(135deg,#1E2838,#141C29);border:1px solid #3B4A61;border-radius:3px}
.oxh-gpu{grid-row:1;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;border-radius:3px;background:linear-gradient(180deg,#0B0F16,#1A2230);border:1px solid #01A982;box-shadow:0 0 10px rgba(1,169,130,.35)}
.oxh-gpu i{inline-size:22px;block-size:22px;border-radius:50%;background:repeating-conic-gradient(#3B4A61 0 20deg,#111827 20deg 40deg);animation:oxh-spin 1.2s linear infinite}
@keyframes oxh-spin{to{transform:rotate(360deg)}}
.oxh-cpu{grid-row:3;border-radius:3px;background:repeating-linear-gradient(90deg,#9AA8BC 0 2px,#4B5B73 2px 4px);border:1px solid #64748B}
.oxh-cpu:first-of-type{grid-column:1/3}
.oxh-cpu+.oxh-cpu{grid-column:3/5}
.oxh-fans{grid-row:2;grid-column:1/-1;display:flex;gap:6px}
.oxh-fans i{flex:1;border-radius:3px;background:radial-gradient(circle,#0B0F16 30%,#2A3546 32%)}
.oxh-f.is-side,.oxh-f.is-side2{left:calc((var(--w) - var(--d)) / 2);top:0;inline-size:var(--d);block-size:var(--h);
  background:repeating-linear-gradient(90deg,#1B2433 0 10px,#222D3F 10px 11px);border:1px solid #33425A}
.oxh-f.is-side{transform:rotateY(90deg) translateZ(calc(var(--w) / 2))}
.oxh-f.is-side2{transform:rotateY(-90deg) translateZ(calc(var(--w) / 2))}
.oxh-shadow{position:absolute;left:50%;bottom:8px;inline-size:230px;block-size:22px;margin-left:-115px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(2px);animation:oxh-shadow 7s ease-in-out infinite}
@keyframes oxh-shadow{50%{transform:scale(.92);opacity:.75}}
.oxh-srv-tag{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:3px 10px;border-radius:999px;background:rgba(1,169,130,.14);border:1px solid rgba(1,169,130,.4);color:#5EEAD4;font:700 10.5px/1.4 var(--mono)}

/* data centres */
.oxh-dcs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-block:6px 2px}
.oxh-dc{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.oxh-dc>span:last-child{display:flex;flex-direction:column;line-height:1.5;min-inline-size:0}
.oxh-dc b{font-size:var(--fs-300);color:#fff}
.oxh-dc small{font-size:var(--fs-100);color:#8FA3BC}

/* ---- payment tile ---- */
.oxh-tile.is-pay{gap:16px}
.oxh-pay-top{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:18px;align-items:start}
.oxh-pay-tx{display:flex;flex-direction:column;gap:8px}
.oxh-pay-points{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.oxh-pay-points li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--surface-2);font-size:var(--fs-200);font-weight:700;color:var(--ink-2)}
.oxh-pay-points i{color:#7C3AED}
.oxh-bcard{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1.586;padding:14px 16px;border-radius:14px;overflow:hidden;color:#fff;
  background:radial-gradient(160px 120px at 100% 0%,rgba(255,255,255,.25),transparent 70%),linear-gradient(135deg,#1E3A8A,#4C1D95 60%,#0E7490);
  box-shadow:0 22px 40px -22px rgba(76,29,149,.7);transform:rotate(-4deg);transition:transform .3s var(--ease)}
.oxh-tile.is-pay:hover .oxh-bcard{transform:rotate(0) translateY(-4px)}
.oxh-bcard-top{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-100)}
.oxh-bcard-net{padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.18);font-weight:800}
.oxh-chipc{inline-size:34px;block-size:25px;border-radius:5px;background:linear-gradient(135deg,#FDE68A,#D4A017);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.oxh-bcard-no{font:700 14px/1 var(--mono);letter-spacing:.08em;text-align:left}
.oxh-bcard-ft{display:flex;justify-content:space-between;direction:ltr;font:600 9px/1 var(--mono);opacity:.85}
.oxh-banks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.oxh-bank{display:grid;place-items:center;block-size:54px;border-radius:12px;background:#fff;border:1px solid var(--line);transition:transform .15s,box-shadow .15s}
.oxh-bank:hover{transform:translateY(-2px);box-shadow:0 10px 20px -14px rgba(14,23,38,.4)}
.oxh-bank img{inline-size:34px;block-size:34px;object-fit:contain}
.oxh-bank.is-net{grid-column:1}
.oxh-shetab{grid-column:2/-1;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:12px;background:linear-gradient(90deg,var(--blue-tint),transparent);border:1px dashed color-mix(in srgb,var(--blue) 40%,var(--line))}
.oxh-shetab>i{color:var(--blue);font-size:18px}
.oxh-shetab>span{display:flex;flex-direction:column;line-height:1.5}
.oxh-shetab b{font-size:var(--fs-300)}
.oxh-shetab small{font-size:var(--fs-100);color:var(--ink-3)}

/* ---- configurator ---- */
.oxh-calc-ui{display:grid;gap:16px;padding:22px;border-radius:20px;background:linear-gradient(160deg,#0B1424,#13284A);box-shadow:0 30px 60px -30px rgba(11,20,36,.6);color:#E2E8F0}
.oxh-viz{display:grid;grid-template-columns:1.3fr 1fr .9fr;gap:12px}
.oxh-viz-b{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);direction:ltr}
.oxh-viz-b>span{font:800 10px/1 var(--mono);color:#7B8CA5;letter-spacing:.08em}
.oxh-cores{flex:1;display:grid;grid-template-columns:repeat(8,1fr);gap:3px;align-content:center}
.oxh-cores i{aspect-ratio:1;border-radius:2px;background:rgba(255,255,255,.08);transition:background .2s,box-shadow .2s}
.oxh-cores i.on{background:#60A5FA;box-shadow:0 0 6px rgba(96,165,250,.7)}
.oxh-dimms{flex:1;display:flex;align-items:stretch;gap:4px;min-block-size:54px}
.oxh-dimms i{flex:1;border-radius:2px;background:rgba(255,255,255,.08);position:relative;transition:background .2s}
.oxh-dimms i::after{content:"";position:absolute;left:20%;right:20%;top:20%;bottom:30%;background:repeating-linear-gradient(180deg,rgba(0,0,0,.35) 0 3px,transparent 3px 6px)}
.oxh-dimms i.on{background:linear-gradient(180deg,#2DD4BF,#0E9384)}
.oxh-disk{position:relative;flex:1;display:grid;place-items:center}
.oxh-disk svg{inline-size:64px;block-size:64px;transform:rotate(-90deg)}
.oxh-disk circle{fill:none;stroke-width:3.4}
.oxh-disk .bg{stroke:rgba(255,255,255,.1)}
.oxh-disk .fg{stroke:#A78BFA;stroke-linecap:round;stroke-dasharray:100 100;transition:stroke-dasharray .35s var(--ease)}
.oxh-disk b{position:absolute;font:800 10px/1 var(--mono);color:#fff}
.oxh-range{display:grid;grid-template-columns:86px minmax(0,1fr) 84px;align-items:center;gap:12px;margin:0;font-weight:700;font-size:var(--fs-200);color:#CBD5E1}
.oxh-range b{font:800 12px/1 var(--mono);color:#fff;text-align:left;direction:ltr}
.oxh-range input{--p:50%;-webkit-appearance:none;appearance:none;inline-size:100%;block-size:28px;background:transparent;cursor:pointer;direction:ltr}
.oxh-range input::-webkit-slider-runnable-track{block-size:8px;border-radius:8px;background:linear-gradient(90deg,var(--c,#60A5FA) var(--p),rgba(255,255,255,.12) var(--p))}
.oxh-range input::-moz-range-track{block-size:8px;border-radius:8px;background:linear-gradient(90deg,var(--c,#60A5FA) var(--p),rgba(255,255,255,.12) var(--p))}
.oxh-range input::-webkit-slider-thumb{-webkit-appearance:none;inline-size:22px;block-size:22px;margin-top:-7px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 5px color-mix(in srgb,var(--c,#60A5FA) 35%,transparent)}
.oxh-range input::-moz-range-thumb{inline-size:22px;block-size:22px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 5px color-mix(in srgb,var(--c,#60A5FA) 35%,transparent)}
.oxh-range input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.oxh-range input[data-oxh-r="ram"]{--c:#2DD4BF}
.oxh-range input[data-oxh-r="disk"]{--c:#A78BFA}
.oxh-sum{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 0;padding:10px;border-radius:12px;background:rgba(255,255,255,.06);font:700 13px/1.4 var(--mono);color:#fff}
.oxh-sum i{color:#60A5FA}

/* ---- demo console (corridor, stop 4) ---- */
.oxh-con{margin-block-start:var(--s4);border-radius:12px;overflow:hidden;background:#0B1220;border:1px solid #1E2A3C;box-shadow:0 20px 40px -24px rgba(0,0,0,.6);cursor:text}
.oxh-con-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#111A2B;border-block-end:1px solid #1E2A3C}
.oxh-con-dots{display:flex;gap:5px}
.oxh-con-dots i{inline-size:10px;block-size:10px;border-radius:50%;background:#F87171}
.oxh-con-dots i:nth-child(2){background:#FBBF24}.oxh-con-dots i:nth-child(3){background:#34D399}
.oxh-con-t{flex:1;font:600 11px/1 var(--mono);color:#8FA3BC;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.oxh-con-s{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#5EEAD4;direction:rtl}
.oxh-con-out{block-size:200px;overflow-y:auto;padding:10px 12px 0;font:500 12px/1.65 var(--mono);color:#B7F0D2;text-align:left;white-space:pre-wrap;word-break:break-word;scrollbar-width:thin}
.oxh-con-out .p{color:#60A5FA}
.oxh-con-out .e{color:#FCA5A5}
.oxh-con-out .d{color:#6E8BA3}
.oxh-con-in{display:flex;align-items:center;gap:8px;padding:6px 12px 10px;margin:0}
.oxh-con-p{flex:none;margin:0;font:500 12px/1 var(--mono);color:#60A5FA}
.oxh-con-in input{flex:1;min-inline-size:0;block-size:26px;padding:0;border:0;outline:0;background:none;color:#E2E8F0;font:500 12px/1 var(--mono);caret-color:#B7F0D2}

/* ---- responsive ---- */
@media (max-width:1199px){.oxh-tile.is-hero{grid-row:auto}}
@media (max-width:767px){
  .oxh-tile.is-hero,.oxh-tile.is-panel,.oxh-tile.is-term,.oxh-tile.is-wide{grid-column:auto;grid-row:auto}
  .oxh-tile.is-hero{grid-template-columns:1fr;padding:18px}
  .oxh-cab{display:none}
  .oxh-scene{block-size:160px}
  .oxh-srv{--w:220px;--h:38px;--d:140px}
  .oxh-pay-top{grid-template-columns:1fr}
  .oxh-bcard{max-inline-size:240px;transform:none}
  .oxh-banks{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .oxh-bank{block-size:46px}
  .oxh-bank img{inline-size:28px;block-size:28px}
  .oxh-viz{grid-template-columns:1fr 1fr}
  .oxh-viz-b:last-child{grid-column:1/-1}
  .oxh-range{grid-template-columns:70px minmax(0,1fr) 70px;gap:8px}
  .oxh-con-out{block-size:170px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){.oxh-srv,.oxh-shadow,.oxh-gpu i,.oxh-cab-units i::before,.oxh-bays i::after{animation:none}}

/* ---- v3.1 fixes ---- */
/* last corridor stop (console) must clear the figures ribbon that overlaps the walk */
.ox-stops>.ox-stop:last-child{min-block-size:auto;padding-block:var(--s16) calc(var(--s16) + var(--s12))}
@media (max-width:767px){.ox-stops>.ox-stop:last-child{padding-block:var(--s10) calc(var(--s12) + var(--s8))}}

/* theme label colour (.ox-body label) must not reach the dark widgets */
.ox-body .oxh-con .oxh-con-p,.oxh-con-out .p{color:#60A5FA!important;font-weight:700}
.ox-body .oxh-calc-ui .oxh-range,.ox-body .oxh-calc-ui .oxh-range span{color:#fff!important}
.ox-body .oxh-calc-ui .oxh-range span{font-size:var(--fs-300);font-weight:800}

/* console output scrolls without a visible bar */
.oxh-con-out{scrollbar-width:none;-ms-overflow-style:none}
.oxh-con-out::-webkit-scrollbar{display:none;inline-size:0}

/* ---- root access tile ---- */
.oxh-tile.is-term{gap:16px}
.oxh-root-h{display:flex;align-items:flex-start;gap:14px}
.oxh-root-h>div{display:flex;flex-direction:column;gap:4px}
.ox-body .oxh-root-h h3{margin:0}
.oxh-root-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;align-items:stretch}
.oxh-root-list{align-content:stretch}
.oxh-root-list li{min-block-size:0}
.oxh-root-list{display:grid;grid-auto-rows:1fr;gap:8px;margin:0;padding:0;list-style:none}
.oxh-root-list li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.oxh-root-list i{display:grid;place-items:center;flex:none;inline-size:36px;block-size:36px;border-radius:10px;background:#0E1726;color:#7DD3FC;font-size:15px}
.oxh-root-list li:nth-child(2) i{color:#5EEAD4}
.oxh-root-list li:nth-child(3) i{color:#FBBF24}
.oxh-root-list span{display:flex;flex-direction:column;line-height:1.5;min-inline-size:0}
.oxh-root-list b{font-size:var(--fs-300);font-weight:800}
.oxh-root-list small{font-size:var(--fs-100);color:var(--ink-3)}
.oxh-ssh{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:#0B1220;border:1px solid #1E2A3C;box-shadow:0 18px 36px -24px rgba(0,0,0,.6)}
.oxh-ssh-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#111A2B;border-block-end:1px solid #1E2A3C;font:600 11px/1 var(--mono);color:#8FA3BC}
.oxh-ssh-bar i{color:#34D399}
.oxh-ssh pre{flex:1;margin:0;padding:12px;font:500 11.5px/1.75 var(--mono);color:#B7F0D2;text-align:left;white-space:pre-wrap;word-break:break-all;background:none;border:0}
.oxh-ssh .d{color:#6E8BA3}
.oxh-ssh .ok{color:#5EEAD4}
.oxh-ssh .p{color:#60A5FA;font-weight:700}
.oxh-ssh .cur{display:inline-block;inline-size:8px;block-size:14px;vertical-align:middle;background:#B7F0D2;animation:oxh-blink 1s steps(2) infinite}
@media (max-width:767px){.oxh-root-body{grid-template-columns:1fr}}

/* products: the server renders every product group, JS folds them into six
   families right after load. Hide the raw cards and reserve the families'
   height meanwhile, so the page doesn't shrink by several screens mid-scroll. */
.ox-pgrid[data-ox-fam-pending]{visibility:hidden;overflow:hidden;block-size:690px}
@media (max-width:1100px){.ox-pgrid[data-ox-fam-pending]{block-size:1000px}}
@media (max-width:900px){.ox-pgrid[data-ox-fam-pending]{block-size:1600px}}
@media (max-width:767px){.ox-pgrid[data-ox-fam-pending]{block-size:1880px}}