/* ==========================================================================
   GitLab CI/CD for Chrome — landing page
   Next-gen control-room universe. Tokens are EXACTLY the product's (dark
   violet-tinted); orange #fc6d26 is the single "signal" accent (CTAs,
   glows, brand moments). No external network dependency.
   ========================================================================== */

:root {
  --bg: #0b0a10;
  --surface: #131119;
  --elev: #1a1722;
  --hairline: #241f2e;
  --text: #eceaf2;
  --muted: #9b93ad;
  --faint: #6e6680;
  --primary: #a589f0;
  --primary-solid: #7759c2;
  --primary-soft: rgba(165, 137, 240, 0.14);
  --orange: #fc6d26;
  --success: #4db380;
  --failed: #f4706a;
  --running: #6aa5f8;
  --warning: #e29c4b;
  --font-sans:
    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI',
    'Yu Gothic', 'PingFang SC', 'Noto Sans CJK SC', 'Microsoft YaHei',
    'Malgun Gothic', 'Noto Sans Arabic', 'Noto Sans Devanagari', sans-serif;
  --font-mono:
    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1180px;
}

/* ---- Reset / base -------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

::selection {
  background: var(--primary-soft);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

.mono {
  font-family: var(--font-mono);
}

/* ---- Fonts (self-hosted, latin subsets; other scripts → system stack) --- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}

/* ---- Shared bits --------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.section {
  padding-block: 96px;
  border-top: 1px solid var(--hairline);
}

.section__marker {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.section__index {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--orange);
}

.section__name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.section__title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 14px;
}

.section__lead {
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 48px;
}

/* Buttons — two weights only. Primary is the single orange signal. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--elev);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 233ms var(--ease-out),
    background 233ms var(--ease-out),
    transform 120ms var(--ease-out);
}

.btn:hover {
  border-color: var(--primary);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--orange);
  border-color: var(--orange);
  color: #16110c;
  font-weight: 600;
  animation: cta-breathe 3.4s ease-in-out infinite;
}

.btn--primary:hover {
  border-color: var(--orange);
  filter: brightness(1.07);
}

.btn--small {
  padding: 7px 14px;
  font-size: 13px;
}

@keyframes cta-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(252, 109, 38, 0);
  }
  50% {
    box-shadow: 0 0 24px 2px rgba(252, 109, 38, 0.35);
  }
}

/* Status LED — same recipe as the product (8px dot, running pulses). */
.led {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.led--success {
  background: var(--success);
}

.led--failed {
  background: var(--failed);
}

.led--running {
  background: var(--running);
  animation: led-pulse 1.5s ease-out infinite;
}

.led--warning {
  background: var(--warning);
}

.led--muted {
  background: var(--faint);
}

@keyframes led-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(106, 165, 248, 0.45);
  }
  70% {
    box-shadow: 0 0 0 5px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* ---- Nav ----------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 10, 16, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}

.nav__brand:hover {
  text-decoration: none;
}

.nav__brand img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.nav__links {
  display: flex;
  gap: 22px;
  margin-inline-start: auto;
}

.nav__links a {
  color: var(--muted);
  font-size: 13.5px;
  transition: color 160ms var(--ease-out);
}

.nav__links a:hover {
  color: var(--text);
  text-decoration: none;
}

.lang-select {
  appearance: none;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6680' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat;
  background-position: right 9px center;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 26px 6px 9px;
  cursor: pointer;
  transition:
    color 160ms var(--ease-out),
    border-color 160ms var(--ease-out);
}

.lang-select:hover,
.lang-select:focus-visible {
  color: var(--text);
  border-color: var(--faint);
  outline: none;
}

.lang-select option {
  background: var(--surface);
  color: var(--text);
}

[dir='rtl'] .lang-select {
  background-position: left 9px center;
  padding: 6px 9px 6px 26px;
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 88px 104px;
}

/* Technical grid overlay — slowly panning, faded at the edges. */
.hero::before {
  content: '';
  position: absolute;
  inset: -60px;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.5;
  animation: grid-pan 38s linear infinite;
  mask-image: radial-gradient(ellipse 90% 80% at 60% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(
    ellipse 90% 80% at 60% 30%,
    #000 30%,
    transparent 75%
  );
  pointer-events: none;
}

@keyframes grid-pan {
  to {
    transform: translate(48px, 48px);
  }
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.hero__eyebrow {
  margin-bottom: 22px;
}

.hero__title {
  font-size: clamp(38px, 5.4vw, 62px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin-bottom: 22px;
}

.hero__title .grad {
  background: linear-gradient(92deg, var(--primary) 10%, var(--orange) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  font-size: 17px;
  color: var(--muted);
  max-width: 480px;
  margin-bottom: 34px;
}

.hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero__note {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--faint);
}

/* ---- Living product mockup (popup replica, 100% code-drawn) -------------- */

.mockup {
  position: relative;
  justify-self: center;
  animation: float-y 7s ease-in-out infinite;
}

@keyframes float-y {
  0%,
  100% {
    transform: translateY(-6px);
  }
  50% {
    transform: translateY(8px);
  }
}

/* Soft violet glow under the floating popup. */
.mockup::after {
  content: '';
  position: absolute;
  inset: auto 8% -34px;
  height: 44px;
  background: radial-gradient(ellipse at center, rgba(119, 89, 194, 0.35), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}

.popup {
  width: 320px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow:
    0 0 0 1px rgba(165, 137, 240, 0.06),
    0 24px 64px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  font-size: 12px;
}

.popup__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--hairline);
}

.popup__logo {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.popup__title {
  font-weight: 600;
  font-size: 12.5px;
}

.popup__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--faint);
  transition: color 233ms var(--ease-out);
}

.popup__live.is-live {
  color: var(--success);
}

.popup__live .led {
  width: 6px;
  height: 6px;
  background: var(--faint);
  transition: background 233ms var(--ease-out);
}

.popup__live.is-live .led {
  background: var(--success);
  animation: live-blink 1.5s ease-in-out infinite;
}

@keyframes live-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.popup__refresh {
  color: var(--faint);
}

.popup__switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 12px 0;
  padding: 6px 8px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--elev);
  color: var(--muted);
}

.popup__switcher-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text);
}

.popup__switcher-account {
  margin-inline-start: auto;
  font-size: 10.5px;
  color: var(--faint);
  white-space: nowrap;
}

.popup__body {
  padding: 10px 12px 12px;
}

.popup__section-title {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 4px 2px 8px;
}

.prow {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: 4px;
  line-height: 1.4;
}

.prow + .prow {
  margin-top: 2px;
}

.prow__iid {
  font-family: var(--font-mono);
  font-weight: 500;
}

.prow__ref {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.prow__time {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--faint);
  white-space: nowrap;
}

/* The incoming pipeline row slides in. */
.prow--incoming {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-block: 0;
  transition:
    max-height 400ms var(--ease-out),
    opacity 400ms var(--ease-out),
    padding 400ms var(--ease-out);
}

.prow--incoming.is-in {
  max-height: 40px;
  opacity: 1;
  padding-block: 5px;
}

.popup__latest {
  margin-top: 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--elev);
  padding: 10px;
}

.popup__latest-head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.popup__status {
  font-size: 12px;
  font-weight: 500;
}

.popup__status--running {
  color: var(--running);
}

.popup__status--success {
  color: var(--success);
}

.popup__latest-iid {
  font-family: var(--font-mono);
  font-weight: 500;
}

.popup__latest-ref {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.popup__latest-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: var(--faint);
  font-size: 11px;
}

.popup__dur {
  font-family: var(--font-mono);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.popup__jobs {
  display: flex;
  gap: 10px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--hairline);
}

.popup__job {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}

.popup__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.popup__cta {
  flex: 1;
  text-align: center;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--primary-solid);
  color: #fff;
  font-weight: 500;
  font-size: 11.5px;
}

.popup__link {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

/* ---- Proof strip ---------------------------------------------------------- */

.proof {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}

.proof__row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-block: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.proof__sep {
  color: var(--faint);
}

.proof__num {
  color: var(--primary);
  font-weight: 500;
}

/* ---- Bento features -------------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.card {
  grid-column: span 2;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 22px;
  transition: border-color 233ms var(--ease-out);
}

.card:hover {
  border-color: rgba(165, 137, 240, 0.45);
}

.card--wide {
  grid-column: span 4;
}

.card__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.card__text {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 16px;
}

.card__visual {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--bg);
  padding: 14px;
  overflow: hidden;
}

/* Live-updates mini timeline (CSS-only cycle). */
.timeline {
  display: flex;
  align-items: center;
  gap: 0;
}

.timeline__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.timeline__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--faint);
  white-space: nowrap;
}

.timeline__edge {
  flex: 1;
  height: 1px;
  min-width: 28px;
  background-image: linear-gradient(90deg, var(--hairline) 55%, transparent 45%);
  background-size: 8px 1px;
  margin-bottom: 18px;
}

/* The active edge crawls toward the running stage (pure CSS). */
.timeline__edge--animated {
  animation: dash-move 1.2s linear infinite;
}

@keyframes dash-move {
  to {
    background-position: 8px 0;
  }
}

/* Watch-this-repo mini banner. */
.watchmini {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-inline-start: 3px solid var(--primary-solid);
  border-radius: 6px;
  background: rgba(119, 89, 194, 0.1);
  font-size: 11.5px;
  color: var(--muted);
}

.watchmini__path {
  font-family: var(--font-mono);
  color: var(--text);
}

.watchmini__cta {
  margin-inline-start: auto;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--primary-solid);
  color: #fff;
  font-weight: 500;
  font-size: 10.5px;
  white-space: nowrap;
}

/* ANSI log excerpt. */
.ansilog {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
  color: var(--muted);
}

.ansilog .ok {
  color: var(--success);
}

.ansilog .err {
  color: var(--failed);
}

.ansilog .info {
  color: var(--running);
}

.ansilog .dim {
  color: var(--faint);
}

/* MR badge chip. */
.mrchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--elev);
  font-size: 11.5px;
}

.mrchip__badge {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
}

.mrchip__ref {
  font-family: var(--font-mono);
  color: var(--muted);
}

/* Multi-instance chips. */
.hostchips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hostchip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
}

.hostchip__count {
  margin-inline-start: auto;
  color: var(--faint);
  font-size: 10.5px;
}

/* Cross-project PRO mini rows. */
.crossmini {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crossmini__row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--muted);
}

.crossmini__time {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--faint);
}

.pro-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--primary-solid);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  vertical-align: 2px;
  margin-inline-start: 6px;
}

/* ---- Setup steps ----------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  counter-reset: step;
}

.step {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 22px;
}

/* Dashed connector between steps (desktop only). */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-end: -14px;
  width: 14px;
  border-top: 1px dashed var(--hairline);
}

.step__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--orange);
  margin-bottom: 12px;
}

.step__title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.step__text {
  font-size: 13px;
  color: var(--muted);
}

.step__text code,
.card__text code,
.faq__a code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--elev);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text);
}

/* ---- Pro table -------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 860px;
  margin-inline: auto;
}

.plan {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 26px;
}

.plan--pro {
  border-color: rgba(165, 137, 240, 0.45);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(119, 89, 194, 0.14), transparent 60%),
    var(--surface);
}

.plan__name {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 14px;
}

.plan__price {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.plan__price small {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
}

.plan__tagline {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
}

.plan__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 24px;
}

.plan__list li {
  display: flex;
  gap: 9px;
  align-items: baseline;
}

.plan__list .tick {
  color: var(--success);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.plan__list .dash {
  color: var(--faint);
  flex-shrink: 0;
}

/* ---- FAQ --------------------------------------------------------------------- */

.faq {
  max-width: 760px;
}

.faq__item {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
}

.faq__item + .faq__item {
  margin-top: 10px;
}

.faq__q {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14.5px;
  list-style: none;
  transition: color 160ms var(--ease-out);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::before {
  content: '+';
  font-family: var(--font-mono);
  color: var(--faint);
  transition: transform 233ms var(--ease-out);
  flex-shrink: 0;
}

.faq__item[open] .faq__q::before {
  transform: rotate(45deg);
}

.faq__q:hover {
  color: var(--primary);
}

.faq__a {
  padding: 0 18px 16px 37px;
  font-size: 13.5px;
  color: var(--muted);
}

/* ---- Final CTA / footer -------------------------------------------------------- */

.final {
  text-align: center;
  padding-block: 110px;
  border-top: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
}

.final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 100%, rgba(119, 89, 194, 0.18), transparent 70%);
  pointer-events: none;
}

.final__title {
  position: relative;
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.final__sub {
  position: relative;
  color: var(--muted);
  margin-bottom: 30px;
}

.footer {
  border-top: 1px solid var(--hairline);
  padding-block: 34px;
}

.footer__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--faint);
}

.footer__links {
  display: flex;
  gap: 16px;
  margin-inline-start: auto;
}

.footer__links a {
  color: var(--muted);
  font-size: 12px;
}

.footer__disclaimer {
  width: 100%;
  margin-top: 10px;
  font-size: 11px;
  color: var(--faint);
}

/* ---- Toast (store placeholder) --------------------------------------------------- */

.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translate(-50%, 12px);
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--elev);
  color: var(--text);
  font-size: 13px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 233ms var(--ease-out),
    transform 233ms var(--ease-out);
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---- Scroll reveals ---------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

[data-reveal][data-revealed] {
  opacity: 1;
  transform: none;
}

/* ---- Responsive ---------------------------------------------------------------------- */

@media (max-width: 980px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .mockup {
    order: 2;
  }

  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .card,
  .card--wide {
    grid-column: span 2;
  }

  .card--half {
    grid-column: span 1;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .step:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .section {
    padding-block: 64px;
  }

  .hero {
    padding-block: 56px 72px;
  }

  .nav__links {
    display: none;
  }

  .plans {
    grid-template-columns: 1fr;
  }

  .bento {
    grid-template-columns: 1fr;
  }

  .card,
  .card--wide,
  .card--half {
    grid-column: span 1;
  }
}

/* ---- Reduced motion --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .prow--incoming {
    max-height: none;
    opacity: 1;
    padding-block: 5px;
  }
}


/* ---- Screenshots gallery -------------------------------------------------- */

.shots {
  margin-top: 48px;
}

.shots__rail {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px max(24px, calc((100vw - var(--maxw)) / 2)) 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}

.shots__rail::-webkit-scrollbar {
  height: 6px;
}

.shots__rail::-webkit-scrollbar-thumb {
  background: var(--hairline);
  border-radius: 3px;
}

.shot-card {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: min(720px, 82vw);
  margin: 0;
}

.shot-card img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.shot-card figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
}

/* ---- RTL (Arabic) ----------------------------------------------------------
   Layout is flex/grid + logical properties almost everywhere, so direction
   flips by itself. Only physical leftovers need a nudge. */

[dir='rtl'] .shots__rail {
  direction: rtl;
}