.reacty-public-about { background: #f5f8fb; color: #17324d; }
.reacty-public-about main { overflow: hidden; }
.reacty-public-about .about-hero, .reacty-public-about .about-section, .reacty-public-about .about-capabilities, .reacty-public-about .about-workflow, .reacty-public-about .about-cta { width: min(1120px, calc(100% - 48px)); margin-left: auto; margin-right: auto; }
.reacty-public-about .about-hero { min-height: 540px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 56px; align-items: center; padding: 88px 0 64px; }
.about-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #0874b9; font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 18px; text-transform: uppercase; }
.about-hero h1, .about-section h2, .about-workflow h2, .about-cta h2 { margin: 0; color: #17324d; font-weight: 700; letter-spacing: -.04em; }
.about-hero h1 { max-width: 620px; font-size: clamp(38px, 4.6vw, 58px); line-height: 1.03; }
.about-hero-copy > p:not(.about-eyebrow) { max-width: 585px; margin: 20px 0 0; color: #5d7082; font-size: 17px; line-height: 28px; }
.about-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.about-primary-action, .about-secondary-action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 18px; border-radius: 9px; font-size: 15px; font-weight: 700; line-height: 20px; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.about-primary-action { color: #fff; background: linear-gradient(135deg, #075b9e, #009fc5); box-shadow: 0 10px 24px rgba(0, 116, 177, .2); }.about-primary-action:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0, 116, 177, .27); }.about-secondary-action { color: #075b9e; background: #fff; border: 1px solid #d5e2ed; }.about-secondary-action:hover { color: #034a83; background: #f2f8fc; }
.about-hero-panel { position: relative; min-height: 355px; overflow: hidden; border: 1px solid rgba(171, 211, 235, .9); border-radius: 20px; background: radial-gradient(circle at 62% 36%, rgba(48, 190, 222, .28), transparent 29%), linear-gradient(145deg, #0a3f70, #075b9e 58%, #057eab); box-shadow: 0 24px 54px rgba(12, 68, 108, .22); }.about-orbit { position: absolute; border: 1px solid rgba(207, 245, 255, .38); border-radius: 50%; }.about-orbit-one { width: 320px; height: 320px; top: 18px; left: 55px; }.about-orbit-two { width: 210px; height: 210px; top: 73px; left: 110px; }.about-molecule { position: absolute; top: 126px; left: calc(50% - 46px); display: grid; place-items: center; width: 92px; height: 92px; border: 1px solid rgba(229, 255, 255, .75); border-radius: 28px; color: #fff; background: rgba(255, 255, 255, .16); box-shadow: 0 12px 34px rgba(0, 20, 55, .21); font-size: 40px; backdrop-filter: blur(10px); }.about-signal { position: absolute; padding: 7px 10px; border: 1px solid rgba(225, 255, 255, .5); border-radius: 7px; color: #eafcff; background: rgba(3, 40, 76, .34); font-size: 12px; font-weight: 600; backdrop-filter: blur(8px); }.about-signal-one { top: 55px; right: 45px; }.about-signal-two { top: 228px; left: 28px; }.about-signal-three { bottom: 45px; right: 32px; }.about-panel-caption { position: absolute; right: 24px; bottom: 22px; display: grid; gap: 2px; color: #d7f4fc; font-size: 12px; }.about-panel-caption strong { color: #fff; font-size: 14px; }
.about-section-intro { display: grid; grid-template-columns: minmax(0, .96fr) minmax(300px, .8fr); gap: 80px; align-items: end; padding: 80px 0 32px; border-top: 1px solid #dce7ef; }.about-section h2, .about-workflow h2, .about-cta h2 { font-size: 31px; line-height: 39px; }.about-section-lead { margin: 0; color: #5d7082; font-size: 16px; line-height: 27px; }
.about-capabilities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 32px 0 88px; }.about-capability-card { min-height: 255px; padding: 22px; border: 1px solid #dce7ef; border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(33, 76, 111, .05); }.about-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 34px; border-radius: 10px; color: #0874b9; background: #eaf6fb; font-size: 17px; }.about-capability-card h3 { margin: 0; color: #17324d; font-size: 16px; line-height: 22px; }.about-capability-card p { margin: 10px 0 0; color: #687b8d; font-size: 14px; line-height: 22px; }
.about-workflow { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1fr); gap: 84px; padding: 76px 0; border-top: 1px solid #dce7ef; }.about-workflow-copy > p:not(.about-eyebrow) { margin: 16px 0 0; color: #5d7082; font-size: 16px; line-height: 26px; }.about-workflow-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }.about-workflow-steps li { display: grid; grid-template-columns: 54px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid #dce7ef; }.about-workflow-steps li:first-child { padding-top: 0; }.about-workflow-steps span { color: #0874b9; font-size: 13px; font-weight: 700; }.about-workflow-steps h3 { margin: 0; color: #17324d; font-size: 16px; }.about-workflow-steps p { margin: 6px 0 0; color: #687b8d; font-size: 14px; line-height: 22px; }
.about-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 80px; padding: 38px 42px; border: 1px solid #cfe3ef; border-radius: 16px; background: linear-gradient(110deg, #e7f5fa, #f8fcfd 60%); }.about-cta .about-eyebrow { margin-bottom: 8px; }.about-cta h2 { font-size: 26px; line-height: 34px; }.about-cta p:not(.about-eyebrow) { margin: 7px 0 0; color: #5d7082; font-size: 15px; }
@media (max-width: 900px) { .reacty-public-about .about-hero, .reacty-public-about .about-section, .reacty-public-about .about-capabilities, .reacty-public-about .about-workflow, .reacty-public-about .about-cta { width: min(100% - 32px, 680px); }.reacty-public-about .about-hero { grid-template-columns: 1fr; gap: 32px; min-height: auto; padding: 62px 0 44px; }.about-hero-panel { min-height: 300px; }.about-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 56px; }.about-section-intro, .about-workflow { grid-template-columns: 1fr; gap: 28px; padding: 54px 0 28px; }.about-workflow { padding: 54px 0; }.about-cta { margin-bottom: 48px; }.about-capability-card { min-height: 215px; }.about-icon { margin-bottom: 22px; } }
@media (max-width: 560px) { .reacty-public-about .about-hero, .reacty-public-about .about-section, .reacty-public-about .about-capabilities, .reacty-public-about .about-workflow, .reacty-public-about .about-cta { width: calc(100% - 24px); }.about-hero h1 { font-size: 38px; }.about-hero-copy > p:not(.about-eyebrow) { font-size: 16px; line-height: 25px; }.about-hero-actions, .about-cta { align-items: stretch; flex-direction: column; }.about-primary-action, .about-secondary-action { width: 100%; }.about-hero-panel { min-height: 260px; border-radius: 14px; }.about-orbit-one { width: 260px; height: 260px; left: calc(50% - 130px); top: 0; }.about-orbit-two { width: 168px; height: 168px; left: calc(50% - 84px); top: 46px; }.about-molecule { top: 86px; }.about-signal-one { top: 30px; right: 18px; }.about-signal-two { bottom: 26px; top: auto; left: 18px; }.about-signal-three { display: none; }.about-capabilities { grid-template-columns: 1fr; gap: 10px; }.about-capability-card { min-height: auto; padding: 20px; }.about-section h2, .about-workflow h2, .about-cta h2 { font-size: 26px; line-height: 33px; }.about-cta { padding: 28px 22px; } }