body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(143, 230, 210, 0.18), transparent 30%),
        radial-gradient(circle at top right, rgba(248, 206, 116, 0.14), transparent 26%),
        linear-gradient(180deg, #eef4f8 0%, #f8fbfd 38%, #edf3f6 100%);
    color: #0b1726;
    font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
}

body::before,
body::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(10px);
    opacity: 0.6;
    z-index: 0;
}

body::before {
    width: 320px;
    height: 320px;
    top: 96px;
    left: -140px;
    background: rgba(143, 230, 210, 0.42);
}

body::after {
    width: 380px;
    height: 380px;
    right: -180px;
    top: 320px;
    background: rgba(24, 134, 242, 0.14);
}

main,
.page-hero,
.contact-section,
.support-content,
.privacy-content,
.terms-content,
.content-section,
.faq-section,
.container,
.page-footer {
    position: relative;
    z-index: 1;
}

.container {
    width: min(1160px, calc(100% - 32px)) !important;
}

.page-hero {
    padding: 36px 0 22px !important;
    background: transparent !important;
}

.page-hero .container,
.selector-hero {
    padding: 30px !important;
    border-radius: 32px !important;
    background:
        linear-gradient(160deg, rgba(11, 23, 38, 0.94), rgba(24, 52, 76, 0.94)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
    color: #f7fbfd !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 28px 60px rgba(11, 23, 38, 0.18) !important;
}

.page-hero h1,
.selector-hero h1 {
    margin: 0 !important;
    font-family: "Space Grotesk", "Manrope", sans-serif !important;
    font-size: clamp(2.3rem, 5vw, 4.4rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.04em !important;
    color: #f7fbfd !important;
}

.page-hero p,
.selector-hero p {
    margin: 14px 0 0 !important;
    max-width: 62ch;
    color: rgba(247, 251, 253, 0.74) !important;
    line-height: 1.75 !important;
    font-size: 1rem !important;
}

.contact-section,
.support-content,
.privacy-content,
.terms-content,
.content-section,
.faq-section {
    padding: 18px 0 70px !important;
    background: transparent !important;
}

.contact-info,
.contact-form,
.support-card,
.faq-container,
.contact-option,
.resources,
.policy-section,
.terms-section,
.card,
.team-member,
.highlight-box,
.disclaimer-box,
.section,
.fallback-contact,
.contact-option {
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid rgba(255, 255, 255, 0.74) !important;
    box-shadow: 0 20px 44px rgba(11, 23, 38, 0.1) !important;
    backdrop-filter: blur(16px);
}

.contact-grid,
.support-grid,
.grid-2,
.grid-3,
.team-grid,
.contact-options,
.resource-links {
    gap: 20px !important;
}

.contact-method,
.faq-item {
    border-radius: 20px !important;
    border: 1px solid rgba(54, 80, 107, 0.1) !important;
    background: rgba(247, 251, 253, 0.82) !important;
}

.faq-item.active,
.faq-item:hover {
    border-color: rgba(20, 115, 230, 0.22) !important;
    box-shadow: 0 16px 30px rgba(11, 23, 38, 0.08);
}

.contact-icon,
.support-icon,
.icon-circle,
.member-avatar {
    background: linear-gradient(135deg, rgba(20, 115, 230, 0.12), rgba(143, 230, 210, 0.24)) !important;
    color: #1473e6 !important;
}

.btn,
.btn-primary,
.btn-outline,
.btn-block,
.resource-link,
.nav-button {
    border-radius: 999px !important;
    font-weight: 800 !important;
}

.btn-primary,
.nav-button {
    background: linear-gradient(135deg, #1473e6, #1886f2) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 18px 36px rgba(20, 115, 230, 0.22) !important;
}

.btn-outline {
    background: #fff !important;
    color: #0b1726 !important;
    border: 1px solid rgba(54, 80, 107, 0.14) !important;
}

.resource-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 20px !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: #0b1726 !important;
    border: 1px solid rgba(54, 80, 107, 0.12) !important;
}

.resource-link:hover,
.btn:hover,
.nav-button:hover,
.contact-option.available:hover {
    transform: translateY(-2px);
}

input,
select,
textarea {
    border-radius: 18px !important;
    border: 1px solid rgba(54, 80, 107, 0.12) !important;
    background: rgba(247, 251, 253, 0.94) !important;
    color: #0b1726 !important;
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: rgba(20, 115, 230, 0.28) !important;
    box-shadow: 0 0 0 3px rgba(20, 115, 230, 0.12) !important;
}

.alert {
    border-radius: 18px !important;
}

.last-updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(20, 115, 230, 0.08);
    color: #36506b !important;
    font-weight: 700;
}

.section h2,
.policy-section h2,
.terms-section h2,
.support-card h3,
.contact-form h3,
.contact-info h3,
.section-title {
    font-family: "Space Grotesk", "Manrope", sans-serif !important;
    letter-spacing: -0.03em;
}

.privacy-content .container,
.terms-content .container {
    max-width: 920px !important;
}

.privacy-notice-shell {
    width: min(920px, calc(100% - 32px));
    margin: 36px auto 72px;
    padding: 32px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow: 0 24px 48px rgba(11, 23, 38, 0.12);
    backdrop-filter: blur(18px);
    position: relative;
    z-index: 1;
}

.privacy-notice-shell h1 {
    font-family: "Space Grotesk", "Manrope", sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    letter-spacing: -0.04em;
}

.privacy-notice-shell ul {
    padding-left: 18px;
}

.contact-selector-page {
    padding: 24px 0 0 !important;
    display: block !important;
    background:
        radial-gradient(circle at top left, rgba(143, 230, 210, 0.18), transparent 30%),
        radial-gradient(circle at top right, rgba(248, 206, 116, 0.14), transparent 26%),
        linear-gradient(180deg, #eef4f8 0%, #f8fbfd 38%, #edf3f6 100%) !important;
}

.contact-selector-page .container {
    margin: 24px auto 30px !important;
    background: transparent !important;
    box-shadow: none !important;
    max-width: 1120px !important;
    padding: 0 !important;
}

.contact-selector-shell {
    padding: 28px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow: 0 24px 48px rgba(11, 23, 38, 0.12);
    backdrop-filter: blur(18px);
}

.header {
    border-radius: 28px !important;
    margin-bottom: 22px;
    background:
        linear-gradient(160deg, rgba(11, 23, 38, 0.94), rgba(24, 52, 76, 0.94)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
}

.contact-options {
    padding: 0 !important;
}

.page-footer {
    margin-top: 24px;
}

@media (max-width: 768px) {
    .page-hero .container,
    .selector-hero,
    .privacy-notice-shell,
    .contact-selector-shell {
        padding: 24px !important;
        border-radius: 24px !important;
    }

    .contact-grid,
    .support-grid,
    .grid-2,
    .grid-3,
    .team-grid {
        grid-template-columns: 1fr !important;
    }
}