.hero { min-height: 760px; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden;
    background: radial-gradient(700px 360px at 50% 6%, var(--blue-soft) 0%, transparent 68%), #fff; }
.hero .wrap { padding: 40px 0; }
.hero h1 { font-size: clamp(44px, 6.6vw, 100px); line-height: 1.04; letter-spacing: -0.05em; }
.hero h1 .g { background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .sub { margin-top: 26px; font-size: clamp(15px,1.3vw,18px); color: var(--ink-3); font-weight: 600; }
.hero .cta-row { display:flex; gap:14px; justify-content:center; margin-top: 38px; flex-wrap:wrap; }
.hero .scroll { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); color:var(--ink-4); font-size:11.5px; font-weight:700; letter-spacing:.1em; display:flex; flex-direction:column; align-items:center; gap:8px; }
.hero .scroll i { width:1px; height:32px; background:linear-gradient(var(--ink-4),transparent); }
@media (max-width: 720px) { .hero { min-height: 620px; } }

.lead-phase { position: relative; overflow: hidden; border-radius: var(--r-lg);
    background: var(--grad-blue); color: #fff; padding: 52px 56px; box-shadow: var(--shadow-lg); }
.lead-phase .orb { position:absolute; border-radius:50%; }
.lead-phase .grid2 { display:grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items:center; position:relative; }
.lead-phase .step-flag { display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:13px; letter-spacing:.06em;
    background: rgba(255,255,255,.16); padding:7px 14px; border-radius:999px; white-space:nowrap; }
.lead-phase h3 { color:#fff; font-size: clamp(26px,2.8vw,38px); margin-top:18px; }
.lead-phase .say { font-size:17px; color:rgba(255,255,255,.9); margin-top:14px; line-height:1.7; }
.lead-phase ul { margin:22px 0 0; padding:0; list-style:none; display:grid; gap:11px; }
.lead-phase li { display:flex; gap:11px; align-items:flex-start; font-size:15px; color:rgba(255,255,255,.95); }
.lead-phase li svg { width:20px; height:20px; flex:none; margin-top:2px; color:#bfe0c9; }
.lead-phase .out { margin-top:26px; display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--blue-700);
    font-weight:800; font-size:14px; padding:11px 18px; border-radius:12px; }
.voice-card { background:#fff; border-radius:18px; padding:20px; box-shadow: var(--shadow-lg); color:var(--ink); }
.voice-card .q { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); align-items:flex-start; }
.voice-card .q:last-child{border:none}
.voice-card .q span.a { flex:none; width:30px; height:30px; border-radius:9px; background:var(--blue-soft); color:var(--blue-600); display:grid; place-items:center; font-weight:800; font-size:13px; }
.voice-card .q p { font-size:14px; color:var(--ink-2); line-height:1.55; }

.timeline { margin-top: 26px; position: relative; }
.tl-item { display:grid; grid-template-columns: 88px 1fr; position:relative; }
.tl-rail { position:relative; display:flex; flex-direction:column; align-items:center; }
.tl-dot { width:56px; height:56px; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
    display:grid; place-items:center; color:var(--blue); z-index:1; }
.tl-dot svg { width:26px; height:26px; }
.tl-line { flex:1; width:2px; background:linear-gradient(var(--blue-soft),var(--mint-soft)); margin:4px 0; }
.tl-item:last-child .tl-line { display:none; }
.tl-body { padding: 0 0 40px 28px; }
.tl-no { font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--ink-4); }
.tl-body h4 { font-size:22px; margin-top:4px; }
.tl-body .desc { color:var(--ink-3); font-size:15px; margin-top:8px; line-height:1.7; max-width:560px; }
.tl-do { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.tl-do span { font-size:13px; font-weight:600; color:var(--ink-2); background:var(--bg-tint); padding:7px 13px; border-radius:999px; }
.tl-out { margin-top:16px; display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:#0e9a83; white-space:nowrap; }
.tl-out svg{width:17px;height:17px}
.tl-item.care .tl-dot { background:var(--mint-soft); color:#0e9a83; border-color:#bdeee3; }
.tl-item.care .tl-body { background:var(--mint-soft); border-radius:18px; padding:24px 28px; }
.tl-item.care .tl-body .desc{color:#2c3852}

@media (max-width: 760px) {
    .lead-phase { padding: 36px 24px; }
    .lead-phase .grid2 { grid-template-columns: 1fr; gap: 28px; }
    .tl-item { grid-template-columns: 56px 1fr; }
    .tl-body { padding-left: 18px; }
    .tl-do span{font-size:12.5px}
}
