/* FINBRAIN 메인 페이지 — 기존 구성 + 고급화 */
:root {
  --ink: #0a1630;
  --ink-2: #06101f;
  --paper: #f4f6fa;
  --slate: #5b677a;
  --brass: #b89553;
  --brass-soft: #e3cf9f;
  --hair: #dde3ec;
}
body.home { background: #fff; font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; color: var(--ink); }
.serif { font-family: "Noto Serif KR", "Nanum Myeongjo", serif; font-weight: 600; letter-spacing: -.015em; }
.home .wrap { max-width: 1080px; }

/* 헤더 */
.home .top { background: var(--ink-2); border-bottom: 1px solid rgba(255,255,255,.06); }
.home .nav a { color: #c3cee2; font-size: 14.5px; }
.home .nav a.on { border-bottom-color: var(--brass); }

/* 히어로 */
.home .hero { position: relative; overflow: hidden; padding: 112px 0 120px; background:
    radial-gradient(900px 480px at 88% 0%, rgba(184,149,83,.20), transparent 62%),
    radial-gradient(800px 600px at 0% 100%, rgba(52,96,178,.22), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); }
.home .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(227,207,159,.55), transparent); }
.home .hero h1 { font-size: clamp(34px, 5.8vw, 64px); line-height: 1.25; margin: 0 0 26px; }
.home .hero p { font-size: clamp(16px, 1.7vw, 18.5px); line-height: 1.8; color: #bcc8dd; max-width: 600px; }
.home .hero .en { margin-top: 14px; font-size: 14px; color: #8494b0; }
.h-actions { margin-top: 38px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; }
.btn.solid { background: #fff; color: var(--ink); }
.btn.line { border: 1px solid rgba(227,207,159,.55); color: #f3e7c8; }
.btn:focus-visible { outline: 2px solid var(--brass-soft); outline-offset: 3px; }

/* 섹션 공통 */
.home section { padding: 96px 0; border-bottom: 0; }
.home section + section { border-top: 1px solid var(--hair); }
.home h2 { font-size: clamp(26px, 3.2vw, 36px); margin: 0 0 12px; }
.home .lead { color: var(--slate); font-size: 16px; margin: 0 0 44px; max-width: 620px; line-height: 1.7; }

/* 우리가 하는 일 */
.home .why { background: var(--paper); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why-item { background: #fff; border: 1px solid var(--hair); border-radius: 20px; padding: 30px 28px 32px; }
.why-item .who { display: inline-block; font-size: 13px; font-weight: 700; color: var(--brass); margin-bottom: 18px; }
.why-item h3 { font-size: 21px; line-height: 1.45; margin: 0 0 12px; letter-spacing: -.01em; }
.why-item p { margin: 0; color: #48536a; font-size: 15.5px; line-height: 1.75; }

/* 서비스 카드 */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc { display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: 22px; overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.svc:hover { box-shadow: 0 22px 50px -26px rgba(10,22,48,.45); transform: translateY(-2px); }
.svc:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.svc .pic { aspect-ratio: 4 / 3; background: var(--paper); overflow: hidden; }
.svc .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc .pic.house img { object-position: 50% 34%; }
.svc .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.svc .kind { font-size: 13px; color: var(--slate); }
.svc h3 { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.svc p { margin: 0; color: #48536a; font-size: 15px; line-height: 1.7; }
.svc .go { margin-top: auto; padding-top: 12px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.svc .go span { border-bottom: 2px solid var(--brass); padding-bottom: 2px; }

/* 회사 정보 */
.h-company dl { display: grid; grid-template-columns: 160px 1fr; margin: 0; border-top: 1px solid var(--hair); max-width: 760px; }
.h-company dt, .h-company dd { padding: 18px 0; border-bottom: 1px solid var(--hair); margin: 0; font-size: 15.5px; }
.h-company dt { color: var(--slate); }
.h-company dd small { display: block; color: var(--slate); font-size: 14px; margin-top: 2px; }
.h-company dd a { color: var(--ink); }

.home footer { background: var(--ink-2); }

@media (max-width: 860px) {
  .why-grid, .svc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .home .hero { padding: 72px 0 84px; }
  .home section { padding: 64px 0; }
  .home .lead { margin-bottom: 30px; }
  .h-company dl { grid-template-columns: 1fr; }
  .h-company dt { padding-bottom: 0; border-bottom: 0; }
  .h-company dd { padding-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .svc { transition: none; } .svc:hover { transform: none; } }
.svc .pic.coin img { object-position: 50% 78%; }