/*
 * Diglancers — Homepage stylesheet
 * Scoped to .dlm-home so nothing bleeds into theme or marketplace pages.
 * Design derived from diglancers-homepage-concept/index.html + upgrade.css.
 * Tokens use the concept palette while respecting core Diglancers brand.
 */

/* ── Design tokens ──────────────────────────────────────────────────── */
.dlm-home {
  --h-forest:  #062a21;        /* hero background (upgraded dark) */
  --h-forest2: #092c23;        /* darkband background */
  --h-green:   #17432f;        /* nav / logo dark green */
  --h-lime:    #d0ff59;        /* primary accent / CTA buttons */
  --h-lime2:   #cfff62;        /* ticker / statement bg */
  --h-mango:   #ff995e;        /* floating badge warm */
  --h-cream:   #f7f6ed;        /* section soft background */
  --h-paper:   #faf9f2;        /* body background */
  --h-ink:     #18332a;        /* body text */
  --h-muted:   #586b60;        /* paragraph text */
  --h-line:    #dce6d9;        /* borders */
  --h-acid:    #d0ff59;        /* highlight alias */

  /* typography */
  --h-font-display: 'Manrope', 'Raleway', Arial, sans-serif;
  --h-font-body:    'DM Sans', 'Roboto', Arial, sans-serif;

  box-sizing: border-box;
  background: var(--h-paper);
  color: var(--h-ink);
  font-family: var(--h-font-body);
  font-size: 16px;
  line-height: 1.55;
}

.dlm-home *, .dlm-home *::before, .dlm-home *::after { box-sizing: border-box; }
.dlm-home h1,.dlm-home h2,.dlm-home h3,.dlm-home h4 {
  font-family: var(--h-font-display);
  line-height: 1.08;
  letter-spacing: -.04em;
  margin-top: 0;
}
.dlm-home h1 { font-size: clamp(45px,5.5vw,84px); font-weight: 900; }
.dlm-home h2 { font-size: clamp(38px,4.2vw,66px); font-weight: 900; }
.dlm-home h3 { font-size: 23px; font-weight: 800; }
.dlm-home p  { color: var(--h-muted); margin-top: 0; }
.dlm-home a  { text-decoration: none; color: inherit; }

.dlm-home .h-wrap { width: min(1220px, calc(100% - 48px)); margin: auto; }

/* ── Eyebrow ───────────────────────────────────────────────────────── */
.dlm-home .h-eyebrow {
  font-size: 11px; font-weight: 900;
  letter-spacing: .17em; text-transform: uppercase;
  color: #588244;
}
.dlm-home .h-eyebrow.light { color: var(--h-lime); }

/* ── Buttons ───────────────────────────────────────────────────────── */
.dlm-home .h-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 100px; border: 1px solid transparent;
  background: var(--h-lime); color: #173927;
  font-family: var(--h-font-body); font-weight: 800; font-size: 14px;
  cursor: pointer; transition: transform .18s, filter .18s;
  text-decoration: none;
}
.dlm-home .h-btn:hover { transform: translateY(-2px); filter: brightness(.97); }
.dlm-home .h-btn.dark   { background: var(--h-forest); color: white; }
.dlm-home .h-btn.outline{ background: transparent; color: white; border-color: rgba(255,255,255,.5); }
.dlm-home .h-btn.cream  { background: white; color: var(--h-ink); }

/* ── Section defaults ──────────────────────────────────────────────── */
.dlm-home .h-section    { padding: 110px 0; }
.dlm-home .h-section-soft{ background: var(--h-cream); }

.dlm-home .h-headrow {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 38px; flex-wrap: wrap;
}
.dlm-home .h-headrow p { max-width: 500px; }

/* ── Tag pill ─────────────────────────────────────────────────────── */
.dlm-home .h-tag {
  font-size: 11px; background: #e4eddb; border-radius: 100px;
  padding: 6px 12px; font-weight: 800; color: #476a4a;
  display: inline-block;
}
.dlm-home .h-pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid #c9ddc5; border-radius: 100px;
  padding: 7px 13px; font-size: 12px; font-weight: 800;
}

/* ══════════════════════════════════════════════════════════════════
   TOP BAR
═══════════════════════════════════════════════════════════════════ */
.dlm-home .h-topbar {
  background: var(--h-lime2);
  color: #123d27;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  padding: 9px 16px;
}

/* ══════════════════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════════════════ */
.dlm-home .h-nav-wrap {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,254,248,.92); backdrop-filter: blur(18px);
  border-bottom: 1px solid #e5ebe1;
}
.dlm-home .h-nav {
  min-height: 82px; display: flex; align-items: center;
  justify-content: space-between; gap: 25px;
}
.dlm-home .h-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.dlm-home .h-logo img {
  display: block;
  height: 29px;
  width: auto;
}
.dlm-home .h-navlinks {
  display: flex; align-items: center; gap: 25px;
  font-size: 13px; font-weight: 800; color: #3b5847;
}
.dlm-home .h-navlinks a:hover { color: #588c3e; }
.dlm-home .h-navcta { display: flex; gap: 10px; }
.dlm-home .h-hamb {
  display: none; border: 0; background: transparent;
  font-size: 26px; cursor: pointer; color: var(--h-ink);
}
.dlm-home .h-mobilemenu { display: none; padding: 12px 24px; border-top: 1px solid #e3e9dd; }
.dlm-home .h-mobilemenu.open { display: block; }
.dlm-home .h-mobilemenu a { display: block; padding: 10px 0; font-weight: 700; color: var(--h-ink); }

/* ══════════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════════ */
.dlm-home .h-hero {
  position: relative; background: var(--h-forest);
  color: white; overflow: hidden; min-height: 760px;
}
.dlm-home .h-hero::before {
  content: ""; position: absolute;
  width: 840px; height: 840px;
  border: 1px solid rgba(157,235,100,.26); border-radius: 50%;
  right: -300px; top: -240px;
  box-shadow:
    0 0 0 80px  rgba(157,235,100,.04),
    0 0 0 160px rgba(157,235,100,.04),
    0 0 0 240px rgba(157,235,100,.04);
  pointer-events: none;
}
.dlm-home .h-hero::after {
  content: ""; position: absolute;
  bottom: -100px; left: -100px;
  width: 330px; height: 330px;
  border-radius: 50%; background: rgba(169,215,83,.04);
  border: 35px solid rgba(143,187,78,.1);
  pointer-events: none;
}
.dlm-home .h-hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 22px; align-items: center;
  min-height: 760px; padding: 76px 0 68px;
  position: relative; z-index: 1;
}
.dlm-home .h-hero h1 { margin: 16px 0 24px; }
.dlm-home .h-hero h1 .h-highlight { color: var(--h-lime); }
.dlm-home .h-hero p   { color: rgba(255,255,255,.85); font-size: 19px; max-width: 600px; }
.dlm-home .h-hero p strong { color: var(--h-lime); }
.dlm-home .h-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 36px; }
.dlm-home .h-hero-stats {
  display: flex; gap: 35px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.15); padding-top: 24px;
}
.dlm-home .h-hero-stats strong {
  font-family: var(--h-font-display); font-size: 36px;
  font-weight: 900; display: block; color: white;
}
.dlm-home .h-hero-stats span { font-size: 12px; color: rgba(255,255,255,.65); }

/* Hero visual */
.dlm-home .h-hero-visual {
  position: relative; height: 570px; filter: saturate(1.16);
}
.dlm-home .h-hero-img {
  position: absolute; object-fit: cover;
  box-shadow: 0 20px 70px rgba(0,27,20,.3);
}
.dlm-home .h-hero-img.one {
  width: 62%; height: 82%; left: 1%; top: 0;
  border-radius: 240px 240px 40px 40px;
}
.dlm-home .h-hero-img.two {
  width: 52%; height: 60%; right: 2%; bottom: 0;
  border-radius: 220px 220px 34px 34px;
}
.dlm-home .h-floating {
  position: absolute; background: white; color: #194632;
  border-radius: 100px; box-shadow: 0 12px 40px rgba(4,30,25,.27);
  padding: 14px 20px; z-index: 3; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.dlm-home .h-floating.one {
  right: 0; top: 10%; transform: rotate(7deg);
  background: var(--h-mango); color: #152b22;
}
.dlm-home .h-floating.two {
  left: -9%; bottom: 16%; transform: rotate(-7deg);
  background: var(--h-lime);
}
.dlm-home .h-floatdot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #75c45b; flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   BRAND TICKER
═══════════════════════════════════════════════════════════════════ */
.dlm-home .h-brandbar {
  background: #fbfbf3; overflow: hidden;
  padding: 28px 0; border-bottom: 1px solid #e5ebe1;
}
.dlm-home .h-brandbar small {
  display: block; text-align: center;
  font-size: 11px; font-weight: 800;
  letter-spacing: .12em; color: #4e7357; margin-bottom: 10px;
}
.dlm-home .h-ticker-outer { overflow: hidden; }
.dlm-home .h-ticker-track {
  display: inline-flex; gap: 70px;
  min-width: max-content; white-space: nowrap;
  animation: dlm-ticker 32s linear infinite;
}
.dlm-home .h-brandbar:hover .h-ticker-track { animation-play-state: paused; }
@keyframes dlm-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.dlm-home .h-ticker-track span {
  font-family: var(--h-font-display);
  font-size: 27px; font-weight: 900;
  letter-spacing: -.04em; color: #224b34;
}

/* ══════════════════════════════════════════════════════════════════
   CHOICES (two-up cards)
═══════════════════════════════════════════════════════════════════ */
.dlm-home .h-choices {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin-top: 40px;
}
.dlm-home .h-choice {
  border-radius: 32px; overflow: hidden; position: relative;
  padding: 38px; min-height: 500px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.dlm-home .h-choice.market { background: #dcf3a5; }
.dlm-home .h-choice.agency  { background: #f1d9bc; }
.dlm-home .h-choice h3      { font-size: 40px; margin: 16px 0; }
.dlm-home .h-choice p       { max-width: 390px; }
.dlm-home .h-choice .h-spot {
  position: absolute; width: 260px; height: 280px;
  object-fit: cover; right: -25px; bottom: -30px;
  border-radius: 150px 150px 0 0; opacity: .92;
}
.dlm-home .h-choice .h-content { position: relative; z-index: 2; max-width: 430px; }
.dlm-home .h-choice .h-bottom   { position: relative; z-index: 2; }

/* ══════════════════════════════════════════════════════════════════
   CREATOR SEARCH
═══════════════════════════════════════════════════════════════════ */
.dlm-home .h-search-panel {
  margin-top: 32px; background: white;
  border: 1px solid #dbe8da; border-radius: 23px;
  box-shadow: 0 16px 50px rgba(24,62,33,.07);
  padding: 16px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: 12px;
}
.dlm-home .h-filter {
  padding: 7px 14px; border-right: 1px solid #e0e9dd;
}
.dlm-home .h-filter:last-of-type { border-right: none; }
.dlm-home .h-filter label {
  display: block; color: #6d8271; font-size: 11px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 4px;
}
.dlm-home .h-filter input,
.dlm-home .h-filter select {
  border: 0; outline: 0; width: 100%;
  background: transparent; color: #23452f; font-weight: 700; font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════════
   CREATOR GRID
═══════════════════════════════════════════════════════════════════ */
.dlm-home .h-creator-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 17px; margin-top: 25px;
}
.dlm-home .h-creator {
  overflow: hidden; border-radius: 18px;
  background: white; border: 1px solid #e1e9df;
  transition: transform .18s, box-shadow .18s;
}
.dlm-home .h-creator:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(6,42,33,.1);
}
.dlm-home .h-creator-img {
  width: 100%; height: 255px; object-fit: cover;
  display: block; filter: saturate(.95);
}
.dlm-home .h-creator-img-placeholder {
  width: 100%; height: 255px; background: #d7e6d0;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
}
.dlm-home .h-creator-body { padding: 18px; }
.dlm-home .h-creator-body strong {
  font-family: var(--h-font-display); font-size: 16px;
  font-weight: 800; display: block; margin-bottom: 4px; color: var(--h-ink);
}
.dlm-home .h-creator-body p { font-size: 13px; margin: 0; }
.dlm-home .h-creator .h-meta {
  display: flex; justify-content: space-between;
  align-items: center; margin-top: 14px; font-size: 12px;
  color: #52775a; font-weight: 700;
}
.dlm-home .h-creator .h-meta a {
  color: var(--h-green); font-weight: 800;
}
.dlm-home .h-creator.h-hidden { display: none; }
.dlm-home .h-filter-notice {
  font-size: 12px; color: #738b78; margin: 12px 0 0;
  font-style: italic;
}

/* Verified badge on live creator cards */
.dlm-home .h-ver-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: #e4f3eb; color: #075238;
  font-size: 10px; font-weight: 800;
  padding: 3px 8px; border-radius: 20px;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════════════════════════════ */
.dlm-home .h-servicegrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.dlm-home .h-svc {
  padding: 28px; border: 1px solid var(--h-line);
  border-radius: 0; min-height: 310px; background: white;
  transition: background .2s, transform .2s;
}
.dlm-home .h-svc:hover { background: #eafdcb; transform: translateY(-5px); }
.dlm-home .h-svc .h-ic {
  background: #cfff68; width: 50px; height: 50px;
  border-radius: 100px; display: grid; place-items: center;
  font-size: 22px;
}
.dlm-home .h-svc h3 { margin: 22px 0 12px; }
.dlm-home .h-svc p  { font-size: 14px; }
.dlm-home .h-svc a  { font-size: 13px; font-weight: 800; color: #356a3c; }

/* ══════════════════════════════════════════════════════════════════
   MARKETS
═══════════════════════════════════════════════════════════════════ */
.dlm-home .h-markets {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.dlm-home .h-mkt {
  background: white; border: 1px solid var(--h-line);
  border-radius: 17px; padding: 22px; font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .15s; cursor: default;
  text-decoration: none; color: var(--h-ink);
}
.dlm-home .h-mkt:hover { background: #e9f4d3; }
.dlm-home .h-mkt span  { font-size: 24px; }

/* ══════════════════════════════════════════════════════════════════
   WORK / CAMPAIGN SHOWCASE
═══════════════════════════════════════════════════════════════════ */
.dlm-home .h-work-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 19px;
}
.dlm-home .h-work-card {
  border-radius: 12px; overflow: hidden;
}
.dlm-home .h-work-card:first-child { background: #d7ea98; }
.dlm-home .h-work-card:nth-child(2){ background: #eee0d1; }
.dlm-home .h-work-card img {
  width: 100%; height: 340px; object-fit: cover; display: block;
}
.dlm-home .h-workcopy { padding: 27px; }
.dlm-home .h-workcopy h3 { font-size: 36px; margin: 10px 0; }
.dlm-home .h-workcopy p  { font-size: 14px; }
.dlm-home .h-workmetrics {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px;
}
.dlm-home .h-workmetrics span {
  display: inline-block; border-top: 1px solid #bdcbbc;
  padding-top: 10px; font-size: 12px;
}
.dlm-home .h-workmetrics strong {
  display: block; font-family: var(--h-font-display);
  font-size: 22px; font-weight: 900;
}
/* ══════════════════════════════════════════════════════════════════
   DARK BAND — measurement
═══════════════════════════════════════════════════════════════════ */
.dlm-home .h-darkband {
  background: var(--h-forest2); color: white; padding: 90px 0;
}
.dlm-home .h-measure {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 50px; align-items: center;
}
.dlm-home .h-measure p { color: rgba(255,255,255,.7); }
.dlm-home .h-metric-boxes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 15px;
}
.dlm-home .h-metric {
  padding: 24px; border: 1px solid rgba(255,255,255,.15);
  border-radius: 0;
}
.dlm-home .h-metric b {
  color: var(--h-lime);
  font-family: var(--h-font-display);
  font-size: 28px; font-weight: 900; display: block; margin-bottom: 6px;
}
.dlm-home .h-metric span { color: rgba(255,255,255,.7); font-size: 13px; }

/* ══════════════════════════════════════════════════════════════════
   STATEMENT BAND
═══════════════════════════════════════════════════════════════════ */
.dlm-home .h-statement {
  background: #f59c65; color: #0c2d24;
  padding: 100px 0; position: relative; overflow: hidden;
}
.dlm-home .h-statement .h-massive {
  font-family: var(--h-font-display);
  font-size: clamp(68px, 11vw, 165px);
  font-weight: 900; line-height: .88;
  letter-spacing: -.095em; text-transform: uppercase;
  max-width: 1300px; margin: 0 auto;
}
.dlm-home .h-statement .h-massive em {
  font-style: normal; color: #fbf5e8;
}
.dlm-home .h-statement p {
  color: #163c2e; max-width: 650px;
  font-size: 18px; margin-top: 35px;
}

/* ══════════════════════════════════════════════════════════════════
   STEPS
═══════════════════════════════════════════════════════════════════ */
.dlm-home .h-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px;
}
.dlm-home .h-step { border-top: 2px solid #afcf8c; padding-top: 18px; }
.dlm-home .h-step b {
  font-size: 11px; font-weight: 900; color: #618664;
  letter-spacing: .12em; text-transform: uppercase;
}
.dlm-home .h-step h3 { margin-top: 18px; font-size: 20px; }

/* ══════════════════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════════════════ */
.dlm-home .h-faq {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: 45px;
}
.dlm-home .h-faq details {
  border-bottom: 1px solid #d9e5d7; padding: 18px 0;
}
.dlm-home .h-faq summary {
  font-weight: 800; cursor: pointer; font-size: 15px;
  list-style: none;
}
.dlm-home .h-faq summary::marker { display: none; }
.dlm-home .h-faq summary::-webkit-details-marker { display: none; }
.dlm-home .h-faq details p { font-size: 14px; margin: 12px 0 0; }

/* ══════════════════════════════════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════════════════════════════════ */
.dlm-home .h-cta-box {
  background: #cfff63; border-radius: 15px;
  padding: 60px; position: relative; overflow: hidden;
}
.dlm-home .h-cta-box::after {
  content: "✳"; position: absolute;
  right: -15px; bottom: -130px;
  color: #89c34c; font-size: 440px; line-height: 1; opacity: .38;
  pointer-events: none;
}
.dlm-home .h-cta-box > * { position: relative; z-index: 1; }
.dlm-home .h-cta-box h2 { font-size: clamp(43px, 5vw, 78px); max-width: 700px; }

/* ══════════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════════ */
.dlm-home .h-footer {
  background: #0c271e; color: rgba(255,255,255,.75);
  padding: 55px 0 28px;
}
.dlm-home .h-footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr); gap: 30px;
}
.dlm-home .h-footer p  { color: rgba(255,255,255,.6); font-size: 14px; }
.dlm-home .h-footer h4 { font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 16px; }
.dlm-home .h-footer a  { display: block; font-size: 13px; margin: 8px 0; color: rgba(255,255,255,.7); }
.dlm-home .h-footer a:hover { color: var(--h-lime); }
.dlm-home .h-copyright {
  font-size: 12px; color: rgba(255,255,255,.4);
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 45px; padding-top: 18px;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 950px) {
  .dlm-home .h-navlinks,
  .dlm-home .h-navcta   { display: none; }
  .dlm-home .h-hamb     { display: block; }
  .dlm-home .h-hero-grid,
  .dlm-home .h-choices,
  .dlm-home .h-measure,
  .dlm-home .h-faq,
  .dlm-home .h-work-grid { grid-template-columns: 1fr; }
  .dlm-home .h-creator-grid { grid-template-columns: repeat(2, 1fr); }
  .dlm-home .h-servicegrid  { grid-template-columns: repeat(2, 1fr); }
  .dlm-home .h-markets,
  .dlm-home .h-steps        { grid-template-columns: repeat(2, 1fr); }
  .dlm-home .h-footer-grid  { grid-template-columns: 1fr 1fr; }
  .dlm-home .h-search-panel { grid-template-columns: 1fr 1fr; }
  .dlm-home .h-filter       { border-right: none; }
  .dlm-home .h-headrow      { display: block; }
  .dlm-home .h-hero-visual  { height: 440px; max-width: 650px; }
}

@media (max-width: 600px) {
  .dlm-home .h-wrap         { width: min(100% - 32px, 1220px); }
  .dlm-home .h-section      { padding: 70px 0; }
  .dlm-home .h-hero-grid    { min-height: auto; }
  .dlm-home .h-hero-visual  { height: 340px; }
  .dlm-home .h-hero h1      { font-size: clamp(38px, 9vw, 57px); }
  .dlm-home .h-creator-grid { grid-template-columns: 1fr; }
  .dlm-home .h-servicegrid,
  .dlm-home .h-markets,
  .dlm-home .h-steps,
  .dlm-home .h-footer-grid  { grid-template-columns: 1fr; }
  .dlm-home .h-search-panel { grid-template-columns: 1fr; }
  .dlm-home .h-search-panel .h-btn { width: 100%; border-radius: 12px; }
  .dlm-home .h-cta-box      { padding: 34px; }
  .dlm-home .h-cta-box::after { font-size: 230px; bottom: -60px; }
  .dlm-home .h-statement .h-massive { font-size: clamp(48px, 12vw, 80px); }
}

@media (prefers-reduced-motion: reduce) {
  .dlm-home .h-ticker-track { animation: none; }
  .dlm-home .h-btn:hover    { transform: none; }
}