/* ===================================


   VLSI Verification - Global Styles


   Premium Dark/Light Theme Design


   =================================== */





/* CSS Variables */


:root {


    /* Colors - Light Mode */


    --primary: #6366f1;


    --primary-light: #818cf8;


    --primary-dark: #4f46e5;


    --secondary: #06b6d4;


    --accent: #f59e0b;





    /* Backgrounds - Warm off-white/beige tones */


    --bg-primary: #faf8f5;


    --bg-secondary: #f5f2ed;


    --bg-tertiary: #ebe7e0;


    --bg-card: #fdfcfa;





    /* Text */


    --text-primary: #0f172a;


    --text-secondary: #475569;


    --text-tertiary: #94a3b8;





    /* Borders */


    --border-color: #e2e8f0;


    --border-light: #f1f5f9;





    /* Gradients */


    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);


    --gradient-secondary: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);


    --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);


    --gradient-dark: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);





    /* Shadows */


    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);


    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);


    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);


    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);


    --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);





    /* Code Colors */


    --code-bg: #1e293b;


    --code-text: #e2e8f0;


    --code-keyword: #c084fc;


    --code-string: #4ade80;


    --code-function: #60a5fa;


    --code-comment: #64748b;


    --code-class: #fbbf24;


    --code-macro: #f472b6;


    --code-type: #2dd4bf;





    /* Transitions */


    --transition-fast: 0.15s ease;


    --transition-normal: 0.3s ease;


    --transition-slow: 0.5s ease;





    /* Spacing */


    --container-max: 1280px;


    --section-padding: 100px;


    --nav-height: 80px;





    /* Border Radius */


    --radius-sm: 6px;


    --radius-md: 12px;


    --radius-lg: 20px;


    --radius-xl: 28px;


    --radius-full: 9999px;


}





/* Dark Mode */


[data-theme="dark"] {


    --bg-primary: #0f172a;


    --bg-secondary: #1e293b;


    --bg-tertiary: #334155;


    --bg-card: #1e293b;





    --text-primary: #f8fafc;


    --text-secondary: #cbd5e1;


    --text-tertiary: #64748b;





    --border-color: #334155;


    --border-light: #1e293b;





    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);


    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);


    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);


    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);


    --shadow-glow: 0 0 60px rgba(99, 102, 241, 0.25);


}





/* ===================================


   Reset & Base Styles


   =================================== */





*,


*::before,


*::after {


    margin: 0;


    padding: 0;


    box-sizing: border-box;


}





html {


    scroll-behavior: smooth;


    font-size: 16px;


}





body {


    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;


    background-color: var(--bg-primary);


    color: var(--text-primary);


    line-height: 1.6;


    overflow-x: hidden;


    transition: background-color var(--transition-normal), color var(--transition-normal);


}





a {


    text-decoration: none;


    color: inherit;


    transition: color var(--transition-fast);


}





button {


    font-family: inherit;


    cursor: pointer;


    border: none;


    background: none;


}





ul {


    list-style: none;


}





img {


    max-width: 100%;


    height: auto;


}





/* Container */


.container {


    max-width: var(--container-max);


    margin: 0 auto;


    padding: 0 24px;


}





/* ===================================


   Navigation


   =================================== */





.navbar {


    position: fixed;


    top: 0;


    left: 0;


    right: 0;


    height: var(--nav-height);


    background: rgba(255, 255, 255, 0.8);


    backdrop-filter: blur(20px);


    -webkit-backdrop-filter: blur(20px);


    border-bottom: 1px solid var(--border-color);


    z-index: 1000;


    transition: all var(--transition-normal);


}





[data-theme="dark"] .navbar {


    background: rgba(15, 23, 42, 0.85);


}





.navbar.scrolled {


    box-shadow: var(--shadow-md);


}





.nav-container {


    max-width: var(--container-max);


    margin: 0 auto;


    padding: 0 24px;


    height: 100%;


    display: flex;


    align-items: center;


    /* justify-content: space-between; Removed to keep menu left-aligned */


}





.nav-logo {


    display: flex;


    align-items: center;


    gap: 10px;


    font-weight: 700;


    font-size: 1.4rem;


}





.logo-icon {


    font-size: 1.5rem;


}





.logo-text {


    background: var(--gradient-primary);


    -webkit-background-clip: text;


    background-clip: text;


    -webkit-text-fill-color: transparent;


}





.logo-accent {


    color: var(--primary);


}





.nav-menu {


    display: flex;


    align-items: center;


    gap: 8px;


}





/* Dropdown Styles */


.has-dropdown {


    position: relative;


    height: 100%;


    /* Align with navbar height */


    display: flex;


    align-items: center;


}





.dropdown-menu {


    position: absolute;


    top: 100%;


    left: 0;


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: var(--radius-md);


    box-shadow: var(--shadow-lg);


    min-width: 220px;


    opacity: 0;


    visibility: hidden;


    transform: translateY(10px);


    transition: all var(--transition-fast);


    z-index: 1001;


    display: flex;


    flex-direction: column;


    padding: 8px;


}





.has-dropdown:hover .dropdown-menu {


    opacity: 1;


    visibility: visible;


    transform: translateY(0);


}





.dropdown-menu a {


    padding: 10px 16px;


    font-size: 0.9rem;


    color: var(--text-secondary);


    border-radius: var(--radius-sm);


    transition: all var(--transition-fast);


    display: block;


    white-space: nowrap;


}





.dropdown-menu a:hover {


    background: rgba(99, 102, 241, 0.1);


    color: var(--primary);


}








.nav-link {


    padding: 10px 16px;


    font-size: 0.95rem;


    font-weight: 500;


    color: var(--text-secondary);


    border-radius: var(--radius-md);


    transition: all var(--transition-fast);


}





.nav-link:hover,


.nav-link.active {


    color: var(--primary);


    background: rgba(99, 102, 241, 0.1);


}





.nav-actions {


    display: flex;


    align-items: center;


    gap: 12px;


    margin-left: auto;


    /* Pushes actions to the far right */


}





.theme-toggle {


    width: 44px;


    height: 44px;


    border-radius: var(--radius-full);


    background: var(--bg-tertiary);


    display: flex;


    align-items: center;


    justify-content: center;


    transition: all var(--transition-fast);


}





.theme-toggle:hover {


    background: var(--bg-secondary);


    transform: scale(1.05);


}





.sun-icon,


.moon-icon {


    font-size: 1.2rem;


}





.moon-icon {


    display: none;


}





[data-theme="dark"] .sun-icon {


    display: none;


}





[data-theme="dark"] .moon-icon {


    display: block;


}





.nav-toggle {


    display: none;


    width: 44px;


    height: 44px;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    gap: 6px;


    background: var(--bg-tertiary);


    border-radius: var(--radius-md);


}





.hamburger,


.hamburger::before,


.hamburger::after {


    width: 24px;


    height: 2px;


    background: var(--text-primary);


    border-radius: 2px;


    transition: all var(--transition-fast);


}





.hamburger {


    position: relative;


}





.hamburger::before,


.hamburger::after {


    content: '';


    position: absolute;


    left: 0;


}





.hamburger::before {


    top: -7px;


}





.hamburger::after {


    top: 7px;


}





/* ===================================


   Hero Section


   =================================== */





.hero {


    min-height: 100vh;


    display: flex;


    flex-direction: column;


    justify-content: center;


    position: relative;


    padding-top: var(--nav-height);


    overflow: hidden;


}





.hero-bg {


    position: absolute;


    inset: 0;


    z-index: -1;


    overflow: hidden;


}





.hero-gradient {


    position: absolute;


    top: -50%;


    right: -20%;


    width: 80%;


    height: 120%;


    background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.15) 0%, transparent 70%);


    animation: pulse 8s ease-in-out infinite;


}





[data-theme="dark"] .hero-gradient {


    background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.25) 0%, transparent 70%);


}





@keyframes pulse {





    0%,


    100% {


        transform: scale(1);


        opacity: 1;


    }





    50% {


        transform: scale(1.1);


        opacity: 0.8;


    }


}





.hero-grid {


    position: absolute;


    inset: 0;


    background-image:


        linear-gradient(var(--border-light) 1px, transparent 1px),


        linear-gradient(90deg, var(--border-light) 1px, transparent 1px);


    background-size: 60px 60px;


    opacity: 0.5;


    mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);


    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);


}





[data-theme="dark"] .hero-grid {


    background-image:


        linear-gradient(var(--border-color) 1px, transparent 1px),


        linear-gradient(90deg, var(--border-color) 1px, transparent 1px);


    opacity: 0.2;


}





.hero-container {


    max-width: var(--container-max);


    margin: 0 auto;


    padding: 60px 24px;


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 60px;


    align-items: center;


}





.hero-content {


    max-width: 600px;


}





.hero-badge {


    display: inline-flex;


    align-items: center;


    gap: 10px;


    padding: 8px 20px 8px 12px;


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: var(--radius-full);


    font-size: 0.875rem;


    font-weight: 500;


    color: var(--text-secondary);


    margin-bottom: 24px;


    box-shadow: var(--shadow-sm);


    animation: slideUp 0.6s ease;


}





.badge-dot {


    width: 8px;


    height: 8px;


    background: #10b981;


    border-radius: 50%;


    animation: blink 2s ease-in-out infinite;


}





@keyframes blink {





    0%,


    100% {


        opacity: 1;


    }





    50% {


        opacity: 0.4;


    }


}





@keyframes slideUp {


    from {


        opacity: 0;


        transform: translateY(20px);


    }





    to {


        opacity: 1;


        transform: translateY(0);


    }


}





.hero-title {


    font-size: clamp(2.5rem, 5vw, 4rem);


    font-weight: 800;


    line-height: 1.1;


    margin-bottom: 24px;


    animation: slideUp 0.6s ease 0.1s both;


}





.gradient-text {


    background: var(--gradient-primary);


    -webkit-background-clip: text;


    background-clip: text;


    -webkit-text-fill-color: transparent;


}





.hero-description {


    font-size: 1.2rem;


    color: var(--text-secondary);


    margin-bottom: 32px;


    line-height: 1.7;


    animation: slideUp 0.6s ease 0.2s both;


}





.hero-buttons {


    display: flex;


    gap: 16px;


    margin-bottom: 48px;


    animation: slideUp 0.6s ease 0.3s both;


}





/* Buttons */


.btn {


    display: inline-flex;


    align-items: center;


    justify-content: center;


    gap: 10px;


    padding: 14px 28px;


    font-size: 1rem;


    font-weight: 600;


    border-radius: var(--radius-md);


    transition: all var(--transition-fast);


}





.btn-primary {


    background: var(--gradient-primary);


    color: white;


    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);


}





.btn-primary:hover {


    transform: translateY(-2px);


    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);


}





.btn-secondary {


    background: var(--bg-card);


    color: var(--text-primary);


    border: 1px solid var(--border-color);


}





.btn-secondary:hover {


    background: var(--bg-tertiary);


    border-color: var(--primary);


}





.btn-outline {


    background: transparent;


    color: var(--primary);


    border: 2px solid var(--primary);


}





.btn-outline:hover {


    background: var(--primary);


    color: white;


}





.btn-arrow {


    width: 18px;


    height: 18px;


    transition: transform var(--transition-fast);


}





.btn:hover .btn-arrow {


    transform: translateX(4px);


}





.hero-stats {


    display: flex;


    gap: 48px;


    animation: slideUp 0.6s ease 0.4s both;


}





.stat {


    display: flex;


    flex-direction: column;


    gap: 4px;


}





.stat-number {


    font-size: 2rem;


    font-weight: 800;


    background: var(--gradient-primary);


    -webkit-background-clip: text;


    background-clip: text;


    -webkit-text-fill-color: transparent;


}





.stat-label {


    font-size: 0.9rem;


    color: var(--text-tertiary);


    font-weight: 500;


}





/* Hero Visual - Code Window */


.hero-visual {


    animation: slideUp 0.6s ease 0.3s both;


}





.code-window {


    background: var(--code-bg);


    border-radius: var(--radius-lg);


    box-shadow: var(--shadow-xl), var(--shadow-glow);


    overflow: hidden;


    transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);


    transition: transform var(--transition-normal);


}





.code-window:hover {


    transform: perspective(1000px) rotateY(0) rotateX(0);


}





.code-header {


    display: flex;


    align-items: center;


    gap: 16px;


    padding: 16px 20px;


    background: #0f172a;


    border-bottom: 1px solid #334155;


}





.code-dots {


    display: flex;


    gap: 8px;


}





.dot {


    width: 12px;


    height: 12px;


    border-radius: 50%;


}





.dot.red {


    background: #ef4444;


}





.dot.yellow {


    background: #f59e0b;


}





.dot.green {


    background: #10b981;


}





.code-title {


    font-size: 0.85rem;


    color: #64748b;


    font-family: 'Fira Code', monospace;


}





.code-content {


    padding: 24px;


    font-family: 'Fira Code', monospace;


    font-size: 0.9rem;


    line-height: 1.8;


    overflow-x: auto;


    color: var(--code-text);


}





.code-content .keyword {


    color: var(--code-keyword);


}





.code-content .class-name {


    color: var(--code-class);


}





.code-content .function {


    color: var(--code-function);


}





.code-content .string {


    color: var(--code-string);


}





.code-content .macro {


    color: var(--code-macro);


}





.code-content .type {


    color: var(--code-type);


}





.code-content .comment {


    color: var(--code-comment);


    font-style: italic;


}





.hero-scroll {


    position: absolute;


    bottom: 40px;


    left: 50%;


    transform: translateX(-50%);


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 12px;


    color: var(--text-tertiary);


    font-size: 0.85rem;


    animation: fadeIn 1s ease 1s both;


}





@keyframes fadeIn {


    from {


        opacity: 0;


    }





    to {


        opacity: 1;


    }


}





.scroll-indicator {


    width: 24px;


    height: 40px;


    border: 2px solid var(--border-color);


    border-radius: 12px;


    position: relative;


}





.scroll-indicator::before {


    content: '';


    position: absolute;


    top: 8px;


    left: 50%;


    transform: translateX(-50%);


    width: 4px;


    height: 8px;


    background: var(--primary);


    border-radius: 2px;


    animation: scrollBounce 2s ease-in-out infinite;


}





@keyframes scrollBounce {





    0%,


    100% {


        transform: translateX(-50%) translateY(0);


        opacity: 1;


    }





    50% {


        transform: translateX(-50%) translateY(12px);


        opacity: 0.5;


    }


}





/* ===================================


   Section Styles


   =================================== */





section {


    padding: var(--section-padding) 0;


}





.section-header {


    text-align: center;


    max-width: 700px;


    margin: 0 auto 60px;


}





.section-label {


    display: inline-block;


    padding: 8px 16px;


    background: rgba(99, 102, 241, 0.1);


    color: var(--primary);


    font-size: 0.875rem;


    font-weight: 600;


    border-radius: var(--radius-full);


    margin-bottom: 16px;


}





.section-title {


    font-size: clamp(2rem, 4vw, 2.75rem);


    font-weight: 800;


    margin-bottom: 16px;


    line-height: 1.2;


}





.section-description {


    font-size: 1.1rem;


    color: var(--text-secondary);


    line-height: 1.7;


}





.section-cta {


    text-align: center;


    margin-top: 48px;


}





/* ===================================


   Features Section


   =================================== */





.features {


    background: var(--bg-secondary);


}





.features-grid {


    display: grid;


    grid-template-columns: repeat(3, 1fr);


    gap: 24px;


}





.feature-card {


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: var(--radius-lg);


    padding: 32px;


    transition: all var(--transition-normal);


}





.feature-card:hover {


    transform: translateY(-4px);


    box-shadow: var(--shadow-lg);


    border-color: var(--primary);


}





.feature-icon {


    font-size: 2.5rem;


    margin-bottom: 20px;


}





.feature-title {


    font-size: 1.25rem;


    font-weight: 700;


    margin-bottom: 12px;


}





.feature-description {


    color: var(--text-secondary);


    line-height: 1.6;


}





/* ===================================


   Blog Section


   =================================== */





.blog-grid {


    display: grid;


    grid-template-columns: repeat(2, 1fr);


    gap: 24px;


}





.blog-card {


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: var(--radius-lg);


    overflow: hidden;


    display: flex;


    flex-direction: column;


    transition: all var(--transition-normal);


}





.blog-card:hover {


    transform: translateY(-4px);


    box-shadow: var(--shadow-lg);


}





.blog-card.featured {


    grid-column: span 2;


    flex-direction: row;


}





.blog-image {


    position: relative;


    background: var(--gradient-primary);


    min-height: 200px;


    display: flex;


    align-items: center;


    justify-content: center;


}





.blog-card.featured .blog-image {


    min-width: 400px;


    min-height: 100%;


}





.blog-image-placeholder {


    display: flex;


    align-items: center;


    justify-content: center;


}





.blog-icon {


    font-size: 4rem;


    opacity: 0.8;


}





.blog-category {


    position: absolute;


    top: 16px;


    left: 16px;


    padding: 6px 12px;


    background: rgba(255, 255, 255, 0.9);


    color: var(--primary-dark);


    font-size: 0.75rem;


    font-weight: 600;


    border-radius: var(--radius-full);


}





.blog-content {


    padding: 24px;


    display: flex;


    flex-direction: column;


    flex-grow: 1;


}





.blog-meta {


    display: flex;


    gap: 16px;


    font-size: 0.85rem;


    color: var(--text-tertiary);


    margin-bottom: 12px;


}





.blog-title {


    font-size: 1.25rem;


    font-weight: 700;


    margin-bottom: 12px;


    line-height: 1.4;


}





.blog-excerpt {


    color: var(--text-secondary);


    line-height: 1.6;


    margin-bottom: 16px;


    flex-grow: 1;


}





.blog-tags {


    display: flex;


    gap: 8px;


    flex-wrap: wrap;


    margin-bottom: 16px;


}





.tag {


    padding: 4px 10px;


    background: var(--bg-tertiary);


    color: var(--text-secondary);


    font-size: 0.75rem;


    font-weight: 500;


    border-radius: var(--radius-full);


}





.blog-link {


    display: inline-flex;


    align-items: center;


    gap: 8px;


    color: var(--primary);


    font-weight: 600;


    font-size: 0.95rem;


}





.blog-link svg {


    width: 16px;


    height: 16px;


    transition: transform var(--transition-fast);


}





.blog-link:hover svg {


    transform: translateX(4px);


}





/* ===================================


   Tutorials Section


   =================================== */





.tutorials {


    background: var(--bg-secondary);


}





.tutorials-container {


    display: grid;


    grid-template-columns: repeat(2, 1fr);


    gap: 32px;


}





.tutorial-track {


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: var(--radius-lg);


    overflow: hidden;


}





.track-header {


    display: flex;


    align-items: center;


    gap: 16px;


    padding: 24px;


    background: var(--gradient-primary);


    color: white;


}





.track-icon {


    font-size: 2rem;


}





.track-info {


    flex-grow: 1;


}





.track-title {


    font-size: 1.2rem;


    font-weight: 700;


    margin-bottom: 4px;


}





.track-description {


    font-size: 0.9rem;


    opacity: 0.9;


}





.track-lessons {


    padding: 6px 14px;


    background: rgba(255, 255, 255, 0.2);


    border-radius: var(--radius-full);


    font-size: 0.85rem;


    font-weight: 600;


}





.track-modules {


    padding: 16px;


}





.module {


    display: flex;


    align-items: center;


    gap: 16px;


    padding: 16px;


    border-radius: var(--radius-md);


    transition: background var(--transition-fast);


}





.module:hover {


    background: var(--bg-tertiary);


}





.module-number {


    width: 40px;


    height: 40px;


    display: flex;


    align-items: center;


    justify-content: center;


    background: var(--bg-tertiary);


    border-radius: var(--radius-md);


    font-weight: 700;


    font-size: 0.9rem;


    color: var(--text-tertiary);


}





.module-content {


    flex-grow: 1;


}





.module-content h4 {


    font-size: 1rem;


    font-weight: 600;


    margin-bottom: 4px;


}





.module-content p {


    font-size: 0.85rem;


    color: var(--text-tertiary);


}





.module-status {


    width: 32px;


    height: 32px;


    display: flex;


    align-items: center;


    justify-content: center;


    border-radius: var(--radius-full);


    font-size: 0.9rem;


}





.module-status.completed {


    background: rgba(16, 185, 129, 0.15);


    color: #10b981;


}





.module-status.current {


    background: rgba(99, 102, 241, 0.15);


    color: var(--primary);


}





.track-cta {


    display: block;


    text-align: center;


    padding: 20px;


    color: var(--primary);


    font-weight: 600;


    border-top: 1px solid var(--border-color);


    transition: background var(--transition-fast);


}





.track-cta:hover {


    background: rgba(99, 102, 241, 0.05);


}





/* ===================================


   AMBA Section


   =================================== */





.amba-grid {


    display: grid;


    grid-template-columns: repeat(3, 1fr);


    gap: 24px;


}





.protocol-card {


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: var(--radius-lg);


    overflow: hidden;


    transition: all var(--transition-normal);


}





.protocol-card:hover {


    transform: translateY(-4px);


    box-shadow: var(--shadow-xl);


}





.protocol-header {


    padding: 32px 24px;


    text-align: center;


    position: relative;


}





.protocol-card.axi .protocol-header {


    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);


}





.protocol-card.ahb .protocol-header {


    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(14, 165, 233, 0.1) 100%);


}





.protocol-card.apb .protocol-header {


    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);


}





.protocol-badge {


    display: inline-block;


    padding: 4px 12px;


    background: var(--primary);


    color: white;


    font-size: 0.7rem;


    font-weight: 600;


    border-radius: var(--radius-full);


    text-transform: uppercase;


    letter-spacing: 0.5px;


    margin-bottom: 12px;


}





.protocol-card.ahb .protocol-badge {


    background: #0891b2;


}





.protocol-card.apb .protocol-badge {


    background: #059669;


}





.protocol-name {


    font-size: 2.5rem;


    font-weight: 800;


    margin-bottom: 4px;


}





.protocol-full-name {


    color: var(--text-secondary);


    font-size: 0.9rem;


}





.protocol-features {


    padding: 24px;


    border-bottom: 1px solid var(--border-color);


}





.protocol-feature {


    display: flex;


    align-items: center;


    gap: 12px;


    padding: 8px 0;


    font-size: 0.95rem;


}





.feature-icon {


    font-size: 1.1rem;


}





.protocol-topics {


    padding: 24px;


}





.protocol-topics h4 {


    font-size: 0.85rem;


    color: var(--text-tertiary);


    text-transform: uppercase;


    letter-spacing: 0.5px;


    margin-bottom: 12px;


}





.protocol-topics ul {


    list-style: none;


}





.protocol-topics li {


    padding: 6px 0;


    font-size: 0.9rem;


    color: var(--text-secondary);


    padding-left: 20px;


    position: relative;


}





.protocol-topics li::before {


    content: '→';


    position: absolute;


    left: 0;


    color: var(--primary);


}





.protocol-cta {


    display: block;


    text-align: center;


    padding: 20px;


    color: var(--primary);


    font-weight: 600;


    border-top: 1px solid var(--border-color);


    transition: all var(--transition-fast);


}





.protocol-cta:hover {


    background: rgba(99, 102, 241, 0.05);


}





/* ===================================


   Quiz Section


   =================================== */





.quiz {


    background: var(--bg-secondary);


}





.quiz-container {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 40px;


    align-items: start;


}





.quiz-demo {


    position: sticky;


    top: calc(var(--nav-height) + 24px);


}





.quiz-card {


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: var(--radius-lg);


    padding: 32px;


    box-shadow: var(--shadow-lg);


}





.quiz-progress {


    display: flex;


    justify-content: space-between;


    align-items: center;


    margin-bottom: 24px;


    font-size: 0.9rem;


    color: var(--text-secondary);


}





.progress-bar {


    width: 120px;


    height: 6px;


    background: var(--bg-tertiary);


    border-radius: var(--radius-full);


    overflow: hidden;


}





.progress-fill {


    height: 100%;


    background: var(--gradient-primary);


    border-radius: var(--radius-full);


    transition: width var(--transition-normal);


}





.quiz-question {


    font-size: 1.3rem;


    font-weight: 700;


    margin-bottom: 24px;


    line-height: 1.4;


}





.quiz-options {


    display: flex;


    flex-direction: column;


    gap: 12px;


}





.quiz-option {


    display: flex;


    align-items: center;


    gap: 16px;


    padding: 16px 20px;


    background: var(--bg-tertiary);


    border: 2px solid transparent;


    border-radius: var(--radius-md);


    text-align: left;


    transition: all var(--transition-fast);


}





.quiz-option:hover {


    border-color: var(--primary);


    background: rgba(99, 102, 241, 0.05);


}





.quiz-option.selected {


    border-color: var(--primary);


    background: rgba(99, 102, 241, 0.1);


}





.quiz-option.correct {


    border-color: #10b981;


    background: rgba(16, 185, 129, 0.1);


}





.quiz-option.incorrect {


    border-color: #ef4444;


    background: rgba(239, 68, 68, 0.1);


}





.option-letter {


    width: 32px;


    height: 32px;


    display: flex;


    align-items: center;


    justify-content: center;


    background: var(--bg-card);


    border-radius: var(--radius-md);


    font-weight: 700;


    font-size: 0.85rem;


}





.option-text {


    flex-grow: 1;


    font-size: 0.95rem;


}





.quiz-feedback {


    margin-top: 20px;


    padding: 16px;


    border-radius: var(--radius-md);


    display: none;


}





.quiz-feedback.show {


    display: block;


}





.quiz-feedback.correct {


    background: rgba(16, 185, 129, 0.1);


    color: #10b981;


}





.quiz-feedback.incorrect {


    background: rgba(239, 68, 68, 0.1);


    color: #ef4444;


}





.quiz-next {


    width: 100%;


    margin-top: 20px;


    padding: 14px;


    background: var(--gradient-primary);


    color: white;


    font-weight: 600;


    border-radius: var(--radius-md);


    transition: all var(--transition-fast);


}





.quiz-next:hover {


    transform: translateY(-2px);


    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);


}





.quiz-list h3 {


    font-size: 1.3rem;


    font-weight: 700;


    margin-bottom: 20px;


}





.quiz-items {


    display: flex;


    flex-direction: column;


    gap: 12px;


}





.quiz-item {


    display: flex;


    align-items: center;


    gap: 16px;


    padding: 20px;


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: var(--radius-md);


    transition: all var(--transition-fast);


}





.quiz-item:hover {


    border-color: var(--primary);


    transform: translateX(4px);


}





.quiz-item-icon {


    font-size: 1.5rem;


}





.quiz-item-info {


    flex-grow: 1;


}





.quiz-item-info h4 {


    font-size: 1rem;


    font-weight: 600;


    margin-bottom: 4px;


}





.quiz-item-info p {


    font-size: 0.85rem;


    color: var(--text-tertiary);


}





.quiz-item-score {


    padding: 8px 16px;


    background: var(--bg-tertiary);


    border-radius: var(--radius-full);


    font-size: 0.85rem;


    font-weight: 600;


    color: var(--text-tertiary);


}





/* ===================================


   Interview Section


   =================================== */





.interview-container {


    max-width: 900px;


    margin: 0 auto;


}





.interview-categories {


    display: flex;


    justify-content: center;


    gap: 12px;


    margin-bottom: 40px;


    flex-wrap: wrap;


}





.category-btn {


    padding: 12px 24px;


    background: var(--bg-tertiary);


    color: var(--text-secondary);


    font-weight: 600;


    border-radius: var(--radius-full);


    transition: all var(--transition-fast);


}





.category-btn:hover,


.category-btn.active {


    background: var(--primary);


    color: white;


}





.interview-questions {


    display: flex;


    flex-direction: column;


    gap: 16px;


}





.question-card {


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: var(--radius-md);


    overflow: hidden;


    cursor: pointer;


    transition: all var(--transition-fast);


}





.question-card:hover {


    border-color: var(--primary);


}





.question-card.open {


    box-shadow: var(--shadow-md);


}





.question-header {


    display: flex;


    align-items: center;


    gap: 16px;


    padding: 20px 24px;


}





.question-number {


    padding: 6px 12px;


    background: var(--gradient-primary);


    color: white;


    font-size: 0.8rem;


    font-weight: 700;


    border-radius: var(--radius-md);


}





.question-text {


    flex-grow: 1;


    font-size: 1rem;


    font-weight: 600;


}





.question-toggle {


    font-size: 1.5rem;


    color: var(--text-tertiary);


    transition: transform var(--transition-fast);


}





.question-card.open .question-toggle {


    transform: rotate(45deg);


}





.question-answer {


    display: none;


    padding: 0 24px 24px;


    border-top: 1px solid var(--border-color);


    margin-top: 0;


    animation: slideDown 0.3s ease;


}





.question-card.open .question-answer {


    display: block;


    padding-top: 24px;


}





@keyframes slideDown {


    from {


        opacity: 0;


        transform: translateY(-10px);


    }





    to {


        opacity: 1;


        transform: translateY(0);


    }


}





.question-answer p {


    margin-bottom: 12px;


    color: var(--text-secondary);


    line-height: 1.7;


}





.question-answer ul {


    margin: 12px 0;


    padding-left: 20px;


}





.question-answer li {


    margin-bottom: 8px;


    color: var(--text-secondary);


    list-style: disc;


}





.code-snippet {


    margin-top: 16px;


    background: var(--code-bg);


    border-radius: var(--radius-md);


    overflow: hidden;


}





.code-snippet pre {


    padding: 20px;


    font-family: 'Fira Code', monospace;


    font-size: 0.85rem;


    line-height: 1.7;


    overflow-x: auto;


    color: var(--code-text);


}





/* ===================================


   Forum Section


   =================================== */





.forum {


    background: var(--bg-secondary);


}





.forum-container {


    max-width: 900px;


    margin: 0 auto;


}





.forum-stats {


    display: flex;


    justify-content: center;


    gap: 60px;


    margin-bottom: 48px;


}





.forum-stat {


    text-align: center;


}





.forum-stat-number {


    display: block;


    font-size: 2.5rem;


    font-weight: 800;


    background: var(--gradient-primary);


    -webkit-background-clip: text;


    background-clip: text;


    -webkit-text-fill-color: transparent;


}





.forum-stat-label {


    font-size: 0.9rem;


    color: var(--text-tertiary);


}





.forum-threads {


    display: flex;


    flex-direction: column;


    gap: 16px;


    margin-bottom: 40px;


}





.thread-card {


    display: flex;


    gap: 20px;


    padding: 24px;


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: var(--radius-md);


    transition: all var(--transition-fast);


}





.thread-card:hover {


    border-color: var(--primary);


    box-shadow: var(--shadow-md);


}





.thread-votes {


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 4px;


}





.vote-btn {


    width: 32px;


    height: 32px;


    display: flex;


    align-items: center;


    justify-content: center;


    background: var(--bg-tertiary);


    border-radius: var(--radius-md);


    font-size: 0.8rem;


    transition: all var(--transition-fast);


}





.vote-btn:hover {


    background: var(--primary);


    color: white;


}





.vote-count {


    font-weight: 700;


    font-size: 1.1rem;


}





.thread-content {


    flex-grow: 1;


}





.thread-title {


    font-size: 1.1rem;


    font-weight: 600;


    margin-bottom: 8px;


    line-height: 1.4;


}





.thread-meta {


    display: flex;


    gap: 16px;


    font-size: 0.85rem;


    color: var(--text-tertiary);


    margin-bottom: 12px;


}





.thread-tags {


    display: flex;


    gap: 8px;


}





.forum-cta {


    display: flex;


    justify-content: center;


    gap: 16px;


}





/* ===================================


   Trends Section


   =================================== */





.trends-grid {


    display: grid;


    grid-template-columns: repeat(4, 1fr);


    gap: 24px;


}





.trend-card {


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: var(--radius-lg);


    padding: 32px;


    transition: all var(--transition-normal);


}





.trend-card:hover {


    transform: translateY(-4px);


    box-shadow: var(--shadow-lg);


    border-color: var(--primary);


}





.trend-icon {


    font-size: 2.5rem;


    margin-bottom: 20px;


}





.trend-title {


    font-size: 1.2rem;


    font-weight: 700;


    margin-bottom: 12px;


}





.trend-description {


    color: var(--text-secondary);


    font-size: 0.95rem;


    line-height: 1.6;


    margin-bottom: 20px;


}





.trend-link {


    color: var(--primary);


    font-weight: 600;


    font-size: 0.95rem;


    transition: all var(--transition-fast);


}





.trend-link:hover {


    color: var(--primary-dark);


}





/* ===================================


   Newsletter Section


   =================================== */





.newsletter {


    padding: 60px 0;


}





.newsletter-card {


    background: var(--gradient-primary);


    border-radius: var(--radius-xl);


    padding: 60px;


    display: flex;


    align-items: center;


    justify-content: space-between;


    gap: 40px;


}





.newsletter-content {


    max-width: 500px;


}





.newsletter-title {


    font-size: 2rem;


    font-weight: 800;


    color: white;


    margin-bottom: 8px;


}





.newsletter-description {


    color: rgba(255, 255, 255, 0.9);


    font-size: 1.1rem;


}





.newsletter-form {


    display: flex;


    gap: 12px;


}





.newsletter-form input {


    padding: 16px 24px;


    background: rgba(255, 255, 255, 0.2);


    border: 1px solid rgba(255, 255, 255, 0.3);


    border-radius: var(--radius-md);


    color: white;


    font-size: 1rem;


    min-width: 300px;


    outline: none;


    transition: all var(--transition-fast);


}





.newsletter-form input::placeholder {


    color: rgba(255, 255, 255, 0.7);


}





.newsletter-form input:focus {


    background: rgba(255, 255, 255, 0.3);


    border-color: white;


}





.newsletter-form .btn-primary {


    background: white;


    color: var(--primary);


    box-shadow: none;


}





.newsletter-form .btn-primary:hover {


    background: var(--bg-tertiary);


    transform: translateY(-2px);


}





/* ===================================


   Footer


   =================================== */





.footer {


    background: var(--bg-secondary);


    padding: 80px 0 40px;


    border-top: 1px solid var(--border-color);


}





.footer-grid {


    display: grid;


    grid-template-columns: 2fr 1fr 1fr 1fr;


    gap: 48px;


    margin-bottom: 60px;


}





.footer-brand .nav-logo {


    margin-bottom: 16px;


}





.footer-description {


    color: var(--text-secondary);


    line-height: 1.7;


    margin-bottom: 24px;


    max-width: 300px;


}





.footer-social {


    display: flex;


    gap: 12px;


}





.social-link {


    width: 44px;


    height: 44px;


    display: flex;


    align-items: center;


    justify-content: center;


    background: var(--bg-tertiary);


    border-radius: var(--radius-md);


    font-size: 1.1rem;


    transition: all var(--transition-fast);


}





.social-link:hover {


    background: var(--primary);


    color: white;


    transform: translateY(-2px);


}





.footer-links h4 {


    font-size: 1rem;


    font-weight: 700;


    margin-bottom: 20px;


}





.footer-links ul {


    display: flex;


    flex-direction: column;


    gap: 12px;


}





.footer-links a {


    color: var(--text-secondary);


    font-size: 0.95rem;


    transition: color var(--transition-fast);


}





.footer-links a:hover {


    color: var(--primary);


}





.footer-bottom {


    display: flex;


    justify-content: space-between;


    align-items: center;


    padding-top: 40px;


    border-top: 1px solid var(--border-color);


    color: var(--text-tertiary);


    font-size: 0.9rem;


}





.footer-legal {


    display: flex;


    gap: 24px;


}





.footer-legal a {


    color: var(--text-tertiary);


    transition: color var(--transition-fast);


}





.footer-legal a:hover {


    color: var(--primary);


}





/* ===================================


   Modal


   =================================== */





.modal {


    position: fixed;


    inset: 0;


    z-index: 2000;


    display: none;


    align-items: center;


    justify-content: center;


    padding: 24px;


}





.modal.open {


    display: flex;


}





.modal-overlay {


    position: absolute;


    inset: 0;


    background: rgba(0, 0, 0, 0.7);


    backdrop-filter: blur(4px);


}





.modal-content {


    position: relative;


    max-width: 800px;


    max-height: 90vh;


    width: 100%;


    background: var(--bg-card);


    border-radius: var(--radius-lg);


    overflow: hidden;


    animation: modalIn 0.3s ease;


}





@keyframes modalIn {


    from {


        opacity: 0;


        transform: scale(0.95) translateY(20px);


    }





    to {


        opacity: 1;


        transform: scale(1) translateY(0);


    }


}





.modal-close {


    position: absolute;


    top: 16px;


    right: 16px;


    width: 40px;


    height: 40px;


    display: flex;


    align-items: center;


    justify-content: center;


    background: var(--bg-tertiary);


    border-radius: var(--radius-full);


    font-size: 1.5rem;


    color: var(--text-secondary);


    transition: all var(--transition-fast);


    z-index: 10;


}





.modal-close:hover {


    background: var(--primary);


    color: white;


}





.modal-body {


    padding: 48px;


    max-height: 90vh;


    overflow-y: auto;


}





.modal-body h1 {


    font-size: 2rem;


    font-weight: 800;


    margin-bottom: 16px;


}





.modal-body p {


    color: var(--text-secondary);


    line-height: 1.8;


    margin-bottom: 16px;


}





.modal-body h2 {


    font-size: 1.4rem;


    font-weight: 700;


    margin: 32px 0 16px;


}





.modal-body ul {


    margin: 16px 0;


    padding-left: 24px;


}





.modal-body li {


    margin-bottom: 8px;


    color: var(--text-secondary);


    list-style: disc;


}





/* ===================================


   Responsive Design


   =================================== */





@media (max-width: 1200px) {


    .hero-container {


        grid-template-columns: 1fr;


        text-align: center;


    }





    .hero-content {


        max-width: 100%;


    }





    .hero-buttons {


        justify-content: center;


    }





    .hero-stats {


        justify-content: center;


    }





    .hero-visual {


        max-width: 600px;


        margin: 0 auto;


    }





    .code-window {


        transform: none;


    }





    .features-grid {


        grid-template-columns: repeat(2, 1fr);


    }





    .amba-grid {


        grid-template-columns: repeat(2, 1fr);


    }





    .trends-grid {


        grid-template-columns: repeat(2, 1fr);


    }


}





@media (max-width: 992px) {


    :root {


        --section-padding: 80px;


    }





    .nav-menu {


        position: fixed;


        top: var(--nav-height);


        left: 0;


        right: 0;


        background: var(--bg-primary);


        border-bottom: 1px solid var(--border-color);


        padding: 24px;


        flex-direction: column;


        gap: 8px;


        transform: translateY(-100%);


        opacity: 0;


        visibility: hidden;


        transition: all var(--transition-normal);


    }





    .nav-menu.open {


        transform: translateY(0);


        opacity: 1;


        visibility: visible;


    }





    .nav-toggle {


        display: flex;


    }





    .blog-card.featured {


        grid-column: span 1;


        flex-direction: column;


    }





    .blog-card.featured .blog-image {


        min-width: 100%;


        min-height: 200px;


    }





    .tutorials-container {


        grid-template-columns: 1fr;


    }





    .quiz-container {


        grid-template-columns: 1fr;


    }





    .quiz-demo {


        position: static;


    }





    .footer-grid {


        grid-template-columns: repeat(2, 1fr);


    }





    .newsletter-card {


        flex-direction: column;


        text-align: center;


    }





    .newsletter-form {


        flex-direction: column;


        width: 100%;


    }





    .newsletter-form input {


        min-width: 100%;


    }


}





@media (max-width: 768px) {


    :root {


        --section-padding: 60px;


        --nav-height: 70px;


    }





    .hero-title {


        font-size: 2.2rem;


    }





    .hero-description {


        font-size: 1rem;


    }





    .hero-buttons {


        flex-direction: column;


        gap: 12px;


    }





    .hero-stats {


        flex-direction: column;


        gap: 24px;


    }





    .hero-scroll {


        display: none;


    }





    .features-grid,


    .blog-grid,


    .amba-grid,


    .trends-grid {


        grid-template-columns: 1fr;


    }





    .forum-stats {


        flex-direction: column;


        gap: 24px;


    }





    .footer-grid {


        grid-template-columns: 1fr;


        gap: 32px;


    }





    .footer-bottom {


        flex-direction: column;


        gap: 16px;


        text-align: center;


    }





    .thread-card {


        flex-direction: column;


    }





    .thread-votes {


        flex-direction: row;


        justify-content: flex-start;


    }





    .interview-categories {


        gap: 8px;


    }





    .category-btn {


        padding: 10px 16px;


        font-size: 0.9rem;


    }





    .modal-body {


        padding: 24px;


    }


}





@media (max-width: 480px) {





    /* LOGO FIXES */


    .nav-logo {


        gap: 6px;


        white-space: nowrap;


        /* Never wrap text */


        max-width: 70%;


        /* Leave room for hamburger */


    }





    .logo-text {


        font-size: 1.1rem;


        /* Scale down from 1.5rem */


    }





    .logo-icon {


        font-size: 1.2rem;


    }





    .container {


        padding: 0 16px;


    }





    .nav-container {


        padding: 0 16px;


    }





    .hero-container {


        padding: 40px 16px;


    }





    .hero-title {


        font-size: 1.8rem;


    }





    .btn {


        padding: 12px 20px;


        font-size: 0.9rem;


    }





    .section-title {


        font-size: 1.6rem;


    }





    .code-content {


        font-size: 0.75rem;


        padding: 16px;


    }





    .feature-card,


    .blog-content,


    .protocol-header,


    .protocol-features,


    .protocol-topics {


        padding: 20px;


    }





    .quiz-card {


        padding: 20px;


    }





    .question-header {


        padding: 16px;


    }





    .question-answer {


        padding: 0 16px 16px;


    }





    .thread-card {


        padding: 16px;


    }





    .newsletter-card {


        padding: 32px 20px;


    }


}





/* Smooth scrolling for older browsers */


@supports not (scroll-behavior: smooth) {


    html {


        scroll-behavior: auto;


    }


}





/* Print styles */


@media print {





    .navbar,


    .hero-scroll,


    .theme-toggle,


    .newsletter,


    .footer-social {


        display: none !important;


    }





    body {


        background: white;


        color: black;


    }





    .hero {


        min-height: auto;


        padding: 40px 0;


    }


}





/* ===================================


   AdSense Placeholders


   =================================== */





.ad-placeholder-sidebar {


    width: 100%;


    height: 250px;


    /* Standard rect ad size */


    background-color: var(--bg-tertiary);


    border: 1px dashed var(--border-color);


    border-radius: var(--radius-md);


    margin-top: 24px;


    display: flex;


    align-items: center;


    justify-content: center;


    color: var(--text-tertiary);


    font-size: 0.875rem;


    font-weight: 500;


}








.ad-placeholder-sidebar::before {


    content: 'Advertisement';


}





/* Vertical Ad Rails (Skyscrapers) */


.ad-rail-left,


.ad-rail-right {


    position: fixed;


    top: calc(var(--nav-height) + 40px);


    width: 160px;


    height: 600px;


    background-color: var(--bg-tertiary);


    border: 1px dashed var(--border-color);


    display: flex;


    align-items: center;


    justify-content: center;


    color: var(--text-tertiary);


    font-size: 0.875rem;


    z-index: 10;


    display: none;


    /* Hidden by default on small screens */


}





.ad-rail-left::before,


.ad-rail-right::before {


    content: "Ad Rail";


    transform: rotate(-90deg);


}





.ad-rail-left {


    left: 20px;


}





.ad-rail-right {


    right: 20px;


}





/* Show Rails on very wide screens */


@media (min-width: 2000px) {





    .ad-rail-left,


    .ad-rail-right {


        display: flex;


    }


}





/* Top Content Banner */


.ad-banner-top {


    width: 100%;


    height: 90px;


    /* Leaderboard size */


    background-color: var(--bg-tertiary);


    border: 1px dashed var(--border-color);


    border-radius: var(--radius-md);


    margin-bottom: 30px;


    display: flex;


    align-items: center;


    justify-content: center;


    color: var(--text-tertiary);


    font-size: 0.875rem;


}





.ad-banner-top::before {


    content: "Advertisement - Top Banner";


}





/* Update Note Badge */


.hero-update-note {


    background: rgba(99, 102, 241, 0.1);


    border: 1px solid rgba(99, 102, 241, 0.3);


    color: var(--primary);


    padding: 8px 16px;


    border-radius: 20px;


    display: inline-flex;


    align-items: center;


    gap: 8px;


    margin-bottom: 24px;


    font-size: 0.9rem;


    font-weight: 500;


}





/* Interactive Feature Cards for Homepage */


.feature-card-link {


    text-decoration: none;


    color: inherit;


    display: block;


    transition: transform var(--transition-fast);


}





.feature-card-link:hover {


    transform: translateY(-5px);


}





.feature-item.interactive {


    height: 100%;


    display: flex;


    flex-direction: column;


    align-items: flex-start;


    padding: 1.5rem;


    gap: 1rem;


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    box-shadow: var(--shadow-sm);


    transition: all var(--transition-normal);


}





.feature-card-link:hover .feature-item.interactive {


    border-color: var(--primary);


    box-shadow: var(--shadow-lg);


    background: linear-gradient(to bottom right, var(--bg-card), rgba(99, 102, 241, 0.05));


    cursor: pointer;


}





.feature-item.interactive .feature-icon {


    font-size: 2rem;


    background: rgba(99, 102, 241, 0.1);


    width: 50px;


    height: 50px;


    display: flex;


    align-items: center;


    justify-content: center;


    border-radius: 12px;


}





.feature-text h3 {


    font-size: 1.1rem;


    font-weight: 700;


    margin-bottom: 0.25rem;


    color: var(--text-primary);


}





.feature-text p {


    font-size: 0.9rem;


    color: var(--text-secondary);


    line-height: 1.4;


    margin: 0;


}





/* Mobile Responsive adjustment */


@media (max-width: 600px) {


    .hero-minimal-features {


        grid-template-columns: 1fr !important;


    }


}





/* ===================================


   Visual Enhancements (TL;DR & TOC)


   =================================== */





/* TL;DR Box (Key Takeaways) */


.tldr-box {


    background: linear-gradient(to right, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.05));


    border-left: 4px solid var(--primary);


    padding: 1.5rem;


    margin-bottom: 2rem;


    border-radius: 0 8px 8px 0;


}





.tldr-header {


    display: flex;


    align-items: center;


    gap: 8px;


    font-weight: 700;


    color: var(--primary);


    margin-bottom: 0.75rem;


    font-size: 0.95rem;


    text-transform: uppercase;


    letter-spacing: 0.5px;


}





.tldr-content {


    font-size: 0.95rem;


    color: var(--text-secondary);


    line-height: 1.6;


}





.tldr-content ul {


    margin: 0;


    padding-left: 1.25rem;


}





.tldr-content li {


    margin-bottom: 0.25rem;


}


.update-message {
    /* Using CSS Variables for easy updates across the site */

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background: var(--bg-card);

    border: 1px solid rgba(0, 7, 14, 0.863);

    color: #1c06e694;

    padding: 10px 24px;

    border-radius: 9999px;

    text-decoration: none;

    font-size: 1rem;

    font-weight: 600;

    margin-bottom: 32px;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 4px 15px rgba(64, 5, 141, 0.829), 0 0 10px rgba(241, 196, 15, 0.05);

    text-align: center;
    margin-inline: auto;

}


/* Table of Contents (Inline Block) */


.toc-container {


    position: relative;


    /* Not fixed anymore */


    width: 100%;


    max-width: 400px;


    margin: 2rem 0;


    padding: 1.25rem;


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: 8px;


    box-shadow: var(--shadow-sm);


    /* Subtler shadow */


    display: none;


    /* JS will toggle this only if headers exist */


    max-height: none;


    z-index: 1;


}











.toc-title {


    font-size: 0.9rem;


    font-weight: 700;


    color: var(--text-primary);


    /* Darker text */


    text-transform: uppercase;


    margin-bottom: 0.75rem;


    letter-spacing: 0.5px;


    border-bottom: 1px solid var(--border-color);


    padding-bottom: 0.5rem;


}





.toc-list {


    list-style: none;


    padding: 0;


    margin: 0;


}





.toc-item {


    margin-bottom: 8px;


}





.toc-link {


    display: inline-block;


    font-size: 0.95rem;


    /* Slightly larger for readability */


    color: var(--primary);


    /* Link color by default */


    text-decoration: none;


    transition: all 0.2s;


    line-height: 1.4;


    border-bottom: 1px dashed transparent;


}





.toc-link:hover {


    color: var(--accent-primary);


    border-bottom-color: var(--accent-primary);


}





.toc-item.h3-item .toc-link {


    padding-left: 20px;


    font-size: 0.9rem;


    color: var(--text-secondary);


}





/* Show on all screens if content exists */


.toc-container.visible {


    display: block;


}





/* Daily Quiz Hero Banner */


.quiz-hero-banner {


    display: inline-flex;


    align-items: center;


    gap: 10px;


    background: var(--bg-card);


    border: 1px solid rgba(241, 196, 15, 0.3);


    color: #f1c40f;


    /* Vibrant Gold */


    padding: 10px 24px;


    border-radius: 9999px;


    text-decoration: none;


    font-size: 1rem;


    font-weight: 600;


    margin-bottom: 32px;


    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);


    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 0 10px rgba(241, 196, 15, 0.05);


}





.quiz-hero-banner:hover {


    background: var(--bg-secondary);


    border-color: #f1c40f;


    transform: translateY(-3px) scale(1.02);


    box-shadow: 0 6px 20px rgba(241, 196, 15, 0.2);


    color: #ffd700;


}





.pulse-emoji {


    animation: pulse-scale 2s infinite;


    display: inline-block;


}





@keyframes pulse-scale {


    0% {


        transform: scale(1);


    }





    50% {


        transform: scale(1.2);


    }





    100% {


        transform: scale(1);


    }


}





/* Back to Top Button */


#back-to-top {


    position: fixed;


    bottom: 30px;


    right: 30px;


    background: var(--primary);


    color: white;


    width: 50px;


    height: 50px;


    border-radius: 50%;


    border: none;


    cursor: pointer;


    box-shadow: var(--shadow-lg);


    z-index: 1000;


    opacity: 0;


    visibility: hidden;


    transform: translateY(20px);


    transition: all 0.3s ease;


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 24px;


}





#back-to-top.visible {


    opacity: 1;


    visibility: visible;


    transform: translateY(0);


}





#back-to-top:hover {


    background: var(--primary-dark);


    transform: translateY(-5px);


    box-shadow: var(--shadow-glow);


}

/* ===========================================


   Page Layout Styles for Individual Pages


   =========================================== */





/* Page Layout - Two Column: Sidebar + Content */


.page-layout {


    display: flex;


    min-height: calc(100vh - 80px);


    padding-top: 80px;


    max-width: 1400px;


    margin: 0 auto;


    position: relative;


    z-index: 1;


    /* Ensure above background elements */


}





/* Sidebar Styles */


.sidebar {


    width: 280px;


    min-width: 280px;


    background: var(--bg-secondary);


    border-right: 1px solid var(--border-color);


    padding: 2rem 1.5rem;


    position: sticky;


    top: 80px;


    height: calc(100vh - 80px);


    overflow-y: auto;


}





.sidebar-title {


    font-size: 1.25rem;


    font-weight: 700;


    color: var(--text-primary);


    margin-bottom: 1.5rem;


    padding-bottom: 1rem;


    border-bottom: 1px solid var(--border-color);


}





.sidebar-nav {


    list-style: none;


    padding: 0;


    margin: 0;


}





.sidebar-nav li {


    margin-bottom: 0.25rem;


}





.sidebar-link {


    display: block;


    padding: 0.75rem 1rem;


    color: var(--text-secondary);


    text-decoration: none;


    border-radius: 8px;


    transition: all 0.2s ease;


    font-size: 0.95rem;


}





.sidebar-link:hover {


    background: var(--bg-tertiary);


    color: var(--text-primary);


}





.sidebar-link.active {


    background: linear-gradient(135deg, #6366f1, #8b5cf6);


    color: #ffffff;


    font-weight: 600;


    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);


}





/* Sidebar with Topics and Subtopics */


.sidebar-topic {


    margin-bottom: 1.5rem;


}





.sidebar-topic-title {


    font-size: 0.85rem;


    font-weight: 600;


    color: var(--text-tertiary);


    text-transform: uppercase;


    letter-spacing: 0.5px;


    margin-bottom: 0.75rem;


    padding-left: 0.5rem;


}





.sidebar-subtopics {


    list-style: none;


    padding: 0;


    margin: 0;


}





.sidebar-subtopics li {


    margin-bottom: 0.15rem;


}





.sidebar-subtopics .sidebar-link {


    padding: 0.5rem 1rem;


    font-size: 0.9rem;


}





/* Main Content Area */


.main-content {


    flex: 1;


    padding: 2rem 3rem;


    max-width: 900px;


    position: relative;


    /* Context for absolute children if any */


}





.content-header {


    margin-bottom: 2rem;


    /* Reduced from 3rem */


    padding-bottom: 1.5rem;


    /* Reduced from 2rem */


    border-bottom: 1px solid var(--border-color);


}





.page-title {


    font-size: 2.5rem;


    font-weight: 800;


    color: var(--text-primary);


    margin-bottom: 1rem;


}





.page-description {


    font-size: 1.1rem;


    color: var(--text-secondary);


    line-height: 1.7;


}





/* Breadcrumb */


.breadcrumb {


    margin-bottom: 1rem;


    /* Reduced from 1.5rem */


    font-size: 0.9rem;


}





.breadcrumb a {


    color: var(--accent-primary);


    text-decoration: none;


}





.breadcrumb a:hover {


    text-decoration: underline;


}





.breadcrumb span {


    color: var(--text-tertiary);


    margin: 0 0.5rem;


}





/* Content Sections */


.content-sections {


    display: flex;


    flex-direction: column;


    gap: 3rem;


}





.content-section {


    padding-bottom: 2rem;


    border-bottom: 1px solid var(--border-color);


}





.content-section:last-child {


    border-bottom: none;


}





.section-heading {


    font-size: 1.75rem;


    font-weight: 700;


    color: var(--text-primary);


    margin-bottom: 1.5rem;


}





.section-content {


    color: var(--text-secondary);


    line-height: 1.8;


    font-size: 1rem;


}





.section-content p {


    margin-bottom: 1rem;


}





.section-content h3 {


    font-size: 1.25rem;


    font-weight: 600;


    color: var(--text-primary);


    margin: 1.5rem 0 1rem;


}





.section-content ul,


.section-content ol {


    margin: 1rem 0;


    padding-left: 1.5rem;


}





.section-content li {


    margin-bottom: 0.5rem;


}





.section-content code {


    background: var(--bg-tertiary);


    padding: 0.2rem 0.5rem;


    border-radius: 4px;


    font-family: 'Fira Code', monospace;


    font-size: 0.9em;


    color: var(--accent-primary);


}





.section-content pre {


    background: var(--bg-tertiary);


    padding: 1.5rem;


    border-radius: 8px;


    overflow-x: auto;


    margin: 1.5rem 0;


    border: 1px solid var(--border-color);


}





.section-content pre code {


    background: none;


    padding: 0;


    font-size: 0.85rem;


    color: var(--text-primary);


}





/* Code blocks with syntax highlighting */


.code-block {


    background: var(--code-bg);


    /* Always Dark Background for Better Contrast */


    border: 1px solid var(--border-color);


    border-radius: 8px;


    margin: 1.5rem 0;


    overflow: hidden;


}





.code-block-header {


    background: rgba(0, 0, 0, 0.2);


    padding: 0.75rem 1rem;


    font-size: 0.85rem;


    color: var(--text-tertiary);


    border-bottom: 1px solid var(--border-color);


    font-family: 'Fira Code', monospace;


}





.code-block pre {


    margin: 0;


    padding: 1.5rem;


    border: none;


    background: none;


    color: var(--code-text);


    /* Force White Text */


    text-shadow: none;


    /* remove any default shadow that might blur it */


}





/* Force Prism to respect our color */


:not(pre)>code[class*="language-"],


pre[class*="language-"],


pre code {


    background: transparent !important;


    text-shadow: none !important;


    color: inherit;


}





code[class*="language-"],


pre[class*="language-"] {


    color: #e2e8f0 !important;


    /* Force Light Text */


}





/* Navigation Pagination */


.content-nav {


    display: flex;


    justify-content: space-between;


    margin-top: 3rem;


    padding-top: 2rem;


    border-top: 1px solid var(--border-color);


}





.content-nav a {


    display: flex;


    flex-direction: column;


    padding: 1rem 1.5rem;


    background: var(--bg-secondary);


    border: 1px solid var(--border-color);


    border-radius: 8px;


    text-decoration: none;


    transition: all 0.2s ease;


    max-width: 45%;


}





.content-nav a:hover {


    border-color: var(--accent-primary);


    background: var(--bg-tertiary);


}





.content-nav .nav-label {


    font-size: 0.8rem;


    color: var(--text-tertiary);


    text-transform: uppercase;


    letter-spacing: 0.5px;


    margin-bottom: 0.25rem;


}





.content-nav .nav-title {


    color: var(--text-primary);


    font-weight: 600;


}





.content-nav .prev-link {


    text-align: left;


}





.content-nav .next-link {


    text-align: right;


    margin-left: auto;


}





/* Dropdown Navigation Styles */


.nav-item.has-dropdown {


    position: relative;


}





.nav-item.has-dropdown>.nav-link {


    display: flex;


    align-items: center;


    gap: 0.25rem;


}





.nav-item.has-dropdown>.nav-link::after {


    content: '� �';


    font-size: 0.6rem;


    margin-left: 0.25rem;


    transition: transform 0.2s ease;


}





.nav-item.has-dropdown:hover>.nav-link::after {


    transform: rotate(180deg);


}





.dropdown-menu {


    position: absolute;


    top: 100%;


    left: 0;


    min-width: 200px;


    background: var(--bg-secondary);


    border: 1px solid var(--border-color);


    border-radius: 8px;


    padding: 0.5rem 0;


    opacity: 0;


    visibility: hidden;


    transform: translateY(10px);


    transition: all 0.2s ease;


    z-index: 1000;


    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);


}





.nav-item.has-dropdown:hover .dropdown-menu {


    opacity: 1;


    visibility: visible;


    transform: translateY(0);


}





.dropdown-menu a {


    display: block;


    padding: 0.75rem 1.25rem;


    color: var(--text-secondary);


    text-decoration: none;


    font-size: 0.9rem;


    transition: all 0.2s ease;


}





.dropdown-menu a:hover {


    background: var(--bg-tertiary);


    color: var(--text-primary);


}





.dropdown-divider {


    height: 1px;


    background: var(--border-color);


    margin: 0.5rem 0;


}





/* Responsive Design */


@media (max-width: 1024px) {


    .page-layout {


        flex-direction: column;


    }





    /* FIX: Show Content FIRST, Sidebar SECOND */


    .main-content {


        order: 1;


    }





    .sidebar {


        order: 2;


        width: 100%;


        min-width: 100%;


        height: auto;


        position: relative;


        top: 0;


        border-right: none;


        border-top: 1px solid var(--border-color);


        /* Separator on top now */


        border-bottom: 1px solid var(--border-color);


        margin-top: 2rem;


    }





    .sidebar-nav {


        display: flex;


        flex-wrap: wrap;


        gap: 0.5rem;


    }





    .sidebar-nav li {


        margin-bottom: 0;


    }





    .sidebar-link {


        padding: 0.5rem 0.75rem;


        font-size: 0.85rem;


    }





    .main-content {


        padding: 2rem 1.5rem;


    }





    .page-title {


        font-size: 2rem;


    }





    .dropdown-menu {


        position: static;


        opacity: 1;


        visibility: visible;


        transform: none;


        box-shadow: none;


        display: none;


    }





    .nav-item.has-dropdown.active .dropdown-menu {


        display: block;


    }


}





@media (max-width: 768px) {


    .page-layout {


        padding-top: 70px;


    }





    .sidebar {


        padding: 1.5rem 1rem;


    }





    .main-content {


        padding: 1.5rem 1rem;


    }





    .page-title {


        font-size: 1.75rem;


    }





    .section-heading {


        font-size: 1.5rem;


    }





    .content-nav {


        flex-direction: column;


        gap: 1rem;


    }





    .content-nav a {


        max-width: 100%;


    }


}





/* Simplified Footer for subpages */


.footer {


    margin-top: auto;


}





.footer .footer-bottom {


    padding: 1.5rem 0;


}





/* ===================================


   ADVERTISING LAYOUT STYLES


   =================================== */





.ad-rail-left,


.ad-rail-right {


    position: fixed;


    top: 90px;


    width: 160px;


    height: calc(100vh - 90px);


    z-index: 5;


    display: none;


    /* Hidden by default until we confirm overlap space */


}





@media (min-width: 2000px) {





    /* Only show rails on very wide screens where they won't overlap content */


    .ad-rail-left {


        display: block;


        left: 20px;


    }





    .ad-rail-right {


        display: block;


        right: 20px;


    }


}





.ad-banner-top {


    width: 100%;


    min-height: 0px;


    /* Collapse if empty */


    margin-bottom: 1rem;


    display: flex;


    justify-content: center;


    align-items: center;


    overflow: hidden;


}





.ad-banner-top.has-ad {


    min-height: 90px;


    margin-bottom: 2rem;


}





/* ===================================


   Minimalistic Hero Section for Homepage


   =================================== */


.hero-minimal {


    min-height: calc(100vh - 80px);


    padding-top: 120px;


    padding-bottom: 4rem;


    display: flex;


    align-items: center;


    justify-content: center;


}





.hero-minimal-content {


    max-width: 800px;


    margin: 0 auto;


    padding: 0 2rem;


    text-align: center;


}





.hero-minimal-title {


    font-size: 3rem;


    font-weight: 800;


    color: var(--text-primary);


    margin-bottom: 2rem;


    line-height: 1.2;


}





.hero-minimal-description {


    font-size: 1.2rem;


    color: var(--text-secondary);


    line-height: 1.8;


    margin-bottom: 3rem;


}





.hero-minimal-features {


    display: flex;


    flex-wrap: wrap;


    justify-content: center;


    gap: 1.5rem;


    margin-bottom: 3rem;


}





.feature-item {


    display: flex;


    align-items: center;


    gap: 0.5rem;


    padding: 0.75rem 1.25rem;


    background: var(--bg-secondary);


    border: 1px solid var(--border-color);


    border-radius: 8px;


    font-size: 0.95rem;


    color: var(--text-primary);


}





.feature-icon {


    font-size: 1.25rem;


}





.hero-minimal-cta {


    color: var(--text-tertiary);


    font-size: 1rem;


}





@media (max-width: 768px) {


    .hero-minimal {


        padding-top: 100px;


    }





    .hero-minimal-title {


        font-size: 2rem;


    }





    .hero-minimal-description {


        font-size: 1rem;


    }





    .feature-item {


        width: 100%;


        justify-content: center;


    }


}





/* ===================================


   Ad Placeholder Styles (AdSense Ready)


   =================================== */





/* Sidebar Ad Placeholder */


.ad-placeholder-sidebar {


    margin-top: 2rem;


    padding: 1rem;


    min-height: 250px;


    background: var(--bg-tertiary);


    border: 1px dashed var(--border-color);


    border-radius: 8px;


    display: flex;


    align-items: center;


    justify-content: center;


    color: var(--text-tertiary);


    font-size: 0.8rem;


    text-align: center;


}





/* Content Ad Placeholder - Between sections */


.ad-placeholder-content {


    margin: 2rem 0;


    padding: 1.5rem;


    min-height: 100px;


    background: var(--bg-tertiary);


    border: 1px dashed var(--border-color);


    border-radius: 8px;


    display: flex;


    align-items: center;


    justify-content: center;


    color: var(--text-tertiary);


    font-size: 0.8rem;


    text-align: center;


}





/* Footer Ad Placeholder */


.ad-placeholder-footer {


    margin: 2rem auto;


    padding: 1.5rem;


    max-width: 728px;


    min-height: 90px;


    background: var(--bg-tertiary);


    border: 1px dashed var(--border-color);


    border-radius: 8px;


    display: flex;


    align-items: center;


    justify-content: center;


    color: var(--text-tertiary);


    font-size: 0.8rem;


    text-align: center;


}





/* Hide ad placeholder text when ads are active */


.ad-placeholder-sidebar.ad-active,


.ad-placeholder-content.ad-active,


.ad-placeholder-footer.ad-active {


    background: transparent;


    border: none;


    padding: 0;


    min-height: auto;


}





/* Responsive ad adjustments */


@media (max-width: 768px) {


    .ad-placeholder-sidebar {


        min-height: 100px;


    }





    .ad-placeholder-footer {


        max-width: 100%;


        margin: 1rem;


    }


}





/* ===================================


   MOBILE STABILITY FIXES (PREVENT GLITCHING)


   =================================== */


@media (max-width: 768px) {





    html,


    body {


        overflow-x: hidden;


        /* Stop horizontal scroll */


        width: 100%;


        position: relative;


    }





    .page-layout {


        width: 100%;


        overflow-x: hidden;


    }





    .sidebar {


        max-width: 100%;


        box-sizing: border-box;


        /* Make sidebar collapsible or smaller if needed, for now ensure no overflow */


    }





    .main-content {


        max-width: 100vw;


        /* Ensure content doesn't stretch page */


        box-sizing: border-box;


        overflow-x: hidden;


        padding-left: 1rem;


        padding-right: 1rem;


    }





    .code-block,


    pre {


        max-width: 100%;


        width: 100%;


        overflow-x: auto;


        /* Allow code to scroll internally */


    }





    /* Ad Containment */


    .ad-placeholder-sidebar,


    .ad-banner-top,


    ins.adsbygoogle {


        max-width: 100% !important;


        overflow: hidden;


        box-sizing: border-box;


    }


}





/* ===================================


   Enhanced Beginner-Friendly Styles


   =================================== */





/* Info boxes for key concepts */


.info-box {


    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);


    border-left: 4px solid var(--primary);


    padding: 1.25rem 1.5rem;


    margin: 1.5rem 0;


    border-radius: 0 8px 8px 0;


}





.info-box h4 {


    color: var(--primary);


    margin-bottom: 0.5rem;


    font-size: 1rem;


    font-weight: 600;


}





.info-box p {


    margin: 0;


    color: var(--text-secondary);


}





/* Tip boxes */


.tip-box {


    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);


    border-left: 4px solid #10b981;


    padding: 1.25rem 1.5rem;


    margin: 1.5rem 0;


    border-radius: 0 8px 8px 0;


}





.tip-box h4 {


    color: #10b981;


    margin-bottom: 0.5rem;


    font-size: 1rem;


    font-weight: 600;


}





.tip-box p {


    margin: 0;


    color: var(--text-secondary);


}





/* Warning boxes */


.warning-box {


    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);


    border-left: 4px solid #f59e0b;


    padding: 1.25rem 1.5rem;


    margin: 1.5rem 0;


    border-radius: 0 8px 8px 0;


}





.warning-box h4 {


    color: #f59e0b;


    margin-bottom: 0.5rem;


    font-size: 1rem;


    font-weight: 600;


}





.warning-box p {


    margin: 0;


    color: var(--text-secondary);


}





/* Simple analogy styling */


.analogy {


    font-style: italic;


    color: var(--text-secondary);


    padding: 1rem 1.5rem;


    background: var(--bg-secondary);


    border-radius: 8px;


    margin: 1rem 0;


}





.analogy::before {


    content: '�x
 � ';


}





/* Key terms highlighting */


.key-term {


    font-weight: 600;


    color: var(--primary);


}





/* Comparison Table Styles */


.comparison-table {


    width: 100%;


    border-collapse: collapse;


    margin: 1.5rem 0;


    font-size: 0.95rem;


    border-radius: 8px;


    overflow: hidden;


    box-shadow: var(--shadow-sm);


    border: 1px solid var(--border-color);


}





.comparison-table thead {


    background-color: var(--bg-tertiary);


    border-bottom: 2px solid var(--border-color);


}





.comparison-table th {


    padding: 12px 16px;


    text-align: left;


    font-weight: 600;


    color: var(--text-primary);


    text-transform: uppercase;


    font-size: 0.85rem;


    letter-spacing: 0.5px;


}





.comparison-table td {


    padding: 12px 16px;


    border-bottom: 1px solid var(--border-color);


    color: var(--text-secondary);


}





.comparison-table tr:last-child td {


    border-bottom: none;


}





.comparison-table tr:hover {


    background-color: var(--bg-card);


}





/* ===================================


   INTERVIEW Q&A STYLES (STRUCTURED)


   =================================== */





.qa-card {


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: 12px;


    padding: 1.5rem;


    margin-bottom: 1.5rem;


    transition: all 0.3s ease;


}





.qa-card:hover {


    border-color: var(--primary);


    box-shadow: var(--shadow-md);


}





.qa-question {


    font-weight: 600;


    color: var(--text-primary);


    margin-bottom: 1rem;


    font-size: 1.1rem;


    display: flex;


    align-items: flex-start;


    gap: 0.75rem;


}





.qa-question::before {


    content: "Q";


    background: var(--primary);


    color: white;


    padding: 2px 8px;


    border-radius: 4px;


    font-size: 0.85rem;


    flex-shrink: 0;


}





.qa-answer {


    color: var(--text-secondary);


    padding-left: 2rem;


    line-height: 1.7;


}





/* Clean Answer Code Blocks */


.qa-answer :not(pre)>code {


    background: var(--bg-tertiary);


    padding: 2px 6px;


    border-radius: 4px;


    font-family: 'Fira Code', monospace;


    color: var(--accent-primary);


}





.qa-answer pre code {


    background: none;


    padding: 0;


}





.difficulty-badge {


    display: inline-block;


    padding: 2px 8px;


    border-radius: 12px;


    font-size: 0.75rem;


    font-weight: 600;


    margin-left: 0.5rem;


}





.difficulty-beginner {


    background: rgba(34, 197, 94, 0.15);


    color: #22c55e;


}





.difficulty-intermediate {


    background: rgba(234, 179, 8, 0.15);


    color: #eab308;


}





.difficulty-advanced {


    background: rgba(239, 68, 68, 0.15);


    color: #ef4444;


}





.topic-header {


    display: flex;


    align-items: center;


    gap: 0.75rem;


    margin: 2rem 0 1rem 0;


}





.topic-header h2 {


    margin: 0;


    font-size: 1.4rem;


}





.topic-header .difficulty-badge {


    margin-left: 0;


    /* Reset for header */


}






/* ===========================================

   CONSOLIDATED PAGE STYLES (FROM page-styles.css)

   =========================================== */

/* ===========================================

   Page Layout Styles for Individual Pages

   =========================================== */



/* Page Layout - Two Column: Sidebar + Content */

.page-layout {

    display: flex;

    min-height: calc(100vh - 80px);

    padding-top: 80px;

    max-width: 1400px;

    margin: 0 auto;

    position: relative;

    z-index: 1;

    /* Ensure above background elements */

}



/* Sidebar Styles */

.sidebar {

    width: 280px;

    min-width: 280px;

    background: var(--bg-secondary);

    border-right: 1px solid var(--border-color);

    padding: 2rem 1.5rem;

    position: sticky;

    top: 80px;

    height: calc(100vh - 80px);

    overflow-y: auto;

}



.sidebar-title {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 1.5rem;

    padding-bottom: 1rem;

    border-bottom: 1px solid var(--border-color);

}



.sidebar-nav {

    list-style: none;

    padding: 0;

    margin: 0;

}



.sidebar-nav li {

    margin-bottom: 0.25rem;

}



.sidebar-link {

    display: block;

    padding: 0.75rem 1rem;

    color: var(--text-secondary);

    text-decoration: none;

    border-radius: 8px;

    transition: all 0.2s ease;

    font-size: 0.95rem;

}



.sidebar-link:hover {

    background: var(--bg-tertiary);

    color: var(--text-primary);

}



.sidebar-link.active {

    background: linear-gradient(135deg, #6366f1, #8b5cf6);

    color: #ffffff;

    font-weight: 600;

    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);

}



/* Sidebar with Topics and Subtopics */

.sidebar-topic {

    margin-bottom: 1.5rem;

}



.sidebar-topic-title {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--text-tertiary);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 0.75rem;

    padding-left: 0.5rem;

}



.sidebar-subtopics {

    list-style: none;

    padding: 0;

    margin: 0;

}



.sidebar-subtopics li {

    margin-bottom: 0.15rem;

}



.sidebar-subtopics .sidebar-link {

    padding: 0.5rem 1rem;

    font-size: 0.9rem;

}



/* Main Content Area */

.main-content {

    flex: 1;

    padding: 2rem 3rem;

    max-width: 900px;

    position: relative;

    /* Context for absolute children if any */

}



.content-header {

    margin-bottom: 2rem;

    /* Reduced from 3rem */

    padding-bottom: 1.5rem;

    /* Reduced from 2rem */

    border-bottom: 1px solid var(--border-color);

}



.page-title {

    font-size: 2.5rem;

    font-weight: 800;

    color: var(--text-primary);

    margin-bottom: 1rem;

}



.page-description {

    font-size: 1.1rem;

    color: var(--text-secondary);

    line-height: 1.7;

}



/* Breadcrumb */

.breadcrumb {

    margin-bottom: 1rem;

    /* Reduced from 1.5rem */

    font-size: 0.9rem;

}



.breadcrumb a {

    color: var(--accent-primary);

    text-decoration: none;

}



.breadcrumb a:hover {

    text-decoration: underline;

}



.breadcrumb span {

    color: var(--text-tertiary);

    margin: 0 0.5rem;

}



/* Content Sections */

.content-sections {

    display: flex;

    flex-direction: column;

    gap: 3rem;

}



.content-section {

    padding-bottom: 2rem;

    border-bottom: 1px solid var(--border-color);

}



.content-section:last-child {

    border-bottom: none;

}



.section-heading {

    font-size: 1.75rem;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 1.5rem;

}



.section-content {

    color: var(--text-secondary);

    line-height: 1.8;

    font-size: 1rem;

}



.section-content p {

    margin-bottom: 1rem;

}



.section-content h3 {

    font-size: 1.25rem;

    font-weight: 600;

    color: var(--text-primary);

    margin: 1.5rem 0 1rem;

}



.section-content ul,

.section-content ol {

    margin: 1rem 0;

    padding-left: 1.5rem;

}



.section-content li {

    margin-bottom: 0.5rem;

}



.section-content code {

    background: var(--bg-tertiary);

    padding: 0.2rem 0.5rem;

    border-radius: 4px;

    font-family: 'Fira Code', monospace;

    font-size: 0.9em;

    color: var(--accent-primary);

}



.section-content pre {

    background: var(--bg-tertiary);

    padding: 1.5rem;

    border-radius: 8px;

    overflow-x: auto;

    margin: 1.5rem 0;

    border: 1px solid var(--border-color);

}



.section-content pre code {

    background: none;

    padding: 0;

    font-size: 0.85rem;

    color: var(--text-primary);

}



/* Code blocks with syntax highlighting */

.code-block {

    background: var(--code-bg);

    /* Always Dark Background for Better Contrast */

    border: 1px solid var(--border-color);

    border-radius: 8px;

    margin: 1.5rem 0;

    overflow: hidden;

}



.code-block-header {

    background: rgba(0, 0, 0, 0.2);

    padding: 0.75rem 1rem;

    font-size: 0.85rem;

    color: var(--text-tertiary);

    border-bottom: 1px solid var(--border-color);

    font-family: 'Fira Code', monospace;

}



.code-block pre {

    margin: 0;

    padding: 1.5rem;

    border: none;

    background: none;

    color: var(--code-text);

    /* Force White Text */

    text-shadow: none;

    /* remove any default shadow that might blur it */

}



/* Force Prism to respect our color */

:not(pre)>code[class*="language-"],

pre[class*="language-"],

pre code {

    background: transparent !important;

    text-shadow: none !important;

    color: inherit;

}



code[class*="language-"],

pre[class*="language-"] {

    color: #e2e8f0 !important;

    /* Force Light Text */

}



/* Navigation Pagination */

.content-nav {

    display: flex;

    justify-content: space-between;

    margin-top: 3rem;

    padding-top: 2rem;

    border-top: 1px solid var(--border-color);

}



.content-nav a {

    display: flex;

    flex-direction: column;

    padding: 1rem 1.5rem;

    background: var(--bg-secondary);

    border: 1px solid var(--border-color);

    border-radius: 8px;

    text-decoration: none;

    transition: all 0.2s ease;

    max-width: 45%;

}



.content-nav a:hover {

    border-color: var(--accent-primary);

    background: var(--bg-tertiary);

}



.content-nav .nav-label {

    font-size: 0.8rem;

    color: var(--text-tertiary);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 0.25rem;

}



.content-nav .nav-title {

    color: var(--text-primary);

    font-weight: 600;

}



.content-nav .prev-link {

    text-align: left;

}



.content-nav .next-link {

    text-align: right;

    margin-left: auto;

}



/* Dropdown Navigation Styles */

.nav-item.has-dropdown {

    position: relative;

}



.nav-item.has-dropdown>.nav-link {

    display: flex;

    align-items: center;

    gap: 0.25rem;

}



.nav-item.has-dropdown>.nav-link::after {

    content: '▼';

    font-size: 0.6rem;

    margin-left: 0.25rem;

    transition: transform 0.2s ease;

}



.nav-item.has-dropdown:hover>.nav-link::after {

    transform: rotate(180deg);

}



.dropdown-menu {

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 200px;

    background: var(--bg-secondary);

    border: 1px solid var(--border-color);

    border-radius: 8px;

    padding: 0.5rem 0;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: all 0.2s ease;

    z-index: 1000;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

}



.nav-item.has-dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.dropdown-menu a {

    display: block;

    padding: 0.75rem 1.25rem;

    color: var(--text-secondary);

    text-decoration: none;

    font-size: 0.9rem;

    transition: all 0.2s ease;

}



.dropdown-menu a:hover {

    background: var(--bg-tertiary);

    color: var(--text-primary);

}



.dropdown-divider {

    height: 1px;

    background: var(--border-color);

    margin: 0.5rem 0;

}



/* Responsive Design */

@media (max-width: 1024px) {

    .page-layout {

        flex-direction: column;

    }



    /* FIX: Show Content FIRST, Sidebar SECOND */

    .main-content {

        order: 1;

    }



    .sidebar {

        order: 2;

        width: 100%;

        min-width: 100%;

        height: auto;

        position: relative;

        top: 0;

        border-right: none;

        border-top: 1px solid var(--border-color);

        /* Separator on top now */

        border-bottom: 1px solid var(--border-color);

        margin-top: 2rem;

    }



    .sidebar-nav {

        display: flex;

        flex-wrap: wrap;

        gap: 0.5rem;

    }



    .sidebar-nav li {

        margin-bottom: 0;

    }



    .sidebar-link {

        padding: 0.5rem 0.75rem;

        font-size: 0.85rem;

    }



    .main-content {

        padding: 2rem 1.5rem;

    }



    .page-title {

        font-size: 2rem;

    }



    .dropdown-menu {

        position: static;

        opacity: 1;

        visibility: visible;

        transform: none;

        box-shadow: none;

        display: none;

    }



    .nav-item.has-dropdown.active .dropdown-menu {

        display: block;

    }

}



@media (max-width: 768px) {

    .page-layout {

        padding-top: 70px;

    }



    .sidebar {

        padding: 1.5rem 1rem;

    }



    .main-content {

        padding: 1.5rem 1rem;

    }



    .page-title {

        font-size: 1.75rem;

    }



    .section-heading {

        font-size: 1.5rem;

    }



    .content-nav {

        flex-direction: column;

        gap: 1rem;

    }



    .content-nav a {

        max-width: 100%;

    }

}



/* Simplified Footer for subpages */

.footer {

    margin-top: auto;

}



.footer .footer-bottom {

    padding: 1.5rem 0;

}



/* ===================================

   ADVERTISING LAYOUT STYLES

   =================================== */



.ad-rail-left,

.ad-rail-right {

    position: fixed;

    top: 90px;

    width: 160px;

    height: calc(100vh - 90px);

    z-index: 5;

    display: none;

    /* Hidden by default until we confirm overlap space */

}



@media (min-width: 1650px) {



    /* Only show rails on very wide screens where they won't overlap content */

    .ad-rail-left {

        display: block;

        left: 20px;

    }



    .ad-rail-right {

        display: block;

        right: 20px;

    }

}



.ad-banner-top {

    width: 100%;

    min-height: 0px;

    /* Collapse if empty */

    margin-bottom: 1rem;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

}



.ad-banner-top.has-ad {

    min-height: 90px;

    margin-bottom: 2rem;

}



/* ===================================

   Minimalistic Hero Section for Homepage

   =================================== */

.hero-minimal {

    min-height: calc(100vh - 80px);

    padding-top: 120px;

    padding-bottom: 4rem;

    display: flex;

    align-items: center;

    justify-content: center;

}



.hero-minimal-content {

    max-width: 800px;

    margin: 0 auto;

    padding: 0 2rem;

    text-align: center;

}



.hero-minimal-title {

    font-size: 3rem;

    font-weight: 800;

    color: var(--text-primary);

    margin-bottom: 2rem;

    line-height: 1.2;

}



.hero-minimal-description {

    font-size: 1.2rem;

    color: var(--text-secondary);

    line-height: 1.8;

    margin-bottom: 3rem;

}



.hero-minimal-features {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 1.5rem;

    margin-bottom: 3rem;

}



.feature-item {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem 1.25rem;

    background: var(--bg-secondary);

    border: 1px solid var(--border-color);

    border-radius: 8px;

    font-size: 0.95rem;

    color: var(--text-primary);

}



.feature-icon {

    font-size: 1.25rem;

}



.hero-minimal-cta {

    color: var(--text-tertiary);

    font-size: 1rem;

}



@media (max-width: 768px) {

    .hero-minimal {

        padding-top: 100px;

    }



    .hero-minimal-title {

        font-size: 2rem;

    }



    .hero-minimal-description {

        font-size: 1rem;

    }



    .feature-item {

        width: 100%;

        justify-content: center;

    }

}



/* ===================================

   Ad Placeholder Styles (AdSense Ready)

   =================================== */



/* Sidebar Ad Placeholder */

.ad-placeholder-sidebar {

    margin-top: 2rem;

    padding: 1rem;

    min-height: 250px;

    background: var(--bg-tertiary);

    border: 1px dashed var(--border-color);

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-tertiary);

    font-size: 0.8rem;

    text-align: center;

}



/* Content Ad Placeholder - Between sections */

.ad-placeholder-content {

    margin: 2rem 0;

    padding: 1.5rem;

    min-height: 100px;

    background: var(--bg-tertiary);

    border: 1px dashed var(--border-color);

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-tertiary);

    font-size: 0.8rem;

    text-align: center;

}



/* Footer Ad Placeholder */

.ad-placeholder-footer {

    margin: 2rem auto;

    padding: 1.5rem;

    max-width: 728px;

    min-height: 90px;

    background: var(--bg-tertiary);

    border: 1px dashed var(--border-color);

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-tertiary);

    font-size: 0.8rem;

    text-align: center;

}



/* Hide ad placeholder text when ads are active */

.ad-placeholder-sidebar.ad-active,

.ad-placeholder-content.ad-active,

.ad-placeholder-footer.ad-active {

    background: transparent;

    border: none;

    padding: 0;

    min-height: auto;

}



/* Responsive ad adjustments */

@media (max-width: 768px) {

    .ad-placeholder-sidebar {

        min-height: 100px;

    }



    .ad-placeholder-footer {

        max-width: 100%;

        margin: 1rem;

    }

}



/* ===================================

   MOBILE STABILITY FIXES (PREVENT GLITCHING)

   =================================== */

@media (max-width: 768px) {



    html,

    body {

        overflow-x: hidden;

        /* Stop horizontal scroll */

        width: 100%;

        position: relative;

    }



    .page-layout {

        width: 100%;

        overflow-x: hidden;

    }



    .sidebar {

        max-width: 100%;

        box-sizing: border-box;

        /* Make sidebar collapsible or smaller if needed, for now ensure no overflow */

    }



    .main-content {

        max-width: 100vw;

        /* Ensure content doesn't stretch page */

        box-sizing: border-box;

        overflow-x: hidden;

        padding-left: 1rem;

        padding-right: 1rem;

    }



    .code-block,

    pre {

        max-width: 100%;

        width: 100%;

        overflow-x: auto;

        /* Allow code to scroll internally */

    }



    /* Ad Containment */

    .ad-placeholder-sidebar,

    .ad-banner-top,

    ins.adsbygoogle {

        max-width: 100% !important;

        overflow: hidden;

        box-sizing: border-box;

    }

}



/* ===================================

   Enhanced Beginner-Friendly Styles

   =================================== */



/* Info boxes for key concepts */

.info-box {

    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);

    border-left: 4px solid var(--primary);

    padding: 1.25rem 1.5rem;

    margin: 1.5rem 0;

    border-radius: 0 8px 8px 0;

}



.info-box h4 {

    color: var(--primary);

    margin-bottom: 0.5rem;

    font-size: 1rem;

    font-weight: 600;

}



.info-box p {

    margin: 0;

    color: var(--text-secondary);

}



/* Tip boxes */

.tip-box {

    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);

    border-left: 4px solid #10b981;

    padding: 1.25rem 1.5rem;

    margin: 1.5rem 0;

    border-radius: 0 8px 8px 0;

}



.tip-box h4 {

    color: #10b981;

    margin-bottom: 0.5rem;

    font-size: 1rem;

    font-weight: 600;

}



.tip-box p {

    margin: 0;

    color: var(--text-secondary);

}



/* Warning boxes */

.warning-box {

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);

    border-left: 4px solid #f59e0b;

    padding: 1.25rem 1.5rem;

    margin: 1.5rem 0;

    border-radius: 0 8px 8px 0;

}



.warning-box h4 {

    color: #f59e0b;

    margin-bottom: 0.5rem;

    font-size: 1rem;

    font-weight: 600;

}



.warning-box p {

    margin: 0;

    color: var(--text-secondary);

}



/* Simple analogy styling */

.analogy {

    font-style: italic;

    color: var(--text-secondary);

    padding: 1rem 1.5rem;

    background: var(--bg-secondary);

    border-radius: 8px;

    margin: 1rem 0;

}



.analogy::before {

    content: '💡 ';

}



/* Key terms highlighting */

.key-term {

    font-weight: 600;

    color: var(--primary);

}



/* Comparison Table Styles */

.comparison-table {

    width: 100%;

    border-collapse: collapse;

    margin: 1.5rem 0;

    font-size: 0.95rem;

    border-radius: 8px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    border: 1px solid var(--border-color);

}



.comparison-table thead {

    background-color: var(--bg-tertiary);

    border-bottom: 2px solid var(--border-color);

}



.comparison-table th {

    padding: 12px 16px;

    text-align: left;

    font-weight: 600;

    color: var(--text-primary);

    text-transform: uppercase;

    font-size: 0.85rem;

    letter-spacing: 0.5px;

}



.comparison-table td {

    padding: 12px 16px;

    border-bottom: 1px solid var(--border-color);

    color: var(--text-secondary);

}



.comparison-table tr:last-child td {

    border-bottom: none;

}



.comparison-table tr:hover {

    background-color: var(--bg-card);

}



/* ===================================

   INTERVIEW Q&A STYLES (STRUCTURED)

   =================================== */



.qa-card {

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 1.5rem;

    margin-bottom: 1.5rem;

    transition: all 0.3s ease;

}



.qa-card:hover {

    border-color: var(--primary);

    box-shadow: var(--shadow-md);

}



.qa-question {

    font-weight: 600;

    color: var(--text-primary);

    margin-bottom: 1rem;

    font-size: 1.1rem;

    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

}



.qa-question::before {

    content: "Q";

    background: var(--primary);

    color: white;

    padding: 2px 8px;

    border-radius: 4px;

    font-size: 0.85rem;

    flex-shrink: 0;

}



.qa-answer {

    color: var(--text-secondary);

    padding-left: 2rem;

    line-height: 1.7;

}



/* Clean Answer Code Blocks */

.qa-answer :not(pre)>code {

    background: var(--bg-tertiary);

    padding: 2px 6px;

    border-radius: 4px;

    font-family: 'Fira Code', monospace;

    color: var(--accent-primary);

}



.qa-answer pre code {

    background: none;

    padding: 0;

}



.difficulty-badge {

    display: inline-block;

    padding: 2px 8px;

    border-radius: 12px;

    font-size: 0.75rem;

    font-weight: 600;

    margin-left: 0.5rem;

}



.difficulty-beginner {

    background: rgba(34, 197, 94, 0.15);

    color: #22c55e;

}



.difficulty-intermediate {

    background: rgba(234, 179, 8, 0.15);

    color: #eab308;

}



.difficulty-advanced {

    background: rgba(239, 68, 68, 0.15);

    color: #ef4444;

}



.topic-header {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    margin: 2rem 0 1rem 0;

}



.topic-header h2 {

    margin: 0;

    font-size: 1.4rem;

}



.topic-header .difficulty-badge {

    margin-left: 0;

    /* Reset for header */

}

/* =================================== 
   Support / Coffee Section 
   =================================== */
.support-section {
    background: linear-gradient(135deg, rgba(255, 237, 213, 0.4) 0%, rgba(255, 247, 237, 0.2) 100%);
    border: 1px solid rgba(253, 186, 116, 0.3);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    text-align: center;
    margin: 4rem auto 2rem;
    max-width: 800px;
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .support-section {
    background: linear-gradient(135deg, rgba(67, 20, 7, 0.3) 0%, rgba(124, 45, 18, 0.1) 100%);
    border-color: rgba(251, 146, 60, 0.2);
}

.support-content h3 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.support-content p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.heart-beat {
    display: inline-block;
    animation: heartBeat 1.5s ease-in-out infinite;
}

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.3);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.3);
    }

    70% {
        transform: scale(1);
    }
}

.buy-coffee-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #FFDD00;
    color: #000000;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 221, 0, 0.3);
    border: 2px solid transparent;
}

.buy-coffee-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 221, 0, 0.4);
    background: #FFEA00;
}

.buy-coffee-btn img {
    height: 24px;
    width: auto;
}

/* =================================== 
   Footer Styles 
   =================================== */
.footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    margin-top: 4rem;
    padding: 3rem 0;
    position: relative;
    z-index: 100;
    /* Sit above ad rails */
}

.footer-content {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.footer-links a {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

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

.footer .copyright {
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .footer-links {
        gap: 1rem;
        flex-direction: column;
    }
}

/* Badge Styles */
.badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: 600;
    margin-left: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.badge-beginner {
    background: #e6f4ea;
    color: #1e8e3e;
    border: 1px solid #ceead6;
}

.badge-intermediate {
    background: #fef7e0;
    color: #f9ab00;
    border: 1px solid #feefc3;
}

.badge-advanced {
    background: #fce8e6;
    color: #d93025;
    border: 1px solid #fad2cf;
}

/* Dark Mode Badges */
[data-theme="dark"] .badge-beginner {
    background: rgba(30, 142, 62, 0.2);
    color: #81c995;
    border-color: rgba(30, 142, 62, 0.3);
}

[data-theme="dark"] .badge-intermediate {
    background: rgba(249, 171, 0, 0.2);
    color: #fdd663;
    border-color: rgba(249, 171, 0, 0.3);
}

[data-theme="dark"] .badge-advanced {
    background: rgba(217, 48, 37, 0.2);
    color: #f28b82;
    border-color: rgba(217, 48, 37, 0.3);
}

/* ===================================
   Authority & EEAT Styles
   =================================== */

.author-bio-footer {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 24px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
    text-align: left;
}

.bio-avatar {
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.bio-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.bio-text strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 4px;
    font-size: 1.1rem;
}

.last-updated {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 20px 0;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-weight: 600;
}

[data-theme="dark"] .author-bio-footer {
    background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {
    .author-bio-footer {
        flex-direction: column;
        text-align: center;
    }
}

/* ===================================
   Homepage Pillar Styles
   =================================== */

.hero-pillar {
    background: var(--gradient-dark);
    color: white;
    padding: 100px 0 80px;
    text-align: center;
    margin-bottom: 50px;
    margin-top: var(--nav-height);
}

.hero-pillar .page-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    background: white;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lead-text {
    font-size: 1.3rem;
    color: var(--text-tertiary);
    max-width: 850px;
    margin: 20px auto 0;
    line-height: 1.6;
}

.pillar-content {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 60px;
    margin-bottom: 80px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
}

.master-guide {
    max-width: 1000px;
    margin: 0 auto;
    line-height: 1.9;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.master-guide h2 {
    color: var(--text-primary);
    margin: 60px 0 30px;
    font-size: 2.2rem;
    border-left: 6px solid var(--primary);
    padding-left: 25px;
    font-weight: 800;
}

.master-guide h3 {
    color: var(--text-primary);
    margin: 40px 0 20px;
    font-size: 1.6rem;
    font-weight: 700;
}

.expert-insight {
    background: rgba(99, 102, 241, 0.08);
    border-left: 5px solid var(--primary);
    padding: 35px;
    border-radius: 0 16px 16px 0;
    margin: 40px 0;
    font-style: italic;
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin: 50px 0;
}

.roadmap-card {
    background: var(--bg-secondary);
    padding: 35px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease;
}

.roadmap-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
}

.roadmap-card h4 {
    color: var(--primary);
    margin-bottom: 15px;
    font-size: 1.3rem;
    font-weight: 700;
}

.pillar-links {
    margin-top: 80px;
    padding: 50px;
    background: var(--bg-secondary);
    border-radius: 24px;
    border: 1px solid var(--border-color);
}

.pillar-links h3 {
    text-align: center;
    margin-bottom: 30px;
}

.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.link-grid a {
    padding: 20px;
    background: var(--bg-card);
    border-radius: 12px;
    text-align: center;
    font-weight: 700;
    color: var(--primary);
    transition: all 0.3s;
    border: 1px solid var(--border-color);
}

.link-grid a:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
    .pillar-content {
        padding: 30px 20px;
    }

    .hero-pillar {
        padding: 60px 20px;
    }

    .master-guide h2 {
        font-size: 1.8rem;
    }

    .link-grid {
        grid-template-columns: 1fr;
    }
}