@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
    --bg-page: #0D1B2A;
    --bg-elevated: #152238;
    --bg-elevated-2: #1a2942;
    --border-subtle: #1f3352;
    --border-hover: #2b4d80;
    --accent: #4DA6FF;
    --accent-hover: #6cb5ff;
    --accent-dim: #3d8dd6;
    --text-primary: #ffffff;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
}

html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-page);
    color: var(--text-primary);
    overflow-x: hidden;
    max-width: 100%;
}

code, pre, .mono {
    font-family: 'JetBrains Mono', 'Menlo', monospace;
    font-size: 0.92em;
}

@keyframes blink { 50% { opacity: 0; } }
.cursor-blink::after {
    content: '_';
    animation: blink 1s infinite;
    color: var(--accent);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.terminal-line {
    animation: fadeInUp 0.4s ease forwards;
}

.nav-link.active {
    color: var(--accent);
}

#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
#mobile-menu.open {
    max-height: 320px;
}

.tool-screenshot-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tool-screenshot-scroll::-webkit-scrollbar {
    height: 6px;
}
.tool-screenshot-scroll::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 3px;
}