.page { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.topnav { display: flex; align-items: center; padding: 20px 0; }
.hero { position: relative; padding: 104px 0 88px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero--single { grid-template-columns: minmax(0, 1fr); padding: 120px 0 112px; }
.hero__glow { position: absolute; left: -200px; top: -120px; width: 900px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124,58,237,.22), rgba(124,58,237,0)); pointer-events: none; }
.hero__body { position: relative; display: flex; flex-direction: column; gap: 22px; }
.hero__kicker { font-size: 14px; font-weight: 500; color: #A78BFA; }
.hero h1 { font-size: 60px; line-height: 60px; letter-spacing: -1.2px; margin: 0; max-width: 760px; }
.hero__lead { font-size: 22px; line-height: 30px; color: #BCBCBC; margin: 0; max-width: 680px; text-wrap: pretty; }
.hero__actions { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.meta { font-size: 14px; color: #8A8A8A; }
.sections { display: flex; flex-direction: column; gap: 16px; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.example { display: grid; grid-template-columns: 1fr 36px 1fr; align-items: center; gap: 8px; }
.example__side { display: flex; flex-direction: column; gap: 3px; }
.example__label { font-size: 13px; color: #8A8A8A; }
.example__label--after { color: #A78BFA; }
.example__value { font-size: 24px; font-weight: 600; letter-spacing: -.3px; white-space: nowrap; }
.example__value--before { color: #BCBCBC; }
.steps { display: flex; flex-direction: column; gap: 16px; }
.step { display: flex; gap: 14px; align-items: baseline; }
.step__num { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; border-radius: 15px; background: #262626; font-size: 14px; font-weight: 600; }
.mono { font-family: ui-monospace, "JetBrains Mono", Consolas, monospace; font-size: 15px; background: #1F1F1F; border: 1px solid #2E2E2E; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.footer { display: flex; justify-content: space-between; margin-top: 80px; padding: 24px 0 40px; border-top: 1px solid #262626; font-size: 14px; color: #8A8A8A; }
@media (max-width: 900px) { .hero, .two-col { grid-template-columns: minmax(0, 1fr); } .hero h1 { font-size: 40px; line-height: 44px; letter-spacing: -.8px; } }

/* Pasek błędu Blazora — Blazor sam przełącza display na 'block' */
#blazor-error-ui { position: fixed; left: 0; bottom: 0; width: 100%; padding: 12px 24px; background: #2E1065; color: #EEEEEE; box-shadow: 0 -1px 2px rgba(0,0,0,.4); z-index: 1000; }
#blazor-error-ui a { color: #C4B5FD; }

/* Tabela przykładów i drugorzędne CTA — własne klasy, bez gołych klas Bootstrapa */
.sections table { width: 100%; border-collapse: collapse; }
.sections th { font-size: 13px; color: #8A8A8A; font-weight: 500; text-align: left; padding: 4px 0; }
.sections td { padding: 14px 0; border-top: 1px solid #262626; }
.card-lead { font-size: 16px; line-height: 24px; color: #BCBCBC; margin: 0; }
.cta-secondary { display: inline-flex; align-items: center; padding: 14px 24px; border: 1px solid #262626; border-radius: 8px; background: #171717; color: #EEEEEE; font-size: 17px; font-weight: 500; text-decoration: none; }
.card-actions { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.cta-primary { display: inline-flex; align-items: center; justify-content: center; padding: 14px 24px; border-radius: 8px; background: var(--bs-primary, #7C3AED); color: #FFFFFF; font-size: 17px; font-weight: 500; line-height: 24px; text-decoration: none; }
.cta-primary:hover { background: #6D28D9; color: #FFFFFF; text-decoration: none; }
.cta-secondary:hover, .cta-secondary:focus-visible { background: #1F1F1F; color: #EEEEEE; }