:root {
    --wip-bg: #f4efe8;
    --wip-surface: rgba(255, 255, 255, 0.78);
    --wip-surface-strong: #ffffff;
    --wip-text: #243240;
    --wip-muted: #5f6b78;
    --wip-accent: #2f7d74;
    --wip-accent-hover: #25655e;
    --wip-border: rgba(47, 125, 116, 0.16);
}

body {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.wip-page {
    position: relative;
    isolation: isolate;
    color: var(--wip-text);
    background:
        radial-gradient(circle at 15% 15%, rgba(47, 125, 116, 0.24), transparent 30%),
        radial-gradient(circle at 85% 12%, rgba(83, 145, 214, 0.18), transparent 24%),
        radial-gradient(circle at 75% 82%, rgba(194, 151, 81, 0.18), transparent 26%),
        linear-gradient(180deg, #fffaf5 0%, var(--wip-bg) 100%);
}

body.wip-page::before,
body.wip-page::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(90px);
    opacity: 0.8;
}

body.wip-page::before {
    top: -6rem;
    left: -5rem;
    width: 22rem;
    height: 22rem;
    background: rgba(47, 125, 116, 0.28);
}

body.wip-page::after {
    right: -6rem;
    bottom: 2rem;
    width: 24rem;
    height: 24rem;
    background: rgba(83, 145, 214, 0.16);
}

body.wip-page main {
    display: flex;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.wip-stack {
    width: 100%;
    max-width: 72rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

body.wip-page footer {
    background: rgba(36, 50, 64, 0.92) !important;
}

.wip-page-title {
    margin-bottom: 0;
}

.wip-page-title h1 {
    color: var(--wip-text);
    line-height: 0.95;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.wip-page-title .wip-motto {
    font-size: 1.05rem;
}

.wip-hero {
    background: rgba(255, 255, 255, 0.46);
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 1.75rem;
    padding: 3rem 1.5rem;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
        0 20px 50px rgba(36, 50, 64, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.wip-eyebrow {
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.82rem;
    color: var(--wip-accent);
    font-weight: 700;
}

.wip-motto {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--wip-muted);
    margin-bottom: 0;
}

.wip-hero h1,
.wip-panel h2,
.wip-label {
    color: var(--wip-text);
}

.wip-hero .lead,
.wip-panel p {
    color: var(--wip-muted);
}

.wip-panel {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 1.25rem;
    padding: 2rem;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow:
        0 16px 36px rgba(36, 50, 64, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.wip-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
    color: var(--wip-accent);
    font-weight: 700;
}

.btn.btn-wip {
    --bs-btn-color: #fff;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 47, 125, 116;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;

    background: linear-gradient(135deg, #3b9c91 0%, #2f7d74 52%, #276861 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    color: #fff !important;
    border-radius: 999px;
    padding: 0.95rem 1.65rem;
    min-height: 3.4rem;
    letter-spacing: 0.02em;
    font-weight: 700;
    box-shadow:
        0 14px 30px rgba(47, 125, 116, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.btn.btn-wip:hover,
.btn.btn-wip:focus {
    background: linear-gradient(135deg, #45a99c 0%, #33877d 52%, #255f59 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow:
        0 18px 34px rgba(47, 125, 116, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn.btn-wip:active {
    transform: translateY(0);
    filter: brightness(0.98);
}