.hero { overflow: hidden; background: #f0faf6; }
.hero-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 48px; padding-top: 56px; padding-bottom: 40px; min-height: 796px; }
.hero-copy { min-width: 0; }
.hero h1 { position: relative; z-index: 1; font-size: clamp(72px, 7.2vw, 104px); letter-spacing: -.072em; line-height: 1.03; font-weight: 850; }
.hero h1 em { font-style: normal; color: #239e83; }
.hero-cta { position: relative; z-index: 2; margin-top: 30px; }
.hero-car { position: relative; width: calc(100% + 56px); height: 322px; margin-top: -38px; margin-left: -30px; pointer-events: none; }
.hero-car img { position: absolute; width: 100%; max-width: none; height: auto; top: -65px; }
.hero-services { display: flex; flex-direction: column; gap: 18px; position: relative; z-index: 3; }
.service-card { display: flex; align-items: center; gap: 26px; flex: 1; background: #fff; border-radius: var(--radius); padding: 32px; min-height: 208px; transition: transform .2s; }
.service-card:hover { transform: translateY(-4px); }
.service-card-mint { background: #c6f5e6; }
.service-card-navy { background: var(--navy); color: #fff; }
.service-icon { display: grid; place-items: center; width: 96px; height: 96px; flex-shrink: 0; color: var(--navy); }
.service-icon svg { width: 72px; height: 72px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.service-icon svg text { fill: currentColor; stroke: none; font: 700 13px Pretendard, sans-serif; text-anchor: middle; }
.service-card-mint svg circle { fill: var(--mint); stroke: var(--mint); }
.service-card-mint svg text { fill: #fff; }
.icon-blue { color: var(--blue); }
.service-card-navy .service-icon { color: #c6f5e6; }
.service-copy { display: flex; flex-direction: column; gap: 10px; }
.service-number { color: var(--muted); font-size: 15px; font-weight: 600; }
.service-copy strong { font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -.065em; font-weight: 800; white-space: nowrap; }
.service-copy > span:last-child { color: var(--muted); font-size: 15px; letter-spacing: -.035em; }
.service-card-navy .service-copy > span { color: #c5d1dc; }
.round-arrow { margin-left: auto; align-self: flex-end; border-radius: 50%; background: var(--surface); color: var(--navy); display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; font-size: 26px; }
.service-card-mint .round-arrow { background: #fff; }
.service-card-navy .round-arrow { background: #c6f5e6; }