:root { color-scheme: light; --paper: #f6f7f2; --ink: #203c32; --muted: #627168; --line: #dce3d8; --accent: #315941; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #d8e7b0; color: var(--ink); }
.site-shell { max-width: 1280px; min-height: 100svh; margin: auto; padding: 0 56px; display: flex; flex-direction: column; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 650; letter-spacing: .04em; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; background: var(--accent); font-size: 21px; }
.header-note { color: var(--muted); font-size: 12px; letter-spacing: .06em; }
main { flex: 1; display: grid; place-items: center; padding: 70px 0 78px; }
.intro { width: 100%; max-width: 660px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 28px; color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .15em; }
.eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: #63854b; }
h1 { font-size: clamp(44px, 6.2vw, 76px); font-weight: 650; line-height: 1.25; letter-spacing: -.055em; margin: 0; }
h1 > span { color: #647c43; }
.description { margin: 26px 0 36px; color: var(--muted); font-size: 15px; line-height: 1.9; }
.destination-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 25px 26px; background: #eaf0e2; border: 1px solid #d9e2cf; border-radius: 18px; }
.destination-info { display: grid; gap: 5px; }
.destination-label { font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.destination-url { font-size: 24px; font-weight: 600; letter-spacing: -.04em; }
.primary-link { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 34px; padding: 0 24px; border: 0; background: var(--accent); color: #fff; white-space: nowrap; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, transform .15s, opacity .15s; }
.primary-link > span { font-size: 23px; font-weight: 400; }
.primary-link:hover { background: #254833; transform: translateY(-1px); }
.primary-link:active { transform: translateY(0); }
.primary-link:focus-visible { outline: 3px solid #4c7040; outline-offset: 5px; }
.primary-link:disabled { cursor: wait; opacity: .62; transform: none; }
.navigation-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.order-note { margin: 8px 0 0; color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .03em; }
.site-footer { padding: 23px 0 27px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 11px; }
.integration-status { display: inline-flex; align-items: center; gap: 7px; }
.integration-status > span { width: 6px; height: 6px; background: #879084; border-radius: 50%; }
.integration-status[data-state="active"] > span { background: #4f8a49; box-shadow: 0 0 0 4px #dcebd8; }
.integration-status[data-state="busy"] > span { background: #b5893d; }
.integration-status[data-state="error"] > span { background: #b6534f; }
@media (max-width: 600px) {
  .site-shell { padding: 0 24px; }
  .site-header { padding: 24px 0; }
  main { padding: 58px 0 64px; }
  .eyebrow { margin-bottom: 24px; }
  h1 { font-size: clamp(42px, 11vw, 60px); }
  .description { font-size: 13px; margin: 24px 0 30px; }
  .destination-card { padding: 22px; align-items: stretch; flex-direction: column; gap: 20px; }
  .primary-link { justify-content: space-between; }
  .navigation-note { font-size: 10px; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 10px; padding: 20px 0; }
}
@media (prefers-reduced-motion: reduce) { .primary-link { transition: none; } }