:root {
    --bg: #060708;
    --bg-soft: #0d1015;
    --panel: rgba(255, 255, 255, 0.05);
    --panel-strong: rgba(255, 255, 255, 0.08);
    --line: rgba(255, 255, 255, 0.08);
    --text: #f3f4f6;
    --muted: #9ca3af;
    --accent: #f59e0b;
    --accent-soft: rgba(245, 158, 11, 0.14);
    --blue-soft: rgba(59, 130, 246, 0.16);
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.08), transparent 28%),
        radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.08), transparent 24%),
        linear-gradient(180deg, #0a0b0e 0%, var(--bg) 40%, #090a0d 100%);
    color: var(--text);
    overflow-x: hidden;
}

body::before,
body::after {
    content: "";
    position: fixed;
    width: 34rem;
    height: 34rem;
    border-radius: 9999px;
    pointer-events: none;
    filter: blur(90px);
    opacity: 0.18;
    z-index: -1;
}

body::before {
    top: -12rem;
    right: -10rem;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.55) 0%, transparent 70%);
}

body::after {
    bottom: -14rem;
    left: -10rem;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.45) 0%, transparent 68%);
}

h1,
h2,
h3,
h4,
.font-display {
    letter-spacing: -0.03em;
}

section {
    scroll-margin-top: 96px;
}

h1,
h2,
h3,
h4,
p,
summary,
li,
a,
button {
    overflow-wrap: anywhere;
}

.header-scrolled {
    background-color: rgba(6, 7, 8, 0.92) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.hero-section {
    isolation: isolate;
}

.hero-orb {
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
    filter: blur(12px);
    opacity: 0.7;
    animation: drift 12s ease-in-out infinite alternate;
}

.hero-orb--amber {
    top: 8rem;
    right: 8%;
    width: 22rem;
    height: 22rem;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.24) 0%, rgba(245, 158, 11, 0.06) 45%, transparent 75%);
}

.hero-orb--blue {
    bottom: 4rem;
    left: 4%;
    width: 18rem;
    height: 18rem;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.05) 48%, transparent 75%);
    animation-delay: -4s;
}

.studio-panel {
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

/* Плавные и заметные фокусы */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Кастомный скроллбар */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #f59e0b;
    border-radius: 4px;
}