:root {
    /* Biela.dev extracted colors */
    --bg-color: rgb(10, 10, 10);
    /* #0a0a0a */
    --text-primary: rgb(237, 237, 237);
    /* #ededed */
    --text-secondary: rgb(161, 161, 170);
    /* #a1a1aa */
    --accent-color: rgb(237, 237, 237);
    /* White accent for links in Biela */
    --border-color: rgb(38, 38, 38);
    /* #262626 */
    --card-bg: rgb(23, 23, 23);
    /* #171717 */

    /* Neil Patel Sidebar Card Styles (Adapted for Dark Mode) */
    --sidebar-card-bg: #ffffff;
    /* White cards as requested/observed, or dark if we want to stick to theme? User said "based on Biela", but "cards from Neil Patel". Neil's are white. Let's make them stand out or blend? 
       Actually, mixing Biela (Dark) with Neil (Light cards) might look bad. 
       Let's adapt Neil's "Card" concept (Shadow, Radius, Typography) but keep Biela's Dark Theme. 
       So Dark Cards with Shadow. */
    --sidebar-card-bg-dark: rgb(23, 23, 23);
    --sidebar-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    /* Spacing */
    --container-width: 1200px;
    --container-width: 1200px;
    --container-width: 1200px;
    --header-height: 80px;
    /* Reverted to previous size */
    /* Biela's nav is usually shorter */
}

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

body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* Biela's font stack */
    background-color: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--text-secondary);
}

/* Layout */
.main-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: 1fr 350px;
    /* Main content + Sidebar */
    gap: 60px;
}

@media (max-width: 900px) {
    .main-container {
        grid-template-columns: 1fr;
    }
}

/* Header (Based on Biela.dev Nav) */
#app-header nav {
    background-color: rgba(10, 10, 10, 0.8);
    /* Semi-transparent */
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    height: var(--header-height);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    max-width: var(--container-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    z-index: 102;
    /* Ensure logo stays above overlay if needed */
}

.logo img {
    display: block;
    max-height: 60px;
    /* Adjust based on header height */
    width: auto;
    /* Ensure aspect ratio is preserved */
    /* Fill the container */
    /* Remove constraints */
    margin: 0;
    border: none;
    border-radius: 0;
}

.nav-links.desktop-nav {
    display: flex;
    gap: 24px;
    font-size: 0.9rem;
}

.nav-links a {
    color: var(--text-secondary);
    font-weight: 500;
}

.nav-links a:hover {
    color: var(--text-primary);
}

/* Hamburger Menu */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    z-index: 102;
}

.hamburger-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--text-primary);
    transition: 0.3s;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(10, 10, 10, 0.98);
    z-index: 101;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 30px;
    text-align: center;
}

.mobile-nav-links a {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.close-menu-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 2rem;
    cursor: pointer;
}

@media (max-width: 768px) {
    .nav-links.desktop-nav {
        display: none;
    }

    .hamburger-btn {
        display: flex;
    }

    /* Hide hamburger when menu is open (controlled by JS adding class to body or button) */
    body.menu-open .hamburger-btn {
        display: none;
        /* Or opacity: 0 */
        visibility: hidden;
    }

    .hero-section {
        border: none;
        border-radius: 0;
        background: transparent;
    }

    .hero-section img {
        border-radius: 12px;
        border: 1px solid var(--border-color);
    }

    .hero-overlay {
        display: none;
        /* Hide overlay on mobile */
    }

    .hero-title {
        position: static;
        /* Reset position */
        padding: 20px;
        color: var(--text-primary) !important;
        text-shadow: none;
        font-size: 2rem;
        text-align: center;
        /* Center title on mobile */
    }

    .badge {
        position: absolute;
        /* Keep absolute or use flex */
        top: 12px;
        right: 12px;
        /* Align to right */
        left: auto;
        margin-bottom: 0;
    }
}

/* Blog Content */
.blog-content h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

/* Main Article Headers (Excluding Cards/CTA) */
#blog-body>h2 {
    --neon-color: #62e1f8;
    /* Default Neon Color */
    margin-top: 60px;
    margin-bottom: 30px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.025em;
    color: #ffffff;
    border-left: 4px solid var(--neon-color);
    padding-left: 15px;
    position: relative;
    /* Glow Effect */
    box-shadow: -4px 0 15px -4px var(--neon-color);
    text-shadow: 0 0 10px var(--neon-color), 0 0 20px var(--neon-color);
}

/* Wobbly Wave Divider - More Curvy */
#blog-body>h2::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 20px;
    /* Gradient fading to right, using the neon color */
    background: linear-gradient(to right, var(--neon-color), transparent);
    /* Curvier Wave Mask */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0,10 Q25,25 50,10 T100,10' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") no-repeat left center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0,10 Q25,25 50,10 T100,10' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") no-repeat left center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    opacity: 0.5;
}

/* Varied Colors for Headers */
#blog-body>h2:nth-of-type(4n+1) {
    --neon-color: #62e1f8;
}

/* Cyan */
#blog-body>h2:nth-of-type(4n+2) {
    --neon-color: #b026ff;
}

/* Neon Purple */
#blog-body>h2:nth-of-type(4n+3) {
    --neon-color: #39ff14;
}

/* Neon Green */
#blog-body>h2:nth-of-type(4n+4) {
    --neon-color: #ff007f;
}

/* Hot Pink */

.blog-content h3 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #62e1f8;
    /* Accent Color */
    letter-spacing: -0.025em;
    border-left: 3px solid rgba(98, 225, 248, 0.7);
    padding-left: 15px;
}

.blog-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 3rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

#blog-body {
    position: relative;
    padding-left: 25px;
    /* Space for the vertical line */
}

/* Continuous Vertical Tech Line */
#blog-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(98, 225, 248, 0) 0%,
            rgba(98, 225, 248, 0.5) 10%,
            rgba(98, 225, 248, 0.5) 90%,
            rgba(98, 225, 248, 0) 100%);
    opacity: 0.6;
}

.blog-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: var(--text-primary);
    font-size: 1.1rem;
    letter-spacing: -0.025em;
}

.blog-content img {
    max-width: 100%;
    border-radius: 12px;
    margin: 20px 0;
    border: 1px solid var(--border-color);
}

/* Hero Section */
.hero-section {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
    /* Ensure it aligns with sidebar by removing top margin if any */
    margin-top: 0;
}

.hero-section img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    margin: 0;
    /* Override global img margin for alignment */
    border: none;
    border-radius: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.9) 100%);
    z-index: 1;
}

.hero-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    z-index: 2;
    margin: 0 !important;
    /* Force override */
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-size: 2.2rem;
    /* Adjust as needed */
}

@media (max-width: 768px) {
    .hero-section {
        border: none;
        border-radius: 0;
        background: transparent;
    }

    .hero-section img {
        border-radius: 12px;
        border: 1px solid var(--border-color);
    }

    .hero-overlay {
        display: none;
        /* Hide overlay on mobile */
    }

    .hero-title {
        position: static;
        /* Reset position */
        padding: 20px 0 0 0;
        color: var(--text-primary) !important;
        text-shadow: none;
        font-size: 1.8rem;
    }
}

/* Sidebar Widgets (Neil Patel Style - Adapted) */
.sidebar-widge.callout {
    background-color: rgba(98, 225, 248, 0.1);
    /* Very subtle accent background */
    border-left: 4px solid var(--accent-color);
    padding: 20px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 30px;
}

.sidebar-widget {
    background-color: var(--sidebar-card-bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--sidebar-shadow);
}

.sidebar-widget h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Specific Widget Styles */
.widget-btn {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: var(--text-primary);
    color: var(--bg-color);
    text-align: center;
    border-radius: 8px;
    font-weight: 600;
    margin-top: 12px;
    transition: opacity 0.2s;
}

.widget-btn:hover {
    opacity: 0.9;
    color: var(--bg-color);
    text-decoration: none;
}

.widget-list {
    list-style: none;
}

.widget-list li {
    border-bottom: 1px solid var(--border-color);
}

.widget-list li:last-child {
    border-bottom: none;
}

.widget-list a {
    display: block;
    padding: 12px 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.widget-list a:hover {
    color: var(--text-primary);
    padding-left: 4px;
    /* Subtle movement */
}

/* TOC Widget */
.toc-widget ul {
    list-style: none;
    border-left: 2px solid var(--border-color);
}

.toc-widget li {
    margin-bottom: 0;
}

.toc-widget a {
    display: block;
    padding: 6px 0 6px 16px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    border-left: 2px solid transparent;
    margin-left: -2px;
}

.toc-widget a:hover,
.toc-widget a.active {
    color: var(--text-primary);
    border-left-color: var(--text-primary);
}

.toc-widget li.h3 a {
    padding-left: 28px;
    font-size: 0.85rem;
}

/* Footer (Based on Biela.dev) */
#app-footer footer {
    border-top: 1px solid var(--border-color);
    padding: 40px 0;
    margin-top: 80px;
    font-size: 0.9rem;
}

.footer-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: var(--text-secondary);
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    color: var(--text-secondary);
}

.footer-links a:hover {
    color: var(--text-primary);
}

/* Social Sidebar (Nectar Social Clone) */
.nectar-social.fixed {
    position: fixed;
    bottom: 34px;
    right: 34px;
    z-index: 1000;
    width: 50px;
    height: 50px;
}

.nectar-social .trigger-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--text-primary);
    /* White/Light */
    color: var(--bg-color);
    /* Dark icon */
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1002;
    padding: 0;
    /* Ensure no padding */
}

.share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.share-icon svg {
    display: block;
    /* Remove inline spacing */
}

.nectar-social:hover .trigger-icon,
.nectar-social.active .trigger-icon {
    transform: scale(1.1);
}

/* Invisible bridge to prevent hover loss */
.nectar-social::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    /* Wider safe zone */
    height: 300px;
    /* Taller safe zone */
    display: none;
    z-index: 999;
}

.nectar-social:hover::after,
.nectar-social.active::after {
    display: block;
}

.nectar-social-inner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    /* Ignore clicks when hidden */
}

.nectar-social:hover .nectar-social-inner,
.nectar-social.active .nectar-social-inner {
    pointer-events: all;
}

.nectar-sharing {
    position: absolute;
    bottom: 0;
    /* Start from bottom */
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.5s;
    /* Delay hiding by 1.5s */
    z-index: 1001;
}

/* Hover State: Reveal Icons */
/* Hover/Active State: Reveal Icons */
.nectar-social:hover .nectar-sharing,
.nectar-social.active .nectar-sharing {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Staggered positions on hover */
/* Staggered positions on hover/active */
.nectar-social:hover .facebook-share,
.nectar-social.active .facebook-share {
    bottom: 60px;
    background-color: #3b5998;
    transition-delay: 0.05s;
}

.nectar-social:hover .twitter-share,
.nectar-social.active .twitter-share {
    bottom: 110px;
    background-color: #1da1f2;
    transition-delay: 0.1s;
}

.nectar-social:hover .linkedin-share,
.nectar-social.active .linkedin-share {
    bottom: 160px;
    background-color: #0077b5;
    transition-delay: 0.15s;
}

.nectar-social:hover .pinterest-share,
.nectar-social.active .pinterest-share {
    bottom: 210px;
    background-color: #bd081c;
    transition-delay: 0.2s;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .nectar-social.fixed {
        bottom: 20px;
        right: 20px;
    }
}

/* Blog Post Special Components (Dark Mode Adapted) */

/* Callout / Quick Caption */
.callout {
    background: rgba(98, 225, 248, 0.08);
    border-left: 4px solid #62e1f8;
    border-radius: 12px;
    padding: 18px 24px;
    margin: 30px 0;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.5;
    color: #a5f3ff;
    /* Light Cyan */
}

/* Post Metadata Row */
.post-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.meta-separator {
    color: var(--border-color);
}

.published-date {
    color: var(--text-primary);
}

.blog-readtime {
    position: static !important;
    /* Override absolute positioning */
    color: var(--text-secondary) !important;
}

/* Special Cards (Podcast/Voice) */
.special-card {
    position: relative;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
}

.special-card h2 {
    margin: 0 0 16px 0 !important;
    /* Override blog h2 margins */
    font-size: 1.1rem !important;
    font-weight: 600;
    color: var(--text-primary) !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Badge */
.badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #2aa9c8;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

@media (max-width: 600px) {
    .badge {
        position: static;
        display: inline-block;
        margin-bottom: 10px;
    }
}

/* Audio Player */
.player {
    width: 100%;
    height: 40px;
    border-radius: 20px;
    margin-top: 10px;
}

/* Spotify Link */
.spotify-link {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1ed760;
    /* Spotify Green */
    text-decoration: none;
    transition: opacity 0.2s;
}

.spotify-link:hover {
    opacity: 0.8;
    color: #1ed760;
}

.spotify-link img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    margin-top: 0 !important;
    /* Override blog img margin */
    margin-bottom: 0 !important;
    border: none !important;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, rgba(255, 136, 0, 0.1), rgba(0, 0, 0, 0));
    border: 1px solid rgba(255, 136, 0, 0.3);
    text-align: center;
    padding: 40px;
    border-radius: 16px;
    margin-top: 60px;
    margin-bottom: 40px;
}

.cta-section h2 {
    margin: 0 0 16px 0 !important;
    font-size: 1.8rem !important;
    font-weight: 800;
    color: #ffb540 !important;
    /* Orange accent */
}

.cta-section p {
    margin: 0 0 30px 0 !important;
    font-size: 1.1rem;
    color: var(--text-primary);
    max-width: 600px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.btn-cta {
    display: inline-block;
    background: linear-gradient(90deg, #ff8800, #ffb540);
    color: #000;
    /* Dark text on orange */
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(255, 136, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 136, 0, 0.4);
    color: #000;
}

/* Powered By Brevibot - Futuristic Frame */
/* Powered By Brevibot - Futuristic Frame */
.powered-by {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 12px 30px;
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid rgba(98, 225, 248, 0.3);
    border-radius: 50px;
    box-shadow: 0 0 15px rgba(98, 225, 248, 0.1), inset 0 0 10px rgba(98, 225, 248, 0.05);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.powered-by:hover {
    border-color: rgba(98, 225, 248, 0.8);
    box-shadow: 0 0 25px rgba(98, 225, 248, 0.3), inset 0 0 15px rgba(98, 225, 248, 0.1);
    transform: translateY(-2px);
}

.powered-by span {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    text-transform: none;
    /* Removed uppercase for natural sentence flow */
}

.brevibot-logo {
    height: 50px;
    /* Increased size */
    width: auto;
    display: block;
    filter: brightness(1.2) drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
    transition: filter 0.3s;
    margin: 0 4px;
    /* Add spacing around logo */
}

.powered-by:hover .brevibot-logo {
    filter: brightness(1.5) drop-shadow(0 0 5px rgba(98, 225, 248, 0.6));
}