/* Mirvari Dev — the development side of Mirvari Group
   Five colours, each with its own job (from the Mirvari palette):
     emerald  #0A4D3C  logo, headings, the rich surfaces (bands, panels, device screens)
     gold     #C5A059  icons, logo, seals and badges, primary buttons, structural accent lines
     sage     #7A9A8B  secondary, balancing accent: second data series, states, quiet rules
     charcoal #1A202C  all body text and UI type
     cream    #F9F8F3  the page
   Every other value in this file is a mix or a transparency of those five.
   Contrast notes: gold on cream (2.3:1) and sage on cream (2.9:1) are never used for text;
   small gold-toned text uses --brass on cream and --gold-lit on emerald.
   Type is Manrope throughout; Vazirmatn only draws the Sorani letters Manrope doesn't have.
   Layout uses logical properties so the Sorani (RTL) version mirrors itself. */

:root {
  --emerald: #0A4D3C;
  --gold: #C5A059;
  --sage: #7A9A8B;
  --charcoal: #1A202C;
  --cream: #F9F8F3;

  --gold-lit: #D5BA87;       /* 30% cream into gold: small gold text on emerald, 5.2:1 */
  --gold-deep: #9A804E;      /* 25% charcoal into gold: button rings, icons on cream */
  --brass: #786645;          /* 45% charcoal into gold: gold-toned text on cream, 5.2:1 */
  --emerald-2: #185747;      /* 6% cream into emerald: windows inside emerald surfaces */
  --emerald-3: #225E4E;      /* 10% cream into emerald */
  --emerald-deep: #0E4238;   /* 25% charcoal into emerald: device screens and panels */
  --panel-2: var(--emerald-2);
  --panel-3: var(--emerald-3);

  /* the cream page (default) */
  --text: var(--charcoal);
  --heading: var(--emerald);   /* 9.2:1 on cream */
  --text-soft: #545860;        /* charcoal at 74% on cream, 6.7:1 */
  --muted: #686C72;            /* charcoal at 65% on cream, 5:1 */
  --line: rgba(26, 32, 44, 0.13);
  --line-soft: rgba(26, 32, 44, 0.07);
  --line-strong: rgba(26, 32, 44, 0.24);
  --accent-ink: var(--brass);
  --focus: var(--charcoal);

  /* the logo's two layers */
  --lg-face: var(--gold);
  --lg-shadow: var(--emerald);

  --font: "Manrope", "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1320px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --section-y: clamp(80px, 9vw, 136px);
  --header-h: 76px;
  --radius: 16px;

  --ease-out: cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --start: left;
  --dir: 1;
}

/* emerald surfaces: the same components, re-inked for a deep green ground */
.on-emerald {
  --text: var(--cream);
  --heading: var(--cream);
  --text-soft: rgba(249, 248, 243, 0.78);
  --muted: rgba(249, 248, 243, 0.7);     /* 5.2:1 on emerald */
  --line: rgba(249, 248, 243, 0.14);
  --line-soft: rgba(249, 248, 243, 0.08);
  --line-strong: rgba(249, 248, 243, 0.26);
  --accent-ink: var(--gold-lit);
  --focus: var(--gold-lit);
  --lg-shadow: var(--emerald-deep);
  color: var(--text);
}

[dir="rtl"] {
  --start: right;
  --dir: -1;
}

@media (max-width: 760px) {
  :root { --header-h: 66px; }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background: var(--cream);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--gold); color: var(--charcoal); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 6px;
  background: var(--emerald);
  color: var(--cream);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.page { position: relative; z-index: 1; }

/* ---------- The ground ---------- */
/* Fixed light the cream page scrolls over: a warm gold bloom from the top corner,
   faint rays fanning out the way they fan in the emblem, and a fine ruled grid. */

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.atmosphere > * { position: absolute; }

.atm-base {
  inset: 0;
  background:
    radial-gradient(90% 70% at 100% -10%, rgba(197, 160, 89, 0.16), transparent 60%),
    radial-gradient(70% 55% at -10% 110%, rgba(197, 160, 89, 0.08), transparent 65%),
    var(--cream);
}

.atm-rays {
  top: -40vh;
  right: -30vw;
  width: 130vw;
  height: 170vh;
  background: repeating-conic-gradient(from 180deg at 78% 22%, rgba(197, 160, 89, 0.1) 0deg 1.1deg, transparent 1.1deg 6.5deg);
  -webkit-mask-image: radial-gradient(55% 50% at 78% 22%, #000 0%, transparent 78%);
  mask-image: radial-gradient(55% 50% at 78% 22%, #000 0%, transparent 78%);
}

.atm-grid {
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(26, 32, 44, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 32, 44, 0.045) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 8%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 85% 70% at 50% 8%, #000 20%, transparent 80%);
}

.atm-bloom {
  top: -22vh;
  right: -12vw;
  width: 70vw;
  height: 95vh;
  background: radial-gradient(closest-side, rgba(197, 160, 89, 0.2), transparent 72%);
  filter: blur(80px);
}

.atm-dust { inset: 0; width: 100%; height: 100%; }

.atm-grain {
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
  .atm-rays { opacity: 0.6; }
}

/* ---------- Panels: the emerald surfaces ---------- */

/* an emerald card on the cream page: device screens, the dashboard, the comparison */
.panel {
  border: 1px solid rgba(197, 160, 89, 0.3);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(197, 160, 89, 0.11), transparent 60%),
    var(--emerald-deep);
  box-shadow: 0 40px 80px -40px rgba(10, 77, 60, 0.7), 0 2px 6px -2px rgba(10, 77, 60, 0.25);
}

/* ---------- Type ---------- */

.label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.label-n { color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.label-dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2);
}
.on-emerald .label-dot { box-shadow: 0 0 10px rgba(197, 160, 89, 0.85); }

/* the highlighted words in headings: deep brass on cream, bright gold on charcoal */
.accent {
  padding-inline: 0.04em;
  margin-inline: -0.04em;
  background: linear-gradient(120deg, var(--brass), var(--gold-deep) 55%, var(--brass));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.on-emerald .accent { background-image: linear-gradient(120deg, var(--gold-lit), var(--gold) 55%, var(--gold-deep)); }

.h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.032em;
  color: var(--text);
  text-wrap: balance;
}
.h2--sm { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }

.h3 {
  font-size: clamp(1.15rem, 1.4vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--text);
}

.section-head {
  max-width: 52rem;
  margin-bottom: clamp(44px, 5vw, 72px);
}
.section-head .h2 { margin-top: 20px; }
.section-head--tight { margin-bottom: 36px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .section-intro { margin-inline: auto; }

.section-intro {
  max-width: 38rem;
  margin-top: 22px;
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.65;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* ---------- Icons, buttons, chips, surfaces ---------- */

.ic,
.arrow {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.arrow {
  stroke-width: 1.8;
  transform: scaleX(var(--dir));
  transition: transform 0.35s var(--ease-out);
}
.arrow--out { transform: scaleX(var(--dir)) rotate(-45deg); }

/* a card on the cream page: parchment warmed with a trace of gold */
.surface {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(197, 160, 89, 0.09), rgba(197, 160, 89, 0.03)),
    var(--cream);
  box-shadow: 0 1px 0 rgba(26, 32, 44, 0.03), 0 18px 40px -32px rgba(26, 32, 44, 0.35);
}
.on-emerald .surface {
  background: linear-gradient(180deg, rgba(249, 248, 243, 0.06), rgba(249, 248, 243, 0.02));
  box-shadow: inset 0 1px 0 rgba(249, 248, 243, 0.05);
}

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.4s;
}
.btn:hover .arrow { transform: translateX(calc(4px * var(--dir))) scaleX(var(--dir)); }

.btn--gold {
  background: var(--gold);
  color: var(--charcoal);
  box-shadow: 0 0 0 1px rgba(154, 128, 78, 0.55), inset 0 1px 0 rgba(249, 248, 243, 0.4);
}
.btn--gold:hover {
  background: var(--gold-lit);
  box-shadow: 0 0 0 1px rgba(154, 128, 78, 0.7), 0 12px 32px -12px rgba(154, 128, 78, 0.75);
}

.btn--ghost {
  border-color: var(--line-strong);
  background: rgba(249, 248, 243, 0.6);
  color: var(--text);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--gold-deep); }
.on-emerald .btn--ghost { background: rgba(10, 77, 60, 0.55); }
.on-emerald .btn--ghost:hover { border-color: rgba(213, 186, 135, 0.6); }

.btn--sm { min-height: 40px; padding: 0 16px; font-size: 0.875rem; }

/* The hero pair stays faintly alive: a sheen crosses the primary, a point of light circles the secondary. */
.btn--live.btn--gold { overflow: hidden; animation: btn-breathe 4.5s ease-in-out infinite; }
.btn--live.btn--gold::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(249, 248, 243, 0.55) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: btn-sheen 6s ease-in-out 1.8s infinite;
  pointer-events: none;
}
.btn--live.btn--gold:hover { animation: none; }
.btn--live.btn--ghost::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--btn-angle), transparent 0 60%, var(--gold) 78%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: btn-orbit 5s linear infinite;
  pointer-events: none;
}

@property --btn-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes btn-sheen {
  0% { transform: translateX(-130%); }
  35%, 100% { transform: translateX(130%); }
}
@keyframes btn-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(154, 128, 78, 0.55), inset 0 1px 0 rgba(249, 248, 243, 0.4), 0 0 0 0 rgba(154, 128, 78, 0); }
  50% { box-shadow: 0 0 0 1px rgba(154, 128, 78, 0.7), inset 0 1px 0 rgba(249, 248, 243, 0.4), 0 10px 30px -10px rgba(154, 128, 78, 0.7); }
}
@keyframes btn-orbit { to { --btn-angle: 360deg; } }

.text-link {
  padding: 0;
  border: 0;
  background: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--gold);
}
.text-link:hover { text-decoration-thickness: 2px; }

/* icons sit on small emerald seals on the cream page, and on a gold wash on emerald */
.feature-icon,
.strip-icon,
.channel-icon {
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(197, 160, 89, 0.45);
  background: var(--emerald);
  color: var(--gold);
  box-shadow: 0 10px 20px -12px rgba(26, 32, 44, 0.55);
}
.on-emerald .feature-icon,
.on-emerald .strip-icon,
.on-emerald .channel-icon {
  border-color: rgba(197, 160, 89, 0.32);
  background: rgba(197, 160, 89, 0.1);
  box-shadow: none;
}
.feature-icon { width: 44px; height: 44px; border-radius: 10px; }
.feature-icon .ic { width: 20px; height: 20px; }

/* Mirvari Dev: one badge, one button style, wherever the development side is mentioned */
.dev-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid var(--gold-deep);
  border-radius: 4px;
  background: var(--gold);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.14em;
  color: var(--charcoal);
}
.dev-tag--lg { padding: 4px 10px; font-size: 0.8rem; }

.dev-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 13px 18px;
  border: 1px solid rgba(154, 128, 78, 0.6);
  border-radius: 8px;
  background: rgba(197, 160, 89, 0.12);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.dev-link .arrow { color: var(--accent-ink); }
.dev-link:hover {
  border-color: var(--gold-deep);
  background: rgba(197, 160, 89, 0.22);
  box-shadow: 0 14px 30px -18px rgba(154, 128, 78, 0.8);
}
.dev-link:hover .arrow { transform: translateX(calc(4px * var(--dir))) scaleX(var(--dir)); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s, border-color 0.35s;
}
.site-header.is-solid {
  background: rgba(249, 248, 243, 0.95);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-inline-end: auto;
  text-decoration: none;
}
.brand-mark { width: 38px; height: 37px; flex: none; }
.brand-text { display: flex; flex-direction: column; gap: 5px; }
.brand-word,
.footer-word {
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
}
.brand-sub {
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent-ink);
}

.site-nav ul { display: flex; align-items: center; gap: 28px; }
.site-nav a {
  position: relative;
  display: block;
  padding-block: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.25s;
}
.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: var(--start);
  transition: transform 0.45s var(--ease-out);
}
.site-nav a:hover,
.site-nav a.is-current { color: var(--text); }
.site-nav a:hover::after,
.site-nav a.is-current::after { transform: scaleX(1); }


.header-actions { display: flex; align-items: center; gap: 14px; }

.lang-switch {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.25s;
}
.lang-switch:hover { border-color: var(--gold); }

.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-inline-end: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
}
.menu-toggle-bars,
.menu-toggle-bars::before {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s var(--ease-out), top 0.35s var(--ease-out);
}
.menu-toggle-bars { top: 17px; }
.menu-toggle-bars::before { content: ""; left: 0; top: 9px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars { top: 21px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { top: 0; transform: rotate(-90deg); }

.menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  overflow-y: auto;
  background: rgba(249, 248, 243, 0.98);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.3s;
}
.menu.is-open { opacity: 1; }
.menu-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-block: 16px 32px;
}
.menu-links li { border-bottom: 1px solid var(--line); }
.menu-links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 15px;
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}
.menu-num { min-width: 22px; font-size: 0.78rem; font-weight: 700; color: var(--accent-ink); }
.menu-foot { display: grid; gap: 12px; margin-top: auto; padding-top: 32px; }

html.menu-open { overflow: hidden; }

@media (max-width: 1199px) {
  .site-nav { display: none; }
  .menu-toggle { display: block; }
}
@media (min-width: 1200px) {
  .menu { display: none; }
}
@media (max-width: 600px) {
  .header-cta { display: none; }
  .brand-mark { width: 32px; height: 31px; }
  .brand-word { font-size: 0.82rem; letter-spacing: 0.16em; }
  .brand-sub { font-size: 0.54rem; letter-spacing: 0.12em; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(40px, 8vh, 96px));
  padding-bottom: clamp(24px, 4vw, 48px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 12px;
  border: 1px solid rgba(154, 128, 78, 0.45);
  border-radius: 999px;
  background: rgba(197, 160, 89, 0.12);
  box-shadow: 0 0 0 4px rgba(249, 248, 243, 0.7), 0 0 0 5px var(--line);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brass);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
[dir="rtl"] .badge { padding: 7px 12px 7px 16px; }
.quatre { width: 16px; height: 16px; color: var(--gold-deep); stroke-width: 1.4; }
.on-emerald .quatre { color: var(--gold); }

.hero-title {
  margin-top: 28px;
  font-size: clamp(2.35rem, 4.7vw, 4.25rem);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -0.038em;
  color: var(--text);
  text-wrap: balance;
}

.hero-lead {
  max-width: 37rem;
  margin-top: 24px;
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  line-height: 1.65;
  color: var(--text-soft);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 28px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-soft);
}
.hero-trust li { display: flex; align-items: center; gap: 10px; }
.hero-trust .quatre { width: 15px; height: 15px; }

/* ---------- Sections ---------- */

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* ---------- The four services: one shared layout ---------- */

.service-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.service-grid--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.service-grid--flip .service-copy { order: 2; }

.service-copy .h2 { margin-top: 20px; }

.points { margin-top: 30px; border-top: 1px solid var(--line); }
.point {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.point-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.point p { margin-top: 4px; font-size: 0.95rem; line-height: 1.55; color: var(--text-soft); }

.note {
  max-width: 38rem;
  margin-top: 22px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--gold);
  font-size: 0.9rem;
  color: var(--muted);
}

.service-visual { position: relative; margin: 0; }
.visual-caption { margin-top: 14px; font-size: 0.86rem; color: var(--muted); }

/* Tablets and small laptops: one column, text first, the picture under it at a readable width */
@media (max-width: 1199px) {
  .service-grid,
  .service-grid--flip { grid-template-columns: minmax(0, 1fr); }
  .service-grid--flip .service-copy { order: 0; }
  .service-visual { max-width: 640px; width: 100%; margin-inline: auto; }
}

/* ---------- Scene stages ---------- */
/* Each scene is drawn at 440 × 300 and scaled to the width of its stage by dev.js,
   so the choreography is identical at every size. */

.stage {
  position: relative;
  aspect-ratio: 440 / 300;
  overflow: hidden;
}

.scene {
  position: absolute;
  left: 0;
  top: 0;
  width: 440px;
  height: 300px;
  overflow: hidden;
  transform: scale(var(--k, 1));
  transform-origin: 0 0;
}
.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.7;
  background-image: radial-gradient(rgba(249, 248, 243, 0.09) 1px, transparent 1px);
  background-size: 20px 20px;
}
.scene > * { position: absolute; }

/* scenes only run while they are on screen */
.js .scene:not(.is-playing) * { animation-play-state: paused !important; }

/* ERP and databases: a dashboard with the day's numbers, and a stock warning that goes out on its own */
.se-window {
  left: 18px;
  right: 18px;
  top: 18px;
  bottom: -12px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: 30px auto auto 1fr;
  border: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
  background: var(--panel-2);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.se-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}
.se-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.se-url { margin-left: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.se-side {
  grid-row: 2 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-right: 1px solid var(--line);
}
.se-side i { width: 18px; height: 18px; border-radius: 5px; background: var(--line-soft); }
.se-side i.is-on { background: rgba(197, 160, 89, 0.35); box-shadow: inset 0 0 0 1px var(--gold); }
.se-kpis {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 8px;
  padding: 12px 12px 6px;
}
.se-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(249, 248, 243, 0.04);
}
.se-kpi span { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.se-kpi b { font-size: 14px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.se-kpi small { font-size: 8.5px; font-weight: 700; color: var(--gold); }
.se-chart { padding: 6px 12px 4px; }
.se-chart-label { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.se-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 58px;
  margin-top: 6px;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--line);
}
.se-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(249, 248, 243, 0.42), rgba(249, 248, 243, 0.12));
  transform-origin: bottom;
}
.se-bars .se-bar-live {
  background: linear-gradient(180deg, var(--gold-lit), var(--gold-deep));
  box-shadow: 0 0 16px -2px rgba(197, 160, 89, 0.6);
  animation: se-grow 6s ease-in-out infinite;
}
.se-list { padding: 6px 12px 0; }
.se-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
}
.se-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(249, 248, 243, 0.5); }
.se-list b { flex: 1; height: 4px; max-width: 46%; border-radius: 2px; background: rgba(249, 248, 243, 0.45); }
.se-list em {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 8.5px;
  font-style: normal;
  font-weight: 700;
  color: var(--text-soft);
  background: rgba(249, 248, 243, 0.08);
}
.se-low .se-dot { background: var(--gold); }
.se-low em { color: var(--gold-lit); background: rgba(197, 160, 89, 0.16); animation: se-pulse 6s ease-in-out infinite; }
.se-toast {
  right: 30px;
  top: 52px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(197, 160, 89, 0.55);
  border-radius: 999px;
  background: rgba(14, 66, 56, 0.96);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.9);
  opacity: 0;
  animation: se-toast 6s ease-in-out infinite;
}
.se-toast i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

@keyframes se-grow {
  0%, 30% { transform: scaleY(0.82); }
  45%, 100% { transform: scaleY(1); }
}
@keyframes se-pulse {
  0%, 48% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0); }
  54% { box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.25); }
  62%, 100% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0); }
}
@keyframes se-toast {
  0%, 56% { opacity: 0; transform: translateY(8px); }
  62%, 88% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* websites: a visitor clicks the order button and an order lands */
.sw-browser {
  left: 7%;
  right: 7%;
  top: 9%;
  bottom: -14px;
  border: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
  background: var(--panel-2);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.sw-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.sw-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.sw-url {
  margin-left: 10px;
  padding: 1px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: rgba(14, 66, 56, 0.7);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}
.sw-logo { left: 12%; top: 25%; width: 9%; height: 3.5%; border-radius: 2px; background: rgba(197, 160, 89, 0.8); }
.sw-nav { right: 12%; top: 25.5%; display: flex; gap: 6px; }
.sw-nav i { width: 20px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.sw-h1 { left: 12%; top: 37%; width: 44%; height: 6%; border-radius: 3px; background: rgba(249, 248, 243, 0.88); }
.sw-h2 { left: 12%; top: 46%; width: 30%; height: 6%; border-radius: 3px; background: var(--gold); }
.sw-p1 { left: 12%; top: 57%; width: 44%; height: 2.6%; border-radius: 9px; background: rgba(249, 248, 243, 0.32); }
.sw-p2 { left: 12%; top: 62%; width: 34%; height: 2.6%; border-radius: 9px; background: rgba(249, 248, 243, 0.2); }
.sw-cta {
  left: 12%;
  top: 70%;
  width: 19%;
  height: 9%;
  border-radius: 5px;
  background: var(--gold);
  box-shadow: 0 8px 24px -8px rgba(197, 160, 89, 0.7);
  animation: sw-press 6s ease-in-out infinite;
}
.sw-cta2 { left: 33%; top: 70%; width: 13%; height: 9%; border: 1px solid var(--line-strong); border-radius: 5px; }
.sw-img {
  left: 62%;
  top: 34%;
  width: 26%;
  height: 46%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.55), var(--panel-3) 62%);
}
.sw-img i { position: absolute; left: 12%; bottom: 14%; width: 50%; height: 10%; border-radius: 9px; background: rgba(249, 248, 243, 0.25); }
.sw-ripple {
  left: 21.5%;
  top: 74.5%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: sw-ripple 6s ease-out infinite;
}
.sw-toast {
  right: 8%;
  top: 18%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(197, 160, 89, 0.55);
  border-radius: 999px;
  background: rgba(14, 66, 56, 0.96);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.9);
  opacity: 0;
  animation: sw-toast 6s ease-in-out infinite;
}
.sw-toast i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.sw-cursor {
  left: 82%;
  top: 92%;
  width: 20px;
  height: 20px;
  fill: var(--cream);
  stroke: var(--charcoal);
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
  animation: sw-cursor 6s ease-in-out infinite;
}

@keyframes sw-cursor {
  0%, 12% { left: 82%; top: 92%; }
  42%, 86% { left: 20.5%; top: 73%; }
  100% { left: 82%; top: 92%; }
}
@keyframes sw-press {
  0%, 45% { transform: scale(1); }
  48% { transform: scale(0.88); }
  53%, 100% { transform: scale(1); }
}
@keyframes sw-ripple {
  0%, 47% { opacity: 0; transform: scale(0.3); }
  49% { opacity: 0.9; transform: scale(0.3); }
  64%, 100% { opacity: 0; transform: scale(1.8); }
}
@keyframes sw-toast {
  0%, 52% { opacity: 0; transform: translateY(10px); }
  58%, 84% { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* apps: an item goes in the cart, then the customer is told it's on its way */
.sa-phone {
  left: 50%;
  top: 22px;
  width: 160px;
  height: 320px;
  margin-left: -128px;
  padding: 24px 10px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 4px var(--panel-3), 0 30px 60px -30px rgba(0, 0, 0, 0.95);
}
.sa-notch {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 40px;
  height: 6px;
  margin-left: -20px;
  border-radius: 3px;
  background: var(--line-strong);
}
.sa-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; }
.sa-title { font-size: 11px; font-weight: 800; color: var(--text); }
.sa-cart { position: relative; color: var(--gold); }
.sa-cart .ic { width: 15px; height: 15px; }
.sa-badge {
  position: absolute;
  top: -6px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 13px;
  height: 13px;
  border-radius: 7px;
  background: var(--gold);
  font-size: 8.5px;
  font-weight: 800;
  color: var(--charcoal);
  transform: scale(0);
  animation: sa-badge 6s ease-in-out infinite;
}
.sa-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 4px;
  border-top: 1px solid var(--line-soft);
}
.sa-thumb { flex: none; width: 28px; height: 28px; border-radius: 7px; }
.sa-thumb--a { background: linear-gradient(140deg, var(--gold-lit), var(--gold-deep)); }
.sa-thumb--b { background: linear-gradient(140deg, var(--cream), #E4D5B5); }
.sa-thumb--c { background: linear-gradient(140deg, #5D6168, var(--panel-3)); box-shadow: inset 0 0 0 1px var(--line); }
.sa-lines { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sa-lines b { width: 82%; height: 4px; border-radius: 2px; background: rgba(249, 248, 243, 0.7); }
.sa-lines em { width: 46%; height: 4px; border-radius: 2px; background: rgba(197, 160, 89, 0.7); }
.sa-add {
  width: 17px;
  height: 17px;
  border: 1px solid rgba(197, 160, 89, 0.55);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  color: var(--gold);
}
.sa-list li:first-child .sa-add { animation: sa-add 6s ease-in-out infinite; }
.sa-btn {
  display: block;
  margin-top: 10px;
  padding: 7px 0;
  border-radius: 7px;
  background: var(--gold);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  color: var(--charcoal);
  animation: sa-btn 6s ease-in-out infinite;
}
.sa-tap {
  left: calc(50% + 15px);
  top: 92px;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid var(--gold-lit);
  border-radius: 50%;
  opacity: 0;
  animation: sa-tap 6s ease-out infinite;
}
.sa-push {
  right: 4%;
  top: 14%;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 52%;
  padding: 10px 12px;
  border: 1px solid rgba(197, 160, 89, 0.45);
  border-radius: 12px;
  background: rgba(24, 87, 71, 0.97);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.9);
  opacity: 0;
  animation: sa-push 6s ease-in-out infinite;
}
.sa-push-icon { flex: none; width: 28px; height: 28px; padding: 5px; border: 1px solid rgba(197, 160, 89, 0.45); border-radius: 7px; background: var(--emerald); }
.sa-push-icon svg { width: 100%; height: 100%; fill: var(--gold); }
.sa-push-text { display: flex; flex-direction: column; font-size: 10.5px; line-height: 1.35; color: var(--text-soft); }
.sa-push-text b { font-size: 10.5px; font-weight: 800; color: var(--text); }

@keyframes sa-tap {
  0%, 24% { opacity: 0; transform: scale(0.3); }
  26% { opacity: 0.9; transform: scale(0.3); }
  40%, 100% { opacity: 0; transform: scale(1.7); }
}
@keyframes sa-add {
  0%, 25% { background: transparent; color: var(--gold); }
  28%, 90% { background: var(--gold); color: var(--charcoal); }
  100% { background: transparent; color: var(--gold); }
}
@keyframes sa-badge {
  0%, 30% { transform: scale(0); }
  34% { transform: scale(1.25); }
  38%, 92% { transform: scale(1); }
  100% { transform: scale(0); }
}
@keyframes sa-btn {
  0%, 44% { transform: none; }
  48% { transform: scale(0.94); }
  52%, 100% { transform: none; }
}
@keyframes sa-push {
  0%, 56% { opacity: 0; transform: translateY(-14px); }
  62%, 88% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(-8px); }
}

/* 03 websites and apps: the browser at the back, the phone in front of it.
   Each is drawn at full scene size and scaled into place; the phone runs half a loop
   behind the browser, so the two notifications take turns instead of overlapping. */
.duo-layer { left: 0; top: 0; width: 440px; height: 300px; transform-origin: 0 0; }
.duo-layer > * { position: absolute; }
.duo-web { transform: translate(-12px, 4px) scale(0.86); }
.duo-app { transform: translate(217px, 30px) scale(0.82); }
.scene--duo .sw-nav { right: 30%; }
.scene--duo .sw-h1 { width: 34%; }
.scene--duo .sw-p1 { width: 34%; }
.scene--duo .sw-p2 { width: 26%; }
.scene--duo .sw-img { left: 50%; width: 24%; }
.scene--duo .sw-toast { right: auto; left: 30%; top: 15%; }
.scene--duo .sa-phone { box-shadow: inset 0 0 0 4px var(--panel-3), -18px 24px 50px -20px rgba(0, 0, 0, 0.85); }
.scene--duo .sa-push { right: 2%; top: 5%; width: 44%; }
.scene--duo .duo-app *,
.scene--duo .sa-push { animation-delay: -3s; }

/* ---------- 04 Automations: one order, two ways ---------- */

.compare { padding: clamp(18px, 2.4vw, 26px); }
.compare-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.compare-switch {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(249, 248, 243, 0.04);
}
.compare-switch button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
  transition: background-color 0.35s, color 0.35s, box-shadow 0.35s;
}
.compare-switch .ic { width: 16px; height: 16px; }
.compare-switch button:hover { color: var(--text); }
.compare-switch [data-mode-btn="manual"][aria-pressed="true"] {
  background: rgba(249, 248, 243, 0.1);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(249, 248, 243, 0.35);
}
.compare-switch [data-mode-btn="auto"][aria-pressed="true"] { background: var(--gold); color: var(--charcoal); }

.compare-stage {
  position: relative;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    radial-gradient(rgba(249, 248, 243, 0.07) 1px, transparent 1px) 0 0 / 20px 20px,
    rgba(249, 248, 243, 0.02);
}
.compare-line { display: none; }

.compare-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cstep {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 118px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  transition: transform 0.9s var(--ease-out), border-color 0.5s, box-shadow 0.5s;
}
[data-mode="manual"] .cstep {
  border-style: dashed;
  border-color: rgba(249, 248, 243, 0.28);
  transform: translateY(var(--y)) rotate(var(--r));
}
[data-mode="auto"] .cstep {
  border-color: rgba(197, 160, 89, 0.55);
  box-shadow: 0 0 26px -8px rgba(197, 160, 89, 0.45);
  transform: none;
}
.cstep-n {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  transition: color 0.4s;
}
[data-mode="auto"] .cstep-n { color: var(--gold); }
.cstep-text { flex: 1; font-size: 0.9rem; font-weight: 700; line-height: 1.35; color: var(--text); }
.cstep-tag {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(249, 248, 243, 0.08);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: background-color 0.4s, color 0.4s;
}
[data-mode="auto"] .cstep-tag { background: rgba(197, 160, 89, 0.16); color: var(--gold-lit); }
.cstep .a,
[data-mode="auto"] .cstep .m { display: none; }
[data-mode="auto"] .cstep .a { display: inline; }

.compare-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.compare-stats > div { padding: 12px 14px; border-inline-start: 1px solid var(--line); }
.compare-stats > div:first-child { border-inline-start: 0; }
.compare-stats dt {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.compare-stats dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.compare-stats .arrow { align-self: center; width: 13px; height: 13px; color: var(--muted); }
.v-m, .v-a { transition: color 0.45s, opacity 0.45s; }
.v-m { color: var(--text); }
.v-a { color: var(--muted); opacity: 0.6; }
[data-mode="auto"] .v-m { color: var(--muted); opacity: 0.55; }
[data-mode="auto"] .v-a { color: var(--gold-lit); opacity: 1; }

@media (max-width: 480px) {
  .compare-switch { width: 100%; }
  .compare-switch button { flex: 1; justify-content: center; }
  .compare-steps { grid-template-columns: minmax(0, 1fr); }
  .cstep { min-height: 0; }
  [data-mode="manual"] .cstep { transform: rotate(var(--r)); }
  .compare-stats { grid-template-columns: minmax(0, 1fr); }
  .compare-stats > div { border-inline-start: 0; border-top: 1px solid var(--line); }
  .compare-stats > div:first-child { border-top: 0; }
}

/* tools belt */
.belt { margin-top: clamp(56px, 7vw, 88px); text-align: center; }
.belt-track {
  margin-top: 20px;
  padding: 18px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(197, 160, 89, 0.07);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.belt-run { display: flex; width: max-content; animation: belt 46s linear infinite; }
.belt-track:hover .belt-run { animation-play-state: paused; }
.belt-list { flex: none; display: flex; gap: 14px; padding-right: 14px; }
.belt-list li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
}
.belt-list .ic { width: 16px; height: 16px; color: var(--gold-deep); }
@keyframes belt { to { transform: translateX(-50%); } }

/* ---------- How we work ---------- */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  top: 24px;
  inset-inline-start: 24px;
  width: calc(75% + 24px);
  height: 1px;
  background: var(--line-strong);
}
.steps::after {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transform-origin: var(--start);
}
[dir="rtl"] .steps::after { background: linear-gradient(270deg, var(--gold-deep), var(--gold)); }

.step { position: relative; }
/* each step number is a small emerald seal */
.step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(197, 160, 89, 0.6);
  border-radius: 50%;
  background: var(--emerald);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gold-lit);
  box-shadow: 0 0 0 5px var(--cream), 0 12px 24px -10px rgba(26, 32, 44, 0.6);
}
.step .h3 { margin-top: 26px; }
.step p { margin-top: 10px; font-size: 0.96rem; color: var(--text-soft); }

@media (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .steps::before,
  .steps::after { width: 1px; height: calc(100% - 48px); }
  .steps::after { background: linear-gradient(180deg, var(--gold-deep), var(--gold)); transform-origin: top; }
  .step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; }
  .step-num { grid-row: span 2; }
  .step .h3 { margin-top: 10px; }
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
  gap: clamp(40px, 6vw, 96px);
}

.channels { display: grid; gap: 12px; }
.channel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  text-decoration: none;
  transition: border-color 0.3s;
}
.channel:hover { border-color: var(--gold); }
.channel-icon { width: 44px; height: 44px; border-radius: 10px; }
.channel-icon .ic { width: 20px; height: 20px; }
.channel-text { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.channel-value {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.channel .arrow { color: var(--gold-deep); }
.channel:hover .arrow--out { transform: scaleX(var(--dir)) rotate(-45deg) translateX(3px); }

.contact-form-wrap { padding: clamp(24px, 4vw, 44px); }

.form-title {
  margin-bottom: 26px;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

.field { min-width: 0; margin-bottom: 22px; padding: 0; border: 0; }
.field label,
.field legend {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
.field input[type="text"],
.field textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--cream);
  line-height: 1.5;
  color: var(--text);
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 136px; resize: vertical; }
.field input[type="text"]:hover,
.field textarea:hover { border-color: rgba(26, 32, 44, 0.4); }
.field input[type="text"]:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.3);
}
/* errors are marked by weight and an emerald seal rather than by an extra colour */
.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--charcoal); box-shadow: inset 0 0 0 1px var(--charcoal); }
.field-hint { margin-top: 7px; font-size: 0.8rem; color: var(--muted); }
.field-error {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--text);
}
.field-error::before {
  content: "!";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--emerald);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
  transform: translateY(3px);
}
.field-error[hidden] { display: none; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-soft);
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.choice:hover span { border-color: rgba(26, 32, 44, 0.4); color: var(--text); }
.choice input:checked + span {
  border-color: var(--gold-deep);
  background: rgba(197, 160, 89, 0.18);
  color: var(--text);
}
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.form-actions { margin-top: 28px; }
.form-actions .btn[disabled] { opacity: 0.7; cursor: progress; }
.form-status { margin-top: 18px; font-size: 0.95rem; font-weight: 650; color: var(--text); }

.form-success { outline: none; }
.form-success-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  border: 1px solid rgba(197, 160, 89, 0.6);
  border-radius: 50%;
  background: var(--emerald);
  color: var(--gold);
  box-shadow: 0 12px 24px -10px rgba(26, 32, 44, 0.6);
}
.form-success .form-title { margin-bottom: 12px; }
.form-success p { max-width: 30rem; color: var(--text-soft); }
.form-success .text-link { margin-top: 24px; }

@media (max-width: 960px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Footer ---------- */

.site-footer {
  padding-block: clamp(56px, 7vw, 88px) 28px;
  border-bottom: 0;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.footer-brand { display: flex; align-items: flex-start; gap: 18px; }
.footer-mark { flex: none; width: 52px; height: 37px; }
.footer-word { margin: 6px 0 12px; }
.footer-line { max-width: 22rem; font-size: 0.92rem; color: var(--muted); }
.footer-col ul { display: grid; gap: 10px; margin-top: 16px; font-size: 0.92rem; color: var(--muted); }
.footer-col a { color: var(--text-soft); text-decoration: none; transition: color 0.25s; }
.footer-col a:hover { color: var(--text); }
.footer-col b { margin-inline-end: 6px; font-size: 0.75rem; font-weight: 800; color: var(--accent-ink); }
.footer-dev { display: inline-flex; align-items: center; gap: 8px; }
.footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 26px;
  font-size: 0.85rem;
  color: var(--muted);
}

@media (max-width: 960px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Status pages (404, thank you) ---------- */

.status-page {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 64px var(--gutter);
  background:
    radial-gradient(90% 70% at 100% -10%, rgba(197, 160, 89, 0.2), transparent 60%),
    radial-gradient(60% 50% at 0% 110%, rgba(197, 160, 89, 0.08), transparent 65%),
    var(--cream);
  color: var(--text);
  text-align: center;
}
.status-page-inner { max-width: 36rem; }
.status-page-mark { width: 84px; height: auto; margin: 0 auto 44px; }
.status-page h1 {
  font-size: clamp(2.3rem, 5.5vw, 3.8rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.status-page p { margin-top: 18px; color: var(--text-soft); }
.status-page .btn { margin-top: 36px; }
.status-page-ku {
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid var(--line);
  font-family: "Vazirmatn", var(--font);
  font-size: 1.125rem;
  line-height: 1.9;
}
.status-page-ku h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; line-height: 1.45; }
.status-page-ku .text-link { display: inline-block; margin-top: 22px; font-size: 1.0625rem; }


/* ---------- Mirvari Dev: headings in emerald, the lockup, small shared pieces ---------- */

.hero-title,
.h2,
.h3,
.point-title,
.form-title { color: var(--heading); }

/* sage marks secondary things: an "Example" tag, a status that needs no attention */
.tag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 4px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
}

.brand-mark { width: 52px; height: 37px; }
.brand-row { display: flex; align-items: center; gap: 8px; }
.brand-word { color: var(--heading); }
.site-nav .nav-out { display: inline-flex; align-items: center; gap: 6px; }
.site-nav .nav-out .arrow { width: 13px; height: 13px; color: var(--accent-ink); }
.site-nav a[aria-current="page"] { color: var(--text); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.menu-links a[aria-current="page"] { color: var(--heading); }
.menu-links .arrow { width: 16px; height: 16px; margin-inline-start: auto; align-self: center; color: var(--accent-ink); }

/* five links need more room than the main site's four, so the menu takes over at 1199px, not 1099px */
.site-nav ul { gap: 24px; }
.site-nav a { font-size: 0.875rem; }
@media (max-width: 600px) {
  .brand-mark { width: 44px; height: 32px; }
}

/* ---------- Home hero: the mark, drawn as a plan ---------- */
/* The emblem is shown as a construction drawing: guide circles for its four lobes and the centre lines,
   then the finished mark, then a leader from each lobe to the service it stands for. */

.hero-trust .ic { width: 16px; height: 16px; color: var(--gold-deep); }

.hero-grid--bp { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }

.bp { position: relative; margin: 0; }
.bp-canvas { position: relative; aspect-ratio: 2200 / 1720; }
/* the drawing never takes a click: the labels carry the links, and on narrow screens they sit right under it */
.bp-art { position: absolute; inset: 0; pointer-events: none; }
.bp-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bp-circle.bp-ring { opacity: 0.22; }
.bp-axis { stroke: var(--gold-deep); stroke-width: 3; stroke-dasharray: 40 18 6 18; opacity: 0.4; }
.bp-circle {
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 3.5;
  opacity: 0.38;
  transition: opacity 0.35s, stroke 0.35s, stroke-width 0.35s;
}
.bp-l-face .lg-face,
.bp-l-bits .lg-bit--g { fill: var(--lg-face); }
.bp-l-shadow .lg-shadow,
.bp-l-bits .lg-bit--e { fill: var(--lg-shadow); }
.bp-leader { fill: none; stroke: var(--gold-deep); stroke-width: 4; transition: stroke 0.35s; }
.bp-node { fill: var(--cream); stroke: var(--gold-deep); stroke-width: 4; }

.bp-labels { position: absolute; inset: 0; pointer-events: none; }
.bp-label { position: absolute; padding-bottom: 10px; pointer-events: auto; }
.bp-label a { display: flex; flex-direction: column; gap: 3px; color: var(--text); text-decoration: none; }
.bp-n { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; color: var(--accent-ink); }
.bp-name {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.3s;
}
.bp-label a:hover .bp-name,
.bp-label a:focus-visible .bp-name { text-decoration-color: var(--gold); }
.bp-where { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.bp-go { display: inline-flex; align-items: center; gap: 8px; }
.bp-go .arrow { width: 14px; height: 14px; color: var(--gold-deep); }
.bp-label a:hover .bp-go .arrow:not(.arrow--out) { transform: translateX(calc(3px * var(--dir))) scaleX(var(--dir)); }

/* each label sits on its leader's shelf; positions are taken from the drawing's own coordinates */
.bp-label--right { left: 100%; top: 32.56%; max-width: 24%; text-align: right; transform: translate(-100%, -100%); }
.bp-label--right a { align-items: flex-end; }
.bp-label--left { left: 0; top: 67.44%; max-width: 24%; text-align: left; transform: translateY(-100%); }
.bp-label--left a { align-items: flex-start; }
[dir="rtl"] .bp-label--right a { align-items: flex-start; }
[dir="rtl"] .bp-label--left a { align-items: flex-end; }
.bp-label--top { left: 50%; top: 9.3%; transform: translate(-50%, -100%); }
.bp-label--bottom { left: 50%; top: 90.7%; padding: 10px 0 0; transform: translateX(-50%); }
.bp-label--top a,
.bp-label--bottom a { flex-direction: row; align-items: baseline; gap: 10px; white-space: nowrap; }
/* 01 belongs to the main site, so it is drawn quieter */
.bp-label--top .bp-name { font-weight: 600; color: var(--text-soft); }

/* pointing at a service lights up its lobe and its leader */
.bp:has([data-lobe="top"] a:is(:hover, :focus-visible)) .bp-circle[data-lobe="top"],
.bp:has([data-lobe="right"] a:is(:hover, :focus-visible)) .bp-circle[data-lobe="right"],
.bp:has([data-lobe="bottom"] a:is(:hover, :focus-visible)) .bp-circle[data-lobe="bottom"],
.bp:has([data-lobe="left"] a:is(:hover, :focus-visible)) .bp-circle[data-lobe="left"] { opacity: 1; stroke: var(--gold); stroke-width: 7; }
.bp:has([data-lobe="top"] a:is(:hover, :focus-visible)) .bp-leader[data-lobe="top"],
.bp:has([data-lobe="right"] a:is(:hover, :focus-visible)) .bp-leader[data-lobe="right"],
.bp:has([data-lobe="bottom"] a:is(:hover, :focus-visible)) .bp-leader[data-lobe="bottom"],
.bp:has([data-lobe="left"] a:is(:hover, :focus-visible)) .bp-leader[data-lobe="left"] { stroke: var(--gold); }

.bp-caption { max-width: 30rem; margin: 22px auto 0; text-align: center; font-size: 0.86rem; color: var(--muted); text-wrap: balance; }

@media (max-width: 1199px) {
  .hero-grid--bp { grid-template-columns: minmax(0, 1fr); }
  .hero-grid--bp .hero-copy { text-align: center; }
  .hero-grid--bp .hero-lead { margin-inline: auto; }
  .hero-grid--bp .hero-actions,
  .hero-grid--bp .hero-trust { justify-content: center; }
  .bp { width: 100%; max-width: 680px; margin-inline: auto; }
}
/* phones: the drawing is cropped to the mark, and the four labels become buttons under it,
   in the same style as the "Mirvari Dev" buttons on the main site */
@media (max-width: 640px) {
  .bp-canvas { aspect-ratio: auto; overflow: hidden; }
  .bp-art { position: relative; inset: auto; aspect-ratio: 2200 / 1720; margin: -19% -20% -18%; }
  .bp-l-leaders,
  .bp-axis { display: none; }
  .bp-labels {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
    pointer-events: auto;
  }
  .bp-label { position: static; display: flex; max-width: none; padding: 0; text-align: start; transform: none; }
  .bp-labels .bp-label a,
  [dir="rtl"] .bp-labels .bp-label a {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 6px;
    min-height: 78px;
    padding: 12px 14px;
    border: 1px solid rgba(154, 128, 78, 0.6);
    border-radius: 8px;
    background: rgba(197, 160, 89, 0.12);
    white-space: normal;
    transition: background-color 0.25s, border-color 0.25s;
  }
  .bp-labels .bp-label a:active { background: rgba(197, 160, 89, 0.26); }
  .bp-labels .bp-go { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
  .bp-labels .bp-name { font-size: 0.98rem; text-decoration: none; }
  /* the number is set left-to-right; keep it on the reading-start side of the button in Sorani too */
  .bp-labels .bp-n { align-self: flex-start; }
  .bp-labels .bp-go .arrow { flex: none; width: 16px; height: 16px; margin-bottom: 3px; }
  /* 01 leaves for the main site: the same button, drawn quieter */
  .bp-labels .bp-label--top a { border-color: var(--line-strong); background: transparent; }
  .bp-labels .bp-label--top .bp-name { font-weight: 700; color: var(--text); }
  .bp-labels .bp-where { font-size: 0.78rem; }
  .bp-label--right { order: 1; }
  .bp-label--bottom { order: 2; }
  .bp-label--left { order: 3; }
  .bp-label--top { order: 4; }
}
@media (max-width: 560px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-trust { flex-direction: column; align-items: center; }
}

/* ---------- Home: the three services, as a ruled index ---------- */

.svc-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px clamp(20px, 2.6vw, 40px) 34px;
  border-inline-start: 1px solid var(--line);
}
.svc-card:first-child { padding-inline-start: 0; border-inline-start: 0; }
.svc-card:last-child { padding-inline-end: 0; }
/* a gold rule runs along the top of the service being pointed at */
.svc-card::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: var(--start);
  transition: transform 0.6s var(--ease-out);
}
.svc-card:hover::before,
.svc-card:focus-within::before { transform: scaleX(1); }
.svc-top { display: flex; align-items: center; justify-content: space-between; }
.svc-n { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; color: var(--accent-ink); }
.svc-card .h3 { margin-top: 26px; font-size: clamp(1.35rem, 1.8vw, 1.65rem); letter-spacing: -0.02em; }
.svc-text { margin-top: 12px; font-size: 0.98rem; color: var(--text-soft); }
.svc-points { margin-block: 24px 30px; border-top: 1px solid var(--line); }
.svc-points li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-block: 11px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.svc-points .ic { width: 14px; height: 14px; color: var(--gold-deep); transform: translateY(2px); }
.svc-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
.svc-link .arrow { color: var(--gold-deep); }
.svc-card:hover .svc-link .arrow { transform: translateX(calc(4px * var(--dir))) scaleX(var(--dir)); }
/* the whole column is the link's target, so the click area is generous */
.svc-link::after { content: ""; position: absolute; inset: 0; }

/* the three columns share their rows, so the checklists and links line up even when one intro runs longer */
@supports (grid-template-rows: subgrid) {
  .svc-cards { grid-template-rows: repeat(5, auto); }
  .svc-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .svc-link { align-self: end; justify-self: start; }
}

@media (max-width: 960px) {
  .svc-cards { grid-template-columns: minmax(0, 1fr); }
  .svc-card,
  .svc-card:first-child { padding-inline: 0; border-inline-start: 0; border-top: 1px solid var(--line); }
  .svc-card:first-child { border-top: 0; }
}

/* ---------- Home: follow one order ---------- */

.journey { padding-bottom: 0; }
.journey-wrap { position: relative; padding-bottom: clamp(32px, 4vw, 56px); }
.js .journey-sticky { position: sticky; top: 12vh; }
/* the rail is measured against the track's container, not the full-width sticky layer */
.journey-sticky > .container { position: relative; }
.journey-spacer { display: none; }
.js .journey-spacer { display: block; height: 110svh; }

.journey-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
}
.jstep { display: flex; flex-direction: column; align-items: center; text-align: center; }
.jstep-seal {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(197, 160, 89, 0.6);
  border-radius: 50%;
  background: var(--cream);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--brass);
  box-shadow: 0 0 0 5px var(--cream);
  transition: background-color 0.5s, color 0.5s, box-shadow 0.5s;
}
.jstep.is-on .jstep-seal {
  background: var(--emerald);
  color: var(--gold-lit);
  box-shadow: 0 0 0 5px var(--cream), 0 12px 24px -10px rgba(10, 77, 60, 0.6);
}
.jstep-name {
  margin-top: 14px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.jstep .stage { width: 100%; margin-top: 20px; transition: border-color 0.5s, box-shadow 0.5s; }
.jstep.is-on .stage { border-color: rgba(197, 160, 89, 0.6); }
.jstep-text {
  max-width: 22rem;
  margin-top: 18px;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--text);
  opacity: 0.45;
  transition: opacity 0.5s;
}
.jstep.is-on .jstep-text { opacity: 1; }

/* the rail joins the three seals; sage where the order hasn't been yet, gold where it has */
.journey-rail {
  position: absolute;
  top: 24px;
  inset-inline: calc((100% - 2 * clamp(20px, 2.6vw, 36px)) / 6);
  height: 2px;
  border-radius: 2px;
  background: rgba(122, 154, 139, 0.45);
}
.journey-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: calc(var(--pp, 0) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}
[dir="rtl"] .journey-fill { background: linear-gradient(270deg, var(--gold-deep), var(--gold)); }
/* the order itself: one of the logo's small blocks, carried along the rail */
.journey-packet {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--pp, 0) * 100%);
  width: 14px;
  height: 9px;
  margin-inline-start: -7px;
  margin-top: -4.5px;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.22), 0 0 18px rgba(197, 160, 89, 0.8);
}

.journey-caption {
  margin-top: clamp(28px, 4vw, 48px);
  text-align: center;
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--heading);
  text-wrap: balance;
  opacity: var(--done, 1);
  transform: translateY(calc((1 - var(--done, 1)) * 12px));
}
.journey-note { margin: 14px auto 0; text-align: center; font-size: 0.86rem; color: var(--muted); max-width: 40rem; }

/* phones and narrow tablets: the three steps stack, each plays as it scrolls into view, nothing pins */
@media (max-width: 760px) {
  .js .journey-sticky { position: static; }
  .js .journey-spacer { display: none; }
  .journey-track { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 460px; margin-inline: auto; }
  .jstep { padding-bottom: 44px; }
  .jstep:not(:last-child)::after {
    content: "";
    width: 2px;
    height: 34px;
    margin-top: 10px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--gold), rgba(122, 154, 139, 0.45));
  }
  .jstep:last-child { padding-bottom: 0; }
  .journey-rail { display: none; }
  .journey-caption { opacity: 1; transform: none; }
}

/* the three small screens of the journey, each drawn at 440 x 300 */
.jw-browser,
.ja-chat,
.ja-invoice,
.je-window {
  border: 1px solid var(--line);
  background: var(--panel-2);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
}

/* 1 · the website: a product page, a click on Order */
.jw-browser { left: 26px; right: 26px; top: 24px; bottom: -14px; border-radius: 12px 12px 0 0; }
.jw-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.jw-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.jw-img {
  left: 52px;
  top: 78px;
  width: 132px;
  height: 150px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(140deg, rgba(197, 160, 89, 0.6), var(--panel-3) 70%);
}
.jw-title { left: 204px; top: 86px; width: 150px; height: 12px; border-radius: 3px; background: rgba(249, 248, 243, 0.85); }
.jw-sub { left: 204px; top: 108px; width: 110px; height: 7px; border-radius: 4px; background: rgba(249, 248, 243, 0.3); }
.jw-price { left: 204px; top: 128px; font-size: 15px; font-weight: 800; color: var(--gold-lit); font-variant-numeric: tabular-nums; }
.jw-qty { left: 204px; top: 160px; display: flex; gap: 6px; }
.jw-qty i { width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 6px; }
.jw-btn {
  left: 204px;
  top: 196px;
  padding: 8px 22px;
  border-radius: 6px;
  background: var(--gold);
  font-size: 12px;
  font-weight: 800;
  color: var(--charcoal);
  transition: transform 0.15s;
}
.jw-ripple {
  left: 248px;
  top: 212px;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
}
.jw-cursor {
  left: 380px;
  top: 270px;
  width: 20px;
  height: 20px;
  fill: var(--cream);
  stroke: var(--charcoal);
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
  transition: left 0.9s var(--ease-in-out), top 0.9s var(--ease-in-out);
}
.jw-toast,
.ja-status,
.je-toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(197, 160, 89, 0.55);
  border-radius: 999px;
  background: rgba(14, 66, 56, 0.96);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s, transform 0.5s var(--ease-out);
}
.jw-toast i,
.ja-status i,
.je-toast i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.jw-toast { right: 40px; top: 58px; }

.jstep.is-on .jw-cursor { left: 244px; top: 206px; }
.jstep.is-on .jw-btn { animation: j-press 0.3s ease 0.95s; }
.jstep.is-on .jw-ripple { animation: j-ripple 0.8s ease-out 1s; }
.jstep.is-on .jw-toast { opacity: 1; transform: none; transition-delay: 1.25s; }

/* 2 · the automation: a confirmation on WhatsApp and an invoice, written by themselves */
.ja-chat { left: 22px; top: 26px; width: 196px; bottom: -14px; border-radius: 14px 14px 0 0; }
.ja-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; color: var(--text); }
.ja-head i { width: 20px; height: 20px; border-radius: 50%; background: rgba(122, 154, 139, 0.55); }
.ja-in,
.ja-out {
  left: 36px;
  width: 140px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 10.5px;
  line-height: 1.4;
}
.ja-in { top: 80px; height: 30px; border-end-start-radius: 2px; background: var(--panel-3); }
.ja-in::before,
.ja-in::after { content: ""; position: absolute; left: 10px; height: 4px; border-radius: 2px; background: rgba(249, 248, 243, 0.4); }
.ja-in::before { top: 9px; width: 100px; }
.ja-in::after { top: 18px; width: 64px; }
.ja-out {
  left: 50px;
  top: 128px;
  width: 154px;
  border: 1px solid rgba(197, 160, 89, 0.4);
  background: rgba(197, 160, 89, 0.16);
  color: var(--text);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s, transform 0.5s var(--ease-out);
}
.ja-out b { display: block; font-weight: 800; }
.ja-out small { display: block; margin-top: 3px; font-size: 9px; text-align: end; color: var(--gold-lit); }
.ja-invoice {
  right: 22px;
  top: 40px;
  width: 172px;
  height: 214px;
  padding: 14px;
  border-radius: 10px;
  opacity: 0.55;
  transition: opacity 0.5s;
}
.ja-doc-title { font-size: 11px; font-weight: 800; color: var(--text); }
.ja-doc-n { margin-top: 2px; font-size: 9.5px; font-weight: 700; color: var(--gold-lit); }
.ja-lines { position: static; display: grid; gap: 9px; margin-top: 16px; }
.ja-lines i {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgba(249, 248, 243, 0.42);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.ja-lines i:nth-child(2) { width: 80%; }
.ja-lines i:nth-child(3) { width: 64%; }
.ja-lines i:nth-child(4) { width: 72%; }
.ja-total {
  position: static;
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  font-weight: 800;
  color: var(--text);
  opacity: 0;
  transition: opacity 0.5s;
}
.ja-total b { color: var(--gold-lit); font-variant-numeric: tabular-nums; }
.ja-status { right: 34px; top: 262px; }

.jstep.is-on .ja-out { opacity: 1; transform: none; transition-delay: 0.35s; }
.jstep.is-on .ja-invoice { opacity: 1; }
.jstep.is-on .ja-lines i { transform: none; }
.jstep.is-on .ja-lines i:nth-child(1) { transition-delay: 0.7s; }
.jstep.is-on .ja-lines i:nth-child(2) { transition-delay: 0.82s; }
.jstep.is-on .ja-lines i:nth-child(3) { transition-delay: 0.94s; }
.jstep.is-on .ja-lines i:nth-child(4) { transition-delay: 1.06s; }
.jstep.is-on .ja-total { opacity: 1; transition-delay: 1.2s; }
.jstep.is-on .ja-status { opacity: 1; transform: none; transition-delay: 1.5s; }

/* 3 · the ERP: today's sales go up, one item comes off the shelf */
.je-window { left: 22px; right: 22px; top: 24px; bottom: -14px; border-radius: 12px 12px 0 0; padding: 14px; }
.je-kpis { position: static; display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; }
.je-kpi { padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(249, 248, 243, 0.04); }
.je-kpi > span { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.je-kpi b { display: block; margin-top: 4px; font-size: 15px; font-weight: 800; white-space: nowrap; color: var(--text); font-variant-numeric: tabular-nums; }
.je-kpi small { font-size: 9px; font-weight: 700; color: var(--gold-lit); }
.je-bars {
  position: static;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 64px;
  margin-top: 14px;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--line);
}
.je-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(122, 154, 139, 0.95), rgba(122, 154, 139, 0.45));
}
.je-bars .je-live {
  background: linear-gradient(180deg, var(--gold-lit), var(--gold-deep));
  transform: scaleY(0.84);
  transform-origin: bottom;
  transition: transform 0.9s var(--ease-out);
}
.je-row {
  position: static;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  transition: border-color 0.5s, background-color 0.5s;
}
.je-row i { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(140deg, var(--gold-lit), var(--gold-deep)); }
.je-row b { flex: 1; height: 5px; max-width: 40%; border-radius: 3px; background: rgba(249, 248, 243, 0.5); }
.je-stock { margin-inline-start: auto; font-size: 11px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.je-stock span { color: var(--muted); }
.je-toast { right: 34px; top: 262px; }

.jstep.is-on .je-live { transform: none; transition-delay: 0.4s; }
.jstep.is-on .je-row { border-color: rgba(197, 160, 89, 0.5); background: rgba(197, 160, 89, 0.08); transition-delay: 0.6s; }
.jstep.is-on .je-toast { opacity: 1; transform: none; transition-delay: 1.3s; }

@keyframes j-press {
  50% { transform: scale(0.9); }
}
@keyframes j-ripple {
  0% { opacity: 0.9; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.8); }
}

/* ---------- Home: working with us ---------- */

.principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}
.principle {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px clamp(18px, 2vw, 32px) 6px;
  border-inline-start: 1px solid var(--line);
}
.principle:first-child { padding-inline-start: 0; border-inline-start: 0; }
.principle:last-child { padding-inline-end: 0; }
/* here the icon is a plain gold line, not a seal: four seals in a row would read as a row of identical cards */
.principle .feature-icon { width: auto; height: auto; place-items: start; border: 0; background: none; box-shadow: none; color: var(--gold-deep); }
.principle .feature-icon .ic { width: 22px; height: 22px; }
.principle .h3 { margin-top: 8px; }
.principle p { font-size: 0.96rem; color: var(--text-soft); }

@media (max-width: 1099px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principle:nth-child(2) { padding-inline-end: 0; }
  .principle:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .principle:nth-child(n + 3) { border-top: 1px solid var(--line); padding-bottom: 26px; }
}
@media (max-width: 560px) {
  .principles { grid-template-columns: minmax(0, 1fr); }
  .principle,
  .principle:nth-child(n) { padding-inline: 0; border-inline-start: 0; padding-bottom: 22px; }
  .principle + .principle { border-top: 1px solid var(--line); }
}

/* ---------- Home: the way back to service 01 ---------- */

.pointer { padding-block: 0 clamp(48px, 6vw, 80px); }
.pointer-link {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 20px;
  border-block: 1px solid var(--line);
  text-decoration: none;
  transition: border-color 0.3s;
}
.pointer-link:hover { border-color: var(--gold-deep); }
.pointer-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--accent-ink);
}
.pointer-text { flex: 1; font-size: 0.98rem; color: var(--text-soft); }
.pointer-text b { font-weight: 700; color: var(--text); }
.pointer-link .arrow { color: var(--gold-deep); }

/* ---------- Service pages ---------- */

.hero--service .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.hero--service .hero-title { font-size: clamp(2.3rem, 4.3vw, 3.9rem); }
.hero--service .service-visual { margin: 0; }
@media (max-width: 1199px) {
  .hero--service .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero--service .hero-copy { text-align: center; }
  .hero--service .hero-lead { margin-inline: auto; }
  .hero--service .hero-actions { justify-content: center; }
  .hero--service .service-visual { max-width: 640px; width: 100%; margin-inline: auto; }
}

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.crumb .arrow { width: 14px; height: 14px; transform: scaleX(calc(-1 * var(--dir))); }
.crumb:hover { color: var(--text); }
.crumb:hover .arrow { transform: translateX(calc(-3px * var(--dir))) scaleX(calc(-1 * var(--dir))); }
.hero--service .hero-copy > .label { display: flex; width: fit-content; }
@media (max-width: 1199px) {
  .hero--service .hero-copy > .label { margin-inline: auto; }
}

/* sounds familiar: everyday situations the service fixes, set as a two-column table */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 6vw, 96px);
  border-top: 1px solid var(--line-strong);
}
.problem {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 8px 28px;
  align-items: baseline;
  padding-block: 26px;
  border-bottom: 1px solid var(--line);
}
.problem .h3 { font-size: 1.15rem; }
.problem p { font-size: 0.98rem; color: var(--text-soft); }
@media (max-width: 960px) {
  .problem-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .problem { grid-template-columns: minmax(0, 1fr); padding-block: 20px; }
}

/* what we build: the three points, in full */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(40px, 6vw, 96px);
}
.split .section-head { margin-bottom: 0; }
@media (min-width: 1100px) {
  .split .section-head { position: sticky; top: calc(var(--header-h) + 32px); }
}
@media (max-width: 1099px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .split .section-head { margin-bottom: clamp(36px, 5vw, 56px); }
}

.build-list { border-top: 1px solid var(--line); }
.build-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  padding-block: 28px;
  border-bottom: 1px solid var(--line);
}
.build-item .h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); }
.build-item p { margin-top: 10px; color: var(--text-soft); }

/* what you get */
.get-card { padding: 0; }
.get-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  border-top: 1px solid var(--line-strong);
}
.get-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}
.get-list .ic { width: 16px; height: 16px; color: var(--gold-deep); transform: translateY(3px); }
@media (max-width: 640px) {
  .get-list { grid-template-columns: minmax(0, 1fr); }
}

/* examples */
.example-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}
.example {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px clamp(20px, 2.4vw, 36px) 6px;
  border-inline-start: 1px solid var(--line);
}
.example:first-child { padding-inline-start: 0; border-inline-start: 0; }
.example:last-child { padding-inline-end: 0; }
.example .h3 { margin-top: 4px; }
.example p { font-size: 0.96rem; color: var(--text-soft); }
@media (max-width: 960px) {
  .example-grid { grid-template-columns: minmax(0, 1fr); }
  .example,
  .example:first-child { padding: 24px 0; border-inline-start: 0; }
  .example + .example { border-top: 1px solid var(--line); }
}

/* questions businesses ask */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--heading);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--gold-deep);
  transition: transform 0.4s var(--ease-out), border-color 0.3s, background-color 0.3s;
}
.faq-icon .ic { width: 16px; height: 16px; }
.faq-item summary:hover .faq-icon { border-color: var(--gold-deep); }
.faq-item[open] .faq-icon { transform: rotate(45deg); border-color: var(--gold-deep); background: rgba(197, 160, 89, 0.14); }
.faq-a { padding-bottom: 24px; max-width: 44rem; color: var(--text-soft); }
/* where the browser can animate to "auto", the answer slides open */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.4s var(--ease-out), content-visibility 0.4s allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
}

/* the other two development services */
.section--others > .container > .label { margin-bottom: 26px; }
.others {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 64px);
  border-top: 1px solid var(--line-strong);
}
.other {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding-block: 24px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: border-color 0.3s;
}
.other:hover { border-bottom-color: var(--gold-deep); }
.other-text { display: flex; flex-direction: column; gap: 4px; }
.other-n { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; color: var(--accent-ink); }
.other-name { font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--heading); }
.other-line { font-size: 0.92rem; color: var(--text-soft); }
.other .arrow { color: var(--gold-deep); }
.other:hover .arrow { transform: translateX(calc(4px * var(--dir))) scaleX(var(--dir)); }
@media (max-width: 760px) {
  .others { grid-template-columns: minmax(0, 1fr); }
}

/* closing call to action: type and two buttons, on the same sheet as everything else */
.cta-card { padding: 0; }
.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(28px, 4vw, 64px);
}
.cta-card .h2--sm { font-size: clamp(2.1rem, 4.2vw, 3.6rem); }
.cta-inner .section-intro { margin-top: 18px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; padding-bottom: 6px; }
@media (max-width: 960px) {
  .cta-inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 560px) {
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; }
}

/* ---------- See it work: the example dashboard (02) ---------- */

.demo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--line);
}
.demo-title { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 800; color: var(--text); }
.demo-title i { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 3px rgba(122, 154, 139, 0.25); }

.tabs {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(249, 248, 243, 0.04);
}
.tabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--muted);
  transition: background-color 0.3s, color 0.3s;
}
.tabs [role="tab"] .ic { width: 15px; height: 15px; }
.tabs [role="tab"]:hover { color: var(--text); }
.tabs [role="tab"][aria-selected="true"] { background: var(--gold); color: var(--charcoal); }

.demo-body { padding: clamp(16px, 2vw, 22px); }
.demo-panel[hidden] { display: none; }
.demo-panel { animation: demo-in 0.5s var(--ease-out); }
@keyframes demo-in {
  from { opacity: 0; transform: translateY(8px); }
}

.dash-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dash-kpi {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--emerald-2);
}
.dash-kpi > span { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.dash-kpi b {
  display: block;
  margin-top: 6px;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dash-kpi small { font-size: 0.72rem; font-weight: 700; color: var(--gold-lit); }

.dash-chart {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--emerald-2);
}
.dash-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.dash-chart-title { font-size: 0.86rem; font-weight: 700; color: var(--text); }
.legend { display: flex; gap: 16px; font-size: 0.8rem; color: var(--text-soft); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend .l-now { background: var(--gold); }
.legend .l-prev { background: var(--sage); }
.dash-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: clamp(8px, 1.6vw, 18px);
  height: 150px;
  margin-top: 18px;
  border-bottom: 1px solid var(--line);
}
.dash-day { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 100%; }
.dash-day i {
  flex: 1;
  max-width: 26px;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  transform-origin: bottom;
}
.dash-day .b-prev { background: linear-gradient(180deg, var(--sage), rgba(122, 154, 139, 0.55)); }
.dash-day .b-now { background: linear-gradient(180deg, var(--gold-lit), var(--gold-deep)); }

.dash-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.dash-table th {
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--line);
  text-align: start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.dash-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); color: var(--text); font-variant-numeric: tabular-nums; }
.dash-table tr:last-child td { border-bottom: 0; }
.dash-table .num { text-align: end; font-weight: 700; }
.dash-table th.num { text-align: end; }
.dash-item { display: flex; align-items: center; gap: 12px; }
.dash-item i { flex: none; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(140deg, var(--gold-lit), var(--gold-deep)); }
.dash-item i.round { border-radius: 50%; background: linear-gradient(140deg, var(--sage), var(--emerald-3)); }
.dash-item b { display: block; width: var(--w, 120px); max-width: 100%; height: 6px; border-radius: 3px; background: rgba(249, 248, 243, 0.45); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.chip--ok { background: rgba(122, 154, 139, 0.2); color: var(--text); }
.chip--ok::before { background: var(--sage); }
.chip--alert { background: rgba(197, 160, 89, 0.18); color: var(--gold-lit); box-shadow: inset 0 0 0 1px rgba(197, 160, 89, 0.4); }
.chip--alert::before { background: var(--gold); }
.table-scroll { overflow-x: auto; }

@media (max-width: 640px) {
  .dash-kpis { grid-template-columns: minmax(0, 1fr); }
  .demo-head .tabs { width: 100%; }
  .tabs [role="tab"] { flex: 1; justify-content: center; padding-inline: 8px; }
  .dash-table .hide-sm { display: none; }
  .dash-table th, .dash-table td { padding-inline: 8px; }
}

/* ---------- See it work: website, web app, mobile app (03) ---------- */

.demo-caption { margin-top: 14px; font-size: 0.88rem; color: var(--text-soft); }
.demo-stage { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }

/* the website on its own, full size */
.scene--web .sw-toast { right: 9%; top: 15%; }

/* the web app: a team's bookings for today, and a new one arriving */
.wa-window {
  left: 18px;
  right: 18px;
  top: 18px;
  bottom: -12px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: 30px 1fr;
  border: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
  background: var(--panel-2);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.wa-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.wa-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.wa-side { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 14px; border-right: 1px solid var(--line); }
.wa-side i { width: 18px; height: 18px; border-radius: 5px; background: var(--line-soft); }
.wa-side i.is-on { background: rgba(197, 160, 89, 0.35); box-shadow: inset 0 0 0 1px var(--gold); }
.wa-main { padding: 12px 14px; }
.wa-title { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; font-weight: 800; color: var(--text); }
.wa-title small { font-size: 9px; font-weight: 700; color: var(--muted); }
.wa-list { margin-top: 10px; }
.wa-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 10px;
  color: var(--text-soft);
}
.wa-time { width: 34px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.wa-list b { flex: 1; max-width: 42%; height: 4px; border-radius: 2px; background: rgba(249, 248, 243, 0.45); }
.wa-list em { margin-left: auto; padding: 1px 8px; border-radius: 999px; font-size: 8.5px; font-style: normal; font-weight: 700; background: rgba(122, 154, 139, 0.22); color: var(--text); }
.wa-list .wa-new {
  border: 1px solid rgba(197, 160, 89, 0.5);
  border-radius: 8px;
  background: rgba(197, 160, 89, 0.1);
  animation: wa-new 6s var(--ease-out) infinite;
}
.wa-list .wa-new em { background: var(--gold); color: var(--charcoal); }
.wa-toast {
  right: 30px;
  top: 52px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(197, 160, 89, 0.55);
  border-radius: 999px;
  background: rgba(14, 66, 56, 0.96);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.9);
  opacity: 0;
  animation: se-toast 6s ease-in-out infinite;
}
.wa-toast i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
@keyframes wa-new {
  0%, 30% { opacity: 0; transform: translateY(-10px); }
  40%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

/* the mobile app on its own: the phone in the middle */
.scene--app .sa-phone { margin-left: -80px; top: 26px; }
.scene--app .sa-tap { left: calc(50% + 50px); top: 96px; }
.scene--app .sa-push { right: 3%; top: 8%; width: 40%; }

/* ---------- 04 Automations: one message, handled on its own ---------- */

.fl-node {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.85);
}
.fl-label { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; color: var(--text); }
.fl-label .ic { width: 13px; height: 13px; color: var(--gold); }
.fl-in { left: 18px; top: 106px; width: 128px; }
.fl-bubble { position: relative; height: 40px; border-radius: 9px; border-end-start-radius: 2px; background: var(--panel-3); }
.fl-bubble::before,
.fl-bubble::after { content: ""; position: absolute; left: 10px; height: 4px; border-radius: 2px; background: rgba(249, 248, 243, 0.45); }
.fl-bubble::before { top: 26px; width: 84px; }
.fl-bubble::after { top: 36px; width: 56px; }
.fl-mid {
  left: 184px;
  top: 122px;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(197, 160, 89, 0.6);
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--gold);
  box-shadow: 0 0 0 6px rgba(197, 160, 89, 0.08), 0 24px 50px -20px rgba(0, 0, 0, 0.9);
  animation: fl-hub 6s ease-in-out infinite;
}
.fl-mid .ic { width: 26px; height: 26px; }
.fl-mid-name { left: 160px; top: 204px; width: 120px; text-align: center; font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fl-out { left: 296px; width: 128px; animation: fl-out 6s ease-in-out infinite; }
.fl-out--a { top: 74px; }
.fl-out--b { top: 174px; animation-delay: 0.25s; }
.fl-out .fl-ok { font-size: 9px; font-weight: 700; color: var(--gold-lit); }
.fl-wire { height: 2px; border-radius: 2px; background: rgba(122, 154, 139, 0.5); }
.fl-wire--in { left: 146px; top: 157px; width: 38px; }
.fl-wire--a { left: 256px; top: 134px; width: 40px; transform: rotate(-28deg); transform-origin: left; }
.fl-wire--b { left: 256px; top: 182px; width: 40px; transform: rotate(28deg); transform-origin: left; }
.fl-packet {
  width: 10px;
  height: 7px;
  margin: -3.5px 0 0 -5px;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(197, 160, 89, 0.9);
  opacity: 0;
}
.fl-packet--1 { animation: fl-p1 6s linear infinite; }
.fl-packet--2 { animation: fl-p2 6s linear infinite; }
.fl-packet--3 { animation: fl-p3 6s linear infinite; }

@keyframes fl-p1 {
  0%, 10% { opacity: 0; left: 146px; top: 158px; }
  12% { opacity: 1; left: 146px; top: 158px; }
  28% { opacity: 1; left: 190px; top: 158px; }
  30%, 100% { opacity: 0; left: 190px; top: 158px; }
}
@keyframes fl-p2 {
  0%, 38% { opacity: 0; left: 256px; top: 136px; }
  40% { opacity: 1; left: 256px; top: 136px; }
  52% { opacity: 1; left: 296px; top: 115px; }
  54%, 100% { opacity: 0; left: 296px; top: 115px; }
}
@keyframes fl-p3 {
  0%, 38% { opacity: 0; left: 256px; top: 180px; }
  40% { opacity: 1; left: 256px; top: 180px; }
  52% { opacity: 1; left: 296px; top: 201px; }
  54%, 100% { opacity: 0; left: 296px; top: 201px; }
}
@keyframes fl-hub {
  0%, 26% { box-shadow: 0 0 0 6px rgba(197, 160, 89, 0.08), 0 24px 50px -20px rgba(0, 0, 0, 0.9); }
  32%, 40% { box-shadow: 0 0 0 10px rgba(197, 160, 89, 0.2), 0 0 30px rgba(197, 160, 89, 0.45); }
  50%, 100% { box-shadow: 0 0 0 6px rgba(197, 160, 89, 0.08), 0 24px 50px -20px rgba(0, 0, 0, 0.9); }
}
@keyframes fl-out {
  0%, 52% { border-color: var(--line); }
  56%, 90% { border-color: rgba(197, 160, 89, 0.6); }
  100% { border-color: var(--line); }
}

/* ---------- 04 Automations: the comparison, re-inked ---------- */
/* "by hand" is the sage state, "automated" the gold one */
[data-mode="manual"] .cstep { border-color: rgba(122, 154, 139, 0.85); }
.compare-switch [data-mode-btn="manual"][aria-pressed="true"] {
  background: rgba(122, 154, 139, 0.24);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--sage);
}
.cstep-tag { background: rgba(122, 154, 139, 0.22); color: var(--text-soft); }
.se-dot { background: var(--sage); }
/* the counting number inside a KPI is a span too; it keeps the figure's style, not the label's */
.se-kpi b span { font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.se-bars i { background: linear-gradient(180deg, rgba(122, 154, 139, 0.95), rgba(122, 154, 139, 0.4)); }
.sa-thumb--c { background: linear-gradient(140deg, var(--sage), var(--panel-3)); }

/* ---------- Status pages ---------- */

.status-page-mark { width: 120px; }
.status-page h1,
.status-page-ku h2 { color: var(--heading); }

/* the three kinds of software: the example on one side, what it does on the other */
.demo-panel--split {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  gap: clamp(20px, 3.4vw, 48px);
}
.demo-panel--split[hidden] { display: none; }
.demo-panel--split .demo-caption {
  margin: 0;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  text-wrap: pretty;
}
@media (max-width: 900px) {
  .demo-panel--split { grid-template-columns: minmax(0, 1fr); }
  .demo-panel--split .demo-stage { width: 100%; max-width: 640px; margin-inline: auto; }
  .demo-panel--split .demo-caption { font-size: 1rem; text-align: center; }
}

/* ---------- The sheet: one ground, ruled like a drawing ---------- */
/* Rails at the container's edges run the whole height of the page, and every section opens on a hairline
   with registration marks at both ends: the marks a printer uses to line up the gold over the emerald,
   as the logo's two layers are. The page never changes colour; structure does the separating. */

.page::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  border-inline: 1px solid var(--line-soft);
  pointer-events: none;
}

.section,
.site-footer { position: relative; }
.section { padding-top: clamp(56px, 6vw, 96px); }

.section::before,
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  border-top: 1px solid var(--line);
}
.section::after,
.site-footer::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  width: calc(min(100% - 2 * var(--gutter), var(--container)) + 13px);
  height: 13px;
  margin-inline: auto;
  background:
    linear-gradient(var(--gold), var(--gold)) 6px 0 / 1px 13px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 6px / 13px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) calc(100% - 6px) 0 / 1px 13px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 6px / 13px 1px no-repeat;
  pointer-events: none;
}

/* section headings read like a drawing's title block: the heading on the left, its explanation on the right */
.container:not(.split):not(.service-grid) > .section-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  column-gap: clamp(32px, 6vw, 96px);
  max-width: none;
}
.container:not(.split):not(.service-grid) > .section-head > .label { grid-column: 1 / -1; justify-self: start; margin-bottom: 24px; }
.container:not(.split):not(.service-grid) > .section-head > .h2 { margin-top: 0; }
.container:not(.split):not(.service-grid) > .section-head > .section-intro { max-width: 34rem; margin-top: 0; padding-bottom: 0.35em; }
@media (max-width: 960px) {
  .container:not(.split):not(.service-grid) > .section-head { display: block; }
  .container:not(.split):not(.service-grid) > .section-head > .label { margin-bottom: 0; }
  .container:not(.split):not(.service-grid) > .section-head > .h2 { margin-top: 20px; }
  .container:not(.split):not(.service-grid) > .section-head > .section-intro { margin-top: 20px; }
}

.site-footer { padding-block: clamp(56px, 6vw, 88px) 28px; }
.footer-word { color: var(--heading); }

@media (max-width: 760px) {
  .page::before { display: none; }
}

/* the fixed light is kept, but quieter than on mirvarigroup.com, so the whole page reads as one cream sheet */
.atm-rays { opacity: 0.45; }
.atm-bloom { opacity: 0.6; }
@media (max-width: 760px) {
  .atm-rays { opacity: 0.22; }
  .atm-bloom { opacity: 0.35; }
}

/* ---------- Mobile menu: smooth on phones ---------- */
/* Locking the page's scroll removes the scrollbar; keeping its gutter stops the page jumping sideways. */
html { scrollbar-gutter: stable; }
/* A solid sheet instead of a full-screen blur: the blur was invisible under a 98% opaque panel and costly on phones. */
.menu {
  background: var(--cream);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overscroll-behavior: contain;
  transition: opacity 0.3s var(--ease-out);
}
.menu-links li,
.menu-foot { opacity: 0; transform: translateY(-6px); transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out); }
.menu.is-open .menu-links li,
.menu.is-open .menu-foot { opacity: 1; transform: none; }
.menu.is-open .menu-links li:nth-child(2) { transition-delay: 0.03s; }
.menu.is-open .menu-links li:nth-child(3) { transition-delay: 0.06s; }
.menu.is-open .menu-links li:nth-child(4) { transition-delay: 0.09s; }
.menu.is-open .menu-links li:nth-child(5) { transition-delay: 0.12s; }
.menu.is-open .menu-links li:nth-child(6) { transition-delay: 0.15s; }
.menu.is-open .menu-foot { transition-delay: 0.18s; }
@media (prefers-reduced-motion: reduce) {
  .menu-links li,
  .menu-foot { opacity: 1; transform: none; }
}

/* ---------- Hero order on stacked layouts ---------- */
/* The drawing has its own timing, so it starts at once instead of waiting for the text to arrive. */
.is-loaded .bp[data-intro] { transition-delay: 0s; }
/* Tablets and phones: the drawing comes first, so its animation is the first thing on screen. */
@media (max-width: 1199px) {
  .hero-grid--bp .bp { order: -1; }
}
/* Phones: the drawing, then the headline and its buttons, then the four service buttons and the caption. */
@media (max-width: 640px) {
  .hero-grid--bp { gap: 0; overflow-x: clip; }
  .hero-grid--bp .bp,
  .hero-grid--bp .bp-canvas { display: contents; }
  .hero-grid--bp .bp-art { order: -1; margin-bottom: -16%; }
  .hero-grid--bp .hero-copy { margin-bottom: 28px; }
  .hero-grid--bp .bp-caption { margin-top: 16px; }
}
/* A backdrop-filter makes the header the frame for anything fixed inside it, which would shrink the
   menu panel to the header's own height. While the menu is open (or fading closed) the header is
   solid cream instead, the same as the panel. */
.menu-open .site-header,
.menu-closing .site-header {
  background: var(--cream);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- Phones: fewer things redrawn every frame ---------- */
/* The grain was blended into everything under it, which makes a phone recompose the whole screen
   while anything moves; plain transparency looks the same on cream and costs nothing. */
.atm-grain { mix-blend-mode: normal; opacity: 0.03; }

/* ---------- Motion ---------- */

/* Opening: each part of the first screen rises in turn. */
.js [data-intro] { opacity: 0; transform: translateY(22px); }

.is-loaded [data-intro] {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js .site-header { opacity: 0; }
.is-loaded .site-header { opacity: 1; transition: opacity 0.8s ease 0.1s, background-color 0.35s, border-color 0.35s; }

/* content arriving as it scrolls into view */
.js [data-reveal] { opacity: 0; transform: translateY(26px); }
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}

/* the points of each service, one after another */
.js .service-copy .point { opacity: 0; transform: translateY(12px); }
.js .service-copy.is-in .point {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.js .service-copy.is-in .point:nth-child(1) { transition-delay: 0.25s; }
.js .service-copy.is-in .point:nth-child(2) { transition-delay: 0.38s; }
.js .service-copy.is-in .point:nth-child(3) { transition-delay: 0.51s; }

/* the dashboard's week of sales rises once when it comes into view */
.js .scene--erp .se-bars i:not(.se-bar-live) { transform: scaleY(0); }
.js .is-in .scene--erp .se-bars i:not(.se-bar-live) { transform: none; transition: transform 0.9s var(--ease-out); }
.js .is-in .scene--erp .se-bars i:nth-child(2) { transition-delay: 0.08s; }
.js .is-in .scene--erp .se-bars i:nth-child(3) { transition-delay: 0.16s; }
.js .is-in .scene--erp .se-bars i:nth-child(4) { transition-delay: 0.24s; }
.js .is-in .scene--erp .se-bars i:nth-child(5) { transition-delay: 0.32s; }
.js .is-in .scene--erp .se-bars i:nth-child(6) { transition-delay: 0.4s; }

/* process: the rail runs and each step arrives as the line reaches it */
.js .steps::after { transform: scaleX(0); }
.js .steps .step { opacity: 0; transform: translateY(14px); }
.js .steps.is-in::after { transform: none; transition: transform 1.8s var(--ease-in-out); }
.js .steps.is-in .step {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.js .steps.is-in .step:nth-child(2) { transition-delay: 0.5s; }
.js .steps.is-in .step:nth-child(3) { transition-delay: 1s; }
.js .steps.is-in .step:nth-child(4) { transition-delay: 1.5s; }
@media (max-width: 900px) {
  .js .steps::after { transform: scaleY(0); }
}

/* language switch: a short fade so the page doesn't jump between scripts */
main, .site-footer, .header-inner { transition: opacity 0.3s ease; }
.is-switching main,
.is-switching .site-footer,
.is-switching .header-inner { opacity: 0; transition-duration: 0.2s; }
.is-translating [data-i18n] { visibility: hidden; }


/* the drawing, once: guides first, then the mark locks into register, then each service is labelled */
.js .bp-circle,
.js .bp-leader { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .bp-axis,
.js .bp-node,
.js .bp-label,
.js .bp-l-shadow { opacity: 0; }
/* whole layers move, never the shapes inside them, so phones can animate them without redrawing the mark */
.js .bp-l-face { opacity: 0; transform: translate(-2.5%, -1.5%); }
.js .bp-l-bits--l { opacity: 0; transform: translateX(-9%); }
.js .bp-l-bits--r { opacity: 0; transform: translateX(9%); }
.is-loaded .bp-axis { opacity: 0.4; transition: opacity 0.8s ease 0.3s; }
.is-loaded .bp-circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s var(--ease-in-out) calc(0.35s + var(--o) * 0.12s), opacity 0.35s, stroke 0.35s, stroke-width 0.35s;
}
.is-loaded .bp-l-shadow { opacity: 1; transition: opacity 0.8s ease 1.1s; }
.is-loaded .bp-l-face { opacity: 1; transform: none; transition: opacity 0.6s ease 1.3s, transform 1.3s var(--ease-out) 1.3s; }
.is-loaded .bp-l-bits--l { opacity: 1; transform: none; transition: opacity 0.5s ease 1.6s, transform 1.4s var(--ease-out) 1.6s; }
.is-loaded .bp-l-bits--r { opacity: 1; transform: none; transition: opacity 0.5s ease 1.75s, transform 1.4s var(--ease-out) 1.75s; }
.is-loaded .bp-node { opacity: 1; transition: opacity 0.4s ease calc(2.2s + var(--o) * 0.1s); }
.is-loaded .bp-leader { stroke-dashoffset: 0; transition: stroke-dashoffset 0.7s var(--ease-out) calc(2.25s + var(--o) * 0.1s), stroke 0.35s; }
.is-loaded .bp-label { opacity: 1; transition: opacity 0.6s ease calc(2.6s + var(--o) * 0.1s); }

/* cards in a set arrive one after another */
.js .principles [data-reveal],
.js .problem-grid [data-reveal],
.js .example-grid [data-reveal] { transition-delay: calc(var(--i, 0) * 110ms); }

/* the build list, item by item */
.js .build-list .build-item { opacity: 0; transform: translateY(14px); }
.js .build-list.is-in .build-item {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.js .build-list.is-in .build-item:nth-child(2) { transition-delay: 0.14s; }
.js .build-list.is-in .build-item:nth-child(3) { transition-delay: 0.28s; }

/* the example dashboard's bars rise when it comes into view or a tab is opened */
.js .dash-day i { transform: scaleY(0); }
.js .is-in .dash-day i { transform: none; transition: transform 0.9s var(--ease-out); }
.js .is-in .dash-day:nth-child(2) i { transition-delay: 0.05s; }
.js .is-in .dash-day:nth-child(3) i { transition-delay: 0.1s; }
.js .is-in .dash-day:nth-child(4) i { transition-delay: 0.15s; }
.js .is-in .dash-day:nth-child(5) i { transition-delay: 0.2s; }
.js .is-in .dash-day:nth-child(6) i { transition-delay: 0.25s; }
.js .is-in .dash-day:nth-child(7) i { transition-delay: 0.3s; }

/* the journey's caption waits for the order to arrive */
.js .journey-sticky { --done: 0; }

/* touch screens: the guide circles fade in as one layer instead of being drawn stroke by stroke */
@media (pointer: coarse) {
  .js .bp-circle { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .bp-l-guides .bp-axis { opacity: 0.4; transition: none; }
  .js .bp-l-guides { opacity: 0; }
  .is-loaded .bp-l-guides { opacity: 1; transition: opacity 0.9s ease 0.3s; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .js [data-intro],
  .js [data-reveal],
  .js .site-header,
  .js .service-copy .point,
  .js .build-list .build-item,
  .js .steps .step,
  .js .bp-l-bits,
  .js .bp-l-face,
  .js .bp-l-shadow,
  .js .bp-l-guides,
  .js .bp-node { opacity: 1; transform: none; }
  .js .bp-label { opacity: 1; }
  .js .bp-axis { opacity: 0.4; }
  .js .bp-circle,
  .js .bp-leader { stroke-dashoffset: 0; }
  .js .scene--erp .se-bars i,
  .js .scene--erp .se-bars i:not(.se-bar-live),
  .js .dash-day i,
  .js .steps::after { transform: none; }
  .js .journey-sticky { position: static; --done: 1; }
  .js .journey-spacer { display: none; }
  /* scenes hold on their most telling frame */
  .sw-toast, .sa-push, .se-toast, .wa-toast, .wa-list .wa-new { opacity: 1; transform: none; }
  .sa-badge { transform: none; }
  .sw-cursor { left: 20.5%; top: 73%; }
  .sw-ripple, .sa-tap, .jw-ripple, .fl-packet { display: none; }
  .fl-out { border-color: rgba(197, 160, 89, 0.6); }
}

/* service numbers always read left to right, even inside Sorani text ("02 · 03 · 04", not "04 · 03 · 02") */
.label-n, .menu-num, .footer-col b, .svc-n, .bp-n, .jstep-seal, .pointer-n, .other-n { direction: ltr; unicode-bidi: isolate; }

/* ---------- Sorani Kurdish ---------- */
/* Arabic script must never be letter-spaced (it breaks the joins), has no capitals,
   reads smaller than Latin at the same size, and needs taller lines. */

html[lang="ckb"] body { font-size: 1.125rem; line-height: 1.9; }

html[lang="ckb"] .label,
html[lang="ckb"] .brand-sub,
html[lang="ckb"] .strip-group-label,
html[lang="ckb"] .cv-where,
html[lang="ckb"] .cstep-tag,
html[lang="ckb"] .compare-stats dt,
html[lang="ckb"] .cycle-tag,
html[lang="ckb"] .cycle-note,
html[lang="ckb"] .plan-day,
html[lang="ckb"] .se-kpi span,
html[lang="ckb"] .se-chart-label {
  letter-spacing: 0;
  text-transform: none;
}
html[lang="ckb"] .label { font-size: 0.88rem; }
html[lang="ckb"] .brand-sub { font-size: 0.72rem; }
html[lang="ckb"] .strip-group-label { font-size: 0.85rem; }
html[lang="ckb"] .cv-where { font-size: 0.88rem; }
html[lang="ckb"] .cstep-tag { font-size: 0.75rem; }
html[lang="ckb"] .compare-stats dt { font-size: 0.75rem; }
html[lang="ckb"] .cycle-tag { font-size: 0.8rem; }
html[lang="ckb"] .cycle-note { font-size: 0.92rem; }
html[lang="ckb"] .plan-day { width: 88px; font-size: 0.82rem; }
@media (max-width: 899px) {
  html[lang="ckb"] .cv-name { font-size: 1.08rem; line-height: 1.5; }
  html[lang="ckb"] .cv-where { font-size: 0.85rem; }
}
html[lang="ckb"] .se-kpi span,
html[lang="ckb"] .se-chart-label { font-size: 10px; }

html[lang="ckb"] .hero-title {
  font-size: clamp(2.1rem, 3.9vw, 3.5rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
}
html[lang="ckb"] .h2 {
  font-size: clamp(1.95rem, 3.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
}
html[lang="ckb"] .h2--sm { font-size: clamp(1.6rem, 2.5vw, 2.2rem); }
html[lang="ckb"] .h3,
html[lang="ckb"] .point-title,
html[lang="ckb"] .plan-title,
html[lang="ckb"] .cv-name,
html[lang="ckb"] .cv-caption,
html[lang="ckb"] .cycle-text,
html[lang="ckb"] .form-title,
html[lang="ckb"] .strip-name,
html[lang="ckb"] .channel-value,
html[lang="ckb"] .menu-links a {
  letter-spacing: 0;
  line-height: 1.55;
}
html[lang="ckb"] .point-title { font-size: 1.12rem; }
html[lang="ckb"] .section-intro,
html[lang="ckb"] .hero-lead { font-size: clamp(1.1rem, 1.35vw, 1.25rem); line-height: 1.85; }
html[lang="ckb"] .point p,
html[lang="ckb"] .site-nav a,
html[lang="ckb"] .btn,
html[lang="ckb"] .dev-link,
html[lang="ckb"] .belt-list li,
html[lang="ckb"] .field label,
html[lang="ckb"] .field legend,
html[lang="ckb"] .choice span,
html[lang="ckb"] .compare-switch button,
html[lang="ckb"] .cstep-text,
html[lang="ckb"] .plan-table { font-size: 1rem; }
html[lang="ckb"] .hero-trust,
html[lang="ckb"] .badge,
html[lang="ckb"] .card-save,
html[lang="ckb"] .field-hint,
html[lang="ckb"] .plan-where,
html[lang="ckb"] .status,
html[lang="ckb"] .plan-foot,
html[lang="ckb"] .visual-caption,
html[lang="ckb"] .note,
html[lang="ckb"] .footer-line,
html[lang="ckb"] .footer-base { font-size: 0.95rem; }


/* Mirvari Dev's own pieces, under the same Sorani rules */
html[lang="ckb"] .tag,
html[lang="ckb"] .emblem-sub,
html[lang="ckb"] .jstep-name,
html[lang="ckb"] .dash-kpi > span,
html[lang="ckb"] .dash-table th,
html[lang="ckb"] .fl-mid-name,
html[lang="ckb"] .je-kpi > span {
  letter-spacing: 0;
  text-transform: none;
}
html[lang="ckb"] .tag { font-size: 0.8rem; }
html[lang="ckb"] .emblem-sub { font-size: 0.85rem; }
html[lang="ckb"] .jstep-name { font-size: 0.88rem; }
html[lang="ckb"] .dash-kpi > span,
html[lang="ckb"] .dash-table th { font-size: 0.85rem; }
html[lang="ckb"] .je-kpi > span,
html[lang="ckb"] .fl-mid-name { font-size: 10px; }
html[lang="ckb"] .svc-card .h3,
html[lang="ckb"] .build-item .h3,
html[lang="ckb"] .faq-item summary,
html[lang="ckb"] .journey-caption,
html[lang="ckb"] .other-name,
html[lang="ckb"] .jstep-text { letter-spacing: 0; line-height: 1.6; }
html[lang="ckb"] .svc-text,
html[lang="ckb"] .svc-points li,
html[lang="ckb"] .principle p,
html[lang="ckb"] .problem p,
html[lang="ckb"] .example p,
html[lang="ckb"] .other-line,
html[lang="ckb"] .tabs [role="tab"],
html[lang="ckb"] .pointer-text { font-size: 1rem; }
html[lang="ckb"] .demo-caption,
html[lang="ckb"] .journey-note,
html[lang="ckb"] .crumb { font-size: 0.95rem; }
html[lang="ckb"] .se-kpi b span { font-size: inherit; }
html[lang="ckb"] .bp-name { font-size: 1.04rem; line-height: 1.5; }
html[lang="ckb"] .bp-where,
html[lang="ckb"] .bp-caption { font-size: 0.92rem; }
html[lang="ckb"] .cta-card .h2--sm { font-size: clamp(1.95rem, 3.6vw, 3.1rem); }
@media (max-width: 640px) {
  html[lang="ckb"] .bp-labels .bp-where { font-size: 0.8rem; white-space: nowrap; }
}