html[data-xboard-page="home"] { scroll-behavior: smooth; scroll-padding-top: 30px; color-scheme: light; }
html[data-xboard-page="home"] body { margin: 0; background: #f3f9ff; }
html[data-xboard-page="home"] #app, html[data-xboard-page="panel"] .capy-home { display: none; }
.capy-home { --capy-blue: #1673ff; --capy-ink: #101c3d; --capy-muted: #55627a; position: relative; isolation: isolate; overflow: clip; color: var(--capy-ink); font: 15px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: linear-gradient(180deg, #e9f5ff 0%, #f3f9ff 48%, #fff 85%); }
.capy-home *, .capy-home *::before, .capy-home *::after { box-sizing: border-box; }
.capy-home a { color: inherit; text-decoration: none; }
.capy-home button { font: inherit; }
.capy-home svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.capy-home h1, .capy-home h2, .capy-home h3, .capy-home p { margin: 0; }
.capy-home a:focus-visible, .capy-home button:focus-visible, .capy-home summary:focus-visible { outline: 3px solid #0754bf; outline-offset: 5px; border-radius: 5px; }
.capy-home .capy-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.capy-container { width: min(1320px, calc(100% - 96px)); margin-inline: auto; }
.capy-skip { position: absolute; left: 20px; top: -80px; z-index: 10; padding: 12px 24px; background: white; }
.capy-skip:focus { top: 12px; }
.capy-hero-scene { position: absolute; z-index: -1; inset: 0 0 auto; height: 700px; pointer-events: none; }
.capy-hero-scene img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center bottom; }
.capy-hero-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #f3f9ff, transparent 15%), linear-gradient(90deg, #eff8ff66, transparent 55%); }
.capy-header { height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 30px; position: relative; z-index: 3; }
.capy-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: 27px; font-weight: 800; letter-spacing: .02em; }
.capy-brand img { object-fit: contain; }
.capy-nav { display: flex; align-items: center; gap: 30px; }
.capy-nav a { padding: 15px 0; position: relative; font-weight: 500; white-space: nowrap; }
.capy-nav a:hover, .capy-nav .is-current { color: #0065ed; }
.capy-nav .is-current::after { position: absolute; content: ""; height: 2px; inset: auto 0 6px; background: var(--capy-blue); }
.capy-header-actions { display: flex; align-items: center; gap: 12px; }
.capy-button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 42px; padding: 8px 26px; background: var(--capy-blue); color: white !important; border: 1px solid var(--capy-blue); border-radius: 999px; font-weight: 600; white-space: nowrap; transition: background .2s, box-shadow .2s, transform .2s; }
.capy-button:hover { background: #075fe5; box-shadow: 0 7px 24px #1473ff30; transform: translateY(-2px); }
.capy-button-outline { color: #0762db !important; background: #ffffff20; }
.capy-button-outline:hover { background: #ffffff80; }
.capy-menu { display: none; width: 42px; height: 42px; padding: 10px; border: 1px solid #9fc5f2; border-radius: 12px; background: #ffffffb0; cursor: pointer; }
.capy-menu span { display: block; height: 2px; background: var(--capy-ink); margin: 4px 0; }
.capy-hero { min-height: 514px; display: flex; align-items: flex-start; padding-top: 43px; }
.capy-hero-copy { position: relative; max-width: 620px; padding-left: 9px; }
.capy-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: #0667e7; background: #badbffb8; padding: 5px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: .04em; }
.capy-eyebrow span { width: 3px; height: 3px; border-radius: 50%; background: #1673ff; }
.capy-home h1 { font-size: clamp(40px, 4.15vw, 62px); line-height: 1.3; letter-spacing: -.03em; font-weight: 850; margin: 24px 0 18px; }
.capy-home h1 em { font-style: normal; color: var(--capy-blue); }
.capy-hero-lead { font-size: 21px; letter-spacing: .13em; color: #43506b; }
.capy-hero-description { margin-top: 3px !important; font-size: 17px; color: #4b5870; }
.capy-hero-actions { display: flex; gap: 28px; align-items: center; margin: 30px 0 28px; }
.capy-start { font-size: 21px; min-height: 60px; min-width: 210px; box-shadow: 0 9px 30px #1673ff22; }
.capy-text-link { color: #2363b9 !important; font-weight: 500; }
.capy-text-link:hover { color: #074b9f !important; }
.capy-text-link span { display: inline-block; margin-left: 6px; }
.capy-assurances { display: flex; align-items: center; flex-wrap: wrap; gap: 19px; margin: 0; padding: 0; list-style: none; color: #415471; font-size: 13px; }
.capy-assurances li { display: flex; align-items: center; gap: 6px; }
.capy-assurances svg { padding: 3px; width: 17px; height: 17px; color: white; background: var(--capy-blue); border-radius: 50%; stroke-width: 2.5; }
.capy-highlights { display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr; gap: 20px; padding: 25px 40px; background: #ffffffeb; border: 1px solid white; border-radius: 27px; box-shadow: 0 12px 40px #5d8cba09; backdrop-filter: blur(15px); }
.capy-highlights > div { display: flex; align-items: center; gap: 20px; justify-content: center; }
.capy-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #e0eeff; color: var(--capy-blue); flex-shrink: 0; }
.capy-icon svg { width: 33px; height: 33px; stroke-width: 1.85; }
.capy-highlights p { display: flex; flex-direction: column; }
.capy-highlights strong { font-size: 21px; line-height: 1.5; }
.capy-highlights p > span { color: var(--capy-muted); font-size: 13px; }
.capy-features { padding-top: 42px; padding-bottom: 75px; }
.capy-section-heading { text-align: center; margin-bottom: 28px; }
.capy-home h2 { font-size: 28px; line-height: 1.4; font-weight: 750; letter-spacing: -.02em; }
.capy-section-heading p { margin-top: 8px; color: var(--capy-muted); }
.capy-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.capy-feature-grid article { display: flex; align-items: flex-start; gap: 18px; padding: 27px 21px; border-radius: 23px; background: #ffffffeb; }
.capy-feature-grid .capy-icon { width: 55px; height: 55px; }
.capy-feature-grid .capy-icon svg { width: 29px; height: 29px; }
.capy-home h3 { font-size: 17px; font-weight: 700; line-height: 1.5; }
.capy-feature-grid p { color: var(--capy-muted); font-size: 13px; line-height: 1.8; margin-top: 9px; }
.capy-guide { padding: 30px 0 84px; }
.capy-kicker { color: #3378cc; letter-spacing: .18em; font-size: 11px; font-weight: 700; display: block; margin-bottom: 12px; }
.capy-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; list-style: none; padding: 20px 35px 0; margin: 0; }
.capy-steps li { position: relative; }
.capy-step-number { display: block; margin-bottom: 12px; color: #8fbafa; font-size: 38px; line-height: 1.4; font-weight: 300; letter-spacing: -.04em; }
.capy-steps li + li::before { content: ""; height: 1px; width: 100px; background: #c6dcf6; position: absolute; top: 29px; left: -120px; }
.capy-steps h3 { font-size: 20px; }
.capy-steps p { margin-top: 12px; color: var(--capy-muted); max-width: 315px; }
.capy-steps a { display: inline-flex; align-items: center; gap: 10px; color: #1267dc; margin-top: 20px; font-weight: 500; }
.capy-steps a:hover { text-decoration: underline; }
.capy-steps a svg { width: 15px; height: 15px; }
.capy-help { display: grid; grid-template-columns: 1fr 1.65fr; gap: 65px; padding: 55px 35px 80px; border-top: 1px solid #e0ebf8; }
.capy-help-intro p { margin: 17px 0 22px; color: var(--capy-muted); }
.capy-faq details { border-bottom: 1px solid #dfeaf5; }
.capy-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; font-size: 16px; font-weight: 600; list-style: none; }
.capy-faq summary::-webkit-details-marker { display: none; }
.capy-faq summary span { color: #3986e8; font-size: 25px; font-weight: 300; line-height: 1; }
.capy-faq details[open] summary span { transform: rotate(45deg); }
.capy-faq details p { padding: 0 30px 22px 0; color: var(--capy-muted); line-height: 1.9; font-size: 14px; }
.capy-faq p a { color: #1267dc; text-decoration: underline; text-underline-offset: 3px; }
.capy-final-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 42px 52px; border-radius: 24px; background: #eaf4ff; }
.capy-final-cta h2 { font-size: 30px; }
.capy-final-cta p { margin-top: 9px; color: var(--capy-muted); }
.capy-final-cta .capy-button { min-height: 54px; padding-inline: 30px; }
.capy-footer { padding-block: 40px; display: flex; align-items: center; gap: 24px; font-size: 13px; color: var(--capy-muted); }
.capy-footer .capy-brand { font-size: 19px; color: var(--capy-ink); }
.capy-footer > div { display: flex; gap: 24px; margin-left: auto; }
.capy-footer a:hover { color: var(--capy-blue); }
@media (min-width: 1700px) { .capy-hero-scene { height: 760px; } .capy-hero { min-height: 575px; padding-top: 65px; } }
@media (max-width: 1200px) { .capy-container { width: calc(100% - 64px); } .capy-header { gap: 20px; } .capy-nav { gap: 22px; } .capy-brand { font-size: 24px; } .capy-button { padding-inline: 22px; } .capy-highlights { padding-inline: 22px; gap: 16px; } .capy-highlights > div { gap: 12px; } .capy-highlights .capy-icon { width: 52px; height: 52px; } .capy-highlights strong { font-size: 19px; } .capy-highlights p > span { font-size: 12px; } .capy-feature-grid { grid-template-columns: repeat(2, 1fr); } .capy-feature-grid article { padding: 25px 30px; } }
@media (max-width: 960px) { .capy-container { width: calc(100% - 48px); } .capy-header { height: 80px; flex-wrap: wrap; } .capy-nav { order: 3; display: flex; width: 100%; justify-content: center; gap: 24px; background: #f5faff; border-radius: 15px; padding: 0 12px; } .capy-home[data-enhanced] .capy-nav { display: none; position: absolute; top: 73px; left: 0; box-shadow: 0 14px 24px #244a7318; } .capy-home[data-enhanced] .capy-nav.is-open { display: flex; } .capy-home[data-enhanced] .capy-menu { display: block; } .capy-home:not([data-enhanced]) .capy-header { height: auto; padding-block: 16px; } .capy-hero { min-height: 530px; padding-top: 48px; } .capy-home h1 { font-size: 46px; } .capy-hero-scene { height: 680px; } .capy-hero-scene img { object-position: 60% bottom; } .capy-hero-scene::after { background: linear-gradient(0deg, #f3f9ff, transparent 15%), linear-gradient(90deg, #f0f8ffd9, #f0f8ff70 42%, transparent 70%); } .capy-hero-lead { font-size: 18px; } .capy-hero-description { font-size: 15px; } .capy-highlights { grid-template-columns: 1fr 1fr; gap: 25px; padding: 27px; } .capy-highlights > div { justify-content: flex-start; } .capy-highlights strong { font-size: 20px; } .capy-highlights p > span { font-size: 13px; } .capy-steps { gap: 36px; padding-inline: 10px; } .capy-steps li + li::before { display: none; } .capy-help { gap: 35px; padding-inline: 10px; } .capy-footer { flex-wrap: wrap; gap: 14px; } .capy-footer > div { gap: 18px; } }
@media (max-width: 640px) { .capy-container { width: calc(100% - 36px); } .capy-header { height: 76px; gap: 12px; } .capy-brand { font-size: 22px; gap: 6px; } .capy-brand img { width: 39px; height: 39px; } .capy-header-actions { gap: 10px; } .capy-header-actions .capy-button { min-height: 36px; padding: 5px 16px; font-size: 13px; } .capy-register { display: none; } .capy-menu { display: none; width: 36px; height: 36px; padding: 7px; } .capy-nav { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 18px; } .capy-nav a { padding: 10px 0; } .capy-nav .is-current::after { display: none; } .capy-hero { padding-top: 22px; min-height: 655px; } .capy-hero-copy { width: 100%; padding: 0; } .capy-eyebrow { font-size: 12px; padding: 4px 13px; gap: 9px; } .capy-home h1 { font-size: clamp(34px, 9.4vw, 48px); margin: 20px 0 14px; line-height: 1.35; } .capy-hero-lead { font-size: 17px; letter-spacing: .06em; } .capy-hero-description { font-size: 13px; } .capy-hero-actions { margin: 23px 0 20px; gap: 23px; } .capy-start { min-height: 50px; min-width: 174px; font-size: 18px; } .capy-text-link { font-size: 13px; } .capy-assurances { font-size: 11px; gap: 8px 13px; max-width: 350px; } .capy-assurances svg { width: 14px; height: 14px; } .capy-hero-scene { top: 335px; height: 410px; } .capy-hero-scene img { object-fit: cover; object-position: 78% bottom; } .capy-hero-scene::after { background: linear-gradient(180deg, #eaf5ff, transparent 23%, transparent 83%, #f3f9ff); } .capy-highlights { padding: 22px 16px; border-radius: 20px; gap: 23px 15px; } .capy-highlights > div { gap: 9px; } .capy-highlights .capy-icon { width: 41px; height: 41px; } .capy-highlights .capy-icon svg { width: 24px; height: 24px; } .capy-highlights strong { font-size: 15px; } .capy-highlights p > span { font-size: 11px; line-height: 1.6; } .capy-home h2 { font-size: 24px; } .capy-section-heading p { font-size: 13px; } .capy-features { padding-top: 38px; padding-bottom: 30px; } .capy-feature-grid { gap: 12px; } .capy-feature-grid article { padding: 22px 16px; flex-direction: column; gap: 14px; border-radius: 18px; } .capy-home h3 { font-size: 15px; } .capy-feature-grid .capy-icon { width: 44px; height: 44px; } .capy-feature-grid .capy-icon svg { width: 25px; height: 25px; } .capy-feature-grid p { font-size: 12px; margin-top: 7px; } .capy-feature-grid br { display: none; } .capy-guide { padding: 35px 0 45px; } .capy-section-heading { margin-bottom: 24px; } .capy-steps { grid-template-columns: 1fr; padding: 0 10px; gap: 27px; } .capy-steps li { padding-left: 59px; } .capy-step-number { position: absolute; left: 0; top: -5px; font-size: 32px; } .capy-steps h3 { font-size: 18px; } .capy-steps p { font-size: 13px; margin-top: 8px; max-width: none; } .capy-steps a { font-size: 13px; margin-top: 10px; } .capy-help { grid-template-columns: 1fr; padding: 35px 8px 45px; gap: 20px; } .capy-help-intro p { font-size: 14px; margin: 12px 0; } .capy-help-intro br { display: none; } .capy-faq summary { font-size: 14px; } .capy-final-cta { padding: 29px 24px; flex-direction: column; align-items: flex-start; gap: 23px; } .capy-final-cta h2 { font-size: 23px; } .capy-final-cta p { font-size: 13px; } .capy-final-cta .capy-button { min-height: 46px; font-size: 14px; } .capy-footer { padding-block: 30px; column-gap: 15px; row-gap: 12px; } .capy-footer .capy-brand { font-size: 17px; } .capy-footer .capy-brand img { width: 30px; height: 30px; } .capy-footer p { font-size: 11px; } .capy-footer > div { margin: 0; width: 100%; justify-content: space-between; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { html[data-xboard-page="home"] { scroll-behavior: auto; } .capy-home * { transition: none !important; } }