/* === css/variables.css === */
/**
 * Haplic — Unified Design Tokens
 * Azure: #0090f0 | Cyan: #4db8ff | Navy: #0b1120
 */
:root {
  /* Tells the browser this is a dark UI: native scrollbars, <select> dropdowns,
     date pickers and autofill stop rendering as light panels over the dark theme. */
  color-scheme: dark;

  /* Backgrounds */
  --color-bg-base: #060911;
  --color-bg-surface: #0b1120;
  --color-bg-card: rgba(14, 22, 39, 0.75);

  /* Brand Colors */
  --color-green: #0090f0;
  --color-green-glow: rgba(0,144,240, 0.4);
  --color-cyan: #4db8ff;
  --color-cyan-light: #51b6f9;
  --color-cyan-glow: rgba(77,184,255, 0.35);
  --color-gold: #fbbf24;
  --color-gold-light: #fde68a;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #2563eb;
  --color-success: #10b981;
  /* Promoted out of the legacy `emerald` aliases, which were the only place these two
     values lived. three_d.css is their one remaining user. */
  --color-success-dark: #047857;
  --color-success-glow: rgba(16, 185, 129, 0.35);

  /* Text */
  --color-text: #f8fafc;
  --color-text-muted: #94a3b8;
  /* Was #64748b, which failed AA on all three surfaces (4.18 base / 3.96 surface /
     3.80 card). #7a879c is the least visual shift that clears 4.5:1 on the card too
     (5.47 / 5.18 / 4.97). It is only ever used as a text colour, never a background
     or border, so raising it cannot weaken contrast anywhere else. */
  --color-text-dim: #7a879c;
  --color-text-strong: #e2e8f0;

  /* Borders & Glass */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  /* The brand green at a quieter alpha. Used as written for hairline edges and soft
     glows — both are the same intent: the green as a hairline, not as a highlight. */
  --color-border-green: rgba(0,144,240, 0.3);

  /* Typography Scale — 9 steps.
     `2xs` and `3xl` were added after measuring the real usage: tiny badges and meta labels
     cluster at ~9.9px, and the display numerals at 38.4px, so both had been hand-written
     because the scale simply had no name for them. */
  --text-2xs: 0.62rem;
  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-base: 0.92rem;
  --text-md: 1.05rem;
  --text-lg: 1.25rem;
  --text-xl: 1.55rem;
  --text-2xl: 1.85rem;
  --text-3xl: 2.4rem;
  /* The scale stopped at 38.4px, so the landing H1 (--text-2xl, 29.6px) was SMALLER than
     its own 600px override (2rem = 32px) and tied with a mid-page section heading — an
     inverted scale with no display step. `4xl` is that missing step: the hero headline is
     the largest type on the page at every width. */
  --text-4xl: 3rem;

  /* Section headings. The page had one step (--text-2xl) doing three jobs: hero, section
     title and sub-heading all resolved to the same 29.6px, so nothing read as a hierarchy.
     These two name the middle steps so the ladder is 48 / 28 / 20. */
  --text-h2: 1.75rem;
  --text-h3: 1.25rem;

  /* Weight ladder. Measured across the built bundles: 700x47, 800x40, 900x31 against
     400x3 — nearly every string on the site was bold, so weight carried no meaning and
     hierarchy fell to size alone. Four named rungs, used consistently:
     body copy → label/metadata → card & section titles → hero and display numerals. */
  --weight-body: 500;
  --weight-label: 600;
  --weight-title: 700;
  --weight-display: 900;

  /* Font */
  --font-main: 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Latin runs (the tagline, `REQ_…` ids, unit counts) render in Cairo's Latin glyphs,
     which are cramped. This stack is the fallback for those runs only. */
  --font-latin: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;

  /* Radius — 3 sizes only */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  /* Was hand-written ~15 times as 4/6/9/11px for icon tiles and chips. */
  --radius-xs: 6px;

  /* Shadows — the raised step the cards were missing (they only had the flat card drop). */
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
  --shadow-raised: 0 18px 44px -14px rgba(0, 0, 0, 0.78);

  /* Glow — three intents instead of the eight ad-hoc green glows in the stylesheets.
     The design direction for this product is minimal glow: the accent earns attention
     because it is rare, so only the primary CTA and keyboard focus may use it. */
  --glow-soft: 0 0 16px rgba(0,144,240, 0.18);
  --glow-cta: 0 0 22px rgba(0,144,240, 0.32);
  --glow-focus: 0 0 0 3px rgba(0,144,240, 0.22);

  /* Spacing — 8px rhythm. Section padding had been written by hand at 12/34/45/36/8/4px
     with no relationship between them; these five rungs cover the same ranges. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
}

/* === css/base.css === */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-main);
  background-color: var(--color-bg-base);
  color: var(--color-text);
  direction: rtl;
  text-align: right;
  line-height: 1.6;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-base);
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(0,144,240, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(30, 58, 138, 0.2) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(77,184,255, 0.08) 0%, transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  background-attachment: fixed;
}

.container {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 20px;
}

/* privacy.html, terms.html and withdrawal.html all declare .legal-page and no rule
   defined it, so the global reset left their headings at browser defaults with no
   spacing above or below. This is the page shell only — each page styles its own body. */
.legal-page { padding-block: 36px 56px; }
.legal-page h1 {
  margin-bottom: 16px;
  font-size: var(--text-2xl);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.4px;
}
.legal-page h2 { margin: 26px 0 10px; font-size: var(--text-lg); font-weight: 800; }
.legal-page p {
  max-width: 900px;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.9;
}
.legal-page .section-eyebrow { display: block; margin-bottom: 8px; }

/* Haplic Bold Topbar */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #050b14;
  border-bottom: 1px solid rgba(0,144,240, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.site-header::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--color-green) 0%, #4db8ff 60%, var(--color-cyan-light) 100%);
}
/* The sticky header sat on the heading of every in-page link («المشاريع» landed at 4px,
   «كيف نعمل» at 46px). scroll-padding insets the scrollport, so hash links, the modal's
   scrollIntoView and focus scrolling all clear it. 70px bar + air, and 20px more because a
   section still waiting for its reveal is measured 20px lower, landing that much higher. */
html:has(.site-header) { scroll-padding-top: 100px; }
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 66px;
}
.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-logo img {
  height: 38px;
  width: auto;
  object-fit: contain;
}
.brand-title {
  font-size: var(--text-lg);
  font-weight: 900;
  letter-spacing: -0.5px;
  display: inline-flex;
  align-items: center;
  direction: ltr;
}
.brand-dz { color: var(--color-green); }
.brand-vest { color: #e2f4ff; }

/* On a phone the wordmark was squeezed to 68px and broke onto two lines inside a
   70px header. Keep it on one line; the size steps below live in dzpartner.css, which
   owns .brand-ar and loads after this file. */
@media (max-width: 640px) {
  .brand-logo { gap: 7px; }
  .brand-ar { white-space: nowrap; }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-full);
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #cbd5e1;
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: all 0.2s ease;
}
.nav-links a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
}
.nav-links a.active {
  color: #03130c;
  background: linear-gradient(135deg, var(--color-green) 0%, #4db8ff 100%);
  box-shadow: 0 4px 14px var(--color-green-glow);
}
.partner-link-text svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.btn-nav-join {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--color-green) 0%, #4db8ff 100%);
  color: #03130c !important;
  font-weight: 800 !important;
  font-size: var(--text-base);
  text-decoration: none;
  border-radius: var(--radius-full) !important;
  padding: 10px 22px !important;
  box-shadow: 0 6px 20px var(--color-green-glow);
  white-space: nowrap;
  transition: all 0.25s ease;
}
.btn-nav-join:hover {
  box-shadow: 0 8px 26px rgba(0,144,240, 0.6);
  transform: translateY(-1px);
}

.brand-partner{font-size:.74em;letter-spacing:-1px}.brand-logo .brand-title{gap:1px}.brand-logo .brand-partner{font-size:.66em;letter-spacing:-1.2px}.brand-ar{color:#e2f4ff;font-size:var(--text-lg)}

/* === css/global.css === */
/**
 * Haplic — Cross-cutting rules
 * Behaviour every page needs regardless of which components it uses: the overflow
 * guard, the `hidden` guard, the focus ring and placeholder tone. Loaded immediately
 * after base.css in every bundle, so page-specific files still win ties.
 */

/* Decorative layers (orbits, the carousel track, fixed bars) are wider than a phone.
   Nothing clips them, so the document grew to 424px inside a 390px viewport and the
   whole body sat 33px off-origin, cutting the left edge. `clip` rather than `hidden`:
   it stops the overflow without creating a scroll container, so sticky still works. */
html, body {
  overflow-x: clip;
}

/* The `hidden` attribute is a UA rule, so any author `display` outranks it. That is how
   three unconfigured social buttons in the footer kept rendering as dead 34x34 boxes.
   One global guard beats a per-component fix; the sole rule that outranks it by
   specificity is .social-links a in dzpartner.css, handled there. */
[hidden] {
  display: none !important;
}

/* Keyboard focus was only ever styled inside the admin workspace, so the public pages
   fell back to the UA ring — nearly invisible on this palette. Fields that ship their
   own indicator (.form-control, the admin form controls) still override this. */
:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

/* Nothing styled placeholders outside the admin command palette, so the UA default
   (#757575, ~4.3:1) set the tone and — since only some fields have placeholders —
   empty inputs read as pre-filled. Dimmer than a real value, still AA. */
::placeholder {
  color: var(--color-text-dim);
  opacity: 1; /* Firefox dims placeholders by default; the token is the intent. */
}

/* === css/components.css === */
/**
 * Modern Venture Fintech Components
 */
.card {
  background: var(--color-bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: all 0.3s ease;
}
/* Category Filter Bar */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}
.filter-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.filter-btn.active {
  background: rgba(77,184,255, 0.15);
  border-color: var(--color-cyan);
  color: var(--color-cyan-light);
  box-shadow: 0 0 15px rgba(77,184,255, 0.3);
}
/* Digital Shareholder Certificate */
.certificate-preview {
  background: linear-gradient(135deg, #0c1220 0%, #080c16 100%);
  border: 1px solid rgba(77,184,255, 0.3);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-top: 16px;
  box-shadow: var(--shadow-card);
}
.cert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.cert-serial {
  font-family: monospace;
  font-size: var(--text-sm);
  color: var(--color-cyan-light);
  letter-spacing: 1px;
}
.cert-body h4 {
  font-size: var(--text-lg);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}
.cert-body p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.6;
}
/* Modern Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--color-cyan) 0%, #097dca 100%);
  color: #03141f;
  border: none;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(77,184,255, 0.4);
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #4db8ff 0%, var(--color-cyan) 100%);
  box-shadow: 0 6px 28px rgba(77,184,255, 0.6);
  transform: translateY(-2px);
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border: 1px solid var(--color-border);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.25s ease;
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
/* The quiet third button, kept beside the other two. Two places already referenced
   .btn-subtle — the partner portal's logout and the link that closes the registration
   success panel — while no rule defined it, so each drew as a raw browser button. */
.btn-subtle{display:inline-flex;align-items:center;padding:8px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:transparent;color:var(--color-text-muted);font-family:var(--font-main);font-size:var(--text-sm);font-weight:700;text-decoration:none;cursor:pointer;transition:all .2s ease}
.btn-subtle:hover{background:rgba(255,255,255,.06);border-color:var(--color-border-strong);color:var(--color-text)}
/* Closes the registration flow on the home page: the step after the form is submitted. */
.success-card{margin-top:18px;padding:22px;border:1px solid var(--color-border-green);border-radius:var(--radius-md);background:rgba(16,185,129,.08);text-align:right}
.success-card strong{display:block;margin-bottom:8px;color:var(--color-green);font-size:var(--text-md)}
.success-card p{margin:0 0 8px;color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.8}
.success-card .btn-subtle{margin-top:6px}
/* Form Controls */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: var(--text-base);
  color: #cbd5e1;
  margin-bottom: 6px;
  font-weight: 700;
}
.form-control {
  width: 100%;
  background: rgba(8, 12, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: #ffffff;
  font-size: var(--text-base);
  font-family: var(--font-main);
  direction: rtl;
  transition: all 0.25s ease;
}
.form-control:focus {
  outline: none;
  border-color: var(--color-cyan);
  box-shadow: 0 0 0 3px var(--color-cyan-glow);
}
/* Notification card */
.form-message {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius-md);
}
.form-message.success-state {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid var(--color-success);
  color: #34d399;
}
.form-message.error-state {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid var(--color-danger);
  color: #f87171;
}

/* === css/hero.css === */
/**
 * Welcome Hero & Inspiring Onboarding Section
 * Styled for Haplic Luxury Dark-Neon Tech Venture
 */
.welcome-hero {
  min-height: 560px;
  max-height: 760px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-4) 20px var(--space-4);
  position: relative;
  background: radial-gradient(circle at 80% 40%, rgba(0,144,240, 0.14) 0%, transparent 60%),
              radial-gradient(circle at 20% 50%, rgba(77,184,255, 0.12) 0%, transparent 55%);
}

.hero-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: center;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  text-align: right;
}
@media (max-width: 980px) {
  .hero-split-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-text-col { display: flex; flex-direction: column; align-items: center; }
  .hero-cta-group { justify-content: center; }
  /* Once the columns stack the hero is far taller than max-height, and centering a
     clamped flex box leaks the overflow out both ends (measured ±322px on a 390px
     phone) — which buried the primary CTA behind the sticky header. Let it grow. */
  .welcome-hero { max-height: none; min-height: 0; justify-content: flex-start; }
}

.hero-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,144,240, 0.08);
  border: 1px solid rgba(0,144,240, 0.35);
  padding: 6px 18px;
  border-radius: var(--radius-full);
  margin-bottom: 18px;
  box-shadow: 0 0 25px rgba(0,144,240, 0.15);
  max-width: 100%;
}
.hero-brand-badge img { height: 24px; width: auto; object-fit: contain; }
/* On a 390px phone the badge broke onto two lines inside its own pill (measured 310×61px,
   line-height 25.6). A compact pill label must stay whole on one line, so the label is now
   nowrap and shrinkable, and on small screens it scales with the viewport instead of
   wrapping — min-width:0 lets the flex item shrink rather than push the pill wider. */
.hero-badge-text { font-size: var(--text-base); font-weight: 800; color: var(--color-green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 640px) { .hero-badge-text { font-size: clamp(11px, 3.35vw, 14.7px); } }

/* The page's display step: was --text-2xl (29.6px) — the same size as a mid-page section
   heading and smaller than its own phone override. 38.4px → 48px desktop, 32px phone.
   The stacked layout needs a larger vw term than the split one, or the headline would
   shrink as the columns collapse. */
.welcome-title {
  font-size: clamp(2.4rem, 3.4vw, 3rem);
  font-weight: var(--weight-display);
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: var(--space-2);
  letter-spacing: -0.5px;
}
@media (max-width: 980px) { .welcome-title { font-size: clamp(2rem, 5.4vw, 2.6rem); } }
.welcome-title .accent-glow {
  background: linear-gradient(135deg, var(--color-green) 0%, var(--color-cyan-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Body copy steps back so the headline above it can lead: same colour, lighter weight,
   and a measure cap now that the column is as wide as the phone illustration. */
.welcome-desc {
  font-size: 1.12rem;
  line-height: 1.8;
  color: #c3cfdd;
  margin-bottom: var(--space-3);
  font-weight: var(--weight-body);
  max-width: 52ch;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 35px;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--color-green) 0%, var(--color-cyan) 100%);
  color: #021721 !important;
  font-weight: 900;
  font-size: var(--text-md);
  padding: 13px 30px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 30px rgba(0,144,240, 0.45);
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(0,144,240, 0.75); }

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff !important;
  font-weight: 700;
  font-size: var(--text-md);
  padding: 12px 24px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(12px);
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-cyan-light);
  box-shadow: 0 0 20px rgba(81,182,249, 0.25);
}

.trust-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
}
@media (max-width: 600px) {
  /* The headline is already at its clamp floor (2rem) here — the old explicit override
     duplicated it and, above 600px, was the bug that made the phone H1 the larger one. */
  .trust-pillars-grid { grid-template-columns: 1fr; }
  .welcome-desc { max-width: none; }
}

.trust-pillar-card {
  background: rgba(14, 22, 39, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  text-align: right;
  backdrop-filter: blur(16px);
  transition: all 0.25s ease;
}
.trust-pillar-card:hover { border-color: var(--color-green-glow); transform: translateY(-2px); }
.trust-pillar-icon{display:inline-grid;place-items:center;width:38px;height:38px;margin-bottom:8px;border-radius:11px;background:rgba(0,144,240,.1);border:1px solid rgba(0,144,240,.28)}
.trust-pillar-icon svg{width:19px;height:19px;fill:none;stroke:#4cabeb;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trust-pillar-title { font-size: var(--text-base); font-weight: 800; color: #ffffff; margin-bottom: 4px; }
.trust-pillar-desc { font-size: var(--text-sm); color: #b9c6d6; line-height: 1.6; }

/* Haplic application preview: a real partnership journey inside a premium phone */
.hero-phone-col { display: flex; justify-content: center; align-items: center; position: relative; min-height: 560px; isolation: isolate; }
.hero-phone-col::before { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(0,144,240,.24), rgba(85,216,255,.1) 46%, transparent 71%); filter: blur(34px); z-index: -2; }
.partner-orbit { position: absolute; border: 1px solid rgba(131,190,229,.18); border-radius: 50%; z-index: -1; }
.orbit-one { width: 430px; height: 430px; transform: rotate(-23deg); border-radius: 42% 58% 53% 47%; }
.orbit-two { width: 335px; height: 465px; transform: rotate(31deg); border-color: rgba(137,208,255,.14); }
.partner-phone { position: relative; z-index: 1; width: 294px; height: 566px; padding: 11px; border: 2px solid #4b5c77; border-radius: 46px; background: linear-gradient(135deg,#4d5e78 0%,#111c30 18%,#050b16 57%,#31425c 100%); box-shadow: 0 38px 66px rgba(0,0,0,.72), inset 1px 1px 1px rgba(255,255,255,.3), inset -2px -2px 3px rgba(0,0,0,.7), 0 0 42px rgba(0,144,240,.18); transform: rotate(7deg);; }
.partner-phone::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.2); border-radius: 40px; pointer-events: none; }
.partner-phone-speaker { position: absolute; z-index: 3; top: 18px; left: 50%; width: 82px; height: 22px; transform: translateX(-50%); border-radius: 18px; background: #030711; box-shadow: inset 0 1px 2px var(--color-border); }
.partner-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 35px; padding: 19px 17px 16px; background: radial-gradient(circle at 103% -4%, rgba(0,144,240,.3), transparent 31%), radial-gradient(circle at -14% 48%, rgba(80,176,241,.22), transparent 39%), linear-gradient(158deg,#142c4b 0%,#0c1a31 47%,#07101f 100%); color: #f1f8ff; font-family: var(--font-main); }
.partner-phone-screen::after { content:''; position:absolute; top:-38px; right:-55px; width:150px; height:150px; border:1px solid rgba(146,204,243,.19); border-radius:50%; box-shadow: 0 0 0 18px rgba(146,204,243,.025), 0 0 0 36px rgba(146,204,243,.018); pointer-events:none; }
.partner-appbar { position:relative; z-index:1; display:flex; align-items:center; gap:7px; margin-top:26px; font:800 var(--text-xs) Arial,sans-serif; letter-spacing:.3px; direction:ltr; }
.partner-appbar img { width:27px; height:27px; object-fit:contain; filter:drop-shadow(0 3px 7px rgba(0,144,240,.24)); }
.partner-hero-copy { position:relative; z-index:1; display:flex; flex-direction:column; gap:5px; margin:25px 5px 16px; }.partner-hero-copy span { color:#8bbfe1; font-size:var(--text-2xs); font-weight:700; }.partner-hero-copy strong { font-size:1.5rem; line-height:1.28; letter-spacing:-.5px; }.partner-hero-copy p { max-width:195px; color:#9db0c9; font-size:var(--text-2xs); line-height:1.65; }
.partner-connection { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; gap:7px; margin:0 4px 16px; }.partner-person { display:grid; place-items:center; width:42px; height:42px; border-radius:var(--radius-md); color:#fff; font-size:var(--text-sm); font-weight:900; box-shadow:0 5px 14px rgba(0,0,0,.28); }.person-green { background:linear-gradient(135deg,#4cabeb,#0463a2); }.person-blue { background:linear-gradient(135deg,#71c6ff,#1c6cc5); }.partner-link { display:flex; align-items:center; gap:4px; color:#d9ebf9; white-space:nowrap; font-size:.55rem; font-weight:700; }.partner-link i { flex:1; height:1px; background:linear-gradient(90deg,rgba(0,144,240,.9),rgba(102,205,235,.4)); }.partner-link b { padding:4px 6px; border:1px solid rgba(134,193,232,.3); border-radius:999px; background:rgba(0,144,240,.1); }
.partner-project-card { position:relative; z-index:1; padding:13px; border:1px solid rgba(151,219,237,.18); border-radius:17px; background:linear-gradient(135deg,rgba(255,255,255,.115),rgba(255,255,255,.035)); box-shadow:inset 0 1px rgba(255,255,255,.06), 0 12px 26px rgba(0,0,0,.16); backdrop-filter:blur(12px); }.partner-project-head,.partner-project-meta { display:flex; justify-content:space-between; align-items:center; }.partner-project-head span { color:#98adc6; font-size:.55rem; }.partner-project-head em { padding:3px 6px; border-radius:999px; background:rgba(0,144,240,.14); color:#82c1eb; font-size:.49rem; font-style:normal; }.partner-project-title { display:flex; align-items:center; gap:8px; margin:11px 0; }.partner-project-title img { width:32px; height:32px; object-fit:contain; }.partner-project-title div { display:flex; flex-direction:column; gap:2px; }.partner-project-title b { font-size:.67rem; }.partner-project-title small,.partner-project-meta small { color:#91a8c0; font-size:.49rem; }.partner-project-meta { margin-top:7px; }
.partner-action { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; margin:14px 2px 0; padding:10px 12px; border-radius:var(--radius-md); background:linear-gradient(110deg,#4ca5e0,#4faceb); color:#062438; font-size:var(--text-2xs); font-weight:900; box-shadow:0 8px 17px rgba(56,153,218,.17); }.partner-action b { font-size:var(--text-md); line-height:.5; }
@keyframes floatPhone { 0%,100% { transform:rotate(7deg) translateY(0); } 50% { transform:rotate(7deg) translateY(-12px); } }
@media (max-width:980px) { .hero-phone-col { min-height:475px; }.partner-phone { transform:rotate(3deg) scale(.89); margin:-32px; }.orbit-one { width:350px;height:350px; }.orbit-two { width:280px;height:385px; } }


/* === css/three_d.css === */
/**
 * 3D Perspective & Spatial Depth Styles for HCN INVEST
 */
.perspective-container {
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* 3D Tilt Card Base */
.tilt-card-3d {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.tilt-glare {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  mix-blend-mode: overlay;
}

.tilt-card-3d:hover .tilt-glare { opacity: 1; }

.tilt-content-3d {
  transform: translateZ(28px);
  transform-style: preserve-3d;
}

/* 3D Rotating Gold Emblem */
.emblem-3d-wrap {
  width: 90px;
  height: 90px;
  margin: 0 auto 18px;
  perspective: 600px;
}

.emblem-3d-coin {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--color-gold-light), #d97706 65%, #78350f 100%);
  border: 3px solid #fef3c7;
  box-shadow: 0 10px 25px rgba(217, 119, 6, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  animation: rotateCoin3D 8s infinite linear;
  transform-style: preserve-3d;
}

@keyframes rotateCoin3D {
  0%   { transform: rotateY(0deg) rotateX(10deg); }
  50%  { transform: rotateY(180deg) rotateX(-10deg); }
  100% { transform: rotateY(360deg) rotateX(10deg); }
}

/* 3D Isometric Workflow Grid */
.workflow-3d-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin: 40px 0;
  perspective: 1000px;
}

.workflow-3d-card {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.85) 0%, rgba(3, 7, 18, 0.95) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px;
  position: relative;
  transform-style: preserve-3d;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.workflow-3d-card:hover {
  transform: translateY(-8px) rotateX(4deg);
  border-color: var(--color-success);
  box-shadow: 0 25px 50px rgba(16, 185, 129, 0.2);
}

.step-number-3d {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  font-weight: 900;
  box-shadow: 0 6px 15px var(--color-success-glow);
  transform: translateZ(35px);
  margin-bottom: 16px;
}

.workflow-3d-icon {
  font-size: var(--text-3xl);
  margin-bottom: 14px;
  transform: translateZ(30px);
  display: inline-block;
}

/* 3D Certificate Floating Effect */
.certificate-3d {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.certificate-3d:hover {
  transform: rotateX(3deg) rotateY(-3deg) translateZ(15px);
  box-shadow: 0 30px 70px rgba(245, 158, 11, 0.25);
}

/* === css/landing.css === */
/**
 * Ultra-Modern Landing & Venture Dashboard - 100% Mockup Match
 */
.hero-section { padding: 35px 0 20px; text-align: center; }
.hero-title { font-size: var(--text-2xl); font-weight: 900; line-height: 1.3; color: #ffffff; margin-bottom: 8px; }
.hero-subtitle { font-size: var(--text-lg); color: var(--color-green); font-weight: 700; margin-bottom: 6px; }
.hero-tagline-en { font-size: var(--text-base); font-weight: 700; letter-spacing: 2px; color: var(--color-cyan-light); margin-bottom: 20px; text-transform: uppercase; }
/* KPI Metric Pills */
.kpi-pills-row { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.kpi-pill { background: rgba(77,184,255, 0.05); border: 1.5px solid #00e5ff; color: #cbd5e1; padding: 7px 22px; border-radius: var(--radius-full); font-size: var(--text-base); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 0 15px rgba(26,163,255, 0.18); }
.kpi-pill strong { color: #00e5ff; font-weight: 900; }
/* Main Split Layout: Cards Right, Calculator Left */
.main-ventures-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 40px;
}
@media (max-width: 1100px) {
  .main-ventures-layout { grid-template-columns: 1fr; }
}
#projects-catalog-container { min-width: 0; max-width: 100%; overflow: hidden; }
/* Calculator Widget */
.calc-widget-card {
  background: rgba(18, 27, 44, 0.78);
  backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.calc-widget-title {
  font-size: var(--text-lg);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 12px;
  text-align: center;
}
.calc-field-box {
  background: rgba(9, 13, 23, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.calc-stats-block {
  margin: 10px 0;
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
}
.calc-growth-chart { width: 100%; height: 68px; margin: 4px 0 0; }
/* Startup Grid: 4 Columns */
.startup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1200px) {
  .startup-grid { grid-template-columns: repeat(2, 1fr); }
}
.startup-card {
  background: rgba(18, 27, 44, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s ease;
}
.startup-card:hover {
  transform: translateY(-3px);
  border-color: rgba(77,184,255, 0.5);
  box-shadow: 0 10px 25px rgba(77,184,255, 0.2);
}
.startup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.startup-logo-box {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: var(--text-md);
}
.startup-title-box { flex: 1; text-align: center; }
.startup-title { font-size: var(--text-base); font-weight: 800; color: #ffffff; }
.startup-sub { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.startup-badge {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}
.startup-amount {
  font-size: var(--text-lg);
  font-weight: 800;
  color: #ffffff;
  margin: 8px 0;
  text-align: left;
}
.startup-progress-bar {
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 6px;
}
.startup-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1 0%, var(--color-cyan) 100%);
}
.startup-progress-sub {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.btn-invest-card {
  width: 100%;
  background: rgba(77,184,255, 0.12);
  border: 1px solid rgba(77,184,255, 0.4);
  color: var(--color-cyan-light);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.btn-invest-card:hover {
  background: var(--color-cyan);
  color: #03141f;
  box-shadow: 0 0 16px rgba(77,184,255, 0.5);
}

/* === css/carousel_deck.css === */
/**
 * Dynamic Carousel Deck Styles
 * Luxury Dark Glassmorphism with Smooth Horizontal Track
 */
.carousel-deck-wrapper {
  position: relative; width: 100%; min-width: 0; max-width: 100%;
  overflow: hidden; margin-bottom: 24px;
}
.carousel-controls-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; padding: 0 4px;
}
.carousel-live-counter {
  font-size: var(--text-base); color: var(--color-text-muted); display: flex; align-items: center; gap: 8px;
}
.pulse-indicator {
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-green);
  box-shadow: 0 0 10px var(--color-green); animation: pulseGlow 1.8s infinite;
}
@keyframes pulseGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}
.carousel-nav-arrows { display: flex; gap: 8px; }
.btn-carousel-nav {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff; font-size: 1.1rem; display: flex; align-items: center;
  justify-content: center; cursor: pointer; transition: all 0.25s ease;
}
.btn-carousel-nav:hover {
  background: rgba(0,144,240, 0.2); border-color: var(--color-green); color: var(--color-green);
  box-shadow: 0 0 14px var(--color-border-green); transform: translateY(-2px);
}
.carousel-track-container {
  width: 100%; max-width: 100%; min-width: 0;
  overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; padding: 8px 4px 16px;
}
.carousel-track-container::-webkit-scrollbar { display: none; }
.carousel-track { display: flex; gap: 16px; width: max-content; }
.carousel-card {
  width: 275px; scroll-snap-align: start; background: rgba(18, 27, 44, 0.85);
  backdrop-filter: blur(18px); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column;
  justify-content: space-between; cursor: pointer; transition: all 0.3s ease;
  position: relative; overflow: hidden;
}
.carousel-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-green), var(--color-cyan-light)); opacity: 0;
  transition: opacity 0.3s ease;
}
.carousel-card:hover, .carousel-card.active {
  transform: translateY(-4px) scale(1.02); border-color: rgba(0,144,240, 0.6);
  box-shadow: 0 12px 30px rgba(0,144,240, 0.22);
}
.carousel-card:hover::before, .carousel-card.active::before { opacity: 1; }
.card-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.card-logo-badge {
  width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex;
  align-items: center; justify-content: center; font-weight: 900; font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.card-category-tag {
  font-size: var(--text-xs); padding: 3px 8px; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06); color: var(--color-text-muted); font-weight: 700;
}
.card-app-name { font-size: var(--text-md); font-weight: 800; color: #ffffff; margin-bottom: 2px; }
.card-app-tagline { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 12px; min-height: 20px; }
.card-price-row {
  display: flex; justify-content: space-between; align-items: baseline;
  background: rgba(255, 255, 255, 0.02); padding: 6px 10px; border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.card-price-label { font-size: var(--text-xs); color: var(--color-text-muted); }
.card-price-value { font-size: var(--text-base); font-weight: 800; color: var(--color-green); }
.card-progress-wrap { margin-bottom: 12px; }
.card-progress-bar {
  height: 5px; background: var(--color-border); border-radius: var(--radius-full);
  overflow: hidden; margin-bottom: 4px;
}
.card-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--color-green) 0%, var(--color-cyan-light) 100%);
  border-radius: var(--radius-full);
}
.card-progress-labels { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-dim); }
.card-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-card-preview {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1; padding: 6px 8px; border-radius: var(--radius-sm); font-size: var(--text-sm);
  font-weight: 700; cursor: pointer; transition: all 0.2s; text-align: center;
}
.btn-card-preview:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
.btn-card-invest {
  background: rgba(0,144,240, 0.15); border: 1px solid var(--color-green-glow);
  color: var(--color-green); padding: 6px 8px; border-radius: var(--radius-sm); font-size: var(--text-sm);
  font-weight: 800; cursor: pointer; transition: all 0.2s; text-align: center;
}
.btn-card-invest:hover {
  background: var(--color-green); color: #03141f; box-shadow: 0 0 12px rgba(0,144,240, 0.5);
}
.carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.carousel-dot {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.2);
  cursor: pointer; transition: all 0.25s ease;
}
.carousel-dot.active {
  width: 22px; border-radius: 4px; background: var(--color-green); box-shadow: 0 0 8px var(--color-green);
}
/* The 7px dots are untouched visually but now carry a thumb-sized hit box. The dots sit on a
   13px pitch, so each hit box is 13px wide — exactly its own slot — and can never swallow the
   neighbouring dot's tap (a wider box would: the later dot wins the overlap). Height is 44px.
   The dots themselves cannot reach the 24px minimum without overlapping, so the 44px arrows
   are the equivalent control for that. */
.carousel-dot { position: relative; }
.carousel-dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 44px; transform: translate(-50%, -50%); }
.btn-carousel-nav { position: relative; }
.btn-carousel-nav::after { content: ''; position: absolute; inset: -3px; }
/* The card's two actions are 30px tall — the row of them is already wide enough, so the shortfall
   is entirely vertical, and it is taken vertically: 7px above and below reaches 44px without
   reaching sideways into the 8px gap the two buttons share. */
.btn-card-preview, .btn-card-invest { position: relative; }
.btn-card-preview::after, .btn-card-invest::after { content: ''; position: absolute; inset: -7px 0; }
.card-status-row{display:flex;justify-content:space-between;align-items:center;margin:7px 0;color:var(--color-text-muted);font-size:var(--text-xs)}.project-stage{padding:2px 7px;border-radius:999px;background:rgba(0,144,240,.12);color:#79bce9;font-weight:700}.card-revenue-type{margin:-2px 0 9px;color:#b6c2d2;font-size:var(--text-xs)}.card-revenue-type::before{content:'نموذج الإيرادات: ';color:#718096}
.projects-empty{padding:34px;border:1px dashed rgba(255,255,255,.18);border-radius:var(--radius-md);color:#aebacc;text-align:center}.project-availability{display:inline-flex;align-self:flex-start;margin:0 0 8px;padding:4px 9px;border-radius:999px;font-size:.67rem;font-weight:800}.project-availability.upcoming{background:rgba(251,191,36,.14);color:#fcd34d;border:1px solid rgba(251,191,36,.24)}.project-availability.open{background:rgba(0,144,240,.13);color:#88c4ec;border:1px solid rgba(0,144,240,.27)}.card-stage{display:flex;justify-content:space-between;gap:8px;margin:10px 0;padding:8px 0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);color:#9db0c9;font-size:var(--text-2xs)}.card-stage span:last-child{text-align:left;color:#76d8fb}/* A card with no action to offer carries one button, not a grid cell left empty beside a
   dead one. */
.card-actions-row.single{grid-template-columns:1fr}

/* === css/app_modal.css === */
/**
 * Interactive App Quick Preview Modal Styles
 *
 * The dialog was a flat 600px column of six similar small blocks — three stat tiles and three
 * fact chips, all at one weight — with the buttons in normal flow, so they slid away as the body
 * scrolled. It is now a 680px sheet: a header that names the project, a 2×2 grid of facts where
 * the unit price is the one accent number, and a footer that stays put.
 *
 * The dialog is a flex column so its middle can scroll between the header and the footer.
 * `position:sticky` on the footer would not do the same job: it leaves the body's last line
 * visible behind the buttons rather than stopping the scrollable area above them.
 */
/* `visibility` is transitioned for its duration and none of its delay: a `visibility .3s` grace on
   the way out is what lets the fade be seen instead of the overlay blinking away, but on the way
   in it would leave the dialog `hidden` for the first frame — and an element inside a hidden
   subtree cannot take focus, so the dialog would open with focus still on the card behind it. */
/* Above every piece of fixed furniture on a public page — the sticky header and its mobile nav
   (1000/1001), the contact pill and the mobile action bar (1230/1200). A scrim that things can
   float on top of is not a scrim: the dialog below would be dimmed while they stayed legible. */
.app-modal-overlay{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(3,7,18,.82);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity .3s cubic-bezier(.16,1,.3,1),visibility 0s .3s}
.app-modal-overlay.open{opacity:1;visibility:visible;transition:opacity .3s cubic-bezier(.16,1,.3,1),visibility 0s}

.app-modal-dialog{display:flex;flex-direction:column;width:100%;max-width:680px;max-height:calc(100vh - 40px);overflow:hidden;border:1px solid var(--color-border-green);border-radius:var(--radius-lg);background:rgba(18,27,44,.97);box-shadow:0 20px 50px rgba(0,0,0,.6);transform:scale(.92) translateY(15px);transition:transform .3s cubic-bezier(.16,1,.3,1)}
/* The dialog takes focus on open so a screen reader reads its name first. It is a container, not
   a control, so the ring a keyboard user gets on it would point at nothing they can act on. */
.app-modal-dialog:focus{outline:none}
/* Elevation only. The green bloom that used to sit here was a fourth glow on a page whose glow
   tokens are reserved for the primary action and for keyboard focus. */
.app-modal-overlay.open .app-modal-dialog{transform:scale(1) translateY(0)}

/* ---------- Header: identity, then the one status ---------- */
.app-modal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 24px 18px;border-bottom:1px solid var(--color-border)}
.modal-app-id{display:flex;align-items:flex-start;gap:13px;min-width:0}
.modal-app-logo{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:var(--radius-md);color:#fff;font-size:var(--text-lg);font-weight:var(--weight-display)}
.modal-app-name{min-width:0}
.modal-app-name h3{margin:0;color:#fff;font-size:var(--text-lg);font-weight:var(--weight-title);line-height:1.35}
.modal-app-sub{margin:4px 0 0;color:var(--color-green);font-size:var(--text-sm);font-weight:var(--weight-label);line-height:1.5}
/* The project's status, not one of its numbers: it belongs against the name, which is where a
   reader looks for it, and keeping it here leaves the facts grid to the four figures compared. */
.modal-app-stage{display:inline-block;margin-top:9px;padding:3px 10px;border:1px solid var(--color-border-green);border-radius:var(--radius-full);color:var(--color-text-strong);font-size:var(--text-xs);font-weight:var(--weight-label)}
/* 38px drawn, 44px reachable: the visual weight a header needs, the target a thumb needs. */
.btn-modal-close{position:relative;flex:none;display:grid;place-items:center;width:38px;height:38px;border:none;border-radius:50%;background:rgba(255,255,255,.06);color:var(--color-text-muted);font-size:1.4rem;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.btn-modal-close::after{content:'';position:absolute;inset:-3px}
.btn-modal-close:hover{background:rgba(239,68,68,.2);color:#f87171}
.btn-modal-close:focus-visible{outline:none;box-shadow:var(--glow-focus)}

/* ---------- Body: the scrollable middle ---------- */
.app-modal-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:20px 24px}
.modal-info-card{padding:15px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:rgba(255,255,255,.03)}
.modal-info-title{display:flex;align-items:center;gap:6px;margin-bottom:6px;color:var(--color-green);font-size:var(--text-base);font-weight:var(--weight-title)}
.modal-info-desc{margin:0;color:#cbd5e1;font-size:var(--text-base);line-height:1.75}

/* ---------- The four facts ---------- */
.modal-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.modal-fact{display:flex;flex-direction:column;gap:6px;padding:15px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:rgba(255,255,255,.02)}
.modal-fact span{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:var(--weight-label)}
.modal-fact b{color:#fff;font-size:var(--text-lg);font-weight:var(--weight-title);line-height:1.25;font-variant-numeric:tabular-nums}
/* The number the visitor is actually weighing, and the only one that gets the accent. */
.modal-fact.primary{border-color:var(--color-border-green);background:linear-gradient(145deg,rgba(0,144,240,.14),rgba(255,255,255,.02))}
.modal-fact.primary b{color:var(--color-green);font-size:var(--text-2xl);font-weight:var(--weight-display)}

.modal-risk-note{margin:0;padding:11px 14px;border-inline-start:3px solid var(--color-gold);border-radius:var(--radius-sm);background:rgba(251,191,36,.08);color:#d9c898;font-size:var(--text-sm);line-height:1.75}

/* ---------- Footer: pinned, so the two decisions are always in reach ---------- */
.app-modal-footer{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 24px;border-top:1px solid var(--color-border);background:rgba(11,18,32,.9)}
.app-modal-footer button{width:100%;min-height:48px}
/* .btn-primary is cyan system-wide, so this modal's only committing action was the only cyan
   control on the landing page. Same values as .register-submit, hover included, or the
   .btn-primary:hover that follows would put the cyan straight back. */
.app-modal-footer .btn-primary{background:linear-gradient(135deg,var(--color-green) 0%,#4db8ff 100%);color:#03130c;font-weight:var(--weight-title);box-shadow:0 6px 20px var(--color-green-glow)}
.app-modal-footer .btn-primary:hover{background:linear-gradient(135deg,#45a7e9 0%,#4db8ff 100%);box-shadow:0 8px 26px rgba(0,144,240,.6)}

@media(max-width:520px){
  .app-modal-overlay{padding:12px}
  .app-modal-header{padding:18px 16px 14px}
  .app-modal-body{padding:16px}
  /* Two half-width cells would give a 28px figure a third of a phone line. */
  .modal-facts{grid-template-columns:1fr}
  .modal-fact.primary b{font-size:var(--text-xl)}
  .app-modal-footer{grid-template-columns:1fr;padding:14px 16px}
}

/* === css/trust.css === */
/* Trust strip and how-it-works */
.trust-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:8px 0 20px;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:var(--color-border)}.trust-strip div{padding:14px 18px;background:rgba(14,22,39,.76)}.trust-strip b{display:block;color:#fff;font-size:var(--text-base)}.trust-strip span{color:#b9c6d6;font-size:var(--text-sm);line-height:1.6}
.how-it-works{padding:8px 0 20px}.how-it-works .section-divider-title{padding:38px 0 20px}
.steps-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:steps}.steps-grid li{position:relative;padding:18px;background:rgba(14,22,39,.6);border:1px solid var(--color-border);border-radius:var(--radius-md)}.steps-grid strong{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(0,144,240,.16);color:var(--color-green);font-size:var(--text-sm)}.steps-grid h3{color:#fff;font-size:var(--text-base);margin:10px 0 3px}.steps-grid p{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.7}
@media(max-width:760px){.trust-strip,.steps-grid{grid-template-columns:1fr}}

/* === css/home_enhancements.css === */
/* Haplic public page enhancements */
.carousel-card{scroll-snap-align:start}
.nav-actions{display:flex;align-items:center;gap:10px}.menu-toggle{place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(255,255,255,.06);color:#fff}
/* The hamburger's resting state, and it has to be stated *above* the query at the end of this
   file rather than beside the rule above. Written after that query it won on source order alone
   — same selector, later in the sheet — and left `.menu-toggle` at `display:none` at every width.
   The nav it opens is `visibility:hidden` below the breakpoint, so with no toggle on screen the
   four nav links were unreachable on every phone, and the markup, the JS and the `.open` rule
   below were all dead weight. */
.menu-toggle{position:relative;display:none;padding:9px;cursor:pointer}
/* 36–38px drawn, 44px reachable at every width the toggle shows: the circle keeps the size the
   header row can afford and the target grows 4px past it each way. Nothing sits within 6px. */
.menu-toggle::after{content:'';position:absolute;inset:-4px}
.menu-toggle span{width:17px;height:2px;background:currentColor;border-radius:2px}.menu-toggle.is-open span:nth-child(1){transform:translateY(5px) rotate(45deg)}.menu-toggle.is-open span:nth-child(2){opacity:0}.menu-toggle.is-open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.value-section,.faq-section{padding:12px 0 34px}.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.value-grid article{min-height:190px;padding:20px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:rgba(14,22,39,.58)}.value-grid span,.section-eyebrow{color:var(--color-green);font-weight:800;font-size:var(--text-xs);letter-spacing:.08em}.value-grid h3{margin:15px 0 6px;color:#fff;font-size:var(--text-md)}.value-grid p{color:#b6c2d2;font-size:var(--text-sm);line-height:1.75}
.risk-disclosure{display:flex;justify-content:space-between;align-items:center;gap:28px;margin:18px 0 25px;padding:25px 28px;border:1px solid rgba(251,191,36,.32);border-radius:var(--radius-md);background:linear-gradient(110deg,rgba(251,191,36,.1),rgba(14,22,39,.65))}.risk-disclosure h2{color:#fff;font-size:var(--text-lg);margin:6px 0}.risk-disclosure p{max-width:820px;color:#c1c9d6;font-size:.87rem;line-height:1.8}.risk-disclosure .btn-secondary{flex:none}
@media(max-width:980px){.value-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.carousel-card{width:258px}}

/* ---------- The nav becomes a dropdown behind the toggle ---------- */
/* 860px, where it was 760: on screen the header row needs ~840px — wordmark, four nav links, the
   join button and the portal toggle — so between 761 and 839 the row was wider than the viewport
   and pushed «دخول» off the leading edge. It was clipped, not scrollable: the document reported no
   horizontal overflow and no hamburger appeared to offer another way in. Below 860 there is no
   room for the row, so the links move into the dropdown. */
@media(max-width:860px){.nav-wrap nav{display:block;position:absolute;top:70px;right:12px;left:12px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.2s;z-index:1001}.nav-wrap nav.open{opacity:1;visibility:visible;transform:translateY(0)}.nav-links{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:10px;border:1px solid rgba(0,144,240,.25);border-radius:var(--radius-md);background:#050b14;box-shadow:0 16px 36px rgba(0,0,0,.55)}.nav-links a{display:flex;align-items:center;min-height:44px}.menu-toggle{display:grid}.nav-actions .btn-nav-join{padding:8px 14px!important;font-size:var(--text-sm)}}
/* Footer lockup: emblem above, "Haplic" wordmark below, then the tagline paragraph.
   The name uses the same type weight/direction as the header wordmark so the two
   lockups read as the same brand. */
.footer-brand-name{display:block;margin:-4px 0 10px;color:#e2f4ff;font-size:var(--text-xl);font-weight:900;letter-spacing:-.5px;direction:ltr}

/* === css/motion.css === */
/* Purposeful Haplic motion: subtle hierarchy, never decorative noise. */
@keyframes orbitDrift { 0%,100% { transform: rotate(-23deg) scale(1); } 50% { transform: rotate(-14deg) scale(1.035); } }
@keyframes orbitDriftAlt { 0%,100% { transform: rotate(31deg) scale(1); } 50% { transform: rotate(40deg) scale(.97); } }
@keyframes phoneFloatDesktop { 0%,100% { transform: rotate(7deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-10px); } }
@keyframes phoneFloatMobile { 0%,100% { transform: rotate(2deg) scale(.7) translateY(0); } 50% { transform: rotate(2deg) scale(.7) translateY(-10px); } }
@keyframes cardEnter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes softShine { 0%,100% { opacity: .35; } 50% { opacity: .75; } }

.partner-phone { animation: phoneFloatDesktop 7s ease-in-out infinite; will-change: transform; }
.orbit-one { animation: orbitDrift 12s ease-in-out infinite; }
.orbit-two { animation: orbitDriftAlt 14s ease-in-out infinite; }
.partner-progress span { animation: softShine 2.8s ease-in-out infinite; }
.carousel-card { animation: cardEnter .5s both cubic-bezier(.16,1,.3,1); }
.carousel-card:nth-child(2) { animation-delay: .06s; }.carousel-card:nth-child(3) { animation-delay: .12s; }.carousel-card:nth-child(4) { animation-delay: .18s; }
.carousel-track-container { cursor: grab; }.carousel-track-container:active { cursor: grabbing; }
.carousel-track-container::after { content: 'اسحب لرؤية بقية المشاريع'; display: block; width: 100%; padding-top: 4px; color: #71839a; font-size: var(--text-xs); text-align: center; }
.btn-hero-primary,.btn-hero-secondary,.btn-primary,.btn-secondary,.amount-chips button,.mobile-cta a { transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.btn-hero-primary:active,.btn-hero-secondary:active,.btn-primary:active,.btn-secondary:active,.amount-chips button:active { transform: scale(.97); }
.amount-chips button.active { box-shadow: 0 0 0 3px rgba(0,144,240,.1),0 8px 18px rgba(0,144,240,.12); }
.reveal-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
@media(max-width:640px) { .partner-phone { animation: phoneFloatMobile 7s ease-in-out infinite; } .carousel-track-container::after { display: none; } .mobile-cta { animation: cardEnter .45s both .25s; } }
@media(prefers-reduced-motion:reduce) { .partner-phone,.orbit-one,.orbit-two,.partner-progress span,.carousel-card,.mobile-cta { animation: none!important; } .reveal-on-scroll { opacity:1; transform:none; transition:none; } }
/* Opening sequence: establishes the brand without delaying interaction. */
.hero-brand-badge,.welcome-title,.welcome-desc,.hero-cta-group,.trust-pillars-grid,.hero-phone-col{opacity:0;animation:heroEnter .72s both cubic-bezier(.16,1,.3,1)}
.hero-brand-badge{animation-delay:.08s}.welcome-title{animation-delay:.16s}.welcome-desc{animation-delay:.25s}.hero-cta-group{animation-delay:.34s}.trust-pillars-grid{animation-delay:.43s}.hero-phone-col{animation-delay:.18s}
@keyframes heroEnter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.hero-phone-col{animation-name:heroPhoneEnter}.hero-phone-col::before{animation:heroHalo 1.8s both .5s cubic-bezier(.16,1,.3,1)}
@keyframes heroPhoneEnter{from{opacity:0;transform:translate3d(-30px,25px,0) scale(.94)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes heroHalo{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
.numeric-value{display:inline-block;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.02em}
#display-equity-pct{min-width:4.8ch;text-align:left}
.amount-chips button{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
@media(max-width:640px){.hero-brand-badge,.welcome-title,.welcome-desc,.hero-cta-group,.trust-pillars-grid{animation-duration:.55s}.hero-phone-col{animation-name:heroPhoneEnterMobile;animation-duration:.65s}.hero-phone-col::before{animation:none}@keyframes heroPhoneEnterMobile{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}}
@media(prefers-reduced-motion:reduce){.hero-brand-badge,.welcome-title,.welcome-desc,.hero-cta-group,.trust-pillars-grid,.hero-phone-col,.hero-phone-col::before{animation:none!important;opacity:1!important;transform:none!important}}

/* === css/dzpartner.css === */
/* Haplic all missing styles - single unified file */
/* Estimator */
.partnership-estimator{margin:48px 0 65px;padding:32px;border:1px solid rgba(0,144,240,.22);border-radius:var(--radius-lg);background:radial-gradient(circle at 0 0,rgba(0,144,240,.1),transparent 33%),linear-gradient(135deg,rgba(16,36,62,.88),rgba(7,16,31,.9));box-shadow:0 18px 55px rgba(0,0,0,.27)}
.estimator-intro{max-width:760px;margin-bottom:25px}
.estimator-intro h2{margin:6px 0;color:#fff;font-size:var(--text-2xl)}
.estimator-intro p{color:#afbdd0;font-size:var(--text-base);line-height:1.8}
.estimator-layout{display:grid;grid-template-columns:minmax(330px,.85fr) minmax(0,1.15fr);gap:16px}
.estimator-control{padding:22px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:rgba(5,13,27,.52)}
.estimator-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:15px;margin-bottom:17px;border-bottom:1px solid var(--color-border-strong)}
.estimator-head div{display:flex;flex-direction:column;gap:3px}
.estimator-head span{color:#91c6e9;font-size:var(--text-xs);font-weight:700}
.estimator-head strong{color:#fff;font-size:var(--text-base)}
.estimator-head>b{align-self:start;color:#b8d6f2;font-size:.67rem;text-align:left;max-width:155px;line-height:1.6}
.unit-input{position:relative;display:grid;grid-template-columns:44px 1fr 44px;min-height:58px;margin-bottom:12px;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-md);background:#081223}
.unit-input button{border:0;background:rgba(255,255,255,.06);color:#7fbfea;font-size:1.7rem;cursor:pointer}
.unit-input input{min-width:0;border:0;background:transparent;color:#fff;font:800 1.45rem var(--font-main);text-align:center;outline:none}
.unit-input::after{content:'دج';display:flex;align-items:center;justify-content:center;position:absolute;left:54px;top:50%;transform:translateY(-50%);min-width:34px;height:24px;padding:0 5px;border-radius:6px;background:rgba(0,144,240,.14);color:#83c2ec;font-size:var(--text-xs);font-weight:900;pointer-events:none}
.unit-input input{padding-left:52px;font-variant-numeric:tabular-nums}
/* The field clips its children (overflow:hidden), so a focus outline on the input or on
   the +/- buttons is cut off at the edges. Signal focus on the wrapper instead. */
.unit-input:focus-within{border-color:var(--color-green);box-shadow:0 0 0 3px rgba(0,144,240,.16)}
.unit-hint{margin-top:11px;color:#9aabc1;font-size:var(--text-xs)}
.unit-hint strong{color:#fff}
.estimator-results{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.result-card{display:flex;min-height:170px;flex-direction:column;justify-content:space-between;padding:18px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:rgba(255,255,255,.04)}
.result-card.primary{border-color:rgba(0,144,240,.42);background:linear-gradient(145deg,rgba(0,144,240,.16),rgba(255,255,255,.03))}
.result-card span{color:#adbed1;font-size:var(--text-xs)}
.result-card strong{color:#fff;font-size:var(--text-xl);line-height:1.4;font-variant-numeric:tabular-nums}
.result-card.primary strong{color:#7dc1ee;font-size:var(--text-2xl);letter-spacing:.4px}
.result-card small{color:#7f95ad;font-size:var(--text-xs);line-height:1.65}
.estimator-formula{margin-top:17px;padding:15px 17px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:rgba(0,0,0,.16);color:#b5c3d6;font-size:var(--text-sm);line-height:1.85;font-variant-numeric:tabular-nums}
.estimator-formula>span{color:#88c4ec;font-weight:800}
.estimator-formula p{margin:4px 0}
.estimator-formula b{color:#effff}
.estimator-formula small{color:#8da0b7}

/* Amount chips */
.amount-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:13px 0}
.amount-chips button{min-height:44px;border:1px solid rgba(137,194,233,.22);border-radius:9px;background:rgba(0,144,240,.07);color:#deeffa;font:800 var(--text-xs) var(--font-main);cursor:pointer;transition:all .2s}
.amount-chips button:hover,.amount-chips button.active{border-color:#6eb8e9;background:rgba(0,144,240,.19);color:#fff}

/* Institution note */
.institution-note{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;padding:13px 15px;border:1px solid rgba(0,144,240,.28);border-radius:var(--radius-md);background:rgba(0,144,240,.07);color:#d1e4f1;font-size:var(--text-sm)}
.institution-note strong{color:#75bbe9;font-size:.86rem}

/* Registration */
.register-section{padding:45px 0}
.register-card{max-width:720px;margin:0 auto;padding:30px;border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:rgba(14,22,39,.85);box-shadow:0 18px 55px rgba(0,0,0,.27)}
.register-card>h2{margin:6px 0;color:#fff;font-size:var(--text-xl)}
.register-card>p{margin-bottom:18px;color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.7}
/* The funnel's last step carries .btn-primary, which is cyan system-wide, so the one control
   that actually submits a request was the only cyan button a visitor saw — the header CTA,
   the hero CTA and the active nav pill are all the green brand gradient. Matches .btn-nav-join
   including the hover, or .btn-primary:hover would put the cyan straight back. */
.register-submit{display:block;width:100%;text-align:center;text-decoration:none;background:linear-gradient(135deg,var(--color-green) 0%,#4db8ff 100%);color:#03130c;box-shadow:0 6px 20px var(--color-green-glow)}
.register-submit:hover{background:linear-gradient(135deg,#45a7e9 0%,#4db8ff 100%);box-shadow:0 8px 26px rgba(0,144,240,.6)}
.register-note{margin:12px 0 0!important;color:#8da0b7!important;font-size:var(--text-xs)!important;text-align:center}
.registration-summary{display:none;margin-bottom:16px;padding:10px 12px;border:1px solid var(--color-border-green);border-radius:var(--radius-sm);background:rgba(0,144,240,.07);color:#edf6fc;font-size:var(--text-sm)}
.registration-summary strong{color:var(--color-green)}
.terms-check{display:flex;gap:8px;align-items:flex-start;color:#b6c2d2;font-size:var(--text-xs);line-height:1.65;margin:-2px 0 16px}
.terms-check input{margin-top:5px;accent-color:var(--color-green)}

/* FAQ */
.faq-list{max-width:980px;margin:auto}
.faq-list details{margin-bottom:8px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:rgba(255,255,255,.025)}
.faq-list summary{padding:17px;color:#fff;font-size:var(--text-base);font-weight:700;cursor:pointer;list-style:none}
.faq-list summary::before{content:'+';display:inline-block;width:22px;color:var(--color-green);font-size:var(--text-lg)}
.faq-list details[open] summary::before{content:'−'}
.faq-list p{padding:0 40px 18px;color:#b6c2d2;font-size:var(--text-sm);line-height:1.8}

/* Footer — shell rules moved here from base.css so every footer style, including the
   grid and social links below, lives in one file. Written as one-liners like the rest of
   this file rather than in base.css's braces-per-line style.
   34px was the only padding value in the system on no scale; 40/28 is the 8px rhythm. */
.site-footer{margin-top:auto;border-top:1px solid var(--color-border);background:#05070d;padding:40px 0 28px;text-align:center;color:var(--color-text-dim);font-size:var(--text-base)}

.footer-logo {
  height: 70px;
  width: auto;
  object-fit: contain;
  margin-bottom: 12px;
  /* A 16px green drop-shadow used to sit here. It was the one glow in the stylesheets that
     was neither the primary CTA nor keyboard focus — exactly what the glow tokens reserve. */
}

/* .footer-tagline-ar was dropped during the move: no page or component ever rendered it. */

/* The rule belongs to the tagline only when a footer grid sits above it to be separated
   from. privacy.html, terms.html and withdrawal.html carry the tagline alone, and a hairline
   over a single line of text reads as a mistake. */
.footer-grid + .footer-tagline-en {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.footer-tagline-en {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  letter-spacing: 1.5px;
}

/* Footer grid */
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:24px;text-align:right}
.footer-brand p{color:var(--color-text-muted);font-size:var(--text-sm);max-width:270px}
.footer-grid h3{margin-bottom:9px;color:var(--color-text-strong);font-size:var(--text-base)}
.footer-grid a{display:block;margin:5px 0;color:var(--color-text-muted);text-decoration:none;font-size:var(--text-sm)}
.footer-grid a:hover{color:var(--color-green)}
/* The rule above makes ~32px blocks 5px apart; these are the tightest targets a thumb gets. */
@media(max-width:640px){.footer-grid a{display:flex;align-items:center;min-height:44px;margin:0}}

/* Ventures section spacing */
.ventures-section{padding:4px 0 24px}

/* Social links */
.social-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.social-links a{display:grid!important;place-items:center;width:34px;height:34px;padding:0!important;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);background:rgba(255,255,255,.055);transition:transform .2s,background .2s}
/* `display:grid!important` above outranks the global [hidden] guard on specificity, so a
   social network the company has not configured would still draw its empty box. */
.social-links a[hidden]{display:none!important}
.social-links a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.social-links a[data-company-facebook]{color:#8fd2ff}.social-links a[data-company-facebook] svg{fill:currentColor;stroke:none}
.social-links a[data-company-instagram]{color:#f28aab}
.social-links a[data-company-linkedin]{color:#82c5f2}
.social-links a[data-company-whatsapp]{color:#7ebde7}
.social-links a .social-fill{fill:currentColor;stroke:none}
.social-links a:hover{transform:translateY(-3px);background:rgba(255,255,255,.12)}
.social-links a[data-company-address]{color:var(--color-text-muted);font-size:var(--text-xs);line-height:1.7}

/* Footer grid p address */
.footer-grid p[data-company-address]{color:var(--color-text-muted);font-size:var(--text-xs);line-height:1.7}

/* Mobile CTA */
.mobile-cta{display:none}
.mobile-cta-main{background:linear-gradient(135deg,#4ba4e0,#4ac5e8);color:#042235!important}

/* Portal login menu */
.portal-menu{position:relative}
.portal-toggle{position:relative;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(0,144,240,.45);border-radius:var(--radius-full);background:rgba(0,144,240,.1);color:#75bbe9;font:800 var(--text-sm) var(--font-main);padding:9px 16px;cursor:pointer;white-space:nowrap;transition:all .2s}
.portal-toggle:hover{background:rgba(0,144,240,.2);color:#fff}
.portal-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.portal-dropdown{position:absolute;left:0;top:calc(100% + 10px);min-width:225px;margin:0;padding:7px;list-style:none;border:1px solid rgba(0,144,240,.28);border-radius:var(--radius-md);background:#071120;box-shadow:0 18px 40px rgba(0,0,0,.55);z-index:1200}
.portal-dropdown a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--radius-sm);color:var(--color-text-strong);text-decoration:none;font-size:var(--text-sm);font-weight:700;line-height:1.5;transition:background .15s}
.portal-dropdown a:hover{background:rgba(0,144,240,.12)}
.portal-dropdown a svg{flex:none;width:17px;height:17px;fill:none;stroke:var(--color-green);stroke-width:1.7}
.portal-dropdown a small{display:block;color:#8da0b7;font-size:var(--text-xs);font-weight:400}
@media(max-width:760px){.portal-toggle{padding:8px 13px!important;font-size:var(--text-xs)}.portal-dropdown{position:fixed;right:12px;left:12px;top:70px;min-width:0}}

/* Two targets in this header come out under 44px: «دخول» at 34–39px tall, and the join CTA at 37.
   Both get a hit box that reaches past them without moving a pixel on screen — the same `::after`
   the carousel's arrows and dots use. The toggle's reach is 3px sideways, half the 6px gap it sits
   in, so it stops just short of the hamburger's own expanded area. */
.portal-toggle::after{content:'';position:absolute;inset:-5px -3px}
/* Height only, and only where the row can spare it: the header is 66px tall and the pill is
   centred in it, so a 44px target costs no width anywhere — and width is what is scarce here. */
.site-header .btn-nav-join{min-height:44px}

/* Below 430 the header row is the wordmark, the join button, «دخول» and the hamburger, and
   together they want ~404px — 14px more than a 390px phone gives and 44px more than a 360px
   one, which is where «دخول» and then the hamburger were pushed off the leading edge and
   clipped. It is all bought back from padding and type size; no label is dropped, and the
   header keeps all four controls. */
@media(max-width:430px){
  .site-header .nav-wrap{padding-inline:12px}
  .site-header .nav-actions{gap:6px}
  .site-header .menu-toggle{width:36px;height:36px;padding:8px}
  .site-header .brand-logo img{height:32px}
  .site-header .nav-actions .btn-nav-join{padding:7px 10px!important;font-size:var(--text-xs)}
}
/* «دخول» gives up its text here and keeps its name in the aria-label; the wordmark takes its
   last size step down. */
@media(max-width:400px){.portal-toggle{font-size:0!important;gap:0;padding:10px!important}.portal-toggle svg{width:17px;height:17px}.brand-ar{font-size:var(--text-md)}.brand-logo{gap:5px}}
@media(max-width:340px){.brand-ar{font-size:var(--text-sm)}}
@media(max-width:328px){.brand-title{display:none}}

/* Responsive */
@media(max-width:900px){.estimator-layout{grid-template-columns:1fr}.estimator-results{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}.footer-brand{grid-column:span 2}}
@media(max-width:640px){.partnership-estimator{margin:34px -3px 45px;padding:20px;border-radius:18px}.estimator-intro h2{font-size:1.5rem}.estimator-results{grid-template-columns:1fr}.result-card{min-height:118px}.register-card{padding:22px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.mobile-cta{position:fixed;z-index:1200;right:10px;bottom:10px;left:10px;display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:7px;padding:7px;border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-md);background:rgba(7,16,31,.94);backdrop-filter:blur(18px);box-shadow:0 14px 32px rgba(0,0,0,.42)}.mobile-cta a{display:grid;place-items:center;min-height:44px;border-radius:var(--radius-sm);color:#afbdd0;text-decoration:none;font-size:var(--text-xs);font-weight:800}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* === css/contact_fab.css === */
/**
 * Haplic — the floating contact button
 *
 * company_info_component.js has always appended <aside class="floating-contact"> to every page
 * that loads the company settings — index, investor, privacy, terms and withdrawal — and no
 * stylesheet in the project ever defined the class. The widget therefore rendered as a bare row
 * of default-styled links at the very bottom of the document, in the browser's own link colour,
 * on a fixed dark page: `position:static`, no surface, no order between the two actions and the
 * button that is meant to reveal them. This is that widget's stylesheet.
 */

.floating-contact{
  position:fixed;
  /* Below the portal dropdown (1200) and the mobile action bar, above page content. */
  z-index:1230;
  /* The trailing edge, so it clears the reading side on both an RTL and an LTR page. */
  inset-inline-end:16px;
  inset-block-end:16px;
  inset-block-end:calc(16px + env(safe-area-inset-bottom,0px));
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

/* Closed by default; the button below opens it. display:none rather than a transform keeps the
   two links out of the tab order until they are actually reachable on screen. */
/* Full width of the pill below it, so the two actions and the button stack as one column
   instead of the button overhanging a narrower pair. */
.floating-contact-actions{display:none;width:100%;gap:8px}
.floating-contact.open .floating-contact-actions{display:grid}

.floating-contact-actions a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border:1px solid var(--color-border-green);
  border-radius:var(--radius-full);
  background:rgba(7,17,32,.94);
  backdrop-filter:blur(14px);
  color:var(--color-text-strong);
  text-decoration:none;
  font-size:var(--text-sm);
  font-weight:var(--weight-label);
  white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.floating-contact-actions a:hover{background:rgba(0,144,240,.16);border-color:var(--color-green);color:#fff}

/* The page's one persistent control. It carries an elevation shadow, not the CTA glow: the
   glow tokens are reserved for the single primary action on a screen and for keyboard focus,
   and a button that is always on screen would spend them on every page at once. */
.floating-contact-toggle{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:48px;
  padding:0 20px;
  border:0;
  border-radius:var(--radius-full);
  background:linear-gradient(135deg,var(--color-green) 0%,#4db8ff 100%);
  color:#03130c;
  font-family:var(--font-main);
  font-size:var(--text-sm);
  font-weight:var(--weight-title);
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:background .18s ease;
}
.floating-contact-toggle:hover{background:linear-gradient(135deg,#45a7e9 0%,#4db8ff 100%)}
.floating-contact-toggle:focus-visible{outline:none;box-shadow:var(--glow-focus),0 10px 26px rgba(0,0,0,.45)}
/* A chevron, drawn rather than fetched: it points up at the actions when they are closed and
   back down at the button when they are open. Empty content, so it says nothing to a reader.
   The two borders are physical, not logical: top plus left is what turns into a ∧ under a
   45° rotation, and it has to stay that shape whichever way the document runs. */
.floating-contact-toggle::after{
  content:'';
  width:7px;
  height:7px;
  border-top:2px solid currentColor;
  border-left:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.floating-contact.open .floating-contact-toggle::after{transform:rotate(225deg)}

/* index.html already carries a fixed three-link action bar along the bottom of a phone screen,
   and a second floating control there would sit on top of it. Every other page has neither.
   `:has()` matches the element in the DOM and says nothing about whether it is laid out, and
   that bar is only displayed below 640px, so the test has to be scoped to the same width —
   unscoped, it would hide this pill on tablets where the bar is not on screen at all. */
@media(max-width:640px){
  body:has(.mobile-cta) .floating-contact{display:none}
}

@media(max-width:720px){
  .floating-contact{inset-inline-end:12px}
  /* Whatever is pinned to the bottom of the screen — this pill, or index.html's action bar —
     would otherwise come to rest on top of the footer's last line at the end of the scroll. */
  body:has(.floating-contact) .site-footer,
  body:has(.mobile-cta) .site-footer{padding-block-end:96px}
}

/* === css/type_scale.css === */
/**
 * Haplic — Type scale & weight ladder
 *
 * Loaded LAST in every bundle (after dzpartner.css) because it exists to overrule the
 * values those files set. Two measured problems it fixes:
 *
 * 1. No display step. The scale stopped at --text-3xl but nothing used it for headings:
 *    the hero H1 and a mid-page section title both resolved to 29.6px, and the hero's own
 *    600px override (2rem = 32px) made the phone headline LARGER than the desktop one.
 *    The ladder is now 48 / 28 / 20 and the hero is the biggest type at every width.
 *
 * 2. No weight contrast. Across both bundles: 700x47, 800x40, 900x31 against 400x3 —
 *    nearly everything was bold, so weight carried no meaning and hierarchy fell to size
 *    alone. 900 is now reserved for the page's display line and its display numerals;
 *    titles sit at 700 and labels at 600. See variables.css for the named rungs.
 */

/* ---- The ladder ----
   The disclosure band and the register card are callouts rather than page sections: their
   headings are set with their own surface in landing_polish.css. */
.section-divider-title h2,
.estimator-intro h2,
.faq-section h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-title);
  line-height: 1.28;
  letter-spacing: -0.3px;
  color: #fff;
}
/* The supporting line under a section title is context, not a heading. */
.section-divider-title p,
.estimator-intro p,
.register-copy > p {
  font-weight: 400;
}

/* ---- Titles: card and panel headings step down from 800/900 to 700 ---- */
.trust-pillar-title,
.card-app-name,
.card-price-value,
.startup-title,
.overview-projects b,
.toast-body b,
.sheet-head strong,
.empty-state b,
.admin-side-brand b,
.modal-head h3,
.panel-heading h2,
.legal-page h2 { font-weight: var(--weight-title); }

/* Page titles inside a workspace are not display type — the display weight is spent on
   the numbers those pages exist to show. */
.admin-topbar h1,
.dashboard-header h1,
.pv-title,
.partner-identity h2 { font-weight: var(--weight-title); }

/* ---- Labels: pills, eyebrows and metadata drop to 600 so they read as annotations ---- */
.hero-badge-text,
.section-eyebrow,
.value-grid span,
.wd-eyebrow,
.wd-facts span,
.estimator-head span { font-weight: var(--weight-label); }

/* ---- Display numerals: the one place 900 still earns its keep ---- */
.overview-stat strong,
.capital-meter strong,
.stat-number,
.detail-amount,
.partner-figures strong,
.result-card strong { font-weight: var(--weight-display); }

/* Digits must not reflow while the estimator updates them, and must line up in columns.
   Home and portal already had this on the elements they animate; tables never did. */
.data-table td,
.audit-table td,
.capital-meter strong,
.partner-figures strong {
  font-variant-numeric: tabular-nums;
}

/* ---- Latin runs ----
   The taglines and the request ids are Latin text rendered in Cairo's Latin glyphs, which
   are cramped and were set with 1.5-2px of letter-spacing to compensate. This stack is for
   those runs only, so no second Arabic family is introduced and no extra font is
   downloaded: 'IBM Plex Sans' is used when the machine already has it, otherwise the
   system UI font — both roomier than the fallback they replace. */
.footer-tagline-en,
.hero-tagline-en,
.kpi-pill strong,
[dir="ltr"].req-id {
  font-family: var(--font-latin);
}
.footer-tagline-en { letter-spacing: 0.6px; }

/* ---- Long Arabic headings ----
   `text-wrap: balance` stops a 2-line heading from leaving one word on the second line.
   Progressive enhancement: browsers without it keep the current wrapping. */
.section-divider-title h2,
.estimator-intro h2,
.register-copy h2,
.faq-section h2,
.welcome-title { text-wrap: balance; }

/* === css/landing_polish.css === */
/**
 * Haplic — Landing surface polish
 * Loaded after dzpartner.css and type_scale.css: the final word on the home page. Everything
 * here upgrades an element that already worked; defects live in the component files.
 */

/* ---------- 1. How it works: four boxes become a route ----------
   They were four identical cards with a 28px numbered dot, which read as a set of options
   rather than the ordered path the copy describes. The number now sits on a rail that
   connects the steps, so the sequence is visible before the text is read. */
.steps-grid li { padding: 20px; border-radius: var(--radius-md); background: rgba(14, 22, 39, 0.6); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.steps-grid li:hover { transform: translateY(-3px); border-color: var(--color-border-green); box-shadow: var(--shadow-card); }
.steps-grid strong { position: relative; z-index: 1; width: 40px; height: 40px; background: var(--color-bg-surface); border: 1px solid var(--color-border-green); color: var(--color-green); font-size: var(--text-md); font-weight: var(--weight-title); }
.steps-grid h3 { margin: 14px 0 5px; font-size: var(--text-md); font-weight: var(--weight-title); }
@media (min-width: 761px) {
  .steps-grid { gap: 18px; }
  /* The rail spans the 18px gutter and stops at the numbered dot, centred 40px down (20px
     card padding + half the 40px circle). */
  .steps-grid li::after { content: ''; position: absolute; top: 40px; inset-inline-start: -18px; width: 18px; height: 1px; background: var(--color-border-green); }
  .steps-grid li:first-child::after { display: none; }
}
.step-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--color-green); font-size: var(--text-sm); font-weight: var(--weight-label); text-decoration: none; }
.step-link i { font-style: normal; transition: transform .25s ease; }
.step-link:hover i { transform: translateX(-4px); }
.step-link:hover { text-decoration: underline; }

/* ---------- 2. Disclosure: a band becomes a signed notice ----------
   It was a full-bleed gold wash competing with the section headings. A rail on the leading
   edge and a card surface say "this is a condition" without shouting, and the icon means the
   warning does not rest on colour alone. */
.risk-disclosure { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; padding: 22px 24px; border: 1px solid rgba(251, 191, 36, 0.26); border-inline-start: 3px solid var(--color-gold); border-radius: var(--radius-md); background: var(--color-bg-card); }
.rd-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(251, 191, 36, 0.28); border-radius: var(--radius-md); background: rgba(251, 191, 36, 0.1); color: var(--color-gold); }
.rd-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.risk-disclosure h2 { margin: 4px 0 6px; font-size: var(--text-h3); }
.risk-disclosure p { max-width: 74ch; font-size: var(--text-base); line-height: 1.85; }
@media (max-width: 820px) {
  .risk-disclosure { grid-template-columns: auto minmax(0, 1fr); }
  .risk-disclosure .btn-secondary { grid-column: 1 / -1; text-align: center; }
}

/* ---------- 3. Carousel cards ----------
   Each card carried its own saturated logo square (orange, pink, violet), so a row of four
   read as four products from four companies. The project's colour stays as identity but is
   applied as a tint and a hairline instead of a solid fill, which puts the row back on one
   palette. `!important` is needed because the colour arrives as an inline custom property. */
.card-logo-badge { width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--brand, var(--color-green)) 40%, transparent); background: color-mix(in srgb, var(--brand, var(--color-green)) 14%, transparent) !important; color: color-mix(in srgb, var(--brand, var(--color-green)) 55%, #fff) !important; font-weight: var(--weight-title); }
.card-progress-fill { background: var(--color-green); }
.card-progress-bar { height: 4px; }
.card-stage span:last-child { color: var(--color-text-muted); }
/* The track scrolled with no affordance — the dots were the only hint. A thin real scrollbar
   costs nothing and needs no JS to stay in sync. */
.carousel-track-container { scrollbar-width: thin; scrollbar-color: rgba(0,144,240, 0.5) transparent; padding-bottom: 12px; }
.carousel-track-container::-webkit-scrollbar { display: block; height: 4px; }
.carousel-track-container::-webkit-scrollbar-track { background: var(--color-border); border-radius: var(--radius-full); }
.carousel-track-container::-webkit-scrollbar-thumb { background: rgba(0,144,240, 0.5); border-radius: var(--radius-full); }

/* ---------- 4. Estimator ----------
   The three result boxes were a row of 195px cards stretched to the height of the control
   column beside them (measured 386px), so their label sat at the top, their footnote at the
   bottom and 250px of nothing in between. They are now label/value rows that size to their
   content, and the amount — the number the visitor came for — is the largest figure here. */
.estimator-results { grid-template-columns: 1fr; gap: 10px; align-self: start; }
.result-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; min-height: 0; padding: 14px 16px; }
/* The label column swallows the surplus width, so at full page width the label and its value
   sat 500px apart and stopped reading as one line. A dotted leader ties them together. */
.result-card span { grid-column: 1; display: flex; align-items: baseline; gap: 10px; font-weight: var(--weight-label); }
.result-card span::after { content: ''; flex: 1; height: 1px; background-image: linear-gradient(90deg, var(--color-border-strong) 2px, transparent 2px); background-size: 6px 1px; }
.result-card strong { grid-column: 2; grid-row: 1; font-size: var(--text-xl); }
.result-card small { grid-column: 1 / -1; }
.result-card.primary { background: linear-gradient(145deg, rgba(0,144,240, 0.14), rgba(255, 255, 255, 0.03)); }
/* The headline figure of the page's main tool. `clamp` rather than a token because it is the
   only element that must never wrap: it is `nowrap` for the tabular digits, so at a fixed
   38.4px it would run past a 330px phone row. 24px on a phone, 34.6px on a desktop. */
.result-card.primary strong { font-size: clamp(1.5rem, 2.4vw, 2.4rem); }
.unit-input { min-height: 54px; }
.amount-chips { gap: 7px; margin: 11px 0; }
/* 44, not the 42 this used to say: this file loads last, so the lower number was quietly
   underriding the 44px floor dzpartner.css sets on the same selector. */
.amount-chips button { min-height: 44px; }
/* The slider fell back to the UA blue, the only blue control on the page. `accent-color`
   themes the track and thumb natively, so no vendor pseudo-elements are needed. */
#shares-range { accent-color: var(--color-green); height: 20px; cursor: pointer; }

/* ---------- 3b. Carousel progress labels ----------
   "رأس المال: 50" used to end line one and "مليون دج" start line two, because the two labels
   shared one 240px row. Stacked, each label keeps its own line and never breaks mid-phrase. */
.card-progress-labels { flex-direction: column; gap: 2px; align-items: flex-start; }

/* ---------- 5. Register: one column becomes an offer ----------
   The funnel's last card stated the request in three stacked lines, then showed a button. Two
   columns let the summary, the button and the "what happens next" list sit together, so the
   whole commitment is visible in one glance instead of by scanning downward. */
.register-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: center; gap: var(--space-4); max-width: 880px; }
.register-copy h2 { margin: 6px 0 10px; color: #fff; font-size: var(--text-h2); font-weight: var(--weight-title); line-height: 1.28; }
.register-copy > p { margin-bottom: 18px; color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.8; }
.register-copy .institution-note { margin-bottom: 0; }
.register-next { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.register-next li { display: flex; gap: 9px; align-items: flex-start; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.65; }
.register-next li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--color-green); }
@media (max-width: 820px) { .register-card { grid-template-columns: 1fr; gap: var(--space-3); } }

/* ---------- 6. FAQ: a reading column with card items ---------- */
.faq-list { max-width: 820px; margin-inline: 0 auto; }
.faq-list details { border-radius: var(--radius-md); background: var(--color-bg-card); transition: border-color .25s ease; }
.faq-list details:hover, .faq-list details[open] { border-color: var(--color-border-green); }
.faq-list summary { display: flex; align-items: center; gap: 11px; padding: 16px 18px; font-weight: var(--weight-title); }
/* A rotating chevron replaces the +/- text: same meaning, and the motion shows which way the
   panel is about to move. Drawn from two borders so it needs no icon file. */
.faq-list summary::before { content: ''; width: 8px; height: 8px; margin-top: -5px; border-inline-start: 2px solid var(--color-green); border-block-end: 2px solid var(--color-green); transform: rotate(45deg); transition: transform .25s ease; }
.faq-list details[open] summary::before { margin-top: 2px; transform: rotate(-135deg); }
.faq-list p { padding: 0 18px 18px 40px; }

/* ---------- 7. Footer & mobile bar ---------- */
.site-footer { padding: var(--space-4) 0; }
.footer-grid { gap: var(--space-3); }
.footer-grid h3 { font-weight: var(--weight-title); }
.footer-tagline-en { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
@media (max-width: 640px) {
  /* The fixed action bar covers the last 60px of the page; without this the footer's legal
     links were unreachable behind it. */
  .site-footer { padding-bottom: 104px; }
  .mobile-cta { bottom: calc(10px + env(safe-area-inset-bottom)); }
  .mobile-cta a { min-height: 44px; }
  /* The bar is on screen from here down and it is the better target of the two, so the header's
     join button was a third "أرسل طلب شراكة" within one thumb's reach — and the smallest of the
     three, set at 11.5px of type. The bar takes over below 640; the hero still carries the CTA
     for anyone at the top of the page. This file is only in the home bundle, so the pages
     without a bottom bar (portal, console, legal) keep their header button. */
  .site-header .btn-nav-join { display: none; }
  .steps-grid strong { width: 36px; height: 36px; }
}