:root {
    --bg-color: #070913;
    --card-bg: rgba(17, 24, 39, 0.82);
    --card-hover-bg: rgba(30, 41, 59, 0.90);
    --text-main: #f8fafc;       
    --text-muted: #f1f5f9;
    --accent: #38bdf8;
    --accent-glow: rgba(56, 189, 248, 0.25);
    --accent-hover: #0ea5e9;
    --border-color: rgba(51, 65, 85, 0.55);    
    --border-glow: rgba(56, 189, 248, 0.6);
    --radius: 16px;
    --transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
    scroll-behavior: smooth;
    overflow-x: clip;
    max-width: 100vw;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: linear-gradient(135deg, rgba(7, 9, 19, 0.65) 0%, rgba(15, 23, 42, 0.75) 100%), url('../assets/img/background.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text-main);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-align: left;
    overflow-x: clip;
    max-width: 100vw;
    position: relative;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.ambient-glow {
    position: absolute;
    width: 100%;
    max-width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
}