/* =========================================================================
   Parsia Afzar - design system
   =========================================================================

   The brand is unchanged: charcoal #1a1a1a and red #cc0000. What changed is
   the discipline around them. Red used to carry every underline, icon, border,
   focus ring and error message on the page, which left it with no emphasis
   anywhere. It is now reserved for three things - primary calls to action,
   key figures, and the active navigation item - and neutrals do the
   structural work.

   Section order: header, hero, trust, products, solutions, why, stats,
   clients, about, demo, careers, contact, closing CTA, footer.
   ========================================================================= */

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

:root {
  /* ===== Brand ===== */
  --primary: #1a1a1a;
  --primary-light: #2d2d2d;
  --primary-dark: #111111;
  --secondary: #cc0000;
  --secondary-light: #ff1a1a;
  --secondary-dark: #990000;
  /* #ff1a1a measures only 3.5:1 on the charcoal surfaces, so it fails AA
     as text. This lighter tint clears 4.5:1 and is used wherever the brand
     red appears on a dark background. */
  --secondary-on-dark: #ff6b6b;

  /* ===== Surfaces =====
     Three steps instead of the single flat #f5f5f5, so adjacent sections can
     be told apart without every one of them needing a border. */
  --surface: #ffffff;
  --surface-muted: #f7f7f8;
  --surface-sunken: #ececee;
  --bg-light: var(--surface-muted); /* legacy name, still referenced in markup */

  /* ===== Ink =====
     --ink-600 replaces the old #999, which measured 2.85:1 on white and
     failed AA. Everything here clears 4.5:1 on --surface. */
  --text-dark: #1a1a1a;
  --text-light: #ffffff;
  --ink-900: #1a1a1a;
  --ink-700: #3f3f46;
  --ink-600: #52525b;
  --ink-500: #6b7280;
  --ink-400: #9ca3af;
  --ink-200: #e6e6e9;
  --ink-100: #f1f1f3;
  --border: #e6e6e9;
  --border-strong: #d4d4d8;

  /* On dark backgrounds. --on-dark-muted clears 4.5:1 on --primary. */
  --on-dark: #ffffff;
  --on-dark-muted: #b8b8bf;
  --on-dark-faint: rgba(255, 255, 255, 0.08);

  /* Calm interactive accent for focus rings and non-CTA affordances, so the
     brand red is not spent on things that are merely interactive. */
  --accent-ui: #334155;
  --accent-ui-soft: rgba(51, 65, 85, 0.12);

  /* Per-card accent. Product cards override this via [data-accent]; anything
     that does not set it stays on brand red. */
  --accent: var(--secondary);

  /* ===== Type scale =====
     clamp() instead of hard breakpoint jumps, so the display size moves
     continuously rather than snapping 3.2rem -> 2.4rem -> 2rem. */
  --fs-display: clamp(1.95rem, 1.2rem + 3.1vw, 3.35rem);
  --fs-h2: clamp(1.5rem, 1.1rem + 1.7vw, 2.35rem);
  --fs-h3: clamp(1.15rem, 1.02rem + 0.55vw, 1.5rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.8rem;

  /* Persian needs a generous body leading; display text needs a tight one or
     the two lines of an h1 drift apart. */
  --lh-body: 1.85;
  --lh-tight: 1.45;

  /* ===== Spacing - 4px base ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  --section-y: clamp(56px, 3.5vw + 34px, 96px);

  /* ===== Structure ===== */
  --header-h: 56px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 16, 20, 0.05),
    0 2px 8px rgba(16, 16, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 16, 20, 0.06),
    0 12px 28px rgba(16, 16, 20, 0.07);
  --shadow-lg: 0 12px 24px rgba(16, 16, 20, 0.08),
    0 28px 60px rgba(16, 16, 20, 0.1);
  --shadow: var(--shadow-md); /* legacy name */

  --transition: 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (min-width: 900px) {
  :root {
    --header-h: 72px;
  }
}

html {
  scroll-behavior: smooth;
  /* Anchored sections must clear the fixed header when scrolled to. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Vazirmatn", "IRANSans", sans-serif;
  background: var(--surface);
  color: var(--text-dark);
  line-height: var(--lh-body);
  font-size: var(--fs-body);
  overflow-wrap: break-word;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Form controls do not inherit the page font by default - the browser gives
   them its own UI font, which is why Persian text inside buttons used to
   render in a different typeface from everything around it. */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* An image without this will render at its intrinsic width and push the page
   wider than the viewport. */
img,
svg,
video,
iframe {
  max-width: 100%;
}

/* Grid and flex children default to min-width:auto, meaning they refuse to
   shrink below their content: one long unbroken string then widens the whole
   track and the page scrolls sideways. This is the rule that keeps every
   layout below honest on narrow screens. */
.container > *,
.products-grid > *,
.clients-grid > *,
.contact-grid > *,
.footer-grid > *,
.hero-grid > *,
.demo-form > *,
.trust-grid > *,
.solutions-grid > *,
.why-grid > *,
.stats-grid > *,
.about-grid > *,
.careers-grid > *,
.credentials > * {
  min-width: 0;
}

/* ===== Focus =====
   A single visible ring everywhere, in the calm UI accent rather than red. */
:focus-visible {
  outline: 3px solid var(--accent-ui);
  outline-offset: 2px;
  border-radius: 4px;
}
header :focus-visible,
footer :focus-visible,
.hero :focus-visible,
.cta-band :focus-visible,
.stats :focus-visible {
  outline-color: #fff;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--sp-8);
  }
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--surface-muted);
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ink-400);
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 13px var(--sp-6);
  min-height: 48px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
    box-shadow var(--transition), transform var(--transition-fast);
  background: var(--secondary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(204, 0, 0, 0.22);
  text-align: center;
}
.btn:hover {
  background: var(--secondary-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(204, 0, 0, 0.3);
}
.btn:active {
  transform: translateY(0);
}

/* Neutral secondary action - charcoal, not red. */
.btn-secondary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(16, 16, 20, 0.18);
}
.btn-secondary:hover {
  background: var(--primary-light);
  box-shadow: 0 8px 22px rgba(16, 16, 20, 0.24);
}

/* For use on dark backgrounds. */
.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  box-shadow: none;
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

/* For use on light backgrounds. */
.btn-ghost {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  background: var(--surface-muted);
  border-color: var(--ink-400);
  box-shadow: var(--shadow-sm);
}

.btn-sm {
  min-height: 40px;
  padding: 9px var(--sp-4);
  font-size: var(--fs-xs);
}

.btn-block {
  width: 100%;
}

/* =========================================================================
   Header
   ========================================================================= */
header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1000;
  background: rgba(20, 20, 20, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background var(--transition), border-color var(--transition),
    box-shadow var(--transition);
}
header.scrolled {
  background: rgba(17, 17, 17, 0.97);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.3);
}

/* One row, always. The old header let its three groups wrap, which on a
   375px screen produced a 166px-tall bar - and since the hero's top padding
   was a hard-coded 140px, the hero badges rendered underneath it. */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: var(--header-h);
  flex-wrap: nowrap;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  flex: none;
}
.logo img {
  height: 34px;
  width: auto;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 3px var(--sp-2);
}
.logo .logo-word {
  color: #fff;
  white-space: nowrap;
}
.logo .logo-word b {
  color: var(--secondary-on-dark);
  font-weight: 800;
}

@media (min-width: 900px) {
  .logo img {
    height: 40px;
  }
  .logo {
    font-size: 1.15rem;
  }
}

/* Hidden on mobile; the drawer takes over below 900px. */
.nav-links {
  display: none;
}

@media (min-width: 900px) {
  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    list-style: none;
    font-weight: 500;
    margin-inline: auto;
  }
  .nav-links a {
    position: relative;
    display: block;
    padding: var(--sp-2) 0;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.78);
    transition: color var(--transition);
    white-space: nowrap;
  }
  .nav-links a::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: 0;
    height: 2px;
    background: var(--secondary);
    transition: width var(--transition);
  }
  .nav-links a:hover {
    color: #fff;
  }
  .nav-links a:hover::after {
    width: 100%;
  }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

/* ===== Language switcher ===== */
.lang-switcher {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-pill);
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.lang-switcher button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.62);
  padding: 0 var(--sp-3);
  min-height: 40px;
  min-width: 42px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  transition: color var(--transition), background var(--transition);
}
.lang-switcher button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.lang-switcher button.active {
  background: var(--secondary);
  color: #fff;
}

/* Desktop only - on mobile the switcher lives inside the drawer. */
.nav-actions .lang-switcher {
  display: none;
}
@media (min-width: 900px) {
  .nav-actions .lang-switcher {
    display: flex;
  }
}

/* ===== Ticketing button =====
   Label collapses to an icon below 900px so the bar stays one row. */
.btn-ticketing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-xs);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn-ticketing:hover {
  background: var(--secondary);
  border-color: var(--secondary);
}
.btn-ticketing .label {
  display: none;
}
@media (min-width: 900px) {
  .btn-ticketing {
    padding: 0 var(--sp-5);
  }
  .btn-ticketing .label {
    display: inline;
  }
}

/* ===== Hamburger ===== */
.hamburger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  background: none;
  border: none;
  flex: none;
}
.hamburger span {
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition-fast);
}
.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
@media (min-width: 900px) {
  .hamburger {
    display: none;
  }
}

/* ===== Mobile drawer =====
   A full-height sheet below the header rather than a horizontally sliding
   panel: no transform to mirror, so it behaves identically in RTL and LTR. */
.nav-drawer {
  position: fixed;
  inset-block-start: var(--header-h);
  inset-block-end: 0;
  inset-inline: 0;
  background: var(--primary-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--sp-6) var(--sp-5) var(--sp-10);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition),
    visibility var(--transition);
}
.nav-drawer.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (min-width: 900px) {
  .nav-drawer {
    display: none;
  }
}
.nav-drawer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.nav-drawer ul a {
  display: block;
  padding: var(--sp-4) var(--sp-2);
  min-height: 48px;
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: color var(--transition), padding-inline-start var(--transition);
}
.nav-drawer ul a:hover {
  color: var(--secondary-on-dark);
  padding-inline-start: var(--sp-4);
}
.nav-drawer .drawer-foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: auto;
}
.nav-drawer .lang-switcher {
  align-self: flex-start;
}
.nav-drawer .lang-switcher button {
  min-height: 44px;
  min-width: 48px;
}

/* Prevents the page behind the drawer from scrolling. */
body.nav-open {
  overflow: hidden;
}

/* =========================================================================
   Sections
   ========================================================================= */
section {
  padding: var(--section-y) 0;
}

/* Alternating surfaces so consecutive sections read as distinct bands
   instead of one continuous scroll of identical slabs. */
.section--muted {
  background: var(--surface-muted);
}
.section--dark {
  background: var(--primary);
  color: var(--on-dark);
}

.section-title {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-12);
}
.section-title .eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--secondary);
  background: rgba(204, 0, 0, 0.07);
  border: 1px solid rgba(204, 0, 0, 0.16);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-4);
}
.section--dark .section-title .eyebrow {
  color: var(--secondary-on-dark);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.section-title h2 {
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: var(--lh-tight);
  color: var(--primary);
  text-wrap: balance;
}
.section--dark .section-title h2 {
  color: #fff;
}
.section-title p {
  color: var(--ink-600);
  font-size: var(--fs-lead);
  margin-top: var(--sp-3);
}
.section--dark .section-title p {
  color: var(--on-dark-muted);
}

/* The old red underline appeared beneath every heading on the page. The
   eyebrow above the heading does that job now, so this is a neutral hairline
   kept only for continuity with the previous design. */
.section-title .line {
  width: 48px;
  height: 3px;
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  margin: var(--sp-4) auto 0;
}
.section--dark .section-title .line {
  background: rgba(255, 255, 255, 0.18);
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  /* Derived from the real header height rather than a hard-coded 140px, so
     the content can never end up underneath the bar. */
  padding-block-start: calc(var(--header-h) + var(--sp-12));
  padding-block-end: var(--sp-16);
  background: linear-gradient(160deg, #171717 0%, #262626 55%, #1a1a1a 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset-block-start: -25%;
  inset-inline-start: -12%;
  width: min(620px, 90vw);
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    rgba(204, 0, 0, 0.13) 0%,
    transparent 68%
  );
  border-radius: 50%;
  pointer-events: none;
}
.hero .container {
  position: relative;
  z-index: 2;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  align-items: center;
}
@media (min-width: 992px) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--sp-16);
  }
}

.hero h1 {
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.hero h1 .accent {
  color: var(--secondary-on-dark);
}
.hero p {
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.82);
  margin: var(--sp-5) 0 var(--sp-8);
  max-width: 54ch;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.hero-badges .badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(255, 255, 255, 0.92);
}
.hero-badges .badge i {
  color: var(--secondary-on-dark);
  font-size: 0.75rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
@media (max-width: 420px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ===== Hero visual - product index =====
   Replaces the stat card. The four figures moved to their own band; this
   shows what the company actually makes, which is the more useful thing to
   put beside the headline. */
.hero-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.hero-card .hero-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--on-dark-muted);
}
.hero-card .hero-card-head .count {
  color: var(--secondary-on-dark);
  font-size: 1.1rem;
  font-weight: 900;
}
.hero-card ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.hero-card li a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  transition: background var(--transition), border-color var(--transition);
}
.hero-card li a:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.hero-card li a i {
  color: var(--accent);
  font-size: 0.95rem;
  width: 1.1em;
  text-align: center;
}

/* =========================================================================
   Trust bar
   ========================================================================= */
.trust {
  padding-block: var(--sp-10);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.trust-lead {
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-600);
  margin-bottom: var(--sp-6);
}
.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
@media (min-width: 600px) {
  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.trust-item i {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--secondary);
  font-size: 1rem;
}
.trust-item .k {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--ink-500);
}
.trust-item .v {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.5;
}

/* =========================================================================
   Products
   ========================================================================= */
.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 640px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition),
    transform var(--transition);
  position: relative;
  overflow: hidden;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--shadow-md);
}

/* ===== Product accents =====
   Each system carries a colour drawn from what it does, so the eight cards
   are told apart at a glance rather than reading as one red block. Every
   value clears 4.5:1 against white in both directions - the accent is used
   for text on white and for white text on the button. */
[data-accent="blue"] {
  --accent: #1d4ed8; /* DCS - electrical and mechanical calculation */
}
[data-accent="violet"] {
  --accent: #6d28d9; /* DPMS - design process management */
}
[data-accent="teal"] {
  --accent: #0f766e; /* SPMS - supervision of project execution */
}
[data-accent="amber"] {
  --accent: #b45309; /* SAMP - peak load management */
}
[data-accent="olive"] {
  --accent: #4d7c0f; /* EMS - equipment management */
}
[data-accent="green"] {
  --accent: #15803d; /* EAM - enterprise asset management */
}
[data-accent="magenta"] {
  --accent: #a21caf; /* Negar - personnel monitoring */
}
[data-accent="red"] {
  --accent: var(--secondary); /* Ticketing - keeps the brand colour */
}

/* A top strip is the cheapest way to make a grid of cards scannable. Only
   cards that opt in get one. */
.product-card[data-accent]::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--accent);
}

.product-card .card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.product-card .icon {
  flex: none;
  font-size: 1.15rem;
  color: var(--accent);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, #fff);
}
.product-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--primary);
}
.product-card .sub {
  /* Was #999 at 2.85:1 on white - below AA. --ink-600 measures 7.4:1. */
  color: var(--ink-600);
  font-size: 0.72rem;
  font-weight: 600;
  direction: ltr;
  text-align: start;
  letter-spacing: 0.3px;
  line-height: 1.5;
}
body[dir="rtl"] .product-card .sub {
  text-align: right;
}
.product-card .desc {
  color: var(--ink-700);
  font-size: var(--fs-sm);
  line-height: 1.8;
  margin-bottom: var(--sp-4);
}
.product-card .features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
}
.product-card .features span {
  background: var(--surface-muted);
  padding: 3px var(--sp-3);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-700);
  border: 1px solid var(--border);
}

/* Pushed to the bottom so every CTA in the row lines up regardless of how
   much copy sits above it. */
.product-card .login-btn {
  margin-top: auto;
  width: 100%;
  min-height: 44px;
  justify-content: center;
  background: transparent;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, #fff);
  border-radius: var(--radius-pill);
  padding: 10px var(--sp-4);
  font-weight: 700;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.product-card .login-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* =========================================================================
   Solutions by role
   ========================================================================= */
.solutions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 640px) {
  .solutions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .solutions-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.solution-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.solution-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.solution-card i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-size: 1rem;
  margin-bottom: var(--sp-4);
}
.solution-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: var(--sp-2);
}
.solution-card p {
  font-size: var(--fs-sm);
  color: var(--ink-700);
  margin-bottom: var(--sp-4);
}
.solution-card .systems {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.solution-card .systems a {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--ink-700);
  transition: background var(--transition), color var(--transition);
}
.solution-card .systems a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* =========================================================================
   Why Parsia
   ========================================================================= */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 768px) {
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-8);
  }
}
.why-item {
  display: flex;
  gap: var(--sp-4);
}
.why-item .n {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--secondary-on-dark);
  font-size: 1rem;
}
.why-item h3 {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: #fff;
  line-height: 1.45;
  margin-bottom: var(--sp-2);
}
.why-item p {
  font-size: var(--fs-sm);
  color: var(--on-dark-muted);
}

/* =========================================================================
   Stats band
   ========================================================================= */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.stat-item {
  text-align: center;
  padding: var(--sp-6) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stat-item .num {
  display: block;
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem);
  font-weight: 900;
  line-height: 1.2;
  color: var(--secondary);
}
.stat-item .label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-600);
  margin-top: var(--sp-2);
}

/* =========================================================================
   Clients
   ========================================================================= */
.clients-lead {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  border-radius: var(--radius);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-inline-start: 4px solid var(--secondary);
}
.clients-lead .mark {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
  color: var(--secondary-on-dark);
  font-size: 1.25rem;
}
.clients-lead .role {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--on-dark-muted);
  margin-bottom: 2px;
}
.clients-lead .name {
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.65;
}
@media (max-width: 600px) {
  .clients-lead {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-3);
  }
}

.clients-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-600);
}
.clients-count b {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--secondary);
}

.clients-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-2);
}
@media (min-width: 480px) {
  .clients-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}
.clients-grid .client {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  transition: border-color var(--transition), box-shadow var(--transition),
    transform var(--transition);
}
.clients-grid .client:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.clients-grid .mark {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--ink-700);
  font-weight: 700;
  font-size: 0.9rem;
  transition: background var(--transition), color var(--transition);
}
.clients-grid .client:hover .mark {
  background: var(--secondary);
  color: #fff;
}
.clients-grid .name {
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--primary);
  line-height: 1.5;
}
.clients-note {
  text-align: center;
  margin-top: var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* =========================================================================
   About + credentials
   ========================================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  align-items: center;
}
@media (min-width: 992px) {
  .about-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--sp-16);
  }
}
.about-text h3 {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--primary);
  line-height: 1.5;
  margin-bottom: var(--sp-4);
}
.about-text p {
  color: var(--ink-700);
  margin-bottom: var(--sp-4);
}
.about-text .btn {
  margin-top: var(--sp-2);
}

.credentials {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.credential {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.credential i {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--secondary);
  font-size: 1.05rem;
}
.credential .num {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1.4;
}
.credential .label {
  font-size: var(--fs-xs);
  color: var(--ink-600);
}

/* =========================================================================
   Careers
   ========================================================================= */
.careers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 560px) {
  .careers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .careers-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Its own component. These used to reuse .product-card with inline style
   overrides, so they inherited product styling by accident. */
.career-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.career-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.career-card > i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--accent-ui);
  font-size: 1.05rem;
  margin-bottom: var(--sp-2);
}
.career-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--primary);
}
.career-card .stack {
  font-size: var(--fs-xs);
  color: var(--ink-600);
  direction: ltr;
  text-align: start;
  margin-bottom: var(--sp-4);
}
body[dir="rtl"] .career-card .stack {
  text-align: right;
}
.career-card .btn {
  margin-top: auto;
  width: 100%;
}

/* =========================================================================
   Demo / CTA panel
   ========================================================================= */
.cta-section {
  background: linear-gradient(150deg, #1a1a1a, #2d2d2d);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--sp-10) var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
@media (min-width: 768px) {
  .cta-section {
    padding: var(--sp-16) var(--sp-12);
  }
}
.cta-section h2 {
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: var(--lh-tight);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}
.cta-section h2 i {
  color: var(--secondary-on-dark);
}
.cta-section p {
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.8);
  margin: var(--sp-3) 0 var(--sp-8);
}

/* ===== Closing CTA band ===== */
.cta-band {
  background: var(--primary);
  color: #fff;
  padding-block: var(--sp-16);
  text-align: center;
}
.cta-band h2 {
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: var(--lh-tight);
  text-wrap: balance;
  max-width: 24ch;
  margin: 0 auto;
}
.cta-band p {
  color: var(--on-dark-muted);
  max-width: 56ch;
  margin: var(--sp-4) auto var(--sp-8);
}
.cta-band .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}
@media (max-width: 420px) {
  .cta-band .actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =========================================================================
   Contact
   ========================================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
}
@media (min-width: 992px) {
  .contact-grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--sp-12);
  }
}
.contact-info h3,
.contact-form h3 {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--primary);
  margin-bottom: var(--sp-5);
}
.contact-info .detail {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.contact-info .detail i {
  flex: none;
  width: 42px;
  height: 42px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--accent-ui);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: 0.95rem;
}
.contact-info .detail strong {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-500);
}
.contact-info .detail .val {
  font-size: var(--fs-sm);
  color: var(--primary);
  font-weight: 600;
  line-height: 1.7;
}
.contact-info .detail a:hover {
  color: var(--secondary);
  text-decoration: underline;
}

/* =========================================================================
   Forms
   ========================================================================= */
.form-group,
.demo-group {
  margin-bottom: var(--sp-4);
}
.form-group label,
.demo-group label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--primary);
  margin-bottom: var(--sp-2);
}
.demo-group label {
  color: rgba(255, 255, 255, 0.92);
}
.form-group label .required,
.demo-group label .required {
  color: var(--secondary);
}
.demo-group label .required {
  color: var(--secondary-on-dark);
}

.contact-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
  .contact-form {
    padding: var(--sp-8);
  }
}
.contact-form input,
.contact-form textarea,
.contact-form select,
.modal input,
.modal select {
  width: 100%;
  padding: 13px var(--sp-4);
  min-height: 48px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  background: var(--surface);
  color: var(--text-dark);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
.modal input:focus,
.modal select:focus {
  outline: none;
  border-color: var(--accent-ui);
  box-shadow: 0 0 0 4px var(--accent-ui-soft);
}
.contact-form .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 560px) {
  .contact-form .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.contact-form button[type="submit"] {
  width: 100%;
}

/* The demo form carried its grid as an inline style, which no media query
   could override - it stayed two columns however narrow the screen got. */
.demo-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  width: 100%;
  max-width: 680px;
  text-align: start;
}
@media (min-width: 560px) {
  .demo-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.demo-group--full {
  grid-column: 1 / -1;
}
.demo-group input,
.demo-group select {
  width: 100%;
  padding: 13px var(--sp-4);
  min-height: 48px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: var(--fs-sm);
  transition: border-color var(--transition), box-shadow var(--transition),
    background var(--transition);
}
.demo-group input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.demo-group select option {
  background: var(--primary);
  color: #fff;
}
.demo-group input:focus,
.demo-group select:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}
.demo-form button[type="submit"] {
  grid-column: 1 / -1;
  margin-top: var(--sp-2);
}

/* ===== Captcha ===== */
.captcha-container {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--surface-muted);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  flex-wrap: wrap;
}
.demo-group .captcha-container {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
img.captcha-code {
  height: 46px;
  width: auto;
  padding: 2px var(--sp-2);
  background: #fff;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-strong);
  object-fit: contain;
  flex: none;
}
.captcha-container .captcha-refresh {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: var(--accent-ui);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  transition: transform var(--transition), background var(--transition);
  flex: none;
}
.demo-group .captcha-refresh {
  color: rgba(255, 255, 255, 0.85);
}
.captcha-container .captcha-refresh:hover {
  background: var(--surface-sunken);
  transform: rotate(180deg);
}
.demo-group .captcha-refresh:hover {
  background: rgba(255, 255, 255, 0.12);
}
.captcha-container input {
  flex: 1 1 110px;
  min-width: 0;
  min-height: 44px;
  padding: 10px var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  direction: ltr;
  text-align: center;
  letter-spacing: 3px;
  background: var(--surface);
  color: var(--text-dark);
}
.captcha-container input:focus {
  outline: none;
  border-color: var(--accent-ui);
  box-shadow: 0 0 0 3px var(--accent-ui-soft);
}

/* ===== Validation feedback =====
   Class names and behaviour are exactly what forms.js expects. */
.captcha-error {
  color: var(--secondary);
  font-size: var(--fs-xs);
  margin-top: var(--sp-1);
  display: none;
}
.demo-group .captcha-error {
  color: #ff8080;
}
.captcha-error.show {
  display: block;
}
.field-error {
  color: var(--secondary);
  font-size: var(--fs-xs);
  margin-top: var(--sp-1);
}
.demo-group .field-error {
  color: #ff8080;
}
.form-status {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  grid-column: 1 / -1;
}
.form-status--success {
  background: rgba(21, 128, 61, 0.1);
  color: #14532d;
  border: 1px solid rgba(21, 128, 61, 0.3);
}
.form-status--error {
  background: rgba(204, 0, 0, 0.08);
  color: var(--secondary-dark);
  border: 1px solid rgba(204, 0, 0, 0.28);
}
.demo-form .form-status--success {
  background: rgba(34, 197, 94, 0.16);
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.4);
}
.demo-form .form-status--error {
  background: rgba(255, 26, 26, 0.14);
  color: #fecaca;
  border-color: rgba(255, 26, 26, 0.4);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--secondary) !important;
  box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.12) !important;
}

/* Bot honeypot - reachable to scripts, invisible to humans.
   Clipped rather than pushed off-canvas: this document is RTL, and in RTL a
   negative `left` becomes scrollable overflow, which is what used to cause
   the horizontal scroll on mobile. Clipping takes up no space in any
   direction. The field is aria-hidden and tabindex=-1. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================================
   Footer
   ========================================================================= */
footer {
  background: var(--primary-dark);
  color: var(--on-dark-muted);
  padding: var(--sp-16) 0 var(--sp-8);
  border-top: 3px solid var(--secondary);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
}
@media (min-width: 600px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: var(--sp-8);
  }
}
.footer-brand .logo {
  margin-bottom: var(--sp-4);
}
.footer-brand p {
  font-size: var(--fs-sm);
  max-width: 40ch;
}
.footer-grid h3 {
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: var(--sp-4);
}
.footer-grid ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.footer-grid ul li {
  font-size: var(--fs-sm);
}
.footer-grid ul a {
  transition: color var(--transition);
}
.footer-grid ul a:hover {
  color: #fff;
}
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.footer-contact li i {
  color: var(--secondary-on-dark);
  font-size: 0.85rem;
  margin-top: 8px;
  flex: none;
  width: 1em;
  text-align: center;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--sp-6);
  margin-top: var(--sp-10);
  font-size: var(--fs-xs);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  text-align: center;
}

/* =========================================================================
   Career modal
   ========================================================================= */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2000;
  justify-content: center;
  align-items: center;
  padding: var(--sp-4);
}
.modal-overlay.active {
  display: flex;
}
.modal {
  background: var(--surface);
  max-width: 480px;
  width: 100%;
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
  animation: modalIn 0.28s ease;
  max-height: min(88vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@keyframes modalIn {
  from {
    transform: scale(0.95) translateY(20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.modal h3 {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--primary);
  margin-bottom: var(--sp-1);
}
.modal .modal-sub {
  color: var(--ink-600);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-6);
}
.modal .close-modal {
  float: inline-start;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-500);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.modal .close-modal:hover {
  color: var(--primary);
  background: var(--surface-muted);
}
.modal .btn {
  width: 100%;
  margin-top: var(--sp-2);
}

/* =========================================================================
   Utilities
   ========================================================================= */
.skip-link {
  position: absolute;
  top: -80px;
  inset-inline-start: var(--sp-4);
  z-index: 3000;
  background: var(--secondary);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  transition: top var(--transition);
}
.skip-link:focus {
  top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===== Reveal animation =====
   The hidden starting state is applied only once the script has confirmed it
   can drive the reveal (it sets .js-reveal on <html>). Previously .fade-up
   hid its element unconditionally, so anything that stopped the observer from
   running - no JavaScript, a script error - left 35 elements permanently
   invisible. Now the content is visible by default and the animation is the
   enhancement. */
.fade-up {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-reveal .fade-up {
  opacity: 0;
  transform: translateY(20px);
}
.js-reveal .fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Direction ===== */
body[dir="ltr"] {
  text-align: left;
}
body[dir="ltr"] .hero p {
  margin-inline: 0 auto;
}

/* =========================================================================
   Reduced motion
   =========================================================================
   The page previously animated regardless of the user's system setting. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal .fade-up {
    opacity: 1;
    transform: none;
  }
  .btn:hover,
  .product-card:hover,
  .clients-grid .client:hover {
    transform: none;
  }
}