/* ==========================================================================
   Hub / index landing pages — Solutions, Applications, Fiber Ingredients
   ========================================================================== */

.page-hub {
  --hub-maxw: 76rem;
  --hub-pad: clamp(52px, 6vw, 96px);
  --hub-radius: 16px;
  --hub-line: rgba(56, 27, 5, 0.1);
  --hub-ink: #2a1404;
  --hub-muted: #4a443c;
}

.page-hub main { background: var(--dlw-color--white); }

.hub-shell {
  max-width: var(--hub-maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.hub-section { padding-block: var(--hub-pad); }

.hub-section--tint {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(108, 61, 28, 0.06) 0%, transparent 55%),
    var(--dlw-color-bg);
}

.hub-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dlw-color--secondary);
  margin: 0 0 14px;
}

.hub-hero {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(108, 61, 28, 0.08) 0%, transparent 55%),
    var(--dlw-color--white);
  padding-top: calc(var(--dlw-header--height) + clamp(24px, 4vw, 56px));
  padding-bottom: clamp(48px, 6vw, 80px);
}

.hub-hero__inner { max-width: 44rem; }

.hub-hero h1 {
  margin: 0;
  color: var(--dlw-color--primary);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.12;
}

.hub-hero__sub {
  margin: 16px 0 0;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.5;
  color: var(--hub-ink);
  font-weight: 500;
}

.hub-hero__text {
  margin: 20px 0 0;
  color: var(--hub-muted);
  line-height: 1.8;
  font-size: 1.03rem;
  max-width: 52rem;
}

.hub-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.hub-head { margin: 0 0 clamp(28px, 3.5vw, 44px); }
.hub-head h2 { margin: 0; color: var(--dlw-color--primary); }
.hub-head p { margin: 14px 0 0; color: var(--hub-muted); line-height: 1.7; max-width: 46rem; }

.hub-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 36rem) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .hub-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .hub-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .hub-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.hub-card {
  display: flex;
  flex-direction: column;
  background: var(--dlw-color--white);
  border: 1px solid var(--hub-line);
  border-radius: var(--hub-radius);
  padding: 26px 24px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.hub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(56, 27, 5, 0.1);
  border-color: transparent;
}

.hub-section--tint .hub-card { background: var(--dlw-color--white); }

.hub-card__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dlw-color--secondary);
  margin-bottom: 10px;
}

.hub-card h3 {
  margin: 0 0 10px;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--hub-ink);
}

.hub-card p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--hub-muted);
  flex: 1;
}

.hub-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dlw-color--primary);
}

.hub-card__arrow svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.hub-card:hover .hub-card__arrow svg { transform: translateX(4px); }

.hub-cta {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(134, 124, 102, 0.35) 0%, transparent 50%),
    linear-gradient(120deg, var(--dlw-color--primary-dark--20) 0%, var(--dlw-color--primary) 100%);
}

.hub-cta__inner {
  max-width: 52rem;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
  padding-block: clamp(56px, 7vw, 100px);
  text-align: center;
}

.hub-cta h2 { color: #fff; margin: 0 auto; max-width: 24ch; }
.hub-cta p { margin: 18px auto 0; max-width: 44rem; color: rgba(255, 255, 255, 0.9); line-height: 1.65; }

.hub-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 32px;
}

.hub-cta__actions .dlw-button-primary { background: #fff; color: var(--dlw-color--primary); }
.hub-cta__actions .dlw-button-primary:hover { background: var(--dlw-color-bg); }
.hub-cta__actions .dlw-button-secondary { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.hub-cta__actions .dlw-button-secondary:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }