:root {
    --tile-bg: #0f1115;
    --tile-surface: #191c21;
    --tile-text: #e2e8f0;
    --tile-muted: #94a3b8;
    --tile-accent: #00f2fe;
    --tile-border: #2dd4bf;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--tile-bg); color: var(--tile-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    padding: 20px;
}
a { text-decoration: none; color: inherit; }

.metro-container { max-width: 1300px; margin: 0 auto; }

/* Header Tile */
.header-tile {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--tile-surface); padding: 20px 40px; margin-bottom: 20px;
    border-left: 5px solid var(--tile-accent);
}
.metro-brand { font-size: 24px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;}
.metro-nav { display: flex; gap: 30px; }
.metro-nav a { font-size: 14px; text-transform: uppercase; font-weight: bold; color: var(--tile-muted); transition: color 0.2s;}
.metro-nav a:hover, .metro-nav a.active { color: var(--tile-text); }
.metro-btn { background: var(--tile-accent); color: #000; padding: 10px 20px; font-weight: 800; text-transform: uppercase;}
.metro-btn:hover { background: #fff; }

/* Grid System */
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 20px; margin-bottom: 20px;}

.tile {
    background: var(--tile-surface); padding: 30px; position: relative;
    transition: transform 0.2s; cursor: pointer; overflow: hidden;
}
.tile:hover { transform: scale(0.98); }
.tile-title { font-size: 14px; text-transform: uppercase; color: var(--tile-muted); margin-bottom: 15px; font-weight: bold; letter-spacing: 1px;}
.tile-icon { font-size: 40px; margin-bottom: 20px;}

/* Specific Tiles */
.tile-hero { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, #191c21, #0f1115); border: 1px solid var(--tile-accent);}
.tile-hero h1 { font-size: 48px; line-height: 1.1; margin-bottom: 20px;}
.tile-hero p { font-size: 16px; color: var(--tile-muted); margin-bottom: 30px; line-height: 1.6;}

.tile-stat { background: var(--tile-accent); color: #000; display: flex; flex-direction: column; justify-content: flex-end;}
.tile-stat .stat-num { font-size: 48px; font-weight: 900;}
.tile-stat .stat-lbl { font-size: 14px; font-weight: bold; text-transform: uppercase;}

.tile-feat { grid-row: span 2; }
.tile-feat p { color: var(--tile-muted); line-height: 1.6; font-size: 15px;}

.tile-long { grid-column: span 2; display: flex; align-items: center; justify-content: space-between;}
.node-list { display: flex; gap: 20px; font-size: 18px; font-weight: bold; color: var(--tile-accent);}

/* FAQ List */
.tile-faq { grid-column: span 4; background: transparent; padding: 0;}
.faq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.faq-item { background: var(--tile-surface); padding: 30px;}
.faq-item h4 { font-size: 16px; margin-bottom: 10px; color: var(--tile-accent);}
.faq-item p { font-size: 14px; color: var(--tile-muted); line-height: 1.6;}

/* Footer */
.metro-footer { background: var(--tile-surface); padding: 20px 40px; text-align: right; font-size: 12px; color: var(--tile-muted); text-transform: uppercase; font-weight: bold;}

@media (max-width: 1024px) {
    .tile-grid { grid-template-columns: repeat(2, 1fr); }
    .tile-hero { grid-column: span 2; }
    .tile-long { grid-column: span 2; flex-direction: column; align-items: flex-start; gap: 20px;}
    .tile-faq { grid-column: span 2; }
    .faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .tile-grid { grid-template-columns: 1fr; }
    .tile-hero { grid-column: span 1; }
    .tile-long { grid-column: span 1; }
    .tile-faq { grid-column: span 1; }
    .header-tile { flex-direction: column; gap: 20px; align-items: flex-start;}
    .metro-nav { flex-wrap: wrap; }
}