.home { text-align: left; color: #273449; background: #fbfcfe; font-family: "Segoe UI", "Microsoft JhengHei", sans-serif; }
.home *, .home *::before, .home *::after { box-sizing: border-box; }
.home a { color: #283e9a; text-underline-offset: .25em; }
.home a:focus-visible, .home button:focus-visible, .home input:focus-visible, .home textarea:focus-visible { outline: 3px solid #bd7900; outline-offset: 5px; }
.home .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 10; background: white; padding: 1rem; }
.home .skip-link:focus { top: 1rem; }
.site-header { max-width: 1180px; margin: auto; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-size: 1.3rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.brand span { display: block; font-size: .65rem; letter-spacing: .22em; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 12px 25px; }
.site-header nav a { text-decoration: none; font-size: .95rem; font-weight: 600; }
.site-header nav a:hover, .home .text-link:hover { text-decoration: underline; }
.home .hero { background: linear-gradient(120deg, #17235e, #334aae); color: white; padding: 76px 28px; }
.hero-inner { max-width: 1124px; margin: auto; }
.home .eyebrow { margin: 0 0 14px; color: #4358a0; font-size: .85rem; font-weight: 700; letter-spacing: .12em; }
.home .hero .eyebrow { color: #ced8ff; }
.home h1 { margin: 0 0 24px; color: white; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.3; letter-spacing: -.03em; }
.hero-description { max-width: 610px; font-size: 1.15rem; line-height: 1.9; color: #eef1ff; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.home .button { padding: 13px 23px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.home .primary { background: #ffda7b; color: #17235e; }
.home .secondary { color: white; border: 1px solid #a8b7f1; }
.hero-note { color: #d5ddf9; margin: 24px 0 0; font-size: .88rem; }
.section-wrap { max-width: 1180px; margin: auto; padding: 72px 28px; }
.home h2 { font-size: clamp(1.65rem, 3vw, 2.15rem); line-height: 1.45; margin: 0 0 16px; color: #192653; }
.home h3 { color: #192653; font-size: 1.18rem; line-height: 1.6; margin: 16px 0 10px; }
.section-intro { color: #59657a; max-width: 760px; margin: 0 0 32px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.card { padding: 28px; background: white; border: 1px solid #e0e5ef; border-radius: 12px; display: flex; flex-direction: column; }
.card p { color: #59657a; margin: 0 0 24px; line-height: 1.85; }
.card-number { font-size: .78rem; color: #596780; letter-spacing: .05em; }
.home .text-link { font-weight: 700; text-decoration: none; }
.card .text-link { margin-top: auto; }
.platform { background: #edf1fc; }
.platform-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; }
.platform h3 { margin-top: 0; font-size: 1.4rem; }
.platform p { line-height: 1.9; }
.tool-label { color: #385094; background: #edf1fc; padding: 5px 10px; border-radius: 5px; font-size: .75rem; font-weight: 700; align-self: flex-start; }
.article-section { background: #f0f3f8; }
.all-articles { display: inline-block; margin-top: 28px; }
.home form { max-width: 760px; margin: 32px 0 20px; padding: 32px; border: 1px solid #e0e5ef; box-shadow: none; }
.home form label, .home form input, .home form textarea { display: block; width: 100%; }
.home form input, .home form textarea { margin-top: 8px; padding: 12px; }
.home .form-note { font-size: .88rem; color: #59657a; }
.contact-email { overflow-wrap: anywhere; }
.home footer { margin-top: 0; padding: 40px 28px; text-align: center; background: #17235e; }
.home footer a { color: #e2e8ff; overflow-wrap: anywhere; }
.home footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 24px; }
.home footer p { margin: 12px 0 20px; }
@media (max-width: 800px) { .site-header { align-items: flex-start; flex-direction: column; gap: 15px; } .cards { grid-template-columns: 1fr; } .platform-layout { grid-template-columns: 1fr; gap: 24px; } .section-wrap { padding: 48px 22px; } .home .hero { padding: 55px 22px; } .home form { padding: 22px; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }