/*
 * Pyramidal Technology design system — "Ascendant Grid".
 *
 * Brand concept: a two-facet pyramid mark (indigo + cyan) with an amber apex signal — the
 * convergence of the company's service lines (satellite, web, mobile, cybersecurity, data,
 * games) into one engineering standard. Indigo/violet is the PRIMARY brand hue (distinct
 * from Pyramidal Sat's navy/cyan "Deep-Space Instrumentation" identity, since this is the parent
 * company's own brand, not a Sat reskin); cyan is kept as a secondary accent deliberately, as the
 * visual thread connecting this site to Pyramidal Sat's own palette; amber is the sparse
 * "energy/signal" tertiary (apex dot, CTA highlights).
 *
 * This file bridges the --pyr-* tokens onto Bootstrap 5's compiled classes (.btn-*, .card,
 * .navbar, .alert-*, .form-control …) the same way every other Pyramidal project's site.css does
 * — see the token/override structure note in the full-featured template's site.css. site.css
 * loads AFTER bootstrap.min.css (see _Layout), so equal-specificity overrides win by source order.
 *
 * ⚠️ COMMENT HAZARD: never write "--pyr-*" directly followed by "/" with no space inside a CSS
 * comment — "*" + "/" closes the comment early and silently swallows the next rule (bit
 * PyramidalGuard, 2026-07-19). Always leave a space: "--pyr-* / --bs-*".
 *
 * Dark is the default and only surface for this v1 (a marketing site, not a data-heavy dashboard
 * — no light-theme token set is needed yet; add one under [data-pyr-theme="light"] the same way
 * the full-featured template does, if a future page genuinely needs it).
 *
 * Fonts: family names are declared with strong system-font fallbacks; no self-hosted woff2 files
 * are vendored yet (a Google Fonts <link> would need a CSP font-src/style-src carve-out this
 * strict-CSP baseline deliberately doesn't have). Vendor the real files before a brand-polish
 * pass — see docs/deployment_ledger.md.
 */

:root {
  /* ---- Structural tokens (spacing / radius / shadow / tap target) ---- */
  --pyr-space-1: 0.25rem;
  --pyr-space-2: 0.5rem;
  --pyr-space-3: 0.75rem;
  --pyr-space-4: 1rem;
  --pyr-space-5: 1.5rem;
  --pyr-space-6: 2rem;
  --pyr-space-7: 3rem;
  --pyr-space-8: 5rem;
  --pyr-radius-sm: 0.25rem;
  --pyr-radius-md: 0.5rem;
  --pyr-radius-lg: 0.75rem;
  --pyr-radius-pill: 9999px;
  --pyr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.14);
  --pyr-shadow-md: 0 8px 24px rgba(4, 4, 20, 0.35);
  --pyr-tap-min: 44px;

  /* ---- Z-index scale ---- */
  --pyr-z-dropdown: 1000;
  --pyr-z-sticky: 1020;
  --pyr-z-toast: 1080;

  /* ---- Type families. Data is Latin/numeric. ---- */
  --pyr-font-display: "Sora", "Tajawal", ui-sans-serif, sans-serif;         /* logo + hero */
  --pyr-font-heading: "Sora", "Tajawal", ui-sans-serif, sans-serif;         /* section headings */
  --pyr-font-body: "Inter", "Noto Sans Arabic", system-ui, sans-serif;      /* reading + UI */
  --pyr-font-data: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* phone/ids/timestamps */

  /* ---- Type scale — fixed rem, ~1.2 ratio ---- */
  --pyr-text-display: 2.75rem;
  --pyr-text-headline: 1.9rem;
  --pyr-text-title: 1.25rem;
  --pyr-text-body: 1rem;
  --pyr-text-sm: 0.875rem;
  --pyr-text-label: 0.75rem;
  --pyr-text-data: 0.9375rem;

  /* ---- Committed brand hues (source of truth) ---- */
  --pyr-void: #0A0A18;
  --pyr-void-elevated: #14152E;
  --pyr-indigo: #5747E0;
  --pyr-indigo-light: #8B7FFF;
  --pyr-indigo-ink: #3B2FB0;
  --pyr-cyan: #22D3EE;
  --pyr-cyan-light: #7EE8F7;
  --pyr-cyan-ink: #0E7A90;
  --pyr-amber: #FFB020;
  --pyr-amber-light: #FFCB66;
  --pyr-amber-ink: #9A6400;
  --pyr-success: #2ECC71;
  --pyr-success-ink: #1B7A43;
  --pyr-warning: #FFB020;
  --pyr-warning-ink: #9A6400;
  --pyr-danger: #FF5470;
  --pyr-danger-ink: #C81E45;
  /* The official logo's own indigo, a shade cooler than --pyr-indigo. Only the brand mark uses it;
     the UI palette stays on --pyr-indigo. Keep the two apart — matching them recolours the logo.
     img/favicon.svg carries this value literally: a standalone SVG cannot read a CSS variable. */
  --pyr-logo: #545EAA;

  /* ---- Semantic surface tokens (dark, default and only surface in v1) ---- */
  --pyr-bg: var(--pyr-void);
  --pyr-surface: #101127;
  --pyr-surface-2: var(--pyr-void-elevated);
  --pyr-recessed: #0A0A18;
  --pyr-border: #26274A;
  --pyr-border-strong: #35376A;
  --pyr-text: #ECECF6;
  --pyr-text-muted: #9694B8;
  --pyr-on-accent: #FFFFFF;             /* white text on the indigo primary fill (~6.2:1 AA) */
  --pyr-on-accent-dark: var(--pyr-void); /* dark text on bright cyan/amber fills */
  --pyr-primary: var(--pyr-indigo);
  --pyr-primary-hover: var(--pyr-indigo-light);
  --pyr-link: var(--pyr-cyan-light);
  --pyr-accent-amber: var(--pyr-amber);

  --pyr-status-success: var(--pyr-success);
  --pyr-status-warning: var(--pyr-warning);
  --pyr-status-danger: #FF7A93;
  --pyr-status-info: var(--pyr-cyan-light);

  --pyr-success-glow: rgba(46, 204, 113, 0.12);
  --pyr-success-line: rgba(46, 204, 113, 0.42);
  --pyr-warning-glow: rgba(255, 176, 32, 0.12);
  --pyr-warning-line: rgba(255, 176, 32, 0.42);
  --pyr-danger-glow: rgba(255, 84, 112, 0.12);
  --pyr-danger-line: rgba(255, 84, 112, 0.42);
  --pyr-neutral-glow: rgba(150, 148, 184, 0.12);
  --pyr-cyan-glow: rgba(34, 211, 238, 0.14);
  --pyr-cyan-line: rgba(34, 211, 238, 0.4);
  --pyr-indigo-glow: rgba(87, 71, 224, 0.18);

  --pyr-focus-ring-glow: var(--pyr-cyan-glow);
  --pyr-focus-ring-ink: var(--pyr-cyan-ink);

  /* Bridge the two Bootstrap utility vars .text-primary / .bg-primary actually read. */
  --bs-primary: var(--pyr-indigo);
  --bs-primary-rgb: 87, 71, 224;
}

/* =====================================================================================
   Base
   ===================================================================================== */
html {
  font-size: 15px;
  scroll-behavior: smooth;
}
@media (min-width: 768px) {
  html { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background-color: var(--pyr-bg);
  color: var(--pyr-text);
  font-family: var(--pyr-font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--pyr-font-heading);
  color: var(--pyr-text);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--pyr-link); text-underline-offset: 0.15em; }
a:hover { color: var(--pyr-primary-hover); }

hr { border-color: var(--pyr-border); opacity: 1; }
.text-muted { color: var(--pyr-text-muted) !important; }
::selection { background: var(--pyr-indigo-glow); color: var(--pyr-text); }

.py-6 { padding-block: var(--pyr-space-8); }

/* Machine-truth values (phone numbers, timestamps) — force LTR + bidi isolation so RTL pages
   never visually reorder digits/punctuation (§ Pyramidal RTL rule). */
.pyr-data {
  font-family: var(--pyr-font-data);
  font-size: var(--pyr-text-data);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* =====================================================================================
   Focus ring — AA-safe cyan inner ring + soft glow.
   ===================================================================================== */
.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus,
a:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 0.125rem var(--pyr-focus-ring-ink), 0 0 0 0.3rem var(--pyr-focus-ring-glow);
}

/* =====================================================================================
   Navigation — dark, sticky, does NOT mirror under RTL (deliberate, same rationale as every
   other Pyramidal masthead: muscle-memory consistency for the logo/toggle position).
   ===================================================================================== */
.pyr-navbar {
  background-color: var(--pyr-void-elevated);
  border-bottom: 1px solid var(--pyr-border);
  z-index: var(--pyr-z-sticky);
  direction: ltr;
}
html[dir="rtl"] .pyr-navbar .navbar-collapse { direction: rtl; }
/* The nav group sits at the far edge from the brand. The masthead stays LTR (above) while the
   collapse is flipped back to RTL so Arabic nav text reads correctly, and that flip reverses what
   "end" means — inside it, flex-end is the LEFT, flush against the brand with no gap. So the two
   directions need opposite values to reach the same physical edge. Set here rather than with
   Bootstrap's justify-content-* utility, which is !important and so cannot be overridden per
   direction. */
.pyr-navbar .navbar-nav { justify-content: flex-end; }
html[dir="rtl"] .pyr-navbar .navbar-nav { justify-content: flex-start; }
@media (min-width: 768px) {
  /* Floor on the brand-to-nav gap, so a viewport just wide enough to stay expanded can never
     collapse the two into each other. */
  .pyr-navbar .navbar-collapse { margin-inline-start: var(--pyr-space-4); }
}
.pyr-navbar .navbar-brand {
  font-family: var(--pyr-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--pyr-text) !important;
}
.pyr-navbar .pyr-brand-accent { color: var(--pyr-cyan-light); }
.pyr-navbar .nav-link {
  color: var(--pyr-text-muted) !important;
  min-height: var(--pyr-tap-min);
  display: flex;
  align-items: center;
  font-weight: 500;
}
.pyr-navbar .nav-link:hover, .pyr-navbar .nav-link:focus { color: var(--pyr-text) !important; }
.pyr-navbar .navbar-toggler {
  border-color: var(--pyr-border);
  min-width: var(--pyr-tap-min);
  min-height: var(--pyr-tap-min);
}
.pyr-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ECECF6' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.pyr-logo-mark { flex-shrink: 0; }

/* =====================================================================================
   Buttons
   ===================================================================================== */
.btn {
  --bs-btn-focus-box-shadow: none;
  border-radius: var(--pyr-radius-sm);
  padding: 0.65rem 1.4rem;
  min-height: var(--pyr-tap-min);
  font-weight: 600;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
}
.btn-primary {
  --bs-btn-bg: var(--pyr-primary);
  --bs-btn-border-color: var(--pyr-primary);
  --bs-btn-color: var(--pyr-on-accent);
  --bs-btn-hover-bg: var(--pyr-primary-hover);
  --bs-btn-hover-border-color: var(--pyr-primary-hover);
  --bs-btn-hover-color: var(--pyr-on-accent);
  --bs-btn-active-bg: var(--pyr-indigo-ink);
  --bs-btn-active-border-color: var(--pyr-indigo-ink);
  --bs-btn-active-color: var(--pyr-on-accent);
  --bs-btn-disabled-bg: var(--pyr-surface-2);
  --bs-btn-disabled-border-color: var(--pyr-border);
  --bs-btn-disabled-color: var(--pyr-text-muted);
  background-color: var(--pyr-primary);
  border-color: var(--pyr-primary);
  color: var(--pyr-on-accent);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-secondary, .btn-outline-primary {
  background-color: transparent;
  border-color: var(--pyr-border-strong);
  color: var(--pyr-text);
}
.btn-secondary:hover, .btn-outline-primary:hover,
.btn-secondary:focus, .btn-outline-primary:focus {
  background-color: var(--pyr-indigo-glow);
  border-color: var(--pyr-indigo-light);
  color: var(--pyr-text);
}
.btn .pyr-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pyr-spin 0.6s linear infinite;
  vertical-align: -0.125em;
}
@keyframes pyr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover { transform: none; }
}

/* =====================================================================================
   Hero
   ===================================================================================== */
.pyr-hero-section {
  background:
    radial-gradient(ellipse 60% 50% at 50% -10%, var(--pyr-indigo-glow), transparent),
    var(--pyr-bg);
  border-bottom: 1px solid var(--pyr-border);
}
.pyr-hero { padding-block: var(--pyr-space-8) var(--pyr-space-7); }
.pyr-eyebrow {
  display: inline-block;
  font-size: var(--pyr-text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pyr-cyan-light);
}
.pyr-wordmark {
  font-family: var(--pyr-font-display);
  font-size: var(--pyr-text-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 46rem;
  margin-inline: auto;
}
.pyr-lead {
  max-width: 42rem;
  font-size: var(--pyr-text-title);
  color: var(--pyr-text-muted);
}

/* =====================================================================================
   Section headings
   ===================================================================================== */
.pyr-section-title {
  font-size: var(--pyr-text-headline);
  font-weight: 700;
}
.pyr-section-lead {
  max-width: 40rem;
  color: var(--pyr-text-muted);
}

/* =====================================================================================
   Panels / cards
   ===================================================================================== */
.pyr-panel {
  background-color: var(--pyr-surface);
  border: 1px solid var(--pyr-border);
  border-radius: var(--pyr-radius-lg);
  padding: var(--pyr-space-5);
}
.pyr-panel-sm { max-width: 32rem; }
.pyr-panel-md { max-width: 40rem; }

/* =====================================================================================
   Service / product cards
   ===================================================================================== */
.pyr-service-card, .pyr-product-card {
  background-color: var(--pyr-surface);
  border: 1px solid var(--pyr-border);
  border-radius: var(--pyr-radius-lg);
  padding: var(--pyr-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--pyr-space-2);
  transition: border-color 150ms ease-out, transform 150ms ease-out;
}
.pyr-service-card:hover, .pyr-product-card:hover {
  border-color: var(--pyr-indigo-light);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .pyr-service-card:hover, .pyr-product-card:hover { transform: none; }
}
.pyr-service-card-soon { opacity: 0.82; }
.pyr-service-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--pyr-radius-md);
  background: var(--pyr-indigo-glow);
  color: var(--pyr-cyan-light);
  margin-bottom: var(--pyr-space-2);
}
.pyr-service-icon svg { width: 1.5rem; height: 1.5rem; }
.pyr-pillar-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--pyr-radius-md);
  background: var(--pyr-indigo-glow);
  color: var(--pyr-amber);
  margin-bottom: var(--pyr-space-3);
}
.pyr-pillar-icon svg { width: 1.5rem; height: 1.5rem; }
.pyr-pillar { padding-inline: var(--pyr-space-2); }
.pyr-service-title { font-size: var(--pyr-text-title); font-weight: 700; margin-bottom: 0; }
.pyr-service-desc { color: var(--pyr-text-muted); font-size: var(--pyr-text-sm); flex-grow: 1; }
.pyr-service-link { font-weight: 600; }

.pyr-about-section { background-color: var(--pyr-surface); border-block: 1px solid var(--pyr-border); }

/* =====================================================================================
   Status badges — color + label always (never color-only).
   ===================================================================================== */
.pyr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2rem var(--pyr-space-2);
  border-radius: var(--pyr-radius-pill);
  font-size: var(--pyr-text-label);
  font-weight: 700;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  white-space: nowrap;
  align-self: flex-start;
}
.pyr-badge::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
.pyr-badge-active { color: var(--pyr-success); background: var(--pyr-success-glow); border-color: var(--pyr-success-line); }
.pyr-badge-pending { color: var(--pyr-text-muted); background: transparent; border-style: dashed; border-color: var(--pyr-border-strong); }
.pyr-badge-pending::before { background: transparent; border: 1px solid currentColor; }

/* =====================================================================================
   Contact section
   ===================================================================================== */
.pyr-contact-list li { margin-bottom: var(--pyr-space-4); }
.pyr-contact-label {
  display: block;
  font-size: var(--pyr-text-label);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pyr-text-muted);
  margin-bottom: 0.2rem;
}
.pyr-contact-list a:not(.pyr-data) { color: var(--pyr-text); font-weight: 500; }
.pyr-contact-list a:hover { color: var(--pyr-cyan-light); }

/* =====================================================================================
   Forms
   ===================================================================================== */
.form-label {
  font-size: var(--pyr-text-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pyr-text-muted);
}
.form-control, .form-select {
  background-color: var(--pyr-recessed);
  border: 1px solid var(--pyr-border);
  border-radius: var(--pyr-radius-sm);
  color: var(--pyr-text);
  min-height: var(--pyr-tap-min);
}
.form-control::placeholder { color: var(--pyr-text-muted); opacity: 1; }
.form-control:focus, .form-select:focus {
  background-color: var(--pyr-recessed);
  border-color: var(--pyr-cyan);
  color: var(--pyr-text);
}
.pyr-form-hint { font-size: var(--pyr-text-sm); display: block; min-height: 1.2em; }

/* Honeypot — visually and functionally hidden from sighted/AT users, but still present/fillable
   for a bot's naive DOM scraper (unlike type="hidden", which bots often skip). Off-screen, not
   display:none, so autofill heuristics some bots use still can't distinguish it from a real field
   by visibility alone. */
.pyr-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* =====================================================================================
   Footer
   ===================================================================================== */
.pyr-footer {
  background-color: var(--pyr-void-elevated);
  border-top: 1px solid var(--pyr-border);
}
.pyr-footer-heading {
  font-size: var(--pyr-text-label);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pyr-text-muted);
  margin-bottom: var(--pyr-space-3);
}
.pyr-footer-tagline { color: var(--pyr-text-muted); font-size: var(--pyr-text-sm); max-width: 22rem; }
.pyr-footer-links li { margin-bottom: var(--pyr-space-2); }
.pyr-footer-links a { color: var(--pyr-text-muted); font-size: var(--pyr-text-sm); overflow-wrap: anywhere; }
.pyr-footer-links a:hover { color: var(--pyr-cyan-light); }
.pyr-footer-rights { color: var(--pyr-text-muted); font-size: var(--pyr-text-sm); }

/* =====================================================================================
   Toast notifications (Pyramidal.Web.Assets pyr-notify.js hardcodes these class names).
   ===================================================================================== */
.pyr-notify-region {
  position: fixed;
  inset-block-end: var(--pyr-space-5);
  inset-inline-end: var(--pyr-space-5);
  z-index: var(--pyr-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--pyr-space-2);
  max-width: min(24rem, calc(100vw - var(--pyr-space-5) * 2));
  pointer-events: none;
}
.pyr-notify {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--pyr-space-2);
  padding: var(--pyr-space-3) var(--pyr-space-4);
  background: var(--pyr-surface);
  border: 1px solid var(--pyr-border);
  border-radius: var(--pyr-radius-lg);
  box-shadow: var(--pyr-shadow-md);
  color: var(--pyr-text);
  font-size: var(--pyr-text-sm);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.pyr-notify-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .pyr-notify { transition: opacity 0.01ms; transform: none; }
}
.pyr-notify-icon {
  flex-shrink: 0;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  margin-block-start: 0.5em;
  background: currentColor;
}
.pyr-notify-success .pyr-notify-icon { color: var(--pyr-status-success); }
.pyr-notify-danger .pyr-notify-icon { color: var(--pyr-status-danger); }

/* =====================================================================================
   Scroll reveal (progressive enhancement — see wwwroot/js/motion-init.js + reveal.js).
   The hidden state ONLY ever applies under html.pyr-motion, which JS sets synchronously before
   paint; without JS, .pyr-reveal elements are just normal, always-visible elements. Staggered via
   nth-child so a row of cards fades in left-to-right/RTL-mirrored rather than as one flat block.
   ===================================================================================== */
.pyr-motion .pyr-reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pyr-motion .pyr-reveal.is-visible {
  opacity: 1;
  transform: none;
}
.pyr-reveal-group .pyr-reveal:nth-child(2) { transition-delay: 70ms; }
.pyr-reveal-group .pyr-reveal:nth-child(3) { transition-delay: 140ms; }
.pyr-reveal-group .pyr-reveal:nth-child(4) { transition-delay: 210ms; }
.pyr-reveal-group .pyr-reveal:nth-child(5) { transition-delay: 280ms; }
.pyr-reveal-group .pyr-reveal:nth-child(6) { transition-delay: 350ms; }
.pyr-reveal-group .pyr-reveal:nth-child(7) { transition-delay: 420ms; }

/* =====================================================================================
   Responsive baseline
   ===================================================================================== */
@media (max-width: 639px) {
  .pyr-hero { padding-block: var(--pyr-space-7) var(--pyr-space-6); }
  .py-6 { padding-block: var(--pyr-space-7); }
}

/* =====================================================================================
   Reduced motion
   ===================================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}