/* ========================================
   RESET
======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ========================================
   DESIGN TOKENS
======================================== */
:root {
    --color-bg:           #F8F9FA;
    --color-bg-2:         #ECEEF2;
    --color-surface:      #FFFFFF;
    --color-surface-2:    #F0F2F6;
    --color-primary:      #0F2952;
    --color-primary-dark: #0A1E3D;
    --color-sky:          #1E73C3;
    --color-accent:       #F5C518;
    --color-green:        #16a34a;
    --color-red:          #dc2626;
    --color-text:         #1A1A2E;
    --color-text-muted:   #4A5568;
    --color-text-dim:     #718096;
    --color-border:       rgba(15, 41, 82, 0.1);
    --color-border-hover: rgba(15, 41, 82, 0.28);

    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --radius-xl:  24px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
}

/* ========================================
   BASE
======================================== */
body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ========================================
   SCROLL ANIMATIONS
======================================== */
.aos {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    transition-delay: var(--delay, 0s);
}

.aos.is-visible {
    opacity: 1;
    transform: translateY(0);
}