/* Platform pillars diagram — live HTML version of assets/platform-pillars.png */
.pillars { max-width: 1120px; margin: 0 auto; font-family: 'Inter', -apple-system, sans-serif; }
.pl-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.pl-box svg { display: block; width: 26px; height: 26px; margin: 0 auto 10px; fill: none; stroke: #26F0DC; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pl-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 11px; background: #10151f; border: 1px solid rgba(38, 240, 220, 0.35); display: flex; align-items: center; justify-content: center; }
.pl-ico svg { width: 22px; height: 22px; fill: none; stroke: #26F0DC; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pl-bar { display: flex; align-items: center; gap: 18px; }
.pl-mod .pl-ico { margin-bottom: 16px; }
.pl-box {
  background: #0d111c;
  border: 1px solid rgba(245, 245, 240, 0.18);
  border-radius: 12px;
  padding: 22px 16px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: #F5F5F0;
}
.pl-box small {
  display: block; margin-top: 8px;
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: #9A9A95;
}
.pl-note {
  position: absolute; right: -8px; top: 50%; transform: translate(100%, -50%);
  font-size: 13px; font-style: italic; color: #9A9A95; line-height: 1.35; width: 120px;
}
.pl-arrows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; height: 54px; }
.pl-arrows span { position: relative; display: block; height: 100%; }
.pl-arrows span::before {
  content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px;
  background: #26F0DC; transform: translateX(-50%); opacity: 0.85;
}
.pl-arrows span::after, .pl-arrows span i {
  content: ''; position: absolute; left: 50%; width: 10px; height: 10px;
  border-left: 2px solid #26F0DC; border-top: 2px solid #26F0DC;
}
.pl-arrows span::after { top: 6px; transform: translateX(-50%) rotate(45deg); }
.pl-arrows span i { bottom: 6px; transform: translateX(-50%) rotate(225deg); display: block; }
.pl-core {
  position: relative;
  border: 2px solid #26F0DC;
  border-radius: 16px;
  padding: 24px;
  background: rgba(6, 10, 18, 0.6);
  display: flex; flex-direction: column; gap: 18px;
}
.pl-tag {
  position: absolute; left: 22px; top: -11px;
  background: #04060c; padding: 0 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: #9A9A95;
}
.pl-bar, .pl-mod {
  background: #0d111c;
  border: 1px solid rgba(245, 245, 240, 0.16);
  border-radius: 12px;
  padding: 22px 26px;
}
.pl-bar h4, .pl-mod h4 {
  font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: #F5F5F0; margin: 0 0 6px;
}
.pl-mod h4 { margin-bottom: 4px; }
.pl-bar.is-ai h4, .pl-mod.is-primary h4 { color: #26F0DC; }
.pl-bar p, .pl-mod p { font-size: 15.5px; color: #9A9A95; line-height: 1.5; margin: 0; }
.pl-mods { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pl-mod.is-primary { background: #0c1f24; border-color: #26F0DC; }
.pl-mod ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pl-mod li { display: flex; gap: 14px; align-items: baseline; font-size: 15.5px; color: #F5F5F0; line-height: 1.4; }
.pl-mod li::before { content: ''; width: 14px; height: 2px; background: #26F0DC; flex-shrink: 0; transform: translateY(-4px); }
.pl-caption { text-align: center; font-size: 15px; font-style: italic; color: #9A9A95; margin: 26px 0 0; }
@media (max-width: 900px) {
  .pl-mods { grid-template-columns: 1fr; }
  .pl-note { display: none; }
  .pl-box { font-size: 13px; padding: 16px 8px; }
  .pl-box small { font-size: 11.5px; }
  .pl-row, .pl-arrows { gap: 10px; }
  .pl-core { padding: 16px; }
  .pl-bar, .pl-mod { padding: 18px 18px; }
  .pl-bar h4, .pl-mod h4 { font-size: 14px; }
}
