:root {
    --cloud-bg: #f3f4f6;
    --cloud-surface: #ffffff;
    --cloud-text: #1f2937;
    --cloud-muted: #4b5563;
    --cloud-primary: #f59e0b; /* AWS orange vibe */
    --cloud-primary-dark: #d97706;
    --cloud-nav: #111827; /* Dark nav */
    --cloud-border: #e5e7eb;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--cloud-bg); color: var(--cloud-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
}
a { text-decoration: none; color: inherit; }

/* Cloud Nav */
.cloud-nav {
    background-color: var(--cloud-nav); color: white; padding: 0 40px;
    display: flex; justify-content: space-between; align-items: center; height: 60px;
}
.c-brand { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 10px; color: var(--cloud-primary);}
.c-links { display: flex; height: 100%; }
.c-links a { padding: 0 20px; display: flex; align-items: center; font-size: 14px; font-weight: 600; color: #d1d5db; border-bottom: 3px solid transparent; transition: all 0.2s;}
.c-links a:hover, .c-links a.active { color: white; border-bottom: 3px solid var(--cloud-primary); }
.c-btn { background: var(--cloud-primary); color: #000; padding: 6px 20px; font-size: 14px; font-weight: bold; border-radius: 4px;}
.c-btn:hover { background: var(--cloud-primary-dark); color: white;}

/* Sub Nav */
.sub-nav { background: #1f2937; padding: 10px 40px; color: #9ca3af; font-size: 13px;}
.sub-nav span { margin-right: 20px; }

/* Hero */
.hero-cloud { background: var(--cloud-surface); padding: 80px 40px; border-bottom: 1px solid var(--cloud-border); display: flex; gap: 60px; max-width: 1400px; margin: 0 auto;}
.hc-text { flex: 1; }
.hc-text h1 { font-size: 48px; font-weight: 800; line-height: 1.2; margin-bottom: 20px;}
.hc-text p { font-size: 18px; color: var(--cloud-muted); margin-bottom: 30px;}
.hc-actions { display: flex; gap: 15px; }
.btn-primary { background: var(--cloud-primary); color: #111; padding: 12px 24px; font-weight: bold; font-size: 16px; border-radius: 4px; border: 1px solid var(--cloud-primary-dark);}
.btn-primary:hover { background: var(--cloud-primary-dark); color: white; }
.btn-secondary { background: white; color: var(--cloud-text); padding: 12px 24px; font-weight: bold; font-size: 16px; border-radius: 4px; border: 1px solid var(--cloud-border);}
.btn-secondary:hover { background: #f9fafb; }
.hc-visual { flex: 1; background: #e5e7eb; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 64px; color: #9ca3af; position: relative;}
.hc-visual::after { content: 'GLOBAL_NETWORK_TOPOLOGY'; position: absolute; bottom: 20px; font-size: 14px; font-weight: bold; letter-spacing: 2px;}

/* Grid Sections */
.section-wrapper { max-width: 1400px; margin: 40px auto; padding: 0 40px; }
.section-title { font-size: 24px; margin-bottom: 20px; border-bottom: 2px solid var(--cloud-border); padding-bottom: 10px;}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 60px;}
.card-cloud { background: var(--cloud-surface); border: 1px solid var(--cloud-border); padding: 30px; border-radius: 4px; transition: box-shadow 0.2s;}
.card-cloud:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.cc-icon { font-size: 32px; color: var(--cloud-primary); margin-bottom: 15px;}
.card-cloud h3 { font-size: 18px; margin-bottom: 10px;}
.card-cloud p { font-size: 14px; color: var(--cloud-muted);}

/* DataTable for Nodes */
.data-table { width: 100%; border-collapse: collapse; background: var(--cloud-surface); border: 1px solid var(--cloud-border); margin-bottom: 60px;}
.data-table th { text-align: left; padding: 15px 20px; background: #f9fafb; border-bottom: 2px solid var(--cloud-border); font-size: 12px; text-transform: uppercase; color: var(--cloud-muted);}
.data-table td { padding: 15px 20px; border-bottom: 1px solid var(--cloud-border); font-size: 14px; font-weight: 500;}
.data-table tr:hover { background: #f3f4f6; }
.status-ok { color: #059669; background: #d1fae5; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: bold;}

/* Two Col */
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-bottom: 60px;}
.list-group { background: var(--cloud-surface); border: 1px solid var(--cloud-border); border-radius: 4px;}
.lg-item { padding: 20px; border-bottom: 1px solid var(--cloud-border); display: flex; align-items: flex-start; gap: 15px;}
.lg-item:last-child { border-bottom: none; }
.lg-icon { color: #059669; font-size: 20px;}
.lg-text h4 { font-size: 16px; margin-bottom: 5px;}
.lg-text p { font-size: 14px; color: var(--cloud-muted);}

.trust-panel { background: var(--cloud-nav); color: white; padding: 40px; border-radius: 4px;}
.trust-panel h3 { color: var(--cloud-primary); margin-bottom: 20px;}
.trust-panel ul { list-style: none; }
.trust-panel li { margin-bottom: 15px; font-size: 15px; border-bottom: 1px solid #374151; padding-bottom: 15px;}
.trust-panel li:last-child { border-bottom: none; }

footer { background: var(--cloud-nav); color: #9ca3af; padding: 40px; text-align: center; font-size: 13px;}

@media (max-width: 900px) {
    .hero-cloud { flex-direction: column; }
    .hc-visual { height: 300px; }
    .grid-3 { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    .c-links { display: none; }
}