/* =========================================================
THEME + STRUCTURE UPDATE (same content, new layout look)
========================================================= */

:root {
--c-primary: #0b1c2d; /* dark navy */
--c-primary-2: #143553; /* deep blue */
--c-accent: #d4af37; /* gold */
--c-accent-2: #b8962e; /* gold hover */
--c-bg: #f5f7fb; /* soft bg */
--c-surface: #ffffff;
--c-text: #0f172a;
--c-text-inv: #ffffff;
--c-muted: #64748b;
--c-border: #e5e7eb;
}

body {
}

/* Navbar */
.topbar {
background: #3d1807;
}

/* Primary CTA button */
.btn-cta {
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
border: none;
color: #0b0f14;
font-weight: 800;
}
.btn-cta:hover {
background: linear-gradient(135deg, var(--c-accent-2), var(--c-accent));
color: #0b0f14;
}

/* Hero */
.hero {
background: linear-gradient(135deg, #713f02, #000000);
color: var(--c-text-inv);
position: relative;
overflow: hidden;
}
.hero .lead,
.hero h1,
.hero h3 {
color: var(--c-text-inv);
}

/* Soft glow */
.hero::before {
content: "";
position: absolute;
width: 520px;
height: 520px;
top: -220px;
right: -180px;
background: radial-gradient(
 circle,
 rgba(212, 175, 55, 0.25),
 transparent 60%
);
filter: blur(2px);
pointer-events: none;
}

/* Cards */
.theme-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-left: 6px solid var(--c-accent);
border-radius: 16px;
}

.theme-card .icon-badge {
width: 48px;
height: 48px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(212, 175, 55, 0.15);
color: var(--c-accent-2);
font-size: 22px;
}

/* Highlight card */
.theme-card.active {
background: linear-gradient(135deg, #572107, #532514);
color: #fff;
border-color: rgba(255, 255, 255, 0.12);
}
.theme-card.active h5,
.theme-card.active p {
color: #fff;
}
.theme-card.active .icon-badge {
background: rgba(255, 255, 255, 0.12);
color: var(--c-accent);
}

/* Section title */
.section-title {
color: var(--c-primary);
font-weight: 900;
}

/* Footer */
footer {
background: linear-gradient(
 135deg,
 var(--c-primary),
 var(--c-primary-2)
);
color: rgba(255, 255, 255, 0.9);
}
footer .brand {
color: var(--c-accent);
font-weight: 900;
}