:root {
  --ink: #172b4d;
  --text: #63718a;
  --blue: #4d6bfe;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: #f1f6fc;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #f1f6fc; }
a { color: inherit; }
.siteHeader {
  position: absolute; z-index: 10; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1280px, calc(100% - 48px)); height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.siteBrand { display: flex; align-items: center; gap: 8px; color: #4b6ff1; font-size: 21px; font-weight: 650; text-decoration: none; }
.siteBrand img { width: 30px; height: 25px; object-fit: contain; }
.siteHeader nav { display: flex; align-items: center; gap: 30px; color: #1c2b43; font-size: 14px; }
.siteHeader nav > a { text-decoration: none; }
.locale { height: 32px; padding: 3px; display: flex; align-items: center; border: 1px solid rgba(94,119,157,.16); border-radius: 18px; background: rgba(255,255,255,.25); }
.locale b, .locale i { min-width: 42px; padding: 5px 10px; text-align: center; font-size: 12px; font-style: normal; font-weight: 400; }
.locale b { border-radius: 14px; background: rgba(255,255,255,.58); }
.hero { position: relative; isolation: isolate; height: 100vh; min-height: 720px; overflow: hidden; background: #edf4fb; }
.heroCanvas { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.heroInner {
  position: relative; z-index: 3; visibility: visible; opacity: 1;
  width: min(1280px, calc(100% - 48px)); height: 100%;
  margin: auto; padding-top: 64px; display: grid; grid-template-columns: 676px 493px;
  gap: 111px; align-items: center;
}
.heroCopy { transform: translateY(18px); }
.announcement { display: block; width: 670px; margin: 0 0 32px 12px; color: #6f7d93; font-size: 14px; line-height: 1.7; text-decoration: none; }
.announcement span { color: #7294ff; }
.announcement b { font-weight: 400; }
.hero h1 { margin: 0 0 74px 6px; color: var(--ink); font-size: 48px; line-height: 1.2; font-weight: 450; letter-spacing: 10px; }
.entryGrid { display: grid; grid-template-columns: 326px 326px; gap: 24px; }
.entryCard { height: 130px; padding: 25px 26px; border: 1px solid rgba(255,255,255,.62); border-radius: 20px; background: rgba(255,255,255,.52); text-decoration: none; box-shadow: inset 0 1px rgba(255,255,255,.58); transition: transform .18s ease, background .18s ease; }
.entryCard:hover { transform: translateY(-3px); background: rgba(255,255,255,.7); }
.entryCard strong { display: block; margin-bottom: 7px; color: #3868ce; font-size: 18px; }
.entryCard span { font-size: 14px; line-height: 1.65; }
.productCard { position: relative; display: block; width: 493px; height: 362px; overflow: hidden; border-radius: 18px; background: #154f91; color: #fff; text-decoration: none; box-shadow: 0 16px 40px rgba(42,82,139,.13); }
.productCard canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.productText { position: absolute; z-index: 2; left: 40px; right: 28px; bottom: 46px; display: flex; flex-direction: column; }
.productText strong, .productText b { font-size: 24px; line-height: 1.7; font-weight: 400; }
.productText small { margin-top: 18px; color: rgba(255,255,255,.5); font-size: 13px; }
.messagePage { min-height: 100vh; display: grid; place-items: center; background: #edf4fc; }
.messagePage main { text-align: center; padding: 30px; }
.messagePage img { width: 64px; }
.messagePage h1 { color: var(--ink); }
.messagePage p { margin-bottom: 28px; }
.secondaryAction { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 1px solid #b9c5d8; border-radius: 7px; background: #fff; color: var(--ink); text-decoration: none; font-weight: 600; }
@media (max-width: 1320px) {
  .heroInner { grid-template-columns: minmax(0,676px) minmax(380px,493px); gap: 48px; }
  .entryGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .productCard { width: 100%; }
}
@media (max-width: 1000px) {
  .heroInner { grid-template-columns: 1fr; gap: 34px; padding-top: 116px; padding-bottom: 60px; }
  .heroCopy { transform: none; }
  .announcement { width: auto; margin-left: 0; }
  .productCard { width: 100%; max-width: 493px; }
  .hero h1 { margin-left: 0; margin-bottom: 42px; }
  .entryGrid { max-width: 676px; }
  .siteHeader { width: calc(100% - 32px); }
}
@media (max-width: 620px) {
  .siteBrand { font-size: 16px; }
  .siteBrand img { width: 27px; height: 24px; }
  .siteHeader nav > a { display: none; }
  .heroInner { width: calc(100% - 32px); padding-top: 105px; }
  .announcement { margin-bottom: 24px; font-size: 12px; }
  .hero h1 { font-size: 35px; letter-spacing: 6px; }
  .entryGrid { grid-template-columns: 1fr; }
  .entryCard { height: 112px; border-radius: 16px; }
  .productCard { height: auto; aspect-ratio: 1.36; }
  .productText { left: 24px; bottom: 24px; }
  .productText strong, .productText b { font-size: 19px; }
}