@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Satisfy&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root,
[data-theme="dark"] {
    --bg: #000000;
    --bg-alt: #040c0e;
    --bg-card: rgba(255,255,255,0.025);
    --bg-card-hover: rgba(0,161,171,0.04);
    --bg-overlay: rgba(0,0,0,0.92);
    --bg-overlay-strong: rgba(0,0,0,0.96);
    --bg-panel: rgba(8,8,8,0.97);
    --bg-mobile-menu: rgba(4,4,4,0.98);
    --theme: #00a1ab;
    --theme-rgb: 0,161,171;
    --theme-light: #00c4d1;
    --theme-dim: rgba(0,161,171,0.15);
    --theme-glow: rgba(0,161,171,0.18);
    --theme-border: rgba(0,161,171,0.25);
    --theme-border-strong: rgba(0,161,171,0.45);
    --white: #ffffff;
    --white-80: rgba(255,255,255,0.8);
    --white-55: rgba(255,255,255,0.55);
    --white-40: rgba(255,255,255,0.4);
    --white-25: rgba(255,255,255,0.25);
    --white-10: rgba(255,255,255,0.1);
    --white-06: rgba(255,255,255,0.06);
    --white-04: rgba(255,255,255,0.04);
    --black: #000000;
    --text-primary: #ffffff;
    --text-secondary: rgba(255,255,255,0.75);
    --text-muted: rgba(255,255,255,0.45);
    --text-faint: rgba(255,255,255,0.25);
    --border: rgba(255,255,255,0.08);
    --border-hover: rgba(255,255,255,0.16);
    --border-nav: rgba(255,255,255,0.05);
    --shadow-color: rgba(0,0,0,0.4);
    --nav-link-color: rgba(255,255,255,0.7);
    --nav-link-hover: #ffffff;
    --nav-bg-hover: rgba(255,255,255,0.04);
    --hamburger-color: rgba(255,255,255,0.85);
    --font-body: "DM Serif Display", serif;
    --font2: "Satisfy", cursive;
    --font-display: "Open Sans", sans-serif;
    --font-inter: "Inter", sans-serif;
    --nav-height: 72px;
    --nav-height-scrolled: 60px;
    --perspective: 1200px;
    --tilt-max: 10deg;
    --ease-expo: cubic-bezier(0.16,1,0.3,1);
    --ease-smooth: cubic-bezier(0.65,0,0.35,1);
    --ease-in: cubic-bezier(0.55,0,1,0.45);
    --transition: 0.35s var(--ease-expo);
    --transition-fast: 0.2s var(--ease-expo);
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --shadow-sm: 0 4px 16px rgba(0,0,0,0.25);
    --shadow-card: 0 20px 60px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.2);
    --shadow-glow: 0 0 0 1px rgba(0,161,171,0.15), 0 24px 80px rgba(0,0,0,0.4);
    --shadow-glow-strong: 0 0 0 1px rgba(0,161,171,0.25), 0 0 60px rgba(0,161,171,0.1), 0 24px 80px rgba(0,0,0,0.5);
    --section-pad: clamp(80px,10vw,140px);
    --scrollbar-track: #000;
    --scrollbar-thumb: linear-gradient(180deg, #00a1ab, #005060);
    --scrollbar-thumb-hover: #00c4d1;
    --cursor-ring-border: rgba(0,196,209,0.7);
    --cursor-dot-bg: #00c4d1;
    --cursor-label-color: #00c4d1;
    --selection-bg: var(--theme);
    --selection-color: var(--black);
}

[data-theme="light"] {
    --bg: #ffffff;
    --bg-alt: #f9f9f9;
    --bg-card: rgba(0,0,0,0.02);
    --bg-card-hover: rgba(0,161,171,0.05);
    --bg-overlay: rgba(255,255,255,0.97);
    --bg-overlay-strong: rgba(255,255,255,0.99);
    --bg-panel: rgba(255,255,255,0.99);
    --bg-mobile-menu: rgba(255,255,255,0.99);
    --theme: #00a1ab;
    --theme-rgb: 0,161,171;
    --theme-light: #00c4d1;
    --theme-dim: rgba(0,161,171,0.1);
    --theme-glow: rgba(0,161,171,0.12);
    --theme-border: rgba(0,161,171,0.25);
    --theme-border-strong: rgba(0,161,171,0.4);
    --white: #000000;
    --white-80: rgba(0,0,0,0.85);
    --white-55: rgba(0,0,0,0.6);
    --white-40: rgba(0,0,0,0.45);
    --white-25: rgba(0,0,0,0.25);
    --white-10: rgba(0,0,0,0.1);
    --white-06: rgba(0,0,0,0.06);
    --white-04: rgba(0,0,0,0.03);
    --black: #ffffff;
    --text-primary: #000000;
    --text-secondary: rgba(0,0,0,0.8);
    --text-muted: rgba(0,0,0,0.6);
    --text-faint: rgba(0,0,0,0.3);
    --border: rgba(0,0,0,0.1);
    --border-hover: rgba(0,0,0,0.2);
    --border-nav: rgba(0,0,0,0.08);
    --shadow-color: rgba(0,0,0,0.06);
    --nav-link-color: rgba(0,0,0,0.65);
    --nav-link-hover: #000000;
    --nav-bg-hover: rgba(0,0,0,0.05);
    --hamburger-color: rgba(0,0,0,0.85);
    --scrollbar-track: #f0f0f4;
    --scrollbar-thumb: linear-gradient(180deg, #008a93, #00666e);
    --scrollbar-thumb-hover: #00a1ab;
    --cursor-ring-border: rgba(0,161,171,0.7);
    --cursor-dot-bg: #00a1ab;
    --cursor-label-color: #00a1ab;
    --selection-bg: var(--theme);
    --selection-color: #ffffff;
    --shadow-sm: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-card: 0 20px 60px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
    --shadow-glow: 0 0 0 1px rgba(0,161,171,0.12), 0 24px 80px rgba(0,0,0,0.06);
    --shadow-glow-strong: 0 0 0 1px rgba(0,161,171,0.2), 0 0 60px rgba(0,161,171,0.06), 0 24px 80px rgba(0,0,0,0.08);
}

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

html {
    scroll-behavior: smooth;
    cursor: none;
}

body {
    cursor: none;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-display);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    transition: background 0.4s ease, color 0.4s ease;
}

a,
button,
[role="button"],
input,
textarea,
select,
label {
    cursor: none;
}

::selection {
    background: var(--selection-bg);
    color: var(--selection-color);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}