/* ============================================================================
 * Homepage — card systems.
 *
 * Deliberately varied so the page does not read as twenty identical white
 * boxes: a capability grid with one feature-weight tile, numbered service
 * group panels, outcome cards, a quiet industry grid, editorial creative
 * cards, portfolio cards and a numbered "why" list.
 *
 * Navy structure · red emphasis · yellow accent. No purple.
 * ========================================================================== */

/* ── Capability grid (Section 2) ────────────────────────────────────────── */

.wb-caps {
  display: grid;
  gap: var(--wb-space-5);
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}
@media (min-width: 900px) {
  .wb-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* First tile spans two columns — breaks the uniform-grid monotony */
  .wb-cap--feature { grid-column: span 2; }
}

.wb-cap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-3);
  padding: var(--wb-space-6);
  background: var(--wb-color-surface);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-xl);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition:
    transform var(--wb-duration-base) var(--wb-ease),
    border-color var(--wb-duration-base) var(--wb-ease),
    box-shadow var(--wb-duration-base) var(--wb-ease);
}
.wb-cap::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--wb-gradient-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--wb-duration-slow) var(--wb-ease-out);
}
.wb-cap:hover,
.wb-cap:focus-visible {
  transform: translateY(-4px);
  border-color: var(--wb-color-border-strong);
  box-shadow: var(--wb-shadow-lg);
}
.wb-cap:hover::after,
.wb-cap:focus-visible::after { transform: scaleX(1); }
.wb-cap:focus-visible {
  outline: var(--wb-focus-width) solid var(--wb-color-focus-ring);
  outline-offset: 3px;
}

.wb-cap__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--wb-radius-md);
  background: var(--wb-color-brand-soft);
  color: var(--wb-color-brand);
}
.wb-cap__icon svg { width: 1.3rem; height: 1.3rem; }
.wb-cap__title {
  margin: 0;
  font-size: var(--wb-text-lg);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: -0.015em;
  color: var(--wb-color-ink);
}
.wb-cap__body {
  margin: 0;
  font-size: var(--wb-text-sm);
  line-height: var(--wb-lh-relaxed);
  color: var(--wb-color-text-muted);
}
.wb-cap__link {
  margin-top: auto;
  padding-top: var(--wb-space-3);
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-semibold);
  color: var(--wb-color-accent);
}
.wb-cap__link::after {
  content: " \2192";
  display: inline-block;
  transition: transform var(--wb-duration-base) var(--wb-ease);
}
.wb-cap:hover .wb-cap__link::after { transform: translateX(3px); }

/* Feature tile — navy stage, the visual anchor of the grid */
.wb-cap--feature {
  background: var(--wb-gradient-ink);
  border-color: transparent;
  color: #fff;
}
.wb-cap--feature .wb-cap__title { color: #fff; }
.wb-cap--feature .wb-cap__body { color: rgba(255, 255, 255, 0.72); }
.wb-cap--feature .wb-cap__icon {
  background: rgba(255, 255, 255, 0.1);
  color: var(--wb-yellow-300);
}
.wb-cap--feature .wb-cap__link { color: var(--wb-yellow-300); }
.wb-cap--feature::before {
  content: "";
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(222, 36, 54, 0.32), transparent 68%);
  pointer-events: none;
}

/* Accent tile — yellow hairline, used once for rhythm */
.wb-cap--accent { border-color: var(--wb-yellow-300); }
.wb-cap--accent .wb-cap__icon {
  background: var(--wb-color-highlight-soft);
  color: var(--wb-yellow-600);
}

/* ── Service groups (Section 3) ─────────────────────────────────────────── */

.wb-groups {
  display: grid;
  gap: var(--wb-space-5);
  /* Five groups: sized so a standard desktop lands on one clean row of five
   * rather than four plus an orphan. */
  grid-template-columns: repeat(auto-fit, minmax(13.25rem, 1fr));
}
@media (min-width: 1500px) {
  .wb-groups { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.wb-group {
  position: relative;
  padding: var(--wb-space-6);
  background: var(--wb-color-surface);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-xl);
  transition: border-color var(--wb-duration-base) var(--wb-ease),
              box-shadow var(--wb-duration-base) var(--wb-ease);
}
.wb-group:hover {
  border-color: var(--wb-color-border-strong);
  box-shadow: var(--wb-shadow-md);
}
.wb-group__num {
  display: block;
  margin-bottom: var(--wb-space-4);
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-bold);
  letter-spacing: 0.08em;
  color: var(--wb-color-accent);
}
.wb-group__title {
  margin: 0 0 var(--wb-space-4);
  font-size: var(--wb-text-xl);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: -0.02em;
  color: var(--wb-color-ink);
}
.wb-group__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--wb-space-2);
}
.wb-group__list a,
.wb-group__list span {
  display: flex;
  align-items: center;
  gap: var(--wb-space-2);
  padding: 0.35rem 0;
  font-size: var(--wb-text-sm);
  color: var(--wb-color-text-muted);
  text-decoration: none;
  transition: color var(--wb-duration-base) var(--wb-ease);
}
.wb-group__list a::before,
.wb-group__list span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wb-color-border-strong);
  flex-shrink: 0;
  transition: background var(--wb-duration-base) var(--wb-ease);
}
.wb-group__list a:hover { color: var(--wb-color-brand); }
.wb-group__list a:hover::before { background: var(--wb-color-accent); }

/* ── Outcome cards (Solutions) ──────────────────────────────────────────── */

.wb-outcomes {
  display: grid;
  gap: var(--wb-space-4);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.wb-outcome {
  display: flex;
  align-items: center;
  gap: var(--wb-space-4);
  padding: var(--wb-space-5);
  background: var(--wb-color-surface);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-left: 3px solid var(--wb-color-brand);
  border-radius: var(--wb-radius-lg);
  font-size: var(--wb-text-base);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: -0.01em;
  color: var(--wb-color-ink);
  text-decoration: none;
  transition: transform var(--wb-duration-base) var(--wb-ease),
              border-left-color var(--wb-duration-base) var(--wb-ease),
              box-shadow var(--wb-duration-base) var(--wb-ease);
}
.wb-outcome:hover,
.wb-outcome:focus-visible {
  transform: translateX(3px);
  border-left-color: var(--wb-color-accent);
  box-shadow: var(--wb-shadow-md);
  color: var(--wb-color-ink);
}
.wb-outcome:focus-visible {
  outline: var(--wb-focus-width) solid var(--wb-color-focus-ring);
  outline-offset: 2px;
}
.wb-outcome__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--wb-radius-md);
  background: var(--wb-color-bg-muted);
  color: var(--wb-color-brand);
}
.wb-outcome__icon svg { width: 1.1rem; height: 1.1rem; }

/* ── Industry grid ──────────────────────────────────────────────────────── */

.wb-industries {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--wb-color-border);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-xl);
  overflow: hidden;
}
@media (min-width: 720px) {
  .wb-industries { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 419px) {
  .wb-industries { grid-template-columns: minmax(0, 1fr); }
}

.wb-industry {
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-3);
  padding: var(--wb-space-6) var(--wb-space-5);
  background: var(--wb-color-surface);
  color: inherit;
  text-decoration: none;
  transition: background var(--wb-duration-base) var(--wb-ease);
}
.wb-industry:hover { background: var(--wb-color-bg-soft); }
/* The grid clips overflow, so the focus ring is drawn inside the cell. */
.wb-industry:focus-visible {
  outline: var(--wb-focus-width) solid var(--wb-color-focus-ring);
  outline-offset: -3px;
  background: var(--wb-color-bg-soft);
}
.wb-industry__icon { color: var(--wb-color-brand); }
.wb-industry__icon svg { width: 1.35rem; height: 1.35rem; }
.wb-industry__name {
  font-size: var(--wb-text-base);
  font-weight: var(--wb-fw-semibold);
  color: var(--wb-color-ink);
}
.wb-industry__meta {
  font-size: var(--wb-text-xs);
  line-height: var(--wb-lh-normal);
  color: var(--wb-color-text-muted);
}

/* ── Creative cards ─────────────────────────────────────────────────────── */

.wb-creatives {
  display: grid;
  gap: var(--wb-space-5);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.wb-creative {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--wb-space-6);
  border-radius: var(--wb-radius-xl);
  background: var(--wb-color-surface);
  border: var(--wb-border-width) solid var(--wb-color-border);
  overflow: hidden;
}
/* Abstract frame graphic instead of stock photography */
.wb-creative__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--wb-space-5);
  border-radius: var(--wb-radius-lg);
  background:
    linear-gradient(135deg, var(--wb-navy-800), var(--wb-navy-600));
  overflow: hidden;
}
.wb-creative__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
}
.wb-creative__frame::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.25rem;
  height: 3.25rem;
  margin: -1.625rem 0 0 -1.625rem;
  border-radius: 50%;
  background: var(--wb-gradient-brand);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.08);
}
.wb-creative--ugc .wb-creative__frame::after { border-radius: var(--wb-radius-md); }
.wb-creative--influencer .wb-creative__frame::after {
  border-radius: var(--wb-radius-sm);
  transform: rotate(45deg);
}
.wb-creative__title {
  margin: 0 0 var(--wb-space-3);
  font-size: var(--wb-text-xl);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: -0.02em;
  color: var(--wb-color-ink);
}
.wb-creative__body {
  margin: 0;
  font-size: var(--wb-text-sm);
  line-height: var(--wb-lh-relaxed);
  color: var(--wb-color-text-muted);
}

/* ── Dedicated team roles ───────────────────────────────────────────────── */

.wb-roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-role {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-space-2);
  padding: 0.6rem 1rem;
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-medium);
  color: var(--wb-color-ink);
  background: var(--wb-color-surface);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-full);
}
.wb-role::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wb-color-highlight);
}
.wb-section--ink .wb-role {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}

/* ── Portfolio / case study cards ───────────────────────────────────────── */

.wb-portfolio {
  display: grid;
  gap: var(--wb-space-5);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.wb-case {
  display: flex;
  flex-direction: column;
  background: var(--wb-color-surface);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-xl);
  overflow: hidden;
  transition: transform var(--wb-duration-base) var(--wb-ease),
              box-shadow var(--wb-duration-base) var(--wb-ease);
}
.wb-case:hover { transform: translateY(-4px); box-shadow: var(--wb-shadow-lg); }

/* Placeholder visual — deliberately abstract, makes no client claim */
.wb-case__visual {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--wb-gradient-ink);
  overflow: hidden;
}
.wb-case__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000, transparent 80%);
          mask-image: radial-gradient(ellipse at 30% 20%, #000, transparent 80%);
}
.wb-case__glyph {
  position: absolute;
  right: 1.1rem;
  bottom: 0.4rem;
  font-size: 4.25rem;
  font-weight: var(--wb-fw-extrabold);
  letter-spacing: -0.05em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.09);
}
.wb-case__ribbon {
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  padding: 0.28rem 0.7rem;
  font-size: 0.7rem;
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wb-navy-900);
  background: var(--wb-yellow-400);
  border-radius: var(--wb-radius-full);
}
.wb-case__body { display: grid; gap: var(--wb-space-3); padding: var(--wb-space-6); }
.wb-case__meta {
  font-size: var(--wb-text-xs);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wb-color-text-soft);
}
.wb-case__title {
  margin: 0;
  font-size: var(--wb-text-lg);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: -0.015em;
  color: var(--wb-color-ink);
}
.wb-case__row { margin: 0; font-size: var(--wb-text-sm); line-height: var(--wb-lh-relaxed); color: var(--wb-color-text-muted); }
.wb-case__row strong {
  display: block;
  font-size: var(--wb-text-xs);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wb-color-accent);
}

/* ── Why Winbonds — numbered editorial list ─────────────────────────────── */

.wb-why {
  display: grid;
  gap: var(--wb-space-5);
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: wb-why;
}
@media (min-width: 1200px) {
  .wb-why { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.wb-why__item {
  position: relative;
  padding-top: var(--wb-space-6);
  border-top: 2px solid var(--wb-color-border);
  transition: border-top-color var(--wb-duration-base) var(--wb-ease);
}
.wb-why__item:hover { border-top-color: var(--wb-color-accent); }
.wb-why__item::before {
  counter-increment: wb-why;
  content: counter(wb-why, decimal-leading-zero);
  position: absolute;
  top: var(--wb-space-3);
  right: 0;
  font-size: var(--wb-text-xs);
  font-weight: var(--wb-fw-bold);
  letter-spacing: 0.08em;
  color: var(--wb-color-text-soft);
}
.wb-why__title {
  margin: 0 0 var(--wb-space-2);
  font-size: var(--wb-text-lg);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: -0.015em;
  color: var(--wb-color-ink);
}
.wb-why__body {
  margin: 0;
  font-size: var(--wb-text-sm);
  line-height: var(--wb-lh-relaxed);
  color: var(--wb-color-text-muted);
}
.wb-section--ink .wb-why__item { border-top-color: rgba(255, 255, 255, 0.16); }
.wb-section--ink .wb-why__title { color: #fff; }
.wb-section--ink .wb-why__body { color: rgba(255, 255, 255, 0.7); }

/* ── Section-level CTA row (centred under a grid) ───────────────────────── */

.wb-section__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wb-space-4);
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

@media (prefers-reduced-motion: reduce) {
  .wb-cap, .wb-cap::after, .wb-case, .wb-outcome { transition: none; }
}