/* Oxin WordPress theme — page content and the 3D home page.
   Built only on the client area's design tokens (oxin.css :root / [data-theme=dark]),
   so light/dark mode and every colour follow the shared shell. */

.oxwp{--w-violet:#6D4AE0;--w-violet-t:#F1ECFE;--w-pink:#D23C7E;--w-pink-t:#FDEDF4;--w-ink-t:var(--surface-2)}
[data-theme="dark"] .oxwp,[data-theme="dark"].oxwp{--w-violet:#A78BFA;--w-violet-t:rgba(167,139,250,.14);--w-pink:#F472B6;--w-pink-t:rgba(244,114,182,.14)}
.oxwp-main{display:block;overflow-x:clip}
.oxwp .ox-wrap.is-narrow{--wrap:860px}
.screen-reader-text{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---------- section scaffolding ---------- */
.oxw-sec{padding-block:clamp(56px,8vw,112px)}
.oxw-sec.is-tight{padding-block:clamp(32px,5vw,64px)}
.oxw-head{max-inline-size:640px;margin-block-end:clamp(28px,4vw,48px)}
.oxw-head.is-center{margin-inline:auto;text-align:center}
.oxw-head.is-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);max-inline-size:none}
.oxw-head h2{margin:var(--s2) 0 var(--s3);font-size:clamp(var(--fs-700),3.2vw,var(--fs-900));line-height:var(--lh-display);font-weight:800;color:var(--ink)}
.oxw-head p{margin:0;color:var(--ink-2);font-size:var(--fs-400);line-height:var(--lh-body)}
.oxw-kicker{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r-pill);background:var(--blue-tint);color:var(--blue);font-size:var(--fs-200);font-weight:700}

/* ---------- hero ---------- */
.oxw-hero{position:relative;isolation:isolate;padding-block:clamp(40px,7vw,96px) clamp(48px,7vw,104px);overflow:hidden}
.oxw-hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.oxw-aurora{position:absolute;inset:-20% -10% auto;block-size:120%;background:
  radial-gradient(40% 50% at 20% 30%,color-mix(in srgb,var(--blue) 22%,transparent),transparent 70%),
  radial-gradient(35% 45% at 75% 20%,color-mix(in srgb,var(--teal) 18%,transparent),transparent 70%),
  radial-gradient(30% 40% at 55% 85%,color-mix(in srgb,var(--w-violet) 14%,transparent),transparent 70%);
  filter:blur(10px);animation:oxw-drift 18s ease-in-out infinite alternate}
.oxw-gridfloor{position:absolute;inset:auto -20% -10%;block-size:55%;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;transform:perspective(700px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);mask-image:linear-gradient(to top,#000 10%,transparent 85%);opacity:.7}
@keyframes oxw-drift{to{transform:translate3d(3%,4%,0) scale(1.05)}}

.oxw-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px)}
.oxw-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--glass);backdrop-filter:blur(8px);font-size:var(--fs-200);font-weight:700;color:var(--ink-2)}
.oxw-pulse{inline-size:8px;block-size:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 color-mix(in srgb,var(--teal) 60%,transparent);animation:oxw-pulse 2s infinite}
@keyframes oxw-pulse{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.oxw-h1{margin:var(--s5) 0 var(--s4);font-size:clamp(2rem,4.6vw,var(--fs-1100));line-height:1.18;font-weight:900;letter-spacing:-.01em;color:var(--ink)}
.oxw-h1 em{font-style:normal;background:linear-gradient(90deg,var(--blue),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.oxw-lede{max-inline-size:560px;margin:0 0 var(--s6);font-size:clamp(var(--fs-400),1.4vw,var(--fs-500));line-height:var(--lh-body);color:var(--ink-2)}
.oxw-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-block-end:var(--s6)}
.oxw-cta .ox-btn i{font-size:1.05em}

.oxw-domain{position:relative;display:flex;align-items:center;gap:var(--s2);max-inline-size:560px;padding:6px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-2)}
.oxw-domain>i{padding-inline:10px 2px;color:var(--ink-3)}
.oxw-domain input[type=text]{flex:1;min-inline-size:0;min-block-size:44px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-400);text-align:left;outline:none}
.oxw-domain:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-tint),var(--sh-2)}
.oxw-hero-facts{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);margin:var(--s6) 0 0;padding:0;list-style:none}
.oxw-hero-facts li{display:flex;align-items:center;gap:8px;font-size:var(--fs-300);color:var(--ink-2)}
.oxw-hero-facts b{display:inline-grid;place-items:center;min-inline-size:36px;block-size:36px;padding-inline:8px;border-radius:10px;background:var(--surface-2);color:var(--blue);font-weight:800}

/* globe */
.oxw-hero-3d{position:relative;aspect-ratio:1/1;max-inline-size:620px;inline-size:100%;justify-self:center}
.oxw-globe{position:absolute;inset:0;border-radius:50%}
.oxw-globe canvas{position:absolute;inset:0;inline-size:100%!important;block-size:100%!important;cursor:grab;touch-action:pan-y}
.oxw-globe canvas:active{cursor:grabbing}
.oxw-globe-fallback{position:absolute;inset:13%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#1B3A6B,#0C1E3C 60%,#081326);box-shadow:inset -30px -40px 80px color-mix(in srgb,var(--ink) 18%,transparent)}
.oxw-globe.is-live .oxw-globe-fallback{display:none}
.oxw-hero-3d::after{content:"";position:absolute;inset:auto 18% -2%;block-size:8%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ink) 22%,transparent),transparent);filter:blur(6px);z-index:-1}
.oxw-chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--glass);backdrop-filter:blur(10px);box-shadow:var(--sh-pop);font-size:var(--fs-200);animation:oxw-float 6s ease-in-out infinite;pointer-events:none}
.oxw-chip b{display:block;color:var(--ink);font-size:var(--fs-300)}
.oxw-chip small{color:var(--ink-3)}
.oxw-chip>i{display:grid;place-items:center;inline-size:34px;block-size:34px;border-radius:10px;background:var(--blue-tint);color:var(--blue)}
.oxw-chip.is-a{inset-block-start:8%;inset-inline-start:-4%}
.oxw-chip.is-b{inset-block-end:14%;inset-inline-end:-6%;animation-delay:-2s}
.oxw-chip.is-c{inset-block-end:2%;inset-inline-start:6%;animation-delay:-4s}
.oxw-chip.is-c>i{background:var(--teal-tint);color:var(--teal)}
.oxw-led{inline-size:10px;block-size:10px;border-radius:50%;background:var(--led-a);box-shadow:0 0 12px var(--led-a)}
@keyframes oxw-float{50%{transform:translateY(-10px)}}

/* ---------- product families: 3D tilt cards ---------- */
.oxw-fam-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);perspective:1200px}
.oxw-fam{--a:var(--blue);--at:var(--blue-tint);position:relative;display:flex;flex-direction:column;gap:var(--s3);min-block-size:260px;padding:var(--s6);border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink)!important;text-decoration:none!important;box-shadow:var(--sh-1);transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;overflow:hidden}
.oxw-fam:hover{box-shadow:var(--sh-pop);border-color:color-mix(in srgb,var(--a) 40%,var(--line))}
.oxw-fam:focus-visible{outline:3px solid var(--ring);outline-offset:3px}
.oxw-fam.is-teal{--a:var(--teal);--at:var(--teal-tint)}
.oxw-fam.is-violet{--a:var(--w-violet);--at:var(--w-violet-t)}
.oxw-fam.is-ink{--a:var(--ink);--at:var(--w-ink-t)}
.oxw-fam.is-amber{--a:var(--amber);--at:var(--amber-tint)}
.oxw-fam.is-pink{--a:var(--w-pink);--at:var(--w-pink-t)}
.oxw-fam-glare{position:absolute;inset:0;background:radial-gradient(400px circle at var(--gx,50%) var(--gy,0%),color-mix(in srgb,var(--a) 12%,transparent),transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none}
.oxw-fam:hover .oxw-fam-glare{opacity:1}
.oxw-fam-ic{display:grid;place-items:center;inline-size:56px;block-size:56px;border-radius:16px;background:var(--at);color:var(--a);font-size:24px;transform:translateZ(40px);box-shadow:0 12px 24px -12px color-mix(in srgb,var(--a) 60%,transparent)}
.oxw-fam-t{font-size:var(--fs-600);font-weight:800;transform:translateZ(28px)}
.oxw-fam-d{flex:1;color:var(--ink-2);font-size:var(--fs-300);line-height:var(--lh-snug);transform:translateZ(16px)}
.oxw-fam-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-block-start:var(--s4);border-block-start:1px dashed var(--line-2);transform:translateZ(20px)}
.oxw-fam-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;font-size:var(--fs-200);color:var(--ink-3)}
.oxw-fam-price b{color:var(--ink);font-size:var(--fs-500);font-weight:800}
.oxw-fam-go{display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:12px;background:var(--a);color:#fff;transition:transform .2s}
.oxw-fam:hover .oxw-fam-go{transform:translateX(-4px)}
.oxw-fam-n{position:absolute;inset-block-start:var(--s5);inset-inline-end:var(--s5);padding:2px 10px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-3);font-size:var(--fs-100);font-weight:700}

/* ---------- data centre: isometric racks ---------- */
.oxw-dc{background:none}
.oxw-dc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,80px)}
.oxw-dc-scene{display:grid;place-items:center;min-block-size:420px}
.oxw-iso{direction:ltr;position:relative;inline-size:340px;block-size:340px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-45deg);animation:oxw-iso 16s ease-in-out infinite alternate}
@keyframes oxw-iso{to{transform:rotateX(58deg) rotateZ(-30deg)}}
.oxw-iso-floor{position:absolute;inset:-30px;border-radius:24px;background:
  repeating-linear-gradient(0deg,var(--floor-line) 0 1px,transparent 1px 34px),repeating-linear-gradient(90deg,var(--floor-line) 0 1px,transparent 1px 34px),var(--floor);
  box-shadow:0 40px 80px -30px color-mix(in srgb,var(--ink) 35%,transparent);transform:translateZ(-1px)}
.oxw-rack{--h:180px;position:absolute;inset-block-start:calc(40px + var(--i) * 96px);inset-inline-start:40px;inline-size:220px;block-size:64px;transform-style:preserve-3d;z-index:1}
.oxw-rack>span{position:absolute;display:block}
.oxw-rack>.oxw-rack-front{display:flex}
.oxw-rack-top{inset:0;background:var(--rack-frame);transform:translateZ(var(--h));box-shadow:inset 0 0 0 1px var(--rack-edge)}
.oxw-rack-front{inset-inline:0;inset-block-end:0;block-size:var(--h);display:flex;flex-direction:column-reverse;gap:4px;padding:8px;background:var(--term-bg);transform-origin:bottom;transform:rotateX(-90deg);border:1px solid var(--rack-edge)}
.oxw-rack-front i{flex:1;display:block;border-radius:3px;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(148,163,184,.14) 6px 7px),linear-gradient(180deg,#2A3B55,#1B2840);border:1px solid #3A4E6E;position:relative}
.oxw-rack-front i::after{content:"";position:absolute;inset-block-start:calc(50% - 3px);block-size:6px;inset-inline-end:10px;inline-size:6px;border-radius:50%;background:var(--led-a);box-shadow:0 0 8px var(--led-a);animation:oxw-blink 1.6s calc(var(--u) * .23s + var(--i) * .5s) infinite}
.oxw-rack-front i:nth-child(3n)::after{background:var(--led-b);box-shadow:0 0 8px var(--led-b)}
.oxw-rack-side{inset-block:0;inset-inline-end:0;inline-size:var(--h);background:linear-gradient(90deg,color-mix(in srgb,var(--rack-frame) 70%,var(--ink)),color-mix(in srgb,var(--rack-frame) 88%,var(--ink)));transform-origin:right;transform:rotateY(90deg)}
@keyframes oxw-blink{50%{opacity:.25}}
.oxw-packet{position:absolute;inset-block-start:0;inset-inline-start:300px;inline-size:10px;block-size:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 16px var(--teal);transform:translateZ(60px);animation:oxw-packet 3.9s var(--d) linear infinite}
@keyframes oxw-packet{0%{inset-block-start:-20px;opacity:0}10%{opacity:1}90%{opacity:1}100%{inset-block-start:330px;opacity:0}}
.oxw-dc-tx h2{margin:var(--s3) 0 var(--s6);font-size:clamp(var(--fs-700),3vw,var(--fs-900));line-height:var(--lh-display);font-weight:800}
.oxw-steps{display:grid;gap:var(--s4);margin:0 0 var(--s6);padding:0;list-style:none}
.oxw-steps li{display:flex;gap:var(--s4);padding:var(--s4) var(--s5);border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--sh-1)}
.oxw-steps b{display:block;margin-block-end:4px;font-size:var(--fs-500)}
.oxw-steps p{margin:0;color:var(--ink-2);font-size:var(--fs-300);line-height:var(--lh-snug)}
.oxw-step-n{flex:none;display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;font-weight:900;font-size:var(--fs-500);box-shadow:0 10px 20px -10px var(--blue)}
.oxw-dc-act{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* ---------- features ---------- */
.oxw-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.oxw-why-i{padding:var(--s6);border:1px solid var(--line);border-radius:18px;background:var(--surface);transition:transform .2s var(--ease),box-shadow .2s}
.oxw-why-i:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.oxw-why-ic{display:grid;place-items:center;inline-size:48px;block-size:48px;margin-block-end:var(--s4);border-radius:14px;background:var(--blue-tint);color:var(--blue);font-size:20px}
.oxw-why-i:nth-child(2n) .oxw-why-ic{background:var(--teal-tint);color:var(--teal)}
.oxw-why-i b{display:block;margin-block-end:6px;font-size:var(--fs-500)}
.oxw-why-i p{margin:0;color:var(--ink-2);font-size:var(--fs-300);line-height:var(--lh-snug)}

/* ---------- article cards ---------- */
.oxw-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.oxw-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s}
.oxw-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.oxw-card-media{display:block;aspect-ratio:12/7;background:var(--surface-2);overflow:hidden}
.oxw-card-media img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform .4s var(--ease)}
.oxw-card:hover .oxw-card-media img{transform:scale(1.04)}
.oxw-card-ph{display:grid;place-items:center;block-size:100%;color:var(--ink-3);font-size:32px}
.oxw-card-body{display:flex;flex:1;flex-direction:column;gap:var(--s2);padding:var(--s5)}
.oxw-card-cat{align-self:flex-start;padding:2px 10px;border-radius:var(--r-pill);background:var(--blue-tint);color:var(--blue)!important;font-size:var(--fs-100);font-weight:700;text-decoration:none!important}
.oxw-card-t{margin:0;font-size:var(--fs-500);line-height:var(--lh-tight);font-weight:800}
.oxw-card-t a{color:var(--ink)!important;text-decoration:none!important}
.oxw-card-t a:hover{color:var(--blue)!important}
.oxw-card-x{flex:1;margin:0;color:var(--ink-2);font-size:var(--fs-300);line-height:var(--lh-snug)}
.oxw-card-meta{display:flex;flex-wrap:wrap;gap:var(--s4);color:var(--ink-3);font-size:var(--fs-200)}
.oxw-card-meta i{margin-inline-end:5px}

/* ---------- FAQ ---------- */
.oxw-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:start}
.oxw-faq-grid .oxw-head .ox-btn{margin-block-start:var(--s5)}
.oxw-faq-list{display:grid;gap:var(--s3)}
.oxw-q{border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:border-color .2s,box-shadow .2s}
.oxw-q[open]{border-color:color-mix(in srgb,var(--blue) 35%,var(--line));box-shadow:var(--sh-2)}
.oxw-q summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-block-size:56px;padding:var(--s4) var(--s5);font-weight:700;color:var(--ink);cursor:pointer;list-style:none}
.oxw-q summary::-webkit-details-marker{display:none}
.oxw-q summary i{flex:none;display:grid;place-items:center;inline-size:30px;block-size:30px;border-radius:9px;background:var(--surface-2);color:var(--ink-2);transition:transform .2s,background .2s}
.oxw-q[open] summary i{transform:rotate(45deg);background:var(--blue);color:#fff}
.oxw-q summary:focus-visible{outline:3px solid var(--ring);outline-offset:-3px;border-radius:16px}
.oxw-q p{margin:0;padding:0 var(--s5) var(--s5);color:var(--ink-2);line-height:var(--lh-body)}

/* ---------- final CTA with a spinning 3D cube ---------- */
.oxw-final-box{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s8);padding:clamp(28px,4vw,48px);border-radius:28px;overflow:hidden;background:
  radial-gradient(600px 300px at 0% 0%,rgba(45,212,191,.22),transparent 70%),radial-gradient(600px 300px at 100% 100%,rgba(96,165,250,.28),transparent 70%),linear-gradient(135deg,#0B1424,#102A4C 60%,#0B2A33);color:#E2E8F0}
.oxw-final-tx h2{margin:0 0 var(--s2);color:#fff;font-size:clamp(var(--fs-700),2.6vw,var(--fs-800));font-weight:900}
.oxw-final-tx p{margin:0;color:#B6C3D8}
.oxw-final-act{display:flex;flex-wrap:wrap;gap:var(--s3)}
.oxw-final-box .ox-btn-line{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff!important}
.oxw-final-cube{--s:84px;position:relative;inline-size:var(--s);block-size:var(--s);transform-style:preserve-3d;animation:oxw-cube 14s linear infinite;margin:var(--s4)}
.oxw-final-cube span{position:absolute;inset:0;border:1px solid rgba(125,211,252,.55);background:linear-gradient(135deg,rgba(20,99,216,.45),rgba(14,147,132,.25));box-shadow:inset 0 0 24px rgba(125,211,252,.35)}
.oxw-final-cube span:nth-child(1){transform:translateZ(calc(var(--s)/2))}
.oxw-final-cube span:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.oxw-final-cube span:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.oxw-final-cube span:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.oxw-final-cube span:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.oxw-final-cube span:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
@keyframes oxw-cube{to{transform:rotateX(360deg) rotateY(720deg)}}

/* ---------- inner pages ---------- */
.oxw-page-hero{padding-block:clamp(32px,5vw,64px) clamp(24px,3vw,40px);background:linear-gradient(180deg,var(--surface-2),transparent)}
.oxw-page-t{margin:var(--s3) 0;font-size:clamp(var(--fs-800),3.4vw,var(--fs-1000));line-height:var(--lh-display);font-weight:900;color:var(--ink)}
.oxw-page-lede{max-inline-size:720px;color:var(--ink-2);line-height:var(--lh-body)}
.oxw-crumbs{font-size:var(--fs-200);color:var(--ink-3)}
.oxw-crumbs a{color:var(--ink-2)!important}
.oxw-search{display:flex;align-items:center;gap:var(--s2);max-inline-size:520px;margin-block-start:var(--s5);padding:6px 6px 6px 6px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface)}
.oxw-search>i{padding-inline:8px 0;color:var(--ink-3)}
.oxw-search input{flex:1;min-inline-size:0;min-block-size:40px;border:0;background:transparent;color:var(--ink);font:inherit;outline:none}
.oxw-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-tint)}
.oxw-cover{margin:var(--s6) 0;border-radius:20px;overflow:hidden}
.oxw-cover img{inline-size:100%;block-size:auto;display:block}
.oxw-prose{padding-block:var(--s6) var(--s10);color:var(--ink);font-size:var(--fs-500);line-height:2}
.oxw-prose>*:first-child{margin-block-start:0}
.oxw-prose h2{margin:var(--s10) 0 var(--s4);font-size:var(--fs-800);line-height:var(--lh-tight);font-weight:800}
.oxw-prose h3{margin:var(--s8) 0 var(--s3);font-size:var(--fs-700);font-weight:800}
.oxw-prose h4{margin:var(--s6) 0 var(--s3);font-size:var(--fs-600);font-weight:700}
.oxw-prose p,.oxw-prose ul,.oxw-prose ol{margin:0 0 var(--s5)}
.oxw-prose a{color:var(--blue);text-underline-offset:3px}
.oxw-prose img{max-inline-size:100%;block-size:auto;border-radius:14px}
.oxw-prose blockquote{margin:var(--s6) 0;padding:var(--s4) var(--s6);border-inline-start:4px solid var(--blue);border-radius:0 12px 12px 0;background:var(--blue-tint);color:var(--ink)}
.oxw-prose pre,.oxw-prose code{font-family:var(--mono);direction:ltr;text-align:left}
.oxw-prose pre{padding:var(--s5);border-radius:14px;background:var(--term-bg);color:var(--term-ink);overflow:auto;font-size:var(--fs-300);line-height:1.7}
.oxw-prose :not(pre)>code{padding:2px 6px;border-radius:6px;background:var(--surface-2);font-size:.88em}
.oxw-prose table{inline-size:100%;margin:0 0 var(--s6);border-collapse:collapse;font-size:var(--fs-300);display:block;overflow-x:auto}
.oxw-prose th,.oxw-prose td{padding:10px 12px;border:1px solid var(--line);text-align:start}
.oxw-prose th{background:var(--surface-2)}
.oxw-tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-block-end:var(--s6)}
.oxw-tags a{padding:4px 12px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2)!important;font-size:var(--fs-200);text-decoration:none!important}
.oxw-cta-inline{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-block:var(--s6) var(--s10);padding:var(--s5) var(--s6);border:1px solid color-mix(in srgb,var(--blue) 30%,var(--line));border-radius:18px;background:var(--blue-tint)}
.oxw-cta-inline b{display:block;font-size:var(--fs-500)}
.oxw-cta-inline p{margin:4px 0 0;color:var(--ink-2);font-size:var(--fs-300)}
.oxw-pager{display:flex;justify-content:center;gap:6px;margin-block-start:var(--s8)}
.oxw-pager .page-numbers{display:grid;place-items:center;min-inline-size:40px;block-size:40px;padding-inline:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)!important;text-decoration:none!important}
.oxw-pager .current{background:var(--blue);border-color:var(--blue);color:#fff!important}
.oxw-empty{display:grid;place-items:center;gap:var(--s3);padding:var(--s16) var(--s4);color:var(--ink-3)}
.oxw-empty i{font-size:40px}
.oxw-404{padding-block:clamp(64px,10vw,140px);text-align:center}
.oxw-404 h1{margin:var(--s8) 0 var(--s3);font-size:clamp(var(--fs-800),4vw,var(--fs-1000));font-weight:900}
.oxw-404 p{margin:0 auto;max-inline-size:520px;color:var(--ink-2)}
.oxw-404 .oxw-search{margin:var(--s6) auto var(--s4)}
.oxw-final-cube.is-404{margin-inline:auto;--s:100px}
.oxw-final-cube.is-404 span{border-color:color-mix(in srgb,var(--blue) 50%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 30%,transparent),color-mix(in srgb,var(--teal) 18%,transparent))}

/* scroll reveal */
.oxw-reveal{opacity:0;translate:0 24px;transition:opacity .7s var(--ease),translate .7s var(--ease),transform .25s var(--ease),box-shadow .25s,border-color .25s}
.oxw-reveal.is-in{opacity:1;translate:0 0}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .oxw-fam-grid,.oxw-why-grid,.oxw-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oxw-final-box{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}
}
@media (max-width:900px){
  .oxw-hero-grid,.oxw-dc-grid,.oxw-faq-grid{grid-template-columns:minmax(0,1fr)}
  .oxw-hero-3d{max-inline-size:440px;order:-1}
  .oxw-dc-scene{min-block-size:320px;order:2}
  .oxw-iso{scale:.8}
}
@media (max-width:640px){
  .oxw-fam-grid,.oxw-why-grid,.oxw-cards{grid-template-columns:minmax(0,1fr)}
  .oxw-head.is-row{flex-direction:column;align-items:flex-start}
  .oxw-chip{font-size:var(--fs-100);padding:8px 10px}
  .oxw-chip.is-a{inset-inline-start:0}
  .oxw-chip.is-b{inset-inline-end:0}
  .oxw-domain .ox-btn{padding-inline:var(--s3)}
  .oxw-cta-inline{flex-direction:column;align-items:flex-start}
  .oxw-iso{scale:.62}
  .oxw-dc-scene{min-block-size:260px}
}
@media (prefers-reduced-motion:reduce){
  .oxw-aurora,.oxw-chip,.oxw-iso,.oxw-final-cube,.oxw-packet,.oxw-rack-front i::after,.oxw-pulse{animation:none!important}
  .oxw-reveal{opacity:1;translate:0 0;transition:none}
  .oxw-fam{transform:none!important}
}

/* globe city label */
.oxw-globe-tip{position:absolute;z-index:2;transform:translate(-50%,calc(-100% - 12px));padding:4px 10px;border-radius:8px;background:var(--ink);color:var(--surface);font-size:var(--fs-200);font-weight:700;white-space:nowrap;pointer-events:none;box-shadow:var(--sh-2)}
.oxw-globe-tip[hidden]{display:none}

/* 3D data hall (dc3d.js); the CSS racks stay as the no-WebGL fallback */
.oxw-dc-scene{position:relative}
.oxw-dc-3d{position:absolute;inset:-6% -8%;z-index:1}
.oxw-dc-3d canvas{inline-size:100%!important;block-size:100%!important;display:block}
.oxw-dc-3d.is-live~.oxw-iso{visibility:hidden}
.oxw-dc-scene{min-block-size:480px}
.oxw-steps li{transition:border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.oxw-steps li.is-active{border-color:color-mix(in srgb,var(--teal) 55%,var(--line));box-shadow:0 14px 30px -18px color-mix(in srgb,var(--teal) 70%,transparent),var(--sh-1);transform:translateX(-6px)}
.oxw-steps li.is-active .oxw-step-n{box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 22%,transparent),0 10px 20px -10px var(--teal)}
@media (max-width:900px){.oxw-dc-scene{min-block-size:360px}.oxw-dc-3d{inset:-4% -4%}}
@media (max-width:640px){.oxw-dc-scene{min-block-size:300px}}

/* the data hall fades into the page instead of ending at the canvas edge */


/* ---------- cloud calculator card, left edge of every page (inc/calc-promo.php) ---------- */
.oxcp{position:fixed;left:20px;bottom:20px;z-index:900;inline-size:300px;opacity:0;translate:-24px 0;transition:opacity .35s var(--ease),translate .35s var(--ease)}
.oxcp.is-in{opacity:1;translate:0 0}
.oxcp-a{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:10px 12px;padding:14px;border:1px solid color-mix(in srgb,var(--blue) 30%,var(--line));border-radius:20px;overflow:hidden;color:#E2E8F0!important;text-decoration:none!important;background:radial-gradient(220px 120px at 100% 0%,rgba(45,212,191,.28),transparent 70%),linear-gradient(150deg,#0B1424,#102A4C 65%,#0B2A33);box-shadow:0 24px 50px -20px rgba(11,20,36,.65);transition:translate .25s var(--ease),box-shadow .25s}
.oxcp-a:hover{translate:0 -3px;box-shadow:0 30px 60px -20px rgba(11,20,36,.75)}
.oxcp-art{grid-row:1/3;display:grid;align-content:center;gap:6px;inline-size:56px;padding:10px 9px;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.oxcp-art i{position:relative;display:block;block-size:5px;border-radius:9px;background:rgba(255,255,255,.12)}
.oxcp-art i::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:var(--w);border-radius:inherit;background:linear-gradient(90deg,#2DD4BF,#7DD3FC);animation:oxcp-w 3.2s ease-in-out infinite alternate}
.oxcp-art i::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:var(--w);inline-size:9px;block-size:9px;margin:-4.5px;border-radius:50%;background:#fff;box-shadow:0 0 8px #2DD4BF;animation:oxcp-k 3.2s ease-in-out infinite alternate}
.oxcp-art i:nth-child(2)::before,.oxcp-art i:nth-child(2)::after{animation-delay:-1.1s}
.oxcp-art i:nth-child(3)::before,.oxcp-art i:nth-child(3)::after{animation-delay:-2.2s}
@keyframes oxcp-w{from{inline-size:20%}to{inline-size:var(--w)}}
@keyframes oxcp-k{from{inset-inline-start:20%}to{inset-inline-start:var(--w)}}
.oxcp-tx b{display:block;color:#fff;font-size:var(--fs-300);font-weight:900}
.oxcp-tx small{display:block;color:#B6C3D8;font-size:var(--fs-100);line-height:var(--lh-snug)}
.oxcp-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:36px;border-radius:11px;background:linear-gradient(90deg,var(--blue),#14b8a6);color:#fff;font-size:var(--fs-200);font-weight:800}
.oxcp-x{position:absolute;inset-block-start:-9px;left:-9px;z-index:2;display:grid;place-items:center;inline-size:28px;block-size:28px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink-2);font-size:12px;cursor:pointer;box-shadow:var(--sh-1)}
.oxcp-x:hover{color:var(--red,#c8372d)}
.oxcp-a:focus-visible,.oxcp-x:focus-visible,.oxcp-fab:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.oxcp-fab{display:none}
@media (max-width:760px){
  .oxcp{left:14px;bottom:calc(14px + env(safe-area-inset-bottom));inline-size:auto}
  .oxcp-a{display:none}
  .oxcp-fab{display:grid;place-items:center;inline-size:54px;block-size:54px;border-radius:18px;background:linear-gradient(135deg,var(--blue),#14b8a6);color:#fff!important;font-size:20px;text-decoration:none!important;box-shadow:0 14px 30px -10px rgba(20,99,216,.6)}
  .oxcp-x{inset-block-start:-8px;left:-8px;inline-size:24px;block-size:24px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){.oxcp-art i::before,.oxcp-art i::after{animation:none}}