/* ------------------------------------------------------------------
   Design tokens.
   The palette is anchored to the logo mark (#01AF86). Until now the
   interface ran on the default indigo/cyan that every framework ships
   with, so the one colour that actually belongs to this brand appeared
   nowhere outside the mark itself.

   Three teal slots rather than one, because a single hex cannot do all
   three jobs and still clear AA:
     --brand          the mark's exact colour; decorative fills only
     --primary        accents that carry meaning - text, icons, borders
     --primary-solid  a fill dark enough to hold white text (>= 4.5:1)
   All three are redefined for the light theme, where the contrast runs
   the other way round: what is legible on ink is invisible on paper.
------------------------------------------------------------------ */
:root {
    --brand: #01AF86;
    --brand-rgb: 1, 175, 134;
    --primary: #2dd4a7;
    /* The channel list exists so the dozens of rgba() tints scattered through
       this sheet can follow the theme instead of freezing one hex in place. */
    --primary-rgb: 45, 212, 167;
    --secondary-rgb: 34, 184, 212;
    --primary-solid: #00795e;
    --primary-dark: #005c47;
    --secondary: #22b8d4;
    --accent: #f0b429;
    --danger: #f2555a;
    --success: #10b981;
    --warning: #f0b429;
    --danger-rgb: 242, 85, 90;
    /* A fill dark enough to carry white text, the way --primary-solid does.
       --danger itself is tuned to be read AS text on the dark canvas, which
       makes it far too light to sit behind any. */
    --danger-solid: #b3272e;
    --success-rgb: 16, 185, 129;
    --warning-rgb: 240, 180, 41;

    --bg: #07101a;
    --bg-secondary: #0b1620;
    --bg-card: rgba(17, 32, 44, 0.62);
    --bg-raised: rgba(22, 40, 54, 0.78);
    --text: #eaf2f0;
    --text-muted: #8ba2ab;
    --border: rgba(125, 195, 180, 0.14);
    --border-strong: rgba(125, 195, 180, 0.28);

    /* Elevation. A single shadow cannot read as depth on a dark canvas:
       the tight one seats the surface, the wide one lifts it. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .24);
    --shadow: 0 2px 6px rgba(0, 0, 0, .42), 0 18px 44px rgba(0, 0, 0, .42);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, .46), 0 32px 70px rgba(0, 0, 0, .50);
    --glow: 0 14px 40px rgba(1, 175, 134, .28);

    /* The 1px highlight along a surface's top edge. On a dark canvas this
       is what separates a panel from the page - a border on its own reads
       as a drawn box rather than something raised off the background. */
    --specular: rgba(255, 255, 255, .10);

    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 26px;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --ring: 0 0 0 3px rgba(45, 212, 167, .45);

    --font-ar: 'Noto Kufi Arabic', sans-serif;
    --font-en: 'Inter', sans-serif;
}

[data-theme="light"] {
    --primary: #00795e;
    --primary-rgb: 0, 121, 94;
    --secondary-rgb: 14, 116, 144;
    --primary-solid: #00795e;
    --primary-dark: #00604a;
    --secondary: #0e7490;
    /* The status hues have to darken on paper for the same reason the brand
       does: each is set as text over a wash of itself, and a wash on white
       is pale. The channel lists stay tied to whatever the hue now is. */
    --danger: #c2323a;
    --success: #047857;
    --warning: #8a5a00;
    --danger-rgb: 194, 50, 58;
    --success-rgb: 4, 120, 87;
    --warning-rgb: 138, 90, 0;

    --bg: #f5f8f7;
    --bg-secondary: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.78);
    --bg-raised: #ffffff;
    --text: #07211c;
    --text-muted: #5b7079;
    --border: rgba(7, 33, 28, 0.09);
    --border-strong: rgba(7, 33, 28, 0.17);

    --shadow-sm: 0 1px 2px rgba(7, 33, 28, .06), 0 2px 8px rgba(7, 33, 28, .05);
    --shadow: 0 2px 6px rgba(7, 33, 28, .06), 0 18px 44px rgba(7, 33, 28, .10);
    --shadow-lg: 0 4px 10px rgba(7, 33, 28, .08), 0 32px 70px rgba(7, 33, 28, .14);
    --glow: 0 14px 40px rgba(0, 121, 94, .20);
    --specular: rgba(255, 255, 255, .90);
    --ring: 0 0 0 3px rgba(0, 121, 94, .35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Both the root and the body: a rule on body alone does not stop a phone
   scrolling sideways, and in a right to left page that leaves the reader
   looking at empty space with the content pushed off the edge.
   `clip` is preferred over `hidden` because it does not turn the element into
   a scroll container; `hidden` stays as the fallback for older browsers. */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }

/* The page background sits on <html> so body::before (the glow layer) paints
   above it rather than behind the canvas. */
html { background: var(--bg); }

body {
    font-family: var(--font-ar), var(--font-en), system-ui, sans-serif;
    background: transparent;
    position: relative;
    color: var(--text);
    line-height: 1.7;
    overflow-x: hidden;
    transition: background 0.3s, color 0.3s;
}
body[dir="ltr"] { font-family: var(--font-en), var(--font-ar), system-ui, sans-serif; }

/* Scripts the two brand webfonts do not cover. Without these, Chinese,
   Japanese, Hindi and Urdu fall back to whatever the browser picks and the
   line height jumps around. System fonts cover all of them well. */
html[data-lang="zh"] body { font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', var(--font-en), sans-serif; }
html[data-lang="ja"] body { font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', var(--font-en), sans-serif; }
html[data-lang="hi"] body { font-family: 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', var(--font-en), sans-serif; }
html[data-lang="ru"] body { font-family: var(--font-en), 'Segoe UI', 'Helvetica Neue', sans-serif; }
html[data-lang="ur"] body { font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', var(--font-ar), sans-serif; line-height: 2.1; }


/* ------------------------------------------------------------------
   Page glow.
   One layer spanning the whole document, so the colour travels down the
   page as you scroll instead of sitting in the hero. The orbs used to
   live inside .hero, which has overflow:hidden - the glow was sliced off
   at that boundary, and the straight cut read as a hard-edged block.
   Layered radial gradients: no filter, no extra elements, nothing to
   clip mid-page, and no per-frame compositing work.
------------------------------------------------------------------ */
body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(760px circle at 88% -2%, rgba(var(--primary-rgb), 0.16), rgba(var(--primary-rgb), 0) 60%),
        radial-gradient(620px circle at 4%  12%, rgba(var(--secondary-rgb), 0.13), rgba(var(--secondary-rgb), 0) 62%),
        radial-gradient(520px circle at 76% 28%, rgba(240, 180, 41, 0.055), rgba(240, 180, 41, 0) 60%),
        radial-gradient(680px circle at 8%  46%, rgba(var(--primary-rgb), 0.11), rgba(var(--primary-rgb), 0) 62%),
        radial-gradient(600px circle at 90% 62%, rgba(var(--secondary-rgb), 0.10), rgba(var(--secondary-rgb), 0) 62%),
        radial-gradient(640px circle at 14% 80%, rgba(var(--primary-rgb), 0.09), rgba(var(--primary-rgb), 0) 62%),
        radial-gradient(560px circle at 82% 95%, rgba(var(--secondary-rgb), 0.09), rgba(var(--secondary-rgb), 0) 62%);
}


.container { width: 92%; max-width: 1200px; margin: 0 auto; }
.section { padding: 100px 0; }
.section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; }
.section-tag {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 16px;
}
.section-header h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 16px; }
.section-header p { color: var(--text-muted); font-size: 1.1rem; }

.text-gradient {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    font-size: 1rem;
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.35);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(var(--primary-rgb), 0.5); }
.btn-outline { background: transparent; color: var(--text); border: 2px solid var(--border); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 8px 20px; font-size: 0.9rem; }
.btn-lg { padding: 16px 36px; font-size: 1.1rem; }

.preloader {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s, visibility 0.5s;
}
.preloader.hidden { opacity: 0; visibility: hidden; }
.preloader-content { text-align: center; }
.preloader-logo { height: 64px; width: auto; margin-bottom: 24px; color: var(--text); animation: pulse 2s infinite; }
.preloader-bar { width: 200px; height: 4px; background: var(--border); border-radius: 4px; overflow: hidden; }
.preloader-progress { width: 0; height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 4px; animation: load 1.5s ease-in-out forwards; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes load { 0% { width: 0; } 100% { width: 100%; } }

.security-shield {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    z-index: 999;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.4);
}
body[dir="ltr"] .security-shield { left: auto; right: 30px; }
.security-shield .shield-ring {
    position: absolute;
    border: 2px solid rgba(var(--primary-rgb), 0.4);
    border-radius: 50%;
    animation: ripple 2s infinite;
}
.security-shield .shield-ring:nth-child(1) { width: 80px; height: 80px; animation-delay: 0s; }
.security-shield .shield-ring:nth-child(2) { width: 100px; height: 100px; animation-delay: 0.3s; }
.security-shield .shield-ring:nth-child(3) { width: 120px; height: 120px; animation-delay: 0.6s; }
@keyframes ripple { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25d366, #128c7e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.8rem;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
    transition: var(--transition);
    text-decoration: none;
}
.whatsapp-float:hover { transform: scale(1.12); box-shadow: 0 14px 40px rgba(37, 211, 102, 0.6); }
.whatsapp-float::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25d366;
    animation: ripple 2s infinite;
}
body[dir="ltr"] .whatsapp-float { right: auto; left: 30px; }

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px 0;
    transition: var(--transition);
    background: transparent;
}
.header.scrolled { background: var(--bg-card); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 14px 0; }
/* English labels are longer than the Arabic ones ("Create account" vs "إنشاء
   حساب"), so the row has to be able to breathe and shrink: without a gap the
   logo ends exactly where the nav begins, and the buttons overflow the
   container. */
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.logo { display: flex; align-items: center; position: relative; color: var(--text); }
.brand-logo { height: 44px; width: auto; display: block; transition: var(--transition); }
.logo:hover .brand-logo { transform: scale(1.04); }

.nav { display: flex; gap: 26px; flex: 0 1 auto; min-width: 0; }
.nav a { white-space: nowrap; }
.nav a { color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.95rem; position: relative; transition: var(--transition); }
.nav a:hover { color: var(--primary); }
.nav a::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: var(--transition); }
body[dir="ltr"] .nav a::after { left: 0; right: auto; }
.nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}
.icon-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }
.lang-dropdown { position: relative; }
.lang-menu {
    position: absolute;
    top: 50px;
    right: 0;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
    z-index: 1001;
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    display: grid;
    gap: 2px;
}
body[dir="ltr"] .lang-menu { right: auto; left: 0; }
.lang-menu.active { opacity: 1; visibility: visible; transform: translateY(0); }
/* A <button> so it is reachable by keyboard - which means every browser
   default (background, border, font, alignment) has to be cleared. */
.lang-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 12px; border: 0; border-radius: 8px;
    background: none; color: inherit; font: inherit; font-size: 0.9rem;
    text-align: start; cursor: pointer; transition: var(--transition);
}
.lang-item:hover, .lang-item.active { background: var(--primary); color: #fff; }
.lang-item:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; }
.lang-item .lang-name { flex: 1; }
.lang-item .icon { font-size: 0.78rem; opacity: .9; }

/* Flag emoji do not render on Windows - they show as two letters - so the
   language code is used as a badge instead. It reads the same everywhere. */
.lang-code {
    flex-shrink: 0; width: 30px; text-align: center;
    font-size: 0.66rem; font-weight: 800; letter-spacing: .5px;
    padding: 3px 0; border-radius: 5px;
    background: rgba(148, 163, 184, 0.18); color: var(--text-muted);
    font-family: Inter, 'Segoe UI', Arial, sans-serif;
}
.lang-item:hover .lang-code, .lang-item.active .lang-code {
    background: rgba(255, 255, 255, 0.22); color: #fff;
}
/* The one control a phone visitor must be able to hit. Sized to the 44px
   the platforms ask for, with the bars centred inside it. */
.mobile-menu-btn { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; width: 44px; height: 44px; padding: 0; margin-inline-start: -8px; }
.mobile-menu-btn span {
    width: 24px; height: 2px; background: var(--text); border-radius: 2px;
    transition: transform .3s ease, opacity .2s ease;
}
/* open: the top and bottom bars cross, the middle one fades out */
.mobile-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.open span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* the page behind the panel must not scroll under the reader's finger */
body.nav-open { overflow: hidden; }

.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: 100px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
@keyframes float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px,-30px); } }
.grid-overlay { position: absolute; inset: 0; background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.3; }

.hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.hero-badge { display: inline-block; padding: 8px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 50px; font-size: 0.9rem; color: var(--primary); font-weight: 600; margin-bottom: 24px; backdrop-filter: blur(10px); }
.hero-text h1 { font-size: 3.5rem; font-weight: 900; line-height: 1.2; margin-bottom: 24px; }
.hero-text p { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 36px; max-width: 90%; }
.hero-btns { display: flex; gap: 16px; margin-bottom: 48px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 40px; }
.hero-stats .stat { font-size: 1rem; color: var(--text-muted); }
.stat-num { font-size: 2.2rem; font-weight: 800; color: var(--text); }
.hero-visual { position: relative; height: 500px; }
.hero-card { position: absolute; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border); backdrop-filter: blur(20px); box-shadow: var(--shadow); overflow: hidden; transition: var(--transition); }
.card-main { width: 80%; height: 70%; top: 15%; left: 10%; display: flex; align-items: center; justify-content: center; }
.card-main img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------
   Animated hero scene (replaces the static cover image).
   Pure SVG + CSS: no video file, sharp at any size, follows the theme
   through currentColor, and stops moving under prefers-reduced-motion.
------------------------------------------------------------------ */
.hero-scene { width: 100%; height: 100%; display: block; color: var(--text); }

.hero-scene .hx-orbit { fill: none; stroke: currentColor; stroke-opacity: .18; stroke-width: 1.4; }
.hero-scene .hx-faint { stroke-opacity: .09; stroke-dasharray: 1 7; }
.hero-scene .hx-mark  { fill: none; stroke: currentColor; stroke-opacity: .92; }
.hero-scene .hx-core  { fill: #01AF86; transform-box: fill-box; transform-origin: center; }
.hero-scene .hx-node  { fill: var(--secondary); }
.hero-scene .hx-pulse { fill: #01AF86; }
.hero-scene .hx-label {
    fill: currentColor; fill-opacity: .42;
    font-family: Inter, 'Segoe UI', Arial, sans-serif;
    font-size: 11px; font-weight: 600; letter-spacing: 4px;
}

.hero-scene .hx-spin-slow,
.hero-scene .hx-spin-rev,
.hero-scene .hx-spin-fast { transform-box: view-box; transform-origin: 200px 160px; }

.hero-scene .hx-spin-slow { animation: hxSpin 46s linear infinite; }
.hero-scene .hx-spin-rev  { animation: hxSpin 32s linear infinite reverse; }
.hero-scene .hx-spin-fast { animation: hxSpin 7s linear infinite; }
.hero-scene .hx-core      { animation: hxBeat 2.8s ease-in-out infinite; }
.hero-scene .hx-glow      { animation: hxBeat 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hero-scene .hx-node      { animation: hxNode 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }

@keyframes hxSpin { to   { transform: rotate(360deg); } }
@keyframes hxBeat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.13); opacity: .78; } }
@keyframes hxNode { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .hero-scene * { animation: none !important; }
    .hero-scene .hx-spin-fast { display: none; }
}

.card-float { width: 120px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-weight: 700; animation: cardFloat 4s ease-in-out infinite; }
.card-float .icon { font-size: 2rem; color: var(--primary); }
.card-1 { top: 0; right: 0; animation-delay: 0s; }
.card-2 { bottom: 20%; left: -5%; animation-delay: 1s; }
.card-3 { bottom: 0; right: 10%; animation-delay: 2s; }
@keyframes cardFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.hero-scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); animation: bounce 2s infinite; }
.hero-scroll a { color: var(--text-muted); font-size: 1.5rem; }
@keyframes bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } }

.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.about-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px 30px; text-align: center; transition: var(--transition); backdrop-filter: blur(10px); }
.about-card:hover { transform: translateY(-10px); border-color: var(--primary); box-shadow: var(--shadow); }
.about-card .icon { font-size: 2.5rem; color: var(--primary); margin-bottom: 20px; }
.about-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.about-card p { color: var(--text-muted); }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
/* The whole card is a link to its service page. */
.service-card { display: block; text-decoration: none; color: inherit; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px 30px; transition: var(--transition); backdrop-filter: blur(10px); position: relative; overflow: hidden; }
.service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transform: scaleX(0); transform-origin: right; transition: var(--transition); }
body[dir="ltr"] .service-card::before { transform-origin: left; }
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover { transform: translateY(-8px); border-color: var(--primary); box-shadow: var(--shadow); }
.service-icon { width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; margin-bottom: 24px; }
.service-card h3 { font-size: 1.25rem; margin-bottom: 14px; }
.service-card p { color: var(--text-muted); margin-bottom: 18px; font-size: 0.95rem; }
.service-card ul { list-style: none; }
.service-card li { padding: 6px 0; color: var(--text-muted); font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.service-card li::before { content: '✓'; color: var(--success); font-weight: 700; }
.service-more {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 20px; font-size: 0.9rem; font-weight: 700; color: var(--primary);
}
.service-more .icon { transition: var(--transition); }
.service-card:hover .service-more .icon { transform: translateX(-5px); }
body[dir="ltr"] .service-more .icon { transform: scaleX(-1); }
body[dir="ltr"] .service-card:hover .service-more .icon { transform: scaleX(-1) translateX(-5px); }

.security-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; backdrop-filter: blur(10px); max-width: 800px; margin: 0 auto; }
.security-input { display: flex; gap: 12px; margin-bottom: 40px; }
.security-input input { flex: 1; padding: 16px 24px; border-radius: 50px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text); font-size: 1rem; outline: none; transition: var(--transition); }
.security-input input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15); }
.security-result { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; justify-content: center; }
.security-meter { position: relative; width: 180px; height: 180px; flex-shrink: 0; }
.security-meter svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.meter-bg { fill: none; stroke: var(--border); stroke-width: 10; }
.meter-fill { fill: none; stroke: url(#meterGradient); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 339.292; stroke-dashoffset: 339.292; transition: stroke-dashoffset 1s ease-in-out; }
.meter-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.meter-text span { font-size: 2.5rem; font-weight: 800; }
.meter-text small { display: block; color: var(--text-muted); font-size: 1rem; }
.security-report { flex: 1; min-width: 280px; }
.security-report h4 { margin-bottom: 16px; font-size: 1.2rem; }
.security-check { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.security-check:last-child { border-bottom: none; }
.security-check .icon { box-sizing: border-box; width: 28px; height: 28px; padding: 8px; border-radius: 50%; }
.security-check.pass .icon { background: rgba(var(--success-rgb), 0.15); color: var(--success); }
.security-check.fail .icon { background: rgba(var(--danger-rgb), 0.15); color: var(--danger); }
.security-check.warn .icon { background: rgba(var(--warning-rgb), 0.15); color: var(--warning); }

.tools-tabs { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.tool-tab { padding: 12px 24px; border-radius: 50px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; transition: var(--transition); font-weight: 600; font-size: 0.95rem; }
.tool-tab:hover, .tool-tab.active { background: var(--primary); color: white; border-color: var(--primary); }
.tool-content { display: none; }
.tool-content.active { display: block; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.tool-area { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; backdrop-filter: blur(10px); }
.drop-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 60px 20px; text-align: center; cursor: pointer; transition: var(--transition); margin-bottom: 30px; }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.05); }
.drop-zone .icon { font-size: 3rem; color: var(--primary); margin-bottom: 16px; }
.drop-zone p { color: var(--text-muted); font-size: 1.1rem; }
.tool-output { min-height: 120px; }
.translator-box { display: flex; flex-direction: column; gap: 20px; }
.translator-box textarea, .tool-output textarea { width: 100%; padding: 20px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text); font-size: 1rem; resize: vertical; outline: none; transition: var(--transition); font-family: inherit; }
.translator-box textarea:focus, .tool-output textarea:focus { border-color: var(--primary); }
.translator-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.translator-actions select { padding: 12px 20px; border-radius: 50px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text); font-size: 1rem; outline: none; cursor: pointer; }
.tool-note { color: var(--text-muted); font-size: 0.85rem; }
.compress-controls { display: flex; align-items: center; gap: 12px 16px; margin-bottom: 18px; flex-wrap: wrap; }
.compress-controls label { font-weight: 600; }
.compress-controls select { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font: inherit; }
/* one row per picture: its name, what happened to it, and its buttons */
.ci-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 20px; }
.ci-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.ci-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-facts { color: var(--text-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.ci-actions { display: flex; gap: 6px; }
.compress-controls input[type="range"] { flex: 1; max-width: 300px; }
.compress-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compress-preview img { width: 100%; border-radius: 12px; border: 1px solid var(--border); }
.ocr-progress { margin-bottom: 16px; }
.progress-bar { width: 100%; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.progress-fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width 0.3s; }

.maps-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.map-container { height: 450px; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; background: var(--bg-secondary); }
.map-features { display: flex; flex-direction: column; gap: 24px; }
.map-feature { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; display: flex; gap: 20px; transition: var(--transition); }
.map-feature:hover { border-color: var(--primary); transform: translateX(-5px); }
body[dir="ltr"] .map-feature:hover { transform: translateX(5px); }
.map-feature .icon { box-sizing: border-box; color: var(--primary); width: 50px; height: 50px; padding: 12px; border-radius: 14px; background: rgba(var(--primary-rgb), 0.1); flex-shrink: 0; }
.map-feature h4 { margin-bottom: 8px; }
.map-feature p { color: var(--text-muted); font-size: 0.95rem; }

.portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* Each card is a link to a working demo, previewed by an illustration of
   that demo's own interface rather than a flat colour block. */
.portfolio-card {
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; transition: var(--transition);
}
.portfolio-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: var(--primary); }

.portfolio-img { position: relative; display: block; aspect-ratio: 8 / 5; overflow: hidden; background: var(--bg-secondary); }
.portfolio-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--transition); }
.portfolio-card:hover .portfolio-img img { transform: scale(1.05); }

.portfolio-open {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff; font-weight: 700; font-size: 0.92rem;
    opacity: 0; transition: var(--transition);
}
.portfolio-card:hover .portfolio-open,
.portfolio-card:focus-visible .portfolio-open { opacity: 1; }

.portfolio-info { display: block; padding: 22px; }
.portfolio-info h4 { margin-bottom: 8px; font-size: 1.05rem; }
.portfolio-info p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.75; }

.portfolio-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.portfolio-tags span {
    font-size: 0.71rem; font-weight: 600; padding: 4px 10px; border-radius: 50px;
    background: rgba(var(--primary-rgb), 0.13); color: var(--primary);
}

.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; }
.contact-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; backdrop-filter: blur(10px); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 24px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.95rem; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text); font-size: 1rem; outline: none; transition: var(--transition); font-family: inherit; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1); }
.admin-table .row-unread { background: rgba(var(--primary-rgb), 0.08); }
.admin-table .row-unread td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
body[dir="ltr"] .admin-table .row-unread td:first-child { box-shadow: inset -3px 0 0 var(--primary); }
.form-status { margin-top: 16px; font-weight: 600; }
/* Honeypot: off-screen rather than display:none, so bots that skip hidden
   fields still fill it. Never shown to real visitors. */
/* Honeypot: hidden from people but still in the page and still fillable, so
   bots that skip display:none fill it and give themselves away. It used to be
   parked at left:-9999px, which made the document ten thousand pixels wide -
   on a phone in Arabic that pushed the real content off the side of the
   screen. Clipping in place costs nothing and adds no width. */
.hp-field {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.form-status.success { color: var(--success); }
.form-status.error { color: var(--danger); }
.contact-info { display: flex; flex-direction: column; gap: 24px; }
.contact-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; transition: var(--transition); }
.contact-card:hover { border-color: var(--primary); }
.contact-card .icon { font-size: 1.8rem; color: var(--primary); margin-bottom: 14px; }
.contact-card h4 { margin-bottom: 8px; }
.contact-card p { color: var(--text-muted); }
.contact-social { display: flex; gap: 16px; justify-content: center; margin-top: 20px; }
.contact-social a { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; transition: var(--transition); }
.contact-social a:hover { background: var(--primary); color: white; border-color: var(--primary); transform: translateY(-4px); }

.footer { background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 80px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 40px; margin-bottom: 60px; }
.footer-logo { height: 50px; width: auto; display: block; margin-bottom: 20px; color: var(--text); }
.footer-brand p { color: var(--text-muted); max-width: 300px; }
.footer-links h4, .footer-newsletter h4 { margin-bottom: 20px; font-size: 1.1rem; }
.footer-links a { display: block; color: var(--text-muted); text-decoration: none; padding: 6px 0; transition: var(--transition); }
.footer-links a:hover { color: var(--primary); padding-right: 6px; }
body[dir="ltr"] .footer-links a:hover { padding-right: 0; padding-left: 6px; }
.newsletter-form { display: flex; gap: 10px; }
.newsletter-form input { flex: 1; padding: 14px 18px; border-radius: 50px; border: 1px solid var(--border); background: var(--bg); color: var(--text); outline: none; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 30px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 20px; }
.footer-bottom p { color: var(--text-muted); font-size: 0.95rem; }
.security-badges { display: flex; gap: 16px; }
.security-badges span { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 50px; background: var(--bg-card); border: 1px solid var(--border); font-size: 0.85rem; color: var(--text-muted); }

/* ---------------------------------------------------------------
   The mobile menu.

   It carries the section links AND the account buttons, because the
   header hides those below 768px - without them a phone visitor has
   no way to sign in, and every tool on the site needs an account.
   --------------------------------------------------------------- */
.mobile-nav {
    position: fixed; top: 0; right: 0;
    width: min(330px, 86vw); height: 100dvh;
    background: var(--bg-card);
    backdrop-filter: blur(30px);
    border-left: 1px solid var(--border);
    z-index: 1002;
    display: flex; flex-direction: column;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
body[dir="ltr"] .mobile-nav { right: auto; left: 0; border-left: none; border-right: 1px solid var(--border); transform: translateX(-100%); }
/* The dir override above is more specific than a bare .active, so in every
   left to right language the panel stayed parked off screen and the mobile
   menu simply never opened. The open state has to out-specify it. */
.mobile-nav.active,
body[dir="ltr"] .mobile-nav.active { transform: translateX(0); }

.mobile-nav-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}
.mobile-nav-title { font-weight: 800; letter-spacing: .12em; font-size: .82rem; color: var(--text-muted); }

.mobile-nav-close {
    width: 44px; height: 44px; flex: none;
    background: none; border: none; cursor: pointer;
    position: relative; border-radius: 10px;
}
.mobile-nav-close:hover { background: var(--bg-secondary); }
.mobile-nav-close span {
    position: absolute; inset: 50% auto auto 50%;
    width: 18px; height: 2px; background: var(--text); border-radius: 2px;
}
.mobile-nav-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-nav-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

.mobile-nav-links { display: flex; flex-direction: column; padding: 6px 20px; }
.mobile-nav-links a {
    display: flex; align-items: center; min-height: 52px;
    color: var(--text); text-decoration: none;
    font-size: 1.02rem; font-weight: 600;
    border-bottom: 1px solid var(--border);
}
.mobile-nav-links a:last-child { border-bottom: none; }
.mobile-nav-links a:hover, .mobile-nav-links a:focus-visible { color: var(--primary); }

/* ---- icons ----------------------------------------------------------
   Font Awesome cost 278KB on a first visit - 102KB of CSS, a 150KB solid font
   and a 108KB brands font - to draw the 78 marks this site uses. Those 78 are
   now one 14KB sprite at /assets/icons.svg, referenced with <use>.

   fill: currentColor is what makes them behave like the text they sit in, the
   way the font glyphs did; the -0.125em is Font Awesome's own baseline nudge,
   kept so nothing shifts. */
.icon {
    width: 1em; height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    fill: currentColor;
    flex: none;
}

/* ---- the language pair in the footer ----
   These are here for a crawler as much as for a reader: Google had found
   /ar/ through the sitemap and never fetched it, because no page on the site
   linked to it. They are also the first thing on the page that says, in
   writing, that there is an Arabic version at all. */
.footer-lang {
    display: flex; gap: 8px; justify-content: center; align-items: center;
    padding: 0 0 18px; flex-wrap: wrap;
}
.footer-lang a {
    padding: 6px 16px; border-radius: 50px;
    border: 1px solid var(--border);
    color: var(--text-muted); text-decoration: none;
    font-size: .85rem; font-weight: 600;
    transition: color .15s, border-color .15s;
}
.footer-lang a:hover, .footer-lang a:focus-visible {
    color: var(--text); border-color: var(--primary);
}
.footer-lang a[aria-current="true"] {
    color: var(--primary); border-color: var(--primary);
}

/* ---- the download card at the top of the phone menu ----
   The link to the app was a row in the footer's Quick Links, which on a phone
   put it outside the menu entirely - nav.js clones the header nav, not the
   footer. Even once it is in the menu, a seventh row in a list of identical
   rows is easy to scroll past, so it gets a card, a colour and a second line
   saying what it costs and that it works with no connection. */
.mobile-nav-app {
    display: flex; align-items: center; gap: 14px;
    margin: 16px 20px 4px; padding: 14px 16px;
    border-radius: 16px; text-decoration: none; color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 10px 26px rgba(var(--primary-rgb), .3);
    transition: transform .15s ease, box-shadow .15s ease;
}
.mobile-nav-app:hover, .mobile-nav-app:focus-visible { color: #fff; box-shadow: 0 12px 30px rgba(var(--primary-rgb), .42); }
.mobile-nav-app:active { transform: scale(.985); }
.mobile-nav-app-icon {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1rem;
    background: rgba(255, 255, 255, .22);
}
.mobile-nav-app-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mobile-nav-app-text strong { font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.mobile-nav-app-text small { font-size: .77rem; opacity: .85; line-height: 1.3; }
/* inside the installed app there is nothing left to install */
html.is-app .mobile-nav-app { display: none; }

.mobile-nav-actions {
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px 20px 26px; margin-top: auto;
    border-top: 1px solid var(--border);
}
.mobile-nav-actions .btn { width: 100%; justify-content: center; min-height: 46px; }
.mobile-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1001; opacity: 0; visibility: hidden; transition: var(--transition); }
.mobile-overlay.active { opacity: 1; visibility: visible; }

.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

@media (max-width: 1280px) {
    /* The header CTA repeats what the hero and the contact section already
       offer, so it is the first thing to go when space runs short. */
    .header-actions .btn[data-i18n="nav.cta"] { display: none; }
    .nav { gap: 18px; }
    .nav a { font-size: 0.86rem; }
}

@media (max-width: 1080px) {
    /* Below this the nav cannot hold seven items in the longer languages
       (French and German run about 40% wider than Arabic), so it collapses
       to the mobile menu rather than wrapping onto a second line. */
    .nav { display: none; }
    .mobile-menu-btn { display: flex; }
}

@media (max-width: 1024px) {
    .services-grid, .about-grid { grid-template-columns: repeat(2, 1fr); }
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-content { grid-template-columns: 1fr; text-align: center; }
    .hero-text p { max-width: 100%; }
    .hero-btns { justify-content: center; }
    .hero-stats { justify-content: center; }
    .hero-visual { order: -1; height: 400px; }
}

@media (max-width: 768px) {
    .nav, .header-actions .btn { display: none; }
    .brand-logo { height: 38px; }
    .footer-logo { height: 44px; }
    .mobile-menu-btn { display: flex; }
    .header-actions { gap: 8px; }
    .section { padding: 70px 0; }
    .section-header h2 { font-size: 2rem; }
    .hero-text h1 { font-size: 2.2rem; }
    .services-grid, .about-grid, .portfolio-grid, .maps-grid, .contact-grid, .footer-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .security-result { flex-direction: column; }
    .security-input { flex-direction: column; }
    .hero-visual { height: 350px; }
    .card-main { width: 90%; left: 5%; }
    .card-float { width: 90px; height: 90px; font-size: 0.8rem; }
    .compress-preview { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }

    /* 0.71rem is 11px on a phone, below what is comfortable to read at arm's
       length. The desktop sizing is left alone. */
    .portfolio-tags span,
    .security-badges span { font-size: 0.78rem; }

    /* Links in a row need a finger's worth of height, not just a line's. */
    .footer-links a { padding: 11px 0; }
    .service-back, .tool-nav a { min-height: 40px; display: inline-flex; align-items: center; }
}

@media (max-width: 480px) {
    .brand-logo { height: 33px; }
    .hero-text h1 { font-size: 1.8rem; }
    .hero-stats { flex-direction: column; gap: 16px; }
    .tools-tabs { gap: 8px; }
    .tool-tab { padding: 10px 16px; font-size: 0.85rem; }
}

svg defs { position: absolute; }


/* ==================================================================
   Service article pages (includes/service_template.php)
================================================================== */
.service-page { padding-top: 90px; }

.service-hero { padding: 56px 0 40px; position: relative; overflow: hidden; }
.service-hero-grid {
    display: grid; grid-template-columns: 1.05fr 1fr;
    gap: 48px; align-items: center;
}
.service-back {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-muted); text-decoration: none;
    font-size: 0.9rem; font-weight: 600; margin-bottom: 22px;
}
.service-back:hover { color: var(--primary); }
body[dir="ltr"] .service-back .icon { transform: scaleX(-1); }

.service-hero-icon {
    width: 64px; height: 64px; border-radius: 18px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.6rem; margin-bottom: 22px;
}
.service-hero-text h1 { font-size: 2.4rem; font-weight: 800; margin-bottom: 16px; line-height: 1.3; }
.service-hero-text > p { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 28px; max-width: 52ch; }

.service-hero-art { color: var(--text); }
.service-art { width: 100%; height: auto; max-height: 300px; display: block; }
.service-art .sa-line   { stroke: currentColor; stroke-opacity: .8;  stroke-width: 3; fill: none; }
.service-art .sa-soft   { stroke: currentColor; stroke-opacity: .22; stroke-width: 2; fill: none; }
.service-art .sa-fill   { fill: currentColor; fill-opacity: .3; }
.service-art .sa-accent { stroke: #01AF86; stroke-width: 3.4; fill: none; stroke-linecap: round; }
.service-art .sa-accent-f { fill: #01AF86; }
.service-art .sa-cool   { stroke: var(--secondary); stroke-width: 3; fill: none; stroke-linecap: round; }
.service-art .sa-cool-f { fill: var(--secondary); }
.service-art .sa-glyph  { fill: currentColor; font-size: 62px; font-weight: 800; font-family: var(--font-ar), sans-serif; }
.service-art .sa-glyph-en { fill: var(--secondary); font-family: Inter, sans-serif; }

.service-body { padding-bottom: 90px; max-width: 900px; }

.service-intro p {
    font-size: 1.12rem; line-height: 1.95; margin-bottom: 18px;
}
.service-intro p:first-child::first-letter { font-size: 1.4em; font-weight: 800; color: var(--primary); }

.service-article { margin-top: 48px; display: grid; gap: 34px; }
.service-block h2 { font-size: 1.35rem; margin-bottom: 10px; }
.service-block h2::before {
    content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--success); margin-left: 12px; vertical-align: middle;
}
body[dir="ltr"] .service-block h2::before { margin-left: 0; margin-right: 12px; }
.service-block p { color: var(--text-muted); line-height: 1.9; }

.service-process { margin-top: 62px; }
.service-process h2, .service-faq h2, .service-features h2, .service-cta h2 {
    font-size: 1.6rem; margin-bottom: 24px;
}
.process-list { list-style: none; display: grid; gap: 18px; counter-reset: step; }
.process-list li {
    display: flex; gap: 18px; align-items: flex-start;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 22px 24px;
}
.process-num {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.process-list h3 { font-size: 1.05rem; margin-bottom: 5px; }
.process-list p { color: var(--text-muted); font-size: 0.95rem; }

.service-two-col {
    margin-top: 62px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.service-features ul { list-style: none; display: grid; gap: 12px; }
.service-features li {
    display: flex; align-items: flex-start; gap: 10px;
    color: var(--text-muted); line-height: 1.7;
}
.service-features li .icon { color: var(--success); margin-top: 5px; flex-shrink: 0; }
.service-deliverables li .icon { color: var(--secondary); }

.service-faq { margin-top: 62px; }
.faq-item {
    border: 1px solid var(--border); border-radius: 14px;
    padding: 16px 20px; margin-bottom: 12px; background: var(--bg-card);
}
.faq-item summary {
    cursor: pointer; font-weight: 700; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; color: var(--primary); font-size: 1.4rem; font-weight: 400; line-height: 1;
}
.faq-item[open] summary::after { content: '3'; }
.faq-item p { color: var(--text-muted); margin-top: 12px; line-height: 1.85; }

.service-cta {
    margin-top: 70px; padding: 40px; border-radius: var(--radius);
    background: var(--bg-card); border: 1px solid var(--border);
}
.service-cta > p { color: var(--text-muted); margin-bottom: 22px; }
.service-cta-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.service-form .form-group { margin-bottom: 18px; }

@media (max-width: 900px) {
    .service-hero-grid { grid-template-columns: 1fr; gap: 28px; }
    .service-hero-art { order: -1; max-width: 380px; }
    .service-two-col { grid-template-columns: 1fr; }
    .service-hero-text h1 { font-size: 1.9rem; }
    .service-cta { padding: 28px 22px; }
}

.section-link {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 24px;
}
.section-link .icon { transition: var(--transition); }
.section-link:hover .icon { transform: translateX(-5px); }
body[dir="ltr"] .section-link .icon { transform: scaleX(-1); }
body[dir="ltr"] .section-link:hover .icon { transform: scaleX(-1) translateX(-5px); }


/* ==================================================================
   Tool cards (homepage grid + "أدوات أخرى" on each tool page)
================================================================== */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }

.tool-card {
    position: relative; display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 30px 26px 24px;
    transition: var(--transition); backdrop-filter: blur(10px);
}
.tool-card:hover { transform: translateY(-6px); border-color: var(--primary); box-shadow: var(--shadow); }
.tool-card h3 { font-size: 1.12rem; margin-bottom: 10px; }
.tool-card p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.75; flex: 1; }

.tool-card-icon {
    width: 52px; height: 52px; border-radius: 15px; margin-bottom: 18px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.3rem;
}
.tool-card-service .tool-card-icon { background: linear-gradient(135deg, var(--success), var(--secondary)); }

.tool-badge {
    position: absolute; top: 18px; inset-inline-end: 18px;
    font-size: 0.72rem; font-weight: 700; padding: 5px 11px; border-radius: 50px;
    background: rgba(var(--primary-rgb), 0.14); color: var(--primary);
}
.tool-card-service .tool-badge { background: rgba(var(--success-rgb), 0.15); color: var(--success); }

.tool-open {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
    font-size: 0.88rem; font-weight: 700; color: var(--primary);
}
.tool-open .icon { transition: var(--transition); }
.tool-card:hover .tool-open .icon { transform: translateX(-5px); }
body[dir="ltr"] .tool-open .icon { transform: scaleX(-1); }
body[dir="ltr"] .tool-card:hover .tool-open .icon { transform: scaleX(-1) translateX(-5px); }

/* ==================================================================
   Tool pages
================================================================== */
.tool-page { padding-top: 90px; }
.tool-hero { padding: 46px 0 26px; }
.tool-hero-inner { display: flex; align-items: flex-start; gap: 22px; }
.tool-hero-inner h1 { font-size: 2.05rem; font-weight: 800; margin-bottom: 10px; }
.tool-hero-inner > div > p { color: var(--text-muted); max-width: 62ch; }

.tool-privacy {
    margin-top: 26px; padding: 14px 18px; border-radius: 12px;
    background: rgba(var(--success-rgb), 0.08); border: 1px solid rgba(var(--success-rgb), 0.25);
    color: var(--text-muted); font-size: 0.9rem;
    display: flex; align-items: center; gap: 10px;
}
.tool-privacy .icon { color: var(--success); }

.tool-body { padding-bottom: 40px; max-width: 900px; }
.tool-subhead { font-size: 1.05rem; margin-bottom: 6px; }
.tool-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 22px 0; }
/* images to PDF: the pages in order, each with its own buttons */
.i2p-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.i2p-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.i2p-bad { border-color: #d9534f; }
.i2p-thumb { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: var(--bg-secondary); }
.i2p-thumb img { max-width: 60px; max-height: 60px; transition: transform .2s; }
.i2p-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.i2p-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.i2p-facts { color: var(--text-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.i2p-tools { display: flex; gap: 4px; }
.i2p-tools .btn { min-width: 36px; padding-inline: 8px; }
.i2p-options { display: flex; flex-wrap: wrap; gap: 12px 18px; margin: 16px 0; }
.i2p-options label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .9rem; }
.i2p-options select { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font: inherit; }


/* merge-images: the live preview of the sheet being built */
.mrg-preview { display: grid; place-items: center; margin: 16px 0 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background:
    repeating-conic-gradient(var(--bg-secondary) 0% 25%, var(--bg-card) 0% 50%) 50% / 24px 24px; }
.mrg-preview:empty { display: none; }
.mrg-canvas { max-width: 100%; max-height: 520px; height: auto; border-radius: 6px; box-shadow: 0 2px 12px rgba(0, 0, 0, .18); }
#mrgNote { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .ci-row { grid-template-columns: 1fr; }
    .i2p-item { grid-template-columns: 52px minmax(0, 1fr); }
    .i2p-tools { grid-column: 1 / -1; justify-content: flex-end; }
}
.tool-controls label { font-weight: 600; }
.tool-controls select, .tool-controls input[type="range"] { max-width: 320px; }
.tool-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0; }
.tool-result { margin-top: 18px; }
.tool-result .btn { margin-top: 12px; }
.tool-error { color: var(--danger); font-weight: 600; }
.tool-success { color: var(--success); font-weight: 600; }
.tool-output textarea { width: 100%; margin-bottom: 12px; }
.sr-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.field-hint { display: block; color: var(--text-muted); font-size: 0.82rem; margin-top: 6px; }

.file-list { list-style: none; display: grid; gap: 10px; margin: 16px 0; }
.file-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 16px;
}
.file-list .file-name { font-size: 0.9rem; word-break: break-all; }
.file-list .file-actions { display: flex; gap: 6px; flex-shrink: 0; }
.file-list .icon-btn:disabled { opacity: .3; cursor: not-allowed; }

/* ---- merge / split: two halves of one page ---- */
.tool-pane[hidden] { display: none; }
/* the tabs sit above one tool, not a page of them, so they start at the edge */
.tool-area .tools-tabs { justify-content: flex-start; margin-bottom: 24px; }

.split-methods { display: grid; gap: 12px; margin: 14px 0 4px; }
.split-method {
    display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 14px 16px;
    transition: border-color .15s, background .15s;
}
.split-method:hover { border-color: var(--primary); }
.split-method.is-active { border-color: var(--primary); background: rgba(var(--primary-rgb), .07); }
.split-method input[type="radio"] { margin-top: 4px; accent-color: var(--primary); flex-shrink: 0; }
.split-method-body { display: grid; gap: 8px; flex: 1; min-width: 0; }
.split-method-body small { color: var(--text-muted); font-size: 0.82rem; }

.split-input {
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 10px;
    padding: 9px 12px; font: inherit; font-size: 0.92rem;
    max-width: 260px; width: 100%;
}
.split-input:focus { outline: none; border-color: var(--primary); }
.split-input:disabled { opacity: .45; cursor: not-allowed; }
/* page numbers read left to right even on an Arabic page */
#splitRanges, #splitEvery { direction: ltr; text-align: start; }

.split-every { display: flex; align-items: center; gap: 10px; }
.split-every .split-input { max-width: 90px; }
.split-every span { color: var(--text-muted); font-size: 0.88rem; }

.split-parts li { gap: 12px; }
.split-parts .file-name { flex: 1; min-width: 0; }
.split-parts .btn { flex-shrink: 0; }

.rbg-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 22px 0; }
.rbg-preview figure { margin: 0; }
.rbg-preview figcaption { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; }
.rbg-preview canvas { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); }
.rbg-transparent canvas {
    background-image:
        linear-gradient(45deg, rgba(128,128,128,.25) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(128,128,128,.25) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(128,128,128,.25) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(128,128,128,.25) 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

/* ---- the little editor on the background remover ---- */
.rbg-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.rbg-mode {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; font: inherit; font-size: 0.9rem; cursor: pointer;
    color: var(--text-muted); background: var(--bg-card);
    border: 1px solid var(--border); border-radius: 10px;
    transition: color .15s, border-color .15s, background .15s;
}
.rbg-mode:hover { color: var(--text); border-color: var(--primary); }
.rbg-mode.active { color: #fff; background: var(--primary); border-color: var(--primary); }

/* the method row: the two methods, then - for the AI only - the two models */
.rbg-methods { align-items: center; margin-bottom: 10px; }
.rbg-divider { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--border); }
.rbg-model { padding: 7px 13px; font-size: 0.84rem; }
/* a size is written left to right in every language, or RTL turns "42 MB" into "MB 42" */
.rbg-model-size { opacity: .75; font-size: .78rem; direction: ltr; unicode-bidi: isolate; }
.rbg-model-size:empty { display: none; }
/* .rbg-mode sets display, which would otherwise beat the hidden attribute */
[data-rbg-only][hidden] { display: none !important; }
.rbg-ai-status { margin: 4px 0 2px; font-weight: 600; color: var(--text); }

.rbg-settings {
    display: grid; grid-template-columns: auto 1fr 3ch; align-items: center;
    gap: 10px 14px; margin-bottom: 6px;
}
.rbg-settings label { font-size: 0.88rem; color: var(--text-muted); white-space: nowrap; }
.rbg-settings input[type="range"] { width: 100%; accent-color: var(--primary); }
.rbg-settings span { font-size: 0.85rem; color: var(--text-muted); text-align: center; }

/* the crop rectangle is drawn over the canvas, so the stage is its frame */
.rbg-stage { position: relative; line-height: 0; }
/* the pointer must draw, not scroll the page under the finger */
.rbg-stage canvas { touch-action: none; cursor: crosshair; }
.rbg-stage canvas.is-cropping { cursor: cell; }

/* while the worker is thinking, the page can finally say so */
.rbg-stage.is-working::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(10, 12, 24, .35);
    border-radius: 12px;
    pointer-events: none;
}
.rbg-stage.is-working::before {
    content: "";
    position: absolute; z-index: 2;
    top: 50%; inset-inline-start: 50%;
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border: 3px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rbg-spin .7s linear infinite;
    pointer-events: none;
}
@keyframes rbg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .rbg-stage.is-working::before { animation-duration: 2.4s; }
}
.rbg-crop {
    position: absolute; pointer-events: none;
    border: 2px dashed #fff; border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 0 9999px rgba(0,0,0,.35);
}

/* how many colours are being treated as background */
.rbg-keys { color: var(--text-muted); font-size: .84rem; margin: 6px 0 0; }
.rbg-keys strong { color: var(--text); }

/* the colour that goes behind the cut-out */
.rbg-backdrop {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 16px 0 4px;
}
.rbg-backdrop-label {
    font-size: .88rem; color: var(--text-muted);
    margin-inline-end: 4px; white-space: nowrap;
}
.rbg-swatch {
    width: 30px; height: 30px; padding: 0; cursor: pointer;
    border: 2px solid var(--border); border-radius: 8px;
    transition: transform .12s, border-color .12s;
}
.rbg-swatch:hover { transform: scale(1.08); }
.rbg-swatch.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .35);
}
/* "no colour" is drawn as the same checkerboard that means transparent
   everywhere else on this page, so the swatch says what it does */
.rbg-swatch-none {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, rgba(128,128,128,.4) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(128,128,128,.4) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(128,128,128,.4) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(128,128,128,.4) 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}
.rbg-swatch-custom {
    display: grid; place-items: center; overflow: hidden;
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}
.rbg-swatch-custom input[type="color"] {
    width: 200%; height: 200%; border: 0; padding: 0;
    background: none; cursor: pointer; opacity: 0;
}


/* ---- PDF to Excel: the table we found, before it is downloaded ---- */
.p2x-preview {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    margin: 14px 0 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
}
.p2x-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}
.p2x-table th, .p2x-table td {
    padding: 8px 12px;
    text-align: start;
    vertical-align: top;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
.p2x-table th {
    position: sticky; top: 0;
    background: var(--bg-card);
    font-weight: 700;
    color: var(--text);
}
.p2x-table tr:last-child td { border-bottom: 0; }
.p2x-table td { color: var(--text-muted); }
/* a number that will be a real number in Excel lines up like one */
.p2x-table td.p2x-num { font-variant-numeric: tabular-nums; text-align: end; direction: ltr; }
.p2x-table[dir="rtl"] td.p2x-num { text-align: left; }
.p2x-caption { margin: 18px 0 8px; font-size: .95rem; }
.p2x-caption:first-child { margin-top: 0; }

.tool-limits {
    padding-inline-start: 20px;
    display: grid; gap: 8px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.tool-howto { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--border); }
.tool-howto h2 { font-size: 1.3rem; margin-bottom: 16px; }
.tool-howto ol { padding-inline-start: 20px; display: grid; gap: 8px; color: var(--text-muted); }
.tool-note { color: var(--text-muted); font-size: 0.9rem; line-height: 1.8; margin-top: 14px; }
.tool-note a { color: var(--primary); }

.tool-related { padding: 40px 0 90px; border-top: 1px solid var(--border); }
.tool-related h2 { font-size: 1.35rem; margin-bottom: 24px; }

/* ---- service tiers (proofreading) ---- */
.tier-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 46px; }
.tier-card {
    position: relative; padding: 30px 26px; border-radius: var(--radius);
    background: var(--bg-card); border: 1px solid var(--border);
}
.tier-card-express { border-color: var(--success); }
.tier-price {
    display: inline-block; font-weight: 800; font-size: 0.85rem; padding: 6px 14px;
    border-radius: 50px; background: rgba(var(--primary-rgb),.14); color: var(--primary); margin-bottom: 14px;
}
.tier-card-express .tier-price { background: rgba(var(--success-rgb),.16); color: var(--success); }
.tier-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.tier-time { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.tier-card ul { list-style: none; display: grid; gap: 9px; }
.tier-card li { color: var(--text-muted); font-size: 0.92rem; display: flex; gap: 9px; }
.tier-card li::before { content: '\2713'; color: var(--success); font-weight: 700; }

.tier-choice { border: 0; padding: 0; margin-bottom: 26px; }
.tier-choice legend { font-weight: 700; margin-bottom: 12px; padding: 0; }
.tier-option { display: block; margin-bottom: 10px; cursor: pointer; }
.tier-option input { margin-inline-end: 10px; }
.tier-option span { display: inline-flex; flex-direction: column; vertical-align: middle; }
.tier-option small { color: var(--text-muted); font-size: 0.82rem; }

.tool-request { margin-top: 10px; }
.tool-request h2 { font-size: 1.5rem; margin-bottom: 14px; }
.request-lead { color: var(--text-muted); margin-bottom: 24px; max-width: 64ch; }
.request-form .form-group { margin-bottom: 20px; }

@media (max-width: 768px) {
    .tier-cards, .rbg-preview { grid-template-columns: 1fr; }
    .table-search { min-width: 0; flex: 1 1 100%; }
    .split-parts li { flex-wrap: wrap; }
    .split-input { max-width: 100%; }
    .rbg-settings { grid-template-columns: 1fr auto; }
    .rbg-settings label { grid-column: 1 / -1; margin-bottom: -4px; }
    .tool-hero-inner { flex-direction: column; gap: 16px; }
    .tool-hero-inner h1 { font-size: 1.65rem; }
}

/* ---- admin: text requests ---- */
.admin-stat-alert { border-color: var(--danger); }
.admin-stat-alert .icon { color: var(--danger); }
.admin-table .row-overdue { background: rgba(var(--danger-rgb), 0.07); }
.admin-table .row-overdue td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
body[dir="ltr"] .admin-table .row-overdue td:first-child { box-shadow: inset -3px 0 0 var(--danger); }
.status-express { background: rgba(var(--danger-rgb), .16); color: var(--danger); }
.overdue-flag { display: block; color: var(--danger); font-weight: 700; font-size: .75rem; margin-top: 4px; }
.doc-link {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
    color: var(--primary); text-decoration: none; font-size: .85rem; font-weight: 600;
}
.doc-link:hover { text-decoration: underline; }

/* ---- members-only gate on tool pages ---- */
.tool-gate {
    text-align: center; padding: 48px 32px; border-radius: var(--radius);
    background: var(--bg-card); border: 1px solid var(--border); margin-bottom: 44px;
}
.tool-gate-icon {
    width: 66px; height: 66px; margin: 0 auto 22px; border-radius: 20px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.5rem;
}
.tool-gate h2 { font-size: 1.5rem; margin-bottom: 12px; }
.tool-gate > p { color: var(--text-muted); max-width: 54ch; margin: 0 auto 26px; line-height: 1.9; }
.tool-gate-perks {
    list-style: none; display: grid; gap: 12px; max-width: 480px;
    margin: 0 auto 30px; text-align: start;
}
.tool-gate-perks li {
    display: flex; align-items: center; gap: 12px;
    color: var(--text-muted); font-size: 0.94rem;
}
.tool-gate-perks .icon { color: var(--success); width: 20px; flex-shrink: 0; }
.tool-gate .service-cta-btns { justify-content: center; }
.tool-open-locked { color: var(--text-muted); }
.tool-card:hover .tool-open-locked { color: var(--primary); }

/* ==================================================================
   Client portal (dashboard.php)
================================================================== */
.dash-head-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.dash-since { display: block; margin-top: 6px; color: var(--text-muted); font-size: 0.82rem; }
.dash-section-title { font-size: 1.4rem; margin: 44px 0 20px; }

.dash-actions {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.dash-action {
    display: flex; align-items: center; gap: 15px;
    padding: 20px 22px; border-radius: 16px; text-decoration: none; color: inherit;
    background: var(--bg-card); border: 1px solid var(--border);
    transition: var(--transition);
}
.dash-action:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: var(--shadow); }
.dash-action-icon {
    width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
    background: rgba(var(--primary-rgb), 0.13); color: var(--primary);
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.dash-action-primary .dash-action-icon {
    background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff;
}
.dash-action-success .dash-action-icon { background: rgba(var(--success-rgb), 0.15); color: var(--success); }
.dash-action h3 { font-size: 0.98rem; margin-bottom: 3px; }
.dash-action p { color: var(--text-muted); font-size: 0.83rem; }
.dash-action-go { margin-inline-start: auto; color: var(--text-muted); transition: var(--transition); }
.dash-action:hover .dash-action-go { color: var(--primary); transform: translateX(-4px); }
body[dir="ltr"] .dash-action-go { transform: scaleX(-1); }
body[dir="ltr"] .dash-action:hover .dash-action-go { transform: scaleX(-1) translateX(-4px); }

.dash-account { margin-top: 54px; }
.dash-account h2 { font-size: 1.4rem; margin-bottom: 20px; }
.dash-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dash-form {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 28px 26px;
}
.dash-form h3 { font-size: 1.05rem; margin-bottom: 18px; }
.dash-form .form-group { margin-bottom: 16px; }
.dash-form input:disabled { opacity: .6; cursor: not-allowed; }

@media (max-width: 768px) {
    .dash-account-grid { grid-template-columns: 1fr; }
    .dash-head-actions { width: 100%; }
}
.is-hidden { display: none !important; }

/* ---- PDF -> Word: structured preview ---- */
.doc-preview {
    max-height: 460px; overflow-y: auto;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 14px; padding: 26px 30px; margin: 18px 0;
    line-height: 1.85; font-size: 0.92rem;
}
.doc-preview h3 { font-size: 1.3rem; margin: 0 0 14px; }
.doc-preview h4 { font-size: 1.08rem; margin: 22px 0 10px; color: var(--primary); }
.doc-preview h5 { font-size: 0.98rem; margin: 18px 0 8px; font-weight: 700; }
.doc-preview p { color: var(--text-muted); margin-bottom: 12px; }
.doc-preview .pv-center { text-align: center; }
.doc-preview .pv-list { margin: 0 0 14px; padding-inline-start: 22px; }
.doc-preview .pv-list li { color: var(--text-muted); margin-bottom: 6px; }
.doc-preview [dir="rtl"] { text-align: right; }
/* tables and pictures recovered from the PDF, shown as they will be in Word */
.doc-preview .pv-table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: .9rem; }
.doc-preview .pv-table td { border: 1px solid var(--border); padding: 6px 8px; color: var(--text-muted); vertical-align: top; }
.doc-preview .pv-image { margin: 0 0 14px; }
.doc-preview .pv-image img { max-width: 100%; max-height: 220px; border-radius: 6px; }
.doc-preview::-webkit-scrollbar { width: 8px; }
.doc-preview::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }


/* ---------------------------------------------------------------
   Initial project plans, and the client's account manager.
   The plan lives inside a <details> so a long timeline never pushes
   the rest of the table off the screen.
   --------------------------------------------------------------- */
.dash-manager {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    margin-bottom: 22px;
    border-radius: 14px;
    background: var(--card-bg, rgba(255, 255, 255, .04));
    border: 1px solid var(--border-color, rgba(255, 255, 255, .08));
}
.dash-manager .icon { font-size: 1.4rem; color: var(--primary); }
.dash-manager div { display: flex; flex-direction: column; gap: 2px; }
.dash-manager strong { font-size: .85rem; opacity: .75; font-weight: 600; }

.plan-box > summary,
.plan-admin > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.plan-box > summary small { opacity: .7; font-weight: 400; }

.plan { padding: 12px 0 4px; max-width: 560px; }
.plan-summary { margin: 0 0 8px; font-size: .92rem; }
.plan-total { margin: 0 0 10px; font-size: .9rem; }

.plan-draft {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .84rem;
    line-height: 1.65;
    background: rgba(253, 203, 110, .12);
    border: 1px solid rgba(253, 203, 110, .35);
}

.plan-phases {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.plan-phase {
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--card-bg, rgba(255, 255, 255, .03));
    border-inline-start: 3px solid var(--primary);
}
.plan-phase-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.plan-phase-name { font-weight: 700; font-size: .92rem; }
.plan-phase-days { font-size: .8rem; opacity: .7; white-space: nowrap; }
.plan-phase-detail { margin: 4px 0 0; font-size: .85rem; line-height: 1.7; opacity: .85; }

@media (max-width: 600px) {
    .plan { max-width: 100%; }
    .plan-phase-head { flex-direction: column; gap: 2px; }
}


/* ---------------------------------------------------------------
   The eye on a password box. inset-inline-end rather than right, so
   it sits on the correct side in Arabic without a second rule.
   --------------------------------------------------------------- */
.pw-field { position: relative; display: block; }
.pw-field input { width: 100%; padding-inline-end: 46px; }

.pw-toggle {
    position: absolute;
    inset-inline-end: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    transition: var(--transition);
}
.pw-toggle:hover { color: var(--primary); background: var(--bg-secondary); }
.pw-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pw-toggle[aria-pressed="true"] { color: var(--primary); }


/* ---------------------------------------------------------------
   Work sent back to the client, and the form the team sends it with.
   --------------------------------------------------------------- */
.delivered, .deliver-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.delivered li, .deliver-list li { display: flex; flex-direction: column; gap: 1px; }
.delivered a, .deliver-list a {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--primary); text-decoration: none; font-weight: 600; font-size: .9rem;
}
.delivered a:hover, .deliver-list a:hover { text-decoration: underline; }
.delivered small, .deliver-list small { color: var(--text-muted); font-size: .78rem; }

.deliver { display: flex; flex-direction: column; gap: 9px; min-width: 190px; }
.deliver input[type="file"] { font-size: .8rem; max-width: 180px; }

.form-hint { display: block; margin-top: 5px; color: var(--text-muted); font-size: .82rem; }


/* ---------------------------------------------------------------
   Tables in the two panels.

   These had no sizing rules at all, so the browser fell back to
   fitting nine columns into whatever width was available - and the
   way it does that is to crush the widest column until every Arabic
   word sits on its own line. Give the table the width its content
   needs and let it scroll inside its own box instead; the page
   itself must never scroll sideways.
   --------------------------------------------------------------- */
.admin-table-wrap, .dash-table-wrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/* the menu entry that leads to it, so nobody has to scroll to find the app */
.nav-app { display: inline-flex; align-items: center; gap: 7px; }
.nav-app .icon { font-size: .9em; opacity: .85; }
html.is-app .nav-app { display: none; }

/* ---- the invitation to install, as a panel in the page ---- */
/* It used to float above the bottom of the screen. On a phone that corner is
   already taken by the WhatsApp and security buttons, so the invitation landed
   on top of the content and in the way of them both. It now sits in the page
   and pushes nothing around. */
.install-panel {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin-top: 34px; padding: 22px 24px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb),.14), rgba(var(--primary-rgb),.04));
    border: 1px solid var(--border); border-radius: 18px;
}
.install-panel[hidden] { display: none; }
.install-panel-actions { flex-shrink: 0; }

/* The steps shown where the browser has no install button of its own. Kept
   plain and small: it is a fallback, not the headline. */
.install-how { max-width: 330px; }
.install-how-head {
    font-size: .82rem; font-weight: 700; color: var(--text);
    margin: 0 0 6px;
}
.install-how ol {
    margin: 0; padding-inline-start: 18px;
    display: grid; gap: 4px;
    color: var(--text-muted); font-size: .84rem; line-height: 1.6;
}
.install-panel-icon {
    flex-shrink: 0; width: 52px; height: 52px;
    display: grid; place-items: center;
    background: var(--primary); color: #fff;
    border-radius: 14px; font-size: 1.35rem;
}
.install-panel-text { flex: 1; min-width: 220px; }
.install-panel-text h3 { font-size: 1.1rem; margin: 0 0 6px; }
.install-panel-text p { color: var(--text-muted); font-size: .92rem; margin: 0; line-height: 1.7; }
.install-panel-go { flex-shrink: 0; }
@media (max-width: 560px) {
    .install-panel { gap: 14px; padding: 18px; }
    .install-panel-go { width: 100%; }
    .install-panel-actions { width: 100%; }
    .install-how { max-width: none; }
}

/* ---- the app's own shape, once it is installed ----
   A window with no address bar and no tabs is not a web page, and laying it
   out like one wastes the part of the screen a thumb can actually reach. In
   the installed app the site gets a bar along the bottom, the way an app on a
   phone does. None of this applies in a browser tab. */
.app-bar { display: none; }

html.is-app .app-bar {
    position: fixed; z-index: 70;
    inset-inline: 0; bottom: 0;
    display: flex;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    /* clears the home indicator on a phone with no button */
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .30);
}
html.is-app .app-bar-item {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 4px 9px;
    color: var(--text-muted); text-decoration: none;
    font-size: .7rem; line-height: 1.2;
    transition: color .15s;
}
html.is-app .app-bar-item .icon { font-size: 1.15rem; }
html.is-app .app-bar-item span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.is-app .app-bar-item:hover { color: var(--text); }
html.is-app .app-bar-item.is-here { color: var(--primary); }
html.is-app .app-bar-item.is-here .icon { transform: translateY(-1px); }

/* room for the bar, so nothing hides behind it */
html.is-app body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

/* The two round buttons live at bottom: 30px. In the app the bar is there, so
   they move up above it rather than sitting on top of it - which is the whole
   complaint that started this. */
html.is-app .whatsapp-float,
html.is-app .security-shield {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

/* an installed app has its own window; it does not need the page's own
   invitation to install it again */
html.is-app .install-panel { display: none; }

/* ---- search + export, above a table ---- */
/* The wrapper scrolls sideways, so the toolbar has to be pinned to the edge
   that is on screen; left alone it would slide away with the table and be
   unreachable exactly when a wide table makes searching most useful. */
.table-tools {
    position: sticky;
    inset-inline-start: 0;
    width: max-content;
    max-width: 100%;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 0 16px;
    z-index: 2;
}
.table-search {
    background: var(--bg-card); color: var(--text);
    border: 1px solid var(--border); border-radius: 10px;
    padding: 9px 14px; font: inherit; font-size: .9rem;
    min-width: 260px; max-width: 100%;
}
.table-search:focus { outline: none; border-color: var(--primary); }
.table-search::placeholder { color: var(--text-muted); }
.table-count { color: var(--text-muted); font-size: .85rem; white-space: nowrap; }
.table-count.is-empty { color: var(--danger); }
.table-no-match { margin-top: 12px; }

.admin-table, .dash-table {
    /* as wide as the content needs, but never narrower than the box */
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.admin-table th, .admin-table td,
.dash-table th, .dash-table td {
    padding: 13px 15px;
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

.admin-table th, .dash-table th {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    border-bottom: 2px solid var(--border);
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}

/* A cell keeps to one line unless it is genuinely prose. Letting a date wrap
   over three lines is what made the panel look broken, and no amount of extra
   column width fixes it - only saying so does. */
.admin-table td, .dash-table td { white-space: nowrap; }
.admin-table td:first-child, .dash-table td:first-child { opacity: .6; }

/* The columns that really are paragraphs, and everything inside them.
   These have to out-specify `.admin-table td` above - a bare `.dash-details`
   loses to it, and the description column would silently stop wrapping. */
.admin-table td.dash-details, .dash-table td.dash-details,
.admin-table td.dash-details *, .dash-table td.dash-details *,
.admin-table td .plan-admin, .admin-table td .plan-admin *,
.dash-table td .plan-box, .dash-table td .plan-box *,
.admin-table td .deliver, .admin-table td .deliver *,
.dash-table td .delivered, .dash-table td .delivered * { white-space: normal; }

/* The description is the one column that should read as a paragraph. */
.dash-details { min-width: 250px; max-width: 340px; line-height: 1.65; }

/* Controls in a cell keep their own room rather than stacking letter by letter. */
.admin-table .admin-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-table .admin-form select { min-width: 120px; }
.admin-table .deliver { min-width: 200px; }

.admin-table .admin-email { display: block; font-size: .8rem; color: var(--text-muted); font-weight: 400; }

@media (max-width: 900px) {
    .admin-table th, .admin-table td,
    .dash-table th, .dash-table td { padding: 10px 12px; }
    .dash-details { min-width: 200px; max-width: 260px; }
}


/* ---------------------------------------------------------------
   The free-runs notice on a tool a guest is trying.
   --------------------------------------------------------------- */
.try-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 14px 20px; margin-bottom: 22px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.try-banner .try-left { margin: 0; font-weight: 600; font-size: .95rem; }
.try-banner .try-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Out of runs: the notice becomes the thing to act on. */
.try-banner.spent {
    background: rgba(var(--primary-rgb), .1);
    border-color: var(--primary);
}

/* The tool itself steps back rather than disappearing, so the visitor can see
   what they are being asked to sign in for. */
.tool-area.is-locked { opacity: .45; pointer-events: none; filter: grayscale(.5); }

@media (max-width: 600px) {
    .try-banner { flex-direction: column; align-items: stretch; }
    .try-banner .btn { width: 100%; justify-content: center; }
}