/* Global typography, layout primitives, buttons and focus styles. */
* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Space Grotesk',Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
}

html[lang=ar] body {
  font-family:Cairo,Arial,sans-serif;
  line-height:1.95;
}

button,input,select,textarea {
  font:inherit;
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  cursor:pointer;
}

img,svg {
  max-width:100%;
}

img {
  height:auto;
  display:block;
}

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

h1,h2,h3 {
  font-weight:600;
  line-height:1.25;
}

html[lang=ar] :is(h1,h2,h3) {
  line-height:1.5;
  font-weight:700;
}

h1 {
  font-size:clamp(38px,5.1vw,68px);
  letter-spacing:-2.5px;
  max-width:1000px;
}

html[lang=ar] h1 {
  letter-spacing:0;
}

h2 {
  font-size:clamp(28px,3.1vw,42px);
  letter-spacing:-1.3px;
}

html[lang=ar] h2 {
  letter-spacing:0;
}

h3 {
  font-size:22px;
}

p {
  color:var(--muted);
}

:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:5px;
  border-radius:3px;
}

::selection {
  background:var(--cyan);
  color:var(--navy);
}

[hidden] {
  display:none!important;
}

.container {
  width:min(1240px,calc(100% - 96px));
  margin-inline:auto;
}

.section {
  padding-block:100px;
}

.section-bottom {
  padding-block-end:100px;
}

.eyebrow {
  font-size:12px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--accent);
  display:block;
}

html[lang=ar] .eyebrow {
  letter-spacing:0;
  font-size:13px;
}

.small {
  font-size:13px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  min-height:54px;
  padding:12px 25px;
  border:1px solid transparent;
  border-radius:8px;
  background:var(--button);
  color:var(--button-text);
  font-weight:600;
  font-size:15px;
  transition:transform .18s,box-shadow .18s,background .18s;
  line-height:1.6;
}

.button:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 22px color-mix(in srgb, var(--button) 15%, transparent);
}

.button:active {
  transform:translateY(0);
}

.button:disabled {
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}

.button-small {
  min-height:44px;
  padding:9px 17px;
  font-size:13px;
  gap:16px;
}

.button-outline {
  border-color:var(--line);
  background:var(--surface);
  color:var(--text);
}

.button-quiet {
  background:transparent;
  color:var(--text);
  padding-inline:8px;
}

.text-link {
  display:inline-flex;
  gap:20px;
  align-items:center;
  font-size:14px;
  font-weight:600;
  color:var(--text);
}

.text-link:hover {
  color:var(--accent);
}

.arrow {
  display:inline-block;
  font-family:Arial,sans-serif;
  font-size:21px;
  line-height:1;
}

html[dir=rtl] .arrow {
  transform:scaleX(-1);
}

.skip-link {
  position:fixed;
  inset-inline-start:18px;
  top:-100px;
  padding:12px 24px;
  z-index:100;
  background:var(--button);
  color:var(--button-text);
}

.skip-link:focus {
  top:10px;
}