:root {
    --bg-color: #050505;
    --card-bg: rgba(22, 27, 34, 0.7);
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --accent-cyan: #00f0ff;
    --accent-purple: #bd00ff;
    --accent-blue: #0070f3;
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-heading: 'Orbitron', 'Inter', sans-serif;
}

body {
    background-color: transparent !important;
    color: var(--text-primary);
    font-family: var(--font-main);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(189, 0, 255, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(0, 240, 255, 0.1) 0%, transparent 20%);
    background-attachment: fixed;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-blue);
}

/* Header */
.header-container {
    background: transparent !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid rgba(48, 54, 61, 0.3);
    padding: 6rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.header-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}

.header-content h1 {
    margin: 0;
    font-size: 3.5rem;
    font-weight: 800;
    font-family: var(--font-heading);
    letter-spacing: -2px;
    background: linear-gradient(135deg, #fff 0%, var(--accent-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(0, 240, 255, 0.3);
}

.header-content p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-top: 1rem;
    font-weight: 300;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    background: rgba(5, 5, 5, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 12px;
    border: 1px solid rgba(48, 54, 61, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    margin-top: -2rem;
    position: relative;
    z-index: 2;
}

/* Markdown Body Overrides */
.markdown-body {
    background: transparent !important;
    font-family: var(--font-main) !important;
    color: var(--text-primary) !important;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
    font-family: var(--font-heading);
    border-bottom: none !important;
}

.markdown-body h2 {
    font-size: 2rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
}

.markdown-body h2::before {
    content: "//";
    color: var(--accent-purple);
    margin-right: 10px;
    font-weight: bold;
}

.markdown-body h3 {
    font-size: 1.5rem;
    margin-top: 2rem;
    color: #fff;
}

.markdown-body a {
    color: var(--accent-cyan);
    text-decoration: none;
    transition: all 0.2s;
    position: relative;
}

.markdown-body a:hover {
    color: #fff;
    text-shadow: 0 0 10px var(--accent-cyan);
    text-decoration: none !important;
}

.markdown-body ul {
    list-style: none;
    padding-left: 0;
}

.markdown-body li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.markdown-body li::before {
    content: "›";
    color: var(--accent-purple);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Cards / Blockquotes */
.markdown-body blockquote {
    border-left: 3px solid var(--accent-blue);
    background: rgba(0, 112, 243, 0.1);
    color: var(--text-secondary);
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
}

/* Featured Tools List Styles */
/* We can target the list elements or use JS to wrap them, but let's try CSS only specific targeting if possible. 
   Since we don't have classes in raw markdown, we style broadly. */

img[src*="google.com/s2/favicons"],
img[src*="logo.clearbit.com"] {
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    background: #fff;
    /* Ensure transparent logos have bg */
    padding: 2px;
}

/* Footer (if any) */
footer {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    border-top: 1px solid rgba(48, 54, 61, 0.5);
    margin-top: 3rem;
}

/* Background Animation */
#bg-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center 80%;
    background-repeat: no-repeat;
    pointer-events: none;
}

#bg-animation-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 20%,
            rgba(0, 0, 0, 0.8) 50%,
            var(--bg-color) 80%,
            var(--bg-color) 100%);
    /* Gradient: focused at top, darkens quickly below header */
    z-index: 1;
}