/* ConfaHub Design — the final, landing-specific visual layer.
   It intentionally preserves templates, interaction hooks and layout contracts. */

:root {
    --chd-bg-0: #050505;
    --chd-bg-1: #101010;
    --chd-surface: rgba(19, 19, 19, .68);
    --chd-surface-strong: rgba(29, 29, 29, .82);
    --chd-surface-soft: rgba(255, 255, 255, .055);
    --chd-edge: rgba(255, 255, 255, .15);
    --chd-edge-strong: rgba(255, 255, 255, .30);
    --chd-ink: #f7f7f4;
    --chd-muted: rgba(247, 247, 244, .70);
    --chd-dim: rgba(247, 247, 244, .48);
    --chd-radius-xl: 30px;
    --chd-radius-lg: 22px;
    --chd-radius-md: 16px;
    --chd-shadow: 0 22px 62px rgba(0, 0, 0, .31);
    --chd-shadow-hover: 0 28px 72px rgba(0, 0, 0, .40);
    --bg: radial-gradient(ellipse 70% 60% at 90% -20%, rgba(255, 255, 255, .11), transparent 62%), linear-gradient(135deg, var(--chd-bg-0), var(--chd-bg-1));
    --surface: linear-gradient(150deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .025) 42%, rgba(0, 0, 0, .10)), var(--chd-surface);
    --surface-soft: var(--chd-surface-soft);
    --border: var(--chd-edge);
    --border-strong: var(--chd-edge-strong);
    --text: var(--chd-ink);
    --muted: var(--chd-muted);
    --muted-soft: var(--chd-dim);
    --chip: rgba(255, 255, 255, .065);
    --shadow: var(--chd-shadow);
    --shadow-soft: 0 12px 34px rgba(0, 0, 0, .20);
    --glow: inset 0 1px rgba(255, 255, 255, .14), inset 0 -1px rgba(0, 0, 0, .12);
    --radius-2xl: var(--chd-radius-xl);
    --radius-xl: var(--chd-radius-lg);
    --radius-lg: var(--chd-radius-md);
    --radius-md: 12px;
    --font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.confahub-body {
    background: var(--bg);
    letter-spacing: -.01em;
}

.site-ambience {
    background:
        radial-gradient(ellipse 50% 58% at 3% 8%, rgba(255, 255, 255, .12), transparent 71%),
        radial-gradient(ellipse 46% 54% at 91% 82%, rgba(255, 255, 255, .075), transparent 74%);
}

.site-ambience__glow { opacity: .10; filter: blur(110px); }
.site-ambience__glow--left { top: -18rem; left: -15rem; }
.site-ambience__glow--right { top: 22rem; right: -17rem; }
.site-ambience__mesh { opacity: .035; background-size: 112px 112px; }

.site-shell { gap: 20px; padding: 20px; }
.main-content { gap: 20px; }

.surface-card,
.site-header__inner,
.bottom-nav-mobile__inner,
.email-verify-modal__card {
    border: 1px solid var(--chd-edge);
    box-shadow: var(--glow), var(--chd-shadow);
    backdrop-filter: blur(28px) saturate(125%);
    -webkit-backdrop-filter: blur(28px) saturate(125%);
}

.surface-card::before { background: linear-gradient(135deg, rgba(255, 255, 255, .10), transparent 34%); }
.section-eyebrow {
    color: var(--chd-dim);
    font-size: .71rem;
    font-weight: 750;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.brand-logo { letter-spacing: -.06em; }
.brand-logo--header { font-size: clamp(1.45rem, 1.15rem + 1vw, 2.3rem); }
.brand-logo--sidebar { font-size: 1.6rem; }
.brand-logo__avatar { box-shadow: 0 10px 26px rgba(0, 0, 0, .32); }

.site-header__inner {
    min-height: 70px;
    border-radius: 20px;
    background: rgba(15, 15, 15, .58);
}

.icon-button,
.header-link-pill,
.header-user-profile {
    border-color: var(--chd-edge);
    background: rgba(255, 255, 255, .055);
    box-shadow: inset 0 1px rgba(255, 255, 255, .11);
}

.icon-button--accent {
    border-color: rgba(255, 255, 255, .52);
    background: var(--chd-ink);
    color: #131313;
    box-shadow: 0 10px 28px rgba(255, 255, 255, .10);
}

.hero-card {
    min-height: 540px;
    background:
        radial-gradient(ellipse 48% 70% at 86% 44%, rgba(255, 255, 255, .11), transparent 70%),
        linear-gradient(130deg, rgba(255, 255, 255, .08), transparent 38%),
        rgba(14, 14, 14, .68);
}

.hero-card__layout { gap: clamp(20px, 3vw, 46px); }
.hero-card__intro { align-self: center; }
.hero-card__title {
    max-width: 12ch;
    font-size: clamp(3rem, 4.5vw, 5.5rem);
    line-height: .96;
    letter-spacing: -.072em;
    text-wrap: balance;
}

.hero-card__description { max-width: 37rem; color: var(--chd-muted); font-size: clamp(1rem, 1.1vw, 1.16rem); line-height: 1.65; }
.hero-card__visual {
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--chd-radius-xl);
    background:
        radial-gradient(circle at 52% 45%, rgba(255, 255, 255, .13), transparent 25%),
        radial-gradient(circle at 50% 120%, rgba(255, 255, 255, .10), transparent 56%),
        rgba(255, 255, 255, .025);
    box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 20px 52px rgba(0, 0, 0, .26);
}

.hero-globe-scene__aura { background: radial-gradient(circle, rgba(255, 255, 255, .17), transparent 66%); }
.hero-globe-scene__flare { background: rgba(255, 255, 255, .76); box-shadow: 0 0 18px rgba(255, 255, 255, .45); }

.stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.stats-card {
    min-height: 88px;
    padding: 16px 18px;
    border-color: rgba(255, 255, 255, .11);
    border-radius: var(--chd-radius-md);
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 1px rgba(255, 255, 255, .10);
}
.stats-card__icon { width: 34px; height: 34px; flex-basis: 34px; color: var(--chd-dim); }
.stats-card__copy { gap: 2px; }
.stats-card__copy strong { font-size: 1.28rem; letter-spacing: -.05em; white-space: nowrap; }
.stats-card__copy span { color: var(--chd-muted); font-size: .82rem; white-space: nowrap; }

.services-section { padding: clamp(22px, 3vw, 34px); background: rgba(15, 15, 15, .58); }
.section-heading { align-items: end; }
.section-heading h2 { font-size: clamp(1.65rem, 2.4vw, 2.35rem); letter-spacing: -.055em; }
.section-link { color: var(--chd-muted); }

.service-card {
    border-color: rgba(255, 255, 255, .11);
    border-radius: var(--chd-radius-lg);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), transparent 44%),
        rgba(255, 255, 255, .025);
    box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 10px 32px rgba(0, 0, 0, .14);
}
.service-card__icon-wrap,
.sidebar-service-card__icon,
.sidebar-premium-card__icon {
    border-color: rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .065);
    box-shadow: inset 0 1px rgba(255, 255, 255, .12);
}
.service-card__icon-wrap.service-card__icon-wrap--asset,
.sidebar-service-card__icon.sidebar-service-card__icon--asset,
.sidebar-premium-card__icon.sidebar-premium-card__icon--asset {
    border: 0;
    background: transparent;
    box-shadow: none;
}
.service-card__title-row h3 { letter-spacing: -.045em; }
.service-card__copy p,
.sidebar-service-card__copy span { color: var(--chd-muted); }
.inline-badge,
.service-chip {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .065);
    color: var(--chd-muted);
}
.service-card__features li { color: var(--chd-muted); }
.service-card__features .icon { color: var(--chd-ink); }
.service-card__button,
.sidebar-auth-button {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .075);
    box-shadow: inset 0 1px rgba(255, 255, 255, .12);
}

.sidebar__card {
    background: rgba(15, 15, 15, .64);
    border-radius: var(--chd-radius-xl);
}
.sidebar-service-card {
    border-color: transparent;
    border-radius: var(--chd-radius-md);
    background: transparent;
}
.sidebar-premium-card {
    border-color: rgba(255, 255, 255, .16);
    background: linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .025));
}
.social-link { border-color: rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04); }

.auth-spotlight,
.auth-form-card,
.profile-card,
.email-verify-modal__card { background: rgba(17, 17, 17, .72); }
.auth-spotlight h1,
.auth-form-card h1,
.profile-card h1 { letter-spacing: -.06em; }
.auth-service-preview__item { border-color: rgba(255, 255, 255, .10); background: rgba(255, 255, 255, .04); }
.auth-field input,
.profile-field input,
.email-verify-modal__row input {
    border-color: rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .055);
    color: var(--chd-ink);
}
.auth-field input:focus,
.profile-field input:focus,
.email-verify-modal__row input:focus { border-color: rgba(255, 255, 255, .55); box-shadow: 0 0 0 4px rgba(255, 255, 255, .10); }
.primary-button,
.auth-spotlight__button,
.auth-form-card__button-link,
.email-verify-modal__row .primary-button {
    border: 1px solid rgba(255, 255, 255, .62);
    background: var(--chd-ink);
    color: #151515;
    box-shadow: inset 0 1px rgba(255, 255, 255, .75), 0 12px 28px rgba(0, 0, 0, .22);
}
.text-link { color: var(--chd-muted); }

.bottom-nav-mobile { padding-bottom: max(10px, var(--safe-bottom)); }
.bottom-nav-mobile__inner {
    border-radius: 22px;
    background: rgba(18, 18, 18, .86);
    box-shadow: var(--glow), 0 16px 44px rgba(0, 0, 0, .36);
}
.bottom-nav-mobile__item { color: var(--chd-dim); }
.bottom-nav-mobile__item.is-active { color: var(--chd-ink); background: rgba(255, 255, 255, .09); }

.email-verify-modal__backdrop { background: rgba(0, 0, 0, .68); backdrop-filter: blur(8px); }

@media (hover: hover) {
    .icon-button:hover,
    .header-link-pill:hover,
    .header-user-profile:hover,
    .social-link:hover { border-color: var(--chd-edge-strong); background: rgba(255, 255, 255, .10); }
    .icon-button--accent:hover,
    .primary-button:hover,
    .auth-spotlight__button:hover,
    .auth-form-card__button-link:hover { transform: translateY(-1px); background: #fff; }
    .service-card:hover,
    .stats-card--link:hover,
    .sidebar-service-card:hover {
        border-color: rgba(255, 255, 255, .30);
        background-color: rgba(255, 255, 255, .075);
        box-shadow: inset 0 1px rgba(255, 255, 255, .15), var(--chd-shadow-hover);
    }
    .service-card__button:hover,
    .sidebar-auth-button:hover { border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .12); }
}

@media (max-width: 900px) {
    .site-shell { padding: 12px; gap: 14px; }
    .main-content { gap: 14px; }
    .site-header__inner { min-height: 60px; border-radius: 18px; }
    .hero-card { min-height: 0; }
    .hero-card__title { font-size: clamp(2.55rem, 12vw, 4rem); }
    .hero-card__visual { border-radius: 22px; }
    .services-section { padding: 20px 15px 16px; }
    .service-card { border-radius: 18px; }
    .sidebar__card { border-radius: 0 24px 24px 0; background: rgba(13, 13, 13, .92); }
}

@media (max-width: 480px) {
    .section-eyebrow { font-size: .65rem; }
    .hero-card__description { font-size: .98rem; line-height: 1.58; }
    .stats-card__copy strong { font-size: 1.22rem; }
}

@media (max-width: 560px) {
    .stats-grid { grid-template-columns: minmax(0, 1fr); }
    .stats-card { min-height: 74px; padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .icon-button--accent:hover,
    .primary-button:hover,
    .auth-spotlight__button:hover,
    .auth-form-card__button-link:hover { transform: none; }
}