/* ============================================================
   POT — Cinematic Site Framework  (pot-site.css)
   Global, namespaced px-*  ·  loaded site-wide via Divi-Child
   Design: dark plum-black + POT orange · glassmorphism · motion
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --px-bg:#070310;--px-bg2:#0d0720;--px-panel:#140b26;--px-panel2:#1b1033;
  --px-orange:#ff8a00;--px-orange-br:#ffb43d;--px-amber:#ffcf6b;
  --px-crimson:#cc1f3c;--px-green:#23c483;
  --px-line:rgba(255,170,80,.14);--px-line2:rgba(255,170,80,.30);
  --px-text:#fbf6ff;--px-dim:#b9aed3;--px-faint:#827798;--px-glass:rgba(255,255,255,.05);
  --px-grad:linear-gradient(120deg,#d68f12 0%,#f0aa30 50%,#ffce6b 100%);
  --px-sans:'Inter',system-ui,sans-serif;--px-disp:'Space Grotesk','Inter',sans-serif;--px-mono:'JetBrains Mono',monospace;
}

/* ---- page shell ---- */
body.potx{background:var(--px-bg);color:var(--px-text);overflow-x:hidden}
body.potx #page-container,body.potx #main-content,body.potx .et_builder_inner_content,
body.potx #et-boc,body.potx .et-l{background:transparent !important}
body.potx .et_pb_section,body.potx .et_pb_row{background:transparent !important;padding:0 !important}
body.potx .et_pb_module{margin:0 !important}
/* Divi 5 flex sections shrink modules to fit content, which collapses
   auto-fill/auto-fit grids — force a definite full width down the chain */
body.potx .et_flex_section{align-items:stretch}
body.potx .et_flex_section>.et_pb_module,body.potx .et_pb_code_inner,body.potx .px-page{width:100%}
.potx .px-page,.potx .px-page *{box-sizing:border-box}
.px-page{position:relative;z-index:5;font-family:var(--px-sans);-webkit-font-smoothing:antialiased}

/* ---- ambient animated background (injected once in footer) ---- */
.px-ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.px-ambient i{position:absolute;border-radius:50%;filter:blur(95px);opacity:.4;mix-blend-mode:screen}
.px-ambient .a1{width:720px;height:720px;left:-160px;top:80px;background:radial-gradient(circle,#ff8a00,transparent 70%);animation:pxd1 18s ease-in-out infinite}
.px-ambient .a2{width:640px;height:640px;right:-180px;top:520px;background:radial-gradient(circle,#f0aa30,transparent 70%);opacity:.22;animation:pxd2 22s ease-in-out infinite}
.px-ambient .a3{width:720px;height:720px;left:30%;top:1200px;background:radial-gradient(circle,#d68f12,transparent 72%);opacity:.18;animation:pxd3 26s ease-in-out infinite}
@keyframes pxd1{50%{transform:translate(110px,70px) scale(1.12)}}
@keyframes pxd2{50%{transform:translate(-90px,110px) scale(1.08)}}
@keyframes pxd3{50%{transform:translate(70px,-80px) scale(1.15)}}
.px-grid-ov{position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,170,80,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,170,80,.04) 1px,transparent 1px);
  background-size:54px 54px;-webkit-mask-image:radial-gradient(circle at 50% 18%,#000 26%,transparent 72%);mask-image:radial-gradient(circle at 50% 18%,#000 26%,transparent 72%)}

/* ---- layout ---- */
.px-wrap{position:relative;z-index:5;max-width:1615px;margin:0 auto;padding:0 40px}
.px-sec{position:relative;z-index:5;padding:64px 0 0}
.px-tag{font-family:var(--px-mono);font-size:12.5px;letter-spacing:2px;color:var(--px-orange);text-transform:uppercase}
.px-h2{font-family:var(--px-disp);font-weight:600;font-size:40px;line-height:1.08;letter-spacing:-.5px;margin:12px 0 0;color:var(--px-text)}
.px-h2 .g{background:var(--px-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.px-lead{color:var(--px-dim);font-weight:300;font-size:17px;margin:14px 0 0;max-width:640px;line-height:1.6}
.px-center{text-align:center;margin-left:auto;margin-right:auto}
.px-center .px-lead{margin-left:auto;margin-right:auto}

/* ---- buttons ---- */
.px-btn{font-family:var(--px-sans);font-weight:600;font-size:14.5px;border-radius:12px;padding:12px 24px;cursor:pointer;border:0;text-decoration:none;display:inline-flex;align-items:center;gap:9px;transition:.22s}
.px-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.px-btn-pri{background:var(--px-grad);color:#fff !important;text-shadow:0 1px 2px rgba(74,42,0,.55),0 0 10px rgba(74,42,0,.30);box-shadow:0 8px 26px rgba(216,150,20,.34),inset 0 1px 0 rgba(255,255,255,.30)}
.px-btn-pri:hover{transform:translateY(-2px)}
.px-btn-gh{background:var(--px-glass);color:var(--px-text) !important;border:1px solid var(--px-line2)}
.px-btn-gh:hover{border-color:var(--px-orange-br);color:var(--px-orange-br) !important}

/* ---- hero ---- */
.px-hero{position:relative;overflow:hidden;margin-bottom:8px;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.px-hero-bg{position:absolute;inset:0;z-index:1;background-position:center;background-size:cover;
  -webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 100%);mask-image:linear-gradient(180deg,#000 52%,transparent 100%)}
.px-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(7,3,16,.95) 24%,rgba(7,3,16,.6) 60%,rgba(255,138,0,.32))}
.px-hero-in{position:relative;z-index:5;max-width:1615px;margin:0 auto;padding:118px 40px 88px}
.px-hero.px-narrow .px-hero-in{max-width:1040px;text-align:center}
.px-eyebrow{font-family:var(--px-mono);font-size:13px;letter-spacing:2px;color:var(--px-amber);text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--px-line2);padding:8px 16px;border-radius:999px;background:rgba(255,138,0,.06)}
.px-h1{font-family:var(--px-disp);font-weight:700;font-size:68px;line-height:1.02;letter-spacing:-1.6px;margin:24px 0 0;color:var(--px-text)}
.px-h1 .g{background:var(--px-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.px-sub{font-size:19px;color:#d9d2ec;line-height:1.6;max-width:600px;margin:22px 0 0;font-weight:300}
.px-narrow .px-sub{margin-left:auto;margin-right:auto}
.px-hero-cta{display:flex;gap:16px;margin:32px 0 0;flex-wrap:wrap}
.px-narrow .px-hero-cta{justify-content:center}

/* ---- KPI row ---- */
.px-kpis{display:flex;flex-wrap:wrap;gap:44px;margin:48px 0 0}
.px-narrow .px-kpis{justify-content:center}
.px-kpi .n{font-family:var(--px-disp);font-weight:700;font-size:36px;line-height:1.3;padding-bottom:.08em;background:linear-gradient(180deg,#fff,#ffcf6b);-webkit-background-clip:text;background-clip:text;color:transparent}
.px-kpi .l{font-size:12px;color:var(--px-faint);margin-top:4px;letter-spacing:.5px;text-transform:uppercase;font-family:var(--px-mono)}

/* ---- feature strip (glass cards) ---- */
.px-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:34px 0 0}
.px-strip-3{grid-template-columns:repeat(3,1fr)}
.px-scard{background:var(--px-glass);border:1px solid var(--px-line);border-radius:16px;padding:24px;backdrop-filter:blur(8px);transition:.25s}
.px-scard:hover{transform:translateY(-4px);border-color:var(--px-line2)}
.px-scard .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;color:var(--px-orange-br);background:rgba(255,138,0,.1);border:1px solid var(--px-line2);margin-bottom:15px}
.px-scard .ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.px-scard h4{font-family:var(--px-disp);font-weight:600;font-size:18px;color:var(--px-text)}
.px-scard .v{font-family:var(--px-mono);color:var(--px-amber);font-size:13px;margin-top:6px}
.px-scard small{color:var(--px-faint);font-size:13.5px;display:block;margin-top:9px;line-height:1.55}

/* ---- bento ---- */
.px-bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(232px,auto);gap:22px;margin:36px 0 0}
.px-card{position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--px-line);background:linear-gradient(160deg,var(--px-panel),var(--px-bg2));padding:26px;transition:.3s;text-decoration:none;display:flex;flex-direction:column}
.px-card:hover{transform:translateY(-4px);border-color:var(--px-line2)}
.px-card::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;filter:blur(60px);opacity:.5;right:-60px;top:-60px;background:var(--cl,#ff8a00)}
.px-hx{position:relative;z-index:2;width:52px;height:58px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;color:#fff;background:var(--cg,var(--px-grad));box-shadow:0 6px 24px rgba(0,0,0,.4)}
.px-hx svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(56,30,0,.7))}
.px-card h3{position:relative;z-index:2;font-family:var(--px-disp);font-weight:600;font-size:22px;margin:18px 0 0;color:var(--px-text)}
.px-card p{position:relative;z-index:2;color:var(--px-dim);font-size:14px;font-weight:300;line-height:1.55;margin:9px 0 0}
.px-card .go{position:relative;z-index:2;margin-top:auto;padding-top:16px;font-family:var(--px-mono);font-size:13px;color:var(--px-orange-br);display:inline-flex;align-items:center;gap:7px}
.px-card .go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.px-span2{grid-column:span 2}.px-span3{grid-column:span 3}.px-span4{grid-column:span 4}.px-row2{grid-row:span 2}
.px-badge{position:absolute;z-index:3;top:22px;right:22px;font-family:var(--px-mono);font-size:11px;color:var(--px-amber);border:1px solid var(--px-line2);border-radius:999px;padding:5px 12px;background:rgba(255,138,0,.08)}
.px-cfeat{position:relative;z-index:2;margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:13px 26px}
.px-cfeat span{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;font-weight:400;line-height:1.4;color:var(--px-text);opacity:.92}
.px-cfeat span::before{content:"";flex:none;width:8px;height:8px;margin-top:4px;border-radius:2px;background:var(--cg,var(--px-grad));transform:rotate(45deg);box-shadow:0 0 12px var(--cl,#ff8a00)}

/* ---- split feature (text + visual) ---- */
.px-split{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;margin:36px 0 0}
.px-split.rev .px-split-media{order:-1}
.px-split-media{aspect-ratio:4/3;border-radius:22px;border:1px solid var(--px-line2);background-position:center;background-size:cover;box-shadow:0 0 70px rgba(255,138,0,.32),inset 0 0 60px rgba(0,0,0,.5)}
.px-flist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.px-flist li{display:flex;gap:13px;align-items:flex-start;color:var(--px-dim);font-size:15.5px;line-height:1.5}
.px-flist li b{color:var(--px-text);font-weight:600;font-family:var(--px-disp)}
.px-flist .tk{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:rgba(255,138,0,.12);border:1px solid var(--px-line2);display:grid;place-items:center;color:var(--px-orange-br);margin-top:1px}
.px-flist .tk svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- spec table ---- */
.px-spec{margin:30px 0 0;border:1px solid var(--px-line);border-radius:18px;overflow:hidden;background:var(--px-glass);backdrop-filter:blur(8px)}
.px-spec table{width:100%;border-collapse:collapse}
.px-spec th,.px-spec td{padding:15px 22px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--px-line)}
.px-spec th{font-family:var(--px-mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--px-orange);background:rgba(255,138,0,.05)}
.px-spec td{color:var(--px-dim)}
.px-spec td:first-child{color:var(--px-text);font-weight:600;font-family:var(--px-disp)}
.px-spec tr:last-child td{border-bottom:0}
/* 2-column spec sheets → centred 2-up grid of icon + label/value cells (no wide dead-space table) */
.px-specgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:960px;margin:32px auto 0}
.px-specitem{display:flex;align-items:center;gap:16px;background:linear-gradient(150deg,var(--px-panel),var(--px-bg2));
  border:1px solid var(--px-line);border-radius:15px;padding:16px 20px;backdrop-filter:blur(8px);
  transition:transform .25s,border-color .25s,box-shadow .25s;position:relative;overflow:hidden}
.px-specitem::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--px-grad);opacity:0;transition:opacity .25s}
.px-rtl .px-specitem::before{inset:0 0 0 auto}
.px-specitem:hover{transform:translateY(-3px);border-color:var(--px-line2);box-shadow:0 14px 36px rgba(0,0,0,.4)}
.px-specitem:hover::before{opacity:1}
.px-specitem .si-ic{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  color:var(--px-orange-br);background:rgba(255,138,0,.1);border:1px solid var(--px-line2);transition:.25s}
.px-specitem .si-ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.px-specitem:hover .si-ic{color:var(--px-amber);border-color:var(--px-orange);background:rgba(255,138,0,.16);box-shadow:0 0 18px rgba(255,138,0,.28)}
.px-specitem .si-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.px-specitem .k{font-family:var(--px-mono);font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--px-orange)}
.px-specitem .v{font-family:var(--px-disp);font-weight:600;color:var(--px-text);font-size:15px;line-height:1.35}
@media(max-width:760px){.px-specgrid{grid-template-columns:1fr;max-width:560px}}

/* ---- pricing plans ---- */
.px-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:22px;margin:34px 0 0}
.px-plan{position:relative;border:1px solid var(--px-line);border-radius:20px;background:linear-gradient(165deg,var(--px-panel),var(--px-bg2));padding:30px 26px;display:flex;flex-direction:column;transition:.28s}
.px-plan:hover{transform:translateY(-5px);border-color:var(--px-line2)}
.px-plan.pop{border-color:var(--px-orange);box-shadow:0 18px 50px rgba(255,138,0,.18)}
.px-plan .pname{font-family:var(--px-disp);font-weight:600;font-size:17px;color:var(--px-amber);letter-spacing:.3px}
.px-plan .pop-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--px-grad);color:#fff;font-family:var(--px-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap}
.px-plan .price{font-family:var(--px-disp);font-weight:700;font-size:40px;color:var(--px-text);margin:14px 0 2px;line-height:1}
.px-plan .price span{font-size:14px;font-weight:400;color:var(--px-faint)}
.px-plan ul{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:11px}
.px-plan li{display:flex;gap:10px;align-items:flex-start;color:var(--px-dim);font-size:14px;line-height:1.4}
.px-plan li svg{flex:0 0 auto;width:16px;height:16px;stroke:var(--px-green);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.px-plan .px-btn{margin-top:auto;justify-content:center}

/* ---- game grid ---- */
.px-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:16px;margin:30px 0 0}
.px-game{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--px-line);min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;text-decoration:none;background-size:cover;background-position:center;transition:.28s}
.px-game::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,3,16,.15),rgba(7,3,16,.88))}
.px-game:hover{transform:translateY(-4px);border-color:var(--px-orange)}
.px-game-soon{cursor:default}.px-game-soon:hover{transform:none;border-color:var(--px-line)}
.px-game>*{position:relative;z-index:2}
.px-game .gname{font-family:var(--px-disp);font-weight:600;font-size:14.5px;color:#fff;line-height:1.2}
.px-game .gprice{font-family:var(--px-mono);font-size:12.5px;color:var(--px-amber);margin-top:5px}
.px-game .gtag{position:absolute;top:10px;right:10px;z-index:3;font-family:var(--px-mono);font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#fff;background:rgba(204,31,60,.85);padding:3px 9px;border-radius:999px}

/* ---- logo strip ---- */
.px-logos{display:flex;flex-wrap:wrap;gap:16px;margin:28px 0 0;align-items:stretch}
.px-logo{flex:1 1 120px;min-width:110px;background:var(--px-glass);border:1px solid var(--px-line);border-radius:14px;padding:18px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.px-logo img{height:38px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.85}
.px-logo span{font-size:12px;color:var(--px-faint);font-family:var(--px-mono)}

/* ---- chips / pill list ---- */
.px-chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.px-chip{font-family:var(--px-mono);font-size:13px;color:var(--px-amber);border:1px solid var(--px-line2);border-radius:999px;padding:8px 16px;background:rgba(255,138,0,.06);display:inline-flex;align-items:center;gap:8px}
.px-chip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- backbone band ---- */
.px-band{position:relative;z-index:5;margin:64px 0 0;border-radius:26px;border:1px solid var(--px-line);background:linear-gradient(140deg,var(--px-panel2),var(--px-bg));overflow:hidden;padding:54px}
.px-band-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr .9fr;gap:46px;align-items:center}
.px-bstats{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:30px}
.px-bstat .n{font-family:var(--px-disp);font-weight:700;font-size:38px;line-height:1.3;color:var(--px-orange-br)}
.px-bstat .l{color:var(--px-dim);font-size:14px;margin-top:4px}
.px-netimg{aspect-ratio:1;border-radius:22px;border:1px solid var(--px-line2);background-position:center;background-size:cover;box-shadow:0 0 70px rgba(255,138,0,.4),inset 0 0 60px rgba(0,0,0,.5)}

/* ---- faq ---- */
.px-faq{margin:28px 0 0;display:grid;gap:12px}
.px-faq details{border:1px solid var(--px-line);border-radius:14px;background:var(--px-glass);padding:0 22px;overflow:hidden}
.px-faq summary{cursor:pointer;list-style:none;padding:18px 0;font-family:var(--px-disp);font-weight:600;font-size:16px;color:var(--px-text);display:flex;justify-content:space-between;align-items:center;gap:14px}
.px-faq summary::-webkit-details-marker{display:none}
.px-faq summary::after{content:"+";font-family:var(--px-mono);color:var(--px-orange);font-size:22px;transition:.2s}
.px-faq details[open] summary::after{transform:rotate(45deg)}
.px-faq p{color:var(--px-dim);font-size:14.5px;line-height:1.6;font-weight:300;margin:0 0 18px;padding-top:2px}

/* ---- contact ---- */
.px-contact{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:34px 0 0}
.px-cform{background:var(--px-glass);border:1px solid var(--px-line);border-radius:20px;padding:30px;backdrop-filter:blur(8px)}
.px-field{margin-bottom:16px}
.px-field label{display:block;font-family:var(--px-mono);font-size:12px;color:var(--px-amber);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
.px-field input,.px-field textarea{width:100%;background:rgba(7,3,16,.6);border:1px solid var(--px-line2);border-radius:11px;padding:13px 15px;color:var(--px-text);font-family:var(--px-sans);font-size:15px}
.px-field input:focus,.px-field textarea:focus{outline:none;border-color:var(--px-orange)}
.px-cinfo{display:grid;gap:16px;align-content:start}
.px-cinfo .ci{display:flex;gap:14px;align-items:center;background:var(--px-glass);border:1px solid var(--px-line);border-radius:16px;padding:20px}
.px-cinfo .ci .ic{width:44px;height:44px;flex:0 0 auto;border-radius:11px;background:rgba(255,138,0,.1);border:1px solid var(--px-line2);display:grid;place-items:center;color:var(--px-orange-br)}
.px-cinfo .ci .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.px-cinfo .ci .t{font-family:var(--px-disp);font-weight:600;color:var(--px-text);font-size:16px}
.px-cinfo .ci .d{color:var(--px-dim);font-size:14px;margin-top:2px}

/* ---- CTA ---- */
.px-cta{position:relative;z-index:5;text-align:center;padding:90px 40px 80px;max-width:1615px;margin:64px auto 0}
.px-cta-box{border:1px solid var(--px-line);border-radius:28px;background:radial-gradient(120% 140% at 50% 0,rgba(255,138,0,.12),transparent 60%),linear-gradient(160deg,var(--px-panel2),var(--px-bg));padding:64px 30px}
.px-cta h2{font-family:var(--px-disp);font-weight:700;font-size:50px;letter-spacing:-1px;color:var(--px-text)}
.px-cta h2 .g{background:var(--px-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.px-cta p{color:var(--px-dim);font-size:18px;font-weight:300;margin:18px auto 30px;max-width:560px}

/* ---- legal prose ---- */
.px-legal{max-width:880px;margin:0 auto;color:var(--px-dim);font-size:15.5px;line-height:1.75;font-weight:300}
.px-legal h3{font-family:var(--px-disp);color:var(--px-text);font-weight:600;font-size:22px;margin:34px 0 10px}
.px-legal p{margin:0 0 14px}
.px-legal ul{margin:0 0 16px 20px}
.px-legal li{margin:0 0 8px}

/* ---- bio / portfolio ---- */
.px-bio{display:grid;grid-template-columns:.8fr 1.2fr;gap:46px;align-items:center;margin:36px 0 0}
.px-bio-photo{aspect-ratio:3/4;border-radius:22px;border:1px solid var(--px-line2);background-size:cover;background-position:center;box-shadow:0 0 70px rgba(255,138,0,.3)}
.px-bio h3{font-family:var(--px-disp);font-weight:700;font-size:34px;color:var(--px-text);letter-spacing:-.5px}
.px-bio .role{font-family:var(--px-mono);color:var(--px-orange);font-size:14px;margin:8px 0 0;letter-spacing:1px;text-transform:uppercase}

/* ---- responsive ---- */
@media(max-width:1080px){
  .px-strip{grid-template-columns:repeat(2,1fr)}
  .px-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .px-card{min-height:210px}
  .px-span2,.px-span3,.px-span4,.px-row2{grid-column:auto;grid-row:auto}
  .px-split,.px-band-in,.px-contact,.px-bio{grid-template-columns:1fr}
  .px-split.rev .px-split-media{order:0}
}
@media(max-width:720px){
  .px-wrap,.px-hero-in{padding-left:22px;padding-right:22px}
  .px-h1{font-size:42px;letter-spacing:-1px}
  .px-h2{font-size:30px}.px-cta h2{font-size:34px}
  .px-strip{grid-template-columns:1fr}
  .px-kpis{gap:26px}.px-kpi .n{font-size:28px}
  .px-band{padding:32px 22px}
  .px-hero-in{padding-top:84px;padding-bottom:60px}
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  PXH — Home "Mission Control" layer (front page only)     ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ---- scroll reveal (only hides when JS confirmed via html.potx-js) ---- */
html.potx-js .pxh-rev{opacity:0;transform:translateY(26px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
html.potx-js .pxh-rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.potx-js .pxh-rev{opacity:1;transform:none;transition:none}}

/* ---- cinematic video hero ---- */
.pxh-hero{position:relative;overflow:hidden;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;min-height:min(92vh,940px);display:flex;flex-direction:column;justify-content:center}
.pxh-hero-media{position:absolute;inset:0;z-index:1}
.pxh-hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.04)}
.pxh-hero-media .poster{position:absolute;inset:0;background-position:center 32%;background-size:cover}
.pxh-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,3,16,.96) 22%,rgba(7,3,16,.72) 52%,rgba(255,138,0,.28) 100%),linear-gradient(180deg,rgba(7,3,16,.45),transparent 30%,transparent 62%,rgba(7,3,16,.96))}
.pxh-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.pxh-hero-in{position:relative;z-index:5;max-width:1615px;margin:0 auto;padding:132px 40px 44px;width:100%}
.pxh-hero .px-h1{font-size:84px;letter-spacing:-2.4px}
.pxh-rotor{display:inline-grid;text-align:left;vertical-align:baseline}
.pxh-rotor span{grid-area:1/1;background:var(--px-grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;transform:translateY(14px);transition:opacity .45s cubic-bezier(.2,.7,.3,1),transform .45s cubic-bezier(.2,.7,.3,1)}
.pxh-rotor span.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.pxh-rotor span{transition:none}}


/* ---- deploy terminal ---- */
.pxh-term{border-radius:18px;border:1px solid var(--px-line2);background:#0a0518;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(255,138,0,.18);overflow:hidden;font-family:var(--px-mono)}
.pxh-term .tbar{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--px-line);background:rgba(255,255,255,.03)}
.pxh-term .tbar i{width:11px;height:11px;border-radius:50%}
.pxh-term .tbar i:nth-child(1){background:#ff5f57}.pxh-term .tbar i:nth-child(2){background:#febc2e}.pxh-term .tbar i:nth-child(3){background:#28c840}
.pxh-term .tbar span{margin-left:10px;font-size:12px;color:var(--px-faint);letter-spacing:1px}
.pxh-term .tbody{padding:22px 24px 26px;font-size:13.5px;line-height:2.05;min-height:236px;color:#cdc3e6}
.pxh-term .tl{display:block;white-space:pre-wrap}
.pxh-term .tl .p{color:var(--px-orange-br)}
.pxh-term .tl .ok{color:#37e08a}
.pxh-term .tl .dim{color:var(--px-faint)}
.pxh-term .cur{display:inline-block;width:8px;height:15px;background:var(--px-orange);vertical-align:-2px;animation:pxh-blink 1s steps(1) infinite}
@keyframes pxh-blink{50%{opacity:0}}

/* ---- spotlight bento (cursor glow) ---- */
@media(pointer:fine){
  .px-card{--mx:50%;--my:50%}
  .px-card::before{content:"";position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,170,80,.16),transparent 65%)}
  .px-card:hover::before{opacity:1}
}

/* ---- counters ---- */
.pxh-count{font-variant-numeric:tabular-nums}

/* ---- latency radar (showpiece) ---- */
.pxh-radar{position:relative;aspect-ratio:1;max-width:440px;margin:0 auto}
.pxh-radar svg{width:100%;height:100%;display:block;overflow:visible}
.pxh-radar .ring{fill:none;stroke:rgba(255,170,80,.18);stroke-width:1}
.pxh-radar .sweep{transform-origin:300px 300px;animation:pxh-sweep 6s linear infinite}
@keyframes pxh-sweep{to{transform:rotate(360deg)}}
/* sonar rings continuously emanating from the hub */
.pxh-radar .so{fill:none;stroke:rgba(255,150,40,.38);stroke-width:1.3;transform-origin:300px 300px}
.pxh-radar .so.s1{animation:pxh-sonar 4.5s ease-out infinite}
.pxh-radar .so.s2{animation:pxh-sonar 4.5s ease-out infinite 1.5s}
.pxh-radar .so.s3{animation:pxh-sonar 4.5s ease-out infinite 3s}
@keyframes pxh-sonar{0%{r:10;opacity:.6}100%{r:232;opacity:0}}
.pxh-radar .lnk{fill:none;stroke:rgba(255,170,80,.30);stroke-width:1.2;stroke-dasharray:3 8;animation:pxh-flow 1.4s linear infinite}
@keyframes pxh-flow{to{stroke-dashoffset:-22}}
.pxh-radar .nd{fill:var(--px-orange)}
.pxh-radar .ndglow{fill:var(--px-orange);opacity:.16}
.pxh-radar .lb{font-family:var(--px-disp);font-weight:600;font-size:15px;fill:#e4dcf2;letter-spacing:.2px;transition:fill .2s}
.pxh-radar .ms{font-family:var(--px-mono);font-weight:500;font-size:13px;fill:var(--px-amber);transition:fill .2s}
.pxh-radar .hublb{font-size:16px;font-weight:700;fill:#fff}
.pxh-radar .rg{font-family:var(--px-mono);font-size:11px;fill:rgba(255,180,90,.36);letter-spacing:.5px}
/* hub */
.pxh-radar .hub .nd{fill:var(--px-orange)}
.pxh-radar .hubglow{fill:var(--px-orange);opacity:.35;animation:pxh-hubpulse 2.6s ease-in-out infinite}
.pxh-radar .hubcore{fill:#fff}
@keyframes pxh-hubpulse{50%{opacity:.62}}
/* live ping: sweep flashes each city — beam fires, ripple expands, number re-measures */
.pxh-radar .city .nd{transition:fill .2s,r .2s}
.pxh-radar .city .png{fill:none;stroke:var(--px-orange-br);stroke-width:2;opacity:0}
.pxh-radar .city .beam{stroke:url(#beamg);stroke-width:3;opacity:0;stroke-linecap:round}
.pxh-radar .city.active .beam{animation:pxh-beam .8s ease-out}
.pxh-radar .city.active .png{animation:pxh-ping .8s ease-out}
.pxh-radar .city.active .nd{fill:#fff;r:9}
.pxh-radar .city.active .lb{fill:#fff}
.pxh-radar .city.active .ms{fill:#fff;font-weight:800}
@keyframes pxh-ping{0%{opacity:.9;r:6}100%{opacity:0;r:30}}
@keyframes pxh-beam{0%{opacity:.95}70%{opacity:.5}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.pxh-radar .sweep,.pxh-radar .lnk,.pxh-radar .so,.pxh-radar .hubglow{animation:none}.pxh-radar .so{opacity:0}.pxh-radar .city.active .png,.pxh-radar .city.active .beam{animation:none}}

/* ---- game mosaic (static, hover-reveal) ---- */
.pxh-gmosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:172px;gap:14px;margin:34px 0 0}
.pxh-gtile{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--px-line);background-size:cover;background-position:center;text-decoration:none;display:block;transition:transform .32s cubic-bezier(.2,.7,.3,1),border-color .32s,box-shadow .32s}
.pxh-gtile.feat{grid-column:span 2;grid-row:span 2}
.pxh-gtile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,3,16,.05) 35%,rgba(7,3,16,.9));transition:.32s}
.pxh-gtile:hover{transform:scale(1.04);border-color:var(--px-orange);box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 30px rgba(255,138,0,.22);z-index:3}
.pxh-gtile:hover::after{background:linear-gradient(180deg,rgba(7,3,16,0) 25%,rgba(7,3,16,.82))}
.pxh-gtile .gmeta{position:absolute;z-index:2;inset:auto 0 0 0;padding:16px 18px}
.pxh-gtile .gn{font-family:var(--px-disp);font-weight:600;font-size:15px;color:#fff;line-height:1.2}
.pxh-gtile.feat .gn{font-size:24px}
.pxh-gtile .gp{font-family:var(--px-mono);font-size:12.5px;color:var(--px-amber);margin-top:5px;max-height:0;opacity:0;transform:translateY(6px);transition:.32s}
.pxh-gtile:hover .gp{max-height:24px;opacity:1;transform:none}
.pxh-gtile .gtag{position:absolute;z-index:3;top:12px;left:12px;font-family:var(--px-mono);font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:rgba(204,31,60,.9);padding:4px 10px;border-radius:999px}
.pxh-gtile .gdeploy{position:absolute;z-index:3;top:12px;right:12px;font-family:var(--px-mono);font-size:12px;color:#fff;text-shadow:0 1px 2px rgba(74,42,0,.55);background:var(--px-grad);padding:7px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;opacity:0;transform:translateY(-6px);transition:.28s;box-shadow:0 6px 18px rgba(204,31,60,.4)}
.pxh-gtile:hover .gdeploy{opacity:1;transform:none}
.pxh-gtile .gdeploy{box-shadow:0 6px 18px rgba(255,138,0,.35)}
@media(max-width:980px){.pxh-gmosaic{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.pxh-gmosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}.pxh-gtile.feat{grid-column:span 2;grid-row:span 1}.pxh-gtile.feat .gn{font-size:19px}}

/* ---- live ping test (game page hook) ---- */
.px-pingwrap{--pp-c:#ff8a00;position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;margin:34px 0 0;
  border:1px solid var(--px-line2);border-radius:24px;padding:44px;overflow:hidden;
  background:radial-gradient(120% 150% at 82% -10%,rgba(255,138,0,.12),transparent 55%),linear-gradient(160deg,var(--px-panel2),var(--px-bg))}
.px-pingwrap::before{content:"";position:absolute;width:400px;height:400px;right:-130px;top:-150px;border-radius:50%;filter:blur(90px);opacity:.45;background:var(--pp-c);transition:background .6s;pointer-events:none}
.pp-left{position:relative;z-index:2}
.pp-live{display:inline-flex;align-items:center;gap:9px;font-family:var(--px-mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--pp-c);transition:color .4s}
.pp-live i{width:8px;height:8px;border-radius:50%;background:var(--pp-c);box-shadow:0 0 10px var(--pp-c);animation:pp-blink 1.4s infinite}
@keyframes pp-blink{50%{opacity:.3}}
.pp-meta{display:flex;gap:34px;margin:24px 0 26px;flex-wrap:wrap}
.pp-stat .k{font-family:var(--px-mono);font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--px-faint)}
.pp-stat .v{font-family:var(--px-disp);font-weight:700;font-size:22px;color:var(--px-text);margin-top:4px;line-height:1.2}
.pp-bars{display:inline-flex;gap:5px;align-items:flex-end;height:24px}
.pp-bar{width:7px;background:rgba(255,255,255,.13);border-radius:2px;transition:.3s}
.pp-bar:nth-child(1){height:34%}.pp-bar:nth-child(2){height:50%}.pp-bar:nth-child(3){height:67%}.pp-bar:nth-child(4){height:83%}.pp-bar:nth-child(5){height:100%}
.pp-bar.on{background:var(--pp-c);box-shadow:0 0 8px var(--pp-c)}
/* real night-lights map (NASA Black Marble) with JS dynamic zoom + brand tint overlay */
.pp-map{position:relative;z-index:2;border-radius:18px;overflow:hidden;border:1px solid var(--px-line2);aspect-ratio:29/16;
  background:#05030c;
  box-shadow:0 16px 44px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,170,80,.06),inset 0 0 90px rgba(0,0,0,.5)}
.pp-night{position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:cover;transition:background-size .7s cubic-bezier(.3,.7,.3,1),background-position .7s cubic-bezier(.3,.7,.3,1)}
.pp-night-tint{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(62% 62% at 58% 52%,rgba(255,138,0,.10),transparent 68%),linear-gradient(180deg,rgba(5,3,12,.42),rgba(5,3,12,.12) 30%,rgba(5,3,12,.55)),linear-gradient(90deg,rgba(5,3,12,.35),transparent 18%,transparent 82%,rgba(5,3,12,.35))}
.pp-mapsvg{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block}
.pp-route{fill:none;stroke:var(--pp-c);stroke-width:1.8;stroke-dasharray:4 6;opacity:.9;animation:pp-flow 1s linear infinite;filter:drop-shadow(0 0 4px var(--pp-c));transition:stroke .4s}
@keyframes pp-flow{to{stroke-dashoffset:-20}}
.pp-pkt{fill:#fff;filter:drop-shadow(0 0 5px var(--pp-c));transition:fill .4s}
.pp-you-dot{fill:#fff;stroke:var(--pp-c);stroke-width:2;filter:drop-shadow(0 0 5px var(--pp-c));transition:stroke .4s}
.pp-you-glow{fill:var(--pp-c);opacity:.16;animation:pp-srvpulse 2.6s ease-out infinite}
.pp-srv-glow{fill:var(--pp-c);opacity:.13;transition:fill .4s}
.pp-srv-core{fill:var(--pp-c);filter:drop-shadow(0 0 9px var(--pp-c));transition:fill .4s}
.pp-srv-ring{r:7;fill:none;stroke:var(--pp-c);stroke-width:1.6;animation:pp-srvpulse 2.4s ease-out infinite;transition:stroke .4s}
.pp-srv-ring.r2{animation-delay:1.2s}
@keyframes pp-srvpulse{0%{r:7;opacity:.6}100%{r:30;opacity:0}}
.pp-lbl{font-family:var(--px-mono);font-size:10.5px;fill:#cfd7ef;letter-spacing:.4px;paint-order:stroke;stroke:rgba(7,3,16,.85);stroke-width:3px}
.pp-lbl.srv{fill:var(--pp-c);font-weight:700;transition:fill .4s}
/* HUD frame */
.pp-cn{position:absolute;width:20px;height:20px;border:2px solid var(--pp-c);opacity:.7;transition:border-color .4s;z-index:3}
.pp-cn.tl{top:12px;left:12px;border-right:0;border-bottom:0}.pp-cn.tr{top:12px;right:12px;border-left:0;border-bottom:0}
.pp-cn.bl{bottom:12px;left:12px;border-right:0;border-top:0}.pp-cn.br{bottom:12px;right:12px;border-left:0;border-top:0}
.pp-scan{position:absolute;left:0;right:0;top:0;height:70px;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(255,170,80,.14),transparent);animation:pp-scanmove 4.5s linear infinite}
@keyframes pp-scanmove{0%{transform:translateY(-70px)}100%{transform:translateY(420px)}}
/* HUD readout */
.pp-readout{position:absolute;z-index:4;bottom:18px;left:18px;padding:14px 18px;border-radius:14px;background:rgba(7,3,16,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,170,80,.18)}
.pp-rd-top{display:inline-flex;align-items:center;gap:7px;font-family:var(--px-mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--pp-c)}
.pp-rd-top i{width:7px;height:7px;border-radius:50%;background:var(--pp-c);box-shadow:0 0 8px var(--pp-c);animation:pp-blink 1.4s infinite}
.pp-rd-num{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.pp-rd-num span{font-family:var(--px-disp);font-weight:800;font-size:52px;line-height:1;color:var(--pp-c);transition:color .4s;font-variant-numeric:tabular-nums}
.pp-rd-num b{font-family:var(--px-mono);font-weight:500;font-size:14px;color:var(--px-faint)}
.pp-rd-verdict{font-family:var(--px-disp);font-weight:600;font-size:15px;color:var(--pp-c);transition:color .4s;margin-top:2px}
.pp-readout .pp-bars{margin-top:10px}
.px-pingwrap.measuring .pp-rd-num span{opacity:.7}
.px-pingwrap.measuring .pp-route{animation-duration:.5s}
/* competitive latency scale (replaces the EU/US compare) — all about the visitor's own number */
.pp-scale{position:relative;z-index:2;grid-column:1/-1;margin-top:32px;border-top:1px solid var(--px-line);padding-top:24px}
.pp-scale-head{font-family:var(--px-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--px-faint);margin-bottom:36px}
.pp-scale-track{position:relative;height:12px;border-radius:7px;margin-bottom:30px;opacity:.95;
  background:linear-gradient(90deg,#37e08a 0,#37e08a 16.66%,#7be07a 16.66%,#7be07a 33.33%,#ffb43d 33.33%,#ffb43d 55.55%,#ff8a00 55.55%,#ff8a00 88.88%,#cc1f3c 88.88%,#cc1f3c 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 2px 6px rgba(0,0,0,.4)}
.pp-scale .zlab{position:absolute;top:calc(100% + 9px);transform:translateX(-50%);font-family:var(--px-mono);font-size:10.5px;letter-spacing:.3px;color:var(--px-dim);white-space:nowrap}
.pp-marker{position:absolute;top:-7px;bottom:-7px;left:1.5%;width:2px;background:#fff;border-radius:2px;box-shadow:0 0 10px rgba(255,255,255,.7);transition:left .55s cubic-bezier(.2,.7,.3,1)}
.pp-marker::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:13px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 0 14px var(--pp-c),0 0 0 3px rgba(7,3,16,.65);transition:box-shadow .4s}
.pp-marker-ms{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);direction:ltr;font-family:var(--px-disp);font-weight:700;font-size:14px;color:#fff;background:rgba(7,3,16,.72);border:1px solid var(--pp-c);padding:2px 10px;border-radius:999px;white-space:nowrap;transition:border-color .4s}
.px-pingwrap.measuring .pp-marker{transition:left .12s linear}
.pp-run{margin-top:8px;cursor:pointer}
/* verdict color tiers */
.px-pingwrap.pp-excellent{--pp-c:#37e08a}
.px-pingwrap.pp-great{--pp-c:#7be07a}
.px-pingwrap.pp-good{--pp-c:#ffb43d}
.px-pingwrap.pp-ok{--pp-c:#ff8a00}
.px-pingwrap.pp-high{--pp-c:#cc1f3c}
@media(prefers-reduced-motion:reduce){.pp-live i,.pp-rd-top i,.pp-srv-ring,.pp-route,.pp-scan{animation:none}.pp-pkt{display:none}}
@media(max-width:860px){
  .px-pingwrap{grid-template-columns:1fr;text-align:center;padding:30px 22px}
  .pp-meta{justify-content:center}.pp-map{order:-1}
  .pp-readout{bottom:12px;left:12px;padding:11px 14px}.pp-rd-num span{font-size:42px}
  .pp-scale .zlab{font-size:9px;letter-spacing:0}
}
/* Arabic sizing */
.px-rtl .pp-rd-num span{font-size:52px}
.px-rtl .pp-live,.px-rtl .pp-stat .k,.px-rtl .pp-scale-head,.px-rtl .zlab,.px-rtl .pp-rd-top{font-family:'Tajawal',var(--px-mono);font-weight:500}
.px-rtl .pp-rd-verdict,.px-rtl .pp-stat .v{font-size:17px}
.px-rtl .pp-lbl{font-family:'Tajawal',var(--px-mono)}

/* ---- CTA finale ---- */
.pxh-fin{position:relative;overflow:hidden}
.pxh-fin .px-cta-box{position:relative}
.pxh-fin .glow{position:absolute;left:50%;top:-40%;width:760px;height:760px;transform:translateX(-50%);border-radius:50%;filter:blur(110px);opacity:.32;background:radial-gradient(circle,#ffd277,#d68f12 60%,transparent 80%);pointer-events:none}

@media(max-width:1080px){.pxh-hero .px-h1{font-size:60px}}
@media(max-width:720px){
  .pxh-hero{min-height:min(84vh,700px)}
  .pxh-hero .px-h1{font-size:42px;letter-spacing:-1px}
  .pxh-hero-media video{display:none}
  .pxh-hero-in{padding:110px 22px 40px}
  .pxh-term .tbody{font-size:12px;min-height:210px}
}

/* ============ Arabic / RTL layer ============ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Tajawal:wght@300;400;500;700&display=swap');
.px-rtl{--px-sans:'Tajawal','Inter',sans-serif;--px-disp:'Cairo','Tajawal',sans-serif;direction:rtl;text-align:right}
.px-rtl .px-h1{letter-spacing:0}
.px-rtl .px-h2,.px-rtl .px-cta h2{letter-spacing:0}
.px-rtl .px-btn svg,.px-rtl .px-card .go svg{transform:scaleX(-1)}
.px-rtl .px-hero-bg::after{background:linear-gradient(-105deg,rgba(7,3,16,.95) 24%,rgba(7,3,16,.6) 60%,rgba(255,138,0,.32))}
.px-rtl.pxh-hero .pxh-hero-media::after,
body.rtl .pxh-hero .pxh-hero-media::after{background:linear-gradient(-100deg,rgba(7,3,16,.96) 22%,rgba(7,3,16,.72) 52%,rgba(255,138,0,.28) 100%),linear-gradient(180deg,rgba(7,3,16,.45),transparent 30%,transparent 62%,rgba(7,3,16,.96))}
.px-rtl .pxh-term .tbody{direction:ltr;text-align:left}
.px-rtl .px-spec th,.px-rtl .px-spec td{text-align:right}
.px-rtl .px-faq summary{text-align:right}
.px-rtl .pxh-rotor span{text-align:right}
body.rtl .px-footer{direction:rtl;text-align:right}
body.rtl .px-footer .ftag{font-family:'Tajawal',sans-serif}

/* ---- Arabic optical type scale (Arabic glyphs read ~12% smaller than Latin) ---- */
.px-rtl .px-h1{font-size:74px;line-height:1.18}
.px-rtl .pxh-hero-in .px-h1{font-size:88px}
.px-rtl .px-h2{font-size:44px;line-height:1.3}
.px-rtl .px-cta h2{font-size:54px;line-height:1.25}
.px-rtl .px-sub{font-size:21px;line-height:1.8}
.px-rtl .px-lead{font-size:18.5px;line-height:1.85}
.px-rtl .px-eyebrow{font-size:14px;font-family:'Tajawal',var(--px-mono);font-weight:500}
.px-rtl .px-tag{font-size:14px;font-family:'Tajawal',var(--px-mono);font-weight:700}
.px-rtl .px-btn{font-size:16px;padding:13px 26px}
.px-rtl .px-kpi .n{font-size:38px;line-height:1.35}
.px-rtl .px-kpi .l{font-size:13.5px;font-family:'Tajawal',var(--px-mono);font-weight:500}
.px-rtl .px-scard h4{font-size:20px}
.px-rtl .px-scard .v{font-size:14px;font-family:'Tajawal',var(--px-mono);font-weight:500}
.px-rtl .px-scard small{font-size:15px;line-height:1.7}
.px-rtl .px-card h3{font-size:24px}
.px-rtl .px-card p{font-size:15.5px;line-height:1.7}
.px-rtl .px-card .go{font-size:14.5px;font-family:'Tajawal',var(--px-mono);font-weight:500}
.px-rtl .px-badge{font-size:12.5px;font-family:'Tajawal',var(--px-mono);font-weight:700}
.px-rtl .px-flist li{font-size:17px;line-height:1.65}
.px-rtl .px-spec th{font-size:13.5px;font-family:'Tajawal',var(--px-mono);font-weight:700}
.px-rtl .px-spec td{font-size:16px}
.px-rtl .px-plan .pname{font-size:19px}
.px-rtl .px-plan li{font-size:15.5px;line-height:1.55}
.px-rtl .px-plan .pop-tag{font-size:12.5px;font-family:'Tajawal',var(--px-mono);font-weight:700}
.px-rtl .px-faq summary{font-size:18px}
.px-rtl .px-faq p{font-size:16px;line-height:1.85}
.px-rtl .px-chip{font-size:14.5px;font-family:'Tajawal',var(--px-mono);font-weight:500}
.px-rtl .px-bstat .n{font-size:40px}
.px-rtl .px-bstat .l{font-size:15.5px}
.px-rtl .px-cform .px-field label{font-size:13.5px;font-family:'Tajawal',var(--px-mono);font-weight:700}
.px-rtl .px-cform input,.px-rtl .px-cform textarea{font-size:16px}
.px-rtl .px-cinfo .ci .t{font-size:17.5px}
.px-rtl .px-cinfo .ci .d{font-size:15.5px}
.px-rtl .px-legal{font-size:17px;line-height:1.95}
.px-rtl .px-legal h3{font-size:24px}
.px-rtl .px-bio .role{font-size:15px;font-family:'Tajawal',var(--px-mono);font-weight:700}
.px-rtl .pxh-radar .lb{font-size:15.5px;font-family:'Tajawal',sans-serif}
.px-rtl .pxh-radar .hublb{font-size:17px}
.px-rtl .pxh-radar .ms{font-size:13.5px}
/* radar band: balanced, text slightly favored so radar stays compact */
.px-band-in.radar-band{grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
@media(max-width:1080px){.px-band-in.radar-band{grid-template-columns:1fr}}
.px-rtl .pxh-gtile .gn{font-size:16.5px}
.px-rtl .pxh-gtile.feat .gn{font-size:26px}
.px-rtl .pxh-gtile .gp{font-size:13.5px;font-family:'Tajawal',var(--px-mono)}
.px-rtl .pxh-gtile .gdeploy{font-size:13px;font-family:'Tajawal',var(--px-mono)}
.px-rtl .pxh-gtile .gtag{font-family:'Tajawal',var(--px-mono);font-size:11.5px}
@media(max-width:1080px){.px-rtl .px-h1,.px-rtl .pxh-hero-in .px-h1{font-size:62px}}
@media(max-width:720px){
  .px-rtl .px-h1,.px-rtl .pxh-hero-in .px-h1{font-size:46px;line-height:1.25}
  .px-rtl .px-h2{font-size:33px}
  .px-rtl .px-sub{font-size:18.5px}
}
/* Arabic header menu + footer (outside .px-rtl scope) */
body.rtl #top-menu li a{font-size:15.5px !important;font-family:'Tajawal','Inter',sans-serif !important;font-weight:500}
body.rtl #top-menu li li a{font-size:15px !important}
body.rtl #main-header .et_mobile_menu a{font-size:16px !important;font-family:'Tajawal',sans-serif !important}
body.rtl li.potx-lang>a{font-size:13px !important}
body.rtl .px-footer h5{font-size:13.5px;font-family:'Tajawal',sans-serif;font-weight:700;letter-spacing:0}
body.rtl .px-footer ul a{font-size:15.5px;font-family:'Tajawal',sans-serif}
body.rtl .px-footer .ftag{font-size:15.5px;line-height:1.75}
body.rtl .px-footer .fpill{font-size:13px;font-family:'Tajawal',sans-serif;font-weight:500;letter-spacing:0}
body.rtl .px-foot-bottom{font-size:14px;font-family:'Tajawal',sans-serif;letter-spacing:0}

/* ============================================================
   FULL MOBILE PASS (2026-06-13) — responsive hardening for all pages.
   Layered last so it wins on conflicts; scoped to real breakpoints.
   ============================================================ */
/* nothing may exceed the viewport; long strings wrap instead of clipping */
html,body.potx{max-width:100%;overflow-x:hidden}
.px-h1,.px-h2,.px-sub,.px-lead,.px-card h3,.px-card p,.px-scard h4,.px-scard small,
.px-plan li,.px-flist li,.px-cta h2,.px-cta p,.px-legal,.px-faq summary,.px-faq p,
.pp-scale-head,.px-cinfo .ci .d{overflow-wrap:break-word;word-break:break-word}
.px-page img,.px-page video,.px-page svg{max-width:100%;height:auto}

/* spec tables: scroll horizontally inside their card rather than break the page */
@media(max-width:760px){
  .px-spec{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .px-spec table{min-width:600px}
  .px-spec th,.px-spec td{padding:12px 14px;font-size:13px;white-space:nowrap}
  .px-spec td:first-child{white-space:normal}
}

/* ---- phones (≤600) ---- */
@media(max-width:600px){
  .px-wrap,.px-hero-in,.pxh-hero-in{padding-left:20px;padding-right:20px}
  /* generous vertical rhythm so each section reads as a calm, distinct block (not a wall) */
  .px-sec{padding-top:68px}
  .px-sec-head{margin-bottom:4px}
  /* feature lists go single-column on phones with roomy spacing — the same items, easier to read */
  .px-cfeat{grid-template-columns:1fr;gap:14px;margin-top:20px}
  .px-cfeat span{font-size:15px}
  .px-flist{gap:18px;margin-top:24px}
  .px-flist li{font-size:15.5px;line-height:1.55}
  .px-strip{gap:16px}
  .px-scard{padding:22px}
  .px-h1{font-size:34px;letter-spacing:-.5px;line-height:1.08}
  .pxh-hero .px-h1{font-size:40px;letter-spacing:-1px}
  .px-h2{font-size:26px}
  .px-sub{font-size:16.5px;margin-top:18px}
  .px-lead{font-size:16px}
  .px-eyebrow{font-size:11.5px;padding:7px 13px}
  /* bento + service cards stack 1-up for breathing room */
  .px-bento{grid-template-columns:1fr;gap:18px}
  .px-card{min-height:auto;padding:24px}
  .px-card h3{font-size:20px;margin-top:14px}
  .px-badge{top:18px;right:18px}
  /* KPIs 2-per-row */
  .px-kpis{gap:20px 26px;margin-top:34px}
  .px-kpi{flex:1 0 38%}
  .px-kpi .n{font-size:26px}
  /* hero CTAs go full width so they're easy to tap */
  .px-hero-cta{gap:12px}
  .px-hero-cta .px-btn{flex:1 1 100%;justify-content:center}
  /* bands / stats */
  .px-band{padding:28px 18px;margin-top:48px;border-radius:20px}
  .px-bstats{grid-template-columns:repeat(2,1fr);gap:18px}
  .px-bstat .n{font-size:30px}
  /* plans + games */
  .px-plan{padding:26px 22px}
  .px-plan .price{font-size:34px}
  .px-games{grid-template-columns:repeat(2,1fr);gap:12px}
  .px-game{min-height:128px;padding:14px}
  /* ping widget */
  .px-pingwrap{padding:24px 16px}
  .pp-meta{gap:22px}
  /* terminal */
  .pxh-term .tbody{font-size:11px;min-height:170px;padding:18px 16px}
  /* contact / forms */
  .px-cinfo .ci{padding:16px}.px-cform{padding:22px}
  /* CTA */
  .px-cta{padding:58px 18px 54px;margin-top:48px}
  .px-cta-box{padding:42px 20px;border-radius:22px}
  .px-cta h2{font-size:28px}.px-cta p{font-size:16px}
  /* split media not too tall */
  .px-split{gap:34px}.px-split-media{aspect-ratio:16/10}
  /* footer */
  .px-footer{padding-top:44px;margin-top:56px}
  /* Arabic phone type scale */
  .px-rtl .px-h1,.px-rtl .pxh-hero-in .px-h1{font-size:38px;line-height:1.3}
  .px-rtl .px-h2{font-size:28px}.px-rtl .px-cta h2{font-size:30px}
  .px-rtl .px-sub{font-size:17px}.px-rtl .px-lead{font-size:16.5px}
}

/* ---- very small (≤400) ---- */
@media(max-width:400px){
  .pxh-hero .px-h1{font-size:34px}
  .px-h1{font-size:30px}
  .px-h2{font-size:24px}
  .px-cta h2{font-size:25px}
  .px-games{grid-template-columns:1fr}
}

/* 3-up trust trio (Why POT) stacks to 1 column below desktop — overrides the
   .px-strip repeat(2) rule by source order so it never crams 3 cards on a phone */
@media(max-width:1080px){.px-strip-3{grid-template-columns:1fr}}

/* WPML language switcher (any placement) — dark pill */
body.potx .wpml-ls a,body.potx .wpml-ls-legacy-dropdown a,body.potx .wpml-ls-legacy-list-horizontal a{
  background:rgba(255,138,0,.06) !important;border:1px solid var(--px-line2) !important;border-radius:999px !important;
  color:var(--px-amber) !important;font-family:var(--px-mono);font-size:12.5px;padding:7px 14px !important}
body.potx .wpml-ls a:hover{color:var(--px-orange-br) !important;border-color:var(--px-orange) !important}
body.potx .wpml-ls-legacy-dropdown .wpml-ls-sub-menu{background:rgba(13,7,32,.97) !important;border-color:var(--px-orange) !important}
/* custom switcher item appended to primary menu */
body.potx #top-menu li.potx-lang{display:inline-flex;align-items:center}
/* NOTE: must carry the `body.potx #top-menu` prefix — otherwise the header rule
   `#top-menu>li>a{padding-top/bottom:0}` (higher specificity) crushes the pill height. */
body.potx #top-menu li.potx-lang>a{display:inline-flex !important;align-items:center;gap:8px;border:1px solid var(--px-line2) !important;border-radius:999px;
  background:linear-gradient(135deg,rgba(255,138,0,.12),rgba(255,138,0,.04));color:var(--px-amber) !important;font-family:var(--px-mono);font-size:13px !important;letter-spacing:.3px;
  padding:9px 16px !important;line-height:1.5 !important;transition:.2s}
body.potx #top-menu li.potx-lang>a:hover{color:var(--px-orange-br) !important;border-color:var(--px-orange) !important;opacity:1 !important}
body.potx #top-menu li.potx-lang .lg{width:7px;height:7px;border-radius:50%;background:var(--px-orange);box-shadow:0 0 8px var(--px-orange)}

/* ============ global Divi header on dark theme ============ */
body.potx #main-header{background:rgba(11,6,22,.55) !important;-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 34px rgba(0,0,0,.32) !important;border-bottom:1px solid rgba(255,170,80,.16)}
body.potx.et_fixed_nav #main-header{background:rgba(9,5,18,.78) !important}
body.potx #top-menu li a,body.potx #et-top-navigation .et-cart-info span{color:var(--px-dim) !important}
body.potx #top-menu li a:hover{color:var(--px-orange-br) !important;opacity:1 !important}
body.potx #top-menu li.current-menu-item > a,body.potx #top-menu li.current_page_item > a{color:var(--px-orange-br) !important}
body.potx #logo{max-height:44px !important;width:auto}
/* unified nav typography (matches WHMCS portal: 14.5px / 500) */
body.potx #top-menu > li > a{font-size:14.5px !important;font-weight:500 !important}
/* dropdown submenus — shared frosted glass + width with the WHMCS portal */
body.potx #main-header .nav li ul{padding:8px !important;margin-top:14px !important;width:max-content !important;min-width:170px !important;max-width:280px !important;background:linear-gradient(135deg,rgba(19,11,33,.94),rgba(12,7,21,.92)) !important;border:1px solid rgba(255,255,255,.12) !important;box-shadow:0 22px 55px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14);-webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);border-radius:14px}
/* invisible hover-bridge across the new gap so the dropdown stays open when the cursor crosses it */
body.potx #main-header .nav li ul:before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px;background:transparent}
body.potx #top-menu li li{margin:0 !important;padding:0 !important;display:block !important;float:none !important;width:100% !important;clear:both !important}
body.potx #top-menu li li a{display:block;width:auto !important;color:var(--px-dim) !important;transition:color .18s,background .18s;border-radius:8px;padding:10px 14px !important;font-size:14px !important;line-height:1.35 !important;vertical-align:top;white-space:nowrap}
body.potx #top-menu li li a:hover{color:var(--px-orange-br) !important;background:rgba(255,138,0,.08) !important;opacity:1 !important}
body.potx #top-menu li li.current-menu-item > a{color:var(--px-orange-br) !important}
body.potx-debug #top-menu li ul{opacity:1 !important;visibility:visible !important}
body.potx #et_mobile_nav_menu .mobile_menu_bar:before,body.potx #et_mobile_nav_menu .mobile_menu_bar:after,body.potx #et_mobile_nav_menu .select_page{color:var(--px-orange) !important}

/* ===== FANCY MOBILE MENU (≤980): glass panel · accordion · header lang pill ===== */
@media(max-width:980px){
  /* glass dropdown panel */
  body.potx #et_mobile_nav_menu .et_mobile_menu{
    position:fixed !important;left:0 !important;right:0 !important;width:auto !important;
    top:var(--potx-mtop,64px) !important;margin:0 !important;
    background:linear-gradient(180deg,rgba(20,12,36,.80),rgba(11,7,20,.86)) !important;
    border:0 !important;border-top:2px solid var(--px-orange) !important;
    border-radius:0 0 22px 22px;padding:12px 14px 18px !important;
    box-shadow:0 34px 80px rgba(0,0,0,.62),0 0 46px rgba(255,138,0,.10),inset 0 1px 0 rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
    max-height:calc(100vh - var(--potx-mtop,64px) - 14px);overflow-y:auto;overscroll-behavior:contain}
  /* rows */
  body.potx #et_mobile_nav_menu .et_mobile_menu li{border:0 !important;padding:0 !important;position:relative;list-style:none}
  body.potx #et_mobile_nav_menu .et_mobile_menu li a{
    color:var(--px-text) !important;font-family:var(--px-disp);font-weight:500;font-size:16px !important;line-height:1.3;
    padding:14px 16px !important;margin:1px 0;border:0 !important;border-radius:12px;display:flex;align-items:center;
    transition:background .2s,color .2s}
  body.potx #et_mobile_nav_menu .et_mobile_menu li a:active,
  body.potx #et_mobile_nav_menu .et_mobile_menu li a:hover{
    background:rgba(255,138,0,.10) !important;color:var(--px-orange-br) !important}
  body.potx #et_mobile_nav_menu .et_mobile_menu li.current-menu-item > a{color:var(--px-orange-br) !important}
  /* top-level hairline dividers */
  body.potx #et_mobile_nav_menu .et_mobile_menu > li{border-bottom:1px solid rgba(255,170,80,.08) !important}
  body.potx #et_mobile_nav_menu .et_mobile_menu > li:last-child{border-bottom:0 !important}
  /* chevron toggle on parents */
  body.potx #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children > a{padding-right:48px !important}
  /* pure-CSS chevron on the parent row (::after, no injected DOM → survives Divi's menu rebuild) */
  body.potx #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children > a{position:relative}
  body.potx #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children > a::after{
    content:"";position:absolute;top:50%;right:18px;width:9px;height:9px;margin-top:-6px;
    border-right:2.5px solid var(--px-orange-br);border-bottom:2.5px solid var(--px-orange-br);
    transform:rotate(45deg);transition:transform .3s ease;opacity:.9}
  body.potx #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children.potx-open > a::after{
    transform:rotate(-135deg);margin-top:-2px}
  /* sub-menu: collapse by default; .potx-open (toggled by delegated handler) expands it */
  html.potx-js body.potx #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children > .sub-menu{
    max-height:0;overflow:hidden;transition:max-height .42s cubic-bezier(.4,0,.2,1)}
  html.potx-js body.potx #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children.potx-open > .sub-menu{max-height:1600px}
  body.potx #et_mobile_nav_menu .et_mobile_menu .sub-menu{
    margin:2px 0 6px !important;padding:0 0 0 16px !important;position:relative}
  body.potx #et_mobile_nav_menu .et_mobile_menu .sub-menu::before{
    content:"";position:absolute;left:7px;top:4px;bottom:12px;width:2px;border-radius:2px;
    background:linear-gradient(180deg,var(--px-orange),transparent)}
  body.potx #et_mobile_nav_menu .et_mobile_menu .sub-menu li a{
    font-family:var(--px-sans) !important;font-weight:400;font-size:14.5px !important;
    color:var(--px-dim) !important;padding:11px 14px !important}
  body.potx #et_mobile_nav_menu .et_mobile_menu .sub-menu li a:active,
  body.potx #et_mobile_nav_menu .et_mobile_menu .sub-menu li a:hover{color:var(--px-orange-br) !important}
  /* items are always fully visible (no opacity-based reveal — avoids stuck-invisible rows) */
  body.potx #et_mobile_nav_menu .et_mobile_menu > li{opacity:1 !important}
  /* declutter: hide search on mobile; hide the in-menu lang (moved to header) */
  body.potx #et_top_search{display:none !important}
  body.potx #et_mobile_nav_menu .potx-lang{display:none !important}
  /* My Account moves to the header cluster on mobile (no longer only a menu row) */
  body.potx #et_mobile_nav_menu .potx-account{display:none !important}
  /* header tools cluster (lang pill + My Account) — FIXED so it never alters the menu's
     containing block (a position:relative ancestor shrinks Divi's absolute mobile menu).
     A flex row keeps both controls aligned + the same height, left of the hamburger. */
  .potx-htools{display:flex;align-items:center;gap:9px;position:fixed;top:0;right:62px;height:42px;z-index:1000}
  body.rtl .potx-htools{right:auto;left:62px}   /* RTL mirror: cluster on the LEFT (logo flips right) */
  .potx-lang-hdr{display:inline-flex;align-items:center;gap:7px;height:42px;box-sizing:border-box;
    font-family:var(--px-mono);font-size:13px;color:var(--px-amber) !important;text-decoration:none;
    background:rgba(20,12,36,.85);border:1px solid var(--px-line2);border-radius:999px;padding:0 15px;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .potx-lang-hdr .lg{width:7px;height:7px;border-radius:50%;background:var(--px-orange);box-shadow:0 0 8px var(--px-orange);flex:none}
  .potx-lang-hdr:active,.potx-lang-hdr:hover{color:var(--px-orange-br) !important;border-color:var(--px-orange)}
  /* My Account = gold pill matching the lang-pill height (icon + short label) */
  .potx-account-hdr{display:inline-flex;align-items:center;gap:7px;height:42px;box-sizing:border-box;
    padding:0 18px;border-radius:999px;background:var(--px-grad);color:#fff !important;text-decoration:none;
    font-family:var(--px-mono);font-size:13px;text-shadow:0 1px 2px rgba(74,42,0,.5);
    box-shadow:0 6px 18px rgba(216,150,20,.34)}
  .potx-account-hdr svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .potx-account-hdr:active,.potx-account-hdr:hover{color:#fff !important;transform:translateY(-1px)}
}
@keyframes potxMi{to{opacity:1;transform:none}}
@media(min-width:981px){.potx-lang-hdr,.potx-htools{display:none}}
/* phones: collapse My Account to a gold icon-circle (label hidden) so the cluster
   always fits beside the logo + hamburger; tablets (561-980) keep the labelled pill */
@media(max-width:560px){
  .potx-account-hdr{width:42px;padding:0;justify-content:center;gap:0}
  .potx-account-hdr .lbl{display:none}
  .potx-htools{gap:8px;right:58px}
}
body.potx #et_top_search .et_search_form_container input{color:var(--px-text)}

/* ════════ "Powered by <engine>" badge (Cloud Office=Nextcloud, Web Hosting=Plesk) ════════
   accent driven by the inline --eng var (defaults to Nextcloud blue). */
.px-engband{--eng:#0082c9;display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--eng) 14%,transparent),rgba(255,255,255,.035));
  border:1px solid color-mix(in srgb,var(--eng) 42%,transparent);border-radius:20px;padding:24px 34px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.34)}
.px-eng-id{display:flex;align-items:center;gap:16px;flex:none}
.px-eng-logo{width:56px;height:56px;border-radius:15px;background:var(--eng);display:grid;place-items:center;
  box-shadow:0 8px 24px color-mix(in srgb,var(--eng) 55%,transparent);flex:none}
.px-eng-logo svg{width:38px;height:auto}
.px-eng-name{font-family:var(--px-disp);font-weight:700;font-size:27px;color:#fff;line-height:1;
  letter-spacing:-.4px;display:flex;flex-direction:column;align-items:flex-start}
.px-eng-name small{font-family:var(--px-mono);font-weight:400;font-size:11px;letter-spacing:2.5px;
  text-transform:uppercase;color:color-mix(in srgb,var(--eng) 60%,#fff);margin-bottom:6px}
.px-eng-name sup{font-size:12px;color:var(--px-dim);font-weight:400;margin-left:1px}
.px-eng-copy{color:var(--px-dim);font-size:15px;font-weight:300;line-height:1.6;max-width:560px;margin:0}
@media(max-width:760px){.px-engband{flex-direction:column;gap:18px;text-align:center;padding:26px 22px}
  .px-eng-name{align-items:center}.px-eng-copy{text-align:center}}
.px-rtl .px-eng-name{align-items:flex-end}
.px-rtl .px-eng-name small{letter-spacing:0}

/* ════════ "Meet Zeta" AI panel (service pages) — chat mock + capability cards ════════ */
.px-zeta-head{text-align:center;max-width:700px;margin:0 auto}
.px-zeta-head .px-lead{margin-left:auto;margin-right:auto}
.px-zeta-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;margin:38px 0 0;align-items:stretch}
.px-zchat{background:linear-gradient(160deg,var(--px-panel),var(--px-bg2));border:1px solid var(--px-line2);
  border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);display:flex;flex-direction:column}
.zchat-top{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--px-line);background:rgba(255,138,0,.06)}
.zav{width:42px;height:42px;border-radius:50%;background:var(--px-grad);display:grid;place-items:center;flex:none;box-shadow:0 6px 18px rgba(216,150,20,.42)}
.zav svg{width:26px;height:26px}
.zav-sm{width:30px;height:30px}.zav-sm svg{width:19px;height:19px}
.zchat-id b{font-family:var(--px-disp);color:var(--px-text);font-size:15px;display:block;line-height:1.2}
.zchat-id i{color:var(--px-faint);font-size:11.5px;font-style:normal;font-family:var(--px-mono)}
.zlive{width:9px;height:9px;border-radius:50%;background:var(--px-green);box-shadow:0 0 10px var(--px-green);margin-left:auto;flex:none}
.zchat-body{padding:20px;display:flex;flex-direction:column;gap:13px}
.zrow{display:flex;gap:9px;align-items:flex-end}
.zrow-y{justify-content:flex-end}
.zb{max-width:80%;padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.5}
.zb-y{background:var(--px-grad);color:#fff;border-bottom-right-radius:5px;text-shadow:0 1px 1px rgba(74,42,0,.4)}
.zb-z{background:var(--px-glass);border:1px solid var(--px-line2);color:var(--px-text);border-bottom-left-radius:5px}
.px-zcaps{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zcap{display:flex;gap:13px;background:var(--px-glass);border:1px solid var(--px-line);border-radius:15px;padding:17px;backdrop-filter:blur(8px);transition:.25s}
.zcap:hover{transform:translateY(-3px);border-color:var(--px-line2)}
.zcap-ic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--px-orange-br);background:rgba(255,138,0,.1);border:1px solid var(--px-line2)}
.zcap-ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.zcap h4{font-family:var(--px-disp);font-weight:600;color:var(--px-text);font-size:14.5px}
.zcap p{color:var(--px-dim);font-size:12.5px;font-weight:300;line-height:1.5;margin:5px 0 0}
/* layout variants so each service page's Zeta section looks distinct */
/* list (Game Servers): single-column caps on the left, chat on the right */
.px-zeta-list .px-zeta-grid{grid-template-columns:.92fr 1.08fr}
.px-zeta-list .px-zchat{order:2}
.px-zeta-list .px-zcaps{order:1;grid-template-columns:1fr;align-content:start}
.px-zeta-list .zcap{padding:18px 20px}
/* stack (Cloud Servers): caps as a 4-across row on top, centred chat below */
.px-zeta-stack .px-zeta-grid{grid-template-columns:1fr;gap:22px}
.px-zeta-stack .px-zcaps{order:1;grid-template-columns:repeat(4,1fr)}
.px-zeta-stack .px-zchat{order:2;max-width:760px;width:100%;margin:0 auto}
.px-zeta-stack .zcap{flex-direction:column;text-align:center;align-items:center;gap:11px}
@media(max-width:900px){.px-zeta-grid{grid-template-columns:1fr;gap:20px}
  .px-zeta-list .px-zeta-grid{grid-template-columns:1fr}
  .px-zeta-stack .px-zcaps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.px-zcaps,.px-zeta-stack .px-zcaps{grid-template-columns:1fr}}
/* RTL: mirror bubble tails (flex-end already flips sides via direction:rtl) */
.px-rtl .zb-y{border-bottom-right-radius:16px;border-bottom-left-radius:5px}
.px-rtl .zb-z{border-bottom-left-radius:16px;border-bottom-right-radius:5px}
.px-rtl .zlive{margin-left:0;margin-right:auto}

/* ════════ embedded request form (WPForms · cinematic) ════════ */
html{scroll-behavior:smooth}
#request{scroll-margin-top:120px}            /* clear the fixed header on anchor jump */
.px-form-head{text-align:center;max-width:680px;margin:0 auto}
.px-form-intro{margin:14px auto 0}
.px-formwrap{max-width:780px;margin:36px auto 0;background:var(--px-glass);border:1px solid var(--px-line2);
  border-radius:24px;padding:42px 40px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 30px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
/* WPForms modern-markup CSS variables (themed to the cinematic palette) */
.px-formwrap .wpforms-container{margin:0;
  --wpforms-field-border-radius:11px;--wpforms-field-border-size:1px;
  --wpforms-field-background-color:rgba(255,255,255,.04);
  --wpforms-field-border-color:var(--px-line2);
  --wpforms-field-text-color:var(--px-text);
  --wpforms-label-color:var(--px-text);
  --wpforms-label-sublabel-color:var(--px-faint);
  --wpforms-button-background-color:#f0aa30;--wpforms-button-background-color-alt:#ffce6b;
  --wpforms-button-text-color:#fff;--wpforms-button-border-radius:12px}
.px-formwrap .wpforms-field-label{font-family:var(--px-disp);font-weight:600;color:var(--px-text);font-size:15px}
.px-formwrap .wpforms-field-sublabel,.px-formwrap .wpforms-field-description{color:var(--px-faint);font-size:12.5px;font-weight:300}
.px-formwrap .wpforms-required-label{color:var(--px-crimson)}
.px-formwrap input[type=text],.px-formwrap input[type=email],.px-formwrap input[type=tel],
.px-formwrap input[type=number],.px-formwrap input[type=url],.px-formwrap textarea,.px-formwrap select{
  background:rgba(255,255,255,.04) !important;border:1px solid var(--px-line2) !important;
  color:var(--px-text) !important;border-radius:11px !important}
.px-formwrap input::placeholder,.px-formwrap textarea::placeholder{color:var(--px-faint)}
.px-formwrap input:focus,.px-formwrap textarea:focus,.px-formwrap select:focus{
  border-color:var(--px-orange-br) !important;box-shadow:0 0 0 3px rgba(255,138,0,.16) !important;outline:none}
.px-formwrap .wpforms-field-radio input,.px-formwrap .wpforms-field-checkbox input{accent-color:var(--px-orange)}
.px-formwrap .wpforms-field-radio label,.px-formwrap .wpforms-field-checkbox label{color:var(--px-dim);font-weight:400}
.px-formwrap .wpforms-page-indicator,.px-formwrap .wpforms-field-file-upload .wpforms-uploader{color:var(--px-dim)}
.px-formwrap button.wpforms-submit,.px-formwrap .wpforms-submit{background:var(--px-grad) !important;color:#fff !important;
  border:0 !important;border-radius:12px !important;font-family:var(--px-sans);font-weight:600;font-size:15px;
  padding:13px 32px !important;box-shadow:0 8px 26px rgba(216,150,20,.34);cursor:pointer;transition:.22s;
  text-shadow:0 1px 2px rgba(74,42,0,.5)}
.px-formwrap button.wpforms-submit:hover{filter:brightness(1.06);transform:translateY(-1px)}
.px-formwrap .wpforms-confirmation-container-full{background:rgba(35,196,131,.08) !important;border:1px solid rgba(35,196,131,.4) !important;
  color:var(--px-text) !important;border-radius:14px}
/* RTL: keep labels/fields right-aligned inside the wrap */
.px-rtl .px-formwrap{text-align:right}
.px-rtl .px-formwrap .wpforms-field-label,.px-rtl .px-formwrap input,.px-rtl .px-formwrap textarea{text-align:right}
@media(max-width:600px){.px-formwrap{padding:28px 20px}}

/* ============ branded footer (replaces default Divi footer) ============ */
body.potx #footer-widgets,body.potx #footer-bottom{display:none !important}
body.potx #main-footer{background:transparent !important;position:relative;z-index:5}
.px-footer{position:relative;z-index:5;border-top:1px solid var(--px-line);margin-top:84px;padding:58px 0 0;background:linear-gradient(180deg,transparent,rgba(13,7,32,.65))}
.px-footer-in{max-width:1615px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.px-footer .fbrand{display:flex;align-items:center;gap:12px;font-family:var(--px-disp);font-weight:700;font-size:20px;color:var(--px-text)}
.px-footer .fmk{width:34px;height:38px;background:var(--px-grad);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;font-size:15px;color:#fff;box-shadow:0 0 20px rgba(255,138,0,.5)}
.px-footer .fmk-img{width:40px;height:40px;object-fit:contain;flex:none}
.px-footer .ftag{color:var(--px-faint);font-size:14px;margin-top:14px;line-height:1.65;max-width:320px}
.px-footer .fpill{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--px-mono);font-size:12px;color:var(--px-amber);border:1px solid var(--px-line2);border-radius:999px;padding:7px 14px;background:rgba(255,138,0,.06)}
.px-footer .fdot{width:7px;height:7px;border-radius:50%;background:#37e08a;box-shadow:0 0 10px #37e08a}
.px-footer h5{font-family:var(--px-mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--px-orange);margin:0 0 15px}
.px-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.px-footer ul a{color:var(--px-dim);text-decoration:none;font-size:14px;transition:.18s}
.px-footer ul a:hover{color:var(--px-orange-br)}
.px-foot-bottom{max-width:1615px;margin:42px auto 0;padding:20px 40px 30px;border-top:1px solid var(--px-line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--px-faint);font-family:var(--px-mono);font-size:12.5px}
.px-foot-bottom a{color:var(--px-faint);text-decoration:none}
.px-foot-bottom a:hover{color:var(--px-orange-br)}
.px-foot-soc{display:flex;gap:10px}
.px-foot-soc a{width:34px;height:34px;border-radius:9px;border:1px solid var(--px-line2);display:grid;place-items:center;color:var(--px-dim);background:var(--px-glass)}
.px-foot-soc a:hover{color:var(--px-orange-br);border-color:var(--px-orange)}
.px-foot-soc svg{width:17px;height:17px}
@media(max-width:1080px){.px-footer-in{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.px-footer-in{grid-template-columns:1fr;padding:0 22px}.px-foot-bottom{padding:20px 22px 30px;justify-content:center;text-align:center}}
/* --- TRUST FOOTER (2026-06-15): replaces the duplicate nav columns with a "secure
   checkout" glass panel — full MyFatoorah payment set + Sectigo SSL badge + trust pill.
   Brand+social on one side, the trust card on the other. --- */
.px-footer{overflow:hidden}
.px-footer::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:min(640px,80%);height:2px;
  background:linear-gradient(90deg,transparent,var(--px-orange-br),transparent);opacity:.7}
body.potx .px-footer-in.px-footer-trust{grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.px-footer-trust .fbrand{font-size:23px}
.px-footer-trust .fmk{width:40px;height:44px;font-size:17px}
.px-footer-trust .ftag{font-size:14.5px;max-width:360px}
.fcol-brand .px-foot-soc{margin-top:24px}
.fcol-trust{display:flex;flex-direction:column;align-items:flex-end}
/* the secure-checkout glass card — capped narrow so the payment marks wrap to two
   tidy rows instead of one over-wide strip; hugs the outer edge of the footer */
.ftrust-card{width:100%;max-width:400px;background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--px-line2);border-radius:18px;padding:22px 24px;
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 18px 50px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.10)}
.ftrust-head{display:flex;align-items:center;gap:10px;font-family:var(--px-mono);font-size:12.5px;
  letter-spacing:.4px;color:var(--px-amber);margin-bottom:16px}
.ftrust-head svg{width:17px;height:17px;flex:none;color:var(--px-orange-br)}
.fpay-row{display:flex;flex-wrap:wrap;gap:9px}
.fpm{height:30px;display:inline-flex;border-radius:6px;overflow:hidden;box-shadow:0 2px 7px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.55);transition:transform .18s}
.fpm:hover{transform:translateY(-2px)}
.fpm svg{height:30px;width:auto;display:block}
.ftrust-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--px-line)}
.fssl{display:inline-block;line-height:0;border-radius:8px;transition:transform .18s;filter:drop-shadow(0 5px 14px rgba(0,0,0,.45))}
.fssl:hover{transform:translateY(-2px)}
.fssl img{height:42px;width:auto;display:block}
.fbadge{display:inline-flex;align-items:center;gap:7px;font-family:var(--px-mono);font-size:11.5px;color:var(--px-dim)}
.fbadge svg{width:15px;height:15px;flex:none;color:#37e08a}
@media(max-width:860px){body.potx .px-footer-in.px-footer-trust{grid-template-columns:1fr;gap:30px}.fcol-trust{align-items:stretch}.ftrust-card{max-width:none;padding:20px}}

/* ============================================================
   GLASSMORPHISM LAYER (HOME first — scoped body.home; to go site-wide,
   replace "body.home" with "body.potx" in this block).
   ============================================================ */
/* hero content panel — dark frosted glass over the video (keeps text crisp) */
.pxh-hero-glass{display:inline-block;max-width:860px;padding:38px 48px 40px;border-radius:24px;
  background:linear-gradient(135deg,rgba(20,12,36,.52),rgba(12,7,22,.32));
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);backdrop-filter:blur(20px) saturate(1.25);
  box-shadow:0 24px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.20)}
/* hero text sized for the panel (the full-bleed 84px was cramming/wrapping messily) */
.pxh-hero-glass .px-h1{font-size:64px;line-height:1.04;letter-spacing:-1.7px;margin-top:20px}
.pxh-hero-glass .px-sub{font-size:16.5px;line-height:1.6;margin-top:18px;max-width:600px}
.pxh-hero-glass .px-hero-cta{margin-top:26px}
@media(max-width:980px){.pxh-hero-glass .px-h1{font-size:48px}}
@media(max-width:760px){.pxh-hero-glass{max-width:100%;padding:24px 22px 26px;border-radius:20px}
  .pxh-hero-glass .px-h1{font-size:34px;letter-spacing:-.5px}
  .pxh-hero-glass .px-sub{font-size:15px}}
@media(max-width:400px){.pxh-hero-glass .px-h1{font-size:29px}}
/* ARABIC GLASS HEROES — the old full-bleed RTL sizes (74/88px, lines ~456-457) were tuned
   for the pre-glass hero and now overflow + oversize the glass panel. Re-size for OPTICAL
   PARITY with EN (Arabic reads ~12% smaller at equal px → a modest bump, NOT the 88px) and
   give taller line-height + bottom room so the gold .g gradient descenders never clip.
   3-class specificity ties `.px-rtl .pxh-hero-in .px-h1`; later source order wins. */
.px-rtl .pxh-hero-glass .px-h1{font-size:70px;line-height:1.28;letter-spacing:0;padding-bottom:.1em}
.px-rtl .pxh-hero-glass .px-sub{font-size:18px;line-height:1.8}
.px-rtl .px-hero-glass .px-h1{font-size:58px;line-height:1.3;letter-spacing:0;padding-bottom:.1em}
.px-rtl .px-hero-glass .px-sub{font-size:17.5px;line-height:1.8}
@media(max-width:980px){.px-rtl .pxh-hero-glass .px-h1{font-size:52px}.px-rtl .px-hero-glass .px-h1{font-size:46px}}
@media(max-width:760px){.px-rtl .pxh-hero-glass .px-h1{font-size:38px}.px-rtl .px-hero-glass .px-h1{font-size:35px}}
@media(max-width:400px){.px-rtl .pxh-hero-glass .px-h1{font-size:32px}.px-rtl .px-hero-glass .px-h1{font-size:30px}}
/* hero KPI chips — frosted glass tiles */
body.potx .px-kpis{gap:14px}
body.potx .px-kpi{padding:15px 22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 8px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.16)}
/* bento service cards — frosted glass over the ambient aurora bg */
body.potx .px-card{background:linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
/* feature + trust cards (strip scards) — frosted glass */
body.potx .px-scard{background:linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
/* latency band — frosted glass slab */
body.potx .px-band{background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
/* service-page hero panel (shared frosted glass; sized down for the panel) */
.px-hero-glass{display:inline-block;max-width:880px;padding:38px 48px 40px;border-radius:24px;
  background:linear-gradient(135deg,rgba(20,12,36,.50),rgba(12,7,22,.30));
  border:1px solid rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);backdrop-filter:blur(20px) saturate(1.25);
  box-shadow:0 24px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18)}
.px-narrow .px-hero-glass{max-width:1040px}
.px-hero-glass .px-h1{font-size:54px;line-height:1.05;letter-spacing:-1.5px;margin-top:16px}
.px-hero-glass .px-sub{font-size:16px;line-height:1.6;margin-top:16px;max-width:620px}
@media(max-width:980px){.px-hero-glass .px-h1{font-size:42px}}
@media(max-width:760px){.px-hero-glass{max-width:100%;padding:24px 22px 26px;border-radius:20px}
  .px-hero-glass .px-h1{font-size:32px;letter-spacing:-.5px}.px-hero-glass .px-sub{font-size:15px}}
@media(max-width:400px){.px-hero-glass .px-h1{font-size:27px}}
/* pricing cards — frosted glass (the .pop gold border is preserved) */
body.potx .px-plan{background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02)) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}

/* ============================================================
   HEADER WHMCS TOOLS — Cart (icon) + My Account (gold pill)
   ============================================================ */
body.potx #top-menu li.potx-tool{display:inline-flex;align-items:center}
body.potx #top-menu li.potx-tool > a{display:inline-flex !important;align-items:center;gap:8px;opacity:1 !important}
/* cart = icon button */
body.potx #top-menu li.potx-cart > a{width:40px;height:40px;justify-content:center;padding:0 !important;border-radius:11px;
  color:var(--px-amber) !important;border:1px solid var(--px-line2);background:rgba(255,138,0,.06);transition:.18s}
body.potx #top-menu li.potx-cart > a:hover{color:var(--px-orange-br) !important;border-color:var(--px-orange);background:rgba(255,138,0,.12)}
body.potx li.potx-cart svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.potx #top-menu li.potx-cart .potx-tool-lbl{display:none}
/* my account = gold pill button */
body.potx #top-menu li.potx-account > a{gap:7px;padding:9px 16px !important;border-radius:999px;background:var(--px-grad);
  color:#fff !important;font-family:var(--px-mono);font-size:13px;text-shadow:0 1px 2px rgba(74,42,0,.5);
  box-shadow:0 6px 18px rgba(216,150,20,.32);transition:.2s;margin-left:2px}
body.potx #top-menu li.potx-account > a:hover{transform:translateY(-1px);color:#fff !important;opacity:1 !important}
body.potx li.potx-account svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* mobile: show Cart + My Account as clear rows inside the dropdown menu */
@media(max-width:980px){
  body.potx #et_mobile_nav_menu .et_mobile_menu li.potx-tool > a{display:flex;align-items:center;gap:12px;
    width:auto;height:auto;justify-content:flex-start;border:0 !important;box-shadow:none;text-shadow:none;
    background:transparent !important;border-radius:12px;padding:14px 16px !important;
    color:var(--px-text) !important;font-family:var(--px-disp);font-weight:500;font-size:16px !important}
  body.potx #et_mobile_nav_menu .et_mobile_menu li.potx-tool .potx-tool-lbl{display:inline !important}
  body.potx #et_mobile_nav_menu .et_mobile_menu li.potx-tool svg{width:21px;height:21px;flex:none}
  body.potx #et_mobile_nav_menu .et_mobile_menu li.potx-account > a{background:var(--px-grad) !important;color:#fff !important;
    justify-content:center;margin-top:8px;text-shadow:0 1px 2px rgba(74,42,0,.5)}
  body.potx #et_mobile_nav_menu .et_mobile_menu li.potx-account svg{stroke:#fff}
}

/* RTL TRUE-MIRROR (all widths): Divi's logo lives in a full-width absolute .logo_container
   with the logo as an inline-block pinned to its start (left). Flipping text-align to right
   moves the logo to the RIGHT edge in Arabic — the piece that was missing before, which let
   the left-floated nav/tools collide with the still-left logo. */
body.rtl.potx .logo_container{text-align:right !important}

/* ===== header: widen to the full content width (1615), keep Divi's native menu
   mechanics intact (dropdowns / carets / mobile all work). The earlier flex
   restructure broke dropdown anchoring + carets, so it was reverted. ===== */
@media(min-width:981px){
  body.potx #main-header .container{max-width:1615px !important}
  body.potx #top-menu > li{padding-right:26px}
  /* vertically center nav items + pills + search on ONE line. Flex the WRAPPER only
     (NOT #top-menu/li — that breaks dropdowns); neutralize Divi left-style padding;
     re-center the dropdown caret so it stays aligned. */
  body.potx #et-top-navigation{display:flex !important;align-items:center !important;float:right;padding:24px 0 !important}
  body.potx #et-top-navigation > #top-menu-nav{float:none !important}
  body.potx #et-top-navigation > #et_top_search{float:none !important;display:flex !important;align-items:center !important;margin:0 0 0 22px !important}
  body.potx #et_search_icon{margin:0 !important}
  body.potx #et_search_icon:before{position:static !important;top:auto !important}
  body.potx .et_header_style_left #et-top-navigation nav>ul>li>a,body.potx #top-menu>li>a{padding-top:0 !important;padding-bottom:0 !important}
  body.potx #top-menu .menu-item-has-children>a:first-child:after{top:50% !important;margin-top:0 !important;transform:translateY(-50%)}
  /* RTL (Arabic): TRUE MIRROR. Divi natively pins the logo absolute-LEFT in every language
     (verified: no Customizer / Theme-Options / Theme-Builder CSS is doing it). To mirror we
     (a) push the logo to the RIGHT via text-align on its full-width absolute container
     [global rule just above this MQ], and (b) float the nav LEFT + flip search gap/spacing. */
  body.rtl.potx #et-top-navigation{float:left !important}
  body.rtl.potx #et-top-navigation > #et_top_search{margin:0 22px 0 0 !important}
  body.rtl.potx #top-menu > li{padding-right:0 !important;padding-left:26px !important}
}

/* ===== LAPTOP GUTTER (2026-06-15): between ~981 and the 1615 cap the container
   fills the viewport (no auto-margins yet), so content hugged the browser edge.
   Add a comfortable side gutter in that range. Wide desktops keep their 40px base
   (auto-margins already provide the breathing room); mobile (<=600) keeps its own. */
@media(min-width:981px) and (max-width:1700px){
  body.potx .px-wrap,
  body.potx .px-hero-in,
  body.potx .pxh-hero-in,
  body.potx .px-cta,
  body.potx .px-footer-in,
  body.potx .px-foot-bottom{padding-left:clamp(40px,4.5vw,72px) !important;padding-right:clamp(40px,4.5vw,72px) !important}
  body.potx #main-header .container{padding-left:clamp(24px,2.4vw,40px) !important;padding-right:clamp(24px,2.4vw,40px) !important}
}

/* ============================================================
   GLOBAL NETWORK REACH MAP (datacenter) — world night-lights + ping sweep
   ============================================================ */
body.potx .pxw-head{text-align:center;max-width:760px;margin:0 auto 30px}
body.potx .pxw-head .px-lead{margin-left:auto;margin-right:auto}
body.potx .pxw-map{position:relative;direction:ltr;aspect-ratio:1000/378;border-radius:22px;overflow:hidden;
  border:1px solid var(--px-line2);background:#05030d;
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.10)}
.pxw-night{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.95}
.pxw-tint{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120% 95% at 63% 36%,rgba(255,138,0,.16),transparent 55%),
  linear-gradient(180deg,rgba(7,3,16,.42),rgba(7,3,16,.74))}
.pxw-svg{position:absolute;inset:0;width:100%;height:100%;direction:ltr;overflow:visible}
/* tier colours (SVG via currentColor) */
.pxw-hub.pxw-t0,.pxw-arc.pxw-t0,.pxw-pkt.pxw-t0{color:#23c483}
.pxw-hub.pxw-t1,.pxw-arc.pxw-t1,.pxw-pkt.pxw-t1{color:#ffcf6b}
.pxw-hub.pxw-t2,.pxw-arc.pxw-t2,.pxw-pkt.pxw-t2{color:#ff8a00}
.pxw-hub.pxw-t3,.pxw-arc.pxw-t3,.pxw-pkt.pxw-t3{color:#e2933a}
/* arcs */
.pxw-arc{fill:none;stroke:currentColor;stroke-width:1;opacity:.4;stroke-linecap:round;transition:opacity .3s,stroke-width .3s}
.pxw-arc.active{opacity:1;stroke-width:1.8;filter:drop-shadow(0 0 3px currentColor)}
/* hub nodes */
.pxw-dot{fill:currentColor}
.pxw-glow{fill:currentColor;opacity:.4;filter:blur(3px)}
.pxw-ring{fill:none;stroke:currentColor;stroke-width:1.4;transform-box:fill-box;transform-origin:center;opacity:0}
.pxw-hub.active .pxw-ring{animation:pxwPing 1.5s ease-out}
.pxw-pkt{fill:currentColor;opacity:0;filter:drop-shadow(0 0 4px currentColor)}
/* core (Kuwait) */
.pxw-coreg{color:var(--px-orange-br)}
.pxw-core-glow{fill:var(--px-amber);opacity:.5;filter:blur(5px)}
.pxw-core-ring{fill:none;stroke:var(--px-orange-br);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:pxwPing 2.6s ease-out infinite}
.pxw-core-ring.r2{animation-delay:1.3s}
.pxw-core-dot{fill:var(--px-amber);filter:drop-shadow(0 0 6px var(--px-orange))}
.pxw-core-lbl{fill:#fff;font-family:var(--px-disp);font-weight:700;font-size:12px;letter-spacing:.4px;
  paint-order:stroke;stroke:rgba(7,3,16,.75);stroke-width:2.6px}
/* labels */
.pxw-nm{fill:#fff;font-family:var(--px-disp);font-weight:600;font-size:11px;
  paint-order:stroke;stroke:rgba(7,3,16,.72);stroke-width:2.6px}
.pxw-ms{fill:var(--px-amber);font-family:var(--px-mono);font-size:9.5px;direction:ltr;
  paint-order:stroke;stroke:rgba(7,3,16,.72);stroke-width:2.2px}
@keyframes pxwPing{0%{transform:scale(.5);opacity:.85}100%{transform:scale(3.2);opacity:0}}
/* legend (desktop, inside map bottom-left) */
.pxw-legend{position:absolute;left:16px;bottom:14px;display:flex;flex-wrap:wrap;gap:6px 14px;z-index:3}
.pxw-lg{display:inline-flex;align-items:center;gap:6px;font-family:var(--px-mono);font-size:11px;color:var(--px-faint)}
.pxw-lg i{width:8px;height:8px;border-radius:50%;flex:none}
.pxw-lg.pxw-t0 i{background:#23c483}.pxw-lg.pxw-t1 i{background:#ffcf6b}
.pxw-lg.pxw-t2 i{background:#ff8a00}.pxw-lg.pxw-t3 i{background:#e2933a}
/* note caption */
.pxw-note{text-align:center;color:var(--px-faint);font-family:var(--px-mono);font-size:12px;
  margin:16px auto 0;max-width:740px;line-height:1.6}
/* chip list (mobile fallback for the on-map labels) */
.pxw-list{display:none}
.pxw-chip i{width:9px;height:9px;border-radius:50%;flex:none}
.pxw-chip.pxw-t0 i{background:#23c483}.pxw-chip.pxw-t1 i{background:#ffcf6b}
.pxw-chip.pxw-t2 i{background:#ff8a00}.pxw-chip.pxw-t3 i{background:#e2933a}
.pxw-chip b{margin-left:auto;color:var(--px-amber);font-weight:500;direction:ltr}
body.rtl .pxw-chip b{margin-left:0;margin-right:auto}
@media(max-width:768px){
  body.potx .pxw-map .pxw-nm,body.potx .pxw-map .pxw-ms{display:none}
  .pxw-legend{display:none}
  .pxw-list{display:grid;grid-template-columns:repeat(2,1fr);gap:9px 14px;margin:18px 0 0}
  .pxw-chip{display:flex;align-items:center;gap:9px;font-family:var(--px-mono);font-size:13px;color:var(--px-text);
    background:var(--px-glass);border:1px solid var(--px-line);border-radius:11px;padding:9px 13px}
}
@media(max-width:420px){.pxw-list{grid-template-columns:1fr}}

/* ===== MOBILE HEADER ALIGN (2026-06-15): Divi's hamburger sat too far left (x305)
   and OVERLAPPED the account icon (x275-317) + sat lower (misaligned). Pin it hard to
   the far right and vertically center it on the same line as the lang/account cluster;
   swap the header logo to the compact icon mark so the phone header is clean + roomy. ===== */
@media(max-width:980px){
  /* defined header band so logo + controls vertically center with breathing room */
  body.potx #main-header{min-height:62px}
  body.potx #logo{content:var(--potx-mark) !important;width:auto !important;height:40px !important;max-height:40px !important;margin-top:11px !important}
  /* lang/account cluster + hamburger = full-band-height fixed strips, vertically centered */
  body.potx .potx-htools{top:0 !important;height:62px !important;align-items:center}
  body.potx #et_mobile_nav_menu{position:fixed !important;right:16px;top:0;height:62px;display:flex !important;align-items:center;margin:0 !important;padding:0 !important;z-index:1001}
  /* Divi puts padding-bottom:24px on the bar which shoves the hamburger glyph UP; zero it
     and flex-center the glyph so it sits on the same line as the pills */
  body.potx #et_mobile_nav_menu .mobile_menu_bar{margin:0 !important;padding:0 !important;height:62px;display:flex !important;align-items:center;line-height:1 !important}
  body.potx #et_mobile_nav_menu .mobile_menu_bar:before{line-height:1 !important;margin:0 !important;position:static !important;top:auto !important}
  body.rtl.potx #et_mobile_nav_menu{right:auto !important;left:16px}   /* RTL mirror: hamburger far-left */
}