/* ==========================================
   Omnichannel Commerce Platform — v3
   Enterprise direction: ink-led neutrals, one blue accent,
   hairline structure, small radii. RTL, dark mode, no deps.
   ========================================== */

@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap");

/* ---------- Tokens ---------- */
:root {
  --ink: #14161a;
  --ink-soft: #41464f;
  --ink-muted: #6a707b;
  --paper: #fbfbfc;
  --surface: #ffffff;
  --line: #e6e8ec;
  --line-strong: #d2d6dd;
  --accent: #0f62fe;          /* fills only: focus, featured, live accents */
  --accent-hover: #0043ce;
  --accent-soft: #edf3ff;
  --accent-text: #0043ce;     /* 9.4:1 on paper */
  --ok: #047857;
  --ok-text: #047857;
  --btn-hover: #2b3038;
  --radius: 10px;
  --radius-sm: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutQuint — the SaaS-motion curve */
  --max: 1160px;
  --nav-h: 68px;

  --shadow-sm: 0 1px 2px rgb(20 22 26 / 0.05);
  --shadow-md: 0 4px 12px rgb(20 22 26 / 0.08);
  --shadow-lg: 0 24px 48px -16px rgb(20 22 26 / 0.16);

  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem; --s12: 3rem; --s16: 4rem; --s20: 5rem;

  --hover-fill: rgb(20 22 26 / 0.05);
}

/* Dark theme — neutral charcoal, not blue-slate */
:root { color-scheme: light; }
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b0c0f;
  --surface: #131418;
  --ink: #f1f2f4;
  --ink-soft: #c3c6cc;
  --ink-muted: #8d929b;
  --line: #23252b;
  --line-strong: #35383f;
  --accent: #4d8dff;
  --accent-hover: #7aa7ff;
  --accent-soft: #16233f;
  --accent-text: #7aa7ff;
  --ok-text: #34d399;
  --btn-hover: #d9dce1;
  --hover-fill: rgb(255 255 255 / 0.07);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 24px 48px -16px rgb(0 0 0 / 0.6);
}
[data-theme="dark"] .quote-sec { background: var(--surface); color: var(--ink); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Full-page snap: one scroll gesture lands exactly on the next part.
     scroll-padding keeps snapped tops clear of the sticky header. */
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--nav-h);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: "Vazirmatn", "Segoe UI", Tahoma, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
/* no negative letter-spacing: it breaks Persian glyph joining */
h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 700; text-wrap: balance; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: max(var(--s6), env(safe-area-inset-left)) max(var(--s6), env(safe-area-inset-right));
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute;
  inset-inline-start: var(--s4);
  top: -100%;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s2) var(--s4);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus { top: var(--s2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.65rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
              transform 0.2s var(--ease), box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--btn-hover); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--hover-fill); border-color: var(--ink-muted); }
.btn-lg { padding: 0.8rem 1.5rem; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  gap: var(--s6);
}
header.is-scrolled { box-shadow: var(--shadow-sm); }
.logo {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 700;
  font-size: 1.0625rem;
}
.logo-mark {
  width: 30px; height: 30px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.9375rem;
}
.nav-links {
  display: flex;
  gap: var(--s8);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.15s ease;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -6px;
  inset-inline: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
/* Injected mobile-only Sign in entry (main.js) — hidden on desktop */
.nav-signin-item { display: none; }
.nav-cta { display: flex; align-items: center; gap: var(--s3); }

/* Theme toggle */
.theme-toggle {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--line-strong); color: var(--ink); background: var(--hover-fill); }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  place-items: center;
}
.nav-toggle svg { width: 20px; height: 20px; }

/* ---------- Hero ---------- */
/* Full-viewport hero: content centered in ~100vh, and a snap panel — one
   scroll gesture jumps the page to the next part (scroll-snap on html). */
.hero {
  padding-block: var(--s20) var(--s16);
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* faint infrastructure grid, faded out toward the edges */
.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, var(--line) 1px, transparent 1px),
    linear-gradient(to left, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 85% at 50% 0%, #000 20%, transparent 75%);
  opacity: 0.7;
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s16);
  align-items: center;
}
/* Accent glow behind the hero frame */
.hero-grid::after {
  content: "";
  position: absolute;
  inset-inline-end: -8%;
  top: 10%;
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 65%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
  animation: glow-drift 9s ease-in-out infinite alternate;
}
@keyframes glow-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-4%, 6%) scale(1.08); }
}
/* Staggered hero entrance */
.hero .eyebrow, .hero h1, .hero .lede, .hero .hero-actions, .hero .hero-note, .page-hero .eyebrow, .page-hero h1, .page-hero .lede, .page-hero .hero-actions {
  animation: rise-in 0.7s var(--ease) both;
}
.hero .eyebrow, .page-hero .eyebrow { animation-delay: 0.05s; }
.hero h1, .page-hero h1 { animation-delay: 0.12s; }
.hero .lede, .page-hero .lede { animation-delay: 0.22s; }
.hero .hero-actions, .page-hero .hero-actions { animation-delay: 0.32s; }
.hero .hero-note { animation-delay: 0.4s; }
.hero .product-frame { animation: frame-in 0.9s var(--ease) 0.25s backwards; }
@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes frame-in { from { opacity: 0; transform: translateY(32px) scale(0.97); } to { opacity: 1; transform: none; } }

/* Scroll zoom hero — main.js drives --hero-p (0→1 over 600px of scroll).
   The ENTIRE hero (content, grid, glow) scales up, blurs and fades on both
   the home .hero and every inner .page-hero. */
.hero > .wrap,
.page-hero > .wrap {
  scale: calc(1 + var(--hero-p, 0) * 0.45);
  filter: blur(calc(var(--hero-p, 0) * 18px));
  opacity: calc(1 - var(--hero-p, 0));
  will-change: scale, filter, opacity;
}
.hero::before,
.page-hero::before {
  scale: calc(1 + var(--hero-p, 0) * 0.6);
  opacity: calc(0.7 * (1 - var(--hero-p, 0)));
}
.hero-grid::after,
.page-hero::after {
  scale: calc(1 + var(--hero-p, 0) * 0.3);
  opacity: calc(1 - var(--hero-p, 0));
}

/* Full-page snap panels — every top-level part is viewport-sized and a snap
   target, so one scroll gesture lands exactly on the next part. Tall sections
   (blog, prose, forms) grow past the viewport and stay freely scrollable
   inside their own snap area. Scoped to #main: the dashboard (#dash-main)
   has no snap and keeps its own layout. */
#main > section,
#main > .strip {
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  align-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Footer: snap to its end so the document bottom is always a snap position */
.site { scroll-snap-align: end; }

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent-text);
  margin-bottom: var(--s3);
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.eyebrow::before {
  content: "";
  width: 20px; height: 2px;
  background: var(--accent);
  border-radius: 1px;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.2; }
.lede {
  font-size: 1.125rem;
  color: var(--ink-soft);
  margin-top: var(--s4);
  max-width: 52ch;
  line-height: 1.8;
}
.hero-actions {
  display: flex;
  gap: var(--s3);
  margin-top: var(--s8);
  flex-wrap: wrap;
}
.hero-note {
  margin-top: var(--s6);
  font-size: 0.875rem;
  color: var(--ink-muted);
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
}
.hero-note span { display: flex; align-items: center; gap: var(--s1); }
.hero-note svg { width: 16px; height: 16px; color: var(--ok); }

/* Product frame — window chrome, not a floating card */
.product-frame {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--s6);
  border: 1px solid var(--line);
  position: relative;
}
.product-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--s6);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--line-strong);
}
.product-bar span:last-child { font-weight: 600; font-size: 0.875rem; }
.feed-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s4);
}
.feed-head h3 { font-size: 0.875rem; font-weight: 600; }
.sync-live {
  font-size: 0.75rem;
  color: var(--ok-text);
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-weight: 500;
}
.sync-icon { width: 14px; height: 14px; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.feed li {
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s3);
  border: 1px solid var(--line);
  transition: border-color 0.15s ease;
}
.feed li:hover { border-color: var(--line-strong); }
.channel-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.order-id { font-weight: 600; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.dest { color: var(--ink-muted); font-size: 0.8125rem; }
.status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok-text);
}

/* ---------- Sections ---------- */
.graph-wrap { max-width: 880px; margin-inline: auto; }
/* Channels: copy on the start side (right in RTL), graph opposite — wider.
   Section wrap widened past 1160 so the graph column exceeds the old 880px. */
#channels .wrap { max-width: 1520px; }
#channels .channels-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.6fr) 3fr;
  gap: var(--s12);
  align-items: center;
}
#channels .channels-copy { text-align: start; margin: 0; max-width: none; }
#channels .graph-wrap { max-width: none; width: 100%; }
section { padding-block: var(--s16); }
.section-head {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--s12);
}
.section-head h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
.section-head p { color: var(--ink-soft); margin-top: var(--s3); font-size: 1.0625rem; }

/* Inner-page hero — same full-viewport snap-panel shell as home */
.page-hero {
  padding-block: var(--s20) var(--s16);
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Accent glow — centered behind inner-page heroes (home's lives on .hero-grid) */
.page-hero::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 15%;
  width: min(55%, 560px);
  aspect-ratio: 1;
  margin-inline-end: -6%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
  animation: glow-drift 9s ease-in-out infinite alternate;
}
.page-hero .wrap { position: relative; }
.page-hero .eyebrow { justify-content: center; }
.page-hero h1 { max-width: 760px; margin-inline: auto; }
.page-hero .lede { margin-inline: auto; }
.page-hero .hero-actions { justify-content: center; }

/* Features grid */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
}
.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s6) var(--s6) var(--s8);
  transition: translate 0.25s var(--ease), box-shadow 0.25s ease, border-color 0.15s ease;
}
.feature:hover {
  border-color: var(--line-strong);
  translate: 0 -4px;
  box-shadow: var(--shadow-md);
}
.icon {
  width: 40px; height: 40px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  margin-bottom: var(--s4);
  color: var(--accent-text);
}
.icon svg { width: 20px; height: 20px; }
.feature h3 { font-size: 1.0625rem; margin-bottom: var(--s2); }
.feature p { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.7; }
.feature .chips { margin-top: var(--s4); }

/* Chips (integration tags, blog tags) */
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0;
  padding: 0;
}
.chips li {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-text);
}

/* How it works */
.flow { display: block; width: 100%; height: auto; margin-bottom: var(--s8); }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s6) var(--s6) var(--s8); /* same recipe as .feature */
  transition: translate 0.25s var(--ease), box-shadow 0.25s ease, border-color 0.15s ease;
}
.step:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
/* Step number — same ink chip as the logo mark / primary button */
.step-num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
  background: var(--ink);
  margin-bottom: var(--s6);
}
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--s8) + 20px); /* badge center */
  inset-inline-end: calc(var(--s6) * -1 - var(--s6) / 2); /* into the column gap */
  width: var(--s6);
  height: 1px;
  background: var(--line-strong);
}
.step h3 { font-size: 1.125rem; margin-bottom: var(--s3); }
.step p { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.8; }

/* Stats — metric row with hairline dividers */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--s8);
  border-block: 1px solid var(--line);
}
.stat { text-align: center; padding: var(--s8) var(--s6); }
.stat + .stat { border-inline-start: 1px solid var(--line); }
.stat .num {
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.stat .label { font-size: 0.875rem; color: var(--ink-muted); margin-top: var(--s2); }

/* Quote */
.quote-sec { background: var(--surface); border-block: 1px solid var(--line); }
.quote-sec blockquote {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.9;
  font-weight: 500;
}
.quote-sec footer {
  margin-top: var(--s6);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}
.quote-sec footer strong { color: var(--ink); }

/* Pricing */
.billing-toggle {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 0 auto var(--s8);
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.seg-btn {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-active { background: var(--ink); color: var(--paper); }
.seg-btn .save {
  font-size: 0.6875rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  color: var(--ok-text);
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
}
.seg-btn.is-active .save { background: rgb(255 255 255 / 0.18); color: var(--paper); }

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
  align-items: start;
}
.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s6) var(--s6) var(--s8);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  transition: translate 0.25s var(--ease), box-shadow 0.25s ease, border-color 0.15s ease;
}
.plan:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-md);
}
.plan .desc { color: var(--ink-soft); font-size: 0.9375rem; }
.plan .price { font-size: 2.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: 0.9375rem; font-weight: 500; color: var(--ink-muted); }
.plan .price-note { font-size: 0.8125rem; color: var(--ink-muted); }
.plan ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex: 1;
}
.plan ul li { display: flex; gap: var(--s2); }
.plan ul li::before { content: "✓"; color: var(--ok-text); font-weight: 700; }
.plan .btn { margin-top: var(--s3); }
.plan--featured { border-color: var(--accent); box-shadow: var(--shadow-md); }
.plan-tag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.7rem;
  border-radius: 6px;
  white-space: nowrap;
}
.plan-note {
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.875rem;
  margin-top: var(--s6);
}

/* FAQ */
.faq {
  max-width: 720px;
  margin-inline: auto;
  display: grid;
  gap: var(--s3);
}
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s4) var(--s6);
}
.faq summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.25rem;
  color: var(--accent-text);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p {
  margin-top: var(--s3);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.8;
}

/* CTA band — inverted closing block */
.cta-band {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s20);
  text-align: center;
}
.cta-band .eyebrow { justify-content: center; color: color-mix(in srgb, var(--paper) 65%, transparent); }
.cta-band .eyebrow::before { background: color-mix(in srgb, var(--paper) 45%, transparent); }
.cta-band h2 { margin-top: var(--s3); font-size: clamp(1.5rem, 3vw, 2.25rem); }
.cta-band p {
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  margin-top: var(--s3);
  max-width: 520px;
  margin-inline: auto;
}
.cta-band .hero-actions { justify-content: center; margin-top: var(--s8); }
.cta-band .btn-primary { background: var(--paper); color: var(--ink); }
.cta-band .btn-primary:hover { background: color-mix(in srgb, var(--paper) 88%, var(--ink)); }
.cta-band .btn-ghost { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 35%, transparent); }
.cta-band .btn-ghost:hover { background: rgb(255 255 255 / 0.1); border-color: color-mix(in srgb, var(--paper) 60%, transparent); }
[data-theme="dark"] .cta-band .btn-ghost:hover { background: rgb(0 0 0 / 0.25); }

/* ---------- Footer ---------- */
.site { border-top: 1px solid var(--line); padding-block: var(--s12); margin-top: 0; }
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s10);
}
.foot-about p { color: var(--ink-muted); font-size: 0.9375rem; margin-top: var(--s3); max-width: 320px; }
.foot-grid h3 { font-size: 0.8125rem; font-weight: 700; color: var(--ink-muted); margin-bottom: var(--s4); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.foot-grid a { font-size: 0.9375rem; color: var(--ink-soft); transition: color 0.15s ease; }
.foot-grid a:hover { color: var(--accent-text); }
.foot-bottom {
  margin-top: var(--s10);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

/* ---------- Page-specific ----------
   Prose pages (privacy, terms, security) */
.prose { max-width: 68ch; }
.prose h2 { font-size: 1.25rem; margin-top: var(--s8); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: var(--s3); font-size: 0.95rem; color: var(--ink-soft); }
.prose ul { margin: var(--s3) 0 0; padding-inline-start: 1.25rem; font-size: 0.95rem; color: var(--ink-soft); }
.prose li { margin-top: var(--s1); }
.prose .muted { display: block; margin-top: var(--s8); font-size: 0.8125rem; }

/* Job list (careers) */
.jobs { list-style: none; margin: 0; padding: 0; }
.jobs li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-top: 1px solid var(--line);
}
.jobs li:last-child { border-bottom: 1px solid var(--line); }
.job-title { font-weight: 600; }
.job-meta { font-size: 0.875rem; color: var(--ink-muted); margin-top: var(--s1); }

/* Blog cards */
.post-meta { font-size: 0.8125rem; color: var(--ink-muted); margin-bottom: var(--s2); font-weight: 500; }

/* Channel graph */
.chan-graph { display: block; width: 100%; height: auto; direction: ltr; }
.chan-graph .edge { fill: none; stroke: var(--ink); stroke-opacity: 0.25; stroke-width: 2; stroke-dasharray: 6 8; animation: dash-move 1.6s linear infinite; }
.chan-graph .packet { fill: var(--accent); }
.chan-graph .hub { fill: var(--ink); }
.chan-graph .hub-text { fill: var(--paper); font-size: 17px; font-weight: 700; letter-spacing: normal; }
.chan-graph .hub-ring { fill: none; stroke: var(--accent); stroke-width: 2; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 0; } 50% { opacity: 0.5; } }
@keyframes dash-move { to { stroke-dashoffset: -14; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.chan-graph .node { animation: float 6s ease-in-out infinite; }
.chan-graph .node-box { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.chan-graph .node-text { fill: var(--ink); font-size: 14px; font-weight: 600; }
.chan-graph .cust-box { fill: color-mix(in srgb, var(--accent) 12%, var(--surface)); stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.5; }
.chan-graph .cust-text { fill: var(--accent-text); font-size: 15px; font-weight: 700; letter-spacing: normal; }

/* ---------- Animations ---------- */
/* Single transition source for all reveal targets (cards also hover-lift via
   the independent `translate` property, so the two never fight):
   staggered fade/slide in, instant hover feedback (0s on the last three). */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
              translate 0.25s var(--ease), box-shadow 0.25s ease, border-color 0.15s ease;
  transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s, 0s, 0s;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Logo marquee keyframes — track built in main.js. The track has its own
   direction:ltr, so the honored negative inline-start margin pins its left
   edge to the viewport; it slides left by exactly one unit (50% of track +
   half the gap) and unit2 lands where unit1 was — seamless. */
@keyframes marquee { to { transform: translateX(calc(-50% - var(--s4))); } }

/* ---------- Dashboard specific ---------- */
.dash-layout { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - var(--nav-h)); }
.dash-sidebar { background: var(--surface); border-inline-end: 1px solid var(--line); padding: var(--s6); }
.dash-main { padding: var(--s8); }
.dash-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
.dash-nav a {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--radius-sm);
  font-size: 0.9375rem; font-weight: 500; color: var(--ink-soft);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dash-nav a:hover { background: var(--hover-fill); color: var(--ink); }
.dash-nav a.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.dash-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s6); box-shadow: var(--shadow-sm); }
.dash-card h3 { font-size: 0.875rem; font-weight: 600; color: var(--ink-muted); margin-bottom: var(--s2); }
.dash-card .big { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Sign-in ---------- */
.login-view { min-height: 100vh; display: grid; place-items: center; padding: var(--s6); background: var(--paper); }
.field { margin-bottom: var(--s4); }
.field label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: var(--s1); color: var(--ink-soft); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  font-size: 0.9375rem;
  font-family: inherit;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); }

/* ---------- Forms (contact, sign-in, dashboard login) ---------- */
.split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s8);
  align-items: start;
}
.wrap:not(.split) > .form-card { max-width: 440px; margin-inline: auto; }
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s8);
  box-shadow: var(--shadow-sm);
}
.form-card h1, .form-card h2 { font-size: 1.375rem; }
.form-card > p { color: var(--ink-soft); font-size: 0.9375rem; margin-top: var(--s2); }
.form-card form { margin-top: var(--s6); }
.form-success {
  background: color-mix(in srgb, var(--ok) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  border-radius: var(--radius-sm);
  padding: var(--s4) var(--s6);
  text-align: center;
}
.form-success strong { display: block; color: var(--ok-text); }
.form-success p { font-size: 0.875rem; color: var(--ink-soft); margin-top: var(--s1); }
.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
  font-size: 0.875rem;
}
.form-row a { color: var(--accent-text); font-weight: 600; }
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--ink-soft);
  cursor: pointer;
}
.checkbox input { width: auto; }
.form-actions { margin-top: var(--s2); }
.form-foot {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.form-foot a { color: var(--accent-text); font-weight: 600; }
.aside-blocks { display: grid; gap: var(--s4); }
.aside-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s4) var(--s6);
}
.aside-block strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-muted);
  margin-bottom: var(--s1);
}
.aside-block p { font-size: 0.9375rem; color: var(--ink-soft); }
.aside-block a { color: var(--accent-text); }

/* ---------- Misc ---------- */
/* Cursor follower — injected by main.js, fine pointers only */
.cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: transparent;
  mix-blend-mode: difference; /* white ring inverts against any background — always visible, never muddy */
  pointer-events: none;
  z-index: 200; /* above the sticky header (50) but never intercepts input */
  opacity: 0;
  transition: opacity 0.4s ease, width 0.3s var(--ease), height 0.3s var(--ease);
}
.cursor-follower.is-visible { opacity: 1; }
.cursor-follower.is-active {
  width: 64px;
  height: 64px;
}

.muted { color: var(--ink-muted); }
/* Logo strip — infinite marquee (track duplicated in main.js), pauses on hover.
   direction:ltr keeps the loop math simple inside the RTL page. Start margin
   bleeds to the viewport edge, end margin auto keeps the box from being
   over-constrained (so the left edge anchors deterministically); the track
   then slides left by exactly one unit (50% + half-gap) and loops seamlessly. */
.strip { border-block: 1px solid var(--line); overflow: hidden; }
/* Fade the track into the page edges */
.strip {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.strip .wrap { display: block; padding-block: var(--s6); }
.strip p {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin-bottom: var(--s8);
  text-wrap: balance;
}
.strip p em { font-style: normal; color: var(--accent-text); }
.strip ul {
  list-style: none;
  display: flex;
  gap: var(--s8); /* must stay s8: the marquee keyframe's -50% - s4 seam math assumes half-gap = s4 */
  align-items: center;
  margin-block: 0;
  margin-left: calc(50% - 50vw);  /* full-bleed: pins the LTR track's left edge to the viewport */
  margin-right: 0;
  padding: 0;
  flex-wrap: nowrap;
  direction: ltr;
  width: max-content;
}
.strip ul.is-marquee { animation: marquee 30s linear infinite; } /* only once main.js has built the loop track */
/* Logo cards instead of bare grey text — this panel is full-screen now */
.strip li {
  font-size: 1.25rem;
  color: var(--ink);
  font-weight: 800;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s4) var(--s8);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

/* ---------- View transitions ---------- */
@view-transition { navigation: auto; }

/* ---------- Small screens ---------- */
@media (max-width: 900px) {
  #channels .channels-grid { grid-template-columns: 1fr; gap: var(--s8); }
  #channels .channels-copy { text-align: center; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: var(--s8); }
  .step:not(:last-child)::after { display: none; } /* rail only makes sense side-by-side */
  .stats { grid-template-columns: repeat(3, 1fr); }
  .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .split { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-toggle { display: grid; }
  .nav-signin-item { display: block; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--nav-h);
    inset-inline: 0;
    background: var(--surface);
    padding: var(--s4);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s10); }
  /* Content stacks past the viewport here; panels keep their min-height so
     snap still lands on section tops, just with taller panels. */
  .hero, .page-hero {
    padding-block: var(--s12) var(--s10);
  }
  .features { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat { padding: var(--s6); }
  .stat + .stat { border-inline-start: 0; border-top: 1px solid var(--line); }
  .dash-layout { grid-template-columns: 1fr; }
  .dash-sidebar { display: none; }
}

@media (max-width: 560px) {
  .hero-actions .btn { flex: 1 1 12rem; justify-content: center; }
  .feed li { grid-template-columns: auto 1fr; row-gap: var(--s1); }
  .feed .status { grid-column: 2; justify-self: start; }
  .strip .wrap { gap: var(--s3) var(--s4); }
  .page-hero h1 { font-size: clamp(1.75rem, 7vw, 2rem); }
  .cta-band { padding-block: var(--s12); }
}

@media (max-width: 380px) {
  .strip .wrap { flex-direction: column; gap: var(--s3); }
  .foot-grid { gap: var(--s6); }
}