:root{
  --bg:#0b0f16; --surface:#0f1724; --surface-2:#111a2b; --text:#e6eefc; --muted:#9fb3d1;
  --primary:#6aa6ff; --primary-2:#4d8dff; --success:#2fbf71; --warning:#ffc861; --danger:#ff6b6b;
  --border:#1b2435; --card:#0f1522; --accent:#7bd3ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,var(--bg),#0c1320);color:var(--text);font:400 16px/1.7 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.navbar{position:sticky;top:0;z-index:10;background:linear-gradient(90deg,#0c1320,var(--surface));border-bottom:1px solid var(--border)}
.navbar .brand{display:flex;align-items:center;gap:.6rem;color:#e6f0ff;font-weight:700;padding:.9rem 0}
.navbar nav{display:flex;gap:.75rem;flex-wrap:wrap;row-gap:.35rem}
.navbar a{color:#e6f0ff;opacity:.95;padding:.3rem .55rem;border-radius:8px;line-height:1.2}
.navbar a:hover{opacity:1;background:#14223a}
.hero{background:radial-gradient(1200px 600px at 10% -10%, #134a8e33, transparent), linear-gradient(180deg,#0b2244,#0e1a2b);padding:64px 0;color:#eef6ff;border-bottom:1px solid var(--border)}
.hero .kicker{display:inline-block;background:var(--success);color:#062; font-weight:700;border-radius:999px;padding:.25rem .6rem}
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{grid-column:span 6;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.card .content, .card .card-body{padding:18px}
.card h3, .card h5, .card p{color:var(--text)}
@media (max-width: 820px){.card{grid-column:span 12}}
.table-wrap{border:1px solid var(--border);border-radius:12px;overflow:auto;background:var(--surface)}
table{width:100%;border-collapse:collapse}
thead{background:#0f1b31;color:#dce8ff}
th,td{padding:10px 12px;border-bottom:1px solid var(--border)}
.badge{display:inline-block;padding:.25rem .5rem;border-radius:8px;font-weight:600}
.badge.success{background:var(--success);color:#031e10}
.badge.secondary{background:#20314d;color:#cfe0ff}
.callout{border-left:4px solid var(--accent);background:linear-gradient(180deg,#0f1725,#0b1220);padding:1rem;border-radius:10px}
.section{padding:36px 0}
.muted{color:#bcd0ea}
.footer{background:#0e1a2b;border-top:1px solid var(--border);color:#cfe0ff;padding:24px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width: 820px){.grid-2{grid-template-columns:1fr}}
.list-check{list-style:none;padding:0;margin:0}
.list-check li{padding-left:28px;position:relative;margin:6px 0}
.list-check li:before{content:"✔";color:var(--success);position:absolute;left:0}
.shadow{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.supplier-1{border:1px solid rgba(47,191,113,.6);box-shadow:0 0 0 2px rgba(47,191,113,.2)}
.toc{background:#0b1220;border:1px solid var(--border);border-radius:12px;padding:1rem}
.small{font-size:.9rem}
.caption{font-size:.85rem;color:#9fb3d1}

/* Navbar (Bootstrap-based) */
.et-navbar{background:linear-gradient(90deg,#0c1320,var(--surface));border-bottom:1px solid var(--border)}
.et-navbar .navbar-brand{color:#e6f0ff}
.et-navbar .nav-link{color:#d9e6ff}
.et-navbar .nav-link:hover{color:#ffffff}
.et-navbar .dropdown-menu{background:#0f1724;border:1px solid var(--border);min-width:240px}
.et-navbar .dropdown-item{color:#e6f0ff}
.et-navbar .dropdown-item:hover{background:#14223a;color:#ffffff}