/* === 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-primary: #0090f0;
  --color-primary-glow: rgba(0,144,240, 0.4);
  --color-brand-azure: #0090f0;
  --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 boundary of a CONTROL, against the boundary of a SURFACE. WCAG 2.2 SC 1.4.11 asks 3:1 of
     the former and says nothing about the latter: a card's edge is decoration, but an input's edge
     is the only thing that says an input is there. Composited on the base background this is
     rgb(106,112,121) = 3.79:1, where --color-border measures 1.21:1 and --color-border-strong
     1.47:1 — both under the threshold, which is why those two stay on surfaces only.
     This token exists because six input rules in the console were setting their own border back to
     --color-border OVER a .form-control rule that already met the standard, which put those fields
     at 1.2-1.5:1 again. Same specificity collision that was silently defeating the focus ring. */
  --color-border-control: rgba(255, 255, 255, 0.4);
  /* 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);

  /* Named after measuring 849 literal colour uses across css/: 113 hexes had no token, and five of
     them were repeated across many files — a de-facto palette the design system did not know it
     had. #75bbe9 alone appeared 13 times in 7 files and was the main reason the portal, the console
     and the landing page read as three slightly different products. Naming them changes no pixel:
     the value here is byte-identical to every literal it replaced, and the pass that swapped them
     ran before this block existed so it could not rewrite its own definitions. */
  --color-cyan-muted: #75bbe9;
  --color-on-brand: #03130c;
  --color-danger-soft: #fca5a5;
  --color-cyan-strong: #45a7e9;
  --color-gold-soft: #fcd34d;

  /* 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);
  /* Was rgba(0,144,240,.22), which composites over the base to #052742 = 1.30:1 — under the 3:1
     SC 1.4.11 asks of a non-text indicator, on the five controls where this ring is the only one.
     A translucent ring's contrast is a function of whatever sits behind it, so no alpha makes it a
     guarantee: the opaque brand green is the one value that holds on every surface this product
     draws — 5.92:1 base / 5.60:1 surface / 5.53:1 card. Same ring global.css already owns. */
  --glow-focus: 0 0 0 3px var(--color-green);

  /* 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 === */
/* Cairo is loaded by a <link> in each page head, not from here: an @import counts only while it
   precedes every rule, and variables.css always comes before base.css in every bundle, so the
   import was silently dropped and the declared font never applied. */

*, *::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: var(--color-bg-base);
  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: var(--color-on-brand);
  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: var(--color-on-brand) !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)}
/* The skip link, one line because this file is at its ceiling: `.sr-only` hides it and this rule — one class plus `:focus`, so it outranks `.sr-only` wherever the two land in a bundle — brings it back, undoing each property `.sr-only` hides with. `fixed`, not `static`, so revealing it shifts no page. */ .skip-link:focus{position:fixed;top:.6rem;inset-inline-start:.6rem;width:auto;height:auto;margin:0;padding:.55rem 1rem;overflow:visible;clip-path:none;background:var(--color-bg-base);color:var(--color-text);border:1px solid var(--color-green);border-radius:var(--radius-full);z-index:2000;font-size:var(--text-sm)}

/* === 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;
}

/* The estimator announces each committed result through a live region, and a live region has to
   be in the accessibility tree without being on screen. The admin bundle carried the only copy of
   this rule (admin_premium.css) and the home bundle never loaded it. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 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. */
}

/* Frosted glass sticky header across all application pages */
.site-header {
  background: rgba(9, 15, 28, 0.84) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 144, 240, 0.22);
}


/* === 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;
}
/* Both of this field's edges, measured. Resting: rgba(255,255,255,.12) over a 1.01:1 fill was
   1.36:1 against the page, where SC 1.4.11 asks 3:1; .4 gives 3.83:1 base / 3.58:1 card. Focus:
   the ring is global.css's 5.92:1 outline, which this pair used to beat with a 2.01:1 glow — the
   glow went with `outline:none`, since dropping only the outline stacks two rings on one field. */
.form-control {
  width: 100%;
  background: rgba(8, 12, 20, 0.8);
  border: 1px solid var(--color-border-control);
  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 { border-color: var(--color-cyan); }
/* The one line under a field that explains it: what the choice means, or why the number is asked
   for. Below the control and dimmer than the label, so it reads as guidance and not as a second
   label competing with the first. */
.field-note {
  display: block;
  margin-top: 6px;
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  line-height: 1.75;
}
/* 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);
}
@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-xs); font-weight:700; }.partner-hero-copy strong { font-size:1.5rem; line-height:1.28; }.partner-hero-copy p { max-width:195px; color:#9db0c9; font-size:var(--text-xs); 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-xs); 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; }
/* The phones stand on the section now, not inside cards. The box, its blur, its border and its 16px of
   padding are gone, and the gradient bar that lay across the top went with them — there is no card edge
   left for a bar to sit on. What says which phone is current is the phone itself. */
.carousel-card {
  width: 275px; scroll-snap-align: start; cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* The scale lives on the BUTTON, not on the card, and that is load-bearing rather than tidy:
   `Tilt3DComponent` writes `card.style.transform` in line, so a transform on the card itself is
   overwritten the first time the pointer crosses it. This way the tilt and the focus compose.
   A transition and not a keyframe, so the movement happens WITH the carousel — pressing an arrow
   shrinks the phone that leaves while the phone that arrives grows, and nothing has to be kept in
   step with `selectProject`, because the class it already toggles is the entire trigger. */
.carousel-card .card-phone-button {
  transition: transform .38s cubic-bezier(.16,1,.3,1), filter .38s ease;
  transform: scale(.9); filter: brightness(.82) saturate(.92);
}
.carousel-card.active .card-phone-button { transform: scale(1); filter: none; }
/* Hovering is the phone's own answer, and it is deliberately LARGER than the difference between the
   current phone and its neighbours — the row says which one you are pointing at at least as clearly as
   it says which one you are on. It lifts, it comes to full brightness, and its edge lights up.
   The old card did all three of those and they left with the card, which is why a row of phones with
   no hover read as a picture of phones rather than as something to press. */
.carousel-card .card-phone-button:hover, .carousel-card .card-phone-button:focus-visible {
  transform: translateY(-6px) scale(.97); filter: none;
}
.carousel-card.active .card-phone-button:hover, .carousel-card.active .card-phone-button:focus-visible {
  transform: translateY(-6px) scale(1.04);
}
.carousel-card .card-phone-button:hover .phone-frame,
.carousel-card .card-phone-button:focus-visible .phone-frame,
.carousel-card.active .phone-frame {
  box-shadow: 0 22px 54px rgba(0,144,240,.3), 0 0 0 1px rgba(0,144,240,.4);
}
/* Asked-for less movement gets full size and no transition, and the current phone is still told apart
   by its lit edge — that cue is a style, not a movement, so it survives the preference. */
@media(prefers-reduced-motion:reduce) {
  .carousel-card .card-phone-button { transition: none; transform: none; filter: none; }
}
.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);
}
/* The mark stands on a phone's screen now, in the same phone the details window draws: `.phone-frame`
   and `.phone-speaker` come from `css/app_modal.css`, which rides in this same bundle. What is stated
   here is only what a 275px card changes about that phone — a third of the width, a smaller screen
   corner, a speaker to scale. Sized down, not redrawn: one phone, two sizes. */
.carousel-card .phone-frame { width: min(100%, 186px); margin: 0 auto; padding: 8px 8px 11px; border-radius: 22px; transition: box-shadow .3s ease; }
.carousel-card .phone-speaker { top: 16px; width: 40px; height: 5px; }
/* The card is the phone, and the phone is the button — one thing to press, so one Tab stop, and a
   button's own chrome is stripped here rather than overridden anywhere else. The badge leaves the flow
   so it rides the phone's screen instead of pushing the phone down inside the card. */
.carousel-card .card-phone-button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.carousel-card .card-phone-button:focus-visible { outline: 2px solid var(--color-green); outline-offset: 4px; border-radius: 22px; }
.carousel-card .project-availability { position: absolute; z-index: 2; top: 36px; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap; }
/* `.deck-phone-screen` and the two badge rules that hung off it are gone with the markup they styled:
   the card no longer draws its own screen. What stands there now is `phoneScreen()`'s output — the
   uploaded picture, or `.phone-fallback` — and both are sized in `css/app_modal.css`, where the phone
   itself is defined, so the card and the window cannot drift apart into two sizes of two things. */
.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); }
/* The bar and its fill were removed with the hand-set percentage they drew — see the card markup.
   What is left is the target, and it needs no row of two labels: it was the second half of one, and
   its first half («تقدم رأس مال المشروع N%») no longer exists. */
.card-capital { margin-bottom: 12px; font-size: var(--text-xs); color: var(--color-text-dim); }
/* The units still open, as a percentage — the figure the console prints and the approval step
   measures a request against, on the same row shape as the target above it. The percentage keeps
   its <bdi> island for the same reason every amount on the page does: a bare digit run inside an
   Arabic line is read in the wrong direction. */
.card-available {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-bottom: 12px; font-size: var(--text-xs); color: var(--color-text-dim);
}
.card-available bdi { color: #ffffff; font-weight: 800; font-variant-numeric: tabular-nums; }
.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:var(--color-gold-soft);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)}.project-availability.full{background:rgba(148,163,184,.13);color:#c3cedb;border:1px solid rgba(148,163,184,.26)}.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 application's own media: the icon, the phone, the launch state ---------- */
/* The application's mark: the icon the office uploaded, or the letter that stands for it. Two
   surfaces wear it — the header of this window and the badge on the home page's card — and both take
   it from `logoInner`, so the classes are named for the mark rather than for the window that used to
   be their only home. */
/* The letter is the fallback and not a second element: it is hidden as soon as the uploaded icon
   stands beside it, and `:only-child` reveals it again the moment that icon removes itself after a
   failed load. One rule, both states, no JavaScript watching the image. */
.app-mark-letter:not(:only-child){display:none}
/* `inherit` and not a radius of its own: the badge's radius is a token, and an icon cropped to a
   different corner than the badge it replaces would read as a different element. `100%` is what lets
   one rule fit both badges: 36px on a card, the window's own size in the header. */
.app-mark-icon{width:100%;height:100%;object-fit:cover;border-radius:inherit}

.modal-media{display:flex;gap:18px;align-items:flex-start}
.phone-frame{position:relative;flex:none;width:150px;margin:0;padding:9px;border:1px solid rgba(255,255,255,.14);border-radius:26px;background:linear-gradient(160deg,#1b2740,#0b1220);box-shadow:0 14px 30px rgba(0,0,0,.45)}
/* Drawn, not decorative furniture: without it the shape is a rounded rectangle, and the visitor has
   to take the phone on trust. */
.phone-speaker{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:44px;height:5px;border-radius:var(--radius-full);background:rgba(255,255,255,.22)}
/* 9:19 — the shape the uploaded screenshot is actually taken in, so the phone shows the screen
   rather than a crop of its corners. The selector is the DIRECT child, and that is load-bearing: the
   fallback screen below also contains an `<img>` (the application's icon), and a bare
   `.phone-frame img` stretched that icon to a full screen's height. */
.phone-frame > img{display:block;width:100%;aspect-ratio:9/19;object-fit:cover;border-radius:18px;background:rgba(255,255,255,.04)}
/* The screen when no picture has been uploaded: the application's own mark above its name, centred.
   This is not a drawn imitation of a screen the office never sent — it is the pair the office already
   holds, and it is what every application shows until one uploads a picture. Drawn in the phone's own
   terms so the card and the window render it identically. */
.phone-fallback{display:grid;place-content:center;justify-items:center;gap:10px;width:100%;aspect-ratio:9/19;padding:14px;border-radius:18px;background:linear-gradient(180deg,#16233c,#0a1220);text-align:center}
.phone-fallback .app-mark-letter{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;font-size:1.4rem;font-weight:900;color:#fff;background:color-mix(in srgb, var(--brand, var(--color-green)) 22%, transparent);border:1px solid color-mix(in srgb, var(--brand, var(--color-green)) 40%, transparent)}
.phone-fallback .app-mark-icon{display:block;width:46px;height:46px;border-radius:12px;object-fit:cover}
.phone-fallback-name{font-size:var(--text-sm);font-weight:800;color:var(--color-text);line-height:1.6}
.modal-media-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.modal-launch{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--color-border-green);border-radius:var(--radius-md);background:rgba(0,144,240,.08)}
.modal-launch span{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:var(--weight-label)}
.modal-launch strong{color:#fff;font-size:var(--text-base);font-weight:var(--weight-title);line-height:1.5}
/* 44px min-height like every other control a thumb has to hit, and the arrow is icon-decorated text
   rather than an icon button — the link says its own name. */
.btn-store{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:rgba(255,255,255,.04);color:var(--color-text-strong);font-size:var(--text-sm);font-weight:var(--weight-label);text-decoration:none;transition:border-color .2s,color .2s}
.btn-store:hover{border-color:var(--color-border-green);color:#fff}
.btn-store:focus-visible{outline:none;box-shadow:var(--glow-focus)}
.modal-media-note{margin:0;color:var(--color-text-muted);font-size:var(--text-xs);line-height:1.7}

/* ---------- 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)}
/* The units still open, when the office declared a target: a percentage of the same two figures the
   console prints. Full width under the pair above it — a lone cell in the second row reads as a
   fact that went missing rather than as a third one. */
.modal-fact.availability{grid-column:1/-1}
.modal-fact.availability b{color:var(--color-green)}
/* A closed application keeps its button and loses its click, with the reason written on it. */
.app-modal-footer .btn-primary:disabled{opacity:.55;cursor:not-allowed;filter:saturate(.5)}

.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:var(--color-on-brand);font-weight:var(--weight-title);box-shadow:0 6px 20px var(--color-green-glow)}
.app-modal-footer .btn-primary:hover{background:linear-gradient(135deg,var(--color-cyan-strong) 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)}
  /* The phone beside its text needs ~170px of the row it does not have; stacked, at a width that
     still fits a phone line, it shows the screen at a legible size. */
  .modal-media{flex-direction:column;align-items:center}
  .phone-frame{width:132px}
  .modal-media-side{width:100%}
  .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)}.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:var(--color-bg-base);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}

/* ---------- 3. Luxury visual depth & atmospheric backdrops ---------- */
.welcome-hero{position:relative;background:radial-gradient(circle at 75% 30%,rgba(0,144,240,.24) 0%,transparent 55%),radial-gradient(circle at 25% 60%,rgba(77,184,255,.16) 0%,transparent 60%),radial-gradient(circle at 50% 10%,rgba(14,165,233,.12) 0%,transparent 70%)}
.welcome-title{background:linear-gradient(180deg,#FFFFFF 15%,#9fd1f8 85%,#62b0ee 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 20px rgba(0,144,240,.25));letter-spacing:-.02em}
.hero-brand-badge{background:linear-gradient(135deg,rgba(0,144,240,.16),rgba(255,255,255,.04));border:1px solid rgba(0,144,240,.45);box-shadow:0 0 25px rgba(0,144,240,.22),inset 0 1px 0 rgba(255,255,255,.2);backdrop-filter:blur(16px)}
.trust-pillar-card{background:linear-gradient(145deg,rgba(20,32,54,.75),rgba(10,18,32,.85));border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1);backdrop-filter:blur(16px);transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}
.trust-pillar-card:hover{transform:translateY(-4px);border-color:rgba(0,144,240,.5);box-shadow:0 18px 40px -10px rgba(0,144,240,.3),inset 0 1px 0 rgba(255,255,255,.25)}
.trust-strip{background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(0,144,240,.12),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.1);box-shadow:0 16px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(16px)}
.trust-strip div{background:rgba(10,17,30,.78);transition:background .25s ease}
.trust-strip div:hover{background:rgba(16,28,50,.88)}
.phone-fallback{position:relative;background:radial-gradient(circle at 50% 25%,color-mix(in srgb,var(--brand,var(--color-green)) 28%,transparent),transparent 70%),linear-gradient(180deg,#132037 0%,#080f1d 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 0 30px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08)}
.phone-fallback::before{content:'';position:absolute;top:14px;right:14px;left:14px;height:8px;border-radius:4px;background:rgba(255,255,255,.08)}
.phone-fallback::after{content:'';position:absolute;bottom:24px;right:16px;left:16px;height:48px;border-radius:12px;border:1px solid color-mix(in srgb,var(--brand,var(--color-green)) 35%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--brand,var(--color-green)) 20%,transparent),rgba(255,255,255,.04));box-shadow:0 8px 18px rgba(0,0,0,.35)}
.phone-fallback .app-mark-letter{box-shadow:0 0 20px color-mix(in srgb,var(--brand,var(--color-green)) 45%,transparent)}
.carousel-card.active .phone-frame{box-shadow:0 25px 55px -10px rgba(0,144,240,.4),0 0 30px rgba(0,144,240,.25);border-color:rgba(0,144,240,.5)}
.partnership-estimator{position:relative}
.partnership-estimator::before{content:'';position:absolute;top:20%;left:20%;width:480px;height:480px;background:radial-gradient(circle,rgba(0,144,240,.12) 0%,transparent 70%);filter:blur(60px);pointer-events:none;z-index:-1}
.estimator-control{background:linear-gradient(145deg,rgba(17,27,46,.82),rgba(9,15,26,.92));border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 20px 45px rgba(0,0,0,.5);backdrop-filter:blur(16px)}
.app-choice-chips button{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);transition:all .25s ease}
.app-choice-chips button:hover{background:rgba(255,255,255,.08);border-color:rgba(0,144,240,.4)}
.app-choice-chips button.active{background:linear-gradient(135deg,rgba(0,144,240,.25),rgba(0,144,240,.08));border-color:rgba(0,144,240,.7);box-shadow:0 0 20px rgba(0,144,240,.35)}
#shares-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle,#fff 30%,var(--color-green) 100%);border:2px solid #fff;box-shadow:0 0 16px rgba(0,144,240,.8),0 2px 6px rgba(0,0,0,.5);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
#shares-range:active::-webkit-slider-thumb{transform:scale(1.15);box-shadow:0 0 24px rgba(0,144,240,1)}
.unit-input{border-color:rgba(255,255,255,.12);background:rgba(8,18,35,.85);box-shadow:inset 0 1px 3px rgba(0,0,0,.5);backdrop-filter:blur(10px)}
.unit-input button{background:rgba(255,255,255,.05);transition:all .2s ease}
.unit-input button:hover:not(:disabled){background:rgba(0,144,240,.2);color:#fff;box-shadow:0 0 14px rgba(0,144,240,.35)}
.amount-chips button{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);color:#cbd5e1;font-weight:700;transition:all .2s ease}
.amount-chips button:hover{background:rgba(255,255,255,.08);border-color:rgba(0,144,240,.45);color:#fff;transform:translateY(-2px)}
.amount-chips button.active{background:linear-gradient(135deg,rgba(0,144,240,.25),rgba(0,144,240,.08));border-color:rgba(0,144,240,.7);color:#51c4ff;box-shadow:0 0 16px rgba(0,144,240,.3)}
.value-grid article{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(20,31,52,.7),rgba(9,16,28,.85));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 28px rgba(0,0,0,.35);backdrop-filter:blur(12px);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.value-grid article:hover{transform:translateY(-4px);border-color:rgba(0,144,240,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 18px 40px -10px rgba(0,144,240,.3)}
.estimator-intro h2{background:linear-gradient(180deg,#FFFFFF 15%,#9fd1f8 85%,#62b0ee 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 18px rgba(0,144,240,.22))}
.app-modal-dialog{border:1px solid rgba(0,144,240,.35);box-shadow:0 25px 70px rgba(0,0,0,.7),0 0 40px rgba(0,144,240,.15);background:linear-gradient(160deg,rgba(16,26,44,.98),rgba(8,14,25,.98))}
.btn-primary:active,.btn-action:active,.btn-subtle:active,.btn-secondary:active{transform:scale(.98)}
.form-control:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow);outline:none}
.faq-list details{transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease}
.faq-list details[open]{box-shadow:0 4px 20px rgba(0,144,240,.12);border-color:rgba(0,144,240,.45)}
.scroll-top-btn{position:fixed;bottom:24px;inset-inline-end:24px;width:44px;height:44px;border-radius:50%;background:rgba(10,18,32,.85);border:1px solid rgba(0,144,240,.4);color:var(--color-primary);box-shadow:0 4px 16px rgba(0,0,0,.4),0 0 12px var(--color-primary-glow);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:999;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:opacity .25s ease,transform .25s ease,background .2s ease}
.scroll-top-btn:hover{background:rgba(0,144,240,.18);color:#fff;transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,144,240,.35)}
.scroll-top-btn:active{transform:translateY(0) scale(.95)}
@media(max-width:768px){.scroll-top-btn{bottom:80px;inset-inline-end:16px;width:40px;height:40px}}

/* ---------- 4. Topbar Glassmorphism, Elevation & Dropdown Polish ---------- */
.site-header{background:rgba(6,9,17,.82)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,144,240,.22)!important;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.site-header.is-scrolled{background:rgba(5,8,15,.95)!important;border-bottom-color:rgba(0,144,240,.45)!important;box-shadow:0 12px 32px rgba(0,0,0,.65),0 0 16px rgba(0,144,240,.12)!important}
.nav-links a{position:relative;transition:color .2s ease}
.nav-links a.active{color:#fff!important}
.nav-links a.active::after{content:'';position:absolute;bottom:-4px;right:0;left:0;height:2px;background:linear-gradient(90deg,var(--color-green),#4db8ff);border-radius:2px;box-shadow:0 0 8px rgba(0,144,240,.6)}
@media(max-width:860px){.nav-links a.active::after{bottom:auto;right:0;left:auto;top:50%;transform:translateY(-50%);width:3px;height:18px}}
.portal-dropdown{background:rgba(10,18,32,.94)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,144,240,.35)!important;box-shadow:0 20px 48px rgba(0,0,0,.75),0 0 25px rgba(0,144,240,.15)!important;transform-origin:top left;animation:portalDropIn .22s cubic-bezier(.16,1,.3,1)}
@keyframes portalDropIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.portal-dropdown a{border-radius:var(--radius-sm);transition:background .18s ease,transform .18s ease,color .18s ease}
.portal-dropdown a:hover{background:rgba(0,144,240,.14)!important;transform:translateX(-3px)}

/* === 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:var(--text-sm);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 var(--color-border-control);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)}
.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:#eaf6ff}
.estimator-formula small{color:var(--color-text-muted)}

/* 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:var(--color-cyan-muted);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:var(--color-on-brand);box-shadow:0 6px 20px var(--color-green-glow)}
.register-submit:hover{background:linear-gradient(135deg,var(--color-cyan-strong) 0%,#4db8ff 100%);box-shadow:0 8px 26px rgba(0,144,240,.6)}
.register-note{margin:12px 0 0!important;color:var(--color-text-muted)!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:var(--color-cyan-muted);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:var(--color-bg-surface);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.6;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:var(--color-text-muted);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;
  /* Above the portal dropdown and the mobile action bar, both of which are 1200. The pill never
     actually meets that bar: the media query at the foot of this file hides it below 640px, which
     is the only width where the bar is laid out. */
  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. */
.floating-contact-actions{display:none;width:100%;min-width:210px;gap:8px;padding:8px;border:1px solid rgba(0,144,240,.3);border-radius:var(--radius-lg);background:rgba(9,17,31,.95);backdrop-filter:blur(18px);box-shadow:0 18px 45px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12);animation:fabSlideUp .22s cubic-bezier(.16,1,.3,1)}
.floating-contact.open .floating-contact-actions{display:grid}
@keyframes fabSlideUp{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

.floating-contact-actions a{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;min-height:46px;padding:8px 12px;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);background:rgba(255,255,255,.03);color:#e2ecf8;text-decoration:none;transition:all .2s ease}
.floating-contact-actions a:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.floating-contact-actions a.whatsapp:hover{border-color:rgba(37,211,102,.5);background:rgba(37,211,102,.12);color:#fff}
.floating-contact-actions a.phone:hover{border-color:rgba(0,144,240,.5);background:rgba(0,144,240,.12);color:#fff}
.contact-action-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.whatsapp-icon{stroke:#25d366}
.phone-icon{stroke:#38bdf8}
.contact-action-text{display:flex;flex-direction:column;gap:1px;text-align:right}
.contact-action-text strong{font-size:var(--text-sm);font-weight:var(--weight-title);line-height:1.2}
.contact-action-text small{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:normal}

/* The floating persistent toggle button */
.floating-contact-toggle{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:1px solid rgba(0,144,240,.4);border-radius:var(--radius-full);background:linear-gradient(135deg,rgba(14,25,45,.94),rgba(8,14,26,.96));color:#f1f8ff;font-family:var(--font-main);font-size:var(--text-sm);font-weight:var(--weight-title);white-space:nowrap;cursor:pointer;backdrop-filter:blur(16px);box-shadow:0 12px 32px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.15);transition:all .2s ease}
.floating-contact-toggle:hover{border-color:rgba(0,144,240,.7);box-shadow:0 14px 36px rgba(0,144,240,.28);transform:translateY(-2px)}
.floating-contact-toggle:focus-visible{outline:none;box-shadow:var(--glow-focus),0 10px 26px rgba(0,0,0,.45)}
.contact-pulse-dot{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 10px #10b981;animation:contactPulse 2s infinite}
@keyframes contactPulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.7)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.contact-toggle-icon{width:16px;height:16px;fill:none;stroke:#38bdf8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.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;margin-inline-start:2px}
.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;
  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,
.numeric-value,
.result-card strong,
.detail-amount,
.modal-fact b {
  font-variant-numeric: tabular-nums;
}

/* ---- Narrative & body copy reading rhythm ---- */
p, li {
  line-height: 1.68;
}

/* ---- 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/projection.css === */
/**
 * Choosing the application, and the estimate it produces.
 *
 * Both live in one file because they are one decision: the estimator answers "how much" and now also
 * "in which application", and every figure beside it changes with both. They are also the two blocks
 * that keep this page inside its copy rules — the chips state each application's own availability so
 * nobody is left guessing, and the estimate block names itself a تقدير in the heading and in the note
 * beneath it.
 *
 * A file of its own rather than two more sections in `landing_polish.css`, which is at the ceiling.
 * Loaded before it, so the polish layer keeps the last word on the landing page.
 */

/* ---------- The chips ---------- */
.app-choice-block { margin-bottom: 16px; }
.app-choice-label { display: block; margin-bottom: 8px; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-label); }
.app-choice-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* `font: inherit` because a button does not inherit the page's font, and 44px because every other
   control in this column is a thumb target. */
.app-choice-chip { display: flex; flex-direction: column; gap: 3px; min-height: 44px; padding: 8px 13px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgba(255,255,255,.03); color: var(--color-text-strong); font: inherit; text-align: start; cursor: pointer; transition: border-color .2s, background .2s; }
.app-choice-chip:hover { border-color: var(--color-border-green); }
.app-choice-chip:focus-visible { outline: none; box-shadow: var(--glow-focus); }
.app-choice-chip.active { border-color: var(--color-green); background: rgba(0,144,240, .14); }
.app-choice-name { font-size: var(--text-sm); font-weight: var(--weight-title); }
.app-choice-state { color: var(--color-text-muted); font-size: var(--text-xs); }
.app-choice-state.open { color: var(--color-green); display: inline-flex; align-items: center; gap: 5px; }
.app-choice-state.open::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-green); box-shadow: 0 0 6px var(--color-green); animation: pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.85); } }
/* The register button of an application that is not open yet. It keeps working — it goes to the
   projects — so it is dimmed rather than disabled, and the line above it says why. */
#register-cta.is-gated { opacity: .55; box-shadow: none; }

/* ---------- The estimate ----------
   A تقدير, and the layout has to keep saying so: the heading names the application and the window,
   and the note under it says what the whole block is. This is the only forward-looking figure on the
   page, so it is also the only block with a frame of its own — it must not read as another result card
   of the estimator's, which measure the visitor's own amount and nothing else.

   Five years, one column each, all visible at once: the five are compared by looking rather than by
   stepping through a control. The height arrives as `--bar`, set by the component, because the same
   column is drawn vertically here and as a horizontal bar on a phone. What is actually read is the
   amount above each column; the bar is what makes the shape of the five years visible in one glance. */
.projection { margin-top: var(--space-3); padding: 24px; border: 1px solid rgba(0,144,240,.28); border-radius: var(--radius-lg); background: radial-gradient(circle at 100% 0, rgba(0,144,240,.08), transparent 45%), var(--color-bg-card); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.45); }
.projection-head h3 { margin: 0 0 8px; color: #fff; font-size: var(--text-h3); font-weight: var(--weight-title); line-height: 1.45; }
.projection-head p { margin: 0 0 18px; max-width: 720px; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.85; }
.projection-direct-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; margin-bottom: 20px; padding: 16px; border-radius: var(--radius-lg); background: rgba(0,144,240,.05); border: 1px solid rgba(0,144,240,.2); }
.compare-card { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px 16px; border-radius: var(--radius-md); background: rgba(16,36,62,.75); border: 1px solid rgba(255,255,255,.08); }
.compare-in { border-color: rgba(255,255,255,.16); }
.compare-out { border-color: rgba(0,144,240,.4); background: linear-gradient(135deg, rgba(0,144,240,.18), rgba(16,36,62,.85)); }
.compare-eyebrow { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--weight-label); }
.compare-amount { font-size: 1.25rem; font-weight: var(--weight-title); color: #fff; }
.compare-out .compare-amount { color: var(--color-accent, #38bdf8); }
.compare-centimes { font-size: var(--text-xs); color: #93c5fd; font-weight: 700; }
.compare-arrow-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.compare-arrow-symbol { font-size: 1.5rem; color: var(--color-accent, #38bdf8); line-height: 1; }
.compare-arrow-label { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.compare-payback-badge { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--radius-md); background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.28); }
.payback-headline { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.payback-pill { font-size: var(--text-xs); color: #6ee7b7; font-weight: 700; }
.payback-target { font-size: var(--text-sm); color: #fff; font-weight: 800; background: rgba(16,185,129,.2); padding: 3px 10px; border-radius: 12px; }
.payback-sub { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.6; }
.projection-centimes { display: block; font-size: 10px; color: #93c5fd; font-weight: 600; margin-top: 2px; }
.projection-metric-sub { display: block; font-size: 11px; color: #93c5fd; margin-top: 2px; }
.projection-summary-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.projection-metric { padding: 12px 14px; border-radius: var(--radius-md); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 4px; transition: border-color .2s; }
.projection-metric.primary { border-color: rgba(0,144,240,.35); background: linear-gradient(135deg, rgba(0,144,240,.12), rgba(0,144,240,.03)); }
.projection-metric-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--weight-label); }
.projection-metric-val { font-size: 1.05rem; color: #fff; font-weight: var(--weight-title); }
.projection-metric.primary .projection-metric-val { color: var(--color-accent, #38bdf8); }
.projection-caption { margin: 0 0 16px; color: var(--color-text-muted); font-size: var(--text-sm); }
.projection-chart { display: flex; align-items: flex-end; gap: 12px; margin: 0; padding: 10px 0 0; list-style: none; }
.projection-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .22s ease; }
.projection-col:hover { transform: translateY(-4px); }
.projection-col:hover .projection-bar { filter: brightness(1.15); box-shadow: 0 0 18px rgba(0,144,240,.55); }
.projection-figure { padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.07); color: var(--color-text-strong); font-size: var(--text-xs); font-weight: var(--weight-title); text-align: center; white-space: nowrap; }
.projection-track { display: flex; align-items: flex-end; width: 100%; height: 148px; padding: 3px 3px 0; box-sizing: border-box; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.projection-bar { display: block; width: 100%; height: var(--bar, 0%); border-radius: 6px 6px 0 0; background-color: var(--color-green); background-image: linear-gradient(180deg, #38bdf8 0%, #0090f0 60%, rgba(0,144,240,.55) 100%); box-shadow: 0 0 14px rgba(0,144,240,.35); transition: height .4s cubic-bezier(.16,1,.3,1), width .4s cubic-bezier(.16,1,.3,1); }
.projection-axis { color: var(--color-text-muted); font-size: var(--text-xs); padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,.03); }
/* Five columns need roughly 100px each before the amount written over them — an island, which may not
   be broken across lines — stops fitting: measured, «1 000 000 000 دج» is 88px wide. Below that the
   chart turns on its side: a row for every year, the bar growing leftwards from the year's name, the
   amount at the far end of it. `order` is set rather than the markup written the other way round,
   because the vertical shape needs the amount at the top of the column. */
@media (max-width: 640px) {
  .projection { padding: var(--space-2); }
  .projection-direct-compare { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .compare-arrow-box { display: none; }
  .projection-summary-bar { grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
  .projection-chart { flex-direction: column; align-items: stretch; gap: 8px; padding: 0; }
  .projection-col { flex: none; flex-direction: row; align-items: center; gap: 10px; }
  .projection-axis { order: 1; flex: none; min-width: 52px; text-align: center; }
  .projection-track { order: 2; flex: 1; width: auto; height: 14px; padding: 0; }
  .projection-bar { width: var(--bar, 0%); height: 100%; border-radius: 6px 0 0 6px; }
  /* One width for every amount, so the five tracks are one length and their bars are read against a
     single baseline. Without it each track is as long as its own figure is wide, which is a chart
     whose rows start at five different places. */
  .projection-figure { order: 3; flex: none; min-width: 84px; text-align: end; background: none; border: none; padding: 0; }
}

/* === css/home_evolution.css === */
/* Homepage Evolution & Institutional Enhancements */
.hero-metrics-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:24px 0 8px;padding:14px 18px;border-radius:var(--radius-md);background:rgba(255,255,255,.03);border:1px solid rgba(0,144,240,.18);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.hm-item{display:flex;flex-direction:column;gap:2px}
.hm-val{font-size:var(--text-lg);font-weight:800;color:var(--color-accent);font-family:var(--font-heading);letter-spacing:-.02em}
.hm-lbl{font-size:var(--text-xs);color:var(--color-text-dim)}

/* Venture Categories */
.venture-category-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;margin-bottom:20px;-webkit-overflow-scrolling:touch}
.v-tab{padding:8px 16px;border-radius:20px;font-size:var(--text-xs);font-weight:600;background:rgba(255,255,255,.04);color:var(--color-text-muted);border:1px solid var(--color-border);cursor:pointer;white-space:nowrap;transition:all .2s}
.v-tab:hover{background:rgba(255,255,255,.08);color:var(--color-text)}
.v-tab.is-active{background:var(--color-accent);color:#fff;border-color:var(--color-accent);box-shadow:0 0 16px rgba(0,144,240,.35)}

/* Growth Chart in Estimator */
.growth-chart-wrap{margin-top:20px;padding:16px;border-radius:var(--radius-sm);background:rgba(0,0,0,.25);border:1px solid var(--color-border)}
.growth-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.growth-head h4{margin:0;font-size:var(--text-sm);color:var(--color-text)}
.growth-head span{font-size:var(--text-xs);color:var(--color-text-dim)}
.growth-bars{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;height:120px;padding-top:14px}
.growth-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;gap:6px}
.gb-val{font-size:10px;color:var(--color-text-muted);font-weight:600}
.gb-fill-box{width:100%;max-width:32px;background:rgba(255,255,255,.05);border-radius:4px 4px 0 0;overflow:hidden;display:flex;align-items:flex-end;height:80px}
.gb-bar{width:100%;background:linear-gradient(180deg,var(--color-cyan-light),var(--color-accent));border-radius:4px 4px 0 0;transition:height .4s cubic-bezier(.4,0,.2,1)}
.gb-year{font-size:11px;color:var(--color-text-dim)}

/* Tier Comparison Matrix */
.tier-matrix-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:16px}
.tier-card{padding:14px;border-radius:var(--radius-sm);background:rgba(255,255,255,.02);border:1px solid var(--color-border);transition:all .2s;position:relative}
.tier-card.is-selected{border-color:var(--color-accent);background:rgba(0,144,240,.08);box-shadow:0 0 20px rgba(0,144,240,.15)}
.tier-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;margin-bottom:8px;background:rgba(255,255,255,.06);color:var(--color-text-muted)}
.tier-card.is-selected .tier-badge{background:var(--color-accent);color:#fff}
.tier-card h4{margin:0 0 4px;font-size:var(--text-sm);color:var(--color-text)}
.tier-card p{margin:0;font-size:var(--text-xs);color:var(--color-text-dim);line-height:1.4}

/* Governance Accordion */
.gov-section{margin-top:40px;padding:24px 20px;border-radius:var(--radius-md);background:rgba(255,255,255,.02);border:1px solid var(--color-border)}
.gov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}
.gov-card{padding:16px;border-radius:var(--radius-sm);background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.06)}
.gov-card-icon{font-size:20px;margin-bottom:8px;display:block}
.gov-card h3{margin:0 0 6px;font-size:var(--text-sm);color:var(--color-text)}
.gov-card p{margin:0;font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.5}

/* Inline Quick-Apply */
.quick-apply-box{margin-top:24px;padding:20px;border-radius:var(--radius-md);background:linear-gradient(135deg,rgba(0,144,240,.06),rgba(0,0,0,.3));border:1px solid rgba(0,144,240,.24)}
.quick-apply-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:14px 0}

/* === 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: 22px 20px; border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(20, 31, 52, 0.72), rgba(9, 16, 28, 0.82)); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0,0,0,0.35); backdrop-filter: blur(14px); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.steps-grid li:hover { transform: translateY(-4px); border-color: rgba(0, 144, 240, 0.55); box-shadow: 0 18px 40px -10px rgba(0, 144, 240, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.steps-grid strong { position: relative; z-index: 1; width: 42px; height: 42px; background: linear-gradient(135deg, rgba(0, 144, 240, 0.2), rgba(0, 144, 240, 0.05)); border: 1px solid rgba(0, 144, 240, 0.55); color: #51c4ff; font-size: var(--text-md); font-weight: var(--weight-title); box-shadow: 0 0 18px rgba(0, 144, 240, 0.3); transition: all .25s ease; }
.steps-grid li:hover strong { border-color: #51c4ff; box-shadow: 0 0 24px rgba(0, 144, 240, 0.65); transform: scale(1.08); }
.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.32); border-inline-start: 4px solid var(--color-gold); border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(14, 22, 39, 0.75)); box-shadow: 0 16px 36px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(14px); }
.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-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: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius-md); background: rgba(14, 22, 39, 0.65); box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(12px); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.result-card:hover { border-color: rgba(0, 144, 240, 0.45); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.45); }
/* 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.22), rgba(12, 22, 38, 0.85)); border-color: rgba(0, 144, 240, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 30px rgba(0, 144, 240, 0.2); }
/* 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); background: linear-gradient(180deg, #FFFFFF 10%, #76d3ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 14px rgba(0, 144, 240, 0.4)); }
.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; }
/* The floor and the ceiling, stated only when a typed amount falls outside them. It sits under the
   hint at the hint's own size: this is a rule of the model, not a mistake the visitor made, so it
   names the bound instead of scolding. */
.unit-note { margin: 8px 0 0; color: #8fc7ef; font-size: var(--text-xs); line-height: 1.7; }
/* At a bound the +/- button can only repeat the amount already on screen, which reads as broken.
   Same treatment as the admin pagers use for the same state. */
#unit-minus:disabled, #unit-plus:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- 3b. (retired) Carousel progress labels ----------
   A two-label row lived here, stacked at narrow width so «50 مليون دج» never broke mid-phrase. The
   row's first label stated a percentage nothing could derive, so both went with it. */

/* ---------- 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; }
}

/* ---------- 8. Luxury finishing touches ---------- */
.btn-hero-primary, .register-submit { position: relative; overflow: hidden; }
.btn-hero-primary::after, .register-submit::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent); transform: translateX(140%); animation: btnShimmer 5s ease-in-out infinite; pointer-events: none; }
@keyframes btnShimmer { 0%, 20% { transform: translateX(140%); } 50%, 100% { transform: translateX(-140%); } }
.trust-pillar-card, .register-card, .estimator-control { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 36px rgba(0,0,0,.45); }
#shares-range:hover, #shares-range:focus-visible { filter: drop-shadow(0 0 8px rgba(0,144,240,.55)); }
.partner-phone { box-shadow: 0 25px 60px -15px rgba(0,0,0,.75), 0 0 35px -5px rgba(0,144,240,.25); }
@media (prefers-reduced-motion: reduce) { .btn-hero-primary::after, .register-submit::after { animation: none; display: none; } }

/* === css/estimate_sheet.css === */
/* ==========================================================================
   Haplic — the estimate sheet (index.html)
   The paper the home page's estimator produces: the application, the amount,
   the reference percentage, and the five years as a table. The chart beside it
   already draws those five figures for the screen, so the sheet is drawn only
   on paper — `.es-paper` is display: none here and block in the print block
   below, and what the screen shows of this section is the button and the one
   sentence naming what the sheet holds.
   The colours are written for paper rather than for the dark page: this block
   is the only place on this surface that is white and black by design.
   ========================================================================== */

.estimate-sheet { margin: 18px 0 0; }
.es-paper { display: none; }
.es-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.es-hint { max-width: 640px; color: var(--color-text-dim); font-size: var(--text-sm); line-height: 1.8; }

@media (max-width: 640px) {
  .es-actions { flex-direction: column; }
  .es-hint { text-align: center; }
}

/* --- the sheet itself: read on paper, never drawn on screen --------------- */
.es-head { margin-bottom: 16px; }
.es-eyebrow {
  display: block; margin-bottom: 4px; color: #555;
  font-size: var(--text-xs); font-weight: 800;
}
.es-head h3 { margin: 0 0 6px; color: #000; font-size: var(--text-lg); }
.es-app { margin: 0; color: #444; font-size: var(--text-sm); }

.es-figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 18px; }
.es-figures > div { padding: 13px 15px; border: 1px solid #cbcbcb; border-radius: var(--radius-md); }
.es-figures span { display: block; margin-bottom: 6px; color: #444; font-size: var(--text-xs); font-weight: 700; }
.es-figures strong { color: #000; font-size: var(--text-md); font-weight: 800; }

.es-table { width: 100%; border-collapse: collapse; }
.es-table th,
.es-table td { padding: 10px 12px; border: 1px solid #999; color: #000; font-size: var(--text-base); text-align: right; }
.es-table thead th { background: #f2f2f2; color: #333; font-size: var(--text-xs); font-weight: 800; }
.es-table tbody th { font-weight: 700; }
.es-table td { font-weight: 800; }

/* The method sits under the table rather than in a footnote on another page: a figure the office
   entered is an estimate, and the line that says so belongs where the figure is read. */
.es-method { margin: 12px 0 0; color: #333; font-size: var(--text-sm); line-height: 1.9; }
.es-close { margin: 14px 0 0; color: #333; font-size: var(--text-xs); line-height: 1.9; }
.es-figures > div,
.es-table tr { break-inside: avoid; }

/* --- print: one sheet, and nothing on it but the sheet --------------------
   Every other block of the home page, by name. The chrome is named first, then
   each top-level section of <main> — including #calculator, which holds the
   chart and the controls. A section added to index.html later is named here or
   it prints onto the paper, and the suite fails until it is named: that is why
   the list is written out rather than left to a structural rule.
   -------------------------------------------------------------------------- */
@media print {
  html, body { background: #fff; color: #000; }
  @page { margin: 14mm; }

  .site-header,
  .site-footer,
  .mobile-cta,
  #floating-contact,
  #welcome,
  .trust-strip,
  #how-it-works,
  #disclosure,
  #ventures,
  #calculator,
  #register,
  #faq { display: none; }

  .container { max-width: none; margin: 0; padding: 0; }
  .estimate-sheet { margin: 0; }
  .es-paper { display: block; }
  .es-actions { display: none; }
}