@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-latin.woff2') format('woff2');
}

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

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

* {
  margin: 0;
  padding: 0;
}

:root {
  --bg-start: #030308;
  --bg-end: #0a1420;
  --bg-rgb: 5 7 12;
  --bg: rgb(var(--bg-rgb));
  --surface: rgb(255 255 255 / 0.025);
  --surface-2: rgb(15 25 50 / 0.35);
  --surface-3: rgb(255 255 255 / 0.05);
  --border: rgb(255 255 255 / 0.06);
  --border-strong: rgb(255 255 255 / 0.12);
  --fg: #fafafa;
  --muted: rgb(150 160 180);
  --muted-dim: rgb(120 130 150);
  --primary: hsl(180 100% 67%);
  --primary-bright: hsl(180 100% 75%);
  --primary-deep: hsl(184 92% 52%);
  --primary-ink: #03171c;
  --primary-glow: hsl(180 100% 67% / 0.35);
  --teal: hsl(181 52% 50%);
  --teal-strong: hsl(181 54% 44%);
  --pix: #2dd4bf;
  --green: hsl(150 55% 56%);
  --blue: hsl(214 90% 64%);
  --danger: #ef4444;
  --radius-sm: 0.5rem;
  --radius: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1rem;
  --header-h: 74px;
  --maxw: 1180px;
  --gutter: 16px;
  --font-ui: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Kanit', 'Geist', sans-serif;
  --shadow-card: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 22px 48px -28px rgb(0 0 0 / 0.9);
  --shadow-pop: 0 24px 60px -24px rgb(0 0 0 / 0.85);
  --ring: 0 0 0 3px hsl(180 100% 67% / 0.25);
}

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

body {
  min-height: 100dvh;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg);
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 70% at 50% -8%, hsl(180 100% 67% / 0.07), transparent 55%),
    linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 55%, var(--bg-end) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.no-scroll {
  overflow: hidden;
}

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

picture {
  display: block;
}

img {
  height: auto;
}

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

button {
  background: none;
  border: none;
  cursor: pointer;
}

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

ul,
ol {
  list-style: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

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

.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;
}

[hidden] {
  display: none !important;
}

.img-missing {
  opacity: 0;
}