:root {
    --lab-bg: #f0f4f8;
    --lab-text: #333333;
    --lab-primary: #005b96;
    --lab-secondary: #00a8cc;
    --lab-accent: #d1e8e2;
    --lab-surface: #ffffff;
    --font-lab: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--lab-bg); color: var(--lab-text);
    font-family: var(--font-lab);
    line-height: 1.6;
    background-image: 
        linear-gradient(90deg, rgba(0, 91, 150, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(0, 91, 150, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}
a { text-decoration: none; color: inherit; }

.lab-container { max-width: 1000px; margin: 40px auto; padding: 30px; background: var(--lab-surface); box-shadow: 0 5px 20px rgba(0,0,0,0.05); border-radius: 8px;}

/* Header */
.lab-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 20px; border-bottom: 2px solid var(--lab-primary);
    margin-bottom: 40px;
}
.lab-brand {
    font-size: 28px; font-weight: bold; color: var(--lab-primary);
    display: flex; align-items: center; gap: 10px;
}
.lab-brand::before { content: '🔬'; font-size: 32px; }
.lab-nav { display: flex; gap: 20px; }
.lab-nav a {
    font-size: 15px; font-weight: bold; color: var(--lab-text);
    padding: 8px 15px; border-radius: 4px; transition: all 0.3s;
}
.lab-nav a:hover, .lab-nav a.active { background: var(--lab-accent); color: var(--lab-primary); }

/* Hero */
.lab-hero {
    text-align: center; padding: 50px 20px; margin-bottom: 50px;
    background: var(--lab-accent); border-radius: 8px; border: 1px solid var(--lab-secondary);
}
.lab-hero h1 { font-size: 36px; color: var(--lab-primary); margin-bottom: 15px; }
.lab-hero p { font-size: 18px; margin-bottom: 30px; max-width: 700px; margin-left: auto; margin-right: auto;}
.btn-lab {
    display: inline-block; padding: 12px 30px; font-size: 16px; font-weight: bold;
    color: #fff; background: var(--lab-primary); border-radius: 4px;
    transition: background 0.3s; margin: 0 10px;
}
.btn-lab:hover { background: #003f6b; }
.btn-lab-alt {
    display: inline-block; padding: 12px 30px; font-size: 16px; font-weight: bold;
    color: var(--lab-primary); background: #fff; border: 1px solid var(--lab-primary);
    border-radius: 4px; transition: all 0.3s; margin: 0 10px;
}
.btn-lab-alt:hover { background: var(--lab-accent); }

/* Stats */
.lab-stats {
    display: flex; justify-content: space-around; margin-bottom: 50px;
    padding: 20px; border: 1px solid var(--lab-accent); border-radius: 8px;
}
.ls-item { text-align: center; }
.ls-val { font-size: 32px; font-weight: bold; color: var(--lab-secondary); }
.ls-lbl { font-size: 14px; color: #666; text-transform: uppercase;}

/* Grid */
.lab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-bottom: 50px;}
.lg-card {
    padding: 30px; border: 1px solid var(--lab-accent); border-radius: 8px;
    background: #fafcfd; position: relative; overflow: hidden;
}
.lg-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
    background: var(--lab-secondary);
}
.lg-card h3 { font-size: 20px; margin-bottom: 15px; color: var(--lab-primary);}
.lg-card p { font-size: 15px; text-align: justify; color: #555;}

/* Nodes */
.lab-nodes { margin-bottom: 50px; padding: 30px; border: 1px solid var(--lab-accent); border-radius: 8px;}
.lab-nodes h2 { font-size: 24px; margin-bottom: 20px; color: var(--lab-primary); border-bottom: 1px solid var(--lab-accent); padding-bottom: 10px;}
.node-lab-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;}
.n-lab {
    padding: 10px; background: var(--lab-accent); border-radius: 4px;
    font-size: 14px; font-weight: bold; color: var(--lab-primary); text-align: center;
}
.n-lab span { font-weight: normal; color: #555; display: block; font-size: 12px; margin-top: 5px;}

/* FAQ */
.lab-faq { margin-bottom: 50px;}
.lab-faq h2 { font-size: 24px; margin-bottom: 20px; color: var(--lab-primary); border-bottom: 1px solid var(--lab-accent); padding-bottom: 10px;}
.faq-item { margin-bottom: 20px; padding: 15px; background: #fafcfd; border: 1px solid var(--lab-accent); border-radius: 4px;}
.fq-q { font-size: 16px; font-weight: bold; color: var(--lab-primary); margin-bottom: 10px;}
.fq-a { font-size: 14px; color: #555;}

footer { text-align: center; padding-top: 20px; border-top: 2px solid var(--lab-primary); font-size: 14px; color: #666;}

@media (max-width: 768px) {
    .lab-header { flex-direction: column; gap: 15px; }
    .lab-stats { flex-direction: column; gap: 20px; }
    .lab-grid { grid-template-columns: 1fr; }
    .btn-lab, .btn-lab-alt { display: block; margin: 10px auto; width: 90%;}
}