/* 3004 website — design tokens. Generated from tokens.json. */
:root {
  --color-bg-canvas: #0D0C0A; /* Page background */
  --color-bg-raised: #13120E; /* Alternate section band, form card, input fill */
  --color-bg-media: #15130F; /* Image and screenshot fill */
  --color-border-hairline: #24211B; /* Section dividers, list rules */
  --color-border-card: #2A261E; /* Cards, chips, stat rules */
  --color-border-control: #4A4436; /* Secondary buttons, step circles */
  --color-border-input: #6A6351; /* Form fields at rest (3.3:1) */
  --color-border-frame: #3A352A; /* Phone-frame outline around screenshots */
  --color-text-primary: #F4F1E8; /* Headings, primary text (17.3:1) */
  --color-text-body: #C9C2B2; /* Paragraphs, leads (11.0:1) */
  --color-text-muted: #B3AC9C; /* Secondary labels (8.7:1) */
  --color-text-subtle: #8C8677; /* Captions, mono indices (5.4:1) */
  --color-accent: #FFDE5F; /* Primary buttons, labels, focus (14.8:1) */
  --color-accent-hover: #FFE98F; /* Primary button and link hover */
  --color-on-accent: #14120D; /* Text on accent fills (14.1:1) */
  --color-error: #FF8A7A; /* Field errors and error summary (8.5:1) */
  --focus-ring: 0 0 0 3px rgba(255, 222, 95, 0.22);

  --font-sans: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-brand: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;

  --type-display-size: 38px; --type-display-lh: 1.08; --type-display-weight: 400; --type-display-tracking: -0.02em;
  --type-page-title-size: 34px; --type-page-title-lh: 1.1; --type-page-title-weight: 400; --type-page-title-tracking: -0.02em;
  --type-h2-size: 28px; --type-h2-lh: 1.15; --type-h2-weight: 400; --type-h2-tracking: -0.015em;
  --type-h3-size: 21px; --type-h3-lh: 1.25; --type-h3-weight: 500; --type-h3-tracking: 0;
  --type-lead-size: 16px; --type-lead-lh: 1.6; --type-lead-weight: 400; --type-lead-tracking: 0;
  --type-body-size: 16px; --type-body-lh: 1.6; --type-body-weight: 400; --type-body-tracking: 0;
  --type-small-size: 14px; --type-small-lh: 1.5; --type-small-weight: 400; --type-small-tracking: 0;
  --type-caption-size: 13px; --type-caption-lh: 1.5; --type-caption-weight: 400; --type-caption-tracking: 0;
  --type-label-size: 12px; --type-label-lh: 1.4; --type-label-weight: 400; --type-label-tracking: 0.14em;
  --type-stat-size: 34px; --type-stat-lh: 1.1; --type-stat-weight: 300; --type-stat-tracking: -0.02em;
  --type-figure-size: 72px; --type-figure-lh: 1.0; --type-figure-weight: 300; --type-figure-tracking: -0.03em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 112px;

  --radius-tag: 4px;
  --radius-control: 12px;
  --radius-card-sm: 14px;
  --radius-card: 18px;
  --radius-media: 20px;
  --radius-media-lg: 24px;
  --radius-frame: 40px;
  --radius-pill: 999px;

  --gutter: 20px; --section-pad: 48px; --stack-gap: 20px; --header-h: 64px;
  --btn-h: 54px; --input-h: 56px; --touch-min: 44px;
}

@media (min-width: 1024px) {
  :root {
    --gutter: 80px; --section-pad: 112px; --header-h: 80px; --btn-h: 56px;
    --type-display-size: 68px; --type-display-lh: 1.04; --type-display-tracking: -0.025em;
    --type-page-title-size: 56px; --type-page-title-lh: 1.05; --type-page-title-tracking: -0.025em;
    --type-h2-size: 44px; --type-h2-lh: 1.1; --type-h2-tracking: -0.02em;
    --type-lead-size: 19px; --type-lead-lh: 1.6; --type-lead-tracking: 0;
    --type-label-size: 13px; --type-label-lh: 1.4; --type-label-tracking: 0.14em;
    --type-stat-size: 40px; --type-stat-lh: 1.1; --type-stat-tracking: -0.02em;
    --type-figure-size: 140px; --type-figure-lh: 0.95; --type-figure-tracking: -0.04em;
  }
}

html { background: var(--color-bg-canvas); color: var(--color-text-primary); font-family: var(--font-sans); }
:lang(ar) { font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif; }

/* The name 3004 — Bebas Neue, underlined, wherever it appears as the name */
.brand-3004 { font-family: var(--font-brand); font-weight: 400; font-size: 1.16em; line-height: 1; letter-spacing: 0.03em;
  text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.14em; }

.label { font-family: var(--font-mono); font-size: var(--type-label-size); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--color-accent); }

.btn { min-height: var(--btn-h); padding-inline: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--radius-pill); font-size: 16px; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.btn--primary { background: var(--color-accent); color: var(--color-on-accent); font-weight: 600; }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--primary:disabled { background: var(--color-border-control); color: var(--color-text-subtle); cursor: not-allowed; }
.btn--secondary { background: transparent; border-color: var(--color-border-control); color: var(--color-text-primary); font-weight: 500; }
.btn--secondary:hover { border-color: var(--color-text-subtle); }
.btn--portal { min-height: 44px; padding-inline: 14px; border-color: var(--color-accent); color: var(--color-accent); font-weight: 500; font-size: 14px; }
.btn--portal:hover { background: rgba(255, 222, 95, 0.08); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (max-width: 1023px) { .btn--block-phone { width: 100%; } }

.card { border: 1px solid var(--color-border-card); border-radius: var(--radius-card); padding: 28px 24px; }
.card:hover { border-color: var(--color-border-control); }
.card--highlight { border-color: var(--color-accent); }

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; }
.field__optional { font-weight: 400; color: var(--color-text-subtle); }
.field__input { min-height: var(--input-h); padding-inline: 16px; background: var(--color-bg-raised); border: 1px solid var(--color-border-input);
  border-radius: var(--radius-control); font: inherit; font-size: 16px; color: var(--color-text-primary); }
.field__input:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--focus-ring); }
.field__input[aria-invalid="true"] { border-color: var(--color-error); }
.field__hint { font-size: 13px; color: var(--color-text-subtle); }
.field__error { font-size: 13px; color: var(--color-error); }

[dir="rtl"] .icon-directional { transform: scaleX(-1); }