:root {
  color-scheme: light;
  --ink: #202935;
  --cream: #faf9f6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; margin: 0; color: var(--ink); background: var(--cream); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }

.site-header { background: #202c39; color: #fff; }
.header-inner { max-width: 1440px; min-height: 66px; padding: 10px 5%; margin: 0 auto; display: flex; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 14px; min-width: max-content; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #fff; }
.brand-mark img { width: 26px; height: 26px; object-fit: contain; }
.brand-name { margin: 0; font-size: 17px; font-weight: 760; letter-spacing: .26em; line-height: 1.2; }
.brand-name span { color: #b3e561; font-weight: 500; letter-spacing: .03em; margin-left: 4px; }
main { display: flex; flex: 1; flex-direction: column; background: radial-gradient(ellipse at 66% 70%, #f2f6e9 0%, #faf9f6 64%); }
.content { position: relative; isolation: isolate; flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 16px 5% 30px; }
.orbit-backdrop { position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: 100vw; overflow: hidden; pointer-events: none; transform: translateX(-50%); }
.orbit { position: absolute; top: 294px; left: 87%; border: 1px solid #b4cda9; border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-outer { width: min(110vw, 1250px); aspect-ratio: 1; opacity: .46; }
.orbit-inner { width: min(72vw, 780px); aspect-ratio: 1; opacity: .7; }
.orbit-dot { position: absolute; z-index: 1; border-radius: 50%; }
.orbit-dot-green { width: 67px; height: 67px; top: 4%; left: 40%; background: #aae463; }
.orbit-dot-coral { width: 44px; height: 44px; right: 8%; bottom: 8%; background: #e7a18c; }
.orbit-core { position: absolute; top: 294px; left: 87%; width: 155px; height: 155px; display: grid; place-items: center; border-radius: 36px; background: #ffffffeb; box-shadow: 0 18px 55px #3c584526; transform: translate(-50%, -50%) rotate(-9deg); }
.orbit-core img { width: 104px; height: 104px; object-fit: contain; transform: rotate(9deg); }
.card-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.service-card { position: relative; min-width: 0; border: 1px solid #e3e2dc; border-radius: 15px; background: #fff; box-shadow: 0 4px 13px #15233508; transition: transform .2s, box-shadow .2s, border-color .2s; }
.service-card:hover, .service-card:focus-within { transform: translateY(-3px); box-shadow: 0 17px 35px #15233514; border-color: #c5cfbc; }
.card-link { position: relative; min-height: 176px; padding: 18px 19px 16px; display: flex; flex-direction: column; align-items: flex-start; }
.card-link:focus-visible { outline: 3px solid #85cb12; outline-offset: 3px; }
.service-icon { width: 49px; height: 49px; display: grid; place-items: center; border-radius: 13px; background: #fff9; }
.service-icon img { display: block; width: 39px; height: 39px; object-fit: contain; }
.tone-ai { background: #fff2eddb; border-color: #f5dbcf; }
.tone-hr { background: #eaf6f3db; border-color: #cfebe2; }
.tone-overtime { background: #f0f6e9db; border-color: #dceacb; }
.tone-invoices { background: #edf5eedb; border-color: #d9e9d9; }
.tone-auth { background: #eef1f4db; border-color: #dbe1e6; }
.tone-recall { background: #f0f3ebdb; border-color: #dfe9d5; }
.tone-ai .service-icon { background: #fff8f2; }
.tone-hr .service-icon { background: #def1ec; }
.tone-overtime .service-icon { background: #273331; }
.tone-invoices .service-icon { background: #e0eee2; }
.tone-auth .service-icon { background: #dfe5e9; }
.tone-recall .service-icon { background: #e1ead7; }
.tone-auth .service-icon img { border-radius: 11px; }
.card-arrow { position: absolute; top: 18px; right: 19px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #d8dce0; background: #fffaf6; border-radius: 50%; font-size: 19px; font-weight: 300; line-height: 1; }
.card-copy { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding-right: 5px; }
.card-copy strong { font-family: Georgia, "Times New Roman", serif; font-size: clamp(20px, 2vw, 25px); letter-spacing: -.04em; line-height: 1.1; }
.card-copy span { color: #55616c; font-size: 12px; line-height: 1.35; }
.card-domain { margin-top: auto; padding-top: 7px; color: #78838a; font-size: 11px; letter-spacing: .015em; }
@media (max-width: 850px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orbit-outer { width: 900px; }
  .orbit-inner { width: 620px; }
  .orbit, .orbit-core { top: 674px; left: 75%; }
}

@media (max-width: 660px) {
  .header-inner { min-height: 60px; }
  .brand { gap: 9px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-mark img { width: 23px; height: 23px; }
  .brand-name { font-size: 13px; letter-spacing: .14em; }
  .content { padding-top: 12px; padding-bottom: 25px; }
  .orbit-outer { width: 650px; }
  .orbit-inner { width: 390px; }
  .orbit { top: 45%; left: 50%; }
  .orbit-dot-green { width: 40px; height: 40px; top: 8%; left: 12%; }
  .orbit-dot-coral { width: 30px; height: 30px; right: 9%; bottom: 16%; }
  .orbit-core { display: none; }
  .card-grid { grid-template-columns: 1fr; gap: 9px; }
  .card-link { min-height: 82px; padding: 13px; flex-direction: row; align-items: center; gap: 13px; }
  .service-icon { width: 49px; height: 49px; flex: 0 0 auto; }
  .service-icon img { width: 39px; height: 39px; }
  .card-copy { margin-top: 0; }
  .card-copy strong { font-size: 19px; }
  .card-copy span { font-size: 12px; }
  .card-domain, .card-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .service-card { transition: none; }
}