/* ============================================================================
 * Inner page styling — shared by all non-homepage page templates.
 *
 *   .wb-page-hero       → banner strip at the top of every inner page
 *   .wb-page-content    → main prose / content area wrapper
 *   .wb-page-form       → inline contact form layout
 *   .wb-service-detail  → service-detail page composition (left intro,
 *                         right capability grid)
 * ========================================================================== */

/* Page hero banner ------------------------------------------------------- */
.wb-page-hero {
  position: relative;
  padding-block: clamp(4rem, 6vw + 2rem, 7rem);
  border-bottom: var(--wb-border-width) solid var(--wb-color-border);
  overflow: hidden;
}
.wb-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.wb-page-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 60%;
  height: 140%;
  background: radial-gradient(closest-side, rgba(79, 140, 255, 0.16), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
.wb-page-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-3);
  max-width: 880px;
}
.wb-page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-space-2);
  font-size: var(--wb-text-xs);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #93c5fd;
  margin: 0;
}
.wb-page-hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4f8cff);
}
.wb-page-hero__title {
  font-size: clamp(1.875rem, 3vw + 1rem, 3.25rem);
  font-weight: var(--wb-fw-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--wb-color-white);
  margin: 0;
  text-wrap: balance;
}
.wb-page-hero__lead {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  line-height: 1.6;
  color: var(--wb-color-text-muted);
  margin: var(--wb-space-2) 0 0;
  max-width: 60ch;
  text-wrap: pretty;
}

/* Page breadcrumb override on dark surface */
.wb-page-hero .wb-breadcrumb a { color: var(--wb-color-text-muted); }
.wb-page-hero .wb-breadcrumb a:hover { color: var(--wb-color-white); }
.wb-page-hero .wb-breadcrumb__item[aria-current="page"] { color: var(--wb-color-text); }

/* Page content body ----------------------------------------------------- */
.wb-page-content {
  padding-block: var(--wb-section-y);
}
.wb-page-content .wb-prose > * + * {
  margin-top: var(--wb-space-5);
}
.wb-page-content h2 {
  font-size: var(--wb-h3);
  color: var(--wb-color-white);
  margin-top: var(--wb-space-8);
  letter-spacing: -0.015em;
}
.wb-page-content h3 {
  font-size: var(--wb-h4);
  color: var(--wb-color-white);
  margin-top: var(--wb-space-6);
}
.wb-page-content p,
.wb-page-content li {
  font-size: var(--wb-text-base);
  line-height: 1.7;
  color: var(--wb-color-text);
}

/* Contact form ---------------------------------------------------------- */
.wb-page-form {
  max-width: 720px;
}
.wb-page-form .wb-input,
.wb-page-form .wb-textarea,
.wb-page-form .wb-select {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--wb-color-white);
}
.wb-page-form .wb-input::placeholder,
.wb-page-form .wb-textarea::placeholder {
  color: var(--wb-color-text-soft);
}
.wb-page-form .wb-label { color: var(--wb-color-text); }

/* Service detail page layout ------------------------------------------- */
.wb-service-detail-grid {
  display: grid;
  gap: var(--wb-space-8);
}
@media (min-width: 1024px) {
  .wb-service-detail-grid { grid-template-columns: 1fr 1fr; }
}
.wb-service-detail__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-3);
}
.wb-service-detail__points li {
  display: flex;
  gap: var(--wb-space-3);
  padding: var(--wb-space-4);
  background: var(--wb-color-surface);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-md);
  color: var(--wb-color-text);
  line-height: 1.5;
}
.wb-service-detail__points li::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    var(--wb-color-brand-soft)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393c5fd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")
    center / 11px 11px no-repeat;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================================================
 * About Us page composition
 * ========================================================================== */

/* ── HERO (split layout with stacked operational cards on the right) ── */
.wb-about-hero {
  position: relative;
  padding-block: clamp(4rem, 6vw + 2rem, 7rem);
  border-bottom: var(--wb-border-width) solid var(--wb-color-border);
  overflow: hidden;
}
.wb-about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 0%, #000 25%, transparent 80%);
          mask-image: radial-gradient(ellipse at 60% 0%, #000 25%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
.wb-about-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(79, 140, 255, 0.18), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

.wb-about-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--wb-space-8);
  align-items: center;
}
@media (min-width: 1024px) {
  .wb-about-hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--wb-space-10);
  }
}

.wb-about-hero__content { display: flex; flex-direction: column; gap: var(--wb-space-3); }
.wb-about-hero__content .wb-breadcrumb { margin-bottom: var(--wb-space-2); }

.wb-about-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-space-2);
  font-size: var(--wb-text-xs);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #93c5fd;
  margin: 0;
}
.wb-about-hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4f8cff);
}
.wb-about-hero__title {
  font-size: clamp(1.875rem, 3vw + 1rem, 3.25rem);
  font-weight: var(--wb-fw-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--wb-color-white);
  margin: var(--wb-space-2) 0 var(--wb-space-3);
  text-wrap: balance;
  max-width: 24ch;
}
.wb-about-hero__lead {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  line-height: 1.6;
  color: var(--wb-color-text-muted);
  margin: 0 0 var(--wb-space-5);
  max-width: 60ch;
  text-wrap: pretty;
}
.wb-about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-space-3);
}

/* Stacked operational visual */
.wb-about-hero__visual {
  position: relative;
  min-height: 360px;
}
.wb-about-hero__stack {
  position: relative;
  height: 100%;
  min-height: 360px;
}
.wb-about-hero__card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(260px, 90%);
  padding: var(--wb-space-4) var(--wb-space-5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: var(--wb-border-width) solid rgba(255, 255, 255, 0.1);
  border-radius: var(--wb-radius-lg);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  animation: wb-about-float 8s ease-in-out infinite;
}
.wb-about-hero__card--1 { top: 0; left: 0;  animation-delay: 0s; }
.wb-about-hero__card--2 { top: 38%; right: 0; animation-delay: 1.5s; }
.wb-about-hero__card--3 { bottom: 0; left: 12%; animation-delay: 3s; }

@keyframes wb-about-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.wb-reduce-motion .wb-about-hero__card { animation: none; }

.wb-about-hero__card-eyebrow {
  font-size: 10.5px;
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wb-color-text-soft);
}
.wb-about-hero__card-title {
  font-size: 16px;
  font-weight: var(--wb-fw-semibold);
  color: var(--wb-color-white);
  letter-spacing: -0.01em;
}
.wb-about-hero__card-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-space-2);
  font-size: 11.5px;
  color: var(--wb-color-text-muted);
  margin-top: 4px;
}
.wb-about-hero__card-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wb-color-text-soft);
}
.wb-about-hero__card-dot--success {
  background: var(--wb-color-success);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
}
.wb-about-hero__card-dot--brand {
  background: var(--wb-color-brand);
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.25);
}

/* ── COMPANY INTRODUCTION ───────────────────────────────────────────── */
.wb-about-intro {
  display: grid;
  gap: var(--wb-space-7);
  max-width: 1100px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .wb-about-intro {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--wb-space-10);
    align-items: start;
  }
}
.wb-about-intro__head {
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-3);
  position: sticky;
  top: 96px;
}
.wb-about-intro__prose {
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-5);
}
.wb-about-intro__prose p {
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.125rem);
  line-height: 1.7;
  color: var(--wb-color-text);
  margin: 0;
}

/* ── WHAT MAKES US DIFFERENT (numbered list with icon + copy) ───────── */
.wb-about-diff {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--wb-space-3);
}
.wb-about-diff__item {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--wb-space-4);
  align-items: flex-start;
  padding: var(--wb-space-5) var(--wb-space-5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 60%), var(--wb-color-surface);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-md);
  overflow: hidden;
  transition:
    border-color var(--wb-duration-base) var(--wb-ease),
    transform var(--wb-duration-base) var(--wb-ease),
    box-shadow var(--wb-duration-base) var(--wb-ease);
}
.wb-about-diff__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  pointer-events: none;
}
.wb-about-diff__item:hover {
  border-color: rgba(79, 140, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.5);
}
.wb-about-diff__num {
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.04em;
  color: #93c5fd;
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
  min-width: 28px;
}
.wb-about-diff__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--wb-radius-sm);
  background: var(--wb-color-bg-muted);
  border: var(--wb-border-width) solid var(--wb-color-border-soft);
  color: var(--wb-color-white);
}
.wb-about-diff__icon svg { width: 18px; height: 18px; }
.wb-about-diff__title {
  font-size: var(--wb-text-lg);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: -0.015em;
  color: var(--wb-color-white);
  margin: 0 0 var(--wb-space-2);
}
.wb-about-diff__body {
  font-size: var(--wb-text-sm);
  line-height: 1.6;
  color: var(--wb-color-text-muted);
  margin: 0;
}

/* ── OUR ECOSYSTEM (2x2 connected node grid) ────────────────────────── */
.wb-about-eco {
  display: grid;
  gap: var(--wb-space-5);
  grid-template-columns: 1fr;
  position: relative;
}
@media (min-width: 768px) {
  .wb-about-eco {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wb-space-6);
  }
}
.wb-about-eco__node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-2);
  padding: var(--wb-space-6) var(--wb-space-6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01) 70%), var(--wb-color-surface);
  border: var(--wb-border-width) solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  overflow: hidden;
  transition:
    border-color var(--wb-duration-base) var(--wb-ease),
    box-shadow var(--wb-duration-base) var(--wb-ease);
}
.wb-about-eco__node::before {
  /* Connection-line glow on the top edge */
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.45), transparent);
  pointer-events: none;
}
.wb-about-eco__node:hover {
  border-color: rgba(79, 140, 255, 0.25);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.55),
              0 0 24px -8px rgba(79, 140, 255, 0.25);
}
.wb-about-eco__num {
  position: absolute;
  top: var(--wb-space-4);
  right: var(--wb-space-5);
  font-size: var(--wb-text-xs);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.06em;
  color: var(--wb-color-text-soft);
  font-variant-numeric: tabular-nums;
}
.wb-about-eco__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--wb-radius-md);
  background: linear-gradient(180deg, rgba(79, 140, 255, 0.18), rgba(79, 140, 255, 0.06));
  border: var(--wb-border-width) solid rgba(79, 140, 255, 0.22);
  color: #93c5fd;
  margin-bottom: var(--wb-space-2);
}
.wb-about-eco__icon svg { width: 20px; height: 20px; }
.wb-about-eco__title {
  font-size: var(--wb-text-lg);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: -0.015em;
  color: var(--wb-color-white);
  margin: 0;
}
.wb-about-eco__body {
  font-size: var(--wb-text-sm);
  line-height: 1.6;
  color: var(--wb-color-text-muted);
  margin: 0;
}

/* ── TRUST CARDS (variant on .wb-card--feature) ─────────────────────── */
.wb-about-trust__card {
  text-align: left;
}
.wb-about-trust__card .wb-card__icon {
  background: linear-gradient(180deg, rgba(147, 197, 253, 0.18), rgba(79, 140, 255, 0.08));
  color: #93c5fd;
  border-color: rgba(79, 140, 255, 0.22);
}

/* ── MOBILE FALL-THROUGH ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .wb-about-hero { padding-block: clamp(3rem, 7vw + 1rem, 5rem); }
  .wb-about-hero__title { font-size: clamp(1.625rem, 5.5vw + 0.5rem, 2.25rem); max-width: 100%; }
  .wb-about-hero__visual { min-height: 320px; margin-top: var(--wb-space-4); }
  .wb-about-intro__head { position: static; }
  .wb-about-diff__item {
    grid-template-columns: auto 1fr;
    padding: var(--wb-space-4);
  }
  .wb-about-diff__icon { display: none; }
  .wb-about-eco__node { padding: var(--wb-space-5); }
}

@media (max-width: 480px) {
  .wb-about-hero__visual { min-height: 280px; }
  .wb-about-hero__card { width: 84%; padding: var(--wb-space-3) var(--wb-space-4); }
}