/* Home-only glass treatment. Existing views, content, assets and motion stay intact. */
body:has(> .app-shell > #home.active) {
  background-color: #101b32;
  background-image:
    radial-gradient(ellipse at 90% 30%, rgba(34, 173, 223, .19), transparent 48%),
    radial-gradient(ellipse at 10% 95%, rgba(71, 113, 235, .18), transparent 52%),
    linear-gradient(145deg, #101b32 0%, #1b335c 55%, #274b80 100%);
  background-attachment: fixed;
}

#home {
  --muted: #c0d1e8;
  --line: rgba(218, 235, 255, .17);
  --home-glass: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(231, 245, 255, .035));
  --home-shadow: 0 12px 32px rgba(2, 10, 28, .16), inset 0 1px 0 rgba(255, 255, 255, .13);
  --home-edge: 1px solid rgba(218, 235, 255, .22);
  color: #f5f8ff;
}

/* Navigation changes follow the active view without changing navigation logic. */
body:has(> .app-shell > #home.active) > .topbar {
  --line: rgba(218, 235, 255, .17);
  top: 12px;
  margin: 12px 20px 0;
  border: 1px solid rgba(222, 238, 255, .23);
  border-radius: 24px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .09), rgba(244, 249, 255, .025)), rgba(10, 23, 48, .32);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 8px 28px rgba(2, 10, 28, .15), inset 0 1px 0 rgba(255, 255, 255, .13);
  color: #f5f8ff;
}

body:has(> .app-shell > #home.active) .topbar :is(.brand, .nav-btn, .search-shell, .search-shell input, .mobile-menu-btn, .global-mode-switch button, .mode-label) { color: #f5f8ff; }
body:has(> .app-shell > #home.active) .topbar .brand span { color: #7dcfff; }
body:has(> .app-shell > #home.active) .topbar input::placeholder { color: #bfcee3; opacity: 1; }

body:has(> .app-shell > #home.active) .topbar :is(.search-shell, .global-mode-switch, .mobile-menu-btn) {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(222, 238, 255, .2);
  box-shadow: inset 0 1px 2px rgba(2, 10, 28, .06);
}

body:has(> .app-shell > #home.active) .topbar .nav-btn { border-radius: 999px; }
body:has(> .app-shell > #home.active) .topbar .nav-btn:not(.primary):hover { background: rgba(255, 255, 255, .12); }
body:has(> .app-shell > #home.active) .topbar .nav-btn[data-view="home"] {
  background: rgba(147, 209, 255, .15);
  color: #b6e5ff;
  box-shadow: inset 0 1px 0 rgba(230, 248, 255, .16);
}

body:has(> .app-shell > #home.active) .topbar :is(.account-menu, .notification-menu) {
  background: rgba(20, 39, 68, .97);
  border-color: rgba(218, 235, 255, .23);
  box-shadow: 0 16px 40px rgba(2, 10, 28, .35);
}
body:has(> .app-shell > #home.active) .topbar :is(.account-menu, .notification-menu) :is(button, b, small, p) { color: #e4efff; }
body:has(> .app-shell > #home.active) .topbar :is(.account-menu, .notification-menu) button:hover { background: #28476d; }
body:has(> .app-shell > #home.active) .topbar :is(.notification-menu-head, .notification-item, .notification-all, .notification-menu .link-action) { background: #142744; }
body:has(> .app-shell > #home.active) .topbar .notification-item.unread { background: #203b60; }
body:has(> .app-shell > #home.active) .topbar .notification-copy span { color: #c9d8ed; }

#home .hero {
  background: linear-gradient(120deg, rgba(255, 255, 255, .045), rgba(124, 192, 255, .02));
  border: var(--home-edge);
  border-radius: 32px;
  box-shadow: 0 18px 50px rgba(2, 10, 28, .13), inset 0 1px 0 rgba(255, 255, 255, .12);
}

#home .hero > * { min-width: 0; }
#home .hero h1 { color: #f5f8ff; }
#home .hero h1 span { color: #7dcfff; }
#home .eyebrow { color: #98dcff; }
#home .hero-copy { color: #c9d8ed; }
#home .hero .eyebrow { color: #98dcff; }

/* Section introductions sit directly on the midnight background. */
#home .guest-home > :is(.local-service-motion, .browse-cats, .how) .section-head { color: #f5f8ff; }
#home .guest-home > :is(.local-service-motion, .browse-cats, .how) .section-head .eyebrow { color: #d1e6ff; }
#home .guest-home > :is(.local-service-motion, .browse-cats, .how) .section-head p:last-child { color: #e3eaf5; }

#home :is(.hero-search-card, .stats, .trusted-strip, .category-card, .worker-audience, .proof-card, .steps article, .signed-home .card) {
  background: var(--home-glass);
  border: var(--home-edge);
  box-shadow: var(--home-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
}

#home :is(.hero-search-card, .stats, .trusted-strip, .signed-home .card) { border-radius: 24px; }
#home .tip-box {
  color: #eef6ff;
  background: rgba(103, 169, 230, .09);
  border: 1px solid rgba(195, 227, 255, .18);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
#home .tip-box p { color: #c0d1e8; line-height: 1.55; }
#home .hero .tip-box { margin: 20px 0; padding: 16px 18px; }
#home .hero .tip-box b { display: block; line-height: 1.45; }
#home .hero .tip-box p { margin: 6px 0 0; }
#home .how > .hero-actions { margin-top: 20px; }
#home :is(.category-card, .proof-card, .worker-audience) p,
#home .worker-audience li { color: #c9d8ed; }
#home :is(.category-card, .proof-card) h3,
#home .trusted-strip p { color: #f5f8ff; }
#home .stats div { border-color: rgba(218, 235, 255, .17); }
#home .stats strong { color: #f5f8ff; }
#home .stats span { font-size: .875rem; }

#home .hero-search-line input {
  min-width: 0;
  width: 100%;
  background: rgba(9, 23, 46, .4);
  border: 1px solid rgba(195, 227, 255, .2);
  box-shadow: inset 0 2px 5px rgba(2, 10, 28, .09);
  color: #f5f8ff;
}
#home .hero-search-line input::placeholder { color: #bfcee3; opacity: 1; }
#home :is(.hero-tag-btn, .trusted-logos span) {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(218, 235, 255, .17);
  color: #d8eaff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
#home .hero-tag-btn:hover { background: rgba(255, 255, 255, .14); }

#home :is(.cta, .outline-btn),
body:has(> .app-shell > #home.active) .topbar .nav-btn.primary {
  border-radius: 999px;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
#home .cta:not(.secondary),
body:has(> .app-shell > #home.active) .topbar .nav-btn.primary {
  background: linear-gradient(160deg, #2679e9, #125ac8);
  color: #fff;
  box-shadow: 0 5px 12px rgba(23, 86, 178, .2), inset 0 1px 0 rgba(255, 255, 255, .3);
}
#home .cta:not(.secondary):hover,
body:has(> .app-shell > #home.active) .topbar .nav-btn.primary:hover { background: #145abf; }
#home :is(.cta.secondary, .outline-btn) {
  background: rgba(255, 255, 255, .08);
  color: #edf6ff;
  border: 1px solid rgba(218, 235, 255, .24);
  box-shadow: 0 3px 8px rgba(2, 10, 28, .08), inset 0 1px 0 rgba(255, 255, 255, .1);
}
#home :is(.cta.secondary, .outline-btn):hover { background: rgba(255, 255, 255, .16); }
#home :is(button, input):focus-visible,
body:has(> .app-shell > #home.active) .topbar :is(button, input):focus-visible {
  outline: 3px solid #7dcfff;
  outline-offset: 3px;
}

/* Keep the original phone, service animation timing, and floating positions. */
#home .hero-motion-stage {
  background:
    radial-gradient(ellipse at 90% 12%, rgba(66, 139, 255, .29), transparent 62%),
    radial-gradient(ellipse at 12% 90%, rgba(28, 201, 221, .19), transparent 58%),
    linear-gradient(140deg, rgba(131, 184, 255, .07), rgba(31, 68, 116, .13));
  border: var(--home-edge);
  border-radius: 30px;
  box-shadow: 0 22px 44px rgba(2, 10, 28, .2), inset 0 1px 0 rgba(255, 255, 255, .12);
}
#home .mock-phone {
  color: #16324e;
  background: rgba(247, 251, 255, .84);
  border-color: #263b55;
  box-shadow: 0 25px 40px rgba(24, 49, 83, .25), 0 0 0 1px rgba(255, 255, 255, .7);
}
#home .floating-service {
  background: linear-gradient(130deg, rgba(52, 84, 125, .78), rgba(23, 48, 82, .64));
  border: var(--home-edge);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 12px 24px rgba(2, 10, 28, .24), inset 0 1px 0 rgba(255, 255, 255, .18);
}
#home .floating-service > span { background: rgba(244, 249, 255, .12); }
#home .floating-service small { color: #d0e2f7; }
#home .motion-service-card {
  background: var(--home-glass);
  border: var(--home-edge);
  border-radius: 22px;
  box-shadow: var(--home-shadow);
}
#home .motion-service-card small { color: #c0d1e8; font-size: .75rem; }
#home .motion-service-card > span { background: rgba(147, 209, 255, .12); }

#home .client-audience {
  background: linear-gradient(135deg, rgba(20, 81, 169, .95), rgba(46, 110, 198, .88));
  border: var(--home-edge);
  box-shadow: var(--home-shadow);
}
#home .client-audience .eyebrow { color: #e1eeff; }
#home .cta-banner-home {
  background: linear-gradient(130deg, rgba(24, 48, 80, .95), rgba(48, 79, 116, .9));
  border: var(--home-edge);
  box-shadow: var(--home-shadow);
}
#home .cta-banner-home .eyebrow { color: #bdd9ff; }
#home .steps .feedback-step { background: linear-gradient(135deg, rgba(39, 164, 173, .17), rgba(52, 102, 171, .09)); }
#home .steps article > span { color: #ade3ff; background: rgba(147, 209, 255, .12); }
#home .signed-home :is(.feed-item, .job-card) { background: rgba(255, 255, 255, .025); }
#home .signed-home :is(.feed-item, .job-card):hover { background: rgba(255, 255, 255, .065); }
#home .mode-home-hero { background: var(--home-glass); }
#home .signed-home :is(.job-desc, .feed-desc, .posted, .client-code, .worker-code, .mode-home-location, .muted) { color: #c9d8ed; }
#home .signed-home :is(.link-action, .top-worker-row) { color: #ade3ff; }
#home .signed-home :is(.link-action, .link-card) { background: transparent; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #home .category-card { transition: transform .2s ease, box-shadow .2s ease; }
  #home .category-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(2, 10, 28, .23), inset 0 1px 0 rgba(255, 255, 255, .25); }
}

@media (max-width: 850px) {
  body:has(> .app-shell > #home.active) > .topbar { top: 8px; margin: 8px 12px 0; border-radius: 22px; }
  #home .hero { border-radius: 26px; }
  body:has(> .app-shell > #home.active) > .mobile-bottom-nav {
    left: 12px;
    right: 12px;
    bottom: 8px;
    height: auto;
    min-height: 66px;
    border: 1px solid rgba(222, 238, 255, .23);
    border-radius: 24px;
    background: rgba(14, 30, 55, .65);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 8px 30px rgba(2, 10, 28, .24), inset 0 1px 0 rgba(255, 255, 255, .13);
  }
  body:has(> .app-shell > #home.active) .mobile-bottom-nav button { color: #d6e7ff; }
  body:has(> .app-shell > #home.active) .mobile-nav-sheet { background: #152a48; color: #f5f8ff; }
  body:has(> .app-shell > #home.active) .mobile-nav-sheet :is(button, summary, small, .mobile-mode-block > span) { color: #d6e7ff; }
  body:has(> .app-shell > #home.active) .mobile-nav-sheet :is(.mobile-auth-actions button, .mobile-mode-switch button, .mobile-nav-head button) { background: #233e60; border-color: rgba(218, 235, 255, .2); }
  body:has(> .app-shell > #home.active) .mobile-nav-sheet :is(.mobile-menu-links button, summary):hover { background: #28476d; }
  body:has(> .app-shell > #home.active) .mobile-nav-sheet .mobile-mode-switch button.active { background: var(--blue); }
  body:has(> .app-shell > #home.active) .mobile-nav-sheet summary::after { color: #7dcfff; }
  #home .hero-search-card { padding: 14px; }
}

@media (max-width: 480px) {
  #home .hero { padding: 30px 20px; gap: 30px; }
  #home .hero h1 { font-size: clamp(2rem, 9.5vw, 2.7rem); letter-spacing: -1.5px; line-height: 1.08; }
  #home .hero-copy { font-size: 1rem; }
  #home .hero-search-tags { gap: 7px; }
  #home .hero-tag-btn { font-size: .875rem; padding: 8px 10px; }
  #home .hero-motion-stage { margin-inline: -8px; }
}

/* Opaque surfaces remain readable where blur/transparency is unavailable or unwanted. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #home { --home-glass: #243d5e; }
  body:has(> .app-shell > #home.active) > .topbar,
  body:has(> .app-shell > #home.active) > .mobile-bottom-nav,
  #home .floating-service { background: #1e3555; }
}
@media (prefers-reduced-transparency: reduce) {
  #home { --home-glass: #243d5e; }
  #home .hero,
  #home .floating-service,
  body:has(> .app-shell > #home.active) > .topbar,
  body:has(> .app-shell > #home.active) > .mobile-bottom-nav { background: #1e3555; }
}
@media (prefers-reduced-motion: reduce) {
  #home :is(.cta, .outline-btn, .category-card) { transition: none; }
}