/* ==========================================================================
   HAYAT GROUP — Luxury / Editorial Design System
   Loaded after styles.css. It re-maps the existing design tokens (so every
   existing component inherits the system), then restyles shared components.
   The 3D scenes, demo logic and page structure are unchanged.

   1. Tokens          5. Tabs, pills & chips     9. Signature details
   2. Base & type     6. Cards                  10. Site sections
   3. Layout          7. Inputs                 11. Motion & reveal
   4. Buttons/badges  8. Images                 12. Responsive
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Palette */
  --lux-alabaster: #F9F8F6;
  --lux-charcoal: #1A1A1A;
  --lux-taupe: #EBE5DE;
  --lux-grey: #6C6863;
  --lux-gold: #D4AF37;
  --lux-gold-ink: #8A6A1E;            /* gold for text on light paper (4.6:1, AA) */
  --lux-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Semantic roles used by this layer */
  --accent: var(--lux-gold-ink);      /* emphasis text, overlines, numerals */
  --accent-line: var(--lux-gold);     /* hover lines, focus, featured borders */
  --fill: var(--lux-charcoal);        /* selected tabs, primary buttons */
  --on-fill: var(--lux-alabaster);
  --rule: rgba(26, 26, 26, 0.14);     /* hairline dividers */
  --rule-strong: var(--lux-charcoal);
  --grid-line: rgba(26, 26, 26, 0.07);

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Existing tokens (styles.css) re-mapped to the system */
  --primary: var(--lux-charcoal);
  --primary-hover: #2E2B28;
  --primary-light: rgba(26, 26, 26, 0.05);
  --primary-glow: rgba(212, 175, 55, 0.25);
  --primary-gradient: var(--lux-charcoal);
  --secondary: #2E2B28;

  --accent-cyan: #3E5C6E;
  --accent-cyan-light: rgba(62, 92, 110, 0.1);
  --accent-amber: #9C7A2E;
  --accent-amber-light: rgba(156, 122, 46, 0.12);
  --accent-rose: #9B3535;
  --accent-rose-light: rgba(155, 53, 53, 0.09);
  --accent-purple: #5B4B6E;
  --accent-purple-light: rgba(91, 75, 110, 0.1);
  --accent-teal: #3F6358;

  --bg-body: var(--lux-alabaster);
  --bg-surface: #FCFBF9;
  --bg-surface-elevated: #FCFBF9;
  --bg-alt: #F2EDE7;
  --bg-card: #FCFBF9;
  --bg-glass: rgba(249, 248, 246, 0.92);

  --text-main: var(--lux-charcoal);
  --text-muted: var(--lux-grey);
  --text-subtle: #8E8983;
  --text-inverse: var(--lux-alabaster);

  --border-light: var(--rule);
  --border-subtle: rgba(26, 26, 26, 0.07);
  --border-focus: var(--lux-gold);

  --hayat-gold: var(--lux-gold);
  --hayat-blue: #3E5C6E;
  --hayat-emerald: var(--lux-charcoal);
  --hayat-neon: var(--lux-gold-ink);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-cyan: 0 4px 16px rgba(0, 0, 0, 0.15);

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-full: 0px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --transition-fast: 300ms var(--lux-ease);
  --transition-normal: 500ms var(--lux-ease);
  --transition-slow: 700ms var(--lux-ease);
}

/* Inverted charcoal palette: the dark theme and the dark rhythm sections share it */
[data-theme="dark"],
.section-dark {
  --accent: var(--lux-gold);
  --fill: var(--lux-alabaster);
  --on-fill: var(--lux-charcoal);
  --rule: rgba(249, 248, 246, 0.14);
  --rule-strong: var(--lux-alabaster);
  --grid-line: rgba(249, 248, 246, 0.05);

  --primary: var(--lux-gold);
  --primary-hover: #E0C063;
  --primary-light: rgba(212, 175, 55, 0.1);

  --accent-cyan: #9DB8C8;
  --accent-cyan-light: rgba(157, 184, 200, 0.12);
  --accent-amber: #D9B864;
  --accent-amber-light: rgba(217, 184, 100, 0.12);
  --accent-rose: #D98A8A;
  --accent-rose-light: rgba(217, 138, 138, 0.12);
  --accent-purple: #B8A9CC;
  --accent-purple-light: rgba(184, 169, 204, 0.12);

  --bg-body: var(--lux-charcoal);
  --bg-surface: #222120;
  --bg-surface-elevated: #272523;
  --bg-alt: #1F1E1C;
  --bg-card: #222120;
  --bg-glass: rgba(26, 26, 26, 0.92);

  --text-main: var(--lux-alabaster);
  --text-muted: rgba(235, 229, 222, 0.72);
  --text-subtle: rgba(235, 229, 222, 0.5);
  --text-inverse: var(--lux-charcoal);

  --border-light: var(--rule);
  --border-subtle: rgba(249, 248, 246, 0.07);
  --hayat-neon: var(--lux-gold);

  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* In dark mode the rhythm sections go one step deeper so the alternation survives */
[data-theme="dark"] .section-dark {
  --bg-body: #121110;
  --bg-surface: #1A1918;
  --bg-alt: #161514;
}

/* ==========================================================================
   2. BASE & TYPOGRAPHY
   ========================================================================== */
html { font-size: 16px; }
body { line-height: 1.625; }
.bg-ambient-glow { display: none; }

::selection { background: rgba(212, 175, 55, 0.3); color: var(--text-main); }

:focus-visible {
  outline: 1px solid var(--accent-line);
  outline-offset: 3px;
}

h1, h2, h3, h4,
.section-title, .hero-title, .display-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-main);
}

h3 { line-height: 1.2; }
h4 { font-weight: 500; line-height: 1.3; }

/* Mixed italic headlines: emphasised words speak in italic gold */
h1 em, h2 em, h3 em,
.gradient-text, .gradient-text-cyan {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor;
}

.section-title {
  font-size: clamp(2.5rem, 4.6vw, 4.5rem);
  line-height: 1;
  margin: 0;
}

.display-title {
  font-size: clamp(2.25rem, 3.6vw, 3.5rem);
  line-height: 1.02;
  margin: 1rem 0 1.25rem;
}

p { line-height: 1.625; }

/* Arabic: Playfair has no Arabic glyphs; keep Tajawal, emphasis in gold without italics */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .section-title, [dir="rtl"] .hero-title, [dir="rtl"] .display-title,
[dir="rtl"] h1 em, [dir="rtl"] h2 em, [dir="rtl"] .gradient-text,
[dir="rtl"] .vm-statement, [dir="rtl"] .founder-name {
  font-family: var(--font-arabic);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

/* Overline labels: tiny, uppercase, widely tracked */
.section-subtitle,
.overline {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
}

[dir="rtl"] .section-subtitle { letter-spacing: 0; font-size: 0.85rem; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.container {
  max-width: 1600px;
  padding-left: 4rem;
  padding-right: 4rem;
}

.section-padding {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* Visible editorial grid: four hairlines at the container edges and thirds */
.editorial-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 4rem;
}

.editorial-grid span { border-left: 1px solid var(--grid-line); }
.editorial-grid span:last-child { border-right: 1px solid var(--grid-line); }

/* Paper grain: a static texture tile, so it costs nothing while scrolling */
.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.025;
  background: url("assets/paper-grain.png") repeat;
}

[data-theme="dark"] .paper-grain { opacity: 0.035; }

/* Dark rhythm sections */
.section-dark {
  background-color: var(--bg-body);
  color: var(--text-main);
}

/* A contained section that still paints full-bleed */
.section-dark--contained {
  box-shadow: 0 0 0 100vmax var(--bg-body);
  clip-path: inset(0 -100vmax);
}

.journey-section {
  background-color: var(--bg-alt);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.interactive-demo-section { background-color: var(--bg-body); }

/* Chapter heading: asymmetric 8 / 4 composition, numbered with a drawn rule */
main { counter-reset: chapter; }

.section-head-center {
  counter-increment: chapter;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 2rem;
  align-items: end;
  max-width: none;
  margin: 0 0 5rem;
  padding: 0;
  border: 0;
  text-align: start;
}

.section-head-center > * { grid-column: 1 / -1; }
.section-head-center > .section-title { grid-column: 1 / span 8; }
.section-head-center > .section-desc {
  grid-column: 9 / -1;
  margin: 0;
  max-width: 28rem;
  font-size: 1rem;
  color: var(--text-muted);
}

/* numeral, drawn rule, label: the rule belongs to the numeral so spacing never guesses */
.section-head-center .section-subtitle::before {
  content: counter(chapter, decimal-leading-zero);
  padding-inline-end: 4.25rem;
  background: linear-gradient(var(--rule-strong), var(--rule-strong)) no-repeat right center / 3rem 1px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}

[dir="rtl"] .section-head-center .section-subtitle::before { background-position: left center; }

/* ==========================================================================
   4. BUTTONS & BADGES
   ========================================================================== */
.btn {
  height: 3rem;
  padding: 0 2.25rem;
  gap: 0.75rem;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 500ms var(--lux-ease), background-color 500ms var(--lux-ease),
              border-color 500ms var(--lux-ease), box-shadow 500ms var(--lux-ease);
}

.btn:hover { transform: none; }
.btn-sm { height: 2.5rem; padding: 0 1.25rem; font-size: 0.625rem; letter-spacing: 0.18em; }
.btn-lg { height: 3.5rem; padding: 0 2.75rem; font-size: 0.75rem; }

[dir="rtl"] .btn { letter-spacing: 0; font-size: 0.85rem; }

/* Primary: charcoal, with a gold layer that slides in from the leading edge */
.btn-primary,
.btn-gradient-cyan {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--fill);
  color: var(--on-fill);
  border: 1px solid var(--fill);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.btn-primary::before,
.btn-gradient-cyan::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lux-gold);
  transform: translateX(-101%);
  transition: transform 500ms var(--lux-ease);
}

[dir="rtl"] .btn-primary::before,
[dir="rtl"] .btn-gradient-cyan::before { transform: translateX(101%); }

.btn-primary:hover,
.btn-gradient-cyan:hover {
  background: var(--fill);
  border-color: var(--lux-gold);
  color: var(--lux-charcoal);          /* charcoal on gold keeps AA contrast */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.btn-primary:hover::before,
.btn-gradient-cyan:hover::before { transform: translateX(0); }

/* Secondary / outline: a hairline that fills on hover */
.btn-secondary,
.btn-outline-primary {
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--rule-strong);
  box-shadow: none;
}

.btn-secondary:hover,
.btn-outline-primary:hover {
  background: var(--fill);
  color: var(--on-fill);
  border-color: var(--fill);
}

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

.icon-btn {
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 0;
  border-color: var(--rule);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  transition: border-color 500ms var(--lux-ease), color 500ms var(--lux-ease);
}

.icon-btn:hover { background: transparent; border-color: var(--rule-strong); color: var(--accent); }

.badge {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text-muted);
  padding: 0.35rem 0.75rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.badge-primary { color: var(--text-main); border-color: var(--rule-strong); background: transparent; }
.badge-cyan { color: var(--accent-cyan); border-color: currentColor; background: transparent; }
.badge-demo { color: var(--accent); border-color: var(--accent-line); background: transparent; }
[data-theme="dark"] .badge-demo { color: var(--lux-gold); background: transparent; }
.badge-pulse::before { background-color: var(--lux-gold); border-radius: 0; animation: none; box-shadow: none; }

[dir="rtl"] .badge { letter-spacing: 0; font-size: 0.75rem; }

/* ==========================================================================
   5. TABS, PILLS & CHIPS (one shared selected state)
   ========================================================================== */
.stage-tab-btn,
.demo-tab-btn,
.scale-btn,
.res-tab-btn,
.proto-mode-btn,
.design-view-btn,
.problem-chip,
.builder-pill {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text-muted);
  box-shadow: none;
  transition: color 500ms var(--lux-ease), background-color 500ms var(--lux-ease), border-color 500ms var(--lux-ease);
}

.stage-tab-btn,
.demo-tab-btn,
.scale-btn,
.res-tab-btn,
.proto-mode-btn,
.design-view-btn {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.stage-tab-btn:hover, .demo-tab-btn:hover, .scale-btn:hover, .res-tab-btn:hover,
.proto-mode-btn:hover, .design-view-btn:hover, .problem-chip:hover, .builder-pill:hover {
  border-color: var(--rule-strong);
  color: var(--text-main);
  background: transparent;
}

.stage-tab-btn.active, .demo-tab-btn.active, .scale-btn.active, .res-tab-btn.active,
.proto-mode-btn.active, .design-view-btn.active, .problem-chip.active, .builder-pill.active {
  background: var(--fill);
  color: var(--on-fill);
  border-color: var(--fill);
  box-shadow: none;
}

.stage-tab-btn .stage-num {
  border-radius: 0;
  background: transparent;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--accent);
}

.stage-tab-btn.active .stage-num { color: var(--lux-gold); background: transparent; }

[dir="rtl"] .stage-tab-btn, [dir="rtl"] .demo-tab-btn { letter-spacing: 0; font-size: 0.85rem; }

.stream-step-circle { border-radius: 0; }
.stream-node-step.active .stream-step-circle { background: var(--fill); color: var(--on-fill); }

/* ==========================================================================
   6. CARDS: defined by lines, not boxes
   ========================================================================== */
.pillar-card,
.tech-card,
.lab-zone-card,
.team-role {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 2.5rem 2rem 2.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transform: none;
  transition: background-color 700ms var(--lux-ease), box-shadow 700ms var(--lux-ease), border-color 700ms var(--lux-ease);
}

.pillar-card:hover,
.tech-card:hover,
.lab-zone-card:hover,
.team-role:hover {
  background: rgba(26, 26, 26, 0.018);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transform: none;
  border-color: var(--rule-strong);
}

.section-dark .pillar-card:hover,
.section-dark .tech-card:hover,
[data-theme="dark"] .pillar-card:hover,
[data-theme="dark"] .tech-card:hover,
[data-theme="dark"] .lab-zone-card:hover,
[data-theme="dark"] .team-role:hover { background: rgba(249, 248, 246, 0.025); }

/* Featured / selected card: a gold top rule (inset, so nothing shifts) */
.lab-zone-card.active {
  background: transparent;
  border-color: var(--rule-strong);
  box-shadow: inset 0 3px 0 var(--lux-gold), 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Icons become editorial numerals */
.pillars-grid,
.lab-zones-grid,
.tech-areas-grid { counter-reset: card; }

.pillar-card,
.lab-zone-card,
.tech-card { counter-increment: card; }

.pillar-icon-box,
.lab-zone-icon,
.tech-index {
  width: auto;
  height: auto;
  margin: 0 0 1.75rem;
  background: transparent !important;   /* icon tints were inline-coloured per card */
  border-radius: 0;
  font-size: 0;
  line-height: 1;
}

.pillar-icon-box::before,
.lab-zone-icon::before,
.tech-index::before {
  content: counter(card, decimal-leading-zero);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.75rem;
  color: var(--accent);
}

.pillar-title,
.tech-card h4,
.lab-zone-card h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem !important;          /* overrides the inline card title size */
  line-height: 1.15;
  margin-bottom: 0.75rem !important;
}

.pillar-desc,
.tech-card p,
.lab-zone-card p { line-height: 1.625; }

.tech-flow-diagram {
  background: transparent;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 1rem 0 0;
  margin-top: 2rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tech-flow-arrow { color: var(--accent) !important; }

/* Journey stage icons: quiet, monochrome frames */
.stage-icon-badge {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  filter: grayscale(1);
  font-size: 1.35rem;
}

/* Large surfaces */
.stage-demo-card,
.demo-screen-container,
.calculator-card,
.idea-experience-card,
.venture-spotlight-card,
.human-centered-banner {
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.calculator-card,
.idea-experience-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule-strong);
  box-shadow: none;
  padding: 4rem 0 0;
}

.venture-ribbon {
  background: var(--lux-charcoal);
  color: var(--lux-alabaster);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  padding: 0.9rem 3rem;
}

/* Project cards: image first, then text on a single rule */
.project-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule-strong);
  border-radius: 0;
  box-shadow: none;
  transform: none;
  padding-top: 2rem;
}

.project-card:hover { transform: none; box-shadow: none; }
.project-card.flagship { border: 0; border-top: 4px solid var(--lux-gold); }

.project-media-wrap {
  height: 320px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  transition: box-shadow 1500ms var(--lux-ease);
}

.project-card:hover .project-media-wrap { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.project-card-content { padding: 2.25rem 0 0; }
.project-title { font-size: 2rem; font-weight: 400; line-height: 1.1; }

.project-tag {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--rule);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ==========================================================================
   7. INPUTS: underline only
   ========================================================================== */
.form-control {
  height: 3rem;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  background: transparent;
  font-size: 0.9rem;
  transition: border-color 500ms var(--lux-ease);
}

textarea.form-control { height: auto; min-height: 6rem; }

.form-control::placeholder {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-muted);
  opacity: 1;
}

.form-control:focus,
.form-control:focus-visible {
  outline: none;
  box-shadow: none;
  border-bottom-color: var(--lux-gold);
}

.form-label {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
}

[dir="rtl"] .form-label { letter-spacing: 0; font-size: 0.8rem; }

/* ==========================================================================
   8. IMAGES: photographs are monochrome until you linger
   Product screenshots (.png) stay in colour so the interfaces stay readable.
   ========================================================================== */
img[src$=".jpg"] {
  filter: grayscale(1);
  transition: filter 1800ms var(--lux-ease), transform 1800ms var(--lux-ease);
}

:hover > img[src$=".jpg"],
.project-card:hover img[src$=".jpg"] {
  filter: grayscale(0);
  transform: scale(1.05);
}

.human-centered-banner > div:first-child,
.project-media-wrap { overflow: hidden; }

.human-banner-img { transition-duration: 1800ms; }

/* ==========================================================================
   9. SIGNATURE DETAILS
   ========================================================================== */
/* Vertical text labels */
.vertical-label {
  position: absolute;
  top: 1.5rem;
  left: -2.5rem;
  z-index: 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
  pointer-events: none;
  white-space: nowrap;
}

.vertical-label--light {
  left: 1.25rem;
  color: rgba(249, 248, 246, 0.75);
}

.hero-visual { position: relative; }

/* Drop caps for introductory paragraphs */
.about-section .section-desc::first-letter,
.founder-bio::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 0.8;
  margin: 0.4rem 0.75rem 0 0;
  color: var(--text-main);
}

[dir="rtl"] .about-section .section-desc::first-letter,
[dir="rtl"] .founder-bio::first-letter {
  float: none;
  font-size: inherit;
  margin: 0;
  font-family: inherit;
  color: inherit;
}

/* Decorative horizontal line before overlines */
.hero-overline {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero-overline::before {
  content: "";
  width: 3rem;
  height: 1px;
  background: var(--rule-strong);
  flex: none;
}

[dir="rtl"] .hero-overline { letter-spacing: 0; font-size: 0.85rem; }

/* Reading progress: a single gold hairline */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1100;
  background: var(--lux-gold);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

[dir="rtl"] .scroll-progress { transform-origin: right center; }

/* ==========================================================================
   10. SITE SECTIONS
   ========================================================================== */

/* ---- Header ---- */
.site-header {
  background-color: var(--bg-glass);
  border-bottom: 1px solid var(--rule);
}

.nav-container { height: 5.5rem; gap: 2rem; }

.brand-icon {
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: var(--fill);
  color: var(--on-fill);
  box-shadow: none;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.brand-tagline {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
}

[dir="rtl"] .brand-name, [dir="rtl"] .brand-tagline { letter-spacing: 0; }

.nav-menu { gap: 2.25rem; }

.nav-link {
  position: relative;
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 500ms var(--lux-ease);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--lux-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--lux-ease);
}

.nav-link:hover { color: var(--accent); }
.nav-link.active { color: var(--text-main); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

[dir="rtl"] .nav-link { letter-spacing: 0; font-size: 0.9rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.75rem;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform 500ms var(--lux-ease), opacity 500ms var(--lux-ease);
}

.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Hero ---- */
.hero-section { padding-top: 6rem; padding-bottom: 8rem; }
.hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4.5rem; align-items: center; }

.hero-title {
  font-size: clamp(3.25rem, 5.4vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 2rem 0 2.5rem;
}

.hero-lead { font-size: 1.125rem; max-width: 34rem; color: var(--text-muted); }
.hero-cta-group { gap: 1rem; margin-bottom: 4.5rem; }

.hero-stats-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule-strong);
}

.hero-stat-item { padding: 0 1.5rem; border-inline-start: 1px solid var(--rule); }
.hero-stat-item:first-child { padding-inline-start: 0; border-inline-start: 0; }

.hero-stat-item .stat-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.4vw, 2.75rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--text-main);
}

.hero-stat-item .stat-label {
  margin-top: 0.75rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

[dir="rtl"] .hero-stat-item .stat-label { letter-spacing: 0; font-size: 0.8rem; }

/* The 3D frame follows the system; the scene inside is untouched */
.hero-3d-wrapper {
  border-radius: 0;
  border-color: var(--rule);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* ---- About: Vision & Mission (asymmetric 7 / 5) ---- */
.vm-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2rem;
  align-items: stretch;
}

.vm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
  min-height: 420px;
  padding: 3.5rem;
  overflow: hidden;
}

.vm-vision {
  background: var(--lux-charcoal);
  color: var(--lux-alabaster);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.vm-vision::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23F9F8F6' stroke-width='1'%3E%3Cpath d='M36 8l8.2 19.8L64 36l-19.8 8.2L36 64l-8.2-19.8L8 36l19.8-8.2z'/%3E%3Crect x='20' y='20' width='32' height='32' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.vm-mission {
  background: transparent;
  border-top: 1px solid var(--rule-strong);
  padding-left: 0;
  padding-right: 0;
  justify-content: flex-end;
}

.vm-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.vm-vision .vm-label { color: rgba(235, 229, 222, 0.7); }
.vm-mission .vm-label { color: var(--text-muted); }

.vm-index {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lux-gold);
}

.vm-mission .vm-index { color: var(--accent); }

.vm-statement {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
}

.vm-vision .vm-statement { font-size: clamp(1.75rem, 2.8vw, 2.75rem); color: var(--lux-alabaster); }
.vm-mission .vm-statement { font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.4; color: var(--text-main); }

[dir="rtl"] .vm-label { letter-spacing: 0; font-size: 0.85rem; }

.vision2030-strip {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 2rem 4rem;
  margin-top: 6rem;
  padding-top: 3rem;
  border-top: 1px solid var(--rule-strong);
  align-items: start;
}

.v2030-tag {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}

.v2030-copy h3 {
  font-size: clamp(1.75rem, 2.4vw, 2.5rem);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.v2030-copy p { max-width: 32rem; }

.v2030-goals {
  list-style: none;
  counter-reset: goal;
  border-top: 1px solid var(--rule);
}

.v2030-goals li {
  counter-increment: goal;
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--text-main);
  transition: color 500ms var(--lux-ease), padding 500ms var(--lux-ease);
}

.v2030-goals li:hover { color: var(--accent); padding-inline-start: 0.75rem; }

.v2030-goals li::before {
  content: counter(goal, decimal-leading-zero);
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}

[dir="rtl"] .v2030-goals li { font-family: var(--font-arabic); font-size: 1.1rem; }

/* ---- Spotlight, pillars, calculator ---- */
.venture-spotlight-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule-strong);
  box-shadow: none;
}

.venture-spotlight-card > div:nth-child(2) { padding: 3.5rem 0 !important; }   /* inline card padding */
.venture-spotlight-card .brand-icon { display: none; }

.pillars-grid { gap: 0 2rem; }
.pillar-points li { font-size: 0.9rem; }
.pillar-points svg { color: var(--accent); }

/* ---- Projects NeuroFlow illustration ---- */
.neuroflow-art,
.neuroflow-art svg { display: block; width: 100%; height: 100%; }
.neuroflow-art svg { transition: transform 1800ms var(--lux-ease); }
.project-card:hover .neuroflow-art svg { transform: scale(1.05); }

.nf-pulse {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: nf-trace 6s linear infinite;
}

@keyframes nf-trace { to { stroke-dashoffset: -520; } }

/* ---- Technology grid (4 capabilities, 2 × 2) ---- */
.tech-areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }

/* ---- Human-centred banner ---- */
.human-centered-banner {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule-strong);
  box-shadow: none;
}

.human-banner-content { padding: 4rem 0 4rem 4rem; }
[dir="rtl"] .human-banner-content { padding: 4rem 4rem 4rem 0; }
.human-banner-content > div[style] { border-radius: 0 !important; background: transparent !important; border-left-color: var(--lux-gold) !important; }

/* ---- Founder & Team (asymmetric 5 / 7) ---- */
.founder-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 5rem;
  align-items: end;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.founder-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--lux-charcoal);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.founder-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23F9F8F6' stroke-width='1'%3E%3Cpath d='M36 8l8.2 19.8L64 36l-19.8 8.2L36 64l-8.2-19.8L8 36l19.8-8.2z'/%3E%3Crect x='20' y='20' width='32' height='32' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
}

.founder-monogram {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(6rem, 11vw, 10rem);
  line-height: 1;
  color: var(--lux-alabaster);
}

.founder-portrait-caption {
  position: absolute;
  left: 3.5rem;
  right: 2rem;
  bottom: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(249, 248, 246, 0.2);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(235, 229, 222, 0.7);
}

.founder-body { padding: 0 0 1rem; }

.founder-kicker {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.founder-kicker::before { content: ""; width: 3rem; height: 1px; background: var(--rule-strong); }

.founder-name {
  margin: 1.5rem 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 5.4vw, 5.5rem);
  line-height: 0.95;
}

.founder-role {
  margin-bottom: 2.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.founder-bio {
  max-width: 36rem;
  margin-bottom: 2.5rem;
  font-size: 1.0625rem;
  color: var(--text-muted);
}

.founder-facts {
  list-style: none;
  max-width: 36rem;
  margin-bottom: 3rem;
  border-top: 1px solid var(--rule);
}

.founder-facts li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--text-main);
}

.founder-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

.founder-email {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--text-muted);
}

[dir="rtl"] .founder-kicker, [dir="rtl"] .founder-role { letter-spacing: 0; font-size: 0.85rem; }

.team-build {
  margin-top: 8rem;
  padding: 0;
  border: 0;
}

.team-build-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2rem 5rem;
  align-items: end;
  margin-bottom: 3.5rem;
}

.team-build-head h3 { font-size: clamp(2rem, 3vw, 3rem); line-height: 1.05; }
.team-build-head p { max-width: 32rem; }

.team-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2rem;
  margin-bottom: 3rem;
}

.team-role-no {
  display: block;
  margin-bottom: 1.75rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.75rem;
  color: var(--accent);
}

.team-role h4 { font-size: 1.5rem; font-weight: 400; margin-bottom: 0.75rem; }

/* ---- Footer ---- */
.site-footer { border-top: 0; }
.footer-col h5 {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.footer-links a { transition: color 500ms var(--lux-ease); }
.footer-links a:hover { color: var(--lux-gold); }
.footer-bottom { font-size: 0.625rem; letter-spacing: 0.15em; text-transform: uppercase; }
[dir="rtl"] .footer-col h5, [dir="rtl"] .footer-bottom { letter-spacing: 0; font-size: 0.8rem; }

/* ---- Modals & toast ---- */
.modal-backdrop,
.journey-modal-backdrop { background: rgba(26, 26, 26, 0.72); }

/* ---- Layout fixes carried over (columns that must be allowed to shrink) ---- */
.calc-grid > *,
.human-centered-banner > *,
.idea-form-grid > * { min-width: 0; }

/* ==========================================================================
   11. MOTION & REVEAL (cinematic)
   ========================================================================== */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1400ms var(--lux-ease), transform 1400ms var(--lux-ease);
}

.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
  img[src$=".jpg"] { transform: none !important; }
  .nf-pulse { animation: none; stroke-dashoffset: 0; }
}

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
/* The wordmark stands alone until there is room for the tagline on one line */
.brand-tagline { white-space: nowrap; }

@media (max-width: 1599px) {
  .brand-tagline { display: none; }
}

@media (max-width: 1280px) {
  .nav-menu { gap: 1.5rem; }
}

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu { display: none; }

  .site-header.nav-open .nav-menu {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem 2rem 2rem;
    background: var(--bg-body);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  }

  .site-header.nav-open .nav-link {
    display: block;
    padding: 1.1rem 0;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--rule);
  }

  .site-header.nav-open .nav-link::after { display: none; }
}

/* Tablet & below: grid lines and vertical labels step aside, the tone stays */
@media (max-width: 1024px) {
  .editorial-grid,
  .vertical-label { display: none; }

  .container { padding-left: 2rem; padding-right: 2rem; }
  .section-padding { padding-top: 5rem; padding-bottom: 5rem; }

  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 4rem; }

  .section-head-center { margin-bottom: 3.5rem; grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
  .section-head-center > .section-title,
  .section-head-center > .section-desc { grid-column: 1 / -1; }

  .vm-grid,
  .vision2030-strip,
  .founder-card,
  .team-build-head,
  .human-centered-banner { grid-template-columns: 1fr; }

  .founder-card { gap: 3rem; }
  .founder-portrait { aspect-ratio: 4 / 3; }
  .human-banner-content,
  [dir="rtl"] .human-banner-content { padding: 3rem 0 0; }
  .team-roles { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .tech-areas-grid { grid-template-columns: 1fr; }
  .hero-section { padding-top: 3.5rem; padding-bottom: 5rem; }
  .hero-title { font-size: clamp(3rem, 12vw, 4rem); }
  .hero-stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .hero-stat-item:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .section-title { font-size: clamp(2.25rem, 9vw, 3rem); }
  .vm-card { padding: 2.25rem; min-height: 0; gap: 2.5rem; }
  .vm-mission { padding-left: 0; padding-right: 0; }
  .project-media-wrap { height: 240px; }
  .team-build { margin-top: 5rem; }
  .venture-ribbon { padding: 0.9rem 1.25rem; letter-spacing: 0.18em; }
}

@media (max-width: 600px) {
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }
  .brand-name { font-size: 1.05rem; letter-spacing: 0.08em; }
  .brand-icon { width: 36px; height: 36px; }
  #header-cta-btn { display: none; }
  .nav-container { gap: 0.5rem; }
  .nav-actions { gap: 0.4rem; }
  .btn { padding-left: 1.25rem; padding-right: 1.25rem; }
  .hero-cta-group .btn {
    width: 100%;
    height: auto;
    min-height: 3.25rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    white-space: normal;
    text-align: center;
    line-height: 1.5;
  }
  .calculator-card,
  .idea-experience-card { padding-top: 2.5rem; }
  .calc-results-display { grid-template-columns: minmax(0, 1fr); }
  .founder-portrait-caption { left: 1.5rem; }
  .tech-card { min-width: 0; padding-left: 0; padding-right: 0; }
  .tech-flow-diagram { flex-wrap: wrap; gap: 0.5rem 0.75rem; justify-content: flex-start; }
  .hero-3d-hover-card { flex-wrap: wrap; }
}