@charset "utf-8";
/* CSS Document */

    .wb-intro {
      margin-top: 8px;
    }

    .wb-intro-card {
      border-radius: 26px;
      padding: 18px;
      background:
        radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.12), transparent 46%),
        radial-gradient(circle at 100% 0, rgba(34, 197, 94, 0.12), transparent 50%),
        linear-gradient(135deg, rgba(2,6,23,0.92), rgba(15,23,42,0.92));
      border: 1px solid rgba(148,163,184,0.40);
      box-shadow:
        0 26px 50px rgba(15,23,42,0.92),
        0 0 0 1px rgba(15,23,42,0.96);

      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
      gap: 16px;
      overflow: hidden;
    }

    .wb-intro-left { padding: 6px 6px 10px; }

    .wb-intro-kicker {
      margin: 0 0 6px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.78rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #a5f3fc;
    }

    .wb-intro-title {
      margin: 0 0 8px;
      font-size: clamp(1.25rem, 2.2vw, 1.65rem);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .wb-intro-sub {
      margin: 0 0 12px;
      font-size: 0.92rem;
      color: var(--meed-text-soft);
      line-height: 1.45;
      max-width: 820px;
    }

    .wb-intro-steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin: 10px 0 14px;
    }

    .wb-step {
      border-radius: 16px;
      padding: 10px 10px 11px;
      background: rgba(2,6,23,0.55);
      border: 1px solid rgba(148,163,184,0.26);
      box-shadow:
        0 14px 26px rgba(15,23,42,0.85),
        0 0 0 1px rgba(15,23,42,0.92);
    }

    .wb-step-title {
      font-weight: 900;
      color: #e5edff;
      margin-bottom: 4px;
      font-size: 0.90rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .wb-step-sub {
      color: var(--meed-text-soft);
      font-size: 0.82rem;
      line-height: 1.35;
    }

    .wb-intro-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px;
      align-items: center;
    }

    .wb-cta, .wb-cta-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      padding: 9px 16px;
      font-size: 0.86rem;
      text-decoration: none;
      gap: 8px;
      border: 1px solid rgba(148,163,184,0.40);
      background: rgba(2,6,23,0.55);
      color: #e5edff;
      transition: transform 140ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
    }

    .wb-cta:hover, .wb-cta-ghost:hover {
      transform: translateY(-1px);
      border-color: rgba(129,140,248,0.65);
      box-shadow: 0 14px 26px rgba(15,23,42,0.92);
    }

    .wb-cta.is-primary {
      color: #052e16;
      font-weight: 900;
      border: 1px solid rgba(74,222,128,0.75);
      background:
        radial-gradient(circle at 0 0, rgba(74,222,128,0.85), rgba(34,197,94,0.70)),
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.00));
      box-shadow:
        0 18px 34px rgba(15,23,42,0.92),
        0 0 0 1px rgba(15,23,42,0.96);
    }

    .wb-cta.is-primary::before { content: "🧾"; font-size: 0.95rem; opacity: 0.95; }

    .wb-intro-micro {
      margin: 10px 0 0;
      font-size: 0.80rem;
      color: var(--meed-text-muted);
    }

    .wb-intro-right {
      display: flex;
      align-items: stretch;
      justify-content: stretch;
    }

    .wb-mini {
      width: 100%;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid rgba(148,163,184,0.26);
      background:
        radial-gradient(circle at 0 0, rgba(56,189,248,0.10), rgba(2,6,23,0.70)),
        linear-gradient(135deg, rgba(2,6,23,0.75), rgba(15,23,42,0.85));
      box-shadow:
        0 22px 40px rgba(15,23,42,0.92),
        0 0 0 1px rgba(15,23,42,0.96);
      display: flex;
      flex-direction: column;
    }

    .wb-mini-top {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      background: rgba(2,6,23,0.70);
      border-bottom: 1px solid rgba(148,163,184,0.18);
    }

    .wb-mini-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; opacity: 0.9; }
    .wb-mini-dot.red { background: rgba(248, 113, 113, 0.95); }
    .wb-mini-dot.yel { background: rgba(250, 204, 21, 0.95); }
    .wb-mini-dot.grn { background: rgba(34, 197, 94, 0.95); }

    .wb-mini-title {
      margin-left: 4px;
      font-size: 0.82rem;
      color: rgba(229, 237, 255, 0.92);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .wb-mini-body {
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1 1 auto;
    }

    .wb-template {
      border-radius: 16px;
      padding: 10px 10px 11px;
      background: rgba(2,6,23,0.48);
      border: 1px solid rgba(148,163,184,0.22);
    }

    .wb-template-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
    }

    .wb-template-name {
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-size: 0.82rem;
      color: rgba(229,237,255,0.92);
    }

    .wb-template-tag {
      font-size: 0.72rem;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.24);
      background: rgba(2,6,23,0.35);
      color: var(--meed-text-soft);
      white-space: nowrap;
    }

    .wb-template ul {
      margin: 0;
      padding-left: 16px;
      color: var(--meed-text-soft);
      font-size: 0.82rem;
      line-height: 1.35;
    }

    .wb-philosophy {
      margin-top: 12px;
      border-radius: 18px;
      padding: 12px 12px 12px;
      background: rgba(2,6,23,0.55);
      border: 1px solid rgba(148,163,184,0.26);
      box-shadow:
        0 18px 34px rgba(15,23,42,0.90),
        0 0 0 1px rgba(15,23,42,0.96);
    }

    .wb-phil-title {
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-size: 0.86rem;
      margin: 0 0 8px;
      color: rgba(229,237,255,0.95);
    }

    .wb-phil-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .wb-phil-card {
      border-radius: 16px;
      padding: 10px 10px 11px;
      background: rgba(2,6,23,0.44);
      border: 1px solid rgba(148,163,184,0.20);
    }

    .wb-phil-kicker {
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(165,243,252,0.95);
      margin-bottom: 6px;
    }

    .wb-phil-card p {
      margin: 0 0 8px;
      color: var(--meed-text-soft);
      font-size: 0.82rem;
      line-height: 1.35;
    }

    .wb-phil-card ul {
      margin: 0;
      padding-left: 16px;
      color: var(--meed-text-soft);
      font-size: 0.80rem;
      line-height: 1.35;
    }

    @media (max-width: 1024px) {
      .wb-intro-card { grid-template-columns: minmax(0, 1fr); }
      .wb-intro-right { order: -1; }
      .wb-intro-steps { grid-template-columns: minmax(0, 1fr); }
      .wb-phil-grid { grid-template-columns: minmax(0, 1fr); }
    }