@charset "UTF-8";
/* ==========================================================================
   DCT — Digital Creativity Technology
   dctiq.com

   Shape language: the 45° cut.
   The DCT logotype is built entirely from rectangles with corners sliced at
   45° — the D, the C, the T crossbar, the accent slash. Nothing on this site
   uses a border radius. Panels, buttons, media and section edges are chamfered
   on the top-leading and bottom-trailing corners, which is the same cut the
   letterforms make. The brand blue only ever appears as an edge, a wedge or a
   rule — never as a glow or a rounded pill.
   ========================================================================== */

/* --------------------------------------------------------------- fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* --------------------------------------------------------------- tokens -- */
:root {
  /* Brand constants — from the DCT identity guide. Do not alter. */
  --brand-navy:      #0B1328;
  --brand-navy-2:    #121A2E;
  --brand-blue:      #1677FF;

  /* Functional derivatives, chosen for WCAG contrast (see comments). */
  --blue-on-dark:    #4B9BFF;  /* 6.6:1 on --brand-navy  — blue text on dark  */
  --blue-on-light:   #0B5FD4;  /* 5.4:1 on paper         — blue text on light */
  --cta-bg:          #0B5FD4;  /* 5.9:1 vs white         — filled button      */

  /* Geometry */
  --cut:        18px;   /* the 45° chamfer, everywhere */
  --cut-sm:     10px;
  --rule-w:     1px;
  --shell:      1240px;
  --gutter:     clamp(1.25rem, 4vw, 3rem);

  /* Spacing scale — standard density (dial 4/10) */
  --s-1: 0.5rem;  --s-2: 0.75rem; --s-3: 1rem;   --s-4: 1.5rem;
  --s-5: 2rem;    --s-6: 3rem;    --s-7: 4rem;   --s-8: 6rem;   --s-9: 8rem;

  /* Type */
  --f-display: 'Archivo', 'IBM Plex Sans', system-ui, sans-serif;
  --f-body:    'IBM Plex Sans', system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Motion */
  --t-fast: 140ms;
  --t-mid:  260ms;
  --ease:   cubic-bezier(.22, 1, .36, 1);
}

/* Arabic swaps the whole Latin stack for the brand's Arabic face. */
:root:lang(ar), [dir="rtl"] {
  --f-display: 'IBM Plex Sans Arabic', 'Archivo', system-ui, sans-serif;
  --f-body:    'IBM Plex Sans Arabic', system-ui, sans-serif;
  --f-mono:    'IBM Plex Sans Arabic', ui-monospace, monospace;
}

/* ---------------------------------------------------------- light theme -- */
/* Defined on bare :root so a page always has a complete palette. */
:root {
  --bg:          #F4F6FA;
  --bg-alt:      #E9EEF5;
  --surface:     #FFFFFF;
  --surface-2:   #F7F9FC;
  --text:        #0B1328;
  --text-dim:    #4A5568;
  --text-faint:  #6B7789;
  --rule:        #D9E0EA;
  --rule-strong: #B9C4D4;
  --accent:      var(--brand-blue);
  --accent-text: var(--blue-on-light);
  --on-accent:   #FFFFFF;
  --shadow:      0 1px 2px rgb(11 19 40 / .06), 0 12px 28px -12px rgb(11 19 40 / .18);
  --grid-line:   rgb(11 19 40 / .055);
  color-scheme: light;
}

/* ----------------------------------------------------------- dark theme -- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0B1328;
    --bg-alt:      #08101F;
    --surface:     #121A2E;
    --surface-2:   #172136;
    --text:        #FFFFFF;
    --text-dim:    #9AA8BE;
    --text-faint:  #7C8AA1;
    --rule:        #1E2A45;
    --rule-strong: #2C3B5C;
    --accent:      var(--brand-blue);
    --accent-text: var(--blue-on-dark);
    --on-accent:   #FFFFFF;
    --shadow:      0 1px 2px rgb(0 0 0 / .4), 0 18px 40px -16px rgb(0 0 0 / .65);
    --grid-line:   rgb(255 255 255 / .045);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:          #0B1328;
  --bg-alt:      #08101F;
  --surface:     #121A2E;
  --surface-2:   #172136;
  --text:        #FFFFFF;
  --text-dim:    #9AA8BE;
  --text-faint:  #7C8AA1;
  --rule:        #1E2A45;
  --rule-strong: #2C3B5C;
  --accent:      var(--brand-blue);
  --accent-text: var(--blue-on-dark);
  --on-accent:   #FFFFFF;
  --shadow:      0 1px 2px rgb(0 0 0 / .4), 0 18px 40px -16px rgb(0 0 0 / .65);
  --grid-line:   rgb(255 255 255 / .045);
  color-scheme: dark;
}

/* Sections that are always dark regardless of theme (hero, footer, CTA). */
.on-dark {
  --bg:          #0B1328;
  --surface:     #121A2E;
  --surface-2:   #172136;
  --text:        #FFFFFF;
  --text-dim:    #9AA8BE;
  --text-faint:  #7C8AA1;
  --rule:        #1E2A45;
  --rule-strong: #2C3B5C;
  --accent-text: var(--blue-on-dark);
  --grid-line:   rgb(255 255 255 / .045);
  background: var(--bg);
  color: var(--text);
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex: none; }

/* ----------------------------------------------------------- typography -- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 108%;          /* the logotype is wide — headings echo it */
  letter-spacing: -0.028em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-stretch: normal;
  letter-spacing: 0;
  line-height: 1.35;
}

h1 { font-size: clamp(2.5rem, 6.2vw, 4.75rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -0.018em; }
h4 { font-size: 1.0625rem; letter-spacing: -0.012em; }

p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 62ch;
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
}
[dir="rtl"] .eyebrow { letter-spacing: 0; text-transform: none; }
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

a { color: inherit; }

.link {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-weight: 500;
}
.link .icon { width: 1.05em; height: 1.05em; transition: transform var(--t-mid) var(--ease); }
.link:hover .icon { transform: translateX(3px); }
[dir="rtl"] .link:hover .icon { transform: translateX(-3px); }

/* ------------------------------------------------------------ the cut ---- */
/* Top-leading + bottom-trailing corners sliced at 45°, mirrored for RTL. */
.cut {
  clip-path: polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut)
  );
}
[dir="rtl"] .cut {
  clip-path: polygon(
    0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
    100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))
  );
}
.cut-sm { --cut: var(--cut-sm); }

/* --------------------------------------------------------------- layout -- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(var(--s-7), 9vw, var(--s-9)); }
.section--tight { padding-block: clamp(var(--s-6), 6vw, var(--s-7)); }
.section--alt { background: var(--bg-alt); }

.section-head { max-width: 66ch; margin-bottom: clamp(var(--s-5), 5vw, var(--s-7)); }
.section-head p { color: var(--text-dim); }

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Faint engineering grid — the only background texture on the site. */
.ruled {
  position: relative;
  background-image:
    linear-gradient(to right,  var(--grid-line) var(--rule-w), transparent var(--rule-w)),
    linear-gradient(to bottom, var(--grid-line) var(--rule-w), transparent var(--rule-w));
  background-size: 72px 72px;
}

/* -------------------------------------------------------------- buttons -- */
.btn {
  --cut: 12px;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .875rem 1.5rem;
  font-family: var(--f-body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  min-height: 48px;
  border: var(--rule-w) solid transparent;
  background: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
}
.btn .icon { width: 1.15em; height: 1.15em; transition: transform var(--t-mid) var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
[dir="rtl"] .btn:hover .icon { transform: translateX(-3px); }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--cta-bg); color: #fff; }
.btn--primary:hover { background: #0A54BC; }

.btn--ghost { border-color: var(--rule-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-text); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ---------------------------------------------------------------- cards -- */
.card {
  position: relative;
  background: var(--surface);
  border: var(--rule-w) solid var(--rule);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  text-decoration: none;
  transition: border-color var(--t-mid), transform var(--t-mid) var(--ease),
              box-shadow var(--t-mid);
}
.card h3 { margin: 0; }
.card p { color: var(--text-dim); font-size: .9375rem; }

/* The blue only appears as an edge, and only on interaction. */
a.card::after,
.card--live::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--accent);
  transition: width var(--t-mid) var(--ease);
}
a.card:hover, a.card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--rule-strong); }
a.card:hover::after, a.card:focus-visible::after { width: 100%; }

.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--accent-text);
  border: var(--rule-w) solid var(--rule);
  background: var(--surface-2);
  margin-bottom: var(--s-1);
}
.card__icon .icon { width: 22px; height: 22px; }
.card__kicker {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
[dir="rtl"] .card__kicker { letter-spacing: 0; text-transform: none; }

/* ---------------------------------------------------------------- lists -- */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.checks li {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: var(--s-2);
  align-items: start;
  color: var(--text-dim);
}
.checks .icon { width: 1.35rem; height: 1.35rem; color: var(--accent-text); margin-top: .15em; }

/* ---------------------------------------------------------------- stats -- */
.stat__n {
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
}
[dir="rtl"] .stat__n { font-stretch: normal; letter-spacing: 0; }
.stat__l { color: var(--text-dim); font-size: .875rem; margin: 0; max-width: 26ch; }

/* ----------------------------------------------------------------- a11y -- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute;
  inset-inline-start: var(--s-3);
  top: -100px;
  z-index: 200;
  background: var(--cta-bg);
  color: #fff;
  padding: .75rem 1.25rem;
  font-weight: 600;
  transition: top var(--t-fast);
}
.skip:focus { top: var(--s-3); }

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