@font-face {
  font-family: "ISFC Display";
  src: url("../fonts/isfc-display-lat.woff2") format("woff2");
  font-weight: 600 1000;
  font-display: swap;
}

@font-face {
  font-family: "ISFC Display";
  src: url("../fonts/isfc-display-cyr.woff2") format("woff2");
  font-weight: 600 1000;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "ISFC Display";
  src: url("../fonts/isfc-display-cyrext.woff2") format("woff2");
  font-weight: 600 1000;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "ISFC Head";
  src: url("../fonts/isfc-head-lat.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
}

@font-face {
  font-family: "ISFC Head";
  src: url("../fonts/isfc-head-cyr.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "ISFC Head";
  src: url("../fonts/isfc-head-cyrext.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "ISFC Text";
  src: url("../fonts/isfc-text-lat.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "ISFC Text";
  src: url("../fonts/isfc-text-cyr.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "ISFC Text";
  src: url("../fonts/isfc-text-cyrext.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

:root {
  --bg-0: #000000;
  --bg-1: #0c0c0c;
  --bg-2: #141414;
  --surface: #0f0f0f;
  --surface-strong: #161616;
  --surface-line: rgba(255, 255, 255, 0.09);
  --surface-line-strong: rgba(255, 255, 255, 0.18);

  --accent: #faa41a;
  --accent-2: #ffc35c;
  --accent-deep: #d98400;
  --accent-text: #faa41a;
  --on-accent: #0a0a0a;

  --text-0: #ffffff;
  --text-1: #b6b6b6;
  --text-2: #787878;

  --grad-warm: linear-gradient(0deg, #faa41a, #faa41a);
  --grad-display: linear-gradient(0deg, #ffffff, #ffffff);
  --grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(250, 164, 26, 0.12) 0%, transparent 70%);

  --r-xs: 8px;
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-xl: 44px;
  --r-pill: 999px;

  --shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 40px 110px rgba(0, 0, 0, 0.7);
  --shadow-accent: 0 0 0 rgba(0, 0, 0, 0);

  --glass-blur: 0px;
  --glass-blur-strong: 0px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --font-display: "ISFC Display", "Arial Black", system-ui, sans-serif;
  --font-head: "ISFC Head", "Segoe UI", system-ui, sans-serif;
  --font-body: "ISFC Text", "Segoe UI", system-ui, sans-serif;

  --maxw: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 86px;

  --dur-1: 0.18s;
  --dur-2: 0.35s;
  --dur-3: 0.6s;
}

[data-theme="light"] {
  --bg-0: #f3f1ec;
  --bg-1: #ebe8e1;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-line: rgba(10, 10, 10, 0.1);
  --surface-line-strong: rgba(10, 10, 10, 0.2);
  --accent-text: #b86f00;
  --text-0: #0a0a0a;
  --text-1: #454545;
  --text-2: #7b7b7b;
  --grad-display: linear-gradient(0deg, #0a0a0a, #0a0a0a);
  --shadow-sm: 0 4px 18px rgba(20, 20, 20, 0.08);
  --shadow-md: 0 20px 60px rgba(20, 20, 20, 0.12);
  --shadow-lg: 0 40px 110px rgba(20, 20, 20, 0.16);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-1);
  background: var(--bg-0);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

em {
  font-style: normal;
  font-variation-settings: "slnt" -10;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-line-strong) transparent;
}



/* backdrop */


.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--bg-0);
}

.aurora__grid {
  position: absolute;
  inset: 0 var(--gutter);
  max-width: var(--maxw);
  margin-inline: auto;
  background-image: linear-gradient(to right, var(--surface-line) 1px, transparent 1px);
  background-size: 25% 100%;
  border-right: 1px solid var(--surface-line);
  opacity: 0.55;
}

.aurora__blob {
  display: none;
}



/* layout */


.container {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(72px, 10vw, 140px);
}

.section--tight {
  padding-block: clamp(56px, 7.4vw, 110px);
}

.section--alt {
  background: var(--bg-1);
}

.section__head {
  margin-bottom: clamp(36px, 5vw, 64px);
  max-width: 820px;
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head .lead {
  margin-top: 18px;
}



/* typography */


.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-0);
}

.eyebrow::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6 5.4 10.8 12 12-6.6 1.2-11.4 6-12 12-.6-6-5.4-10.8-12-12C6.6 10.8 11.4 6 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6 5.4 10.8 12 12-6.6 1.2-11.4 6-12 12-.6-6-5.4-10.8-12-12C6.6 10.8 11.4 6 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.eyebrow--center {
  justify-content: center;
}

.h1 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--text-0);
  letter-spacing: -0.012em;
}

.h1 {
  font-size: clamp(2rem, 5.2vw, 4.2rem);
  line-height: 1.02;
  overflow-wrap: break-word;
}

:lang(kk) .h1 {
  font-size: clamp(1.45rem, 6.4vw, 3.6rem);
}

.h2,
.h3 {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--text-0);
  letter-spacing: -0.025em;
}

.h2 {
  font-size: clamp(1.85rem, 3.7vw, 3.3rem);
  line-height: 1.1;
}

.h2 em,
.h1 em {
  color: var(--accent);
  font-weight: 500;
}

.h3 {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.2;
}

.lead {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.7;
  color: var(--text-1);
  max-width: 60ch;
}

.section__head--center .lead {
  margin-inline: auto;
}

.muted {
  color: var(--text-2);
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
}

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

  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
