/* ==========================================================================
   Pixel Academy — Public shell
   Reusable public header, mobile drawer, footer, buttons, section primitives
   and the shared "Pixel world" atmosphere layers.
   Depends on pixel-v2.css tokens. Never modifies it.
   Arabic-first, true RTL, mobile-first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. World tokens
   -------------------------------------------------------------------------- */
:root {
  /* Night side of the Pixel world */
  --px-void: #06051a;
  --px-deep: #0a0722;
  --px-night: #120e30;
  --px-panel: #191243;
  --px-panel-2: #221a55;

  /* Light side */
  --px-paper: #f5f4fb;
  --px-paper-2: #ffffff;
  --px-paper-3: #eceaf7;

  /* Light */
  --px-violet: #7c4dff;
  --px-violet-2: #a274ff;
  --px-violet-deep: #4a20bd;
  --px-cyan: #22d3ee;
  --px-gold: #f0c04c;
  --px-gold-2: #ffdf9a;

  /* Ink */
  --px-on-dark: #ffffff;
  --px-on-dark-2: rgba(255, 255, 255, 0.74);
  --px-on-dark-3: rgba(255, 255, 255, 0.52);
  --px-line: rgba(255, 255, 255, 0.11);
  --px-line-2: rgba(255, 255, 255, 0.2);

  /* Layout */
  --px-shell: 1320px;
  --px-pad: 18px;
  --px-header-h: 62px;
  /* The full rendered header height, Safe Area included. pixel-public.js
     replaces it with the measured value; this declaration is the correct
     fallback before the shell initialises and when JS is unavailable.
     Never add env(safe-area-inset-top) on top of it a second time. */
  --px-header-total: calc(var(--px-header-h) + env(safe-area-inset-top, 0px));
  --px-radius: 18px;
  --px-radius-lg: 26px;

  /* One corner/radius system shared by every surface in the Pixel world:
     controls and chips, cards and panels, section-level containers. */
  --px-r-sm: 14px;
  --px-r: 20px;
  --px-r-lg: 28px;

  /* Motion */
  --px-ease: cubic-bezier(0.22, 0.61, 0.24, 1);
  --px-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   1b. Adaptive tokens — these flip with html[data-theme]
   The permanently dark parts of the world (destinations, final CTA, footer,
   interface panels) deliberately keep --px-on-dark / --px-line and never flip.
   -------------------------------------------------------------------------- */
:root,
html[data-theme="dark"] {
  --px-page-bg: #0a0722;

  --px-ink: #ffffff;
  --px-ink-2: rgba(255, 255, 255, 0.74);
  --px-ink-3: rgba(255, 255, 255, 0.52);

  --px-rule: rgba(255, 255, 255, 0.11);
  --px-rule-2: rgba(255, 255, 255, 0.2);
  --px-chip: rgba(255, 255, 255, 0.06);
  --px-chip-2: rgba(255, 255, 255, 0.13);
  --px-accent: var(--px-violet-2);

  --px-header-bg: linear-gradient(180deg, rgba(6, 5, 26, 0.82) 0%, rgba(6, 5, 26, 0) 100%);
  --px-header-stuck: rgba(9, 7, 32, 0.9);
  --px-header-shadow: 0 12px 34px rgba(4, 3, 16, 0.44);

  --px-drawer-bg: linear-gradient(165deg, #120e30 0%, #0a0722 62%, #08061e 100%);
  --px-drawer-shadow: 0 0 60px rgba(0, 0, 0, 0.6);

  --px-grid-line: rgba(255, 255, 255, 0.11);
  --px-noise: rgba(255, 255, 255, 0.024);
  --px-noise-2: rgba(255, 255, 255, 0.02);
}

html[data-theme="light"] {
  /* Warm off-white, very light lavender, clean white — not an inversion. */
  --px-paper: #f8f5f0;
  --px-paper-2: #ffffff;
  --px-paper-3: #f0ecfa;
  --px-paper-4: #e9e3f7;
  --px-page-bg: #f8f5f0;

  --px-ink: #1d1442;
  --px-ink-2: #4b4372;
  --px-ink-3: #6d6595;

  --px-rule: rgba(74, 32, 189, 0.14);
  --px-rule-2: rgba(74, 32, 189, 0.26);
  --px-chip: rgba(255, 255, 255, 0.74);
  --px-chip-2: rgba(124, 77, 255, 0.14);
  --px-accent: var(--px-violet-deep);

  --px-header-bg: linear-gradient(180deg, rgba(250, 248, 244, 0.92) 0%, rgba(250, 248, 244, 0) 100%);
  --px-header-stuck: rgba(252, 250, 247, 0.9);
  --px-header-shadow: 0 12px 30px rgba(58, 30, 140, 0.13);

  --px-drawer-bg: linear-gradient(165deg, #ffffff 0%, #f6f2fd 58%, #ece5fb 100%);
  --px-drawer-shadow: 0 0 60px rgba(37, 22, 92, 0.24);

  --px-grid-line: rgba(74, 32, 189, 0.1);
  --px-noise: rgba(37, 22, 92, 0.022);
  --px-noise-2: rgba(37, 22, 92, 0.018);
}

/* Dark-theme values for the paper bands, kept beside the light set. */
:root,
html[data-theme="dark"] {
  --px-paper-4: #e9e6f7;
}

@media (min-width: 768px) {
  :root {
    --px-pad: 26px;
    --px-header-h: 72px;
  }
}

@media (min-width: 1200px) {
  :root {
    --px-pad: 34px;
  }
}

/* --------------------------------------------------------------------------
   2. Page base
   -------------------------------------------------------------------------- */
body.px-body,
body.px-body *,
body.px-body *::before,
body.px-body *::after {
  box-sizing: border-box;
}

body.px-body {
  margin: 0;
  color: var(--pa-text);
  background: var(--px-page-bg);
  overflow-x: hidden;
  transition: background-color 320ms var(--px-ease);
}

body.px-body ul,
body.px-body ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.px-body figure {
  margin: 0;
}

body.px-body [hidden] {
  display: none !important;
}

/* Brand links stay easy to hit without changing the logo's own size */
body.px-body .pa-brand-link {
  min-height: 44px;
}

/* Skip link */
body.px-body .px-skip {
  position: absolute;
  top: -100px;
  inset-inline-start: 16px;
  z-index: 300;
  padding: 12px 18px;
  font-weight: 800;
  color: #fff;
  background: var(--px-violet-deep);
  border-radius: 0 0 12px 12px;
  transition: top 180ms var(--px-ease);
}

body.px-body .px-skip:focus {
  top: 0;
  color: #fff;
}

.px-shell {
  width: 100%;
  max-width: var(--px-shell);
  margin-inline: auto;
  padding-inline: var(--px-pad);
}

.px-shell--wide {
  max-width: 1560px;
}

/* Every band clips its own atmosphere so the page never scrolls sideways */
.px-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.px-band--dark {
  color: var(--px-on-dark);
  background: var(--px-deep);
}

.px-band--paper {
  color: var(--pa-text);
  background: var(--px-paper);
}

body.px-body .px-band--dark h1,
body.px-body .px-band--dark h2,
body.px-body .px-band--dark h3,
body.px-body .px-band--dark h4 {
  color: var(--px-on-dark);
}

body.px-body .px-band--dark p {
  color: var(--px-on-dark-2);
}

/* --------------------------------------------------------------------------
   3. Atmosphere — pixel grid, noise, glow (CSS only)
   -------------------------------------------------------------------------- */
.px-atmo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.px-atmo__grid {
  position: absolute;
  inset: -10%;
  background-image: linear-gradient(var(--px-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--px-line) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 78%);
}

.px-atmo__grid--paper {
  background-image: linear-gradient(rgba(22, 19, 46, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 19, 46, 0.07) 1px, transparent 1px);
}

.px-atmo__glow {
  position: absolute;
  top: -18%;
  inset-inline-end: -14%;
  width: 62vw;
  max-width: 820px;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
}

.px-atmo__glow--low {
  top: auto;
  bottom: -22%;
  inset-inline-end: auto;
  inset-inline-start: -18%;
}

.px-atmo__glow--violet {
  background: radial-gradient(circle, rgba(124, 77, 255, 0.72) 0%, transparent 66%);
}

.px-atmo__glow--cyan {
  background: radial-gradient(circle, rgba(34, 211, 238, 0.38) 0%, transparent 66%);
}

.px-atmo__glow--gold {
  background: radial-gradient(circle, rgba(240, 192, 76, 0.28) 0%, transparent 66%);
}

/* Fine CSS-only grain so large dark areas never look flat */
.px-atmo__noise {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.024) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px);
}

/* Row of pixel squares used as a section edge detail */
.px-pixrow {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.px-pixrow i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--px-violet);
  opacity: 0.85;
}

.px-pixrow i:nth-child(2) {
  background: var(--px-cyan);
  height: 14px;
}

.px-pixrow i:nth-child(3) {
  background: var(--px-gold);
  opacity: 0.7;
}

.px-pixrow i:nth-child(4) {
  background: var(--px-violet-2);
  height: 5px;
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
body.px-body .px-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 26px;
  font-family: var(--pa-font);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, var(--px-violet) 0%, var(--px-violet-deep) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(90, 42, 224, 0.35);
  cursor: pointer;
  transition: transform var(--pa-t) var(--px-ease), box-shadow var(--pa-t) var(--px-ease),
    background-color var(--pa-t) var(--px-ease), border-color var(--pa-t) var(--px-ease),
    color var(--pa-t) var(--px-ease);
}

body.px-body .px-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(90, 42, 224, 0.45);
}

body.px-body .px-btn:active {
  transform: translateY(0);
}

body.px-body .px-btn i {
  font-size: 0.85em;
}

body.px-body .px-btn--ghost {
  color: var(--px-on-dark);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--px-line-2);
  box-shadow: none;
}

body.px-body .px-btn--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 10px 24px rgba(5, 3, 20, 0.4);
}

body.px-body .px-btn--ink {
  color: var(--pa-text);
  background: #fff;
  border-color: var(--pa-border);
  box-shadow: var(--pa-shadow-sm);
}

body.px-body .px-btn--ink:hover {
  color: var(--px-violet-deep);
  background: #fff;
  box-shadow: var(--pa-shadow);
}

body.px-body .px-btn--sm {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 0.85rem;
  border-radius: 12px;
}

body.px-body .px-btn--block {
  display: flex;
  width: 100%;
}

body.px-body .px-btn:focus-visible,
body.px-body .px-link:focus-visible,
body.px-body a:focus-visible,
body.px-body button:focus-visible {
  outline: 3px solid var(--px-cyan);
  outline-offset: 3px;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. Section heads
   -------------------------------------------------------------------------- */
.px-head {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin-bottom: clamp(28px, 5vw, 52px);
}

.px-head--center {
  margin-inline: auto;
  text-align: center;
}

.px-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--px-violet-2);
}

.px-eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--px-cyan);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.9);
}

.px-band--paper .px-eyebrow {
  color: var(--px-violet-deep);
}

body.px-body .px-title {
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 4.4vw, 2.7rem);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

body.px-body .px-lead {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(0.95rem, 2.4vw, 1.06rem);
  line-height: 1.85;
}

.px-head--center .px-lead {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   6. Public header
   -------------------------------------------------------------------------- */
.px-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 120;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--px-header-bg);
  transition: background-color 260ms var(--px-ease), box-shadow 260ms var(--px-ease),
    border-color 260ms var(--px-ease);
  border-bottom: 1px solid transparent;
}

.px-header.is-stuck {
  background: var(--px-header-stuck);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--px-rule);
  box-shadow: var(--px-header-shadow);
}

.px-header__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--px-header-h);
}

body.px-body .px-header__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}

body.px-body .px-header__brand .pa-brand-logo {
  height: 30px;
  max-width: 150px;
}

@media (min-width: 768px) {
  body.px-body .px-header__brand .pa-brand-logo {
    height: 36px;
    max-width: 200px;
  }
}

.px-nav {
  display: none;
  margin-inline: auto;
}

.px-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--px-chip);
  border: 1px solid var(--px-rule);
  border-radius: 999px;
}

body.px-body .px-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--px-ink-2);
  border-radius: 999px;
  transition: color var(--pa-t) var(--px-ease), background-color var(--pa-t) var(--px-ease);
}

body.px-body .px-nav__list a:hover {
  color: var(--px-ink);
  background: var(--px-chip-2);
}

body.px-body .px-nav__list a[aria-current="page"] {
  color: #fff;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.9), rgba(74, 32, 189, 0.9));
  box-shadow: 0 6px 18px rgba(90, 42, 224, 0.4);
}

.px-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.px-nav ~ .px-header__actions {
  margin-inline-start: 0;
}

#profile-container {
  display: none;
}

@media (min-width: 992px) {
  .px-nav {
    display: block;
  }

  #profile-container {
    display: flex;
    align-items: center;
  }
}

body.px-body #profile-container .px-btn {
  min-height: 42px;
  padding: 10px 20px;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Authenticated account actions (desktop header)
   Profile + logout read as one deliberate pair. Everything here is scoped to
   #profile-container .px-account, so the global .px-btn / .px-btn--sm
   primitives are untouched and no other button on any page changes.
   -------------------------------------------------------------------------- */
body.px-body #profile-container .px-account {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}

body.px-body #profile-container .px-account .px-btn {
  min-height: 44px;
  white-space: nowrap;
}

/* Logout is an outline companion, never a second filled purple button. */
body.px-body #profile-container .px-account .px-logout {
  color: var(--px-on-dark);
  background: transparent;
  border-color: var(--px-line-2);
  box-shadow: none;
  font-weight: 700;
  padding-inline: 16px;
}

body.px-body #profile-container .px-account .px-logout:hover {
  color: #fff;
  background: rgba(244, 63, 94, 0.16);
  border-color: rgba(244, 63, 94, 0.58);
  box-shadow: none;
}

body.px-body #profile-container .px-account .px-logout:focus-visible {
  outline: none;
  border-color: rgba(244, 63, 94, 0.72);
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.32);
}

/* The header turns light while --px-on-dark stays white, so the outline
   variant needs its own ink and rule colours to stay legible. */
html[data-theme="light"] body.px-body #profile-container .px-account .px-logout {
  color: var(--px-ink-2);
  background: rgba(255, 255, 255, 0.62);
  border-color: var(--px-rule-2);
}

html[data-theme="light"] body.px-body #profile-container .px-account .px-logout:hover {
  color: #9f1239;
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.5);
}

/* Burger */
body.px-body .px-burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0;
  background: var(--px-chip);
  border: 1px solid var(--px-rule-2);
  border-radius: 13px;
  cursor: pointer;
  transition: background-color var(--pa-t) var(--px-ease);
}

body.px-body .px-burger:hover {
  background: var(--px-chip-2);
}

.px-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--px-ink);
  border-radius: 2px;
}

.px-burger span:nth-child(2) {
  width: 14px;
  background: var(--px-cyan);
}

@media (min-width: 992px) {
  body.px-body .px-burger {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   6b. Theme toggle — one shared component, header + drawer
   -------------------------------------------------------------------------- */
body.px-body .px-themebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--px-ink);
  background: var(--px-chip);
  border: 1px solid var(--px-rule-2);
  border-radius: 13px;
  cursor: pointer;
  transition: background-color var(--pa-t) var(--px-ease), border-color var(--pa-t) var(--px-ease),
    color var(--pa-t) var(--px-ease);
}

body.px-body .px-themebtn:hover {
  background: var(--px-chip-2);
  border-color: var(--px-violet-2);
}

.px-themebtn__icons {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

.px-themebtn__icons i {
  position: absolute;
  font-size: 1rem;
  line-height: 1;
  transition: opacity 240ms var(--px-ease), transform 340ms var(--px-ease-out);
}

/* Dark active → the button offers Light, so it shows a sun. */
.px-themebtn__sun {
  color: var(--px-gold);
}

.px-themebtn__moon {
  color: var(--px-violet-deep);
  opacity: 0;
  transform: rotate(-45deg) scale(0.55);
}

html[data-theme="light"] .px-themebtn__sun {
  opacity: 0;
  transform: rotate(45deg) scale(0.55);
}

html[data-theme="light"] .px-themebtn__moon {
  opacity: 1;
  transform: none;
}

/* Narrow phones (360px / 390px): the logo, the theme toggle and the menu
   button must never collide. The controls stay above the 44px target. */
@media (max-width: 400px) {
  .px-header__inner {
    gap: 8px;
  }

  .px-header__actions {
    gap: 8px;
  }

  body.px-body .px-header__brand .pa-brand-logo {
    height: 28px;
    max-width: 124px;
  }

  body.px-body .px-themebtn,
  body.px-body .px-burger {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
}

/* --------------------------------------------------------------------------
   6c. Compact mobile header — a physically locked three-column grid
   Below 992px the header is not distributed by flex any more. It is one grid
   with two identical side columns and one flexible centre column, expressed in
   an LTR coordinate system so the physical composition is the same in RTL:

       [ menu ]            [ brand ]            [ theme ]
       physical left     viewport centre      physical right

   The centre column is the only flexible one and both side columns are exactly
   the same width, so the logo box is centred on the viewport itself rather than
   on whatever space flex happened to leave over. The Arabic direction is
   restored on every child, so only the coordinate system is LTR — never the
   content, the drawer or the page.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .px-header__inner {
    --px-hdr-side: 46px;
    display: grid;
    grid-template-columns: var(--px-hdr-side) minmax(0, 1fr) var(--px-hdr-side);
    grid-template-areas: "menu brand theme";
    align-items: center;
    column-gap: 10px;
    direction: ltr;
  }

  /* The actions wrapper stops being a box, so the burger and the theme toggle
     become real grid items. The hidden profile slot never joins the grid. */
  .px-header__actions {
    display: contents;
  }

  .px-header__inner > *,
  .px-header__actions > * {
    direction: rtl;
  }

  #px-menu-open {
    grid-area: menu;
    justify-self: center;
  }

  body.px-body .px-header__brand {
    grid-area: brand;
    justify-self: center;
    min-width: 0;
  }

  .px-header [data-theme-toggle] {
    grid-area: theme;
    justify-self: center;
  }

  /* Both side controls are exactly one column wide, so their distance to their
     own physical edge is identical. */
  body.px-body .px-header__inner .px-burger,
  body.px-body .px-header__inner .px-themebtn {
    width: var(--px-hdr-side);
    height: var(--px-hdr-side);
  }
}

@media (max-width: 400px) {
  .px-header__inner {
    --px-hdr-side: 44px;
    column-gap: 8px;
  }
}

/* --------------------------------------------------------------------------
   7. Mobile drawer
   -------------------------------------------------------------------------- */
.px-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: flex-start;
}

.px-drawer[hidden] {
  display: none;
}

.px-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 3, 16, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 240ms var(--px-ease);
}

.px-drawer__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(400px, 88vw);
  max-height: 100%;
  overflow-y: auto;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 20px calc(26px + env(safe-area-inset-bottom, 0px));
  color: var(--px-ink);
  background: var(--px-drawer-bg);
  border-inline-end: 1px solid var(--px-rule);
  box-shadow: var(--px-drawer-shadow);
  transform: translateX(100%);
  transition: transform 320ms var(--px-ease-out);
}

[dir="rtl"] .px-drawer__panel {
  transform: translateX(100%);
}

.px-drawer.is-open .px-drawer__scrim {
  opacity: 1;
}

.px-drawer.is-open .px-drawer__panel {
  transform: translateX(0);
}

.px-drawer__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--px-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--px-grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle at 80% 0%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 80% 0%, #000, transparent 72%);
  opacity: 0.55;
}

.px-drawer__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--px-rule);
}

.px-drawer__tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.px-body .px-drawer__top .pa-brand-logo {
  height: 34px;
  max-width: 170px;
}

body.px-body .px-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  font-size: 1.1rem;
  color: var(--px-ink);
  background: var(--px-chip);
  border: 1px solid var(--px-rule-2);
  border-radius: 13px;
  cursor: pointer;
}

body.px-body .px-drawer__close:hover {
  background: var(--px-chip-2);
}

.px-drawer__nav {
  position: relative;
  margin-top: 22px;
}

.px-drawer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.px-body .px-drawer__nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 16px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--px-ink);
  background: var(--px-chip);
  border: 1px solid var(--px-rule);
  border-radius: 14px;
  transition: background-color var(--pa-t) var(--px-ease), border-color var(--pa-t) var(--px-ease),
    transform var(--pa-t) var(--px-ease);
}

body.px-body .px-drawer__nav a::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--px-violet-2);
  flex: 0 0 auto;
}

body.px-body .px-drawer__nav a:hover {
  background: rgba(124, 77, 255, 0.18);
  border-color: rgba(124, 77, 255, 0.4);
}

body.px-body .px-drawer__nav a[aria-current="page"] {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.35), rgba(34, 211, 238, 0.14));
  border-color: rgba(124, 77, 255, 0.5);
}

body.px-body .px-drawer__nav a[aria-current="page"]::before {
  background: var(--px-cyan);
  box-shadow: 0 0 12px var(--px-cyan);
}

.px-drawer__account {
  position: relative;
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
}

.px-drawer__foot {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

/* Ghost buttons sit on adaptive surfaces inside the drawer. */
body.px-body .px-drawer .px-btn--ghost {
  color: var(--px-ink);
  background: var(--px-chip);
  border-color: var(--px-rule-2);
}

body.px-body .px-drawer .px-btn--ghost:hover {
  color: var(--px-ink);
  background: var(--px-chip-2);
  border-color: var(--px-violet-2);
  box-shadow: none;
}

body.px-body .px-logout {
  color: var(--px-ink-2);
  background: transparent;
  border-color: var(--px-rule-2);
  box-shadow: none;
}

body.px-body .px-logout:hover {
  color: #fff;
  background: rgba(225, 29, 72, 0.18);
  border-color: rgba(225, 29, 72, 0.5);
}

body.px-nav-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.px-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--px-on-dark);
  background: linear-gradient(180deg, #0a0722 0%, #06051a 100%);
  border-top: 1px solid var(--px-line);
}

.px-footer__top {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 34px;
  padding-block: clamp(44px, 7vw, 76px) clamp(30px, 5vw, 46px);
}

@media (min-width: 768px) {
  .px-footer__top {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 34px 26px;
    align-items: start;
  }

  /* One hairline between each column keeps the four groups reading as a
     single navigation block instead of four unrelated boxes. */
  .px-footer__top > nav {
    padding-inline-start: 26px;
    border-inline-start: 1px solid var(--px-line);
  }
}

.px-footer__brandcol {
  max-width: 380px;
}

body.px-body .px-footer__brandcol .pa-brand-logo {
  height: 40px;
  max-width: 210px;
}

body.px-body .px-footer__about {
  margin: 16px 0 20px;
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--px-on-dark-2);
}

body.px-body .px-footer__coltitle {
  margin: 0 0 16px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
}

.px-footer__coltitle::after {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  margin-top: 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--px-violet-2), var(--px-cyan));
}

.px-footer__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.px-body .px-footer__list a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--px-on-dark-2);
  transition: color var(--pa-t) var(--px-ease), transform var(--pa-t) var(--px-ease);
}

body.px-body .px-footer__list a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--px-violet);
  opacity: 0.7;
  transition: background-color var(--pa-t) var(--px-ease);
}

body.px-body .px-footer__list a:hover {
  color: #fff;
}

body.px-body .px-footer__list a:hover::before {
  background: var(--px-cyan);
}

.px-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.px-body .px-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 1rem;
  color: var(--px-on-dark-2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--px-line);
  border-radius: 13px;
  transition: color var(--pa-t) var(--px-ease), background-color var(--pa-t) var(--px-ease),
    transform var(--pa-t) var(--px-ease), border-color var(--pa-t) var(--px-ease);
}

body.px-body .px-social a:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.7), rgba(34, 211, 238, 0.35));
  border-color: rgba(124, 77, 255, 0.55);
  transform: translateY(-3px);
}

/* The copyright is centred across the whole footer width, on its own row.
   The decorative pixel row sits above it and cannot shift it. */
.px-footer__bar {
  position: relative;
  z-index: 2;
  display: block;
  padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  border-top: 1px solid var(--px-line);
}

body.px-body .px-footer__copy {
  width: 100%;
  margin: 0 auto;
  font-size: 0.85rem;
  line-height: 1.8;
  text-align: center;
  color: var(--px-on-dark-3);
}

body.px-body .px-footer__copy a {
  font-weight: 800;
  color: var(--px-gold);
}

body.px-body .px-footer__copy a:hover {
  color: var(--px-gold-2);
}

.px-footer__pix {
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 14px;
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   9. Reveal primitive (JS adds .is-in)
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 620ms var(--px-ease-out), transform 720ms var(--px-ease-out);
  transition-delay: var(--px-delay, 0ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   10. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .px-drawer__panel {
    transition: none;
  }
}