/* Taskquatch 2026 design language layer
   Matches the refreshed app: warm cream surfaces, deep teal ink,
   coral accents, organic pastel blobs, dotted grids and dashed journey paths.
   Loaded last so it wins over color1.css, brand-colors.css and freshness.css. */

:root {
  --dl-ink: #1C3A46;
  --dl-ink-soft: rgba(28, 58, 70, 0.72);
  --dl-cream: #FAF5EC;
  --dl-coral: #F0705C;
  --dl-coral-deep: #E4573F;
  --dl-teal-deep: #1C4A57;
  --dl-blob-coral: #F4A28C;
  --dl-blob-blue: #CFDAE2;
  --dl-blob-pink: #F6DCD4;
  --dl-sage: #A9C87E;
  --dl-line: rgba(28, 58, 70, 0.1);
  --dl-shadow: 0 24px 60px rgba(28, 58, 70, 0.12);
  --dl-shadow-soft: 0 14px 40px rgba(28, 58, 70, 0.08);

  /* Retune freshness tokens */
  --fresh-line: rgba(28, 58, 70, 0.1);
  --fresh-shadow: 0 24px 70px rgba(28, 58, 70, 0.1);
  --fresh-shadow-soft: 0 16px 48px rgba(28, 58, 70, 0.08);
  --fresh-surface: #ffffff;
  --fresh-surface-soft: #FAF5EC;
  --fresh-muted: rgba(28, 58, 70, 0.72);
}

/* ---------------------------------------------------------------------------
   Page backdrop: warm cream, no teal wash
--------------------------------------------------------------------------- */
body {
  background: var(--dl-cream) !important;
  background-color: var(--dl-cream) !important;
  color: var(--dl-ink-soft) !important;
}

/* ---------------------------------------------------------------------------
   Navigation: light frosted cream bar with ink links and coral CTA
--------------------------------------------------------------------------- */
.navbar.navbar-fixed-top,
.navbar.navbar-fixed-top.navbar-transparent,
.navbar.navbar-fixed-top.navbar-color-on-scroll,
.navbar.navbar-fixed-top.navbar-transparent:not(.navbar-fresh-glass) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none;
}

.navbar.navbar-fixed-top.navbar-fresh-glass,
.navbar.navbar-fixed-top:not(.navbar-transparent) {
  background: rgba(250, 245, 236, 0.92) !important;
  background-color: rgba(250, 245, 236, 0.92) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--dl-line) !important;
  box-shadow: 0 10px 40px rgba(28, 58, 70, 0.08);
}

@media (min-width: 992px) {
  .navbar.navbar-fixed-top.navbar-color-on-scroll,
  .navbar.navbar-fixed-top.navbar-color-on-scroll:not(.navbar-transparent) {
    background: rgba(250, 245, 236, 0.9) !important;
    background-color: rgba(250, 245, 236, 0.9) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--dl-line) !important;
    box-shadow: 0 10px 40px rgba(28, 58, 70, 0.08);
  }

  .navbar.navbar-fixed-top.navbar-transparent:not(.navbar-color-on-scroll) {
    border-bottom-color: transparent !important;
    box-shadow: none;
  }
}

/* All nav links are ink over the light bar */
.navbar .navbar-nav > li > a,
.navbar.navbar-transparent .navbar-nav > li > a,
.navbar.navbar-fixed-top.navbar-fresh-glass .navbar-nav > li > a,
.navbar.navbar-fixed-top:not(.navbar-transparent) .navbar-nav > li > a,
.navbar.navbar-color-on-scroll:not(.navbar-transparent) .navbar-nav > li > a {
  color: var(--dl-ink) !important;
  font-weight: 600;
}

.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus,
.navbar.navbar-fixed-top.navbar-fresh-glass .navbar-nav > li > a:hover,
.navbar.navbar-fixed-top:not(.navbar-transparent) .navbar-nav > li > a:hover,
.navbar.navbar-color-on-scroll:not(.navbar-transparent) .navbar-nav > li > a:hover {
  color: var(--dl-coral-deep) !important;
  background: transparent;
}

/* Keep CTA pill white-on-coral in every navbar state */
.navbar .navbar-nav > li > a.nav-cta,
.navbar.navbar-fixed-top .navbar-nav > li > a.nav-cta,
.navbar.navbar-fixed-top:not(.navbar-transparent) .navbar-nav > li > a.nav-cta {
  background: var(--dl-coral) !important;
  color: #ffffff !important;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(240, 112, 92, 0.32);
}

.navbar .navbar-nav > li > a.nav-cta:hover,
.navbar.navbar-fixed-top .navbar-nav > li > a.nav-cta:hover {
  background: var(--dl-coral-deep) !important;
  color: #ffffff !important;
}

/* Dark wordmark everywhere (light hero + light navbar) */
.navbar-logo-light,
.navbar.navbar-fresh-glass .navbar-logo-light,
.navbar.navbar-fixed-top .navbar-logo-light,
.navbar.navbar-fixed-top:not(.navbar-transparent) .navbar-logo-light {
  display: none !important;
}

.navbar-logo-dark,
.navbar.navbar-fresh-glass .navbar-logo-dark,
.navbar.navbar-fixed-top .navbar-logo-dark,
.navbar.navbar-fixed-top:not(.navbar-transparent) .navbar-logo-dark {
  display: block !important;
}

/* Mobile: solid cream bar, ink hamburger */
@media (max-width: 991px) {
  .navbar.navbar-fixed-top,
  .navbar.navbar-fixed-top.navbar-transparent,
  .navbar.navbar-fixed-top.navbar-color-on-scroll,
  .navbar.navbar-fixed-top.navbar-color-on-scroll.navbar-transparent,
  .navbar.navbar-fixed-top:not(.navbar-transparent),
  .navbar.navbar-color-on-scroll.navbar-fixed-top:not(.navbar-transparent),
  .navbar.navbar-fixed-top.navbar-color-on-scroll:not(.navbar-transparent),
  .navbar.navbar-fixed-top.navbar-fresh-glass,
  .navbar.navbar-default.navbar-fixed-top:not(.navbar-transparent),
  .navbar.navbar-primary.navbar-fixed-top:not(.navbar-transparent) {
    background: rgba(250, 245, 236, 0.96) !important;
    background-color: rgba(250, 245, 236, 0.96) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--dl-line) !important;
  }

  .navbar.navbar-fixed-top .navbar-nav > li > a,
  .navbar.navbar-fixed-top:not(.navbar-transparent) .navbar-nav > li > a,
  .navbar.navbar-color-on-scroll.navbar-fixed-top:not(.navbar-transparent) .navbar-nav > li > a {
    color: var(--dl-ink) !important;
  }

  .navbar.navbar-fixed-top .navbar-nav > li > a:hover,
  .navbar.navbar-fixed-top:not(.navbar-transparent) .navbar-nav > li > a:hover,
  .navbar.navbar-color-on-scroll.navbar-fixed-top:not(.navbar-transparent) .navbar-nav > li > a:hover {
    color: var(--dl-coral-deep) !important;
  }

  .navbar.navbar-fixed-top .navbar-nav > li > a.nav-cta,
  .navbar.navbar-fixed-top:not(.navbar-transparent) .navbar-nav > li > a.nav-cta {
    color: #ffffff !important;
  }

  .navbar.navbar-fixed-top .navbar-toggle .icon-bar {
    background-color: var(--dl-ink) !important;
  }

  .navbar.navbar-fixed-top .navbar-logo-light {
    display: none !important;
  }

  .navbar.navbar-fixed-top .navbar-logo-dark {
    display: block !important;
  }

  .navbar .navbar-collapse {
    background: transparent !important;
    border-top: 1px solid var(--dl-line);
  }
}

/* ---------------------------------------------------------------------------
   Hero: warm cream with organic blobs, dotted grid and dashed journey path
--------------------------------------------------------------------------- */
.tt-main-header {
  background:
    radial-gradient(38rem 30rem at -8% 108%, rgba(244, 162, 140, 0.55), transparent 62%),
    radial-gradient(34rem 26rem at 108% -6%, rgba(207, 218, 226, 0.7), transparent 64%),
    radial-gradient(22rem 18rem at 96% 78%, rgba(246, 220, 212, 0.6), transparent 65%),
    var(--dl-cream) !important;
  background-attachment: scroll !important;
}

/* Dotted-grid decoration (replaces the old faint white dots) */
.tt-main-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(228, 87, 63, 0.35) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  background-repeat: repeat;
  -webkit-mask-image:
    radial-gradient(16rem 12rem at 6% 30%, #000 0%, transparent 70%),
    radial-gradient(14rem 11rem at 88% 62%, #000 0%, transparent 70%);
  mask-image:
    radial-gradient(16rem 12rem at 6% 30%, #000 0%, transparent 70%),
    radial-gradient(14rem 11rem at 88% 62%, #000 0%, transparent 70%);
  opacity: 0.8;
  z-index: 1;
}

/* Dashed journey path with waypoint dots */
.tt-main-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' fill='none'%3E%3Cpath d='M-40 560 C 180 480 260 620 430 580 C 620 535 640 400 840 430 C 1020 457 1090 340 1250 320' stroke='%23E08A76' stroke-width='3' stroke-dasharray='2 14' stroke-linecap='round' opacity='0.55'/%3E%3Ccircle cx='430' cy='580' r='9' fill='%23E4573F' opacity='0.75'/%3E%3Ccircle cx='840' cy='430' r='9' fill='%23E4573F' opacity='0.75'/%3E%3Ccircle cx='1150' cy='338' r='9' fill='%23E4573F' opacity='0.75'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}

/* Ink typography over the light hero */
.tt-main-header .title,
.tt-main-header h1,
.tt-main-header .hero-headline,
.tt-main-header .description,
.tt-main-header .description p {
  color: var(--dl-ink) !important;
}

.tt-main-header .hero-headline {
  font-weight: 800;
}

/* Eyebrow: white pill chip with coral dot */
.hero-eyebrow {
  background: #ffffff !important;
  border: 1px solid var(--dl-line) !important;
  color: var(--dl-coral-deep) !important;
  box-shadow: var(--dl-shadow-soft);
}

.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--dl-coral);
  vertical-align: 1px;
}

/* Trust panel: white rounded card, cream tiles, coral icons */
.trust-glass {
  background: #ffffff !important;
  border: 1px solid var(--dl-line) !important;
  box-shadow: var(--dl-shadow) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 22px !important;
}

.trust-glass-item {
  background: var(--dl-cream) !important;
  border: 1px solid rgba(28, 58, 70, 0.06) !important;
  border-radius: 16px !important;
}

.trust-glass-item .lucide {
  color: var(--dl-coral) !important;
}

.trust-glass-value {
  color: var(--dl-ink) !important;
}

.trust-glass-label {
  color: var(--dl-ink-soft) !important;
}

/* Hero search: white pill with soft shadow */
.tt-main-header .service-match-search-inner {
  background: #ffffff !important;
  border: 1px solid var(--dl-line) !important;
  box-shadow: var(--dl-shadow-soft) !important;
}

.tt-main-header .service-match-search-inner input {
  color: var(--dl-ink) !important;
  background: transparent !important;
}

.tt-main-header .service-match-search-inner input::placeholder {
  color: rgba(28, 58, 70, 0.45) !important;
}

.tt-main-header .service-match-search-btn {
  background: var(--dl-coral) !important;
  color: #ffffff !important;
}

.tt-main-header .search-mic-btn {
  color: var(--dl-ink-soft) !important;
}

/* Hero CTAs: coral primary, ink outline secondary */
.hero-buttons .hero-cta-primary,
.hero-cta-primary,
.btn.hero-cta-glow {
  background: var(--dl-coral) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(240, 112, 92, 0.35) !important;
}

.hero-buttons .hero-cta-primary:hover,
.hero-buttons .hero-cta-primary:focus {
  background: var(--dl-coral-deep) !important;
}

.hero-buttons .hero-cta-secondary,
.btn-outline-white.hero-cta-secondary {
  border: 2px solid rgba(28, 58, 70, 0.7) !important;
  color: var(--dl-ink) !important;
  background: transparent !important;
}

.hero-buttons .hero-cta-secondary:hover {
  background: rgba(28, 58, 70, 0.06) !important;
  border-color: var(--dl-ink) !important;
  color: var(--dl-ink) !important;
}

/* Phone mockup: soft pastel tilt card + gentler shadow */
.hero-stack-glow {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(246, 220, 212, 0.75)) !important;
  border: 1px solid var(--dl-line);
  box-shadow: var(--dl-shadow) !important;
}

.hero-product-stack .hero-mockup-img,
.hero-mockup-img {
  filter: drop-shadow(0 24px 50px rgba(28, 58, 70, 0.28)) !important;
}

/* Floating feature pills next to the phone (Instant / Transparent / Verified) */
.hero-feature-pills {
  position: absolute;
  top: 50%;
  right: -30px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 3;
}

.hero-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 12px;
  background: #ffffff;
  border: 1px solid var(--dl-line);
  border-radius: 999px;
  box-shadow: var(--dl-shadow-soft);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--dl-ink);
  white-space: nowrap;
}

.hero-feature-pill i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: var(--dl-blob-pink);
  color: var(--dl-coral-deep);
  font-size: 0.9rem;
}

.hero-feature-pill:nth-child(2) {
  margin-right: -18px;
}

@media (max-width: 1350px) {
  .hero-feature-pills {
    right: -8px;
  }
}

@media (max-width: 991px) {
  .hero-feature-pills {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    z-index: 3;
  }

  .hero-feature-pill:nth-child(2) {
    margin-right: 0;
  }
}

/* ---------------------------------------------------------------------------
   Sections: alternate cream / white, coral dividers, ink headings
--------------------------------------------------------------------------- */
/* Full-bleed content wrapper: the old Material Kit "raised card" inset left
   cream strips beside the dark download band where it meets the footer */
.main.main-raised {
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--dl-ink) !important;
}

.light-grey-bg,
.section-padding.light-grey-bg {
  background: #ffffff !important;
  border-top: 1px solid var(--dl-line);
  border-bottom: 1px solid var(--dl-line);
}

.section-divider {
  background-color: var(--dl-coral) !important;
  border-radius: 999px;
}

.section-eyebrow {
  color: var(--dl-coral-deep) !important;
}

.section-description,
.feature-card p,
.step-content p,
.story-content,
.press-excerpt,
.stat-label,
.description {
  color: var(--dl-ink-soft) !important;
}

/* Step icons: coral / blue-gray / sage pastel squircles */
#how-it-works .step-number,
.step-number {
  border-radius: 20px !important;
}

#how-it-works .col-md-4:nth-child(1) .step-number {
  background: var(--dl-blob-pink) !important;
  box-shadow: 0 10px 26px rgba(228, 87, 63, 0.16) !important;
}

#how-it-works .col-md-4:nth-child(1) .step-number i {
  color: var(--dl-coral-deep) !important;
}

#how-it-works .col-md-4:nth-child(2) .step-number {
  background: var(--dl-blob-blue) !important;
  box-shadow: 0 10px 26px rgba(28, 74, 87, 0.14) !important;
}

#how-it-works .col-md-4:nth-child(2) .step-number i {
  color: var(--dl-teal-deep) !important;
}

#how-it-works .col-md-4:nth-child(3) .step-number {
  background: #E9F0DC !important;
  box-shadow: 0 10px 26px rgba(122, 155, 74, 0.16) !important;
}

#how-it-works .col-md-4:nth-child(3) .step-number i {
  color: #6E9245 !important;
}

/* Community mascot with laurels */
.dl-mascot-laurels {
  display: block;
  width: 220px;
  max-width: 60%;
  height: auto;
  margin: 0 auto 6px;
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------------------------------
   Download / CTA band: deep teal with coral blob accents
--------------------------------------------------------------------------- */
.cta-section {
  background:
    radial-gradient(30rem 22rem at 106% 110%, rgba(240, 112, 92, 0.35), transparent 62%),
    radial-gradient(26rem 20rem at -6% -10%, rgba(207, 218, 226, 0.16), transparent 60%),
    linear-gradient(135deg, #1C4A57 0%, #163B46 100%) !important;
}

.cta-section::before {
  background-image: radial-gradient(rgba(250, 245, 236, 0.22) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.35;
}

.cta-button-primary {
  background: var(--dl-coral) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 32px rgba(240, 112, 92, 0.35);
}

.cta-button-primary:hover {
  background: var(--dl-coral-deep) !important;
  color: #ffffff !important;
}

.cta-button-secondary {
  border-radius: 999px !important;
}

.trust-badge i {
  color: var(--dl-blob-coral) !important;
}

/* App store badges: the Apple SVG (119.7x40) is narrower per unit height than
   the Google Play SVG (180x53.3), so at equal heights the Apple badge looks
   smaller. Render the Apple badge ~11% taller so both read the same size. */
.download-section img {
  height: 44px !important;
  width: auto !important;
  margin: 0 !important; /* spacing comes from the flex gap on the container */
}

.download-section a[href*="apple.com"] img {
  height: 49px !important;
}

.sticky-cta-badge img {
  height: 40px !important;
  width: auto !important;
}

.sticky-cta-badge[href*="apple.com"] img {
  height: 44px !important;
}

@media (max-width: 360px) {
  .sticky-cta-badge img {
    height: 36px !important;
  }

  .sticky-cta-badge[href*="apple.com"] img {
    height: 40px !important;
  }
}

/* ---------------------------------------------------------------------------
   Footer: deep teal ink
--------------------------------------------------------------------------- */
.footer {
  background: #163B46 !important;
}

/* Headings inside the dark footer must stay light (h1-h6 default to ink) */
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
  color: #FFF6EB !important;
}

.footer-links a:hover,
.footer .primary-color {
  color: var(--dl-blob-coral) !important;
}

/* ---------------------------------------------------------------------------
   Misc chrome: back-to-top, scroll indicator, sticky app bar
--------------------------------------------------------------------------- */
#backTop .btn,
#backTop .btn-danger {
  background-color: var(--dl-coral) !important;
  box-shadow: 0 10px 24px rgba(240, 112, 92, 0.4);
}

.scroll-indicator {
  background: var(--dl-coral) !important;
}

/* Cream sticky bar, mirroring the app's light bottom tab bar.
   No backdrop-filter here: blur on a bottom-anchored fixed bar can sample
   past the layer edge and paint a black band on some devices. */
.sticky-cta-bar {
  background: rgba(250, 245, 236, 0.97) !important;
  border-top: 1px solid var(--dl-line);
  box-shadow: 0 -10px 30px rgba(28, 58, 70, 0.1) !important;
}