:root {
    --bg: #1C1C1E;
    --surface: #2C2C2E;
    --gold: #C9A84C;
    --muted: #9E9E9E;
    --text: #F5F5F5
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
    background: var(--bg);
    color: var(--text);
    font-size: 14px
}

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62px;
    background: var(--surface);
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid rgba(201, 168, 76, 0.08)
}

.bottom-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 12px
}

.bottom-nav a.active {
    color: var(--gold);
    border-top: 3px solid var(--gold);
    padding-top: 8px
}

.wa-float {
    position: fixed;
    right: 16px;
    bottom: 86px;
    background: var(--gold);
    color: #111;
    padding: 10px 14px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600
}

.hero .swiper-container {
    width: 100%;
    height: 260px
}

/* simple utility */
.error {
    background: #3b1b1b;
    color: #ffdede;
    padding: 8px;
    border-radius: 6px
}