:root {
    --ink: #070805;
    --panel: #12140f;
    --line: #2a2d22;
    --gold: #d4b45a;
    --gold-2: #f0dd9a;
    --green: #25d366;
    --muted: #9aa392;
}
html, body { background: var(--ink); color: #ece8dc; font-family: "Outfit", system-ui, sans-serif; }
h1, h2, h3, .serif { font-family: "Cormorant Garamond", Georgia, serif; }
.nav-da { background: rgba(7,8,5,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.navbar-brand { letter-spacing: .08em; }
.brand-lift { color: var(--gold); font-weight: 700; letter-spacing: .18em; font-size: .95rem; }
.brand-x { color: #6b6b5a; margin: 0 .35rem; }
.brand-da { color: #f4f0e4; font-weight: 600; letter-spacing: .16em; font-size: .78rem; }
.nav-link { color: #cfc8b4 !important; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.nav-link.active, .nav-link:hover { color: var(--gold) !important; }
.btn-gold { background: var(--gold); color: #14120a; border: 0; font-weight: 600; letter-spacing: .06em; }
.btn-gold:hover { background: var(--gold-2); color: #14120a; }
.btn-ghost { border: 1px solid var(--gold); color: var(--gold-2); background: transparent; }
.btn-ghost:hover { background: var(--gold); color: #14120a; }
.btn-wa { background: var(--green); color: #062; border: 0; font-weight: 600; }
.btn-wa:hover { background: #1ebe5d; color: #062; }
.text-gold { color: var(--gold) !important; }
.eyebrow { letter-spacing: .22em; font-size: .72rem; color: var(--gold); text-transform: uppercase; }
.hero {
    min-height: 86vh;
    background:
        radial-gradient(1200px 500px at 20% 20%, rgba(212,180,90,.12), transparent 50%),
        linear-gradient(90deg, rgba(7,8,5,.92) 0%, rgba(7,8,5,.55) 55%, rgba(7,8,5,.3) 100%),
        url("../img/products/soft-s1.jpg") center/cover no-repeat;
    display: flex; align-items: center;
}
.hero-dock {
    min-height: 70vh;
    background:
        linear-gradient(90deg, rgba(7,8,5,.9), rgba(7,8,5,.4)),
        url("../img/products/docksplit.jpg") center/cover no-repeat;
    display: flex; align-items: center;
}
.display-title { font-size: clamp(3.2rem, 8vw, 6.4rem); line-height: .92; font-weight: 500; }
.display-title em { font-style: italic; color: var(--gold-2); }
.tier-card, .product-card, .part-card, .step-card, .stat-card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; height: 100%;
    transition: transform .2s ease, border-color .2s ease;
}
.tier-card:hover, .product-card:hover, .part-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.product-card img, .tier-card img { width: 100%; height: 210px; object-fit: cover; }
.product-hero-img { width: 100%; max-height: 460px; object-fit: cover; border: 1px solid var(--line); }
.badge-tier { background: var(--gold); color: #14120a; font-weight: 700; }
.price { font-family: "Cormorant Garamond", serif; font-size: 2rem; color: var(--gold-2); }
.spec-table td { border-color: var(--line); color: #d7d2c4; }
.site-footer { background: #050604; border-top: 1px solid var(--line); }
.site-footer a { color: #cfc8b4; text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-label { letter-spacing: .18em; font-size: .72rem; text-transform: uppercase; color: var(--gold); }
.tiny { font-size: .78rem; }
.step-num {
    width: 42px; height: 42px; border-radius: 50%; background: var(--gold); color: #14120a; font-weight: 700;
    display: grid; place-items: center; font-family: "Cormorant Garamond", serif; font-size: 1.4rem;
}
.cart-img { width: 72px; height: 56px; object-fit: cover; }
.alert-max { background: #1a170e; border: 1px solid #5a4a22; color: #f0dd9a; }
.filter-chip { border: 1px solid var(--line); color: #ddd; background: transparent; }
.filter-chip.active, .filter-chip:hover { background: var(--gold); color: #14120a; border-color: var(--gold); }
.wa-float {
    position: fixed; right: 22px; bottom: 22px; z-index: 40;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--green); color: #fff;
    display: grid; place-items: center; font-size: 1.6rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.wa-float:hover { color: #fff; transform: scale(1.05); }
.sister-bar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.form-control, .form-select {
    background: #0d0f0b; border-color: var(--line); color: #ece8dc;
}
.form-control:focus, .form-select:focus { background: #0d0f0b; color: #ece8dc; border-color: var(--gold); box-shadow: none; }