/* Microchip Circuit Board Style - Hardware Component Layout */
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Roboto+Mono:wght@400;500;700&display=swap');

:root {
    --pcb-bg: #002b12; /* Deep PCB Green */
    --pcb-trace: #00ff66; /* Bright Copper/Gold Trace */
    --pcb-trace-dim: #006622;
    --pcb-chip: #1a1a1a; /* Black Chip Body */
    --pcb-pin: #ffd700; /* Gold Pins */
    --pcb-text: #e0e0e0;
    --font-chip: 'Audiowide', cursive;
    --font-data: 'Roboto Mono', monospace;
}

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

body {
    background-color: var(--pcb-bg);
    color: var(--pcb-text);
    font-family: var(--font-data);
    line-height: 1.6;
    /* Circuit Board Texture */
    background-image: 
        radial-gradient(var(--pcb-trace-dim) 1px, transparent 1px),
        radial-gradient(var(--pcb-trace-dim) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    padding: 40px 20px;
}

h1, h2, h3, h4 { font-family: var(--font-chip); color: var(--pcb-trace); letter-spacing: 1px; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
img { max-width: 100%; height: auto; display: block; filter: sepia(100%) hue-rotate(70deg) saturate(200%) brightness(0.8); }

/* Layout: The Motherboard */
.motherboard {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 30px;
    position: relative;
}

/* Circuit Traces (Decorative lines connecting chips) */
.motherboard::before {
    content: ''; position: absolute; top: 0; left: 50%; bottom: 0; width: 2px;
    background: var(--pcb-trace-dim); z-index: -1;
}

/* Base Chip Component */
.chip-component {
    background: var(--pcb-chip);
    border-radius: 4px;
    position: relative;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 0 0 1px #333;
}
/* Chip Pins (Gold contacts) */
.chip-component::before, .chip-component::after {
    content: ''; position: absolute; background: 
        repeating-linear-gradient(to right, transparent, transparent 4px, var(--pcb-pin) 4px, var(--pcb-pin) 8px);
}
.chip-component.horizontal::before { top: -6px; left: 10px; right: 10px; height: 6px; }
.chip-component.horizontal::after { bottom: -6px; left: 10px; right: 10px; height: 6px; }
.chip-component.vertical::before { left: -6px; top: 10px; bottom: 10px; width: 6px; background: repeating-linear-gradient(to bottom, transparent, transparent 4px, var(--pcb-pin) 4px, var(--pcb-pin) 8px); }
.chip-component.vertical::after { right: -6px; top: 10px; bottom: 10px; width: 6px; background: repeating-linear-gradient(to bottom, transparent, transparent 4px, var(--pcb-pin) 4px, var(--pcb-pin) 8px); }

/* Chip Silkscreen (White text on PCB) */
.silkscreen {
    position: absolute;
    top: -20px; left: 0;
    font-size: 0.75rem;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Buttons */
.btn-circuit {
    display: inline-block;
    background: var(--pcb-bg);
    color: var(--pcb-trace);
    border: 2px solid var(--pcb-trace);
    padding: 10px 20px;
    font-family: var(--font-chip);
    font-size: 0.9rem;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.btn-circuit::before {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 0; height: 0; background: var(--pcb-trace); border-radius: 50%; transition: 0.4s ease-out; z-index: -1;
}
.btn-circuit:hover::before { width: 300px; height: 300px; }
.btn-circuit:hover { color: var(--pcb-bg); }

/* --- Specific Components --- */

/* 1. Main Processor (Hero & Nav) */
.cpu-chip {
    grid-column: span 12;
    text-align: center;
    padding: 40px 20px;
}
.cpu-chip .silkscreen { top: -25px; left: 50%; transform: translateX(-50%); font-size: 1rem; }
.brand-nav { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; padding-bottom: 20px; margin-bottom: 40px; }
.brand { font-family: var(--font-chip); font-size: 2rem; color: var(--pcb-pin); }
.nav-links { display: flex; gap: 20px; }
.nav-links a:hover { color: var(--pcb-trace); }

.cpu-core h1 { font-size: 3.5rem; margin-bottom: 20px; text-shadow: 0 0 10px rgba(0, 255, 102, 0.5); }
.cpu-core p { font-size: 1.1rem; max-width: 800px; margin: 0 auto 30px; color: #bbb; }
.cpu-actions { display: flex; gap: 20px; justify-content: center; margin-bottom: 30px; }
.trust-pins { display: flex; gap: 20px; justify-content: center; font-size: 0.85rem; color: var(--pcb-pin); }

/* 2. RAM Modules (Data Metrics) */
.ram-bank {
    grid-column: span 12;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.ram-stick {
    background: #111;
    border: 1px solid #333;
    padding: 20px;
    text-align: center;
    position: relative;
}
.ram-stick::bottom { content: ''; position: absolute; bottom: -5px; left: 10px; right: 10px; height: 5px; background: var(--pcb-pin); }
.ram-val { font-family: var(--font-chip); font-size: 2rem; color: var(--pcb-trace); margin-bottom: 5px; }
.ram-lbl { font-size: 0.75rem; color: #888; text-transform: uppercase; }

/* 3. GPU / Co-processors (Features) */
.gpu-chip {
    grid-column: span 4;
}
.gpu-chip img { width: 100%; height: 150px; object-fit: cover; border: 1px solid #333; margin-bottom: 20px; }
.gpu-chip h3 { font-size: 1.2rem; margin-bottom: 10px; }
.gpu-chip p { font-size: 0.9rem; color: #aaa; }

/* 4. Network Interface Controller (Nodes) */
.nic-chip {
    grid-column: span 8;
}
.nic-chip h2 { margin-bottom: 20px; }
.port-array {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.port {
    background: #0a0a0a;
    border: 1px solid #333;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}
.port .ping { color: var(--pcb-pin); }

/* 5. Audio/Log Chip (Reviews) */
.audio-chip {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.audio-chip h2 { margin-bottom: 10px; }
.log-entry {
    background: #0a0a0a;
    border-left: 2px solid var(--pcb-trace);
    padding: 10px;
    font-size: 0.85rem;
}
.log-stars { color: var(--pcb-pin); margin-bottom: 5px; }
.log-text { color: #ccc; font-style: italic; margin-bottom: 5px; }
.log-user { color: #666; }

/* 6. Power Management IC (Pricing) */
.pmic-chip {
    grid-column: span 12;
}
.pmic-chip h2 { text-align: center; margin-bottom: 30px; }
.voltage-rails {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.v-rail {
    background: #111;
    border: 1px solid #333;
    padding: 30px;
    text-align: center;
}
.v-rail.active { border-color: var(--pcb-trace); box-shadow: inset 0 0 20px rgba(0, 255, 102, 0.1); }
.rail-name { font-family: var(--font-chip); font-size: 1.2rem; margin-bottom: 15px; color: #fff; }
.rail-voltage { font-size: 2.5rem; color: var(--pcb-trace); margin-bottom: 20px; }
.rail-voltage span { font-size: 1rem; color: #888; }
.rail-specs { list-style: none; text-align: left; margin-bottom: 30px; font-size: 0.9rem; }
.rail-specs li { padding: 5px 0; border-bottom: 1px dashed #333; }
.rail-specs li::before { content: '+ '; color: var(--pcb-pin); }

/* 7. BIOS / ROM (FAQ & Footer) */
.bios-chip {
    grid-column: span 12;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}
.bios-chip h3 { font-size: 1.3rem; margin-bottom: 20px; color: #fff; }
.faq-item { margin-bottom: 20px; }
.faq-q { color: var(--pcb-trace); margin-bottom: 5px; font-weight: 700; }
.faq-a { font-size: 0.9rem; color: #aaa; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a:hover { color: var(--pcb-pin); }
.copyright { margin-top: 30px; font-size: 0.8rem; color: #555; }

/* Subpages */
.sub-hero { grid-column: span 12; text-align: center; padding: 60px; }
.sub-hero h1 { font-size: 3rem; margin-bottom: 10px; }
.dl-bank { grid-column: span 12; display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.dl-stick { text-align: center; padding: 40px; }
.dl-icon { font-size: 3rem; margin-bottom: 20px; }
.help-bus { grid-column: span 12; display: grid; grid-template-columns: 250px 1fr; gap: 30px; }
.help-nav { display: flex; flex-direction: column; gap: 10px; }
.help-nav a { padding: 10px; border: 1px solid #333; }
.help-nav a.active, .help-nav a:hover { border-color: var(--pcb-trace); color: var(--pcb-trace); }
.help-content { padding: 40px; }
.help-section { margin-bottom: 40px; }
.help-section h3 { color: var(--pcb-pin); border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 20px; }
.help-section h4 { margin-top: 20px; margin-bottom: 10px; color: #fff; }
.help-section ul { padding-left: 20px; margin-bottom: 15px; }

/* Responsive */
@media (max-width: 1024px) {
    .gpu-chip { grid-column: span 6; }
    .nic-chip { grid-column: span 12; }
    .audio-chip { grid-column: span 12; flex-direction: row; flex-wrap: wrap; }
    .audio-chip h2 { width: 100%; }
    .log-entry { flex: 1; min-width: 250px; }
    .bios-chip { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .motherboard::before { display: none; }
    .brand-nav { flex-direction: column; gap: 20px; }
    .cpu-core h1 { font-size: 2.5rem; }
    .cpu-actions { flex-direction: column; }
    .ram-bank { grid-template-columns: repeat(2, 1fr); }
    .gpu-chip { grid-column: span 12; }
    .port-array { grid-template-columns: 1fr; }
    .voltage-rails { grid-template-columns: 1fr; }
    .dl-bank { grid-template-columns: 1fr; }
    .help-bus { grid-template-columns: 1fr; }
    .help-nav { flex-direction: row; flex-wrap: wrap; }
}