/* ═══════════════════════════════════════════════════════════════════════════
   "WHAT IS DFRM" — EDUCATIONAL PILLAR PAGE  (namespaced .wdfrm-*)
═══════════════════════════════════════════════════════════════════════════ */

.wdfrm-section { padding: 80px 0; }
.wdfrm-bg-white { background: #FFFFFF; }
.wdfrm-bg-soft { background: #F7F8FC; }

.wdfrm-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #4338CA; margin-bottom: 14px; }
.wdfrm-eyebrow--pill { background: rgba(255,255,255,0.8); border: 1px solid #C7D2FE; border-radius: 100px; padding: 6px 14px; letter-spacing: 0.08em; }
.wdfrm-accent { background: linear-gradient(90deg, #6D28D9, #4338CA); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.wdfrm-h2 { font-size: clamp(27px, 3.1vw, 40px); font-weight: 700; line-height: 1.14; color: #0B0F1A; letter-spacing: -0.025em; font-family: var(--font-jakarta,'Plus Jakarta Sans'),var(--font-inter,'Inter'),sans-serif; margin-bottom: 16px; }
.wdfrm-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #4338CA; cursor: pointer; margin-top: 4px; }

/* Split layout */
.wdfrm-split { display: grid; grid-template-columns: 300px 1fr; gap: 50px; align-items: start; }
.wdfrm-split__desc { font-size: 16px; line-height: 1.7; color: #475569; margin-bottom: 14px; }
@media (max-width: 900px) { .wdfrm-split { grid-template-columns: 1fr; gap: 28px; } }

/* Centered head */
.wdfrm-center-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.wdfrm-center-sub { font-size: 17px; line-height: 1.7; color: #475569; }

/* ── HERO ── */
.wdfrm-hero {
  padding: 72px 0 64px;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(124,58,237,0.10) 0%, transparent 55%),
    linear-gradient(180deg, #F1F0FE 0%, #F7F8FE 100%);
}
.wdfrm-hero__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.wdfrm-hero__title { font-size: clamp(36px, 4.2vw, 54px); font-weight: 800; line-height: 1.06; color: #0B0F1A; letter-spacing: -0.035em; font-family: var(--font-jakarta,'Plus Jakarta Sans'),var(--font-inter,'Inter'),sans-serif; margin-bottom: 18px; }
.wdfrm-hero__desc { font-size: 17px; line-height: 1.7; color: #475569; max-width: 470px; margin-bottom: 26px; }
.wdfrm-hero__stats { display: flex; gap: 26px; flex-wrap: wrap; }
.wdfrm-statpill { display: flex; align-items: center; gap: 11px; }
.wdfrm-statpill__icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #DCFCE7; color: #16A34A; }
.wdfrm-statpill__icon svg { width: 17px; height: 17px; }
.wdfrm-statpill__label { font-size: 12px; color: #64748B; font-weight: 500; }
.wdfrm-statpill__value { font-size: 19px; font-weight: 800; color: #0B1020; line-height: 1.1; font-family: var(--font-jakarta,'Plus Jakarta Sans'),var(--font-inter,'Inter'),sans-serif; }

.wdfrm-hero__card { background: white; border: 1px solid #E6E8F0; border-radius: 20px; padding: 26px 28px; box-shadow: 0 30px 70px rgba(15,23,42,0.10); }
.wdfrm-hero__card-title { font-size: 15px; font-weight: 800; color: #0B1020; margin-bottom: 22px; font-family: var(--font-jakarta,'Plus Jakarta Sans'),var(--font-inter,'Inter'),sans-serif; }
.wdfrm-hero__card-caption { font-size: 12.5px; line-height: 1.6; color: #64748B; margin-top: 22px; text-align: center; }

/* ── Horizontal icon flow (hero + device lifecycle) ── */
.wdfrm-flow { display: flex; align-items: flex-start; justify-content: space-between; }
.wdfrm-flow__item { display: flex; align-items: flex-start; flex: 1; min-width: 0; }
.wdfrm-flow__node { flex: 1; text-align: center; padding: 0 4px; }
.wdfrm-flow__icon { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.wdfrm-flow__icon svg { width: 22px; height: 22px; }
.wdfrm-flow__title { font-size: 12.5px; font-weight: 700; color: #0B1020; line-height: 1.25; }
.wdfrm-flow__sub { font-size: 11.5px; color: #64748B; line-height: 1.4; margin-top: 4px; }
.wdfrm-flow__arrow { flex: 0 0 16px; color: #C7D2FE; font-size: 17px; font-weight: 700; padding-top: 13px; }
.wdfrm-flow .tone-indigo { background: #E0E7FF; color: #4338CA; }
.wdfrm-flow .tone-blue { background: #DBEAFE; color: #2563EB; }
.wdfrm-flow .tone-violet { background: #EDE9FE; color: #7C3AED; }
.wdfrm-flow .tone-red { background: #FEE2E2; color: #DC2626; }
.wdfrm-flow .tone-amber { background: #FEF3C7; color: #D97706; }
.wdfrm-flow .tone-green { background: #DCFCE7; color: #16A34A; }
@media (max-width: 720px) {
  .wdfrm-flow { flex-wrap: wrap; gap: 18px; }
  .wdfrm-flow__item { flex: 0 0 45%; }
  .wdfrm-flow__arrow { display: none; }
}

/* ── TIMELINE ── */
.wdfrm-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.wdfrm-timeline::before { content: ''; position: absolute; top: 11px; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, #C7D2FE, #DDD6FE); }
.wdfrm-tl__item { position: relative; }
.wdfrm-tl__top { display: flex; justify-content: center; margin-bottom: 16px; }
.wdfrm-tl__year { position: relative; z-index: 1; background: white; border: 1.5px solid #C7D2FE; color: #4338CA; font-size: 12px; font-weight: 800; padding: 4px 14px; border-radius: 100px; }
.wdfrm-tl__card { background: white; border: 1.5px solid #E6E8F0; border-radius: 14px; padding: 18px 16px; height: 100%; transition: all 0.2s ease; }
.wdfrm-tl__item.is-highlight .wdfrm-tl__card { border-color: #6D28D9; box-shadow: 0 16px 40px rgba(109,40,217,0.14); }
.wdfrm-tl__item.is-highlight .wdfrm-tl__year { background: #6D28D9; color: white; border-color: #6D28D9; }
.wdfrm-tl__title { font-size: 14.5px; font-weight: 800; color: #0B1020; margin-bottom: 7px; line-height: 1.3; }
.wdfrm-tl__desc { font-size: 12.5px; line-height: 1.55; color: #64748B; }
@media (max-width: 760px) {
  .wdfrm-timeline { grid-template-columns: repeat(2, 1fr); }
  .wdfrm-timeline::before { display: none; }
}
@media (max-width: 460px) { .wdfrm-timeline { grid-template-columns: 1fr; } }

/* ── PENTAGON ── */
.wdfrm-penta { position: relative; max-width: 560px; margin: 0 auto; aspect-ratio: 1 / 0.82; }
.wdfrm-penta__center {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 120px; height: 120px; border-radius: 50%; z-index: 2;
  background: linear-gradient(160deg, #EEF2FF, #F5F3FF); border: 1.5px solid #DDD6FE;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 12px 30px rgba(67,56,202,0.12);
}
.wdfrm-penta__center-icon { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, #4338CA, #7C3AED); color: white; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.wdfrm-penta__center-icon svg { width: 20px; height: 20px; }
.wdfrm-penta__center-label { font-size: 13px; font-weight: 800; color: #4338CA; }
.wdfrm-penta__node {
  position: absolute; width: 168px; text-align: center; transform: translate(-50%, -50%);
}
.wdfrm-penta__node.pos-top { left: 50%; top: 8%; }
.wdfrm-penta__node.pos-right { left: 90%; top: 40%; }
.wdfrm-penta__node.pos-br { left: 76%; top: 92%; }
.wdfrm-penta__node.pos-bl { left: 24%; top: 92%; }
.wdfrm-penta__node.pos-left { left: 10%; top: 40%; }
.wdfrm-penta__icon { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: white; border: 1px solid #E6E8F0; color: #4338CA; box-shadow: 0 6px 16px rgba(15,23,42,0.08); margin-bottom: 8px; }
.wdfrm-penta__icon svg { width: 19px; height: 19px; }
.wdfrm-penta__label { font-size: 13.5px; font-weight: 800; color: #0B1020; margin-bottom: 3px; }
.wdfrm-penta__desc { font-size: 11.5px; line-height: 1.45; color: #64748B; }
@media (max-width: 760px) {
  .wdfrm-penta { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: none; }
  .wdfrm-penta__center { position: relative; left: auto; top: auto; transform: none; grid-column: span 2; margin: 0 auto 6px; }
  .wdfrm-penta__node { position: relative; left: auto !important; top: auto !important; transform: none; width: auto; text-align: left; display: flex; flex-direction: column; }
}

/* ── ANATOMY / LAYERS ── */
.wdfrm-anatomy { display: grid; grid-template-columns: 1fr 260px; gap: 26px; align-items: start; }
.wdfrm-layers { display: flex; flex-direction: column; gap: 10px; }
.wdfrm-layer { border-radius: 14px; padding: 16px 20px; color: white; }
.wdfrm-layer__name { font-size: 15px; font-weight: 800; font-family: var(--font-jakarta,'Plus Jakarta Sans'),var(--font-inter,'Inter'),sans-serif; }
.wdfrm-layer__desc { font-size: 12.5px; line-height: 1.55; opacity: 0.92; margin-top: 3px; }
.wdfrm-layer.l1 { background: linear-gradient(135deg, #7C3AED, #6D28D9); }
.wdfrm-layer.l2 { background: linear-gradient(135deg, #6366F1, #4338CA); }
.wdfrm-layer.l3 { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.wdfrm-layer.l4 { background: linear-gradient(135deg, #14B8A6, #0D9488); }
.wdfrm-layer.l5 { background: linear-gradient(135deg, #22C55E, #16A34A); }
.wdfrm-anatomy__panel { background: white; border: 1px solid #E6E8F0; border-radius: 16px; padding: 24px 22px; box-shadow: 0 12px 30px rgba(15,23,42,0.06); }
.wdfrm-anatomy__panel-icon { width: 44px; height: 44px; border-radius: 12px; background: #EEF2FF; color: #4338CA; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.wdfrm-anatomy__panel-icon svg { width: 21px; height: 21px; }
.wdfrm-anatomy__panel-title { font-size: 14px; font-weight: 700; color: #0B1020; line-height: 1.45; margin-bottom: 16px; }
.wdfrm-anatomy__list { display: flex; flex-direction: column; gap: 10px; }
.wdfrm-anatomy__list li { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: #1E293B; }
.wdfrm-anatomy__list li svg { width: 15px; height: 15px; color: #16A34A; flex-shrink: 0; }
@media (max-width: 760px) { .wdfrm-anatomy { grid-template-columns: 1fr; } }

/* ── DFRM vs TRADITIONAL ── */
.wdfrm-vs { display: grid; grid-template-columns: 1fr 48px 1fr; gap: 14px; align-items: center; }
.wdfrm-vs__panel { border-radius: 16px; padding: 20px; border: 1.5px solid #E6E8F0; background: white; }
.wdfrm-vs__panel.is-trad { background: #FFF6F6; border-color: #FCD9D9; }
.wdfrm-vs__panel.is-dfrm { background: #F2FCF6; border-color: #C8EFD6; }
.wdfrm-vs__head { text-align: center; font-size: 15px; font-weight: 800; margin-bottom: 18px; font-family: var(--font-jakarta,'Plus Jakarta Sans'),var(--font-inter,'Inter'),sans-serif; }
.wdfrm-vs__head.is-trad { color: #DC2626; }
.wdfrm-vs__head.is-dfrm { color: #16A34A; }
.wdfrm-vs__flow { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.wdfrm-vs__step { display: flex; align-items: flex-start; flex: 1; min-width: 0; }
.wdfrm-vs__step-icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 0 auto; }
.wdfrm-vs__step { flex-direction: column; align-items: center; text-align: center; position: relative; }
.wdfrm-vs__step-icon.is-trad { background: #FEE2E2; color: #DC2626; }
.wdfrm-vs__step-icon.is-dfrm { background: #DCFCE7; color: #16A34A; }
.wdfrm-vs__step-icon svg { width: 18px; height: 18px; }
.wdfrm-vs__step-label { font-size: 11px; font-weight: 700; color: #334155; margin-top: 7px; line-height: 1.25; }
.wdfrm-vs__step-arrow { position: absolute; top: 12px; right: -8px; color: #CBD5E1; font-size: 14px; }
.wdfrm-vs__tags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wdfrm-vs__tag { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.wdfrm-vs__tag svg { width: 13px; height: 13px; flex-shrink: 0; }
.wdfrm-vs__tag.is-bad { background: rgba(220,38,38,0.08); color: #DC2626; }
.wdfrm-vs__tag.is-good { background: rgba(22,163,74,0.10); color: #16A34A; }
.wdfrm-vs__badge { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #4338CA, #7C3AED); color: white; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; margin: 0 auto; box-shadow: 0 8px 20px rgba(67,56,202,0.3); }
@media (max-width: 760px) {
  .wdfrm-vs { grid-template-columns: 1fr; }
  .wdfrm-vs__badge { transform: rotate(90deg); }
}

/* ── DATA CARDS ── */
.wdfrm-data { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wdfrm-data__card { background: white; border: 1px solid #E6E8F0; border-radius: 14px; padding: 20px 18px; transition: all 0.22s ease; }
.wdfrm-data__card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(15,23,42,0.08); border-color: #DDD6FE; }
.wdfrm-data__icon { width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #EEF2FF, #F5F3FF); color: #4338CA; margin-bottom: 14px; }
.wdfrm-data__icon svg { width: 20px; height: 20px; }
.wdfrm-data__title { font-size: 15px; font-weight: 700; color: #0B1020; margin-bottom: 5px; font-family: var(--font-jakarta,'Plus Jakarta Sans'),var(--font-inter,'Inter'),sans-serif; }
.wdfrm-data__desc { font-size: 12px; line-height: 1.5; color: #64748B; }
@media (max-width: 1000px) { .wdfrm-data { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .wdfrm-data { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .wdfrm-data { grid-template-columns: 1fr; } }

/* ── WHO USES ── */
.wdfrm-users { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wdfrm-users__card { display: flex; align-items: center; gap: 14px; background: white; border: 1px solid #E6E8F0; border-radius: 14px; padding: 18px 22px; transition: all 0.22s ease; }
.wdfrm-users__card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(15,23,42,0.08); border-color: #DDD6FE; }
.wdfrm-users__icon { width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #EEF2FF, #F5F3FF); color: #4338CA; flex-shrink: 0; }
.wdfrm-users__icon svg { width: 20px; height: 20px; }
.wdfrm-users__name { font-size: 14.5px; font-weight: 700; color: #0B1020; }
@media (max-width: 820px) { .wdfrm-users { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .wdfrm-users { grid-template-columns: 1fr; } }

/* ── FUTURE ── */
.wdfrm-future { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.wdfrm-future__card { background: white; border: 1px solid #E6E8F0; border-radius: 14px; padding: 20px 16px; transition: all 0.22s ease; }
.wdfrm-future__card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(15,23,42,0.08); border-color: #DDD6FE; }
.wdfrm-future__icon { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #4338CA, #7C3AED); color: white; margin-bottom: 14px; }
.wdfrm-future__icon svg { width: 19px; height: 19px; }
.wdfrm-future__title { font-size: 15px; font-weight: 700; color: #0B1020; margin-bottom: 6px; line-height: 1.25; font-family: var(--font-jakarta,'Plus Jakarta Sans'),var(--font-inter,'Inter'),sans-serif; }
.wdfrm-future__desc { font-size: 12px; line-height: 1.5; color: #64748B; }
@media (max-width: 1000px) { .wdfrm-future { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .wdfrm-future { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .wdfrm-future { grid-template-columns: 1fr; } }

/* ── FAQ (split) ── */
.wdfrm-faq { padding: 80px 0; background: #F7F8FC; }
.wdfrm-faq__grid { display: grid; grid-template-columns: 300px 1fr; gap: 50px; align-items: start; }
.wdfrm-faq__title { font-size: clamp(27px, 3vw, 38px); font-weight: 700; color: #0B0F1A; line-height: 1.14; letter-spacing: -0.025em; margin-bottom: 14px; font-family: var(--font-jakarta,'Plus Jakarta Sans'),var(--font-inter,'Inter'),sans-serif; }
.wdfrm-faq__desc { font-size: 15px; line-height: 1.7; color: #64748B; }
.wdfrm-faq__list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.wdfrm-faq__item { background: white; border: 1px solid #E6E8F0; border-radius: 14px; overflow: hidden; align-self: start; transition: border-color 0.2s ease; }
.wdfrm-faq__item.is-open { border-color: #C7D2FE; box-shadow: 0 12px 30px rgba(67,56,202,0.08); }
.wdfrm-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: none; border: none; cursor: pointer; text-align: left; padding: 18px 20px; font-size: 14.5px; font-weight: 700; color: #0B1020; font-family: inherit; line-height: 1.35; }
.wdfrm-faq__toggle { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; background: #EEF2FF; color: #4338CA; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; }
.wdfrm-faq__a-wrap { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.wdfrm-faq__item.is-open .wdfrm-faq__a-wrap { max-height: 340px; }
.wdfrm-faq__a { padding: 0 20px 18px; font-size: 13px; line-height: 1.65; color: #64748B; margin: 0; }
@media (max-width: 900px) { .wdfrm-faq__grid { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 620px) { .wdfrm-faq__list { grid-template-columns: 1fr; } }

/* ── FINAL CTA + DASHBOARD ── */
.wdfrm-ctawrap { padding: 0 0 80px; background: #F7F8FC; }
.wdfrm-cta {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 36px; align-items: center;
  border-radius: 22px; padding: 40px 44px;
  background:
    radial-gradient(700px 320px at 95% 0%, rgba(124,58,237,0.5) 0%, transparent 60%),
    linear-gradient(135deg, #4338CA 0%, #5B21B6 100%);
}
.wdfrm-cta__title { font-size: clamp(24px, 2.8vw, 32px); font-weight: 800; color: white; line-height: 1.2; font-family: var(--font-jakarta,'Plus Jakarta Sans'),var(--font-inter,'Inter'),sans-serif; }
.wdfrm-cta__desc { font-size: 15px; color: rgba(255,255,255,0.82); margin-top: 10px; margin-bottom: 22px; }
.wdfrm-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.wdfrm-cta__dash { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16); border-radius: 16px; padding: 16px; backdrop-filter: blur(8px); }
.wdfrm-cta__dash-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }
.wdfrm-cta__dash-main, .wdfrm-cta__dash-side { background: white; border-radius: 12px; padding: 16px; }
.wdfrm-cta__dash-title { font-size: 12px; font-weight: 800; color: #0B1020; margin-bottom: 12px; }
.wdfrm-cta__dash-stats { display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.wdfrm-cta__dash-stat-label { font-size: 9.5px; color: #94A3B8; font-weight: 500; }
.wdfrm-cta__dash-stat-val { font-size: 16px; font-weight: 800; color: #0B1020; font-family: var(--font-jakarta,'Plus Jakarta Sans'),var(--font-inter,'Inter'),sans-serif; line-height: 1.1; }
.wdfrm-cta__dash-chart { width: 100%; height: 56px; display: block; }
.wdfrm-cta__donut { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 12px; background: conic-gradient(#818CF8 0% 55%, #34D399 55% 78%, #FBBF24 78% 92%, #F87171 92% 100%); position: relative; }
.wdfrm-cta__donut::after { content: ''; position: absolute; inset: 13px; background: white; border-radius: 50%; }
.wdfrm-cta__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.wdfrm-cta__legend-item { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: #475569; }
.wdfrm-cta__legend-item span { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
@media (max-width: 860px) {
  .wdfrm-cta { grid-template-columns: 1fr; padding: 32px 26px; }
}
@media (max-width: 460px) { .wdfrm-cta__dash-cols { grid-template-columns: 1fr; } }