:root {
–bg: #0b0f14;
–card: #111827;
–ink: #e5e7eb;
–muted: #9ca3af;
–brand: #c4a04d; /* Gold tone from logo */
–brand-ink: #fff;
–ring: rgba(196,160,77,0.45);
}
* { box-sizing: border-box; }
.wrap { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, “Helvetica Neue”, Arial, “Noto Sans”; color: var(–ink); background: var(–bg); }
.builder { max-width: 1100px; margin: 0 auto; padding: 48px 20px 72px; }
.logo {
display: flex; justify-content: center; margin-bottom: 28px;
}
.logo img {
max-height: 90px; width: auto;
}
.hero { text-align: center; display: grid; gap: 16px; margin-bottom: 28px; }
.hero h1 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; margin: 0; color: var(–brand); }
.hero p { margin: 0; color: var(–muted); font-size: clamp(16px, 2vw, 18px); }
/* Tabs (rest of styling unchanged from previous version) */
.tabs { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04); overflow: hidden; }
.tablist { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 8px; background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.06); }
.tablist button { appearance: none; border: 1px solid transparent; background: transparent; color: var(–ink); font-weight: 600; padding: 12px 14px; border-radius: 14px; cursor: pointer; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease; }
.tablist button:hover { background: rgba(255,255,255,0.04); transform: translateY(-1px); }
.tablist button[aria-selected=”true”] { background: var(–brand); color: #0b1220; border-color: var(–brand); box-shadow: 0 0 0 4px var(–ring); }
.tab-panels { padding: 18px; }
.panel { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 880px) { .panel { grid-template-columns: 1.15fr 0.85fr; align-items: start; } }
.card { background: var(–card); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 18px; box-shadow: 0 10px 20px rgba(0,0,0,0.28); }
.card h2 { margin: 0 0 8px; font-size: 22px; color: var(–brand); }
.card p { margin: 0 0 12px; color: var(–muted); }
.list { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.list li { display: flex; align-items: start; gap: 8px; }
.tick { width: 20px; height: 20px; border-radius: 50%; background: rgba(196,160,77,0.15); display: inline-grid; place-items: center; font-size: 14px; color: var(–brand); }
.cta a, .cta button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); cursor: pointer; text-decoration: none; font-weight: 600; }
.btn-primary { background: var(–brand); color: #0b1220; border-color: var(–brand); }
.btn-ghost { background: transparent; color: var(–ink); }

/* same JS tab logic as before */