/* ============== Fonts ============== */
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-Thin.otf") format("opentype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-ThinItalic.otf") format("opentype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-Ultralight.otf") format("opentype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-UltralightItalic.otf") format("opentype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-RegularItalic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-Semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-SemiboldItalic.otf") format("opentype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-Heavy.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-HeavyItalic.otf") format("opentype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/SF-Pro-Display-BlackItalic.otf") format("opentype"); font-weight: 900; font-style: italic; font-display: swap; }

/* ============== Tokens ============== */
:root {
    --color-text: #121212;
    --color-text-secondary: #5b5b5b;
    --color-text-muted: #adadad;
    --color-bg: #ffffff;
    --color-bg-light: #f3f3f3;
    --color-bg-soft: #f0f0f0;
    --color-accent: #fff04e;
    --color-line: #ADADAD;;

    --font-base: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-button: "Roboto", Helvetica, Arial, sans-serif;
    --font-inter: "Inter", Helvetica, Arial, sans-serif;

    --container: 1480px;
    --container-pad: 50px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;

    --desktop-title-1-font-family: 'SF Pro Display';
}

/* ============== Reset ============== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-base);
    font-size: 16px;
    line-height: normal;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
ul, ol { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
address { font-style: normal; }

h1 { font-size: 40px; font-weight: 700; }
h2 { font-size: 36px; font-weight: 700; }
h3 { font-size: 32px; font-weight: 700; }
h4 { font-size: 28px; font-weight: 700; }
h5 { font-size: 26px; font-weight: 700; }
h6 { font-size: 20px; font-weight: 700; }

@media (max-width: 768px) {
    h1 { font-size: 26px; }
    h2 { font-size: 22px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    h5 { font-size: 16px; }
}