.explain-page { background: #101018; color: #e8e9f0; }
.explain-hero { background: radial-gradient(ellipse 620px 420px at 82% 15%, rgba(116, 72, 236, .22), transparent 72%), #101018; border-bottom: 1px solid #292837; padding: 104px 0 96px; }
.explain-hero-inner { align-items: center; display: grid; gap: clamp(48px, 8vw, 120px); grid-template-columns: minmax(0, 1.05fr) minmax(340px, .75fr); }
.explain-hero h1 { font-size: clamp(40px, 5vw, 68px); letter-spacing: -2.5px; line-height: 1.05; margin: 0 0 24px; max-width: 13ch; }
.explain-lede { color: #aaa6b5; font-size: 17px; line-height: 1.75; margin: 0 0 32px; max-width: 57ch; }
.idea-map { align-items: stretch; display: grid; gap: 14px; }
.idea-node { background: #191923; border: 1px solid #393448; border-radius: 8px; display: grid; gap: 4px; padding: 24px; }
.idea-node.accent { background: linear-gradient(135deg, rgba(116, 72, 236, .22), #191923 65%); border-color: #6849bd; }
.idea-node > span { color: #aa8aff; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.idea-node strong { color: #f0ecf8; font-size: 19px; }
.idea-node small { color: #aaa6b5; font-size: 13px; }
.idea-connection { align-items: center; color: #c5afff; display: grid; font-size: 11px; font-weight: 750; grid-template-columns: 1fr auto 1fr; letter-spacing: 1px; padding: 0 22px; text-align: center; text-transform: uppercase; }
.idea-connection i { color: #7554d5; font-size: 24px; font-style: normal; }

.explain-section { border-bottom: 1px solid #292837; padding: 92px 0; }
.idea-section, .bridge-section, .install-section { background: #14131d; }
.workflow-section, .faq-section, .capabilities-section { background: #101018; }
.section-intro h2, .bridge-grid h2 { color: #eeeaf5; font-size: clamp(28px, 3.5vw, 43px); letter-spacing: -1.1px; line-height: 1.15; margin: 0; }
.section-intro > p:last-child { color: #aaa6b5; margin: 14px 0 0; }
.explain-split { display: grid; gap: clamp(40px, 8vw, 130px); grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.idea-copy { color: #b7b2c1; font-size: 17px; line-height: 1.8; }
.idea-copy p { margin: 0 0 20px; }
.idea-copy p:last-child { margin-bottom: 0; }
.centered-intro { margin: 0 auto 44px; max-width: 680px; text-align: center; }

.capability-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.capability-grid article { background: #191923; border: 1px solid #302e40; border-radius: 7px; padding: 24px; }
.capability-grid span { color: #aa8aff; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.capability-grid h3 { color: #eeeaf5; font-size: 16px; margin: 28px 0 9px; }
.capability-grid p { color: #a8a3b2; font-size: 13px; line-height: 1.65; margin: 0; }

.workflow-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.workflow-card { background: #191923; border: 1px solid #302e40; border-radius: 7px; min-height: 245px; padding: 26px 24px; }
.workflow-card > span { color: #aa8aff; display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 46px; }
.workflow-card h3 { color: #eeeaf5; font-size: 17px; margin: 0 0 10px; }
.workflow-card p { color: #a8a3b2; font-size: 13px; line-height: 1.65; margin: 0; }

.bridge-grid { display: grid; gap: 38px 70px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.bridge-grid > div:first-child > p:last-child { color: #aaa6b5; line-height: 1.75; margin: 20px 0 0; }
.bridge-cards { display: grid; gap: 14px; }
.bridge-cards article { background: #1b1928; border: 1px solid #393448; border-radius: 7px; padding: 22px; }
.bridge-cards strong { color: #c5afff; font-size: 19px; }
.bridge-cards p { color: #eeeaf5; font-size: 13px; font-weight: 750; margin: 5px 0; }
.bridge-cards small { color: #9f99aa; line-height: 1.55; }
.bridge-note { background: rgba(116, 72, 236, .1); border: 1px solid #453865; border-radius: 6px; color: #aaa6b5; font-size: 13px; grid-column: 1 / -1; line-height: 1.65; margin: 0; padding: 16px 18px; }
.bridge-note strong { color: #d7c9ff; }

.install-layout { display: grid; gap: 32px 70px; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); }
.install-steps { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.install-steps li { align-items: flex-start; background: #1b1928; border: 1px solid #393448; border-radius: 7px; display: grid; gap: 16px; grid-template-columns: 32px 1fr; padding: 18px; }
.install-steps li > span { align-items: center; background: #2b2740; border: 1px solid #4d3d79; border-radius: 5px; color: #c5afff; display: flex; font-size: 11px; font-weight: 800; height: 32px; justify-content: center; }
.install-steps h3 { color: #eeeaf5; font-size: 15px; margin: 0 0 4px; }
.install-steps p { color: #aaa6b5; font-size: 13px; line-height: 1.6; margin: 0; }
.install-steps code { color: #d7c9ff; font-size: .95em; }
.install-note { background: rgba(116, 72, 236, .1); border: 1px solid #453865; border-radius: 6px; color: #bcb6c8; font-size: 13px; grid-column: 1 / -1; line-height: 1.6; margin: 0; padding: 15px 18px; }
.install-note a { color: #d7c9ff; font-weight: 750; }

.faq-layout { display: grid; gap: clamp(48px, 8vw, 120px); grid-template-columns: minmax(250px, .65fr) minmax(0, 1.35fr); }
.faq-intro { align-self: start; position: sticky; top: 100px; }
.faq-intro a { color: #c5afff; }
.faq-list { border-top: 1px solid #393448; }
.faq-list details { border-bottom: 1px solid #393448; }
.faq-list summary { color: #e8e4ee; cursor: pointer; font-size: 16px; font-weight: 700; list-style: none; padding: 23px 42px 23px 0; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { color: #aa8aff; content: '+'; font-size: 23px; font-weight: 400; position: absolute; right: 8px; top: 17px; }
.faq-list details[open] summary::after { content: '\2212'; }
.faq-list details p { color: #aaa6b5; font-size: 14px; line-height: 1.7; margin: -5px 42px 22px 0; }
.faq-list summary:hover { color: #c5afff; }
.explain-cta { border-bottom: 0; }

@media (max-width: 940px) {
  .explain-hero-inner, .explain-split, .bridge-grid, .faq-layout, .install-layout { grid-template-columns: 1fr; }
  .explain-hero h1 { max-width: 16ch; }
  .idea-map { max-width: 620px; }
  .workflow-grid, .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-intro { position: static; }
}

@media (max-width: 600px) {
  .explain-hero, .explain-section { padding: 68px 0; }
  .explain-hero h1 { font-size: 39px; letter-spacing: -1.5px; }
  .explain-hero-inner { gap: 42px; }
  .workflow-grid, .capability-grid { grid-template-columns: 1fr; }
  .workflow-card { min-height: 0; }
  .workflow-card > span { margin-bottom: 28px; }
  .faq-list summary { font-size: 15px; }
}