/* ----------------------------------------------------
   GLOBEX CORPORATE THEME
---------------------------------------------------- */
:root {
    --primary-blue: #0d6efd;      /* Brand blue */
    --deep-black: #1a1a1a;        /* High-contrast text */
    --light-bg: #f8f9fa;          /* Subtle section background */
    --white: #ffffff;
    
    --text-main: #343a40;         /* Soft dark gray for body */
    --text-muted: #6c757d;        /* Gray for descriptions */
    
    --border-color: #dee2e6;      /* Clean gray borders */
    --shadow-sm: 0 10px 30px rgba(0,0,0,0.05);
}

/* ----------------------------------------------------
   BASE & TYPOGRAPHY
---------------------------------------------------- */
body {
    background: var(--white);
    color: var(--text-main);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    margin: 0;
}

h1, h2, h3 {
    color: var(--deep-black);
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* ----------------------------------------------------
   HEADER & NAVIGATION
---------------------------------------------------- */
.header {
    background: var(--white);
    padding: 60px 20px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 40px;
}

.header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.header p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
}

/* ----------------------------------------------------
   SECTIONS
---------------------------------------------------- */
.section {
    padding: 40px 10%;
    max-width: 1200px;
    margin: 0 auto;
}

/* ----------------------------------------------------
   DIAGRAM CONTAINER (The "System Card")
---------------------------------------------------- */
.diagram-container {
    border: 1px solid var(--border-color);
    padding: 24px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    margin-top: 20px;
}

.diagram {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ----------------------------------------------------
   SVG ELEMENTS (Diagram Logic)
---------------------------------------------------- */
.box {
    fill: var(--white);
    stroke: var(--primary-blue);
    stroke-width: 2;
    rx: 8;
    ry: 8;
}

.vm-box {
    fill: var(--light-bg);
    stroke: #adb5bd;
    stroke-width: 1;
    rx: 6;
    ry: 6;
}

.zone {
    fill: rgba(13, 110, 253, 0.02); /* Very subtle blue tint for zones */
    stroke: var(--border-color);
    stroke-dasharray: 8 4;
    stroke-width: 2;
}

.label {
    fill: var(--deep-black);
    font-size: 13px;
    font-weight: 600;
}

.sub-label {
    fill: var(--text-muted);
    font-size: 11px;
    font-weight: 400;
}

.arrowhead {
    fill: #adb5bd;
}

/* ----------------------------------------------------
   SECURITY LIST (Professional Bullets)
---------------------------------------------------- */
.security-list {
    list-style: none;
    padding: 0;
}

.security-list li {
    margin-bottom: 12px;
    padding-left: 15px;
    border-left: 3px solid var(--primary-blue);
    color: var(--text-main);
    font-size: 0.95rem;
}

/* ----------------------------------------------------
   FOOTER
---------------------------------------------------- */
.footer {
    text-align: center;
    padding: 40px;
    background: var(--light-bg);
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    margin-top: 60px;
    font-size: 0.9rem;
}