/* Mirvari Group
   Three colours only: gold #C5A059, charcoal #1A202C, cream #F9F8F3.
   Every other value in this file is a mix or a transparency of those three.
   Roles: cream is the page, charcoal is all type and the rich surfaces (bands, panels, the card),
   gold is the logo, icons, badges, primary buttons and structural lines.
   Gold is too light to be read as small text on cream, so small gold-toned text there uses --brass.
   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 {
  --gold: #C5A059;
  --charcoal: #1A202C;
  --cream: #F9F8F3;

  --gold-lit: #D5BA87;       /* 30% cream into gold */
  --gold-deep: #9A804E;      /* 25% charcoal into gold */
  --brass: #786645;          /* 45% charcoal into gold: gold-toned text on cream, 5.2:1 */
  --panel-2: #272D38;        /* 6% cream into charcoal: windows inside dark panels */
  --panel-3: #303640;        /* 10% cream into charcoal */

  /* the cream page (default) */
  --text: var(--charcoal);
  --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);

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

/* charcoal surfaces: the same components, re-inked for a dark ground */
.on-dark {
  --text: var(--cream);
  --text-soft: rgba(249, 248, 243, 0.76);
  --muted: rgba(249, 248, 243, 0.62);   /* 6.7:1 on charcoal */
  --line: rgba(249, 248, 243, 0.12);
  --line-soft: rgba(249, 248, 243, 0.07);
  --line-strong: rgba(249, 248, 243, 0.24);
  --accent-ink: var(--gold);
  --focus: var(--gold-lit);
  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(--charcoal);
  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; }
}

/* ---------- Bands and panels: the charcoal surfaces ---------- */

/* a full-width charcoal section, edged in gold, with its own light falling from the corner */
.band {
  position: relative;
  isolation: isolate;
  border-block: 1px solid rgba(197, 160, 89, 0.4);
  background: var(--charcoal);
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 100% 0%, rgba(197, 160, 89, 0.16), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(197, 160, 89, 0.07), transparent 70%),
    linear-gradient(to right, rgba(249, 248, 243, 0.03) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(to bottom, rgba(249, 248, 243, 0.03) 1px, transparent 1px) 0 0 / 80px 80px;
}

/* a charcoal card on the cream page: device mock-ups, the content plan, 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.1), transparent 60%),
    var(--charcoal);
  box-shadow: 0 40px 80px -40px rgba(26, 32, 44, 0.6), 0 2px 6px -2px rgba(26, 32, 44, 0.2);
}

/* ---------- 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-dark .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-dark .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-dark .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-dark .btn--ghost { background: rgba(26, 32, 44, 0.55); }
.on-dark .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 charcoal seals on the cream page, and on a gold wash on charcoal */
.feature-icon,
.strip-icon,
.channel-icon {
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(197, 160, 89, 0.45);
  background: var(--charcoal);
  color: var(--gold);
  box-shadow: 0 10px 20px -12px rgba(26, 32, 44, 0.55);
}
.on-dark .feature-icon,
.on-dark .strip-icon,
.on-dark .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; fill: url(#gold-ink); }
.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); }

.site-nav .nav-dev {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(154, 128, 78, 0.6);
  border-radius: 6px;
  background: rgba(197, 160, 89, 0.12);
  color: var(--text);
  transition: background-color 0.3s, border-color 0.3s;
}
.site-nav .nav-dev::after { display: none; }
.site-nav .nav-dev .arrow { width: 14px; height: 14px; color: var(--accent-ink); }
.site-nav .nav-dev:hover { border-color: var(--gold-deep); background: rgba(197, 160, 89, 0.22); }

.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); }

/* A solid sheet rather than a full-screen blur: the blur was invisible under a near-opaque panel and costly on phones. */
.menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cream);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.menu.is-open { opacity: 1; }
/* 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;
}
/* locking the page's scroll removes the scrollbar; keeping its gutter stops the page jumping sideways */
html { scrollbar-gutter: stable; }
.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: 1099px) {
  .site-nav { display: none; }
  .menu-toggle { display: block; }
}
@media (min-width: 1100px) {
  .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-dark .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; }

/* The company card: charcoal stock, gold foil */

.hero-card-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}

.card-scene {
  position: relative;
  width: 100%;
  max-width: 480px;
  perspective: 1400px;
}

.card-shadow {
  position: absolute;
  inset-inline: 10%;
  bottom: -26px;
  height: 40px;
  border-radius: 50%;
  background: rgba(26, 32, 44, 0.42);
  filter: blur(24px);
  transform: translateX(var(--shadow-x, 0px));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1.62;
  padding: 8% 8% 7%;
  overflow: hidden;
  border-radius: 10px;
  background: radial-gradient(120% 130% at 20% 18%, var(--panel-2) 0%, var(--charcoal) 55%);
  box-shadow:
    inset 0 0 0 1px rgba(197, 160, 89, 0.45),
    inset 0 1px 0 rgba(249, 248, 243, 0.14),
    0 50px 90px -45px rgba(26, 32, 44, 0.8),
    0 0 90px -30px rgba(197, 160, 89, 0.35);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(197, 160, 89, 0.2);
  border-radius: 6px;
  pointer-events: none;
}

.card-rays {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 0deg at 26% 46%, rgba(213, 186, 135, 0.08) 0deg 0.8deg, transparent 0.8deg 6deg);
  -webkit-mask-image: radial-gradient(circle at 26% 46%, transparent 16%, #000 30%, transparent 78%);
  mask-image: radial-gradient(circle at 26% 46%, transparent 16%, #000 30%, transparent 78%);
}

.card-main {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 37% 1fr;
  align-items: center;
  gap: 8%;
}

.card-mark {
  width: 100%;
  height: auto;
  fill: url(#gold-leaf);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

.card-word {
  font-size: clamp(0.85rem, 1.3vw, 1.15rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: linear-gradient(118deg, var(--gold-deep) 0%, var(--gold) 20%, #E4D5B5 42%, var(--gold) 60%, var(--gold-lit) 80%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.card-word-ku {
  margin-top: 6px;
  font-family: "Vazirmatn", var(--font);
  font-size: clamp(0.78rem, 1.05vw, 0.95rem);
  font-weight: 700;
  text-align: left;
  color: rgba(213, 186, 135, 0.85);
}
.card-rule {
  display: block;
  width: 36px;
  height: 1px;
  margin-block: 12px;
  background: rgba(197, 160, 89, 0.6);
}
.card-services {
  font-size: clamp(0.52rem, 0.74vw, 0.64rem);
  font-weight: 700;
  line-height: 1.95;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(249, 248, 243, 0.85);
}
.card-contact {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: clamp(0.52rem, 0.74vw, 0.64rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: rgba(213, 186, 135, 0.85);
}
.card-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(249, 248, 243, 0.13) 50%, transparent 62%) var(--sheen-x, 50%) 0 / 250% 100% no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}

.card-save {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(249, 248, 243, 0.7);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.3s;
}
.card-save .ic { width: 16px; height: 16px; color: var(--gold-deep); }
.card-save:hover { border-color: var(--gold-deep); }

/* the four services at a glance */
.strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  margin-top: clamp(56px, 8vw, 96px);
}
.strip-group {
  position: relative;
  grid-column: 2 / 5;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 12px;            /* the group's own rows don't inherit the strip's gap */
  padding-top: 40px;
}
.strip-group::before {
  content: "";
  position: absolute;
  top: 22px;
  inset-inline: 0;
  height: 10px;
  border: 1px solid var(--gold);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.strip-group-label {
  position: absolute;
  top: 0;
  inset-inline: 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}
.strip-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px 12px;
  min-height: 120px;
  padding: 16px;
  text-decoration: none;
  transition: border-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.strip-item:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(26, 32, 44, 0.03), 0 24px 40px -28px rgba(26, 32, 44, 0.45);
}
.strip-icon { width: 38px; height: 38px; border-radius: 9px; }
.strip-n {
  justify-self: end;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent-ink);
}
.strip-name {
  grid-column: 1 / -1;
  align-self: end;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { text-align: center; }
  .hero-lead { margin-inline: auto; }
  .hero-actions, .hero-trust { justify-content: center; }
  .card-scene { max-width: 420px; }
  /* 01 takes a full row, then the three development services sit side by side under their bracket */
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip-group { grid-column: 1 / -1; }
  .strip > .strip-item { grid-column: 1 / -1; min-height: 0; grid-template-columns: auto minmax(0, 1fr) auto; }
  .strip > .strip-item .strip-name { grid-column: 2; grid-row: 1; align-self: center; }
  .strip > .strip-item .strip-n { grid-column: 3; grid-row: 1; }
}
@media (max-width: 560px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-trust { flex-direction: column; align-items: center; }
  /* phones: one service per row, icon, name and number on a line */
  .strip { grid-template-columns: minmax(0, 1fr); }
  .strip-item { min-height: 0; padding: 14px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .strip-item .strip-name { grid-column: 2; grid-row: 1; align-self: center; }
  .strip-item .strip-n { grid-column: 3; grid-row: 1; }
}

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

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

/* ---------- What we do: the four sides of the mark ---------- */

.converge { margin-block: 0; }
.converge-sticky { margin: 0; }

/* The diagram holds still for a short stretch of scrolling while the pieces come together. */
.js .converge-sticky { position: sticky; top: 10vh; }
.js .converge-spacer { height: 70svh; }

.converge-stage {
  position: relative;
  width: min(100%, 1040px, calc((100svh - 230px) * 1.444));
  margin-inline: auto;
}
.converge-canvas { position: relative; aspect-ratio: 2600 / 1800; }

.converge-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197, 160, 89, 0.24), rgba(197, 160, 89, 0.07) 45%, transparent 70%);
  transform: translate(-50%, -50%) scale(calc(0.7 + 0.3 * var(--joined, 1)));
  opacity: var(--joined, 1);
  pointer-events: none;
}

.converge-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: url(#gold-leaf);
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.45));
}

/* Narrow screens: a key of four equal cards under the mark, each with a small copy of the
   emblem lighting up its own side. (Wide screens move these beside the pieces, below.) */
.cv-labels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}
.cv-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(249, 248, 243, 0.06), rgba(249, 248, 243, 0.02));
}
.cv-key { flex: none; width: 44px; height: 42px; max-width: none; }
.cv-key use { fill: rgba(197, 160, 89, 0.22); }
.cv-key use.is-on { fill: var(--gold); }
.cv-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}
.cv-name:hover { color: var(--gold-lit); }
.cv-n {
  align-self: flex-start;   /* keep the number on the reading side in both directions */
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--accent-ink);
}
.cv-where {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--muted);
}

.cv-caption {
  margin-top: clamp(16px, 2.5vw, 30px);
  text-align: center;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--text);
  opacity: var(--joined, 1);
  transform: translateY(calc((1 - var(--joined, 1)) * 12px));
}

/* Wide screens: labels sit beside each piece and travel with it (positioned by site.js). */
@media (min-width: 900px) {
  .js .cv-labels {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    pointer-events: none;
  }
  .js .cv-label {
    position: absolute;
    top: 0;
    left: 0;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    white-space: nowrap;
    will-change: transform;
  }
  .js .cv-name {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    pointer-events: auto;
    font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  }
  .js .cv-n { align-self: auto; }
  /* the short descriptions fade as the pieces join */
  .js .cv-where { opacity: var(--apart, 1); }
  .js .cv-key { display: none; }
  /* align each label towards its piece (flex alignment follows the writing direction, so flip it for RTL) */
  .js .cv-label[data-label="top"],
  .js .cv-label[data-label="bottom"] { align-items: center; text-align: center; }
  .js .cv-label[data-label="left"] { align-items: flex-end; text-align: right; }
  .js .cv-label[data-label="right"] { align-items: flex-start; text-align: left; }
  [dir="rtl"] .js .cv-label[data-label="left"] { align-items: flex-start; }
  [dir="rtl"] .js .cv-label[data-label="right"] { align-items: flex-end; }
}

@media (max-width: 899px) {
  .converge-stage { width: min(100%, 460px); }
  .converge-canvas { aspect-ratio: 1; }
}

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

/* ---------- Development band ---------- */

.dev-band { position: relative; padding-block: clamp(24px, 4vw, 48px); }

.dev-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 4vw, 52px);
  overflow: hidden;
  border-color: rgba(197, 160, 89, 0.5);
  background:
    radial-gradient(70% 140% at 0% 50%, rgba(197, 160, 89, 0.16), transparent 70%),
    var(--charcoal);
  box-shadow: 0 40px 80px -40px rgba(26, 32, 44, 0.65), 0 0 0 4px rgba(197, 160, 89, 0.08);
}
[dir="rtl"] .dev-card {
  background:
    radial-gradient(70% 140% at 100% 50%, rgba(197, 160, 89, 0.16), transparent 70%),
    var(--charcoal);
}
.dev-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 0deg at 9% 50%, rgba(197, 160, 89, 0.08) 0deg 1deg, transparent 1deg 7deg);
  -webkit-mask-image: radial-gradient(circle at 9% 50%, transparent 8%, #000 18%, transparent 55%);
  mask-image: radial-gradient(circle at 9% 50%, transparent 8%, #000 18%, transparent 55%);
  pointer-events: none;
}
[dir="rtl"] .dev-card::before {
  background: repeating-conic-gradient(from 0deg at 91% 50%, rgba(197, 160, 89, 0.08) 0deg 1deg, transparent 1deg 7deg);
  -webkit-mask-image: radial-gradient(circle at 91% 50%, transparent 8%, #000 18%, transparent 55%);
  mask-image: radial-gradient(circle at 91% 50%, transparent 8%, #000 18%, transparent 55%);
}
.dev-card > * { position: relative; }

.dev-lockup { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dev-mark { width: 92px; height: 89px; fill: url(#gold-leaf); filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.4)); }
.dev-word {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text);
}
.dev-copy .h2 { margin-top: 16px; }
.dev-text { max-width: 40rem; margin-top: 14px; color: var(--text-soft); }

@media (max-width: 1023px) {
  .dev-card { grid-template-columns: minmax(0, 1fr); }
  .dev-lockup { flex-direction: row; align-items: center; }
  .dev-mark { width: 56px; height: 54px; }
  .dev-cta { justify-self: start; }
}

/* ---------- Scene stages ---------- */
/* Each scene is drawn at 440 × 300 and scaled to the width of its stage by site.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) *,
.js .social-visual: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(26, 32, 44, 0.95);
  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(26, 32, 44, 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(26, 32, 44, 0.95);
  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(39, 45, 56, 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(--charcoal); }
.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; }

/* ---------- 01 Social media: the client's profile, in an example brand ---------- */

/* phone and plan sit side by side in the flow, the plan overlapping the phone a little,
   so however long the plan's text runs it can never spill into the next section */
.social-visual {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  align-items: start;
}

.ig {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: 272px;
  height: 548px;
  padding: 20px 14px;
  border: 1px solid rgba(197, 160, 89, 0.3);
  border-radius: 36px;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 6px var(--panel-3), 0 40px 80px -40px rgba(26, 32, 44, 0.75);
}
.ig-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 14px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text);
}
.ig-dots { display: flex; gap: 3px; }
.ig-dots i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
.ig-profile { display: flex; align-items: center; gap: 14px; padding: 0 8px; }
.ig-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(var(--gold), var(--gold-lit), var(--gold-deep), var(--gold));
}
.ig-avatar svg {
  width: 100%;
  height: 100%;
  padding: 10px;
  border: 2px solid var(--panel-2);
  border-radius: 50%;
  background: var(--charcoal);
  fill: var(--gold);
}
.ig-stats { display: flex; flex: 1; justify-content: space-around; text-align: center; }
.ig-stats b {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ig-stats span { font-size: 0.66rem; font-weight: 600; color: var(--muted); }
.ig-bio { padding: 14px 8px 16px; }
.ig-bio i { display: block; width: 72%; height: 6px; border-radius: 3px; background: rgba(249, 248, 243, 0.18); }
.ig-bio i + i { width: 46%; margin-top: 7px; }

.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin-inline: -4px;
}
.ig-grid i { position: relative; aspect-ratio: 1; border-radius: 3px; }
/* product shot, quote card and short video: three formats, one look */
.ig-grid .t-a,
.ig-grid .t-new {
  background:
    radial-gradient(circle at 50% 56%, var(--cream) 0 21%, transparent 22%),
    linear-gradient(160deg, var(--gold), var(--gold-deep));
}
.ig-grid .t-b {
  background:
    linear-gradient(var(--charcoal), var(--charcoal)) 20% 38% / 58% 7% no-repeat,
    linear-gradient(var(--charcoal), var(--charcoal)) 20% 54% / 38% 7% no-repeat,
    linear-gradient(var(--gold), var(--gold)) 20% 72% / 14% 4% no-repeat,
    var(--cream);
}
.ig-grid .t-c { background: linear-gradient(140deg, #3C3A35, var(--charcoal)); box-shadow: inset 0 0 0 1px rgba(197, 160, 89, 0.25); }
.ig-grid .t-c::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 26%;
  background: var(--cream);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translate(-40%, -50%);
}
.ig-grid .t-new { animation: tile-ring 3.2s ease-in-out infinite; }

@keyframes tile-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0); }
  50% { box-shadow: 0 0 0 2px var(--gold-lit), 0 0 18px 2px rgba(197, 160, 89, 0.55); }
}

.social-chip {
  position: absolute;
  inset-inline-start: 186px;
  top: -18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid rgba(197, 160, 89, 0.5);
  border-radius: 999px;
  background: rgba(26, 32, 44, 0.96);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cream);
  white-space: nowrap;
  box-shadow: 0 14px 34px -12px rgba(26, 32, 44, 0.7);
}
.social-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }

.plan {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  z-index: 2;
  min-width: 0;
  margin-top: 132px;
  margin-inline-start: -28px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--panel-2), var(--charcoal));
}
.plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
}
.plan-title { font-size: 1.15rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; color: var(--text); }
.plan-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.plan-row > * {
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  text-align: start;
  vertical-align: top;
}
.plan-day {
  width: 64px;
  padding-inline-start: 22px !important;
  padding-top: 15px !important;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.plan-post { display: block; font-weight: 700; line-height: 1.35; color: var(--text); }
.plan-where { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--muted); }
.plan-status {
  padding-inline: 12px 22px !important;
  text-align: end !important;
  white-space: nowrap;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-soft);
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.status--posted::before { background: var(--gold); }
.status--scheduled::before { box-shadow: inset 0 0 0 1.5px var(--gold); }
.status--ready::before { box-shadow: inset 0 0 0 1.5px var(--muted); }
.plan-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background: rgba(197, 160, 89, 0.08);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--gold-lit);
}
.plan-foot .ic { width: 16px; height: 16px; }

.social-visual .visual-caption { grid-column: 1 / -1; margin-top: 18px; }

@media (max-width: 640px) {
  .social-visual { grid-template-columns: minmax(0, 1fr); }
  .ig, .social-chip { display: none; }
  .plan { grid-column: 1; margin: 0; }
}

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

/* ---------- Why one team ---------- */

.cycle-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.cycle-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 196px;
  padding: 22px 20px;
}
.cycle-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 38px;
  inset-inline-end: -21px;
  width: 21px;
  height: 1px;
  background: rgba(197, 160, 89, 0.65);
}
.cycle-n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(197, 160, 89, 0.5);
  border-radius: 50%;
  background: rgba(197, 160, 89, 0.08);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--gold-lit);
}
.cycle-text {
  flex: 1;
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--text);
}
.cycle-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.cycle-tag b { color: var(--accent-ink); font-weight: 800; }

/* the line that carries the last step back to the first */
.cycle-return {
  position: relative;
  display: block;
  height: 46px;
  margin-inline: 10%;
  border: 1px solid rgba(197, 160, 89, 0.55);
  border-top: 0;
  border-radius: 0 0 24px 24px;
}
.cycle-return-head {
  position: absolute;
  top: -1px;
  inset-inline-start: -5px;
  width: 9px;
  height: 9px;
  border-top: 1px solid rgba(197, 160, 89, 0.85);
  border-left: 1px solid rgba(197, 160, 89, 0.85);
  transform: rotate(45deg);
}
.cycle-note {
  margin-top: 18px;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .cycle-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cycle-step::after { display: none; }
  .cycle-step { min-height: 0; }
  .cycle-return { display: none; }
}
@media (max-width: 560px) {
  .cycle-steps { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 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 charcoal 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(--charcoal);
  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 a charcoal 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(--charcoal);
  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(--charcoal);
  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: 50px; fill: url(#gold-leaf); }
.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; }

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

/* Opening: each part of the first screen rises in turn. */
.js [data-intro] { opacity: 0; transform: translateY(22px); }
.js .hero-card-col[data-intro] { transform: translateY(14px) scale(0.96); }
.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 profile fills post by post, the plan line by line */
.js .social-visual .ig-grid i,
.js .social-visual .plan-row,
.js .social-visual .plan-foot,
.js .social-visual .social-chip { opacity: 0; transform: scale(0.85); }
.js .social-visual .plan-row,
.js .social-visual .plan-foot { transform: translateY(8px); }
.js .social-visual .social-chip { transform: translateY(10px); }
.js .social-visual.is-in .ig-grid i,
.js .social-visual.is-in .plan-row,
.js .social-visual.is-in .plan-foot,
.js .social-visual.is-in .social-chip {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.js .social-visual.is-in .ig-grid i:nth-child(9) { transition-delay: 0.3s; }
.js .social-visual.is-in .ig-grid i:nth-child(8) { transition-delay: 0.38s; }
.js .social-visual.is-in .ig-grid i:nth-child(7) { transition-delay: 0.46s; }
.js .social-visual.is-in .ig-grid i:nth-child(6) { transition-delay: 0.54s; }
.js .social-visual.is-in .ig-grid i:nth-child(5) { transition-delay: 0.62s; }
.js .social-visual.is-in .ig-grid i:nth-child(4) { transition-delay: 0.7s; }
.js .social-visual.is-in .ig-grid i:nth-child(3) { transition-delay: 0.78s; }
.js .social-visual.is-in .ig-grid i:nth-child(2) { transition-delay: 0.86s; }
.js .social-visual.is-in .ig-grid i:nth-child(1) { transition-delay: 1.2s; }
.js .social-visual.is-in .plan-row:nth-child(1) { transition-delay: 0.5s; }
.js .social-visual.is-in .plan-row:nth-child(2) { transition-delay: 0.6s; }
.js .social-visual.is-in .plan-row:nth-child(3) { transition-delay: 0.7s; }
.js .social-visual.is-in .plan-row:nth-child(4) { transition-delay: 0.8s; }
.js .social-visual.is-in .plan-foot { transition-delay: 1.05s; }
.js .social-visual.is-in .social-chip { transition-delay: 1.5s; }

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

/* the cycle: each step in turn, then the line back to the start */
.js .cycle-step { opacity: 0; transform: translateY(16px); }
.js .cycle-return { clip-path: inset(0 100% 0 0); }
[dir="rtl"].js .cycle-return { clip-path: inset(0 0 0 100%); }
.js .cycle-return-head,
.js .cycle-note { opacity: 0; }
.js .cycle.is-in .cycle-step {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.js .cycle.is-in .cycle-step:nth-child(2) { transition-delay: 0.15s; }
.js .cycle.is-in .cycle-step:nth-child(3) { transition-delay: 0.3s; }
.js .cycle.is-in .cycle-step:nth-child(4) { transition-delay: 0.45s; }
.js .cycle.is-in .cycle-step:nth-child(5) { transition-delay: 0.6s; }
.js .cycle.is-in .cycle-return { clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--ease-in-out) 1s; }
.js .cycle.is-in .cycle-return-head,
.js .cycle.is-in .cycle-note { opacity: 1; transition: opacity 0.5s ease 2.2s; }

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

@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 .social-visual .ig-grid i,
  .js .social-visual .plan-row,
  .js .social-visual .plan-foot,
  .js .social-visual .social-chip,
  .js .cycle-step,
  .js .cycle-return-head,
  .js .cycle-note,
  .js .steps .step { opacity: 1; transform: none; }
  .js .scene--erp .se-bars i,
  .js .steps::after { transform: none; }
  .js .cycle-return { clip-path: none; }
  .js .converge-sticky { position: static; }
  .js .converge-spacer { display: none; }
  /* scenes hold on their most telling frame */
  .sw-toast, .sa-push, .se-toast { opacity: 1; transform: none; }
  .sa-badge { transform: none; }
  .sw-cursor { left: 20.5%; top: 73%; }
  .sw-ripple, .sa-tap { display: none; }
}

/* service numbers always read left to right, even inside Sorani text ("02 · 03 · 04", not "04 · 03 · 02") */
.label-n, .cv-n, .strip-n, .menu-num, .cycle-tag b, .footer-col b { 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; }