/* Category hub heroes: a compact route into the task picker. */
:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) {
  --hub-hero-ink: #12234b;
  --hub-hero-muted: #52658a;
  --hub-hero-surface: #fff;
  --hub-hero-line: #dce7fc;
  --hub-hero-wash: #eaf3ff;
  --hub-hero-glow: #dceaff;
  --hub-hero-gap: clamp(1rem, 2.5vw, 2rem);
  --hub-hero-title-gradient: linear-gradient(105deg, #2563eb 0%, #6254f4 58%, #a23ce8 100%);
  --hub-hero-cta-gradient: linear-gradient(110deg, #3165ff, #7044f9);
}

.directory-page--image {
  --hub-hero-line: #f0deef;
  --hub-hero-wash: #fdf0f8;
  --hub-hero-glow: #f3e2ff;
  --hub-hero-title-gradient: linear-gradient(105deg, #245de9, #7652e9 56%, #c43da4);
}

.directory-page--social {
  --hub-hero-wash: #f2f3ff;
  --hub-hero-glow: #e9e0ff;
  --hub-hero-line: #e7dffc;
  --hub-hero-title-gradient: linear-gradient(105deg, #3259d6, #7950d9 54%, #ad3f9e);
  --hub-hero-cta-gradient: linear-gradient(110deg, #365fdf, #854cda);
}

.directory-page--seo {
  --hub-hero-wash: #edf9f6;
  --hub-hero-glow: #d8f4eb;
  --hub-hero-line: #d4ebe5;
  --hub-hero-title-gradient: linear-gradient(105deg, #087f73, #0b7f9e 58%, #3a62cc);
  --hub-hero-cta-gradient: linear-gradient(110deg, #087f73, #176fbd);
}

.directory-page--developer {
  --hub-hero-wash: #edf7fc;
  --hub-hero-glow: #dcefff;
  --hub-hero-line: #d8e9f5;
  --hub-hero-title-gradient: linear-gradient(105deg, #107da3, #2867bd 58%, #6652d2);
  --hub-hero-cta-gradient: linear-gradient(110deg, #137eae, #5555d3);
}

.directory-page--audio {
  --hub-hero-wash: #eef7ff;
  --hub-hero-glow: #dcefff;
  --hub-hero-line: #d7e8fa;
  --hub-hero-title-gradient: linear-gradient(105deg, #176fb5, #4a62d7 55%, #8053c8);
  --hub-hero-cta-gradient: linear-gradient(110deg, #176fb5, #5859d1);
}

.directory-page--utility {
  --hub-hero-wash: #fff7eb;
  --hub-hero-glow: #ffead1;
  --hub-hero-line: #f7e1c7;
  --hub-hero-title-gradient: linear-gradient(105deg, #ba5712, #e5791c 56%, #d67c3e);
  --hub-hero-cta-gradient: linear-gradient(110deg, #b95c12, #df7724);
}

.directory-page:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) {
  background:
    radial-gradient(ellipse 850px 470px at 82% 170px, var(--hub-hero-glow), transparent 76%),
    linear-gradient(180deg, var(--hub-hero-wash), var(--color-bg) 740px);
}

:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility)::before { content: none; }
:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .breadcrumb { margin-bottom: .625rem; }

:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero {
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  align-items: start;
  gap: var(--hub-hero-gap);
  margin-bottom: 0;
  padding-bottom: 1.25rem;
}

:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__text {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  max-width: 700px;
  padding-block: 0;
}

:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__h1 {
  grid-row: 1;
  color: var(--hub-hero-ink);
  font-size: clamp(2.2rem, 3.65vw, 3.45rem);
  font-weight: var(--font-bold);
  line-height: 1.12;
  letter-spacing: -.045em;
}

:is(.directory-page--audio, .directory-page--utility) .cat-hero__h1 {
  font-size: clamp(2.2rem, 3.35vw, 3.12rem);
}

.directory-page--audio .cat-hero__h1 {
  font-size: clamp(2.2rem, 3.2vw, 3rem);
}

:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__h1 > span { display: block; }
:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__title-gradient {
  color: #5545e8;
  background: var(--hub-hero-title-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__desc {
  grid-row: 3;
  max-width: 58ch;
  margin-top: .8rem;
  color: var(--hub-hero-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__footer { display: contents; }
:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero .directory-hero__actions {
  grid-row: 4;
  margin-top: 1.15rem;
}

:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__badges {
  position: absolute;
  inset: 0 0 1.25rem auto;
  display: block;
  width: calc((100% - var(--hub-hero-gap)) * .44);
  z-index: 2;
  pointer-events: none;
}

:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__badge {
  position: absolute;
  min-height: 31px;
  padding: .43rem .75rem;
  border-color: var(--hub-hero-line);
  background: var(--hub-hero-surface);
  color: var(--hub-hero-muted);
  font-size: .72rem;
  font-weight: var(--font-semibold);
  box-shadow: 0 9px 22px -13px rgb(36 62 122 / .38);
}

:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__badge:nth-child(1) { top: .25rem; left: 1%; }
:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__badge:nth-child(2) { top: 1.5rem; right: 0; }
:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__badge:nth-child(3) { right: 7%; bottom: .25rem; }
:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__badge strong { color: var(--hub-hero-ink); }

:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__visual {
  display: grid;
  min-height: 0;
  margin: -1.5rem 0 0;
  padding-bottom: .75rem;
}

:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__visual-image {
  width: 100%;
  max-width: 470px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  filter: drop-shadow(0 22px 30px rgb(49 82 157 / .12));
}

:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero .directory-btn {
  min-height: 46px;
  padding-inline: 1.25rem;
  border-radius: 11px;
  font-size: .86rem;
}

:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero .directory-btn--primary {
  background: var(--hub-hero-cta-gradient);
  box-shadow: 0 12px 24px -12px rgb(79 70 229 / .55), inset 0 1px 0 rgb(255 255 255 / .3);
}

:is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-tools {
  margin-top: 0;
  scroll-margin-top: calc(var(--header-height, 76px) + 2rem);
}

[data-theme="dark"] :is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) {
  --hub-hero-ink: #e8efff;
  --hub-hero-muted: #b3c1db;
  --hub-hero-surface: #172134;
  --hub-hero-line: #2b3c5c;
  --hub-hero-wash: #101c31;
  --hub-hero-glow: #1b2d50;
}

[data-theme="dark"] .directory-page--image {
  --hub-hero-wash: #21182b;
  --hub-hero-glow: #322046;
  --hub-hero-title-gradient: linear-gradient(105deg, #9bc0ff, #c49bff 58%, #f5a8d6);
}

[data-theme="dark"] .directory-page--social {
  --hub-hero-wash: #191a33;
  --hub-hero-glow: #30234e;
  --hub-hero-title-gradient: linear-gradient(105deg, #a9bfff, #ccb1ff 58%, #f1aadf);
}

[data-theme="dark"] .directory-page--seo {
  --hub-hero-wash: #112a2a;
  --hub-hero-glow: #194241;
  --hub-hero-title-gradient: linear-gradient(105deg, #80e6d2, #8fd6ec 58%, #9dbdff);
}

[data-theme="dark"] .directory-page--developer {
  --hub-hero-wash: #132630;
  --hub-hero-glow: #1b3950;
  --hub-hero-title-gradient: linear-gradient(105deg, #87dcef, #9ec6ff 58%, #c1b1ff);
}

[data-theme="dark"] .directory-page--audio {
  --hub-hero-wash: #12243a;
  --hub-hero-glow: #1c3a59;
  --hub-hero-title-gradient: linear-gradient(105deg, #8dd4ff, #a8b9ff 58%, #cfb0ff);
}

[data-theme="dark"] .directory-page--utility {
  --hub-hero-wash: #2b211c;
  --hub-hero-glow: #4a3224;
  --hub-hero-line: #594235;
  --hub-hero-title-gradient: linear-gradient(105deg, #ffc48d, #ffad68 58%, #f2b49d);
}

[data-theme="dark"] .directory-page--video {
  --hub-hero-title-gradient: linear-gradient(105deg, #89b3ff, #b59aff 65%, #db9cff);
}

@media (max-width: 900px) {
  :is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero {
    --hub-hero-gap: 1rem;
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  }
  :is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__h1 { font-size: clamp(2rem, 4.5vw, 2.6rem); }
  :is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__badges { width: calc((100% - var(--hub-hero-gap)) * .4); }
}

@media (max-width: 640px) {
  :is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .breadcrumb { margin-bottom: .875rem; font-size: .72rem; }
  :is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 1.25rem;
  }
  :is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__h1 { font-size: clamp(1.9rem, 8vw, 2.35rem); }
  :is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__badges {
    position: static;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    width: auto;
    gap: .25rem .8rem;
    margin-top: .7rem;
  }
  :is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__badge {
    position: static;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: .7rem;
    font-weight: var(--font-semibold);
    line-height: 1.5;
    box-shadow: none;
  }
  :is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__badge + .cat-hero__badge::before {
    content: "·";
    margin-right: .8rem;
    color: var(--hub-hero-muted);
  }
  :is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__desc { margin-top: .75rem; font-size: .92rem; }
  :is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero .directory-hero__actions { margin-top: 1rem; }
  :is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__visual { display: none; }
  html[lang="vi"] :is(.directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__title-gradient { text-wrap: balance; }
  html[lang="en"] .directory-page--utility .cat-hero__title-gradient { text-wrap: balance; }
  html[lang="en"] :is(.directory-page--video, .directory-page--social, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__h1 { font-size: clamp(1.55rem, 6.6vw, 1.65rem); }
}

@media (max-width: 360px) {
  :is(.directory-page--image, .directory-page--video, .directory-page--social, .directory-page--seo, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__h1 { font-size: 1.7rem; }
  html[lang="en"] :is(.directory-page--video, .directory-page--social, .directory-page--developer, .directory-page--audio, .directory-page--utility) .cat-hero__title-gradient { text-wrap: balance; }
}