/* Tailwind utilities (merged for performance) */
.visible {
  visibility: visible
}

.invisible {
  visibility: hidden
}

.static {
  position: static
}

.fixed {
  position: fixed
}

.absolute {
  position: absolute
}

.relative {
  position: relative
}

.block {
  display: block
}

.inline {
  display: inline
}

.flex {
  display: flex
}

.\!table {
  display: table !important
}

.table {
  display: table
}

.\!grid {
  display: grid !important
}

.grid {
  display: grid
}

.contents {
  display: contents
}

.hidden {
  display: none
}

.flex-grow,
.grow {
  flex-grow: 1
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.resize {
  resize: both
}

.flex-wrap {
  flex-wrap: wrap
}

.border {
  border-width: 1px
}

.text-center {
  text-align: center
}

.font-ar {
  font-family: var(--f-ar), sans-serif
}

.uppercase {
  text-transform: uppercase
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128/var(--tw-text-opacity, 1))
}

.outline {
  outline-style: solid
}

.blur {
  --tw-blur: blur(8px)
}

.blur,
.drop-shadow {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, .1)) drop-shadow(0 1px 1px rgba(0, 0, 0, .06))
}

.grayscale {
  --tw-grayscale: grayscale(100%)
}

.grayscale,
.invert {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.invert {
  --tw-invert: invert(100%)
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       ARABIC FONT — RUBIK (Google Fonts)
       Rubik is loaded via the Google Fonts URL in functions.php and ships
       with both Latin and Arabic subsets, each unicode-range scoped by
       Google. The browser automatically picks Rubik for Arabic glyphs
       wherever it appears in a font stack, keeping the Latin typefaces
       (Poppins / Oswald / IBM Plex Mono) untouched for English.
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       DESIGN SYSTEM — TOKENS & VARIABLES
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
:root {
  /* Brand */
  --theme-color: #f279bf;
  --theme-color-rgb: 242, 121, 191;
  --folder-filter: url(#c-yellow);

  /* Palette */
  --c1: #00b5af;
  --c2: #f279bf;
  --c3: #f5be02;
  --c4: #543175;
  --bg: #f5be02;
  --fg: #111111;
  --card: #ffffff;
  --g1: #737373;
  --g2: #525252;
  --g3: #262626;
  --brd: rgba(0, 0, 0, 0.08);

  /* Font stack
     Rubik is listed as the secondary in every Latin stack — Google Fonts
     ships Rubik with unicode-range subsets, so the browser picks Rubik
     ONLY for Arabic glyphs and keeps Poppins / Oswald / IBM Plex Mono
     for Latin. Result: every Arabic text on the site (mixed or pure)
     renders in Rubik. */
  --f1: 'Rubik', sans-serif;
  --f2: 'Rubik', sans-serif;
  --f3: 'Rubik', sans-serif;
  --f-ar: 'Rubik', sans-serif;

  /* Spacing (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;

  /* Type scale */
  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 19px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fs-3xl: 38px;
  --fs-4xl: 52px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 100px;

  /* Shadows */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.12);

  /* System */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-elegant: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.33, 1, .68, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --vh: 1vh;

  /* Dark mode defaults */
  --dm-bg: #000000;
  --dm-card: #141414;
  --dm-fg: #f0f0f0;
  --dm-g1: #a0a0b0;
  --dm-g2: #8888a0;
  --dm-g3: #d0d0dd;
  --dm-brd: rgba(255, 255, 255, 0.06);
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       RESET & BASE
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--f1);
  /* Static black baseline — prevents the yellow FOUC flash before/after the loader.
     The actual page UI (e.g. #mac, .ios-home) paints its own brand background on top. */
  background: #0a0a14;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--fg);
}

::selection {
  background: var(--c2);
  color: #fff
}

img {
  display: block;
  max-width: 100%
}

button,
input,
textarea {
  font-family: var(--f1);
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background: none
}

a {
  text-decoration: none;
  color: inherit
}

::-webkit-scrollbar {
  width: 4px
}

::-webkit-scrollbar-track {
  background: transparent
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--theme-color-rgb), .18);
  border-radius: 4px
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       DARK MODE
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
body[data-mode="dark"] {
  --bg: var(--dm-bg);
  --fg: var(--dm-fg);
  --card: var(--dm-card);
  --g1: var(--dm-g1);
  --g2: var(--dm-g2);
  --g3: var(--dm-g3);
  --brd: var(--dm-brd);
  background: var(--dm-bg);
  color: var(--dm-fg);
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       GRAIN OVERLAY
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
#grain {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100px;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       LOADER
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
#load {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  will-change: transform;
  color: #ffffff;
}

#load-counter {
  font-family: var(--f1);
  font-size: 64px;
  font-weight: 300;
  color: #ffffff;
  margin-top: 32px;
  line-height: 1;
}

#load .logo-mark {
  font-size: 48px;
}

/* Hide systems by default */
#mac,
#ios {
  display: none
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       LOGO SYSTEM — unified
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       SMOOTH DESKTOP CURSOR
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.tf-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  width: 32px;
  height: 32px;
  /* White cursor on every theme — the homepage is light yellow which a
     dark cursor disappeared against. Drop-shadow keeps it readable on
     bright surfaces too. */
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  margin: -16px 0 0 -16px;
  transition: width .3s cubic-bezier(.16, 1, .3, 1), height .3s cubic-bezier(.16, 1, .3, 1), background-color .3s;
  display: block;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.35));
}

.tf-cursor::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
}

.tf-cursor.h {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  background-color: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(2px);
}

/* When a dashboard window is open the page behind it is dimmed white,
   so the white cursor disappeared into the panel surface. Flip it to
   black with a soft white glow whenever the dashboard / admin window
   is in front. The .cur-dark class is toggled by main.js. */
.tf-cursor.cur-dark {
  border-color: #111;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.55));
}

.tf-cursor.cur-dark::after {
  background: #111;
}

.tf-cursor.cur-dark.h {
  background-color: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.7);
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--f2);
  font-weight: 700;
  line-height: 1;
}

.logo-8 {
  color: var(--theme-color);
  font-size: inherit;
  position: relative
}

.logo-8::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 3px;
  right: 3px;
  height: clamp(3px, 0.2em, 5px);
  background: var(--theme-color);
  border-radius: 3px;
}

.logo-paws {
  color: var(--fg);
  font-size: inherit;
  letter-spacing: 1px
}

.logo-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f1);
  font-size: 0.35em;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: 1px;
  margin-top: 2px;
  padding-left: 0.3em;
  opacity: .7;
}

.logo-sub::after {
  content: '';
  display: block;
  width: 1.2em;
  height: 0.35em;
  background: var(--theme-color);
  border-radius: 3px;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       macOS DESKTOP — CUSTOM CURSOR
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
@media(hover:hover) and (min-width:769px) {
  * {
    cursor: none !important
  }

  input,
  textarea,
  select,
  [contenteditable] {
    cursor: text !important
  }

  select {
    cursor: pointer !important
  }
}

.cur {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  will-change: transform
}

.cur svg {
  width: 17px;
  height: 21px;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .25))
}

.cur-d {
  position: absolute;
  left: 5px;
  top: 7px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(var(--theme-color-rgb), .15);
  border: 1.5px solid rgba(var(--theme-color-rgb), .3);
  transition: all .25s var(--ease);
  mix-blend-mode: multiply;
}

.cur.h .cur-d {
  width: 42px;
  height: 42px;
  left: -14px;
  top: -13px;
  background: rgba(var(--theme-color-rgb), .04);
  border-color: rgba(var(--theme-color-rgb), .15);
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       macOS DESKTOP — ENVIRONMENT
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
#mac {
  position: absolute;
  inset: 0
}

.mac-env {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: filter .4s var(--ease), transform .4s var(--ease);
}

.mac-env.dim {
  filter: blur(5px) brightness(.97);
  transform: scale(1.004)
}

.mac-env::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
  background: radial-gradient(ellipse at 30% 40%, rgba(var(--theme-color-rgb), .035) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(84, 49, 117, .025) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: bgPulse 10s ease-in-out infinite;
}

@keyframes bgPulse {

  0%,
  100% {
    opacity: .35
  }

  50% {
    opacity: .65
  }
}

.mac-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  transition: background .8s
}

/* macOS Topbar */
.m-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 100;
  font-family: var(--f1);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  pointer-events: auto;
}

body[data-mode="dark"] .m-topbar {
  background: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.03);
  color: #fff;
}

.m-tb-right {
  display: flex;
  gap: 16px;
  align-items: center;
}

.m-tb-ic {
  cursor: pointer;
  transition: opacity .2s;
}

.m-tb-ic:hover {
  opacity: 0.7;
}

/* Orbital System Window Area */
.m-orb-system {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

/* Desktop folders */
.m-fd {
  --tx: -50%;
  position: absolute;
  /* RTL Mirrored Orbital Math */
  left: var(--orb-x);
  top: var(--orb-y);
  transform: translate(var(--tx), -50%) scale(var(--orb-s, 1)) rotate(var(--rot, 0deg));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  will-change: transform, left;
  transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1), filter 0.3s var(--ease), left 0.4s var(--ease-out);
  cursor: pointer;
  text-align: center;
  pointer-events: auto;
}

[dir="rtl"] .m-fd {
  --tx: 50%;
  left: auto;
  right: var(--orb-x);
  transform: translate(var(--tx), -50%) scale(var(--orb-s, 1)) rotate(var(--rot, 0deg));
}

[dir="rtl"] .m-fd:hover {
  transform: translate(var(--tx), -50%) scale(calc(var(--orb-s, 1) + 0.1)) rotate(var(--rot, 0deg));
}

[dir="rtl"] .m-fd:active {
  transform: translate(var(--tx), -50%) scale(calc(var(--orb-s, 1) - 0.05)) rotate(var(--rot, 0deg));
}

.m-fd img {
  width: 76px;
  height: auto;
  object-fit: contain;
  filter: var(--folder-filter) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.12));
  transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1);
}

body[data-mode="dark"] .m-fd img {
  filter: var(--folder-filter) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}

.m-fd:hover {
  transform: translate(var(--tx), -50%) scale(calc(var(--orb-s, 1) + 0.1)) rotate(var(--rot, 0deg));
  z-index: 21;
}

.m-fd:active {
  transform: translate(var(--tx), -50%) scale(calc(var(--orb-s, 1) - 0.05)) rotate(var(--rot, 0deg));
}

.m-fd span {
  font-family: var(--f1);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  line-height: 1.2;
  transition: all 0.3s;
}

body[data-mode="dark"] .m-fd span {
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.m-fd:hover span {
  background: var(--theme-color);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 24px rgba(var(--theme-color-rgb), 0.3);
}

/* Central Branding */
.m-centerpiece {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 8;
  pointer-events: none;
  width: 100%;
  max-width: 800px;
}

.m-hero {
  height: min(55vh, 480px);
  aspect-ratio: 3/5;
  animation: floatHero 6s ease-in-out infinite alternate;
}

@keyframes floatHero {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-30px);
  }
}

.m-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
}

.m-tagline {
  margin-top: 32px;
  font-family: var(--f1);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 600;
  color: var(--g2);
  text-align: center;
  letter-spacing: 0.5px;
  padding: 16px 36px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

body[data-mode="dark"] .m-tagline {
  color: var(--dm-g2);
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.06);
}

/* Backdrop */
.m-bk {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background .4s var(--ease-out), backdrop-filter .4s;
}

.m-bk.on {
  background: rgba(0, 0, 0, .2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       macOS — WINDOWS
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.m-win {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(940px, 88vw);
  height: min(680px, 82vh);
  border-radius: 14px;
  background: rgba(248, 246, 242, .96);
  backdrop-filter: blur(44px) saturate(1.4);
  -webkit-backdrop-filter: blur(44px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: var(--shadow-xl), 0 0 0 .5px rgba(0, 0, 0, .04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: transform, opacity;
  z-index: 1000;
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
  pointer-events: none;
}

.m-win.open {
  opacity: 1;
  pointer-events: auto
}

.m-win.foc {
  box-shadow: var(--shadow-xl), 0 0 0 .5px rgba(0, 0, 0, .06), 0 0 0 2.5px rgba(var(--theme-color-rgb), .12)
}

body[data-mode="dark"] .m-win {
  background: rgba(37, 37, 64, .96);
  border-color: rgba(255, 255, 255, .06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(255, 255, 255, .05);
}

body[data-mode="dark"] .m-win.foc {
  box-shadow: 0 32px 80px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(255, 255, 255, .06), 0 0 0 2.5px rgba(var(--theme-color-rgb), .15);
}

.m-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, .04);
  user-select: none;
  flex-shrink: 0;
}

body[data-mode="dark"] .m-bar {
  border-bottom-color: rgba(255, 255, 255, .04)
}

.m-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--g2);
  cursor: pointer;
  transition: background .15s, transform .15s;
  flex-shrink: 0;
}

.m-close-btn:hover {
  background: rgba(0, 0, 0, .1);
  transform: scale(1.05);
}

.m-close-btn:active {
  transform: scale(.95);
}

body[data-mode="dark"] .m-close-btn {
  background: rgba(255, 255, 255, .06);
  color: var(--dm-g2);
}

body[data-mode="dark"] .m-close-btn:hover {
  background: rgba(255, 255, 255, .1);
}

.m-bar h2 {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--g3);
  letter-spacing: 0.5px;
}

.m-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       macOS — DOCK
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.m-dock {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 5px 11px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 6px 30px rgba(0, 0, 0, .06);
}

body[data-mode="dark"] .m-dock {
  background: rgba(37, 37, 64, .55);
  border-color: rgba(255, 255, 255, .06);
}

.m-di {
  width: 54px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .07);
  user-select: none;
  will-change: transform;
  /* Lock the transform-origin so a hovered item always grows from the
     centre of its bottom edge. Without this, the JS-applied scale +
     translateY would tilt the icon and the tooltip would drift on
     RTL pages where the flex order is reversed. */
  transform-origin: 50% 100%;
  transition: transform .2s var(--ease-spring);
  position: relative;
  cursor: none;
}

body[data-mode="dark"] .m-di {
  box-shadow: 0 2px 7px rgba(0, 0, 0, .2)
}

.m-di .tip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) scale(.85);
  transform-origin: 50% 100%;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: rgba(10, 10, 10, .78);
  padding: 3px 9px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  /* Ignore the parent's `dir="rtl"` text-align so the tooltip text
     reads naturally regardless of language. The label itself is
     localised inline via data-en/data-ar. */
  direction: ltr;
  text-align: center;
  transition: opacity .15s, transform .15s;
}
/* For Arabic-labelled tips (login → "تسجيل الدخول") flip back to RTL
   so the Arabic glyphs render in the correct reading order. */
[dir="rtl"] .m-di .tip {
  direction: rtl;
}

.m-di:hover .tip {
  opacity: 1;
  transform: translateX(-50%) scale(1)
}

.m-di.on::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--theme-color);
}

/* Signed-in state on the desktop dock login button — keeps the same
   footprint as the dock items but reads as "you have an account" at a
   glance: tinted bg, theme-color icon, small green online dot. */
#mac .m-dock .m-di.signed-in {
  background: linear-gradient(135deg, rgba(var(--theme-color-rgb), 0.95), rgba(var(--theme-color-rgb), 0.75)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(var(--theme-color-rgb), 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

#mac .m-dock .m-di.signed-in svg {
  stroke: #fff;
}

.m-di .m-di-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2ecc71;
  border: 2px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.25);
}

.m-di.signed-in .tip {
  font-weight: 700;
}

/* Small "AR/EN" tag pinned to the globe icon so users see at a glance
   which language they'll switch TO. Uses `inset-inline-end` so the tag
   sits on the same visual corner of the icon in both LTR and RTL (it
   previously read `right: 2px` which broke layout in Arabic mode). */
.m-di .m-lang-tag {
  position: absolute;
  bottom: 2px;
  inset-inline-end: 2px;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--theme-color);
  color: #fff;
  letter-spacing: 0.5px;
  pointer-events: none;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       iOS MOBILE SYSTEM
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
#ios {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 10;
}

.ios-home {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  transition: filter .35s var(--ease), transform .35s var(--ease), opacity .35s;
  background: #f5be02 url('../images/mobile-bg.png') center/cover no-repeat;
}

.ios-home::before {
  display: none;
}

.ios-home.dim {
  filter: blur(8px) brightness(.94);
  transform: scale(.92);
  opacity: .6
}

body[data-mode="dark"] .ios-home {
  background-color: #1a1a2e;
  background-image: url('../images/mobile-bg.png');
  background-blend-mode: overlay;
  /* Optional: blends image with dark color */
}

body[data-mode="dark"] .ios-home::before {
  background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 15v6M15 18h6' stroke='rgba(255,255,255,0.07)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.i-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  pointer-events: auto;
}

#ios .logo-8 {
  color: #f279bf;
}

#ios .logo-8::before {
  background: #f279bf;
  top: -2.1875vw;
}

#ios .logo-paws {
  color: #fff;
}

#ios .logo-sub {
  color: #f279bf;
  font-family: var(--f1);
  font-size: 2.8125vw;
  font-weight: 800;
  letter-spacing: 0.5px;
  opacity: 1;
  padding: 0;
}

#ios .logo-sub::after {
  display: none;
}

.i-logo img {
  width: 34.53vw;
  height: auto !important;
  margin-top: 2px;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.10));
}

.i-logo .logo-mark {
  font-size: 9.375vw;
  letter-spacing: -2px;
}

/* Title + Subtitle (left-aligned hero copy) */
.i-title {
  position: absolute;
  top: 13vh;
  left: 5vw;
  right: auto;
  text-align: left;
  font-family: var(--f1);
  font-size: 6.5vw;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #4E3072;
  z-index: 14;
  max-width: 90vw;
}

.i-subtitle {
  position: absolute;
  top: 21.5vh;
  left: 5vw;
  right: auto;
  text-align: left;
  font-family: var(--f1);
  font-size: 3.4375vw;
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.2px;
  z-index: 14;
  opacity: .95;
  max-width: 85vw;
}

body[data-mode="dark"] .i-title,
body[data-mode="dark"] .i-subtitle {
  color: rgba(255, 255, 255, .9)
}

/* Character — anchored bottom-right behind folders */
.i-char {
  position: absolute;
  left: auto;
  right: -0.5vw;
  top: 13vh;
  transform: translateY(0);
  z-index: 8;
  pointer-events: none;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 68vh;
  width: 60vw;
  overflow: visible;
}

.i-char::before {
  display: none;
}

@keyframes floatChar {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-8px);
  }
}

.i-char img {
  position: relative;
  height: 85%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
  z-index: 2;
  filter:
    drop-shadow(0 0 2px rgba(78, 48, 114, 1)) drop-shadow(0 0 6px rgba(78, 48, 114, 0.95)) drop-shadow(0 0 12px rgba(78, 48, 114, 0.75)) drop-shadow(0 0 20px rgba(78, 48, 114, 0.5));
  animation: floatChar 8s ease-in-out infinite alternate;
}

/* Dashed connector lines between the folders */
.i-fd-lines {
  position: absolute;
  top: 32vh;
  left: 3.5vw;
  width: 61vw;
  height: 40vh;
  z-index: 14;
  pointer-events: none;
  overflow: visible;
}

.i-fd-lines path {
  fill: none;
  stroke: #a5ae21;
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

/* Folders — zigzag stack on the left */
.i-fd {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20;
  width: 18.59vw;
  -webkit-tap-highlight-color: transparent;
}

.i-fd img {
  width: 100%;
  height: auto;
  transition: transform .15s var(--ease);
  filter: var(--folder-filter) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
}

.i-fd span {
  position: absolute;
  top: 56%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--f1);
  font-size: 2.65vw;
  color: #fff;
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: 0px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.i-fd:active img {
  transform: scale(.92)
}

.i-fd-1 {
  left: 6.64vw;
  top: 28vh;
}

.i-fd-2 {
  left: 26.14vw;
  top: 38vh;
}

.i-fd-3 {
  left: 6.64vw;
  top: 48vh;
}

.i-fd-4 {
  left: 26.14vw;
  top: 58vh;
}

.i-fd-5 {
  left: 6.64vw;
  top: 68vh;
}

/* CTA pill button */
.i-cta {
  position: absolute;
  left: 50%;
  bottom: calc(max(6.9vh, env(safe-area-inset-bottom)) + 9.375vw);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.875vw 5vw;
  border-radius: 999px;
  background: #4E3072;
  color: #12A8AE;
  font-family: var(--f1);
  font-weight: 800;
  font-size: 2.8125vw;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(78, 48, 114, 0.42);
  z-index: 30;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease);
  inline-size: max-content;
}

.i-cta:active {
  transform: translateX(-50%) scale(.97);
  box-shadow: 0 6px 18px rgba(84, 49, 117, 0.35);
}

/* Social Bar */
.i-bar {
  position: absolute;
  bottom: max(6.4vh, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 3.125vw;
  align-items: center;
  padding: 1vh 3.125vw;
  z-index: 30;
}

.i-soc {
  width: 5.625vw;
  height: 5.625vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #f5be02;
  font-size: 3vw;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), background .25s ease, box-shadow .25s ease, color .25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-decoration: none;
}

.i-soc:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}

.i-soc:active {
  transform: scale(.9);
}

.i-soc i {
  line-height: 1;
}

body[data-mode="dark"] .i-soc {
  background: rgba(255, 255, 255, .12);
  color: #f5be02;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

body[data-mode="dark"] .i-soc:hover {
  background: rgba(255, 255, 255, .18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       iOS — APP SCREENS
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.ios-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--card);
  transform: translateY(100%) scale(.95);
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.ios-screen.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto
}

body[data-mode="dark"] .ios-screen {
  background: var(--dm-card)
}

.ios-screen-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(var(--safe-t), 12px) 16px 10px;
  border-bottom: 1px solid var(--brd);
  flex-shrink: 0;
}

.ios-screen-bar h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  flex: 1;
  text-align: center
}

.ios-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--g2);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
  z-index: 10;
  transition: background .15s, transform .15s;
}

.ios-close:active {
  background: rgba(0, 0, 0, .1);
  transform: scale(.9)
}

body[data-mode="dark"] .ios-close {
  background: rgba(255, 255, 255, .06);
  color: var(--dm-g2)
}

.ios-screen-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
}

.ios-pill {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, .08);
  margin: 0 auto
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       SHARED — PAGE CONTENT SYSTEM
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.pg {
  min-height: 100%
}

.sc {
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 48px);
  max-width: 960px;
  margin: 0 auto
}

.lb {
  font-family: var(--f3);
  font-size: var(--fs-xs);
  letter-spacing: 4px;
  color: var(--theme-color);
  font-weight: 600;
  margin-bottom: var(--sp-4);
  text-transform: uppercase;
}

.h1 {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--fg);
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

.h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 16px;
  line-height: 1.15;
  letter-spacing: -0.2px;
}

.h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 8px
}

.p1 {
  font-size: 16px;
  line-height: 1.8;
  color: var(--g2);
  max-width: 600px
}

.p2 {
  font-size: 14px;
  line-height: 1.85;
  color: var(--g2)
}

.ac1 {
  color: #69c255
}

.ac2 {
  color: var(--c2)
}

.ac3 {
  color: var(--c3)
}

.gr2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center
}

.gr4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.gr2c {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 32px
}

.strip {
  padding: 56px;
  max-width: 960px;
  margin: 32px auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border: 1px solid var(--brd);
  text-align: center;
  background: rgba(var(--theme-color-rgb), 0.02);
  border-radius: 24px;
}

.strip .n {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -1px;
}

.strip .l {
  font-family: var(--f3);
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  color: var(--g1);
  margin-top: 6px;
  text-transform: uppercase
}

/* Cards */
.crd {
  padding: var(--sp-7) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--brd);
  text-align: center;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}

.crd:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(var(--theme-color-rgb), .08);
  border-color: rgba(var(--theme-color-rgb), .2)
}

.crd-i {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin: 0 auto var(--sp-3);
  transition: transform .3s var(--ease);
}

.crd:hover .crd-i {
  transform: scale(1.06)
}

.ua {
  position: relative;
  display: inline
}

.ua::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--theme-color);
  border-radius: 2px;
  opacity: .6;
}

/* Banner */
.bnr {
  width: 100%;
  height: 160px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--c4), var(--theme-color));
}

/* Primary button */
.btn-p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 700;
  padding: 14px 38px;
  border-radius: var(--r-full);
  background: var(--theme-color);
  color: #fff;
  cursor: pointer;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s cubic-bezier(.16, 1, .3, 1), background-color .3s;
  border: none;
  min-height: 48px;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow;
}

.btn-p:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: 4px;
}

.btn-p::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .15), transparent);
  opacity: 0;
  transition: opacity .4s;
}

.btn-p:hover {
  transform: scale(1.02) translateY(-2px);
  box-shadow: 0 12px 32px rgba(var(--theme-color-rgb), .28);
}

.btn-p:hover::after {
  opacity: 1
}

.btn-p:active {
  transform: scale(.98) !important;
  box-shadow: 0 4px 16px rgba(var(--theme-color-rgb), .15) !important
}

/* Dark section */
.dk {
  background: #543175;
  color: #fff
}

.dk .p2 {
  color: rgba(255, 255, 255, .4)
}

.dk .h3 {
  color: #fff
}

/* Service rows */
.sv {
  padding: 28px 24px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 20px;
  align-items: start;
  transition: padding-left .3s var(--ease);
}

.sv:hover {
  padding-left: 32px
}

.sv-i {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.sv-n {
  font-family: var(--f3);
  font-size: var(--fs-xs);
  opacity: .5;
  font-weight: 600
}

/* Portfolio cards / Bento Grid System */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(280px, auto);
  gap: 24px;
}

.bento-large-h {
  grid-column: span 2;
}

.bento-large-v {
  grid-row: span 2;
}

@media (max-width: 900px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-large-h {
    grid-column: span 2;
  }

  .bento-large-v {
    grid-row: span 1;
  }
}

.pc {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--brd);
  transition: transform .35s var(--ease-spring), box-shadow .35s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.crd-hover {
  padding: 40px 32px;
  border-radius: 24px;
  text-align: center;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--brd);
}

body[data-mode="dark"] .crd-hover {
  background: rgba(255, 255, 255, 0.02);
}

.pc:hover,
.crd-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(var(--theme-color-rgb), .08);
  border-color: rgba(var(--theme-color-rgb), .15)
}

.pc-t {
  flex: 1;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden
}

.pc-e {
  font-size: 56px;
  opacity: .6;
  transition: transform .5s var(--ease-spring);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

.pc:hover .pc-e {
  transform: scale(1.15) rotate(4deg)
}

.pc-o {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
}

.pc:hover .pc-o {
  opacity: 1
}

.pc-o span {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 7px 18px;
  border-radius: 100px;
}

.pc-b {
  padding: 16px 20px;
  background: var(--card)
}

/* Blog cards */
.bc {
  display: grid;
  grid-template-columns: 140px 1fr;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--brd);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
  cursor: pointer;
  margin-bottom: var(--sp-4);
}

.bc:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(var(--theme-color-rgb), .05);
  border-color: rgba(var(--theme-color-rgb), .12)
}

/* Form inputs */
.fi {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-bottom: 2px solid var(--brd);
  background: transparent;
  font-size: 16px;
  color: var(--fg);
  transition: border-color .3s var(--ease), padding-left .3s var(--ease);
}

.fi:focus {
  border-color: var(--theme-color);
  padding-left: 6px
}

.fi::placeholder {
  color: #aaa
}

textarea.fi {
  resize: vertical;
  min-height: 100px
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       ADVANCED REVEAL SYSTEM
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.rv,
.rv-fade,
.rv-snpl,
.rv-zoom {
  opacity: 0;
  transition: opacity .5s ease-out, transform .5s ease-out;
}

.rv {
  transform: translateY(14px);
}

.rv-fade {
  transform: none;
  transition: opacity .5s ease-out;
}

.rv-snpl {
  transform: translateY(18px) scale(0.99);
}

.rv-zoom {
  transform: scale(0.96);
}

.rv.vis,
.rv-fade.vis,
.rv-snpl.vis,
.rv-zoom.vis {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       MOBILE CONTENT OVERRIDES
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
@media(max-width:768px) {

  body,
  html {
    width: 100%;
    overflow-x: hidden;
  }

  .m-win {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
  }

  .m-win.open {
    transform: none !important;
  }

  /* Hide Desktop-only Nav on mobile sizes */
  .tf-nav,
  .tf-links {
    display: none !important;
  }

  /* Touch / Typography Normalization */
  h1[style],
  .h1[style],
  .co-title[style] {
    font-size: clamp(28px, 8vw, 36px) !important;
    margin-bottom: 12px !important;
    line-height: 1.2 !important;
  }

  h2[style],
  .h2[style] {
    font-size: clamp(24px, 6vw, 28px) !important;
  }

  h3[style],
  .h3[style],
  .bc-c h3,
  .pc-b h3,
  .crd h3 {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  .p2[style],
  p[style],
  .bc-c .p2,
  .pc-b .p2 {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* Container Parity Overrides */
  .crd,
  .crd-hover,
  .pc-b,
  .bc-c {
    padding: 24px 20px !important;
    border-radius: 20px !important;
  }

  .co-hero {
    padding-top: 20px !important;
    padding-bottom: 60px !important;
  }

  .bento,
  .bento[style] {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .pc-t,
  .pc-t[style] {
    min-height: 200px !important;
    height: auto !important;
  }

  .bc-i,
  .bc-i[style] {
    min-height: 180px !important;
    height: auto !important;
  }

  .sc {
    padding: 36px 20px
  }

  .gr2 {
    grid-template-columns: 1fr;
    gap: 22px
  }

  .gr4 {
    grid-template-columns: 1fr 1fr;
    gap: 10px
  }

  .gr2c {
    gap: 12px
  }

  .strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 22px 20px
  }

  .strip .n {
    font-size: 26px
  }

  .sv {
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 20px 14px
  }

  .sv-i {
    width: 36px;
    height: 36px;
    font-size: 16px
  }

  .sv-n {
    display: none
  }

  .pc {
    border-radius: 12px
  }

  .bc {
    grid-template-columns: 1fr;
    border-radius: 10px
  }

  .bc>div:first-child {
    min-height: 40px
  }

  .btn-p {
    width: 100%;
    text-align: center
  }

  .bnr {
    height: 100px;
    border-radius: 12px
  }
}

/* Large screens */
@media(min-width:1921px) {
  .m-hero {
    height: min(62vh, 640px)
  }

  .m-win {
    width: min(1200px, 60vw);
    height: min(800px, 75vh)
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation-duration: 0s !important;
    transition-duration: 0s !important
  }

  .rv,
  .rv-fade,
  .rv-snpl,
  .rv-zoom {
    opacity: 1;
    transform: none !important;
  }
}

*:focus-visible {
  outline: 2px solid var(--theme-color) !important;
  outline-offset: 2px
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       DESKTOP UX POLISH (min-width: 769px)
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
@media (min-width: 769px) {

  /* Scoped typography and spacing for windows */
  :root {
    --theme-color: #f6be00;
    --theme-color-rgb: 246, 190, 0;
    --folder-filter: url(#c-yellow);
    --sp-4: 20px;
    --sp-5: 28px;
    --sp-7: 48px;
  }

  .sc {
    padding: 80px 60px;
    max-width: 1040px;
  }

  .p1 {
    font-size: 17px;
    max-width: 680px;
    line-height: 1.8;
  }

  .p2 {
    font-size: 14.5px;
    max-width: 650px;
    line-height: 1.9;
  }

  .h1 {
    font-size: clamp(38px, 5.5vw, 64px);
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
  }

  .h2 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    margin-bottom: 20px;
  }

  .h3 {
    font-size: 18px;
    margin-bottom: 8px;
  }

  /* Global elements */
  .btn-p {
    min-height: 54px;
    padding: 16px 42px;
    font-size: 15px;
    border-radius: 100px;
  }

  .fi {
    font-size: 17px;
    padding: 18px 0;
    border-bottom-width: 2px;
  }

  /* Enhance grids */
  .gr2 {
    gap: 64px;
  }

  .gr4 {
    gap: 28px;
  }

  .gr2c {
    gap: 32px;
  }

  /* Component polish - Cards */
  .crd {
    padding: 48px 32px;
    border-radius: 20px;
    border-color: rgba(0, 0, 0, 0.06);
  }

  body[data-mode="dark"] .crd {
    border-color: rgba(255, 255, 255, 0.06);
  }

  /* Enhance hover states for elegant feedback */
  .crd,
  .pc,
  .bc {
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s;
  }

  .crd:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 24px 54px rgba(var(--theme-color-rgb), .08);
    border-color: rgba(var(--theme-color-rgb), .2);
  }

  .pc:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 32px 64px rgba(0, 0, 0, .2);
  }

  .bc:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 16px 40px rgba(var(--theme-color-rgb), .06);
  }

  /* Portfolio custom pills */
  .pc-o span {
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 800;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
  }

  /* Services expansion */
  .sv {
    transition: transform 0.4s var(--ease-out), padding 0.4s var(--ease-out), background 0.4s, border-color 0.4s;
    padding: 36px 36px;
    border-radius: 20px;
    border: 1px solid transparent;
  }

  .sv:hover {
    transform: translateX(18px);
    padding-left: 48px;
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
  }

  [dir="rtl"] .sv:hover {
    transform: translateX(-18px);
    padding-right: 48px;
    padding-left: 36px;
  }

  .sv-i {
    width: 64px;
    height: 64px;
    font-size: 28px;
    border-radius: 18px;
  }

  .sv-n {
    font-size: 18px;
    opacity: 0.8;
  }

  /* Extra padding for specific elements */
  .strip {
    padding: 60px 48px;
    gap: 32px;
    border-width: 2px;
  }

  .strip .n {
    font-size: 64px;
  }

  .strip .l {
    font-size: 14px;
    letter-spacing: 3px;
    font-weight: 700;
    opacity: 0.8;
  }

  .bnr {
    height: 220px;
    border-radius: 24px;
  }

  .bnr p:first-child {
    font-size: 32px !important;
    margin-bottom: 8px !important;
  }

  .bnr p:last-child {
    font-size: 16px !important;
  }

  .co-tabs {
    gap: 40px;
    margin-bottom: 40px;
  }

  .co-tab {
    font-size: 16px;
  }

  .co-tab-n {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .co-in {
    font-size: 17px;
    padding: 18px 0;
  }

  .co-f-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  /* Windows and Environment adjustments */
  .m-win {
    width: 100%;
    max-width: 900px;
    height: auto;
    min-height: 500px;
    max-height: 82vh;
    border-radius: 20px;
  }

  .m-win.open {
    transform: translate(-50%, -50%) scale(1) !important;
  }

  .m-win.foc {
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.25), 0 0 0 .5px rgba(0, 0, 0, .08), 0 0 0 3px rgba(var(--theme-color-rgb), .15);
  }

  body[data-mode="dark"] .m-win.foc {
    box-shadow: 0 40px 100px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(255, 255, 255, .08), 0 0 0 3px rgba(var(--theme-color-rgb), .25);
  }

  .m-bar {
    padding: 20px 32px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  body[data-mode="dark"] .m-bar {
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }

  .m-bar h2 {
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .m-close-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.04);
  }

  .m-dock {
    padding: 8px 14px;
    border-radius: 20px;
    gap: 6px;
  }

  .m-di {
    width: 55px;
    height: 39px;
    font-size: 22px;
    border-radius: 12px;
  }

  .m-di .tip {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 6px;
    bottom: calc(100% + 12px);
  }

  .m-di.on::after {
    bottom: -6px;
    width: 4.5px;
    height: 4.5px;
  }

  /* Folder tweaks */
  .m-fd {
    animation: floatOrb 8s ease-in-out infinite alternate;
    animation-delay: var(--delay, 0s);
  }

  @keyframes floatOrb {
    0% {
      transform: translate(-50%, -50%) scale(var(--orb-s, 1)) rotate(-1deg);
    }

    100% {
      transform: translate(-50%, calc(-50% - 15px)) scale(var(--orb-s, 1)) rotate(2deg);
    }
  }

  .m-fd img {
    width: 72px;
  }

  @keyframes floatImg {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(-8px);
    }
  }

  .m-fd:hover img {
    animation-play-state: paused;
    transform: scale(1.1) !important;
  }

  .m-fd:hover {
    filter: drop-shadow(0 12px 30px rgba(var(--theme-color-rgb), .3));
  }

  .m-fd span {
    font-size: 11px;
    margin-top: 4px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(4px);
  }

  body[data-mode="dark"] .m-fd span {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }

  /* macOS Environment Hero clamp adjustments */
  .m-hero {
    height: min(65vh, 600px);
  }

  .m-tagline {
    font-size: 22px;
    padding: 20px 48px;
  }

  /* Contact page improvements */
  .co-hero {
    padding: 100px 0 80px;
  }

  .co-title {
    font-size: clamp(38px, 5vw, 64px);
    margin-bottom: 20px;
  }

  .co-sub {
    font-size: 16px;
    margin-bottom: 40px;
  }

  .co-tl {
    margin: 80px auto 40px;
  }

  [dir="rtl"] .co-tl::before {
    right: 30px;
    left: 30px;
  }

  [dir="rtl"] .co-tl-prog {
    right: 30px;
    left: auto;
    transform-origin: right;
  }

  .co-tl-c {
    width: 52px;
    height: 52px;
    font-size: 16px;
    border-width: 1.5px;
  }

  .co-tli.act .co-tl-c {
    border-width: 2.5px;
    transform: scale(1.15);
    box-shadow: 0 12px 28px rgba(0, 181, 175, 0.25);
  }

  .co-tl-l {
    font-size: 14px;
    margin-top: 6px;
  }

  .co-box {
    max-width: 800px;
    border-radius: 16px;
  }

  .co-ring {
    width: min(100%, 420px);
    height: min(100vw, 420px);
  }

  .co-ring-cn {
    width: 110px;
    height: 110px;
    border-radius: 28px;
  }

  .co-ring-cn span {
    font-size: 32px !important;
  }
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       HAMBURGER MENU + NAV DRAWER (UNIFIED)
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.hamburger {
  position: fixed;
  top: max(53px, var(--safe-t));
  right: max(20px, env(safe-area-inset-right));
  left: auto;
  z-index: 999;
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;



  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .3s var(--ease-out), transform .3s var(--ease-spring), border-color .3s, box-shadow .3s;
}

body[data-mode="dark"] .hamburger {
  background: rgba(37, 37, 64, .55);
  border-color: rgba(255, 255, 255, .1);
}

.hamburger:hover {
  background: rgba(255, 255, 255, .4);
  transform: scale(1.06);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

body[data-mode="dark"] .hamburger:hover {
  background: rgba(37, 37, 64, .75);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

.hamburger:active {
  transform: scale(.92);
}

.hamburger .hb {
  display: none;
  width: 18px;
  height: 2px;
  background: var(--fg);
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s, width .25s var(--ease);
  transform-origin: center;
}

.hamburger .hb:nth-child(2) {
  width: 14px;
}

.hamburger:hover .hb:nth-child(2) {
  width: 18px;
}

.hamburger.open {
  background: var(--c3);
  /* Vibrant yellow circle */
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(245, 190, 2, 0.4);
  border-color: transparent;
  transform: rotate(90deg);
  /* Playful twist */
}

body[data-mode="dark"] .hamburger.open {
  background: var(--c3);
  box-shadow: 0 8px 24px rgba(245, 190, 2, 0.3);
  border-color: transparent;
}

.hamburger.open .hb {
  background: #ffffff !important;
}

.hamburger.open .hb:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open .hb:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
  width: 18px;
}

.hamburger.open .hb:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

body.nav-open {
  overflow: hidden;
}

/* Nav Overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 997;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  pointer-events: none;
  transition: background .4s var(--ease-out), backdrop-filter .4s;
}

.nav-overlay.open {
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
}

/* Nav Drawer */
/* ───────────────────────────────────────────────
   NAV DRAWER — UNIFIED BLACK DESIGN
   The drawer renders the same black palette in both light & dark
   modes; teal (#00BFA5) is the primary accent, magenta (#f279bf)
   carries the login CTA, white sits on top.
   ─────────────────────────────────────────────── */
.nav-drawer {
  position: fixed;
  top: 0;
  left: auto;
  right: 0;
  width: min(320px, 85vw);
  height: 100%;
  z-index: 998;
  background: #000000;
  background-image:
    radial-gradient(120% 60% at 100% 0%, rgba(0, 191, 165, 0.08) 0%, transparent 55%),
    radial-gradient(80% 50% at 0% 100%, rgba(242, 121, 191, 0.06) 0%, transparent 60%);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  border-left: 1px solid rgba(255, 255, 255, .06);
  box-shadow: -16px 0 48px rgba(0, 0, 0, .55);
  transform: translateX(105%);
  transition: transform .5s var(--ease-elegant);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  color: #ffffff;
}

.nav-drawer.open {
  transform: translateX(0);
}

/* Nav Header */
.nav-hdr {
  padding: max(calc(var(--safe-t) + 20px), 32px) 24px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.nav-hdr-logo {
  font-family: var(--f2);
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-logo-img {
  height: 38px;
  width: auto;
}

@media (max-width: 768px) {
  .nav-drawer {
    width: 260px;
  }

  .nav-hdr {
    padding: max(calc(var(--safe-t) + 12px), 16px) 16px 12px;
  }

  .nav-logo-img {
    height: 22px;
  }

  .nav-hdr-logo {
    font-size: 18px;
  }

  .nav-items {
    padding: 6px 10px;
  }

  .nav-item {
    padding: 8px 12px;
    gap: 8px;
    font-size: 12px;
  }

  .nav-item-i {
    width: 28px;
    height: 28px;
    font-size: 14px;
    border-radius: 8px;
  }

  .nav-actions {
    padding: 2px 10px 6px;
  }

  .nav-login-btn {
    padding: 10px 14px;
    font-size: 12px;
    margin-bottom: 6px;
  }

  .nav-search-btn {
    padding: 9px 14px;
    font-size: 11px;
  }

  .nav-ftr {
    padding: 10px 16px calc(10px + var(--safe-b));
  }

  .nav-icon-btn {
    width: 32px;
    height: 32px;
  }

  .nav-lang {
    padding: 4px 12px;
    font-size: 11px;
  }
}

.nav-hdr-logo .nh8 {
  color: #00BFA5;
}

.nav-hdr-sub {
  font-size: 11px;
  font-weight: 600;
  color: #00BFA5;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 4px;
  display: none;
}

/* Nav Items */
.nav-items {
  padding: 12px 12px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  transition: background .25s var(--ease-out), transform .25s var(--ease-spring), color .2s;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  font-family: var(--f1);
  opacity: 0;
  transform: translateX(20px);
}

.nav-drawer.open .nav-item {
  opacity: 1;
  transform: translateX(0);
  transition: background .25s var(--ease-out), transform .5s var(--ease-elegant), opacity .4s var(--ease-out), color .2s;
}

.nav-item:hover {
  background: rgba(0, 191, 165, 0.12);
  color: #00BFA5;
}

.nav-item:active {
  transform: scale(.97);
}

.nav-item-i {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: rgba(255, 255, 255, .06);
  color: #ffffff;
  flex-shrink: 0;
  transition: background .2s, transform .2s, color .2s;
}

.nav-item:hover .nav-item-i {
  background: #00BFA5;
  color: #0a0a14;
  transform: scale(1.05);
}

/* Nav Separator */
.nav-sep {
  height: 1px;
  background: rgba(255, 255, 255, .08);
  margin: 8px 16px;
}

/* Nav Action Buttons (Login + Search) */
.nav-actions {
  padding: 4px 12px 12px;
}

.nav-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: #f6be00;
  cursor: pointer;
  transition: all .25s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  font-family: var(--f1);
  letter-spacing: 0.3px;
  box-shadow: 0 4px 16px rgba(242, 121, 191, .35);
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(10px);
  border: none;
}

.nav-drawer.open .nav-login-btn {
  opacity: 1;
  transform: translateY(0);
  transition: all .5s var(--ease-elegant);
  transition-delay: .35s;
}

.nav-login-btn:hover {
  transform: translateY(-2px);
  background: #f279bf;
  box-shadow: 0 10px 28px rgba(242, 121, 191, .55);
}

.nav-login-btn:active {
  transform: scale(.97);
}

.nav-login-btn svg {
  flex-shrink: 0;
}

.nav-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: all .25s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  font-family: var(--f1);
  opacity: 0;
  transform: translateY(10px);
}

.nav-drawer.open .nav-search-btn {
  opacity: 1;
  transform: translateY(0);
  transition: all .5s var(--ease-elegant);
  transition-delay: .4s;
}

.nav-search-btn:hover {
  background: rgba(0, 191, 165, .12);
  border-color: #00BFA5;
  color: #00BFA5;
}

.nav-search-btn .nav-search-shortcut {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .65);
  background: rgba(255, 255, 255, .06);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  transition: color .2s, background .2s;
}

.nav-search-btn:hover .nav-search-shortcut {
  color: #0a0a14;
  background: #00BFA5;
}

/* Nav Footer */
.nav-ftr {
  padding: 16px 20px calc(16px + var(--safe-b));
  border-top: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .06);
  color: #ffffff;
  cursor: pointer;
  border: none;
  transition: background .2s, transform .2s, color .2s;
}

.nav-icon-btn:hover {
  background: #00BFA5;
  color: #0a0a14;
  transform: scale(1.08);
}

.nav-icon-btn:active {
  transform: scale(.93);
}

.nav-lang {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .06);
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  border: none;
  transition: background .2s, color .2s;
  font-family: var(--f1);
  margin-left: auto;
}

.nav-lang:hover {
  background: #00BFA5;
  color: #0a0a14;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       SEARCH OVERLAY
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999999;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(20vh, 160px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-out);
}

.search-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.search-box {
  width: min(600px, 92vw);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(60px) saturate(1.5);
  -webkit-backdrop-filter: blur(60px) saturate(1.5);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  overflow: visible;
  transform: translateY(-30px) scale(0.95);
  transition: transform 0.5s var(--ease-spring), opacity 0.4s var(--ease-out);
  opacity: 0;
}

.search-overlay.open .search-box {
  transform: translateY(0) scale(1);
  opacity: 1;
}

body[data-mode="dark"] .search-box {
  background: rgba(30, 30, 40, 0.75);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
}

.search-input-wrap svg {
  flex-shrink: 0;
  color: var(--g1);
}

.search-input {
  flex: 1;
  font-size: 22px;
  font-weight: 500;
  color: var(--fg);
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--f1);
  letter-spacing: -0.02em;
}

.search-input::placeholder {
  color: var(--g1);
  opacity: .5;
  font-weight: 400;
}

.search-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .06);
  color: var(--g2);
  cursor: pointer;
  font-size: 12px;
  transition: background .15s, transform .15s;
  flex-shrink: 0;
}

.search-close:hover {
  background: rgba(0, 0, 0, .1);
  transform: scale(1.05);
}

body[data-mode="dark"] .search-close {
  background: rgba(255, 255, 255, .08);
  color: var(--dm-g2);
}

.search-hints {
  padding: 0 24px 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.search-hint {
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .3s var(--ease);
  font-family: var(--f1);
}

.search-hint:hover {
  background: var(--card);
  color: var(--theme-color);
  border-color: rgba(var(--theme-color-rgb), .2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

body[data-mode="dark"] .search-hint {
  background: rgba(255, 255, 255, .08);
  color: var(--dm-g2);
}

body[data-mode="dark"] .search-hint:hover {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border-color: rgba(255, 255, 255, .2);
}

/* Contact info grid */
.contact-info {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--brd);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

@media (max-width: 500px) {
  .contact-info {
    grid-template-columns: 1fr;
    gap: 16px
  }
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       RTL / ARABIC SUPPORT
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  font-family: var(--f-ar)
}

[dir="rtl"] .h1,
[dir="rtl"] .h2,
[dir="rtl"] .h3,
[dir="rtl"] .p1,
[dir="rtl"] .p2,
[dir="rtl"] .btn-p,
[dir="rtl"] .lb,
[dir="rtl"] .nav-hdr-logo,
[dir="rtl"] .nav-hdr-sub,
[dir="rtl"] .m-mid b,
[dir="rtl"] .m-fd span,
[dir="rtl"] .i-fd span,
[dir="rtl"] .m-tl,
[dir="rtl"] .m-tr,
[dir="rtl"] .m-bot div,
[dir="rtl"] .i-title,
[dir="rtl"] .i-subtitle,
[dir="rtl"] .auth-title,
[dir="rtl"] .auth-sub,
[dir="rtl"] .auth-field label,
[dir="rtl"] .auth-btn,
[dir="rtl"] .auth-link,
[dir="rtl"] .auth-msg,
[dir="rtl"] .dash-hello,
[dir="rtl"] .dash-tab,
[dir="rtl"] .proj-title,
[dir="rtl"] .proj-type,
[dir="rtl"] .proj-desc,
[dir="rtl"] .proj-meta,
[dir="rtl"] .proj-badge,
[dir="rtl"] .stage-label,
[dir="rtl"] .comp-item-subj,
[dir="rtl"] .comp-item-msg,
[dir="rtl"] .comp-item-resp,
[dir="rtl"] .admin-stat .l,
[dir="rtl"] .admin-table th,
[dir="rtl"] .admin-table td,
[dir="rtl"] .co-title,
[dir="rtl"] .co-sub,
[dir="rtl"] .co-lbl,
[dir="rtl"] .co-tab,
[dir="rtl"] .co-tl-l,
[dir="rtl"] .search-input,
[dir="rtl"] .search-hint,
[dir="rtl"] .toast,
[dir="rtl"] .empty-state p,
[dir="rtl"] .tf-corner-bl,
[dir="rtl"] .tf-sayhi {
  font-family: var(--f-ar);
  letter-spacing: normal !important;
}

[dir="rtl"] .hamburger {
  right: auto;
  left: max(20px, env(safe-area-inset-left));
}

[dir="rtl"] .nav-drawer {
  right: auto;
  left: 0;
  transform: translateX(-105%);
  border-left: none;
  border-right: 1px solid rgba(255, 255, 255, .3);
  box-shadow: 16px 0 48px rgba(0, 0, 0, .07);
}

[dir="rtl"] .nav-drawer.open {
  transform: translateX(0)
}

[dir="rtl"] .nav-item {
  direction: rtl;
  text-align: right
}

[dir="rtl"] .nav-lang {
  margin-left: 0;
  margin-right: auto
}

[dir="rtl"] .nav-search-btn .nav-search-shortcut {
  margin-left: 0;
  margin-right: auto
}

[dir="rtl"] .m-tags,
[dir="rtl"] .m-bot {
  direction: rtl
}

[dir="rtl"] .m-bot div {
  text-align: right
}

[dir="rtl"] .m-bar {
  direction: rtl
}

[dir="rtl"] .sc {
  direction: rtl;
  text-align: right
}

[dir="rtl"] .lb {
  text-align: right
}

[dir="rtl"] .crd,
[dir="rtl"] .strip {
  text-align: center
}

[dir="rtl"] .gr2,
[dir="rtl"] .gr4,
[dir="rtl"] .gr2c,
[dir="rtl"] .strip {
  direction: rtl
}

[dir="rtl"] .sv {
  direction: rtl
}

[dir="rtl"] .sv:hover {
  padding-left: 24px;
  padding-right: 32px
}

[dir="rtl"] .bc {
  direction: rtl
}

[dir="rtl"] .pc-b {
  text-align: right
}

[dir="rtl"] .fi {
  direction: rtl;
  text-align: right
}

[dir="rtl"] .fi:focus {
  padding-left: 0;
  padding-right: 6px
}

[dir="rtl"] .ios-screen-bar {
  direction: rtl
}

[dir="rtl"] .contact-info {
  direction: rtl;
  text-align: right
}

/* RTL: Auth forms */
[dir="rtl"] .auth-wrap {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .auth-title,
[dir="rtl"] .auth-sub,
[dir="rtl"] .auth-link {
  text-align: center;
}

[dir="rtl"] .auth-field input {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .auth-field input[type="email"],
[dir="rtl"] .auth-field input[type="tel"],
[dir="rtl"] .auth-field input[type="password"] {
  direction: ltr;
  text-align: left;
}

/* RTL: Dashboard */
[dir="rtl"] .dash-wrap {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .dash-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .dash-tabs {
  direction: rtl;
}

[dir="rtl"] .proj-top {
  direction: rtl;
}

[dir="rtl"] .proj-meta {
  direction: rtl;
}

[dir="rtl"] .comp-form {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .comp-form select,
[dir="rtl"] .comp-form input,
[dir="rtl"] .comp-form textarea {
  text-align: right;
}

[dir="rtl"] .comp-item {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .comp-item-resp {
  border-left: none;
  border-right: 3px solid #00b5af;
}

/* RTL: Admin */
[dir="rtl"] .admin-table th {
  text-align: right;
}

[dir="rtl"] .admin-table .act-btn {
  margin-right: 0;
  margin-left: 4px;
}

/* RTL: Search */
[dir="rtl"] .search-input-wrap {
  direction: rtl;
}

[dir="rtl"] .search-input {
  text-align: right;
}

[dir="rtl"] .search-hints {
  direction: rtl;
}

/* RTL: Contact form */
[dir="rtl"] .co-in {
  text-align: right;
}

[dir="rtl"] .co-in[type="email"],
[dir="rtl"] .co-in[type="tel"],
[dir="rtl"] .co-in[type="number"] {
  direction: ltr;
  text-align: left;
}

/* RTL: Inline left-aligned overrides */
[dir="rtl"] .crd-hover[style*="text-align:left"],
[dir="rtl"] .crd-hover[style*="text-align: left"] {
  text-align: right !important;
}

[dir="rtl"] .bc-c[style*="text-align: left"],
[dir="rtl"] .bc-c[style*="text-align:left"] {
  text-align: right !important;
}

[dir="rtl"] .pc-b[style*="text-align: left"],
[dir="rtl"] .pc-b[style*="text-align:left"] {
  text-align: right !important;
}

[dir="rtl"] .pc-b[style*="border-left"],
[dir="rtl"] .crd-hover[style*="border-left"] {
  border-left: none !important;
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* RTL: Profile form */
[dir="rtl"] .profile-form {
  direction: rtl;
  text-align: right;
}

@media (max-width: 768px) {
  [dir="rtl"] .sv:hover {
    padding-right: 14px;
    padding-left: 14px
  }
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       RTL — COMPREHENSIVE SYSTEM (universal flips)
       Applied uniformly across ALL components so the UI
       mirrors cleanly when language switches to Arabic.
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */

/* 1) Default text alignment for any RTL container */
[dir="rtl"] body,
[dir="rtl"] .pg,
[dir="rtl"] .sc,
[dir="rtl"] section,
[dir="rtl"] .co-hero,
[dir="rtl"] .v-card,
[dir="rtl"] .st-card,
[dir="rtl"] .svc-showcase-card,
[dir="rtl"] .port-content-area,
[dir="rtl"] .blog-content,
[dir="rtl"] .terms-content,
[dir="rtl"] .co-box,
[dir="rtl"] .co-box-h,
[dir="rtl"] .co-box-b,
[dir="rtl"] .auth-wrap,
[dir="rtl"] .dash-wrap,
[dir="rtl"] .pg-contact,
[dir="rtl"] .pg-modal,
[dir="rtl"] .faq-list,
[dir="rtl"] .faq-item,
[dir="rtl"] .faq-q,
[dir="rtl"] .faq-a,
[dir="rtl"] .nav-drawer,
[dir="rtl"] .partners-strip,
[dir="rtl"] .terms-content h3,
[dir="rtl"] .terms-content p {
  text-align: right;
}

/* 2) Force LTR for technical / numeric content (stays readable) */
[dir="rtl"] [type="email"],
[dir="rtl"] [type="tel"],
[dir="rtl"] [type="url"],
[dir="rtl"] [type="password"],
[dir="rtl"] [type="number"],
[dir="rtl"] code,
[dir="rtl"] kbd,
[dir="rtl"] samp,
[dir="rtl"] pre,
[dir="rtl"] .tf-email,
[dir="rtl"] [data-keep-ltr],
[dir="rtl"] .port-stat>div>div:first-child,
[dir="rtl"] .st-card>div:first-child {
  direction: ltr;
  unicode-bidi: isolate;
}

/* 3) Mirror flex/grid layouts that depend on visual order */
[dir="rtl"] .port-card {
  flex-direction: row-reverse;
}

[dir="rtl"] .port-card.reverse {
  flex-direction: row;
}

[dir="rtl"] .port-card .port-content-area {
  border-left: none;
  border-right: 1px solid rgba(255, 255, 255, .05);
}

[dir="rtl"] [data-mode="light"] .port-card .port-content-area {
  border-right: 1px solid rgba(0, 0, 0, .05);
}

[dir="rtl"] .port-card.reverse .port-content-area {
  border-right: none;
  border-left: 1px solid rgba(255, 255, 255, .05);
}

[dir="rtl"] [data-mode="light"] .port-card.reverse .port-content-area {
  border-left: 1px solid rgba(0, 0, 0, .05);
}

/* Service showcase: keep visual grid order (image left, text right by default in EN; mirror in AR) */
[dir="rtl"] .svc-showcase-card {
  direction: rtl;
}

/* Blog hero card: text right, image left in AR */
[dir="rtl"] .blog-card[style*="flex-direction: row"] {
  flex-direction: row-reverse;
}

[dir="rtl"] .blog-card[style*="flex-direction: row"] .blog-img {
  border-right: none;
  border-left: 1px solid rgba(255, 255, 255, .05);
}

/* 4) Reverse arrows and directional pseudo-content */
[dir="rtl"] .blog-btn::after,
[dir="rtl"] .ua::after,
[dir="rtl"] .pc-b::after {
  transform: scaleX(-1);
  display: inline-block;
}

[dir="rtl"] .blog-card:hover .blog-btn::after {
  transform: scaleX(-1) translateX(5px);
}

/* 5) Mirror left/right margins on common utility classes */
[dir="rtl"] .nav-search-shortcut {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .nav-icon-btn {
  margin-left: 0;
  margin-right: 0;
}

/* 6) Floating buttons / corners */
[dir="rtl"] .tf-corner-bl {
  left: auto;
  right: max(20px, env(safe-area-inset-right));
}

[dir="rtl"] .tf-corner-br {
  right: auto;
  left: max(20px, env(safe-area-inset-left));
  flex-direction: row-reverse;
}

[dir="rtl"] .tf-utils {
  flex-direction: row-reverse;
}

[dir="rtl"] .tf-nav {
  flex-direction: row-reverse;
}

[dir="rtl"] .tf-logo-wrap {
  margin-left: auto;
  margin-right: 0;
}

/* 7) Window titlebars (Mac-style modals) */
[dir="rtl"] .m-bar {
  flex-direction: row-reverse;
}

[dir="rtl"] .m-close-btn {
  margin-left: 0;
  margin-right: 0;
}

/* 8) iOS screen bar */
[dir="rtl"] .ios-screen-bar {
  flex-direction: row-reverse;
}

/* 9) Auth & Forms */
[dir="rtl"] .auth-field label {
  text-align: right;
  display: block;
}

[dir="rtl"] .auth-field input,
[dir="rtl"] .auth-field textarea,
[dir="rtl"] .auth-field select {
  text-align: right;
}

[dir="rtl"] .auth-field input[type="email"],
[dir="rtl"] .auth-field input[type="tel"],
[dir="rtl"] .auth-field input[type="password"],
[dir="rtl"] .auth-field input[type="url"],
[dir="rtl"] .auth-field input[type="number"] {
  text-align: left;
  direction: ltr;
}

[dir="rtl"] .field-error {
  text-align: right;
}

/* 10) Contact form mirror */
[dir="rtl"] .co-f-grid {
  direction: rtl;
}

[dir="rtl"] .co-lbl {
  text-align: right;
  display: block;
}

[dir="rtl"] .co-tabs {
  direction: rtl;
}

[dir="rtl"] .co-tab {
  flex-direction: row;
}

[dir="rtl"] .co-tab-n {
  margin-right: 0;
  margin-left: 8px;
}

/* 11) Timeline (Discovery → Measure) */
[dir="rtl"] .co-tl {
  direction: rtl;
}

[dir="rtl"] .co-tli {
  direction: rtl;
}

[dir="rtl"] .co-tl-l {
  text-align: center;
}

/* 12) FAQ accordion */
[dir="rtl"] .faq-q {
  flex-direction: row-reverse;
  text-align: right;
}

[dir="rtl"] .faq-q h3 {
  text-align: right;
  flex: 1;
}

[dir="rtl"] .faq-icon {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .faq-a p {
  text-align: right;
}

/* 13) Service tabs */
[dir="rtl"] .svc-nav-wrap {
  direction: rtl;
}

[dir="rtl"] .svc-nav {
  direction: rtl;
}

[dir="rtl"] .svc-tab {
  direction: rtl;
}

[dir="rtl"] .svc-left,
[dir="rtl"] .svc-right {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .sv-list {
  padding-right: 0;
  padding-left: 0;
}

[dir="rtl"] .sv-list li {
  direction: rtl;
  text-align: right;
}

/* 14) Dashboard panels */
[dir="rtl"] .dash-panel {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .dash-tab {
  direction: rtl;
}

[dir="rtl"] .comp-form select,
[dir="rtl"] .comp-form input,
[dir="rtl"] .comp-form textarea {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .proj-card {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .proj-top {
  flex-direction: row-reverse;
}

[dir="rtl"] .proj-meta {
  flex-direction: row-reverse;
}

/* 15) Admin tables */
[dir="rtl"] .admin-table {
  direction: rtl;
}

[dir="rtl"] .admin-table th,
[dir="rtl"] .admin-table td {
  text-align: right;
}

[dir="rtl"] .admin-stats {
  direction: rtl;
}

[dir="rtl"] .admin-stat {
  text-align: right;
}

/* 16) Toast notification mirror */
[dir="rtl"] .toast {
  right: auto;
  left: 50%;
  transform: translateX(50%);
  text-align: center;
}

/* 17) Hero contact image mirror */
[dir="rtl"] .co-hero-sc {
  direction: rtl;
}

[dir="rtl"] .co-hero-txt {
  text-align: right;
}

/* 18) Bento and card grids: keep grid mirroring but text right-aligned */
[dir="rtl"] .bento {
  direction: rtl;
}

[dir="rtl"] .v-card,
[dir="rtl"] .st-card,
[dir="rtl"] .blog-card,
[dir="rtl"] .port-card,
[dir="rtl"] .crd {
  text-align: right;
}

/* 19) v-card icon stays as decorative element on the start side */
[dir="rtl"] .v-icon {
  margin-left: 0;
  margin-right: 0;
}

/* 20) Inline overrides: any element with style="text-align:left" gets flipped to right in RTL */
[dir="rtl"] [style*="text-align: left"],
[dir="rtl"] [style*="text-align:left"] {
  text-align: right !important;
}

[dir="rtl"] [style*="text-align: right"],
[dir="rtl"] [style*="text-align:right"] {
  text-align: left !important;
}

/* no-op but explicit */

/* 21) Inline border-left → border-right in RTL (if needed) */
[dir="rtl"] [style*="border-left:"]:not([data-keep-border]) {
  border-left: 0 !important;
}

/* 22) Specific number-block mirroring (large 01/02/03 markers) */
[dir="rtl"] .svc-left>div:first-child {
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
}

/* 23) Hero headlines: ensure RTL alignment for h1/h2/h3 inside RTL pages */
[dir="rtl"] .pg h1,
[dir="rtl"] .pg h2,
[dir="rtl"] .pg h3,
[dir="rtl"] .pg h4,
[dir="rtl"] .pg p {
  text-align: inherit;
}

/* 24) Centered hero blocks should remain centered, even with explicit text-align overrides */
[dir="rtl"] .co-hero-sc[style*="text-align: center"],
[dir="rtl"] .co-hero-sc [style*="text-align: center"] {
  text-align: center !important;
}

[dir="rtl"] .partners-strip {
  justify-content: center;
}

/* 25) Smooth font swap when toggling */
body,
.pg,
.sc {
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* 26) Rubik font: optimized typography for Arabic */
[dir="rtl"],
[dir="rtl"] body,
[dir="rtl"] .pg,
[dir="rtl"] .sc,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  font-family: var(--f-ar) !important;
  letter-spacing: 0 !important;
  word-spacing: 0;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}

[dir="rtl"] .h1,
[dir="rtl"] .h2,
[dir="rtl"] .h3,
[dir="rtl"] .h4,
[dir="rtl"] .co-title,
[dir="rtl"] .auth-title,
[dir="rtl"] .dash-hello,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
  line-height: 1.45 !important;
  letter-spacing: -0.2px !important;
  font-weight: 800;
}

[dir="rtl"] .lb,
[dir="rtl"] .blog-cat,
[dir="rtl"] .nav-search-shortcut {
  letter-spacing: 0 !important;
  font-weight: 700;
}

[dir="rtl"] .p1,
[dir="rtl"] .p2,
[dir="rtl"] p,
[dir="rtl"] .co-sub,
[dir="rtl"] .auth-sub {
  line-height: 1.75 !important;
  letter-spacing: 0 !important;
  font-weight: 500;
}

[dir="rtl"] .btn-p,
[dir="rtl"] .btn-s,
[dir="rtl"] .btn-co,
[dir="rtl"] .auth-btn,
[dir="rtl"] .tf-sayhi,
[dir="rtl"] .nav-item,
[dir="rtl"] .nav-login-btn,
[dir="rtl"] .nav-search-btn,
[dir="rtl"] .nav-lang,
[dir="rtl"] .dash-tab,
[dir="rtl"] .svc-tab,
[dir="rtl"] .blog-btn,
[dir="rtl"] .ua,
[dir="rtl"] label,
[dir="rtl"] .co-lbl,
[dir="rtl"] .auth-field label {
  letter-spacing: 0 !important;
  font-family: var(--f-ar) !important;
  font-weight: 600;
}

/* Arabic numerals: keep them readable inline */
[dir="rtl"] .stat-num,
[dir="rtl"] [data-num] {
  font-family: var(--f1) !important;
  direction: ltr;
  unicode-bidi: isolate;
}

/* 27) Buttons in RTL: keep emoji + label spacing right */
[dir="rtl"] .btn-p,
[dir="rtl"] .btn-s,
[dir="rtl"] .auth-btn {
  letter-spacing: 0 !important;
}

/* 28) Search overlay alignment */
[dir="rtl"] .search-input-wrap {
  flex-direction: row-reverse;
}

[dir="rtl"] .search-close {
  margin-right: 0;
  margin-left: 0;
}

/* 29) Project list / dashboard cards */
[dir="rtl"] .proj-card .proj-actions {
  flex-direction: row-reverse;
}

[dir="rtl"] .proj-card .stage {
  text-align: right;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       MOBILE iOS HOME — Arabic-specific layout
       In Arabic, the visual flow reads right-to-left:
       title on the right, character on the right, folders
       cascading on the left. Pinned with high specificity
       so the layout stays correct in RTL mode.
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */

/* Title & subtitle move to the top-right with right-aligned text */
[dir="rtl"] #ios .ios-home .i-title,
body[data-lang="ar"] #ios .ios-home .i-title,
[dir="rtl"] #ios .ios-home .i-subtitle,
body[data-lang="ar"] #ios .ios-home .i-subtitle {
  left: auto;
  right: 5vw;
  text-align: right;
}

/* Character anchored to the left edge of the screen */
[dir="rtl"] #ios .ios-home .i-char,
body[data-lang="ar"] #ios .ios-home .i-char {
  right: auto;
  left: 9.5vw;
  justify-content: flex-start;
}

/* Character image hugs the left edge */
[dir="rtl"] #ios .ios-home .i-char img,
body[data-lang="ar"] #ios .ios-home .i-char img {
  object-position: left bottom;
}

/* Folders zigzag on the RIGHT side (6.64vw / 26.14vw columns) */
/* Folders zigzag on the RIGHT side (9vw / 28.5vw columns) */
[dir="rtl"] #ios .ios-home .i-fd-1,
[dir="rtl"] #ios .ios-home .i-fd-3,
[dir="rtl"] #ios .ios-home .i-fd-5,
body[data-lang="ar"] #ios .ios-home .i-fd-1,
body[data-lang="ar"] #ios .ios-home .i-fd-3,
body[data-lang="ar"] #ios .ios-home .i-fd-5 {
  left: auto;
  right: 9vw;
}

[dir="rtl"] #ios .ios-home .i-fd-2,
[dir="rtl"] #ios .ios-home .i-fd-4,
body[data-lang="ar"] #ios .ios-home .i-fd-2,
body[data-lang="ar"] #ios .ios-home .i-fd-4 {
  left: auto;
  right: 28.5vw;
}

/* Prevent text cramping in Arabic */
[dir="rtl"] #ios .ios-home .i-fd span,
body[data-lang="ar"] #ios .ios-home .i-fd span {
  font-size: 2.2vw;
}

/* Shrink and lower CTA slightly to prevent overlap */
[dir="rtl"] #ios .ios-home .i-cta,
body[data-lang="ar"] #ios .ios-home .i-cta {
  font-size: 2.5vw;
  padding: 1.5vw 4vw;
  bottom: calc(max(12vh, env(safe-area-inset-bottom)) + 8vw);
}

/* Swap connector lines */
[dir="rtl"] #ios .ios-home .i-fd-lines-ltr,
body[data-lang="ar"] #ios .ios-home .i-fd-lines-ltr {
  display: none !important;
}

[dir="rtl"] #ios .ios-home .i-fd-lines-rtl,
body[data-lang="ar"] #ios .ios-home .i-fd-lines-rtl {
  display: block !important;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       LTR explicit baseline (resets when switching back)
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
[dir="ltr"] {
  text-align: left;
}

[dir="ltr"] body {
  letter-spacing: normal;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       CONTACT REDESIGN
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.pg-contact {
  background: #fff !important;
}

body[data-mode="dark"] .pg-contact {
  background: var(--dm-bg) !important;
}

.co-hero {
  position: relative;
  background: #1B0A3D;
  overflow: hidden;
  padding: 60px 0;
  color: #fff;
}

body[data-mode="dark"] .co-hero {
  background: var(--dm-bg);
  border-bottom: 1px solid var(--dm-brd);
}

.co-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(120, 40, 180, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.co-f-shape {
  position: absolute;
  background: rgba(255, 255, 255, 0.05);
  filter: blur(4px);
  border-radius: 50%;
  pointer-events: none;
}

.co-f-1 {
  width: 120px;
  height: 120px;
  top: 10%;
  left: 5%;
}

.co-f-2 {
  width: 80px;
  height: 80px;
  top: 80%;
  left: 85%;
  background: rgba(0, 181, 175, 0.1);
}

.co-f-3 {
  width: 150px;
  height: 150px;
  top: 40%;
  left: 45%;
  background: rgba(var(--theme-color-rgb), 0.08);
  filter: blur(12px);
}

.co-hero-sc {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: center;
  z-index: 2;
  position: relative;
  max-width: 960px;
}

@media(max-width:768px) {
  .co-hero-sc {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 40px;
  }

  .co-hero-img {
    order: -1;
    max-width: 280px;
    margin: 0 auto;
  }
}

.co-title {
  color: #fff;
  font-size: clamp(32px, 6vw, 48px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
}

.co-sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(14px, 3vw, 16px);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 440px;
}

[dir="rtl"] .co-sub {
  margin-left: auto;
}

[dir="ltr"] .co-sub {
  margin-right: auto;
}

.btn-co {
  background: #fdfdfd;
  color: #1B0A3D;
  min-width: 200px;
}

.btn-co:hover {
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2)
}

.co-phones {
  position: relative;
  width: 100%;
  aspect-ratio: 0.9;
}

.co-p1,
.co-p2 {
  position: absolute;
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  background: #222;
  border: 4px solid rgba(255, 255, 255, 0.2);
}

.co-p1 {
  width: 65%;
  right: 0;
  top: 15%;
  transform: rotate(8deg) scale(1.05);
  z-index: 2;
}

.co-p2 {
  width: 60%;
  left: 0;
  top: 0;
  transform: rotate(-5deg);
  z-index: 1;
  opacity: 0.85;
  filter: blur(0.5px);
}

.co-phones img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 9/19;
}

[dir="rtl"] .co-p1 {
  right: auto;
  left: 0;
  transform: rotate(-8deg) scale(1.05);
}

[dir="rtl"] .co-p2 {
  left: auto;
  right: 0;
  transform: rotate(5deg);
}

.co-tl {
  position: relative;
  display: flex;
  justify-content: space-between;
  max-width: 700px;
  margin: 50px auto 30px;
}

.co-tl::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 30px;
  right: 30px;
  height: 2px;
  background: rgba(0, 0, 0, 0.06);
  z-index: 0;
}

body[data-mode="dark"] .co-tl::before {
  background: rgba(255, 255, 255, 0.06);
}

.co-tl-prog {
  position: absolute;
  top: 20px;
  left: 30px;
  height: 2px;
  background: linear-gradient(90deg, #fffbec, #fcffff);
  z-index: 0;
  transition: width 0.4s ease;
  width: 66.66%;
}

[dir="rtl"] .co-tl::before,
[dir="rtl"] .co-tl-prog {
  left: auto;
  right: 30px;
}

.co-tli {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.co-tl-c {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--brd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f3);
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  color: var(--g1);
  transition: all .3s;
}

.co-tl-l {
  font-size: 12px;
  font-weight: 600;
  color: var(--g1);
  white-space: nowrap;
}

.co-tli.act .co-tl-c {
  border-color: #69c255;
  border-width: 2px;
  /* Opaque page-bg layered with a soft green tint, so the connector line
     is hidden where it passes behind the circle. */
  background: linear-gradient(rgba(0, 181, 175, 0.05), rgba(0, 181, 175, 0.05)) var(--bg);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 181, 175, 0.2);
}

.co-tli.act .co-tl-l {
  color: var(--fg);
}

@media(max-width:600px) {
  .co-tl {
    flex-direction: column;
    gap: 26px;
    align-items: flex-start;
    margin-left: 12%;
    margin-bottom: 50px;
  }

  [dir="rtl"] .co-tl {
    margin-left: 0;
    margin-right: 12%;
  }

  .co-tl::before {
    top: 0;
    bottom: 0;
    left: 20px;
    right: auto;
    width: 2px;
    height: 100%;
  }

  [dir="rtl"] .co-tl::before {
    left: auto;
    right: 20px;
  }

  .co-tl-prog {
    width: 2px !important;
    height: 66.66%;
    top: 0;
    left: 20px;
    right: auto;
  }

  [dir="rtl"] .co-tl-prog {
    left: auto;
    right: 20px;
  }

  .co-tli {
    flex-direction: row;
  }
}

.co-ring {
  position: relative;
  width: min(calc(100% - 60px), 340px);
  height: min(calc(100vw - 60px), 340px);
  margin: 40px auto;
}

.co-ring-cn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

body[data-mode="dark"] .co-ring-cn {
  background: var(--dm-card);
}

.co-ring-dot {
  position: absolute;
  width: 44px;
  height: 44px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

body[data-mode="dark"] .co-ring-dot {
  background: var(--dm-card);
  border-color: rgba(255, 255, 255, 0.05);
}

.co-ring-dot img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.co-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.co-ring line {
  stroke: rgba(0, 0, 0, 0.1);
  stroke-dasharray: 4;
}

body[data-mode="dark"] .co-ring line {
  stroke: rgba(255, 255, 255, 0.1);
}

.co-ring line.col {
  stroke: rgba(var(--theme-color-rgb), 0.5);
}

.co-tech-wrap {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 50px;
}

.co-th-ic {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: grayscale(0.6);
  transition: filter 0.3s, transform 0.3s;
}

.co-th-ic:hover {
  filter: grayscale(0);
  transform: scale(1.15);
}

.co-box {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
  text-align: left;
  max-width: 700px;
  margin: 0 auto;
}

[dir="rtl"] .co-box {
  text-align: right;
}

.co-box-h {
  background: #1B0A3D;
  color: #fff;
  padding: 28px 30px;
  position: relative;
  overflow: hidden;
}

body[data-mode="dark"] .co-box-h {
  background: var(--dm-card);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.co-box-h::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 10px;
  width: 100px;
  height: 100px;
  background: radial-gradient(ellipse, rgba(var(--theme-color-rgb), 0.3) 0%, transparent 70%);
  filter: blur(10px);
}

.co-box-b {
  padding: 30px;
}

.co-tabs {
  display: flex;
  border-bottom: 1px dashed var(--brd);
  margin-bottom: 30px;
  padding-bottom: 15px;
  gap: 24px;
}

@media(max-width:500px) {
  .co-tabs {
    flex-direction: column;
    gap: 12px;
  }
}

.co-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.5;
  transition: opacity .3s;
  font-size: 14px;
}

.co-tab.act {
  opacity: 1;
}

.co-tab-n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--g2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f3);
  font-size: 12px;
}

.co-tab.act .co-tab-n {
  background: var(--theme-color);
  color: #fff;
}

.co-f-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 36px;
}

.co-in {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid var(--brd);
  background: transparent;
  font-size: 15px;
  color: var(--fg);
  transition: border-color .3s, padding 0.3s;
}

.co-in:focus {
  border-color: var(--theme-color);
  outline: none;
  box-shadow: 0 8px 24px rgba(var(--theme-color-rgb), 0.12);
  border-bottom-width: 2px;
  margin-bottom: -1px;
}

[dir="ltr"] .co-in:focus {
  padding-left: 10px;
  background: rgba(0, 181, 175, 0.02);
  border-radius: 4px 4px 0 0;
}

[dir="rtl"] .co-in:focus {
  padding-right: 10px;
  background: rgba(0, 181, 175, 0.02);
  border-radius: 4px 4px 0 0;
}

.co-in::placeholder {
  color: var(--g1);
  font-size: 13.5px;
  opacity: 0.6;
}

.co-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
  display: block;
  margin-bottom: 4px;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       TOYFIGHT DESKTOP LAYOUT (TF-LAYOUT) 
       Raw Pixel Aesthetic
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
@media (min-width: 769px) {
  .hamburger {
    top: 40px;
    right: 48px;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: var(--c3);
    border: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
  }

  body[data-mode="dark"] .hamburger {
    background: var(--c3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
    border-color: transparent;
  }

  .hamburger .hb {
    display: block;
    background: #ffffff;
    height: 3px;
    width: 24px;
  }

  .hamburger .hb:nth-child(2) {
    width: 18px;
  }

  .hamburger:hover .hb:nth-child(2) {
    width: 24px;
  }

  body[data-mode="dark"] .hamburger .hb {
    background: #ffffff;
  }

  .hamburger.open {
    border-radius: 50%;
    transform: rotate(90deg);
  }

  .hamburger.open .hb:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.open .hb:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  body[data-mode="light"] #mac {
    background: #fccc0a;
  }

  /* Vibrant pure yellow */
  body[data-mode="dark"] #mac {
    background: #1a1a2e;
  }

  /* Center Background Pattern */
  .mac-env.tf-env::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center center;
    mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 15%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 15%, transparent 85%);
    pointer-events: none;
    z-index: 1;
    display: block;
  }

  body[data-mode="dark"] .mac-env.tf-env::before {
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  }

  /* Nav */
  .tf-nav {
    position: absolute;
    top: 40px;
    left: 48px;
    right: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    pointer-events: auto;
  }

  .tf-logo {
    color: #fff;
    width: auto;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .2s;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
  }

  body[data-mode="dark"] .tf-logo {
    color: #fff;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.1);
  }

  .tf-logo:hover {
    transform: scale(1.05);
  }

  .tf-links {
    display: flex;
    gap: 32px;
  }

  .tf-links button {
    padding: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s;
    font-family: var(--f3);
    color: #111;
    letter-spacing: 1px;
    background: transparent;
    opacity: 0.7;
    border: none;
  }

  body[data-mode="dark"] .tf-links button {
    color: #fff;
  }

  .tf-links button:hover {
    opacity: 1;
  }

  .tf-utils {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  /* Desktop Hamburger (handled by unified .hamburger) */
  .tf-ham {
    display: none !important;
  }

  /* Visual Centerpiece */
  .m-centerpiece {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 10;
  }

  .m-hero {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    height: min(650px, 67vh);
    margin-bottom: -43px;
    filter: drop-shadow(0 0 2px rgba(78, 48, 114, 1)) drop-shadow(0 0 6px rgba(78, 48, 114, 0.95)) drop-shadow(0 0 12px rgba(78, 48, 114, 0.75)) drop-shadow(0 0 20px rgba(78, 48, 114, 0.5));
    animation: tfHeroFloat 6s ease-in-out infinite alternate;
  }

  @keyframes tfHeroFloat {
    0% {
      transform: translateY(0) rotate(2deg) scale(1.02);
    }

    100% {
      transform: translateY(-15px) rotate(-1deg) scale(1.02);
    }
  }

  .m-hero img {
    filter: drop-shadow(-15px 25px 20px rgba(0, 0, 0, 0.15));
    object-fit: contain;
  }

  /* TF Layout Tags/Typography */
  .tf-tags {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 15;
    width: 100%;
    margin-top: -18vh;
    text-align: center;
    pointer-events: auto;
  }

  .tf-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 16px;
    flex-wrap: nowrap;
  }

  .tf-block {
    display: block;
    white-space: nowrap;
    color: #111;
  }

  body[data-mode="dark"] .tf-block {
    color: #fff;
  }

  .tf-sans {
    font-family: var(--f1);
    font-weight: 300;
    font-size: clamp(24px, 3.5vw, 44px);
    letter-spacing: -0.5px;
    text-shadow: 2px 2px 12px rgba(246, 204, 10, 0.4);
  }

  .tf-pixel {
    font-family: 'Rubik', var(--f2);
    font-weight: 800;
    font-size: clamp(52px, 7vw, 100px);
    letter-spacing: -2px;
    text-transform: uppercase;
    line-height: 0.85;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.06), 0 8px 24px rgba(246, 204, 10, 0.2);
  }

  body[data-mode="dark"] .tf-pixel {
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.5);
  }

  /* Sentence-specific overrides */
  .tf-row-1 {
    position: relative;
    padding: 4px 22px 4px;
    display: inline-flex;
    align-items: center;
  }

  .tf-row-1::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f279bf;
    z-index: -1;
    transform: rotate(-3.5deg);
    clip-path: polygon(1% 2%, 99% -1%, 98% 99%, 0% 98%);
    border-radius: 2px;
  }

  .tf-row-1 .tf-block {
    color: #fff !important;
    text-shadow: none !important;
    line-height: 0.9 !important;
    position: relative;
    z-index: 1;
  }

  .tf-row-2 .tf-block {
    color: #543175 !important;
  }

  body[data-mode="dark"] .tf-row-2 .tf-block {
    color: #d1b4ee !important;
  }

  .tf-row-3 .tf-pixel {
    color: #fff !important;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  }

  /* Folder scattering */
  .m-orb-system {
    z-index: 5;
  }

  .m-fd {
    animation: tfFolderFloat 8s ease-in-out infinite alternate;
    animation-delay: var(--delay, 0s);
    will-change: transform;
  }

  @keyframes tfFolderFloat {
    0% {
      transform: translate(var(--tx), -50%) scale(var(--orb-s, 1)) rotate(calc(var(--rot, 0deg) - 8deg));
    }

    100% {
      transform: translate(var(--tx), calc(-50% - 20px)) scale(var(--orb-s, 1)) rotate(calc(var(--rot, 0deg) + 8deg));
    }
  }

  /* Pink Folders Filter */
  .m-fd img {
    width: clamp(60px, 8vw, 100px);
    filter: invert(34%) sepia(87%) saturate(2250%) hue-rotate(293deg) brightness(98%) contrast(98%) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
    transition: transform .2s;
  }

  .m-fd:hover img {
    transform: scale(1.05);
  }

  body[data-mode="dark"] .m-fd img {
    filter: drop-shadow(0 8px 16px rgba(255, 255, 255, 0.05));
  }

  .m-fd span {
    display: block;
    position: absolute;
    top: calc(100% + 4px);
    font-family: 'Rubik', var(--f3);
    font-size: 22px;
    color: #111;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 2px 2px 8px rgba(246, 204, 10, 0.5);
    opacity: 0.9;
    transition: opacity .2s, top .2s;
  }

  .m-fd:hover span {
    opacity: 1;
    top: calc(100% + 8px);
  }

  body[data-mode="dark"] .m-fd span {
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
  }

  /* Corner texts */
  .tf-corner-bl {
    position: absolute;
    bottom: 32px;
    left: 40px;
    font-family: var(--f2);
    font-size: 14px;
    font-weight: 500;
    color: #111;
    z-index: 100;
    pointer-events: none;
    letter-spacing: -0.5px;
  }

  .tf-corner-br {
    position: absolute;
    bottom: 32px;
    right: 40px;
    display: flex;
    align-items: baseline;
    gap: 14px;
    z-index: 100;
    pointer-events: auto;
  }

  .tf-sayhi {
    background: transparent;
    color: #111;
    font-weight: 800;
    font-family: var(--f3);
    padding: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border: none;
    transition: transform .2s;
  }

  .tf-sayhi:hover {
    transform: scale(1.05);
  }

  .tf-email {
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    color: #111;
    opacity: 0.9;
    cursor: pointer;
  }

  body[data-mode="dark"] .tf-corner-bl,
  body[data-mode="dark"] .tf-sayhi,
  body[data-mode="dark"] .tf-email {
    color: #fff;
  }

  [dir="rtl"] .tf-row {
    flex-direction: row-reverse;
  }

  [dir="rtl"] .tf-nav {
    flex-direction: row-reverse;
  }

  [dir="rtl"] .tf-corner-bl {
    left: auto;
    right: 40px;
  }

  [dir="rtl"] .tf-corner-br {
    right: auto;
    left: 40px;
    flex-direction: row-reverse;
  }

  /* ════════════════════════════════════════════════════════════
     SPLIT LAYOUT — mascot on the RIGHT (smaller), folder arc on her
     left, tagline + social icons anchored to the LEFT.
     Text alignment and social icon order follow the current writing
     direction (left for English, right for Arabic).
     ════════════════════════════════════════════════════════════ */

  /* Left pane — vertically centred tagline + social icons row.
     `text-align: start` reads as left in LTR and right in RTL so the
     copy always reads in the natural direction of the language. */
  .tf-left {
    position: absolute;
    top: 50%;
    left: 6vw;
    transform: translateY(-50%);
    z-index: 60;
    width: min(40%, 540px);
    display: flex;
    flex-direction: column;
    gap: 22px;
    pointer-events: auto;
    text-align: start;
  }

  .tf-left-title {
    margin: 0;
    font-family: var(--f2);
    font-weight: 800;
    letter-spacing: -1.2px;
    color: #f6be00;
    font-size: clamp(36px, 4.6vw, 68px);
    line-height: 1.04;
    text-shadow: 0 2px 18px rgba(246, 190, 0, 0.18);
  }

  .tf-left-sub {
    margin: 0;
    font-family: var(--f3);
    font-weight: 700;
    color: #f6be00;
    opacity: 0.85;
    font-size: clamp(12px, 1.05vw, 16px);
    letter-spacing: 3.5px;
    text-transform: uppercase;
  }

  /* Arabic — drop the latin tracking/uppercase since neither applies. */
  [dir="rtl"] .tf-left-title {
    font-family: var(--f-ar, var(--f2));
    letter-spacing: -0.5px;
    line-height: 1.18;
  }

  [dir="rtl"] .tf-left-sub {
    font-family: var(--f-ar, var(--f3));
    letter-spacing: 0.5px;
    text-transform: none;
  }

  /* Social row — `flex-start` follows the writing direction, so icons
     line up under the start of the text on every locale (left in EN,
     right in AR). */
  .tf-left-social {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    justify-content: flex-start;
  }

  /* Match the mobile .p-soc-icon look exactly — small black circle,
     no border, no shadow, transitions only on press. */
  .tf-soc-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    text-decoration: none;
    border: none;
    box-shadow: none;
    transition: transform .15s ease-out;
    cursor: none;
  }

  .tf-soc-icon:hover {
    transform: scale(1.08);
  }

  .tf-soc-icon:active {
    transform: scale(0.92);
  }

  .tf-soc-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
  }

  /* Right pane — mascot anchored to the right, vertically centred. */
  .m-centerpiece.m-centerpiece-right {
    right: 7vw;
    left: auto;
    transform: translate(0, -50%);
    width: auto;
    max-width: none;
    align-items: flex-end;
  }

  .m-centerpiece.m-centerpiece-right .m-hero {
    height: min(62vh, 540px);
    aspect-ratio: 3 / 5;
  }

  .m-centerpiece.m-centerpiece-right .m-hero img {
    object-position: center bottom;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.16));
  }

  /* Folders arc — left-opening "C" hugging the mascot's left side.
     Layout stays fixed L→R regardless of language so the mascot is
     always on the right and the arc always on her left. */
  .m-orb-system.m-orb-arc .m-fd,
  [dir="rtl"] .m-orb-system.m-orb-arc .m-fd {
    --tx: -50%;
    left: var(--orb-x);
    right: auto;
    transform: translate(var(--tx), -50%) scale(var(--orb-s, 1)) rotate(var(--rot, 0deg));
  }

  .m-orb-system.m-orb-arc .m-fd:hover,
  [dir="rtl"] .m-orb-system.m-orb-arc .m-fd:hover {
    transform: translate(var(--tx), -50%) scale(calc(var(--orb-s, 1) + 0.1)) rotate(var(--rot, 0deg));
  }

  /* On narrower desktop widths pull everything in tighter. */
  @media (max-width: 1180px) {
    .tf-left {
      width: min(44%, 460px);
      left: 4vw;
    }

    .tf-left-title {
      font-size: clamp(30px, 4.0vw, 52px);
    }

    .m-centerpiece.m-centerpiece-right {
      right: 2vw;
    }

    .m-centerpiece.m-centerpiece-right .m-hero {
      height: min(54vh, 460px);
    }
  }
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       CUSTOM LOGIN & REGISTER POPUP STYLING
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
/* ───────────────────────────────────────────────
   LOGIN & REGISTER POPUPS — UNIFIED BLACK DESIGN
   Matches the nav drawer & loader: deep black + teal accents +
   magenta CTA. Works on desktop (#mw-*) and mobile (#is-*).
   ─────────────────────────────────────────────── */
#mw-login,
#mw-register,
#is-login,
#is-register {
  background: #000000 !important;
  background-image:
    radial-gradient(120% 60% at 100% 0%, rgba(0, 191, 165, 0.08) 0%, transparent 55%),
    radial-gradient(80% 50% at 0% 100%, rgba(242, 121, 191, 0.06) 0%, transparent 60%) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

#mw-login .m-bar,
#mw-register .m-bar,
#is-login .ios-screen-bar,
#is-register .ios-screen-bar {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  background: transparent !important;
}

#mw-login .m-bar h2,
#mw-register .m-bar h2,
#is-login .ios-screen-bar h3,
#is-register .ios-screen-bar h3 {
  color: #ffffff !important;
}

#mw-login .m-close-btn,
#mw-register .m-close-btn,
#is-login .ios-close,
#is-register .ios-close {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

#mw-login .m-close-btn:hover,
#mw-register .m-close-btn:hover,
#is-login .ios-close:hover,
#is-register .ios-close:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

#is-login .ios-pill,
#is-register .ios-pill {
  background: rgba(255, 255, 255, 0.18) !important;
}

#mw-login .auth-logo img,
#mw-register .auth-logo img,
#is-login .auth-logo img,
#is-register .auth-logo img {
  filter: brightness(0) invert(1);
}

#mw-login .auth-title,
#mw-register .auth-title,
#is-login .auth-title,
#is-register .auth-title {
  color: #ffffff !important;
}

#mw-login .auth-sub,
#mw-register .auth-sub,
#is-login .auth-sub,
#is-register .auth-sub {
  color: rgba(255, 255, 255, 0.65) !important;
}

#mw-login .auth-field label,
#mw-register .auth-field label,
#is-login .auth-field label,
#is-register .auth-field label {
  color: rgba(255, 255, 255, 0.85) !important;
}

#mw-login .auth-field input,
#mw-register .auth-field input,
#is-login .auth-field input,
#is-register .auth-field input {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}

#mw-login .auth-field input:focus,
#mw-register .auth-field input:focus,
#is-login .auth-field input:focus,
#is-register .auth-field input:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: #00BFA5 !important;
  box-shadow: 0 0 0 3px rgba(0, 191, 165, 0.18) !important;
}

#mw-login .auth-field input::placeholder,
#mw-register .auth-field input::placeholder,
#is-login .auth-field input::placeholder,
#is-register .auth-field input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

#mw-login .auth-btn,
#mw-register .auth-btn,
#is-login .auth-btn,
#is-register .auth-btn {
  background: #f6be00 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(242, 121, 191, 0.35) !important;
}

#mw-login .auth-btn:hover,
#mw-register .auth-btn:hover,
#is-login .auth-btn:hover,
#is-register .auth-btn:hover {
  background: #f6be00 !important;
  box-shadow: 0 10px 28px rgba(242, 121, 191, 0.5) !important;
}

#mw-login .auth-link,
#mw-register .auth-link,
#is-login .auth-link,
#is-register .auth-link {
  color: rgba(255, 255, 255, 0.65) !important;
}

#mw-login .auth-link span,
#mw-register .auth-link span,
#is-login .auth-link span,
#is-register .auth-link span {
  color: #00BFA5 !important;
  font-weight: 700;
  text-decoration: none;
}

#mw-login .auth-link span:hover,
#mw-register .auth-link span:hover,
#is-login .auth-link span:hover,
#is-register .auth-link span:hover {
  color: #1ad1bb !important;
  text-decoration: underline;
}

#mw-login .pg,
#mw-register .pg,
#is-login .pg,
#is-register .pg {
  background: transparent !important;
}

#is-login .ios-screen-body,
#is-register .ios-screen-body {
  background: transparent !important;
}


/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       AUTH FORMS & DASHBOARD SYSTEM
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.auth-wrap {
  max-width: 440px;
  margin: 0 auto;
  padding: 60px 32px;
}

.auth-logo {
  text-align: center;
  margin-bottom: 40px;
}

.auth-logo img {
  height: 40px;
  margin: 0 auto;
}

.auth-title {
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 8px;
  color: var(--fg);
}

.auth-sub {
  font-size: 14px;
  color: var(--g1);
  text-align: center;
  margin-bottom: 36px;
}

.auth-field {
  margin-bottom: 20px;
}

.auth-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.auth-field input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--brd);
  border-radius: var(--r-md);
  font-size: 15px;
  color: var(--fg);
  background: var(--card);
  transition: border-color .3s, box-shadow .3s;
}

.auth-field input:focus {
  border-color: var(--theme-color);
  box-shadow: 0 0 0 3px rgba(var(--theme-color-rgb), .1);
  outline: none;
}

.auth-field input::placeholder {
  color: var(--g1);
  opacity: .5;
}

.auth-field .field-error {
  font-size: 11px;
  color: #e53e3e;
  margin-top: 4px;
  display: none;
}

.auth-field .field-error.show {
  display: block;
}

.auth-btn {
  width: 100%;
  padding: 16px;
  border-radius: var(--r-full);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--theme-color);
  cursor: pointer;
  transition: all .3s var(--ease);
  border: none;
  margin-top: 8px;
}

.auth-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--theme-color-rgb), .25);
}

.auth-btn:active {
  transform: scale(.97);
}

.auth-btn:disabled {
  opacity: .5;
  pointer-events: none;
}

.auth-link {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--g1);
}

.auth-link a,
.auth-link span {
  color: var(--theme-color);
  font-weight: 700;
  cursor: pointer;
}

.auth-link a:hover,
.auth-link span:hover {
  text-decoration: underline;
}

.auth-msg {
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  display: none;
}

.auth-msg.error {
  display: block;
  background: rgba(229, 62, 62, .08);
  color: #e53e3e;
  border: 1px solid rgba(229, 62, 62, .15);
}

.auth-msg.success {
  display: block;
  background: rgba(0, 181, 175, .08);
  color: #00b5af;
  border: 1px solid rgba(0, 181, 175, .15);
}

/* Dashboard */
.dash-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 32px;
}

.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}

.dash-hello {
  font-size: 24px;
  font-weight: 800;
  color: var(--fg);
}

.dash-hello span {
  color: var(--theme-color);
}

.dash-tabs {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, .04);
  border-radius: var(--r-full);
  padding: 4px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

body[data-mode="dark"] .dash-tabs {
  background: rgba(255, 255, 255, .04);
}

.dash-tab {
  padding: 10px 20px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 700;
  color: var(--g2);
  cursor: pointer;
  transition: all .25s var(--ease);
  border: none;
  background: transparent;
  font-family: var(--f1);
}

.dash-tab.act {
  background: var(--card);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}

.dash-tab:hover:not(.act) {
  color: var(--fg);
}

.dash-panel {
  display: none;
}

.dash-panel.act {
  display: block;
}

/* Project cards in dashboard */
.proj-card {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 16px;
  transition: border-color .3s;
}

.proj-card:hover {
  border-color: rgba(var(--theme-color-rgb), .2);
}

.proj-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.proj-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
}

.proj-type {
  font-size: 11px;
  font-weight: 700;
  color: var(--theme-color);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 4px;
}

.proj-badge {
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
}

.proj-badge.pending {
  background: rgba(246, 190, 0, .1);
  color: #b8860b;
}

.proj-badge.in_progress {
  background: rgba(0, 181, 175, .1);
  color: #00b5af;
}

.proj-badge.review {
  background: rgba(84, 49, 117, .1);
  color: #543175;
}

.proj-badge.completed {
  background: rgba(0, 181, 175, .15);
  color: #00897b;
}

.proj-badge.cancelled {
  background: rgba(229, 62, 62, .1);
  color: #c53030;
}

/* Stage progress bar */
.stage-bar {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
  position: relative;
}

.stage-seg {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .07);
  position: relative;
  overflow: hidden;
  transition: background .35s, box-shadow .35s;
}

body[data-mode="dark"] .stage-seg {
  background: rgba(255, 255, 255, .07);
}

/* Per-stage colors — one hue per stage number so users instantly see
   which step they're at. Falls back to theme-color if the project has
   more than 7 stages. */
.stage-seg.completed[data-stage-num="1"] {
  background: #6366f1;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35) inset;
}

.stage-seg.completed[data-stage-num="2"] {
  background: #8b5cf6;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.35) inset;
}

.stage-seg.completed[data-stage-num="3"] {
  background: #ec4899;
  box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.35) inset;
}

.stage-seg.completed[data-stage-num="4"] {
  background: #f59e0b;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35) inset;
}

.stage-seg.completed[data-stage-num="5"] {
  background: #10b981;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.35) inset;
}

.stage-seg.completed[data-stage-num="6"] {
  background: #06b6d4;
  box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.35) inset;
}

.stage-seg.completed[data-stage-num="7"] {
  background: #22c55e;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35) inset;
}

.stage-seg.completed {
  background: #00b5af;
}

.stage-seg.active[data-stage-num="1"] {
  background: linear-gradient(90deg, #6366f1, #818cf8);
}

.stage-seg.active[data-stage-num="2"] {
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.stage-seg.active[data-stage-num="3"] {
  background: linear-gradient(90deg, #ec4899, #f472b6);
}

.stage-seg.active[data-stage-num="4"] {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.stage-seg.active[data-stage-num="5"] {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.stage-seg.active[data-stage-num="6"] {
  background: linear-gradient(90deg, #06b6d4, #22d3ee);
}

.stage-seg.active[data-stage-num="7"] {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.stage-seg.active {
  background: var(--theme-color);
  animation: stagePulse 1.5s ease-in-out infinite;
}

/* Stage-number chip above each segment so users see "step 3 of 7"
   without having to count. The colour matches the segment colour. */
.stage-seg::before {
  content: attr(data-stage-num);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: 0;
}

body[data-mode="dark"] .stage-seg::before {
  color: rgba(255, 255, 255, 0.4);
}

.stage-seg.completed::before,
.stage-seg.active::before {
  color: #fff;
}

@keyframes stagePulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .5;
  }
}

.stage-label {
  font-size: 12px;
  color: var(--g1);
}

.stage-label b {
  color: var(--fg);
}

.proj-desc {
  font-size: 13px;
  color: var(--g2);
  line-height: 1.6;
  margin-top: 12px;
}

.proj-meta {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--g1);
}

/* Complaints/feedback form */
.comp-form {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 24px;
}

.comp-form select,
.comp-form input,
.comp-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--brd);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--fg);
  background: transparent;
  font-family: var(--f1);
  margin-top: 4px;
}

.comp-form select:focus,
.comp-form input:focus,
.comp-form textarea:focus {
  border-color: var(--theme-color);
  outline: none;
}

.comp-form textarea {
  min-height: 100px;
  resize: vertical;
}

.comp-item {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 10px;
}

.comp-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.comp-item-subj {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}

.comp-item-msg {
  font-size: 13px;
  color: var(--g2);
  line-height: 1.5;
}

.comp-item-resp {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(0, 181, 175, .05);
  border-radius: var(--r-sm);
  border-left: 3px solid #00b5af;
  font-size: 12px;
  color: var(--g2);
}

.comp-item-resp b {
  color: var(--fg);
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
}

/* Profile form */
.profile-form {
  max-width: 500px;
}

.profile-form .auth-field {
  margin-bottom: 16px;
}

/* Admin tables */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.admin-stat {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--r-lg);
  padding: 24px;
  text-align: center;
}

.admin-stat .n {
  font-size: 36px;
  font-weight: 800;
  color: var(--fg);
  line-height: 1;
}

.admin-stat .l {
  font-size: 11px;
  font-weight: 700;
  color: var(--g1);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 6px;
}

.admin-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--g1);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--brd);
}

[dir="rtl"] .admin-table th {
  text-align: right;
}

.admin-table td {
  padding: 12px;
  border-bottom: 1px solid var(--brd);
  color: var(--fg);
  vertical-align: middle;
}

.admin-table tr:hover td {
  background: rgba(var(--theme-color-rgb), .02);
}

.admin-table .act-btn {
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--brd);
  background: var(--card);
  color: var(--fg);
  transition: all .2s;
  margin-right: 4px;
}

.admin-table .act-btn:hover {
  border-color: var(--theme-color);
  color: var(--theme-color);
}

.admin-table .act-btn.danger:hover {
  border-color: #e53e3e;
  color: #e53e3e;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--g1);
}

.empty-state span {
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
  opacity: .4;
}

.empty-state p {
  font-size: 14px;
}

/* Removed duplicated lang-overlay */

/* ── Notification Badge ── */
.notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #e53e3e;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  margin-left: 8px;
  vertical-align: middle;
  animation: notifPulse 2s ease infinite;
}

@keyframes notifPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

/* ── Project Status Filters ── */
.proj-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.proj-filter-btn {
  padding: 7px 16px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 700;
  color: var(--g2);
  cursor: pointer;
  transition: all .25s var(--ease);
  border: 1px solid var(--brd);
  background: transparent;
  font-family: var(--f1);
}

.proj-filter-btn.act {
  background: var(--theme-color);
  color: #fff;
  border-color: var(--theme-color);
}

.proj-filter-btn:hover:not(.act) {
  border-color: var(--theme-color);
  color: var(--fg);
}

/* ── Standalone Action Buttons (outside tables) ── */
.act-btn {
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--brd);
  background: var(--card);
  color: var(--fg);
  transition: all .2s;
  font-family: var(--f1);
}

.act-btn:hover {
  border-color: var(--theme-color);
  color: var(--theme-color);
}

/* ── Pagination ── */
.pagination-wrap {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.pagination-wrap .page-btn {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--brd);
  background: var(--card);
  color: var(--fg);
  transition: all .2s;
}

.pagination-wrap .page-btn.act {
  background: var(--theme-color);
  color: #fff;
  border-color: var(--theme-color);
}

.pagination-wrap .page-btn:hover:not(.act) {
  border-color: var(--theme-color);
}

/* ── Proj badge for rejected status ── */
.proj-badge.rejected {
  background: rgba(229, 62, 62, .1);
  color: #c53030;
}

.proj-badge.new {
  background: rgba(246, 190, 0, .1);
  color: #b8860b;
}

.proj-badge.reviewed {
  background: rgba(84, 49, 117, .1);
  color: #543175;
}

.proj-badge.responded {
  background: rgba(0, 181, 175, .1);
  color: #00b5af;
}

.proj-badge.archived {
  background: rgba(0, 0, 0, .06);
  color: var(--g1);
}

.proj-badge.open {
  background: rgba(246, 190, 0, .1);
  color: #b8860b;
}

.proj-badge.resolved,
.proj-badge.closed {
  background: rgba(0, 181, 175, .15);
  color: #00897b;
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 14px 28px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 700;
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: all .4s var(--ease);
  box-shadow: var(--shadow-lg);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.success {
  background: #00b5af;
  color: #fff;
}

.toast.error {
  background: #e53e3e;
  color: #fff;
}

.toast.info {
  background: var(--fg);
  color: var(--card);
}

@media(max-width:768px) {
  .auth-wrap {
    padding: 40px 20px;
  }

  .dash-wrap {
    padding: 32px 16px;
  }

  .dash-tabs {
    flex-wrap: wrap;
  }

  .admin-stats {
    grid-template-columns: 1fr 1fr;
  }

  .proj-top {
    flex-direction: column;
  }
}

/* Refined Layout & Typography inside internal pages */
.m-win,
.ios-screen {
  --theme-color: #f6be00;
  --theme-color-rgb: 246, 190, 0;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.08);
  --brd: rgba(0, 0, 0, 0.05);
}

body[data-mode="dark"] .m-win,
body[data-mode="dark"] .ios-screen {
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.4);
  --brd: rgba(255, 255, 255, 0.05);
}

.m-win .h1,
.ios-screen .h1 {
  letter-spacing: -1.5px;
}

.m-win .h2,
.ios-screen .h2 {
  letter-spacing: -1px;
}

.m-win .h3,
.ios-screen .h3 {
  letter-spacing: -0.5px;
}

.m-win .pc,
.ios-screen .pc,
.m-win .crd,
.ios-screen .crd {
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.m-win .pc:hover,
.ios-screen .pc:hover,
.m-win .crd:hover,
.ios-screen .crd:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px) scale(1.01);
}

.m-win .btn-p,
.ios-screen .btn-p {
  box-shadow: 0 8px 24px rgba(var(--theme-color-rgb), 0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.m-win .btn-p:hover,
.ios-screen .btn-p:hover {
  box-shadow: 0 16px 40px rgba(var(--theme-color-rgb), 0.3);
  transform: scale(1.04);
}

/* FAQ Accordion */
.faq-item {
  margin-bottom: 16px;
  background: var(--card);
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  transition: box-shadow 0.3s var(--ease);
}

.faq-item:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

body[data-mode="dark"] .faq-item {
  background: var(--dm-card);
  border-color: var(--dm-brd);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 32px;
  background: none;
  border: none;
  cursor: pointer;
  gap: 16px;
  text-align: left;
}

[dir="rtl"] .faq-q {
  text-align: right;
}

.faq-q h3 {
  color: var(--theme-color);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  flex: 1;
  font-family: var(--f1);
}

.faq-q .faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--theme-color-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
  font-size: 14px;
  color: var(--theme-color);
  font-weight: 700;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--theme-color);
  color: #1a1a2e;
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease), padding 0.3s var(--ease);
  padding: 0 32px;
}

.faq-item.open .faq-a {
  max-height: 300px;
  padding: 0 32px 24px;
}

.faq-a p {
  font-size: 15px;
  color: var(--g2);
  line-height: 1.7;
  margin: 0;
}

/* Dark mode — contact hero phone images */
body[data-mode="dark"] .co-p1,
body[data-mode="dark"] .co-p2 {
  filter: brightness(0.7) saturate(0.8);
}

/* Terms page */
.terms-content {
  max-width: 800px;
  margin: 0 auto;
}

.terms-content h3 {
  color: var(--theme-color);
  font-size: 20px;
  margin: 32px 0 12px;
  font-weight: 700;
}

.terms-content p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--g2);
  margin-bottom: 16px;
}

.terms-content ul {
  padding-left: 24px;
  margin-bottom: 16px;
}

[dir="rtl"] .terms-content ul {
  padding-left: 0;
  padding-right: 24px;
}

.terms-content li {
  font-size: 14px;
  color: var(--g2);
  line-height: 1.7;
  margin-bottom: 6px;
}

/* Toast — always on top */
.toast {
  z-index: 2147483647;
}

/* Language Transition Curtain */
.lang-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--theme-color);
  display: none;
  align-items: center;
  justify-content: center;
  transform: translateX(100%);
  pointer-events: none;
}

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

.lang-overlay .logo-mark {
  font-size: 64px;
}

.lang-overlay .logo-8,
.lang-overlay .logo-paws {
  color: #fff;
}

.lang-overlay .logo-8::before {
  background: #fff;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       RESPONSIVE & DESIGN FIXES (Desktop Modals, Sub-pages)
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.m-close-btn {
  width: 40px !important;
  height: 40px !important;
  font-size: 16px !important;
}

.pg-modal {
  padding: 0;
}

.bento .crd {
  overflow: visible !important;
}

.bento .pc {
  overflow: hidden;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       TABLET FIXES
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
@media (min-width: 600px) and (max-width: 1024px) {
  .m-hero {
    height: 40vh !important;
    transform: translateY(-50px) !important;
  }

  .m-tagline {
    margin-top: 16px !important;
    font-size: 18px !important;
  }

  .i-cta {
    bottom: 80px !important;
  }

  .i-bar {
    bottom: 20px !important;
  }

  .m-orb-system {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
    justify-content: center !important;
    top: auto !important;
    bottom: 120px !important;
    left: 5% !important;
    right: 5% !important;
  }

  .m-fd {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       MOBILE FIXES (Sub-pages)
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
@media (max-width: 767px) {
  .ios-screen-bar {
    flex-direction: row-reverse !important;
  }

  [dir="rtl"] .ios-screen-bar {
    flex-direction: row !important;
  }

  .m-close-btn {
    margin-left: auto !important;
  }

  .co-hero {
    padding-bottom: 60px !important;
  }

  /* Global Inner Page Mobile Fixes */
  .ios-screen .pg {
    overflow-x: hidden;
  }

  .ios-screen .v-card,
  .ios-screen .st-card,
  .ios-screen .srv-card {
    padding: 24px 20px !important;
  }

  .ios-screen .port-card,
  .ios-screen .port-card.reverse {
    flex-direction: column !important;
  }

  .ios-screen .port-img-area {
    min-height: 200px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  body[data-mode="dark"] .ios-screen .port-img-area {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .ios-screen .port-content-area {
    padding: 24px 20px !important;
  }

  .ios-screen .port-stat {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .ios-screen .h2 {
    font-size: clamp(24px, 6vw, 32px) !important;
  }

  .ios-screen .h1,
  .ios-screen .co-title {
    font-size: clamp(32px, 8vw, 40px) !important;
  }

  .ios-screen .p1,
  .ios-screen .p-text,
  .ios-screen .p2 {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .ios-screen .abt-plus {
    font-size: 32px !important;
    margin-bottom: 16px !important;
  }

  .ios-screen .bento,
  .ios-screen .srv-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .ios-screen .co-f-shape,
  .ios-screen .abt-hero-glow,
  .ios-screen .svc-hero-glow {
    width: 100vw !important;
    height: 100vw !important;
    max-width: 400px !important;
    max-height: 400px !important;
  }

  .ios-screen .ios-screen-body {
    overflow-x: hidden !important;
  }

  .ios-screen img {
    max-width: 100%;
    height: auto;
  }

  /* Fix Arabic Inner Pages Typography */
  body[data-lang="ar"] .ios-screen * {
    letter-spacing: 0 !important;
  }

  body[data-lang="ar"] .ios-screen .p1,
  body[data-lang="ar"] .ios-screen .p2,
  body[data-lang="ar"] .ios-screen .p-text {
    line-height: 1.85 !important;
  }

  body[data-lang="ar"] .ios-screen .co-sub {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* RTL Justify for large text blocks to avoid ragged left edges */
[dir="rtl"] .p2,
[dir="rtl"] p,
[dir="rtl"] .port-content-area p,
[dir="rtl"] .blog-content p {
  text-align: justify !important;
  text-justify: inter-word;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       TOAST NOTIFICATIONS
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 14px 28px;
  border-radius: var(--r-md);
  font-family: var(--f1);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--g3);
  box-shadow: var(--shadow-lg);
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  white-space: nowrap;
  max-width: 90vw;
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.toast.success {
  background: #00b5af;
}

.toast.error {
  background: #e53e3e;
}

.toast.info {
  background: var(--g3);
}

body[data-mode="dark"] .toast {
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       AUTH FORMS (Login / Register)
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.auth-wrap {
  max-width: 440px;
  margin: 0 auto;
  padding: 60px 32px 48px;
  text-align: center;
}

.auth-logo {
  margin-bottom: 28px;
}

.auth-logo img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin: 0 auto;
  border-radius: var(--r-lg);
}

.auth-title {
  font-family: var(--f1);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--g3);
  margin-bottom: 8px;
}

.auth-sub {
  font-size: var(--fs-base);
  color: var(--g1);
  margin-bottom: 28px;
}

.auth-field {
  text-align: left;
  margin-bottom: 18px;
}

[dir="rtl"] .auth-field {
  text-align: right;
}

.auth-field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g2);
  margin-bottom: 6px;
  letter-spacing: .3px;
}

.auth-field input,
.auth-field textarea,
.auth-field select {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--brd);
  background: rgba(255, 255, 255, .6);
  font-size: var(--fs-base);
  font-family: var(--f1);
  color: var(--fg);
  transition: border-color .2s, box-shadow .2s;
}

.auth-field input:focus,
.auth-field textarea:focus,
.auth-field select:focus {
  border-color: var(--theme-color);
  box-shadow: 0 0 0 3px rgba(var(--theme-color-rgb), .1);
  outline: none;
}

.auth-field textarea {
  min-height: 100px;
  resize: vertical;
}

.auth-field select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23737373'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

[dir="rtl"] .auth-field select {
  background-position: left 12px center;
  padding-right: 16px;
  padding-left: 32px;
}

body[data-mode="dark"] .auth-field input,
body[data-mode="dark"] .auth-field textarea,
body[data-mode="dark"] .auth-field select {
  background: rgba(255, 255, 255, .05);
  border-color: var(--dm-brd);
  color: var(--dm-fg);
}

.field-error {
  font-size: var(--fs-xs);
  color: #e53e3e;
  margin-top: 4px;
  min-height: 16px;
}

.auth-msg {
  padding: 0;
  margin-bottom: 12px;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  transition: all .2s;
  min-height: 0;
}

.auth-msg.error {
  padding: 12px 16px;
  background: rgba(229, 62, 62, .08);
  color: #e53e3e;
  border: 1px solid rgba(229, 62, 62, .15);
}

.auth-msg.success {
  padding: 12px 16px;
  background: rgba(0, 181, 175, .08);
  color: #00b5af;
  border: 1px solid rgba(0, 181, 175, .15);
}

.auth-btn {
  display: block;
  width: 100%;
  padding: 15px 24px;
  border-radius: var(--r-md);
  background: var(--fg);
  color: var(--bg);
  font-family: var(--f1);
  font-size: var(--fs-base);
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
  margin-top: 8px;
}

.auth-btn:hover {
  opacity: .88;
}

.auth-btn:active {
  transform: scale(.98);
}

.auth-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

body[data-mode="dark"] .auth-btn {
  background: #fff;
  color: var(--dm-bg);
}

.auth-link {
  margin-top: 20px;
  font-size: var(--fs-sm);
  color: var(--g1);
}

.auth-link span,
[data-auth-switch] {
  color: var(--theme-color);
  cursor: pointer;
  font-weight: 600;
  transition: opacity .15s;
}

.auth-link span:hover,
[data-auth-switch]:hover {
  opacity: .7;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       DASHBOARD
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.dash-wrap {
  max-width: 840px;
  margin: 0 auto;
  padding: 40px 28px;
}

.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

.dash-hello {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--g3);
}

.dash-hello span {
  color: var(--theme-color);
}

.dash-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.dash-tab {
  padding: 10px 20px;
  border-radius: var(--r-full);
  font-family: var(--f1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g1);
  background: rgba(0, 0, 0, .04);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s;
}

.dash-tab.act,
.dash-tab:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: transparent;
}

body[data-mode="dark"] .dash-tab {
  background: rgba(255, 255, 255, .06);
  color: var(--dm-g1);
}

body[data-mode="dark"] .dash-tab.act,
body[data-mode="dark"] .dash-tab:hover {
  background: #fff;
  color: var(--dm-bg);
}

.dash-panel {
  display: none;
}

.dash-panel.act {
  display: block;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       PROJECT CARDS
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.proj-card {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
}

.proj-card:hover {
  box-shadow: var(--shadow-md);
}

body[data-mode="dark"] .proj-card {
  background: var(--dm-card);
  border-color: var(--dm-brd);
}

.proj-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.proj-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--g3);
  line-height: 1.3;
}

.proj-type {
  font-size: var(--fs-xs);
  color: var(--g1);
  margin-top: 4px;
}

.proj-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.proj-badge.pending {
  background: #fff3cd;
  color: #856404;
}

.proj-badge.in_progress {
  background: #d1ecf1;
  color: #0c5460;
}

.proj-badge.review {
  background: #e8daef;
  color: #6c3483;
}

.proj-badge.completed {
  background: #d4edda;
  color: #155724;
}

.proj-badge.rejected,
.proj-badge.cancelled {
  background: #f8d7da;
  color: #721c24;
}

.proj-badge.new {
  background: #cce5ff;
  color: #004085;
}

.proj-badge.responded {
  background: #d1ecf1;
  color: #0c5460;
}

.proj-badge.resolved {
  background: #d4edda;
  color: #155724;
}

.proj-badge.archived {
  background: rgba(0, 0, 0, .06);
  color: var(--g1);
}

.proj-badge.reviewed {
  background: #e8daef;
  color: #6c3483;
}

.proj-badge.open {
  background: #fff3cd;
  color: #856404;
}

body[data-mode="dark"] .proj-badge.pending {
  background: rgba(255, 243, 205, .15);
}

body[data-mode="dark"] .proj-badge.in_progress {
  background: rgba(209, 236, 241, .12);
}

body[data-mode="dark"] .proj-badge.completed {
  background: rgba(212, 237, 218, .12);
}

body[data-mode="dark"] .proj-badge.rejected {
  background: rgba(248, 215, 218, .12);
}

.proj-desc {
  font-size: var(--fs-sm);
  color: var(--g1);
  line-height: 1.6;
  margin-bottom: 12px;
}

.proj-meta {
  display: flex;
  gap: 16px;
  font-size: var(--fs-xs);
  color: var(--g1);
  flex-wrap: wrap;
}

/* Stage progress bar */
.stage-bar {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
}

.stage-seg {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .06);
  transition: background .3s;
}

.stage-seg.completed {
  background: var(--c1);
}

.stage-seg.active {
  background: var(--theme-color);
}

.stage-seg.pending {
  background: rgba(0, 0, 0, .06);
}

body[data-mode="dark"] .stage-seg {
  background: rgba(255, 255, 255, .08);
}

.stage-label {
  font-size: var(--fs-xs);
  color: var(--g1);
  margin-bottom: 12px;
}

/* Action buttons inside cards */
.act-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-family: var(--f1);
  font-size: var(--fs-2xs);
  font-weight: 600;
  background: rgba(0, 0, 0, .05);
  color: var(--g2);
  border: 1px solid var(--brd);
  cursor: pointer;
  transition: all .15s;
}

.act-btn:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: transparent;
}

body[data-mode="dark"] .act-btn {
  background: rgba(255, 255, 255, .06);
  color: var(--dm-g2);
  border-color: var(--dm-brd);
}

body[data-mode="dark"] .act-btn:hover {
  background: #fff;
  color: var(--dm-bg);
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       COMPLAINT / FEEDBACK ITEMS
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.comp-form {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

body[data-mode="dark"] .comp-form {
  background: var(--dm-card);
  border-color: var(--dm-brd);
}

.comp-item {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: box-shadow .2s;
}

.comp-item:hover {
  box-shadow: var(--shadow-sm);
}

body[data-mode="dark"] .comp-item {
  background: var(--dm-card);
  border-color: var(--dm-brd);
}

.comp-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.comp-item-subj {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--g3);
}

.comp-item-msg {
  font-size: var(--fs-sm);
  color: var(--g1);
  line-height: 1.6;
}

.comp-item-resp {
  margin-top: 10px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: rgba(0, 181, 175, .06);
  border-left: 3px solid var(--c1);
  font-size: var(--fs-sm);
  color: var(--g2);
  line-height: 1.5;
}

[dir="rtl"] .comp-item-resp {
  border-left: none;
  border-right: 3px solid var(--c1);
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       ADMIN STATS
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
#adminStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.admin-stat {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--r-md);
  padding: 20px 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.admin-stat .n {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--theme-color);
  line-height: 1;
  margin-bottom: 6px;
}

.admin-stat .l {
  font-size: var(--fs-xs);
  color: var(--g1);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}

body[data-mode="dark"] .admin-stat {
  background: var(--dm-card);
  border-color: var(--dm-brd);
}

/* Admin tables */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin-bottom: 24px;
}

.admin-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 700;
  color: var(--g2);
  border-bottom: 2px solid var(--brd);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
}

[dir="rtl"] .admin-table th {
  text-align: right;
}

.admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--brd);
  color: var(--g3);
}

.admin-table tr:hover td {
  background: rgba(0, 0, 0, .02);
}

body[data-mode="dark"] .admin-table tr:hover td {
  background: rgba(255, 255, 255, .03);
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       EMPTY STATE
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--g1);
}

.empty-state span {
  display: block;
  font-size: 40px;
  margin-bottom: 12px;
}

.empty-state p {
  font-size: var(--fs-base);
  text-align: center !important;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       FAQ ACCORDION
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid var(--brd);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--card);
  transition: box-shadow .2s;
}

.faq-item:hover {
  box-shadow: var(--shadow-sm);
}

body[data-mode="dark"] .faq-item {
  background: var(--dm-card);
  border-color: var(--dm-brd);
}

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 24px;
  font-family: var(--f1);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--g3);
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  gap: 12px;
}

[dir="rtl"] .faq-q {
  text-align: right;
}



.faq-item.open .faq-q::after {
  transform: rotate(45deg);
  color: var(--theme-color);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease), padding .35s var(--ease);
  padding: 0 24px;
}

.faq-item.open .faq-a {
  max-height: 600px;
  padding: 0 24px 20px;
}

.faq-a p {
  font-size: var(--fs-sm);
  color: var(--g1);
  line-height: 1.7;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       PROFILE FORM
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.profile-form {
  max-width: 480px;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       MOBILE AUTH STYLES (iOS screens)
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.ios-screen .auth-wrap {
  padding: 40px 24px 32px;
}

.ios-screen .pg-contact {
  background: #f6be00;
}

body[data-mode="dark"] .ios-screen .pg-contact {
  background: var(--dm-bg);
}

.ios-screen .auth-btn {
  background: #111;
  color: #f6be00;
}

body[data-mode="dark"] .ios-screen .auth-btn {
  background: #fff;
  color: var(--dm-bg);
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       RESPONSIVE AUTH & DASHBOARD
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
@media (max-width: 768px) {
  .dash-wrap {
    padding: 24px 16px;
  }

  .dash-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .dash-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .dash-tabs::-webkit-scrollbar {
    display: none;
  }

  .dash-tab {
    white-space: nowrap;
  }

  .proj-top {
    flex-direction: column;
  }

  .proj-meta {
    flex-direction: column;
    gap: 6px;
  }

  .admin-table {
    font-size: var(--fs-xs);
  }

  .admin-table th,
  .admin-table td {
    padding: 8px 6px;
  }

  #adminStats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       LANGUAGE SWITCH OVERLAY
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.lang-overlay {
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: #0a0a14;
  background-image:
    radial-gradient(120% 60% at 100% 0%, rgba(0, 191, 165, 0.10) 0%, transparent 55%),
    radial-gradient(80% 50% at 0% 100%, rgba(242, 121, 191, 0.08) 0%, transparent 60%);
  display: none;
  align-items: center;
  justify-content: center;
  will-change: transform;
  color: #ffffff;
}

.lang-overlay .logo-mark img {
  height: 64px;
  object-fit: contain;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       TERMS & POLICIES CONTENT
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.terms-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 28px;
}

.terms-content h2 {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--g3);
  margin-bottom: 16px;
  margin-top: 40px;
}

.terms-content h2:first-child {
  margin-top: 0;
}

.terms-content h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--g3);
  margin-bottom: 12px;
  margin-top: 28px;
}

.terms-content p {
  font-size: var(--fs-base);
  color: var(--g1);
  line-height: 1.75;
  margin-bottom: 14px;
}

.terms-content ul {
  padding-left: 24px;
  margin-bottom: 16px;
}

[dir="rtl"] .terms-content ul {
  padding-left: 0;
  padding-right: 24px;
}

.terms-content ul li {
  font-size: var(--fs-sm);
  color: var(--g1);
  line-height: 1.7;
  margin-bottom: 6px;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       MOP.PNG PREMIUM DESIGN SYSTEM (Internal & Side Pages)
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
:root {
  --mop-purple: #120831;
  --mop-teal: #40c8f0;
  --mop-radius-card: 16px;
  --mop-radius-pill: 50px;
  --mop-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.mop-popup-container {
  /* NOTE: dark-theme overrides for this container live in the
     "INTERNAL / FOLDER PAGES — UNIVERSAL DARK THEME" block at the bottom
     of this file. Folder popups & WP internal pages are forced dark. */
  min-height: 100%;
  width: 100%;
  font-family: var(--f-ar);
  overflow-x: hidden;
}

.mop-hero {
  background: #000000;
  padding: 9px 24px 60px;
  text-align: center;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
}

.mop-hero-title {
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 16px;
}

.mop-hero-sub {
  font-size: clamp(15px, 4vw, 18px);
  line-height: 1.7;
  opacity: 0.85;
  max-width: 600px;
  margin: 0 auto;
}

.mop-section {
  padding: 14px 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.mop-card {
  background: var(--card);
  border-radius: var(--mop-radius-card);
  padding: 32px 24px;
  box-shadow: var(--mop-shadow);
  border: 1px solid var(--brd);
  margin-bottom: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.mop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.mop-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mop-teal);
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  padding: 16px 36px;
  border-radius: var(--mop-radius-pill);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 191, 165, 0.25);
}

.mop-btn-pill:hover {
  transform: translateY(-2px);
  background: #00a892;
  box-shadow: 0 12px 32px rgba(0, 191, 165, 0.35);
  color: #ffffff;
}

.mop-input {
  width: 100%;
  box-sizing: border-box;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 15px;
  color: #111827;
  transition: all 0.3s ease;
}

.mop-input:focus {
  border-color: var(--mop-teal);
  box-shadow: 0 0 0 4px rgba(0, 191, 165, 0.15);
  outline: none;
  background: #ffffff;
}

.mop-step-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.mop-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mop-purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

.mop-step-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--g2);
}

.mop-text-teal {
  color: var(--mop-teal);
}

.mop-text-purple {
  color: var(--mop-purple);
}

/* Desktop Homepage matching Mobile Colors */
#mac {
  background: #000000 !important;
}

#mac .mac-env::before {
  display: none !important;
}

#mac .tf-corner-bl,
#mac .tf-corner-br,
#mac .tf-sayhi,
#mac .tf-email {
  color: #ffffff !important;
}

#mac .m-fd span {
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.4) !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.home .hamburger .hb {
  background: #ffffff !important;
}

#mac .m-dock .m-di {
  color: #fff !important;
  background: rgb(86 77 77 / 85%) !important;
}

#mac .m-dock .m-di.on::after {
  background: #fff !important;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       INTERNAL / FOLDER PAGES — UNIVERSAL DARK THEME
       Applies to:
         • Folder popups on the homepage (About, Services, Portfolio, Contact)
         • Standard WP pages & posts (page.php / single.php)
       Scoping: directly on `.mop-popup-container`, regardless of the body's
       data-mode, so the popups stay dark even when the OS desktop UI is light.
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */

/* 1) Override the design-system variables inside the container so every
      helper class (.h1/.h2/.h3, .p1/.p2, .lb, .btn-p, .crd, …) that uses
      var(--fg | --g1 | --g2 | --g3 | --card | --bg | --brd) is auto-dark. */
.mop-popup-container {
  --bg: #000000;
  --fg: #f4f4fa;
  --card: #141414;
  --g1: #b8b8c8;
  --g2: #9696aa;
  --g3: #e0e0ec;
  --brd: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.65);

  background: #000000 !important;
  color: var(--fg);
}

/* When body is already dark (page.php/single.php), keep the global dark bg
   visible behind the container too. */
body[data-mode="dark"] {
  background: var(--dm-bg);
}

/* 2) HERO — flat solid black */
.mop-popup-container .mop-hero {
  background: linear-gradient(160deg, #000000 0%, #0c0b0b 55%, #000000 100%) !important;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
}

.mop-popup-container .mop-hero::before {
  content: none;
}

.mop-popup-container .mop-hero>* {
  position: relative;
  z-index: 1;
}

.mop-popup-container .mop-hero-title {
  color: #ffffff;
}

.mop-popup-container .mop-hero-sub {
  color: rgba(255, 255, 255, 0.78);
}

/* 3) CARDS — deep navy panels with teal glow on hover */
.mop-popup-container .mop-card,
.mop-popup-container .crd {
  background: var(--card);
  border: 1px solid var(--brd);
  color: var(--fg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.mop-popup-container .mop-card:hover,
.mop-popup-container .crd:hover {
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 191, 165, 0.25);
  border-color: rgba(0, 191, 165, 0.28);
}

/* 4) the_content() typography inside .mop-card (page.php / single.php) */
.mop-popup-container .mop-card,
.mop-popup-container .mop-card p,
.mop-popup-container .mop-card li,
.mop-popup-container .mop-card span,
.mop-popup-container .mop-card blockquote {
  color: var(--fg);
}

.mop-popup-container .mop-card h1,
.mop-popup-container .mop-card h2,
.mop-popup-container .mop-card h3,
.mop-popup-container .mop-card h4,
.mop-popup-container .mop-card h5,
.mop-popup-container .mop-card h6 {
  color: #ffffff;
}

.mop-popup-container .mop-card a {
  color: var(--mop-teal);
}

.mop-popup-container .mop-card a:hover {
  color: #4dd9c5;
}

.mop-popup-container .mop-card hr {
  border-color: rgba(255, 255, 255, 0.08);
}

.mop-popup-container .mop-card code,
.mop-popup-container .mop-card pre {
  background: rgba(255, 255, 255, 0.05);
  color: #f0f0f0;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.mop-popup-container .mop-card blockquote {
  border-inline-start: 3px solid var(--mop-teal);
  background: rgba(0, 191, 165, 0.06);
  color: rgba(255, 255, 255, 0.85);
}

/* 5) Helper classes used by folder popups (.h1/.h2/.h3, .p1/.p2, .lb)
      already pick up the dark vars above, but we tighten contrast here. */
.mop-popup-container .h1,
.mop-popup-container .h2,
.mop-popup-container .h3,
.mop-popup-container h1.mop-hero-title {
  color: #ffffff;
}

.mop-popup-container .p1,
.mop-popup-container .p2 {
  color: var(--g1);
}

.mop-popup-container .lb {
  color: var(--mop-teal);
}

/* Inline `style="color: var(--g2);"` paragraphs inside popups stay readable
   because we redefined --g2 above. No rule needed. */

/* 6) Buttons */
.mop-popup-container .btn-p {
  background: var(--mop-teal);
  color: #061a17;
  box-shadow: 0 8px 24px rgba(var(--theme-color-rgb), 0.35);
}

.mop-popup-container .btn-p:hover {
  background: var(--mop-teal);
  filter: brightness(1.08);
  box-shadow: 0 14px 36px rgba(var(--theme-color-rgb), 0.5);
}

.mop-popup-container .btn-s {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 700;
  padding: 14px 32px;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--fg);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: all .3s var(--ease);
}

.mop-popup-container .btn-s:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--mop-teal);
  color: var(--mop-teal);
}

.mop-popup-container .mop-btn-pill {
  box-shadow: 0 8px 24px rgba(var(--theme-color-rgb), 0.35);
  margin-top: 20px;
}

.mop-popup-container .mop-btn-pill:hover {
  background: var(--mop-teal);
  filter: brightness(1.08);
  box-shadow: 0 14px 36px rgba(var(--theme-color-rgb), 0.5);
}

/* 7) Form inputs */
.mop-popup-container .mop-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f0f0f0;
}

.mop-popup-container .mop-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.mop-popup-container .mop-input:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--mop-teal);
  box-shadow: 0 0 0 4px rgba(0, 191, 165, 0.18);
}

.mop-popup-container .mop-input option {
  background: var(--card);
  color: #f0f0f0;
}

.mop-popup-container .mop-card label {
  color: var(--g3);
  padding-bottom: 14px;
}

/* 8) Step indicator */
.mop-popup-container .mop-step-circle {
  background: var(--mop-teal);
  color: #061a17;
  box-shadow: 0 0 0 4px rgba(0, 191, 165, 0.15);
}

.mop-popup-container .mop-step-text {
  color: rgba(255, 255, 255, 0.85);
}

.mop-popup-container .mop-step-text--active {
  color: var(--mop-teal);
}

.mop-popup-container .mop-step-sep {
  background: rgba(255, 255, 255, 0.14);
}

.mop-popup-container .mop-step-circle--inactive {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.5);
}

/* Default (light-mode) step indicator pieces — unchanged from before. */
.mop-step-sep {
  width: 40px;
  height: 2px;
  background: rgba(0, 0, 0, 0.1);
}

.mop-step-text--active {
  color: var(--mop-purple);
}

.mop-step-circle--inactive {
  background: transparent;
  border: 2px solid var(--g2);
  color: var(--g2);
}

/* 9) Folder-popup-only utilities (about / services / portfolio / contact) */
.mop-popup-container .v-icon {
  color: #fff;
  background: #f279bf;
  box-shadow: 0 8px 24px rgba(0, 191, 165, 0.12);
}

.mop-popup-container .abt-plus {
  color: var(--mop-teal);
}

.mop-popup-container .mop-text-teal {
  color: var(--mop-teal);
}

.mop-popup-container .mop-text-purple {
  color: var(--mop-teal);
}

/* Partners strip: the template `<style>` inverts the logos when body[data-mode="light"];
   inside our forced-dark container we need them un-inverted. Higher specificity wins. */
body .mop-popup-container .partners-strip,
.mop-popup-container .partners-strip {
  filter: grayscale(100%);
}

body .mop-popup-container .partners-strip:hover,
.mop-popup-container .partners-strip:hover {
  filter: grayscale(0%);
}

/* Stat strip (.strip / .strip .n / .strip .l) */
.mop-popup-container .strip {
  background: rgba(0, 191, 165, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.mop-popup-container .strip .n {
  color: var(--mop-teal);
}

.mop-popup-container .strip .l {
  color: var(--g1);
}

/* Banner gradient picks up the local --theme-color (per-folder override). */
.mop-popup-container .bnr {
  background: linear-gradient(135deg, var(--c4), var(--theme-color));
  box-shadow: 0 12px 32px rgba(var(--theme-color-rgb), 0.18);
}

/* "Dark accent block" already uses #543175 — bump it to richer purple */
.mop-popup-container .dk {
  background: linear-gradient(135deg, #2a1450 0%, #543175 100%);
}

/* Service rows (.sv) used in some popups */
.mop-popup-container .sv {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* Underline accent (.ua) */
.mop-popup-container .ua::after {
  background: var(--mop-teal);
}

/* 10) Pretty scrollbar inside the dark popups */
.mop-popup-container::-webkit-scrollbar {
  width: 6px;
}

.mop-popup-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}

.mop-popup-container::-webkit-scrollbar-thumb {
  background: rgba(0, 191, 165, 0.25);
  border-radius: 3px;
}

.mop-popup-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 191, 165, 0.4);
}

/* 11) Selection inside popups uses the teal accent */
.mop-popup-container ::selection {
  background: rgba(0, 191, 165, 0.35);
  color: #ffffff;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       DESKTOP HOME — MATCH MOBILE FOLDER COLORS + MOBILE GIRL GLOW
       The desktop home (#mac, ≥769px) previously rendered every folder
       in a single pink filter and the mascot in a purple glow. Mobile
       uses per-folder hue-rotates and a tight white outline glow on the
       character. These overrides bring desktop into 1:1 visual parity
       with mobile.
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
@media (min-width: 769px) {

  /* — Folders ————————————————————————————————————
     folder2.png is a hot-pink folder. Mobile leaves "pink" untouched
     and rotates only the other three. We mirror that here, scoped by
     each folder's data-w attribute (higher specificity than the generic
     .m-fd img rule above so this wins). */
  /* Folder tints — EXACT hex via SVG feFlood filters defined in header.php.
     The tint produces a perfectly uniform fill at the requested hex; the
     CSS drop-shadow appended in the chain adds depth. */
  #mac .m-fd[data-w="about"] img {
    /* About / ظ…ظ† ظ†ط­ظ† — #f279bf */
    filter: url(#c-folder-about) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
  }

  #mac .m-fd[data-w="services"] img {
    /* Services / ط®ط¯ظ…ط§طھظ†ط§ — #41C8EF */
    filter: url(#c-folder-services) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
  }

  #mac .m-fd[data-w="portfolio"] img {
    /* Portfolio / ط£ط¹ظ…ط§ظ„ظ†ط§ — #FD9F43 */
    filter: url(#c-folder-portfolio) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
  }

  #mac .m-fd[data-w="contact"] img {
    /* Contact / طھظˆط§طµظ„ ظ…ط¹ظ†ط§ — #69C255 */
    filter: url(#c-folder-contact) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
  }

  /* Dark-mode versions — same hex, deeper shadow on the dark backdrop */
  body[data-mode="dark"] #mac .m-fd[data-w="about"] img {
    filter: url(#c-folder-about) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
  }

  body[data-mode="dark"] #mac .m-fd[data-w="services"] img {
    filter: url(#c-folder-services) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
  }

  body[data-mode="dark"] #mac .m-fd[data-w="portfolio"] img {
    filter: url(#c-folder-portfolio) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
  }

  body[data-mode="dark"] #mac .m-fd[data-w="contact"] img {
    filter: url(#c-folder-contact) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
  }

  /* — Mascot / girl glow ———————————————————————————
     Mobile (.p-char-img) uses a layered white drop-shadow stack to
     create a tight luminous outline. Replicate exactly on desktop. */
  #mac .m-hero {
    /* Drop the previous purple drop-shadow stack */
    filter: none;
  }

  /* Sticker outline — single SVG `feMorphology` filter dilates the alpha
     by 3px and fills it with white, producing the die-cut sticker border
     in ONE GPU pass. Pair it with a small drop-shadow for the "lift" off
     the screen. This replaced a 12-layer drop-shadow stack that was
     killing FPS while .m-hero animates (floatHero). */
  #mac .m-hero img {
    filter:
      url(#sticker-outline) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
  }

  /* — Hamburger button on the homepage ——————————————
     Mobile uses a flat SVG (3 equal white strokes, no background);
     desktop's default is a 50أ—50 yellow rounded square with a mismatched
     middle bar. Override on .home to match mobile's clean look. */
  body.home .hamburger {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 44px;
    height: 44px;
    border-radius: 0;
    gap: 5px;
  }

  body.home .hamburger:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px;
    box-shadow: none !important;
    transform: scale(1.05);
  }

  body[data-mode="dark"].home .hamburger:hover {
    background: rgba(255, 255, 255, 0.10) !important;
  }

  /* Three equal-length white strokes — mirrors the mobile SVG path */
  body.home .hamburger .hb,
  body.home .hamburger .hb:nth-child(2) {
    display: block;
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
  }

  body.home .hamburger:hover .hb:nth-child(2) {
    width: 22px;
  }

  /* Open state: keep the clean strokes (no yellow circle), just animate
     the bars into an X — same minimal feel as the closed state. */
  body.home .hamburger.open {
    background: transparent !important;
    border-radius: 0;
    box-shadow: none !important;
    transform: rotate(0deg);
  }

  body.home .hamburger.open .hb {
    background: #ffffff !important;
  }

  body.home .hamburger.open .hb:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.home .hamburger.open .hb:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  body.home .hamburger.open .hb:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   SEARCH OVERLAY — Neutralize the desktop yellow theme color
   so the search icon, input, and suggestion hovers stay neutral.
   â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
.search-overlay .search-input-wrap i,
.search-overlay .search-input-wrap svg,
.search-overlay .search-input-wrap [class*="ph-"] {
  color: var(--g1) !important;
}

body[data-mode="dark"] .search-overlay .search-input-wrap i,
body[data-mode="dark"] .search-overlay .search-input-wrap svg,
body[data-mode="dark"] .search-overlay .search-input-wrap [class*="ph-"] {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Caret in the search input — neutral, not yellow */
.search-overlay .search-input {
  caret-color: var(--fg);
}

/* Kill the global yellow focus outline on the search input + box */
.search-overlay .search-input:focus,
.search-overlay .search-input:focus-visible,
.search-overlay .search-box:focus-within,
.search-overlay *:focus,
.search-overlay *:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

/* Suggestion chip hover — neutral white/gray accent instead of theme yellow */
.search-overlay .search-hint:hover {
  color: var(--fg);
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

body[data-mode="dark"] .search-overlay .search-hint:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   RTL ALIGNMENT FIXES — Inner pages (About, Contact)
   Override inline `text-align:left` and missing centering
   on bare elements inside the popup pages.
   â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */

/* Contact hero — single column, centered text in AR */
[dir="rtl"] #mw-contact .co-hero-sc,
[dir="rtl"] #is-contact .co-hero-sc,
[dir="rtl"] .pg-modal .co-hero-sc {
  grid-template-columns: 1fr !important;
  text-align: center !important;
}

[dir="rtl"] #mw-contact .co-hero-sc>*,
[dir="rtl"] #is-contact .co-hero-sc>*,
[dir="rtl"] .pg-modal .co-hero-sc>.co-hero-txt {
  text-align: center !important;
  max-width: 900px;
  margin: 0 auto !important;
}

[dir="rtl"] #mw-contact .co-hero-sc .mop-hero-title,
[dir="rtl"] #is-contact .co-hero-sc .mop-hero-title,
[dir="rtl"] #mw-contact .co-hero-sc .mop-hero-sub,
[dir="rtl"] #is-contact .co-hero-sc .mop-hero-sub {
  text-align: center !important;
}

/* Contact hero phones image — center it under the text in AR */
[dir="rtl"] #mw-contact .co-hero-img,
[dir="rtl"] #is-contact .co-hero-img,
[dir="rtl"] .pg-modal .co-hero-sc .co-hero-img {
  margin: 32px auto 0 !important;
  display: flex;
  justify-content: center;
  max-width: 600px;
}

[dir="rtl"] #mw-contact .co-hero-img .co-phones,
[dir="rtl"] #is-contact .co-hero-img .co-phones {
  margin: 0 auto;
}

/* About page — Vision / Mission / Core Values cards: right-aligned text in AR */
[dir="rtl"] #mw-about .mop-card,
[dir="rtl"] #is-about .mop-card {
  text-align: right !important;
}

/* Stats cards inside About stay centered (number + label) */
[dir="rtl"] #mw-about .bento .rv>.mop-card[style*="text-align: center"],
[dir="rtl"] #is-about .bento .rv>.mop-card[style*="text-align: center"] {
  text-align: center !important;
}

/* About card icons: align to the right edge (instead of left) in AR */
[dir="rtl"] #mw-about .mop-card .v-icon,
[dir="rtl"] #is-about .mop-card .v-icon {
  margin-left: auto;
  margin-right: 0;
}

/* Contact FAQ list — ensure right-alignment beats inline text-align:left */
[dir="rtl"] #mw-contact .faq-list,
[dir="rtl"] #is-contact .faq-list,
[dir="rtl"] .pg-modal .faq-list {
  text-align: right !important;
}

/* Contact info row at the bottom — direction & alignment in AR */
[dir="rtl"] .contact-info>div {
  text-align: right;
}

/* Form fields with Arabic labels — RTL input direction */
[dir="rtl"] .co-in:not([dir="ltr"]) {
  direction: rtl;
  text-align: right;
}

/* Portfolio + Services case content text — right-aligned in AR */
[dir="rtl"] #mw-portfolio .port-content-area,
[dir="rtl"] #is-portfolio .port-content-area,
[dir="rtl"] #mw-services .mop-card,
[dir="rtl"] #is-services .mop-card {
  text-align: right !important;
}

/* Letter-spacing kills Arabic ligatures on bare inline-styled elements
   inside the popup pages — force letter-spacing:0 on EVERYTHING within. */
[dir="rtl"] .mop-popup-container,
[dir="rtl"] .mop-popup-container * {
  letter-spacing: 0 !important;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   Standard Pages (page.php) RTL Alignment Fixes
   â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
[dir="rtl"] .mop-popup-container .mop-hero,
[dir="rtl"] .mop-popup-container .co-hero-sc {
  text-align: center !important;
}

[dir="rtl"] .mop-popup-container .co-hero-sc>.co-hero-txt,
[dir="rtl"] .mop-popup-container .mop-hero-title,
[dir="rtl"] .mop-popup-container .mop-hero-sub {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

[dir="rtl"] .mop-popup-container .mop-card {
  text-align: right !important;
  direction: rtl;
}

[dir="rtl"] .mop-popup-container .mop-card p:not(.has-text-align-center):not([style*="text-align: center"]):not([style*="text-align:center"]),
[dir="rtl"] .mop-popup-container .mop-card h1:not(.has-text-align-center):not([style*="text-align: center"]):not([style*="text-align:center"]),
[dir="rtl"] .mop-popup-container .mop-card h2:not(.has-text-align-center):not([style*="text-align: center"]):not([style*="text-align:center"]),
[dir="rtl"] .mop-popup-container .mop-card h3:not(.has-text-align-center):not([style*="text-align: center"]):not([style*="text-align:center"]),
[dir="rtl"] .mop-popup-container .mop-card h4:not(.has-text-align-center):not([style*="text-align: center"]):not([style*="text-align:center"]),
[dir="rtl"] .mop-popup-container .mop-card h5:not(.has-text-align-center):not([style*="text-align: center"]):not([style*="text-align:center"]),
[dir="rtl"] .mop-popup-container .mop-card h6:not(.has-text-align-center):not([style*="text-align: center"]):not([style*="text-align:center"]),
[dir="rtl"] .mop-popup-container .mop-card ul:not(.has-text-align-center):not([style*="text-align: center"]):not([style*="text-align:center"]),
[dir="rtl"] .mop-popup-container .mop-card ol:not(.has-text-align-center):not([style*="text-align: center"]):not([style*="text-align:center"]),
[dir="rtl"] .mop-popup-container .mop-card li:not(.has-text-align-center):not([style*="text-align: center"]):not([style*="text-align:center"]),
[dir="rtl"] .mop-popup-container .mop-card div:not(.has-text-align-center):not([style*="text-align: center"]):not([style*="text-align:center"]) {
  text-align: right !important;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   Global RTL Overrides for Popups (Inner Pages)
   â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
/* Center Hero texts specifically in RTL */
[dir="rtl"] .mop-popup-container .mop-hero .lb,
[dir="rtl"] .mop-popup-container .mop-hero .mop-hero-title,
[dir="rtl"] .mop-popup-container .mop-hero .mop-hero-sub,
[dir="rtl"] .mop-popup-container .co-hero-sc .lb {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
}

/* Fix section headers that are intentionally centered */
[dir="rtl"] .mop-popup-container [style*="text-align: center"]>.lb,
[dir="rtl"] .mop-popup-container [style*="text-align:center"]>.lb,
[dir="rtl"] .mop-popup-container [style*="text-align: center"]>.h2,
[dir="rtl"] .mop-popup-container [style*="text-align:center"]>.h2,
[dir="rtl"] .mop-popup-container [style*="text-align: center"]>p,
[dir="rtl"] .mop-popup-container [style*="text-align:center"]>p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure the Portfolio category label is right-aligned */
[dir="rtl"] .port-content-area .lb {
  text-align: right !important;
}

/* Ensure Values Cards (.bento .mop-card) align their contents properly */
[dir="rtl"] .mop-popup-container .bento .mop-card {
  align-items: flex-start !important;
  text-align: right !important;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   Mobile RTL Overrides for Popups (Inner Pages)
   â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
@media (max-width: 900px) {

  /* Make Services buttons full width on mobile */
  [dir="rtl"] .svc-showcase-card .btn-p,
  [dir="rtl"] .svc-showcase-card .btn-s {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   UNIFIED HOVER COLOR — #fec949
   Every button and box uses the same yellow accent on hover.
   â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */

/* Buttons (filled) — solid yellow background, dark text, yellow glow */
.btn-p:hover,
.btn-s:hover,
.btn-co:hover,
.auth-btn:hover,
.mop-btn-pill:hover,
.nav-icon-btn:hover,
.nav-lang:hover,
.hamburger:hover,
.m-close-btn:hover,
.tf-util-btn:hover,
.search-close:hover {
  background: #fec949 !important;
  border-color: #fec949 !important;
  color: #111111 !important;
  box-shadow: 0 12px 32px rgba(254, 201, 73, 0.35) !important;
}

/* Nav rows, search hints, tabs — yellow background fill */
.nav-item:hover,
.nav-search-btn:hover,
.nav-login-btn:hover,
.search-hint:hover,
.dash-tab:hover,
.svc-tab:hover,
.blog-btn:hover,
.co-tab:hover {
  background: #fec949 !important;
  border-color: #fec949 !important;
  color: #111111 !important;
}

/* Icon chips inside hovered nav rows — invert to dark on yellow */
.nav-item:hover .nav-item-i,
.nav-search-btn:hover .nav-search-shortcut {
  background: #111111 !important;
  color: #fec949 !important;
}

/* Cards / boxes — yellow border accent + soft yellow glow */
.crd:hover,
.crd-hover:hover,
.bc:hover,
.pc:hover,
.mop-card:hover,
.mop-popup-container .mop-card:hover,
.mop-popup-container .crd:hover {
  border-color: #fec949 !important;
  box-shadow: 0 16px 40px rgba(254, 201, 73, 0.25), 0 0 0 1px rgba(254, 201, 73, 0.35) !important;
}

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   PER-FOLDER THEME COLOR
   Each homepage folder window inherits its folder's color
   as the local --theme-color (and --theme-color-rgb), so all
   accents inside the opened folder match the folder itself.
   --mop-teal is also remapped so the .mop-popup-container
   secondary accent (labels, CTA buttons) follows the folder.
   Scope is the window/screen container, so dock + other
   homepage chrome stay on the global brand color.
   â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
#mw-about,
#is-about {
  --theme-color: #F279BF;
  --theme-color-rgb: 242, 121, 191;
  --mop-teal: #F279BF;
}

#mw-services,
#is-services {
  --theme-color: #41C8EF;
  --theme-color-rgb: 65, 200, 239;
  --mop-teal: #41C8EF;
}

#mw-portfolio,
#is-portfolio {
  --theme-color: #FD9F43;
  --theme-color-rgb: 253, 159, 67;
  --mop-teal: #FD9F43;
}

#mw-contact,
#is-contact {
  --theme-color: #69C255;
  --theme-color-rgb: 105, 194, 85;
  --mop-teal: #69C255;
}

/* ────────────────────────────────────────────────────────────
   USER REQUESTED ADJUSTMENTS — desktop refinements
   - Unify homepage folder sizes & shrink label font
   - Smaller menu logo
   - Per-folder hover tint for menu nav items
   - About page: shrink value-icons and stat numbers
   - Country code picker styling for contact form
   - Notification per-item "Mark read" action styling
   - WhatsApp CTA on approved/in-progress project cards
   ──────────────────────────────────────────────────────────── */
@media (min-width: 769px) {

  /* All homepage folders identical size — overrides inline --orb-s */
  #mac .m-orb-system .m-fd {
    --orb-s: 1 !important;
  }

  /* Slightly smaller folder label text */
  #mac .m-fd span {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* Slightly smaller nav drawer logo */
  .nav-drawer .nav-logo-img {
    height: 23px;
  }
}

/* Per-page hover colors on the menu — match the homepage folder palette */
.nav-item[data-nav="about"]:hover {
  background: rgba(242, 121, 191, 0.18) !important;
  border-color: #F279BF !important;
  color: #F279BF !important;
  box-shadow: 0 12px 32px rgba(242, 121, 191, 0.30) !important;
}

.nav-item[data-nav="about"]:hover .nav-item-i {
  background: #F279BF !important;
  color: #ffffff !important;
}

.nav-item[data-nav="services"]:hover {
  background: rgba(65, 200, 239, 0.18) !important;
  border-color: #41C8EF !important;
  color: #41C8EF !important;
  box-shadow: 0 12px 32px rgba(65, 200, 239, 0.30) !important;
}

.nav-item[data-nav="services"]:hover .nav-item-i {
  background: #41C8EF !important;
  color: #ffffff !important;
}

.nav-item[data-nav="portfolio"]:hover {
  background: rgba(253, 159, 67, 0.18) !important;
  border-color: #FD9F43 !important;
  color: #FD9F43 !important;
  box-shadow: 0 12px 32px rgba(253, 159, 67, 0.30) !important;
}

.nav-item[data-nav="portfolio"]:hover .nav-item-i {
  background: #FD9F43 !important;
  color: #ffffff !important;
}

.nav-item[data-nav="contact"]:hover {
  background: rgba(105, 194, 85, 0.18) !important;
  border-color: #69C255 !important;
  color: #69C255 !important;
  box-shadow: 0 12px 32px rgba(105, 194, 85, 0.30) !important;
}

.nav-item[data-nav="contact"]:hover .nav-item-i {
  background: #69C255 !important;
  color: #ffffff !important;
}

/* About page — smaller value icons & stat numbers */
.mop-popup-container .v-icon {
  font-size: 24px !important;
  width: 40px !important;
  height: 36px !important;
  border-radius: 12px !important;
  margin-bottom: 18px !important;
}

.mop-popup-container .mop-card .stat-num,
.mop-popup-container .mop-card>div[style*="font-size: 48px"] {
  font-size: 36px !important;
}

/* International phone picker (intl-tel-style) — match design system */
.iti-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.iti-cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--brd, rgba(255, 255, 255, 0.12));
  background: #181111;
  color: #fff;
  font-family: var(--f1);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s, background .2s;
}

.iti-cc-btn:hover {
  border-color: var(--theme-color);
}

.iti-cc-btn .iti-flag {
  font-size: 18px;
  line-height: 1;
}

.iti-cc-btn .iti-arrow {
  font-size: 10px;
  opacity: .7;
}

.iti-cc-input {
  flex: 1;
  min-width: 0;
}

.iti-dd {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 2000;
  width: min(340px, calc(100% + 0px));
  max-height: 320px;
  overflow-y: auto;
  background: #000000;
  border: 1px solid var(--brd, rgba(255, 255, 255, 0.12));
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  padding: 8px;
  display: none;
}

.iti-dd.open {
  display: block;
}

.iti-dd-search {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  border: 1px solid var(--brd, rgba(255, 255, 255, 0.10));
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg, #f4f4fa);
  font-family: var(--f1);
  font-size: 13px;
  outline: none;
}

.iti-dd-list {
  display: block;
}

.iti-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #fff;
}

.iti-dd-item:hover,
.iti-dd-item.active {
  background: rgba(var(--theme-color-rgb, 0, 191, 165), 0.12);
}

.iti-dd-item .iti-flag {
  font-size: 16px;
}

.iti-dd-item .iti-name {
  flex: 1;
}

.iti-dd-item .iti-dial {
  opacity: .65;
  font-variant-numeric: tabular-nums;
}

[dir="rtl"] .iti-dd {
  left: auto;
  right: 0;
}

/* Notification — per-item read action */
.notif-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.notif-row .notif-body {
  flex: 1;
  min-width: 0;
}

.notif-row .notif-mark-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--brd, rgba(255, 255, 255, 0.12));
  background: transparent;
  color: var(--theme-color);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.notif-row .notif-mark-btn:hover {
  background: var(--theme-color);
  color: #fff;
}

/* WhatsApp CTA on accepted project cards */
.proj-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: #25D366;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}

.proj-wa-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.30);
}

.proj-wa-btn svg {
  width: 16px;
  height: 16px;
}

/* Multi-select specialization grid in dashboard new project form */
.svc-multi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

/* Specialization tile — card-style selectable option with a clear
   checkmark badge that appears in the corner once selected. */
.svc-multi-grid .svc-tile {
  position: relative;
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--brd, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
  overflow: hidden;
  min-height: 56px;
}

[data-mode="light"] .svc-multi-grid .svc-tile {
  background: rgba(0, 0, 0, 0.02);
}

.svc-multi-grid .svc-tile input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.svc-multi-grid .svc-tile-label {
  flex: 1;
  line-height: 1.4;
}

/* Checkmark badge — hidden by default, fades + scales in on selection. */
.svc-multi-grid .svc-tile-check {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--theme-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity .18s, transform .25s var(--ease-spring);
  box-shadow: 0 4px 10px rgba(var(--theme-color-rgb), 0.4);
}

.svc-multi-grid .svc-tile-check svg {
  width: 14px;
  height: 14px;
}

.svc-multi-grid .svc-tile:hover {
  border-color: var(--theme-color);
  transform: translateY(-1px);
}

.svc-multi-grid .svc-tile:has(input:checked) {
  border-color: var(--theme-color);
  background: rgba(var(--theme-color-rgb), 0.10);
  color: var(--theme-color);
  box-shadow: 0 0 0 1px var(--theme-color) inset;
}

.svc-multi-grid .svc-tile:has(input:checked) .svc-tile-check {
  opacity: 1;
  transform: scale(1);
}

.svc-multi-grid .svc-tile:has(input:checked) .svc-tile-label {
  /* Push the label a touch so it doesn't sit under the checkmark badge. */
  padding-inline-end: 26px;
}

/* ────────────────────────────────────────────────────────────
   WhatsApp-style project chat
   ──────────────────────────────────────────────────────────── */
.wa-chat {
  margin-top: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--brd, rgba(255, 255, 255, 0.10));
  overflow: hidden;
}

[data-mode="light"] .wa-chat {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

.wa-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: linear-gradient(135deg, #128c7e, #25d366);
  color: #fff;
  cursor: pointer;
  text-align: start;
  transition: filter .2s;
  font-family: inherit;
}

.wa-chat-head:hover {
  filter: brightness(1.05);
}

.wa-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.wa-avatar svg {
  width: 22px;
  height: 22px;
}

.wa-chat-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.wa-chat-name {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-chat-status {
  font-size: 11px;
  opacity: 0.85;
  font-weight: 500;
}

.wa-chat-caret {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: transform .25s var(--ease-spring);
  flex-shrink: 0;
}

.wa-chat-caret svg {
  width: 16px;
  height: 16px;
}

.wa-chat.open .wa-chat-caret {
  transform: rotate(180deg);
}

.wa-chat-body {
  padding: 12px;
  /* Faint WhatsApp-like chat backdrop. */
  background:
    radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px) 0 0/12px 12px,
    #efeae2;
}

[data-mode="dark"] .wa-chat-body {
  background:
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0/12px 12px,
    #0b141a;
}

.wa-chat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px 4px;
}

/* Message bubbles inside the chat list — JS renders each message as
   <div class="proj-chat-msg me|them">. Style both flavours. */
.wa-chat-list .proj-chat-msg,
.wa-chat-list>div[data-mid] {
  max-width: 80%;
  padding: 8px 12px 18px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  position: relative;
  word-wrap: break-word;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}

.wa-chat-list .proj-chat-msg.me,
.wa-chat-list .proj-chat-msg[data-side="me"] {
  align-self: flex-end;
  background: #d9fdd3;
  color: #111;
  border-bottom-right-radius: 2px;
}

.wa-chat-list .proj-chat-msg.them,
.wa-chat-list .proj-chat-msg[data-side="them"] {
  align-self: flex-start;
  background: #fff;
  color: #111;
  border-bottom-left-radius: 2px;
}

[data-mode="dark"] .wa-chat-list .proj-chat-msg.me {
  background: #005c4b;
  color: #e9edef;
}

[data-mode="dark"] .wa-chat-list .proj-chat-msg.them {
  background: #202c33;
  color: #e9edef;
}

.wa-chat-list .proj-chat-msg .msg-time {
  position: absolute;
  bottom: 4px;
  inset-inline-end: 8px;
  font-size: 10px;
  opacity: 0.55;
}

.wa-chat-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px;
  background: var(--bg, #fff);
  padding: 6px;
  border-radius: 999px;
}

[data-mode="dark"] .wa-chat-compose {
  background: #2a3942;
}

.wa-chat-input {
  flex: 1;
  min-height: 38px;
  max-height: 120px;
  padding: 9px 14px;
  border: none;
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  resize: none;
  outline: none;
}

[data-mode="dark"] .wa-chat-input {
  color: #e9edef;
}

.wa-chat-input::placeholder {
  color: var(--g1);
}

.wa-chat-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s, filter .15s;
}

.wa-chat-send:hover {
  filter: brightness(1.05);
  transform: scale(1.04);
}

.wa-chat-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wa-chat-send svg {
  width: 18px;
  height: 18px;
  transform: translateX(1px);
}

[dir="rtl"] .wa-chat-send svg {
  transform: scaleX(-1) translateX(1px);
}

/* ────────────────────────────────────────────────────────────
   Video brief cards + modal popup (content projects, stage 3+)
   ──────────────────────────────────────────────────────────── */
.video-brief-card {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px dashed var(--brd, rgba(255, 255, 255, 0.18));
  background: rgba(255, 255, 255, 0.03);
  padding: 14px 14px 12px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  color: var(--fg);
  font-family: inherit;
  text-align: start;
  transition: border-color .2s, background .2s, transform .15s;
}

.video-brief-card:hover {
  border-color: var(--theme-color);
  background: rgba(var(--theme-color-rgb), 0.06);
  transform: translateY(-1px);
}

.video-brief-card.filled {
  border-style: solid;
  border-color: rgba(46, 204, 113, 0.5);
  background: rgba(46, 204, 113, 0.08);
}

.video-brief-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--theme-color);
  letter-spacing: -0.5px;
}

.video-brief-card.filled .video-brief-num {
  color: #2ecc71;
}

.video-brief-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--g1);
}

.video-brief-card.filled .video-brief-status {
  color: #2ecc71;
}

/* Modal — full-screen overlay, centred panel. */
.video-brief-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.video-brief-modal .vbm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  animation: vbmFadeIn .2s ease;
}

.video-brief-modal .vbm-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg, #1a1a1a);
  color: var(--fg);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  animation: vbmSlideUp .25s var(--ease-spring);
}

[data-mode="light"] .video-brief-modal .vbm-panel {
  background: #fff;
}

.video-brief-modal .vbm-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  color: var(--fg);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

[data-mode="dark"] .video-brief-modal .vbm-close {
  background: rgba(255, 255, 255, 0.08);
}

.video-brief-modal .vbm-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: var(--fg);
}

.video-brief-modal .vbm-help {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--g2);
}

.video-brief-modal textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--brd, rgba(255, 255, 255, 0.15));
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}

.video-brief-modal textarea:focus {
  border-color: var(--theme-color);
}

.video-brief-modal .vbm-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  justify-content: flex-end;
}

@keyframes vbmFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes vbmSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ────────────────────────────────────────────────────────────
   RTL PLACEHOLDERS — when the document is in Arabic mode, every
   form placeholder must read right-to-left and align to the right,
   even on inputs that are themselves `dir="ltr"` (phone, email,
   etc.). Without this, Arabic placeholders render left-aligned and
   visually wrong.
   ──────────────────────────────────────────────────────────── */
html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder,
html[lang="ar"] input::placeholder,
html[lang="ar"] textarea::placeholder {
  text-align: right;
  direction: rtl;
  unicode-bidi: plaintext;
}

html[dir="rtl"] input::-webkit-input-placeholder,
html[dir="rtl"] textarea::-webkit-input-placeholder,
html[lang="ar"] input::-webkit-input-placeholder,
html[lang="ar"] textarea::-webkit-input-placeholder {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] input:-ms-input-placeholder,
html[dir="rtl"] textarea:-ms-input-placeholder,
html[lang="ar"] input:-ms-input-placeholder,
html[lang="ar"] textarea:-ms-input-placeholder {
  text-align: right;
  direction: rtl;
}

/* ────────────────────────────────────────────────────────────
   GLOBAL CUSTOM CURSOR — always render above every overlay,
   popup, modal, toast, search bar, language curtain, dashboard, etc.
   The cursor element (.tf-cursor / #cur) was at z-index 99999 which is
   below search-overlay (99999999) and toast (2147483647). Push it past
   them and never let display/visibility be flipped off by parent rules.
   ──────────────────────────────────────────────────────────── */
.tf-cursor,
#cur {
  z-index: 2147483647 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  position: fixed !important;
}

/* Re-assert "no native cursor" inside every interactive surface on the
   homepage where the custom cursor system is active. Without this, native
   text/pointer cursors leak through inputs/buttons inside popups (dashboard,
   contact, etc.) and the user sees two cursors. */
@media (hover: hover) and (min-width: 769px) {

  body.home,
  body.home * {
    cursor: none !important;
  }

  body.home input,
  body.home textarea,
  body.home [contenteditable],
  body.home select {
    cursor: text !important;
  }

  body.home select,
  body.home button,
  body.home a {
    cursor: pointer !important;
  }
}

/* ────────────────────────────────────────────────────────────
   POPUP-WINDOW HERO COMPACTION (desktop only)
   The popup (.m-win) is min(680px, 82vh) tall. Default hero copy is sized
   for full-page rendering and forces the user to scroll inside the popup
   before they reach the CTA / form. Inside the popup container we shrink
   the hero typography and tighten vertical rhythm so the hero fits within
   the popup viewport.
   ──────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  .m-win .mop-popup-container .mop-hero {
    padding: 28px 24px 36px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
  }

  .m-win .mop-popup-container .mop-hero-title {
    font-size: clamp(26px, 3vw, 36px) !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
  }

  .m-win .mop-popup-container .mop-hero-sub {
    font-size: clamp(14px, 1.15vw, 16px) !important;
    line-height: 1.6 !important;
    max-width: 620px !important;
  }

  /* Contact-specific spacing — slightly tighter so the timeline below stays visible */
  .m-win #mw-contact .mop-hero,
  .m-win .mop-popup-container .pg-modal .mop-hero {
    padding: 24px 24px 28px;
  }

  .m-win .mop-popup-container .mop-hero-sub+.mop-hero-sub {
    margin-top: 8px !important;
  }

  .m-win .mop-popup-container .co-hero-sc {
    gap: 16px !important;
  }

  .m-win .mop-popup-container .co-hero-sc .mop-btn-pill.btn-co {
    margin-top: 10px;
    padding: 9px 18px;
    font-size: 13px;
  }

  .m-win .mop-popup-container .co-phones {
    aspect-ratio: 1.1;
    max-width: 320px;
    margin: 0 auto;
  }

  /* Services-specific compaction — keep the tab bar visible right after
     the hero so the user sees the service categories without scrolling.
     Tighten section padding and tab vertical metrics. */
  .m-win .mop-popup-container .svc-nav-wrap {
    margin-bottom: 16px;
    padding: 6px;
  }

  .m-win .mop-popup-container .svc-nav {
    padding: 5px;
  }

  .m-win .mop-popup-container .svc-tab {
    padding: 8px 16px;
    font-size: 13px;
  }

  .m-win .mop-popup-container .mop-section {
    padding: 12px 24px;
  }

  /* Services panel body (.svc-content-panels → .svc-panel → .svc-showcase-card)
     — compact every internal block so the whole card fits next to the tab bar
     inside the popup viewport. Inline styles in the template need !important. */
  .m-win .mop-popup-container .svc-content-panels {
    margin-top: 8px;
  }

  .m-win .mop-popup-container .svc-showcase-card {
    gap: 24px !important;
    padding: 18px 20px !important;
  }

  .m-win .mop-popup-container .svc-panel .svc-left>div:first-child {
    font-size: 44px !important;
    margin-bottom: -10px !important;
  }

  .m-win .mop-popup-container .svc-panel .svc-left .h2 {
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }

  .m-win .mop-popup-container .svc-panel .svc-left .p2 {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }

  .m-win .mop-popup-container .svc-panel .svc-left .btn-p {
    padding: 9px 18px;
    font-size: 13px;
  }

  .m-win .mop-popup-container .svc-panel .svc-right h4 {
    font-size: 14px !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
  }

  .m-win .mop-popup-container .svc-panel .svc-right .sv-list {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  .m-win .mop-popup-container .svc-panel .svc-right .sv-list li {
    margin-bottom: 4px;
  }
}

/* ────────────────────────────────────────────────────────────
   MOBILE — light compaction so the services panel fits comfortably
   inside the iOS screen frame without feeling cramped.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mop-popup-container .svc-nav-wrap {
    margin-bottom: 20px;
    padding: 8px;
  }

  .mop-popup-container .svc-tab {
    padding: 10px 18px !important;
    font-size: 14px !important;
  }

  .mop-popup-container .svc-showcase-card {
    gap: 22px !important;
    padding: 22px 20px !important;
  }

  .mop-popup-container .svc-panel .svc-left>div:first-child {
    font-size: 56px !important;
    margin-bottom: -12px !important;
  }

  .mop-popup-container .svc-panel .svc-left .h2 {
    font-size: 26px !important;
    margin-bottom: 14px !important;
  }

  .mop-popup-container .svc-panel .svc-left .p2 {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
  }

  .mop-popup-container .svc-panel .svc-left .btn-p {
    padding: 11px 22px !important;
    font-size: 14px !important;
  }

  .mop-popup-container .svc-panel .svc-right h4 {
    font-size: 15px !important;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
  }

  .mop-popup-container .svc-panel .svc-right .sv-list {
    font-size: 14px !important;
    line-height: 1.85 !important;
  }
}

/* ────────────────────────────────────────────────────────────
   DASHBOARD — interactive notification cards
   Cards in the notifications panel are clickable rows; the click opens
   a detail modal. Add hover affordance so users know the row is interactive.
   ──────────────────────────────────────────────────────────── */
.notif-card {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.notif-card:hover {
  background: rgba(var(--theme-color-rgb), 0.08) !important;
  border-color: rgba(var(--theme-color-rgb), 0.35) !important;
}

.notif-card:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: 2px;
}

.notif-card.unread .notif-dot {
  animation: notifDotPulse 1.6s ease-in-out infinite;
}

@keyframes notifDotPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.35);
    opacity: 0.65;
  }
}

/* ────────────────────────────────────────────────────────────
   PROJECT CARD — post-approval action strip
   Visible when the project is approved: pay button + WhatsApp + receipt upload.
   ──────────────────────────────────────────────────────────── */
.proj-pay-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(var(--theme-color-rgb), 0.32);
  filter: brightness(1.05);
}

.proj-postapproval .act-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--brd, rgba(255, 255, 255, 0.12));
  color: var(--fg, #f4f4fa);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}

.proj-postapproval .act-btn:hover {
  border-color: var(--theme-color);
  color: var(--theme-color);
}

/* New-project form: currency + attachment field polish */
.comp-form select#newProjCurrency {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--brd, rgba(255, 255, 255, 0.12));
  background: var(--card, #141414);
  color: var(--fg, #f4f4fa);
  font-family: var(--f1);
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-inline-end: 36px;
}

[dir="rtl"] .comp-form select#newProjCurrency {
  background-position: left 14px center;
}

.comp-form input[type="file"] {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed var(--brd, rgba(255, 255, 255, 0.16));
  background: rgba(255, 255, 255, 0.02);
  color: var(--g2);
  font-family: var(--f1);
  font-size: 12px;
  width: 100%;
  cursor: pointer;
}

.comp-form input[type="file"]::file-selector-button {
  margin-inline-end: 12px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 0;
  background: rgba(var(--theme-color-rgb), 0.15);
  color: var(--theme-color);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.comp-form input[type="file"]::file-selector-button:hover {
  background: var(--theme-color);
  color: #fff;
}