@font-face {
  font-family: "Bujupi Brand";
  src: url("../fonts/bodoni-moda-latin-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --color-navy: #061d35;
  --color-text: #071d36;
  --color-muted: #53677a;
  --color-blue: #087cf0;
  --color-blue-strong: #0664d6;
  --color-surface: #edf7ff;
  --color-border: #dce7f0;
  --color-white: #ffffff;
  --color-success: #176b47;
  --color-error: #a82424;
  --container: 1280px;
  --radius-control: 8px;
  --radius-media: 14px;
  --radius-card: 12px;
  --section-space: 96px;
  --header-height: 88px;
  --utility-height: 36px;
  --font-heading: "Manrope", sans-serif;
  --font-body: "Inter", sans-serif;
  --shadow-subtle: 0 14px 40px rgba(6, 29, 53, 0.08);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); scrollbar-gutter: stable; }
body { margin: 0; color: var(--color-text); background: var(--color-white); font: 400 17px/1.65 var(--font-body); text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
svg { display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { margin: 0; color: var(--color-navy); font-family: var(--font-heading); font-weight: 760; letter-spacing: -0.035em; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 4.3vw, 3.5rem); line-height: 1.1; }
h2 { font-size: clamp(1.875rem, 3.25vw, 2.75rem); line-height: 1.14; }
h3 { font-size: 1.375rem; line-height: 1.32; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.icon { width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
:focus-visible { outline: 3px solid rgba(8, 124, 240, 0.45); outline-offset: 3px; }
::selection { color: var(--color-white); background: var(--color-blue-strong); }

@media (max-width: 1024px) {
  :root { --section-space: 72px; }
}

@media (max-width: 640px) {
  :root { --section-space: 56px; --header-height: 72px; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); font-size: 16px; line-height: 1.625; }
  .container { width: min(calc(100% - 40px), var(--container)); }
}

@media (max-width: 370px) {
  .container { width: min(calc(100% - 32px), var(--container)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
