/*
 * Pixron modern layer for NewPixronTheme.
 * Sits on top of pixron-v3.css (the live v3 look) and pixron.css (WStyle bridge).
 * Keeps v3 structure and the white mega menu; modernises type, buttons, hero, cards, motion.
 * Corners stay modest (6-12px) on purpose.
 */

/* ---------------------------------------------------------
   1. Tokens + type
   --------------------------------------------------------- */
:root {
  --px-ease-out: cubic-bezier(.22, 1, .36, 1);
  --px-ease-spring: cubic-bezier(.32, .72, 0, 1);
  --px-hx-bg: #070b16;
  --px-line: #e6e9ef;
  --px-line-dark: rgba(255, 255, 255, .08);
  --px-tint-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -18px rgba(15, 23, 42, .18);
  --px-tint-shadow-hover: 0 1px 2px rgba(15, 23, 42, .05), 0 24px 48px -24px rgba(15, 23, 42, .28);
}
body.pixron-theme .px-num, body.pixron-theme .amount_spot_view { font-variant-numeric: tabular-nums; }
body.pixron-theme h1, body.pixron-theme h2, body.pixron-theme h3 { text-wrap: balance; }
body.pixron-theme p { text-wrap: pretty; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------------------------------------------------------
   3. Navbar — mega menu stays white (v3); compact state gets a real frosted bar
   --------------------------------------------------------- */
body.pixron-theme .px-nav-links > li > a { letter-spacing: -.01em; font-weight: 500 !important; }
body.pixron-theme .px-mega-menu .px-mega-panel {
  border-radius: 12px !important;
  border: 1px solid var(--px-line) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 32px 64px -28px rgba(15, 23, 42, .35) !important;
}
body.pixron-theme .px-mega-menu a { transition: background-color .2s var(--px-ease-out), color .2s var(--px-ease-out) !important; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.px-glass .px-navbar.is-compact {
    background: rgba(9, 14, 28, .78) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 12px 30px -18px rgba(0, 0, 0, .6) !important;
  }
}

/* ---------------------------------------------------------
   4. Hero slider (home). Header sits transparent on top of it.
   --------------------------------------------------------- */
:root { --px-head-h: 116px; }
@media (max-width: 1199.98px) { :root { --px-head-h: 64px; } }

body.px-home .px-topbar,
body.px-home .px-navbar:not(.is-compact),
body.pixron-theme.px-has-hero:not([data-client-nav]) .px-topbar,
body.pixron-theme.px-has-hero:not([data-client-nav]) .px-navbar:not(.is-compact) {
  background-color: transparent !important;
  transition: background-color .35s var(--px-ease-out), box-shadow .35s var(--px-ease-out) !important;
}
/* No rules above/below the menu on the hero: one continuous surface */
body.px-home .px-topbar, body.px-home .px-navbar:not(.is-compact),
body.pixron-theme.px-has-hero:not([data-client-nav]) .px-topbar, body.pixron-theme.px-has-hero:not([data-client-nav]) .px-navbar:not(.is-compact) { border: 0 !important; box-shadow: none !important; }
body.px-home .px-navbar.is-compact, body.pixron-theme.px-has-hero:not([data-client-nav]) .px-navbar.is-compact { background-color: rgba(9, 14, 28, .92) !important; }
/* Inner pages: the page hero slides under the transparent header too */
body.pixron-theme.px-has-hero:not([data-client-nav]) .px-page-hero--pro { margin-top: calc(-1 * var(--px-head-h)) !important; padding-top: calc(var(--px-head-h) + clamp(36px, 4.5vw, 64px)) !important; border-bottom: 0 !important; }

.px-hs {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(-1 * var(--px-head-h));
  padding: calc(var(--px-head-h) + clamp(32px, 3.5vw, 56px)) 0 clamp(120px, 10vw, 148px);
  background: #0a0f1c; color: #cbd5e1;
}
.px-hs-bg, .px-hs-bg::before, .px-hs-bg::after { position: absolute; inset: 0; pointer-events: none; }
.px-hs-bg { z-index: -1;
  background:
    radial-gradient(55% 60% at 80% 35%, rgba(245, 158, 11, .14), transparent 65%),
    radial-gradient(45% 55% at 0% 0%, rgba(30, 64, 175, .12), transparent 70%),
    linear-gradient(180deg, #0b1222 0%, #0a0f1c 60%, #0c1323 100%);
}
.px-hs-bg::before { content: "";
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(75% 85% at 65% 35%, #000 0%, transparent 78%);
          mask-image: radial-gradient(75% 85% at 65% 35%, #000 0%, transparent 78%);
}
.px-hs-bg::after { content: ""; opacity: .06; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.px-hs-inner { max-width: var(--px-container-max, 1560px); margin: 0 auto; padding: 0 var(--px-container-pad, 32px); }

/* All slides share one grid cell: no height jump between slides */
.px-hs-stage { display: grid; }
.px-hs-slide {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 96px); align-items: center;
  visibility: hidden; pointer-events: none;
}
.px-hs-slide.is-active { visibility: visible; pointer-events: auto; }

.px-hs-copy > * { opacity: 0; transform: translateY(16px); transition: opacity .45s var(--px-ease-out), transform .45s var(--px-ease-out); }
.px-hs-slide.is-active .px-hs-copy > * { opacity: 1; transform: none; transition-duration: .8s; }
.px-hs-slide.is-active .px-hs-copy > :nth-child(2) { transition-delay: .07s; }
.px-hs-slide.is-active .px-hs-copy > :nth-child(3) { transition-delay: .14s; }
.px-hs-slide.is-active .px-hs-copy > :nth-child(4) { transition-delay: .21s; }

.px-hs-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px;
  color: #fcd34d; font-size: 14px; font-weight: 500; letter-spacing: .01em;
}
.px-hs-eyebrow-ico {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px;
  color: #fbbf24; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .25);
}
.px-hs-title {
  margin: 0 0 22px; color: #f8fafc !important;
  font-size: clamp(2.4rem, 4vw, 4.1rem) !important; font-weight: 700 !important;
  line-height: 1.04 !important; letter-spacing: -.03em !important; max-width: 16ch;
}
.px-hs-accent { display: block; color: #fbbf24; }
.px-hs-lead { max-width: 52ch; margin: 0 0 36px; font-size: clamp(1rem, 1.1vw, 1.125rem); line-height: 1.7; color: #94a3b8; min-height: 3.4em; }
.px-hs-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Visual: photo in a machined frame, spec rail on frosted glass */
.px-hs-visual { position: relative; width: 100%; max-width: 700px; justify-self: end; }
.px-hs-frame {
  position: relative; margin: 0; padding: 8px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 50px 90px -45px rgba(0, 0, 0, .85);
  opacity: 0; transform: scale(.985) translateY(10px);
  transition: opacity .5s var(--px-ease-out), transform .7s var(--px-ease-out);
}
.px-hs-slide.is-active .px-hs-frame { opacity: 1; transform: none; transition-duration: .8s, 1s; }
.px-hs-frame img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10.5; object-fit: cover; border-radius: 10px;
  filter: saturate(.9) contrast(1.05);
}
.px-hs-frame::after {
  content: ""; position: absolute; inset: 8px; border-radius: 10px; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 15, 28, .25) 0%, transparent 30%, transparent 45%, rgba(10, 15, 28, .92) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.px-hs-tag {
  position: absolute; z-index: 2; top: 26px; left: 26px;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 7px;
  font-size: 12.5px; font-weight: 500; color: #e2e8f0;
  background: rgba(10, 15, 28, .6); border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.px-hs-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .2); }
.px-hs-specs {
  position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 22px; margin: 0; padding: 6px; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; border-radius: 12px;
  background: rgba(12, 18, 33, .62); border: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.px-hs-specs li { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; min-width: 0; }
.px-hs-specs li:nth-child(even) { box-shadow: -1px 0 0 rgba(255, 255, 255, .06); }
.px-hs-specs li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .06); border-radius: 0 0 8px 8px; }
.px-hs-spec-ico {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px;
  color: #fbbf24; background: linear-gradient(180deg, rgba(245, 158, 11, .18), rgba(245, 158, 11, .06));
  border: 1px solid rgba(245, 158, 11, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.px-hs-spec-txt { display: grid; min-width: 0; }
.px-hs-spec-txt strong { color: #f8fafc; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.px-hs-spec-txt small { color: #94a3b8; font-size: 11.5px; line-height: 1.3; }

/* Service tabs with progress */
.px-hs-nav { display: flex; align-items: stretch; gap: 16px; margin-top: clamp(40px, 4.5vw, 64px); }
.px-hs-tabs { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.px-hs-tab {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 16px 14px 0; margin: 0;
  background: none; border: 0; text-align: left; color: #64748b; cursor: pointer;
  transition: color .3s var(--px-ease-out);
}
.px-hs-tab-ico {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px;
  color: #94a3b8; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
  transition: color .3s var(--px-ease-out), background-color .3s var(--px-ease-out), border-color .3s var(--px-ease-out);
}
.px-hs-tab-txt { display: grid; min-width: 0; }
.px-hs-tab-txt strong { color: #cbd5e1; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s var(--px-ease-out); }
.px-hs-tab-txt small { color: #64748b; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-hs-tab:hover .px-hs-tab-txt strong { color: #fff; }
.px-hs-tab:hover .px-hs-tab-ico { color: #e2e8f0; border-color: rgba(255, 255, 255, .16); }
.px-hs-tab.is-active .px-hs-tab-txt strong { color: #fff; }
.px-hs-tab.is-active .px-hs-tab-ico { color: #0f172a; background: #f59e0b; border-color: #f59e0b; box-shadow: 0 8px 20px -10px rgba(245, 158, 11, .8); }
.px-hs-tab:focus-visible { outline: 2px solid #fbbf24; outline-offset: 4px; border-radius: 6px; }
.px-hs-tab-bar { position: absolute; left: 0; right: 16px; top: -1px; height: 2px; overflow: hidden; }
.px-hs-tab-bar i { display: block; height: 100%; width: 100%; background: #f59e0b; transform: scaleX(0); transform-origin: left; }
.px-hs-tab.is-active .px-hs-tab-bar i { transform: scaleX(1); }
.px-hs[data-running] .px-hs-tab.is-active .px-hs-tab-bar i { animation: pxHsProgress var(--px-hs-interval, 7000ms) linear both; }
.px-hs[data-paused] .px-hs-tab.is-active .px-hs-tab-bar i { animation-play-state: paused; }
@keyframes pxHsProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.px-hs-ctrl { display: flex; align-items: center; gap: 8px; padding-top: 18px; }
.px-hs-btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; cursor: pointer;
  color: #cbd5e1; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12);
  transition: color .2s var(--px-ease-out), background-color .2s var(--px-ease-out), border-color .2s var(--px-ease-out);
}
.px-hs-btn:hover { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.px-hs-btn:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }
.px-hs-btn .i-play { display: none; }
.px-hs[data-user-paused] .px-hs-btn .i-play { display: block; }
.px-hs[data-user-paused] .px-hs-btn .i-pause { display: none; }
.px-hs:not([data-interval]) .px-hs-btn[data-px-toggle], .px-hs[data-interval="0"] .px-hs-btn[data-px-toggle] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .px-hs-copy > *, .px-hs-frame { transition: opacity .2s linear !important; transform: none !important; }
  .px-hs-btn[data-px-toggle] { display: none; }
}
html.px-shot .px-hs-copy > *, html.px-shot .px-hs-frame { transition: none !important; }

/* Laptop / small desktop (992–1199): keep copy and visual side by side, a little tighter */
@media (max-width: 1199.98px) {
  .px-hs-slide { gap: clamp(28px, 3.5vw, 44px); }
  .px-hs-title { font-size: clamp(2.2rem, 3.9vw, 2.9rem) !important; }
  .px-hs-lead { margin-bottom: 28px; }
  .px-hs-specs { left: 14px; right: 14px; bottom: 14px; }
  .px-hs-specs li { padding: 8px; gap: 8px; }
  .px-hs-spec-ico { width: 34px; height: 34px; }
  .px-hs-tabs { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .px-hs-tabs::-webkit-scrollbar { display: none; }
}
/* Tablet (768–991): one column, the visual spans the full width and stays short */
@media (max-width: 991.98px) {
  .px-hs-slide { grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
  .px-hs-title { max-width: 18ch; }
  .px-hs-visual { max-width: none; justify-self: stretch; }
  .px-hs-frame img { aspect-ratio: 16 / 8; }
  .px-hs-tabs { grid-template-columns: repeat(5, minmax(190px, 1fr)); }
}
@media (max-width: 767.98px) {
  .px-hs { padding-bottom: 104px; }
  .px-hs-inner { padding: 0 16px; }
  .px-hs-title { font-size: clamp(2rem, 8.6vw, 2.4rem) !important; }
  .px-hs-lead { min-height: 0; }
  .px-hs-actions { flex-direction: column; align-items: stretch; }
  .px-cta { width: 100%; justify-content: space-between; }
  .px-cta--ghost { justify-content: center; }
  .px-hs-frame img { aspect-ratio: 4 / 3; }
  .px-hs-specs { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; background: rgba(255, 255, 255, .03); }
  .px-hs-specs li:nth-child(even) { box-shadow: none; }
  .px-hs-frame::after { background: linear-gradient(180deg, rgba(10, 15, 28, .25), transparent 40%); bottom: auto; height: calc(100% - 16px); }
  /* Phone: icon-only service tabs (names stay for screen readers) + arrows */
  .px-hs-nav { gap: 8px; margin-top: 32px; }
  .px-hs-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; }
  .px-hs-tab { justify-content: center; padding: 14px 0 0; }
  .px-hs-tab-ico { width: 44px; height: 44px; }
  .px-hs-tab-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .px-hs-tab-bar { right: 4px; left: 4px; }
  .px-hs-ctrl { padding-top: 14px; gap: 6px; }
  .px-hs-btn[data-px-toggle] { display: none; }
  .px-hs-spec-ico { width: 34px; height: 34px; }
  .px-hs-specs li { padding: 8px; gap: 8px; }
}

/* ---------------------------------------------------------
   5. Home sections + cards
   --------------------------------------------------------- */
body.pixron-theme .px-home-domain-card {
  border-radius: 14px !important;
  border: 1px solid var(--px-line) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 30px 60px -30px rgba(15, 23, 42, .35) !important;
}
body.pixron-theme .px-home-domain-input-wrap { border-radius: 10px !important; transition: border-color .2s var(--px-ease-out), box-shadow .2s var(--px-ease-out) !important; }
body.pixron-theme .px-home-domain-input-wrap:focus-within { box-shadow: 0 0 0 4px rgba(245, 158, 11, .16) !important; }

/* Section headers: eyebrow becomes a quiet label with a short amber rule */
body.pixron-theme .px-section-header .px-slide-tag--light {
  background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
  display: inline-flex !important; align-items: center; gap: 10px;
  color: #b45309 !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .02em !important;
}
body.pixron-theme .px-section-header .px-slide-tag--light::before { content: ""; width: 18px; height: 2px; background: #f59e0b; border-radius: 1px; }
body.pixron-theme .px-section-header h2 {
  font-size: clamp(2rem, 3.2vw, 3rem) !important; font-weight: 700 !important;
  letter-spacing: -.02em !important; line-height: 1.06 !important;
}
body.pixron-theme .px-section-header p { color: #64748b !important; max-width: 60ch; margin-inline: auto; }

/* Solutions bento: tighter corners, slow image drift on hover, CTA as a bar */
body.pixron-theme .px-sol-tile {
  border-radius: 12px !important; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 24px 48px -32px rgba(15, 23, 42, .55) !important;
  transition: transform .5s var(--px-ease-spring), box-shadow .5s var(--px-ease-spring) !important;
}
body.pixron-theme .px-sol-tile img { transition: transform 1.2s var(--px-ease-out) !important; }
body.pixron-theme .px-sol-tile:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 36px 64px -32px rgba(15, 23, 42, .65) !important; }
body.pixron-theme .px-sol-tile:hover img { transform: scale(1.04); }
body.pixron-theme .px-sol-title { letter-spacing: -.025em !important; font-weight: 700 !important; }
body.pixron-theme .px-sol-kicker { color: #fbbf24 !important; letter-spacing: .01em; }
body.pixron-theme .px-sol-more svg { transition: transform .35s var(--px-ease-spring); }
body.pixron-theme .px-sol-tile:hover .px-sol-more svg { transform: translateX(3px); }

/* Plan tabs: segmented control */
body.pixron-theme .px-plan-tabs {
  border-radius: 10px !important; padding: 4px !important; gap: 2px !important;
  background: #eef1f5 !important; border: 1px solid var(--px-line) !important; box-shadow: none !important;
}
body.pixron-theme .px-plan-tab { border-radius: 7px !important; font-weight: 500 !important; color: #475569 !important; transition: background-color .25s var(--px-ease-out), color .25s var(--px-ease-out) !important; }
body.pixron-theme .px-plan-tab:hover { color: #0f172a !important; }
body.pixron-theme .px-plan-tab.is-active { background: #fff !important; color: #0f172a !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 4px 10px -4px rgba(15, 23, 42, .15) !important; }

/* Why Pixron + CTA: photo and banner corners in line with the rest */
body.pixron-theme .px-why-photo, body.pixron-theme .px-why-photo img { border-radius: 12px !important; }
body.pixron-theme .px-why-item h3, body.pixron-theme .px-why-intro h2 { letter-spacing: -.025em !important; }
body.pixron-theme .px-why-intro h2 { font-weight: 700 !important; letter-spacing: -.02em !important; line-height: 1.04 !important; }
body.pixron-theme .px-cta-banner { border-radius: 14px !important; box-shadow: 0 40px 80px -40px rgba(15, 23, 42, .6) !important; }
body.pixron-theme .px-cta-banner h2 { font-weight: 700 !important; letter-spacing: -.02em !important; }

/* Tech strip + TLD chips: quieter, aligned */
body.pixron-theme .px-home-tld-pill { border-radius: 7px !important; transition: border-color .2s var(--px-ease-out), background-color .2s var(--px-ease-out), transform .2s var(--px-ease-out) !important; }
body.pixron-theme .px-home-tld-pill:hover { transform: translateY(-1px); }

/* Footer contact tiles */
body.pixron-theme .px-footer a { transition: color .2s var(--px-ease-out) !important; }

body.pixron-theme .px-page-hero--pro h1 { font-weight: 700 !important; letter-spacing: -.02em !important; }

/* =========================================================
   B · Premium depth — chosen direction (2026-10-19)
   Buttons: light from above (gradient + top highlight), weight below (inner edge + tinted drop),
   a sheen that sweeps on hover. Cards: hairline gradient border, layered soft shadow;
   the featured plan is deep navy with an amber glow.
   ========================================================= */
:root {
  --pxb-amber-grad: linear-gradient(180deg, #fcc046 0%, #f59e0b 55%, #ec9006 100%);
  --pxb-amber-grad-hover: linear-gradient(180deg, #fdca5c 0%, #f8a91c 55%, #f09a0c 100%);
  --pxb-amber-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(146, 64, 14, .18), 0 1px 2px rgba(120, 53, 15, .3), 0 10px 24px -10px rgba(245, 158, 11, .75);
  --pxb-amber-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(146, 64, 14, .18), 0 1px 2px rgba(120, 53, 15, .3), 0 16px 32px -12px rgba(245, 158, 11, .85);
  --pxb-ink-grad: linear-gradient(180deg, #1e293b, #0f172a);
  --pxb-ink-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(2, 6, 23, .4), 0 10px 22px -12px rgba(2, 6, 23, .7);
  --pxb-light-grad: linear-gradient(180deg, #ffffff, #f1f5f9);
  --pxb-light-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15, 23, 42, .08), 0 6px 14px -10px rgba(15, 23, 42, .25);
  --pxb-card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 6px rgba(15, 23, 42, .04), 0 24px 40px -24px rgba(15, 23, 42, .22);
  --pxb-card-shadow-hover: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 10px rgba(15, 23, 42, .05), 0 36px 56px -28px rgba(15, 23, 42, .3);
}

/* Buttons — pixron.com language (2026-10-19): pill, flat amber #fbb040, no shadow,
   arrow inline; hover lifts 2px and the arrow slides. On dark surfaces hover turns white,
   on light surfaces it turns ink (white would vanish). Secondary is a hairline pill. */
:root { --pxk-amber: #fbb040; --pxk-ink: #111; --pxk-ease: cubic-bezier(.16, 1, .3, 1); }

body.pixron-theme .px-btn, body.pixron-theme .btn, body.pixron-theme .px-cta, body.pixron-theme .gonderbtn,
body.pixron-theme .px-plan-btn, body.pixron-theme .px-srv-buy, body.pixron-theme .px-hs-btn {
  border-radius: 999px !important;
  transition: background-color .25s, border-color .25s, color .25s, transform .45s var(--pxk-ease) !important;
}
body.pixron-theme .px-btn:focus-visible, body.pixron-theme .btn:focus-visible, body.pixron-theme .px-cta:focus-visible,
body.pixron-theme .gonderbtn:focus-visible { outline: 2px solid var(--pxk-amber) !important; outline-offset: 3px; }
body.pixron-theme .px-btn svg, body.pixron-theme .px-cta svg, body.pixron-theme .btn .bi-arrow-right { transition: transform .25s; }
body.pixron-theme .px-btn:hover svg, body.pixron-theme .px-cta:hover svg, body.pixron-theme .btn:hover .bi-arrow-right { transform: translateX(4px); }

/* Primary */
body.pixron-theme .px-btn-primary, body.pixron-theme .btn-primary, body.pixron-theme .gonderbtn, body.pixron-theme .px-srv-buy,
body.pixron-theme .px-cta--primary, body.pixron-theme .px-ct .px-contact-submit, body.pixron-theme .px-doc-help-btn {
  background: var(--pxk-amber) !important; background-image: none !important;
  border: 1px solid var(--pxk-amber) !important; color: var(--pxk-ink) !important;
  box-shadow: none !important; text-shadow: none !important; font-weight: 600 !important;
}
body.pixron-theme .px-btn-primary:hover, body.pixron-theme .btn-primary:hover, body.pixron-theme .gonderbtn:hover, body.pixron-theme .px-srv-buy:hover,
body.pixron-theme .px-cta--primary:hover, body.pixron-theme .px-ct .px-contact-submit:hover, body.pixron-theme .px-doc-help-btn:hover {
  background: var(--pxk-ink) !important; border-color: var(--pxk-ink) !important; color: #fff !important;
  transform: translate3d(0, -2px, 0);
}
/* …on dark surfaces the hover goes white, exactly like pixron.com */
body.pixron-theme .px-hs .px-cta--primary:hover, body.pixron-theme .px-navbar .px-btn-primary:hover,
body.pixron-theme .px-mobile-drawer .px-btn-primary:hover, body.pixron-theme .px-cta-banner .px-btn-primary:hover,
body.pixron-theme .px-footer .px-btn-primary:hover, body.pixron-theme .px-mega-cta:hover,
body.pixron-theme .chrome-dark .btn-primary:hover, body.pixron-theme .band-dark .btn-primary:hover {
  background: #fff !important; border-color: #fff !important; color: var(--pxk-ink) !important;
}
body.pixron-theme .px-btn:active, body.pixron-theme .btn:active, body.pixron-theme .px-cta:active, body.pixron-theme .gonderbtn:active { transform: translate3d(0, 0, 0) !important; }

/* Secondary: hairline pill */
body.pixron-theme .px-cta--ghost, body.pixron-theme .px-btn--on-dark, body.pixron-theme .px-hs-btn,
body.pixron-theme .px-navbar .px-btn-outline, body.pixron-theme .px-nav-actions .px-btn:not(.px-btn-primary) {
  background: transparent !important; background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .34) !important; color: #fff !important; box-shadow: none !important;
}
body.pixron-theme .px-cta--ghost:hover, body.pixron-theme .px-btn--on-dark:hover, body.pixron-theme .px-hs-btn:hover,
body.pixron-theme .px-navbar .px-btn-outline:hover, body.pixron-theme .px-nav-actions .px-btn:not(.px-btn-primary):hover {
  border-color: var(--pxk-amber) !important; color: var(--pxk-amber) !important; background: transparent !important;
}
body.pixron-theme .px-plan-btn, body.pixron-theme #wrapper .px-btn-outline, body.pixron-theme .px-home-domain .px-btn-outline,
body.pixron-theme .btn-outline-secondary, body.pixron-theme .btn-soft {
  background: transparent !important; background-image: none !important;
  border: 1px solid #d0d5dd !important; color: var(--pxk-ink) !important; box-shadow: none !important;
}
body.pixron-theme .px-plan-btn:hover, body.pixron-theme #wrapper .px-btn-outline:hover, body.pixron-theme .px-home-domain .px-btn-outline:hover,
body.pixron-theme .btn-outline-secondary:hover, body.pixron-theme .btn-soft:hover {
  border-color: var(--pxk-ink) !important; background: var(--pxk-ink) !important; color: #fff !important;
}
/* Ink button (domain transfer etc.) */
body.pixron-theme .btn-dark, body.pixron-theme .px-home-domain-transfer, body.pixron-theme .px-home-domain .px-btn-dark {
  background: var(--pxk-ink) !important; border: 1px solid var(--pxk-ink) !important; color: #fff !important; box-shadow: none !important;
}
body.pixron-theme .btn-dark:hover, body.pixron-theme .px-home-domain-transfer:hover, body.pixron-theme .px-home-domain .px-btn-dark:hover {
  background: var(--pxk-amber) !important; border-color: var(--pxk-amber) !important; color: var(--pxk-ink) !important; transform: translate3d(0, -2px, 0);
}
body.pixron-theme .gonderbtn.is-disabled, body.pixron-theme .px-srv-buy.is-disabled, body.pixron-theme .btn:disabled {
  background: #f2f4f7 !important; border-color: #e4e7ec !important; color: #98a2b3 !important; transform: none !important;
}
/* Hero / large CTA geometry (pixron.com: 16px/600, 16×28 padding) */
.px-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 28px; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none !important; white-space: nowrap; cursor: pointer; }
.px-cta svg { flex: none; }

/* ---- Cards ---- */
body.pixron-theme .px-plan-card, body.pixron-theme .tablepaket, body.pixron-theme .px-srv-card {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, #dfe5ec, #f1f5f9) border-box !important;
  border: 1px solid transparent !important; border-radius: 14px !important;
  box-shadow: var(--pxb-card-shadow) !important;
  transition: transform .45s var(--px-ease-spring), box-shadow .45s var(--px-ease-spring) !important;
}
body.pixron-theme .px-plan-card:hover, body.pixron-theme .tablepaket:hover, body.pixron-theme .px-srv-card:hover {
  transform: translateY(-4px) !important; box-shadow: var(--pxb-card-shadow-hover) !important;
}
body.pixron-theme .px-plan-head { text-align: left !important; align-items: flex-start !important; padding-top: 28px !important; }
body.pixron-theme .px-plan-price { justify-content: flex-start !important; align-items: baseline !important; }
body.pixron-theme .px-plan-name { font-size: 16px !important; font-weight: 700 !important; color: #0f172a !important; }
body.pixron-theme .px-plan-amount { font-size: 2.5rem !important; font-weight: 700 !important; letter-spacing: -.01em !important; color: #0f172a !important; font-variant-numeric: tabular-nums; }
body.pixron-theme .px-plan-period { color: #94a3b8 !important; font-size: 13px !important; }
body.pixron-theme .px-plan-features li { color: #334155 !important; }
body.pixron-theme .px-plans-grid { align-items: stretch !important; }

/* Featured: deep navy, amber hairline and glow */
body.pixron-theme .px-plan-featured, body.pixron-theme .tablepaket.active, body.pixron-theme .px-srv-card.is-popular {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(245, 158, 11, .22), transparent 60%) padding-box,
    linear-gradient(180deg, #152036, #0d1424) padding-box,
    linear-gradient(180deg, #f59e0b, rgba(245, 158, 11, .15)) border-box !important;
  border: 1px solid transparent !important;
  box-shadow: 0 30px 60px -28px rgba(15, 23, 42, .6) !important;
  color: #e2e8f0 !important;
}
body.pixron-theme .px-plan-featured:hover, body.pixron-theme .tablepaket.active:hover, body.pixron-theme .px-srv-card.is-popular:hover {
  box-shadow: 0 40px 70px -28px rgba(15, 23, 42, .7), 0 0 0 1px rgba(245, 158, 11, .15) !important;
}
body.pixron-theme .px-plan-featured .px-plan-name { color: #f1f5f9 !important; }
body.pixron-theme .px-plan-featured .px-plan-amount { color: #fbbf24 !important; }
body.pixron-theme .px-plan-featured .px-plan-period { color: #94a3b8 !important; }
body.pixron-theme .px-plan-featured .px-plan-features li { color: #cbd5e1 !important; }
body.pixron-theme .px-plan-featured .px-plan-divider { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .08) !important; }
body.pixron-theme .px-plan-featured .px-plan-features li::before,
body.pixron-theme .tablepaket.active .products_features li::before {
  background: #fbbf24 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231c1203' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat !important;
}
body.pixron-theme .tablepaket.active .tpakettitle, body.pixron-theme .tablepaket.active h3, body.pixron-theme .tablepaket.active h3 *,
body.pixron-theme .px-srv-card.is-popular .px-srv-title { color: #f8fafc !important; }
body.pixron-theme .tablepaket.active .amount_spot_view, body.pixron-theme .px-srv-card.is-popular .px-srv-price strong { color: #fbbf24 !important; }
body.pixron-theme .tablepaket.active h4, body.pixron-theme .tablepaket.active .products_features,
body.pixron-theme .px-srv-card.is-popular, body.pixron-theme .px-srv-card.is-popular .px-srv-loc,
body.pixron-theme .px-srv-card.is-popular .px-srv-price span, body.pixron-theme .px-srv-card.is-popular li { color: #cbd5e1 !important; }
body.pixron-theme .tablepaket.active .paketline { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .08) !important; }
body.pixron-theme .px-plan-badge, body.pixron-theme .tablepopular, body.pixron-theme .px-srv-badge {
  background: #fbb040 !important; color: #111 !important; border: 1px solid #fbb040 !important;
  border-radius: 6px !important; font-weight: 700 !important; letter-spacing: .02em !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 14px -6px rgba(245, 158, 11, .7) !important;
}

/* Other white cards pick up the same hairline + layered shadow */
body.pixron-theme .px-home-domain-card, body.pixron-theme .px-home-tech-inner, body.pixron-theme .px-ct-card,
body.pixron-theme .px-doc-card, body.pixron-theme .px-cat-trust {
  border-color: #e2e8f0 !important; box-shadow: var(--pxb-card-shadow) !important;
}


body.pixron-theme .tablepaket.active .px-plan-features li, body.pixron-theme .tablepaket.active .products_features { color: #cbd5e1 !important; }
body.pixron-theme .tablepaket.active .px-plan-features { border-top-color: rgba(255, 255, 255, .08) !important; }
body.pixron-theme .tablepaket.active .px-plan-features li::before {
  background: #fbbf24 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231c1203' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat !important;
}
body.pixron-theme .tablepaket.active h4 { color: #94a3b8 !important; }
body.pixron-theme .tablepaket.active, body.pixron-theme .px-plan-featured { border-width: 1px !important; }
body.pixron-theme .tablepaket.active .products_features { border-top-color: rgba(255, 255, 255, .08) !important; }
body.pixron-theme .tablepaket.active .amount_spot_view i, body.pixron-theme .tablepaket.active .currpos { color: #fbbf24 !important; }
/* Header controls follow the pill language too */
:root, body.pixron-theme .px-navbar, body.pixron-theme .px-nav-actions { --px-nav-ctrl-r: 999px !important; }
body.pixron-theme .px-nav-actions .px-btn, body.pixron-theme .px-nav-actions .px-nav-tool { border-radius: 999px !important; }

/* Inner page header photo (admin "header background" or the theme fallback).
   v3 painted a solid overlay that hid it; now the photo shows on the right and fades into slate under the text. */
body.pixron-theme .px-page-hero--pro.has-image { background-size: cover !important; background-position: center 45% !important; background-repeat: no-repeat !important; }
body.pixron-theme .px-page-hero--pro.has-image .px-page-hero-overlay {
  background:
    linear-gradient(90deg, #0b1220 0%, rgba(11, 18, 32, .94) 32%, rgba(11, 18, 32, .62) 62%, rgba(11, 18, 32, .35) 100%),
    linear-gradient(180deg, rgba(11, 18, 32, .2) 0%, rgba(11, 18, 32, .65) 100%) !important;
}

/* Joined controls keep one outline: the pill shape belongs to the group, not to every button in it
   (btn-group segmented toggles, input-group buttons). Without this each button became its own pill. */
body.pixron-theme .btn-group > .btn, body.pixron-theme .btn-group-vertical > .btn, body.pixron-theme .input-group > .btn,
body.pixron-theme .input-group > .form-control, body.pixron-theme .input-group > .form-select, body.pixron-theme .input-group > .input-group-text { border-radius: 0 !important; }
body.pixron-theme .btn-group > .btn:first-child, body.pixron-theme .btn-group > .btn-check:first-child + .btn,
body.pixron-theme .input-group > :first-child { border-start-start-radius: 999px !important; border-end-start-radius: 999px !important; }
body.pixron-theme .btn-group > .btn:last-child, body.pixron-theme .input-group > :last-child:not(.dropdown-menu):not(.invalid-feedback):not(.valid-feedback) { border-start-end-radius: 999px !important; border-end-end-radius: 999px !important; }
body.pixron-theme .input-group > .form-control:first-child, body.pixron-theme .input-group > .form-select:first-child { padding-inline-start: 18px; }
body.pixron-theme .btn-group > .btn + .btn, body.pixron-theme .btn-group > .btn-check + .btn { margin-inline-start: -1px; }
/* Checked toggle buttons (btn-check) must read as selected even with our white secondary buttons */
body.pixron-theme .btn-check:checked + .btn, body.pixron-theme .btn-check:active + .btn, body.pixron-theme .btn.active:not(.nav-link) {
  background: #111 !important; border-color: #111 !important; color: #fff !important;
}
body.pixron-theme .btn-check:focus-visible + .btn { outline: 2px solid #fbb040; outline-offset: 2px; }

/* Inline code (KB articles, blog): brand tone instead of Bootstrap pink */
body.pixron-theme code { color: #b54708; background: #fff7e6; padding: .1em .35em; border-radius: 5px; font-size: .9em; }
body.pixron-theme pre code { background: none; padding: 0; color: inherit; }

/* Mobile: tables inside prose (legal SLA table, KB server settings, news/blog) scroll inside themselves
   instead of widening the page; long hint links and KPI badges wrap. Found by the 375px layout sweep. */
@media (max-width: 767.98px) {
  body.pixron-theme :is(.px-doc-body, .kb-prose, .px-cms, .blog-prose, .news-prose, .category-content, article) table:not(.table-responsive table) {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  body.pixron-theme :is(.px-doc-body, .kb-prose) td, body.pixron-theme :is(.px-doc-body, .kb-prose) th { min-width: 96px; }
  body.pixron-theme .kb-search-hint a { white-space: normal; }
}
body.pixron-theme .dashx-kpi .badge, body[data-px-client] .dashx-kpi .badge { white-space: normal; text-align: start; line-height: 1.3; max-width: 100%; }

/* One container for the whole site: Bootstrap .container follows the Pixron header/hero rail
   (--px-container-max 1560px, --px-container-pad 40/24/16px) so content lines up with the logo and menu. */
body.pixron-theme:not([data-px-client]) :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl) {
  max-width: var(--px-container-max, 1560px);
  padding-left: var(--px-container-pad, 24px);
  padding-right: var(--px-container-pad, 24px);
}
/* Gutter steps: 40px (wide) / 24px (<=1280, tablets) / 16px (phones). 24px stays up to the phone
   breakpoint because Bootstrap .row.g-lg-5 pulls 24px outwards from 992px up. */
@media (max-width: 1024px) {
  body.pixron-theme .px-navbar-container,
  body.pixron-theme .px-page-hero-container,
  body.pixron-theme:not([data-px-client]) :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl) {
    padding-left: max(var(--px-container-pad, 24px), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--px-container-pad, 24px), env(safe-area-inset-right, 0px)) !important;
  }
}
@media (max-width: 1280px) { :root { --px-container-pad: 24px; } }
@media (max-width: 767.98px) { :root { --px-container-pad: 16px; } }

/* ---------------------------------------------------------------------------
   Navbar fit: between 1200px and the mobile breakpoint the WISECP menu (admin-defined, any length)
   did not fit next to the logo and the account buttons. Three steps:
   1) <=1439px: tighter links, nav badges hidden;  2) <=1199px: burger + drawer (CSS default);
   3) pixron.js measures the real menu and adds .px-nav-tight / .px-nav-collapsed when it still overflows. */
@media (max-width: 1439.98px) {
  body.pixron-theme .px-navbar .px-nav-link { padding-left: 10px !important; padding-right: 10px !important; }
  body.pixron-theme .px-navbar .px-nav-badge { display: none !important; }
  body.pixron-theme .px-navbar-container { gap: 14px !important; }
}
body.pixron-theme .px-navbar.px-nav-tight .px-nav-link { padding-left: 9px !important; padding-right: 9px !important; }
body.pixron-theme .px-navbar.px-nav-tight .px-nav-badge { display: none !important; }
@media (max-width: 1199.98px) {
  body.pixron-theme .px-navbar .px-mobile-toggle { display: flex !important; flex: 0 0 auto !important; width: 40px !important; height: 40px !important; min-width: 40px !important; padding: 0 !important; order: 2 !important; }
  body.pixron-theme .px-navbar .px-nav-links { display: none !important; }
  body.pixron-theme .px-navbar .px-nav-actions { flex: 0 0 auto !important; min-width: 0 !important; width: auto !important; gap: 8px !important; overflow: visible !important; }
  body.pixron-theme .px-navbar .px-nav-tools { display: inline-flex !important; flex: 0 0 auto !important; gap: 6px !important; order: 1 !important; min-width: 0 !important; }
  body.pixron-theme .px-navbar .px-nav-signin, body.pixron-theme .px-navbar .px-nav-account { display: none !important; }
}
  body.pixron-theme .px-navbar.px-nav-collapsed .px-mobile-toggle { display: flex !important; flex: 0 0 auto !important; width: 40px !important; height: 40px !important; min-width: 40px !important; padding: 0 !important; order: 2 !important; }
  body.pixron-theme .px-navbar.px-nav-collapsed .px-nav-links { display: none !important; }
  body.pixron-theme .px-navbar.px-nav-collapsed .px-nav-actions { flex: 0 0 auto !important; min-width: 0 !important; width: auto !important; gap: 8px !important; overflow: visible !important; }
  body.pixron-theme .px-navbar.px-nav-collapsed .px-nav-tools { display: inline-flex !important; flex: 0 0 auto !important; gap: 6px !important; order: 1 !important; min-width: 0 !important; }
  body.pixron-theme .px-navbar.px-nav-collapsed .px-nav-signin, body.pixron-theme .px-navbar.px-nav-collapsed .px-nav-account { display: none !important; }

/* Narrow-phone safety: auto-fit grids whose minimum column is wider than a 320px screen's content box
   (WStyle + v3 components) — the column may shrink to the container instead of overflowing it. */
body.pixron-theme .kb-article-grid { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
body.pixron-theme .dashx-subgrid { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
body.pixron-theme .reference-grid { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
body.pixron-theme .px-srv-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
body.pixron-theme .px-privileges-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important; }
body.pixron-theme .px-editorial-list-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) !important; }
/* Grid items default to min-width:auto (their min-content) and push the contact split past a 320px screen */
body.pixron-theme .px-contact-split-row > * { min-width: 0; }

/* iOS Safari zooms the page when a focused field is under 16px — keep text fields at 16px on iOS only */
@supports (-webkit-touch-callout: none) {
  body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
  body select, body textarea { font-size: max(16px, 1em) !important; }
}