/* ========================================
   WeLive サービスページ共通CSS
   assets/css/services.css
======================================== */

/* ── Service section ── */
.svc-section{padding:5rem 5%;position:relative;overflow:hidden}
.svc-section.alt-bg{background:var(--cream)}
.svc-inner{max-width:1100px;margin:0 auto}

.svc-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.45rem 1rem;border-radius:999px;
  font-family:var(--font-en);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.2rem;
}
.svc-title{
  font-size:clamp(1.6rem,3.5vw,2.8rem);font-weight:900;
  line-height:1.22;letter-spacing:-.02em;margin-bottom:1rem;
}
.svc-lead{
  font-size:1.05rem;color:var(--text-mid);max-width:680px;
  line-height:1.85;margin-bottom:2.5rem;
}

/* ── Feature grid ── */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;margin-bottom:2.5rem;
}
.svc-card{
  background:#fff;border:1px solid rgba(74,144,217,.1);
  border-radius:22px;padding:2rem 1.8rem;
  box-shadow:var(--shadow-card);
  transition:transform .3s ease,box-shadow .3s ease;
}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.svc-card-icon{
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;
  font-size:1.4rem;margin-bottom:1rem;color:#fff;
}
.svc-card h3{font-size:1.05rem;font-weight:700;margin-bottom:.5rem}
.svc-card p{font-size:.9rem;color:var(--text-mid);line-height:1.75}

/* ── Button row ── */
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

/* ── Gradient variants ── */
.grad-warm{background:linear-gradient(135deg,#F5C842,#F09040)}
.grad-green{background:linear-gradient(135deg,#4CAF7D,var(--teal))}
.grad-purple{background:linear-gradient(135deg,#7B68EE,var(--blue))}

.btn-warm{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 2rem;border-radius:999px;font-size:.95rem;font-weight:700;
  text-decoration:none;font-family:var(--font-jp);cursor:pointer;border:none;
  background:linear-gradient(135deg,#F5C842,#F09040);color:#fff;
  box-shadow:0 6px 28px rgba(240,144,64,.35);
  transition:transform .25s,box-shadow .25s;
}
.btn-warm:hover{transform:translateY(-3px);box-shadow:0 10px 36px rgba(240,144,64,.5);color:#fff}
.btn-green{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 2rem;border-radius:999px;font-size:.95rem;font-weight:700;
  text-decoration:none;font-family:var(--font-jp);cursor:pointer;border:none;
  background:linear-gradient(135deg,#4CAF7D,var(--teal));color:#fff;
  box-shadow:0 6px 28px rgba(76,175,125,.35);
  transition:transform .25s,box-shadow .25s;
}
.btn-green:hover{transform:translateY(-3px);box-shadow:0 10px 36px rgba(76,175,125,.5);color:#fff}
.btn-purple{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 2rem;border-radius:999px;font-size:.95rem;font-weight:700;
  text-decoration:none;font-family:var(--font-jp);cursor:pointer;border:none;
  background:linear-gradient(135deg,#7B68EE,var(--blue));color:#fff;
  box-shadow:0 6px 28px rgba(123,104,238,.35);
  transition:transform .25s,box-shadow .25s;
}
.btn-purple:hover{transform:translateY(-3px);box-shadow:0 10px 36px rgba(123,104,238,.5);color:#fff}

/* ── WeConnect visual panel ── */
.wc-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.wc-visual{
  position:relative;background:linear-gradient(145deg,#1E2A3A,#2A3F5A);
  border-radius:28px;padding:2.5rem;color:#fff;min-height:320px;
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 20px 60px rgba(30,42,58,.35);overflow:hidden;
}
.wc-visual::before{content:'';position:absolute;top:-40%;right:-30%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(74,144,217,.3),transparent 70%);pointer-events:none}
.wc-visual::after{content:'';position:absolute;bottom:-30%;left:-20%;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(61,191,170,.2),transparent 70%);pointer-events:none}
.wc-visual h3{font-size:1.5rem;font-weight:900;margin-bottom:1rem;position:relative;z-index:1}
.wc-visual p{font-size:.9rem;line-height:1.8;color:rgba(255,255,255,.75);position:relative;z-index:1}
.wc-stat{display:flex;gap:2rem;margin-top:1.5rem;position:relative;z-index:1}
.wc-stat .num{font-family:var(--font-en);font-size:1.8rem;font-weight:800;background:linear-gradient(135deg,var(--blue),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center}
.wc-stat .label{font-size:.7rem;color:rgba(255,255,255,.5);margin-top:.2rem;text-align:center}

/* ── Diagnosis demo ── */
.diag-demo{
  background:linear-gradient(145deg,var(--blue-pale),var(--teal-pale));
  border-radius:28px;padding:3rem;display:flex;flex-direction:column;
  align-items:center;text-align:center;box-shadow:var(--shadow-soft);
  position:relative;overflow:hidden;
}
.diag-demo::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(74,144,217,.15),transparent 50%);pointer-events:none}
.diag-input{width:100%;max-width:480px;display:flex;gap:.5rem;margin:1.5rem 0}
.diag-input input{
  flex:1;padding:.9rem 1.2rem;border:2px solid rgba(74,144,217,.2);
  border-radius:16px;font:inherit;font-size:.95rem;background:#fff;outline:none;
  transition:border-color .2s;
}
.diag-input input:focus{border-color:var(--blue)}
.diag-input button{
  padding:.9rem 1.6rem;border:none;border-radius:16px;
  background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;
  font:inherit;font-weight:700;cursor:pointer;white-space:nowrap;
  box-shadow:0 4px 16px rgba(74,144,217,.35);transition:transform .2s;
}
.diag-input button:hover{transform:translateY(-2px)}
.diag-steps{display:flex;gap:2rem;margin-top:2rem;flex-wrap:wrap;justify-content:center}
.diag-step{display:flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:600;color:var(--text-mid)}
.diag-step .num{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-en);font-weight:800;font-size:.75rem;color:#fff;
}

/* ── Sprout phone mockup ── */
.sprout-layout{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.sprout-phone{
  background:#FFF8EE;border:3px solid #F0E6D0;border-radius:32px;
  padding:2rem;max-width:340px;margin:0 auto;
  box-shadow:0 16px 48px rgba(200,180,140,.2);
}
.sprout-msg{display:flex;gap:.6rem;margin-bottom:1rem;align-items:flex-start}
.sprout-avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,#4CAF7D,var(--teal));
  display:grid;place-items:center;color:#fff;font-size:.8rem;font-weight:800;flex-shrink:0;
}
.sprout-bubble{
  background:#fff;border:1px solid #E8E0D0;border-radius:16px 16px 16px 4px;
  padding:.8rem 1rem;font-size:.82rem;line-height:1.6;color:var(--text-dark);max-width:250px;
}
.sprout-user{
  background:linear-gradient(135deg,#4CAF7D,var(--teal));color:#fff;
  border-radius:16px 16px 4px 16px;padding:.6rem 1rem;font-size:.82rem;
  margin-left:auto;display:inline-block;max-width:200px;
}

/* ── CTA band ── */
.svc-cta-band{
  background:linear-gradient(135deg,#1E2A3A,#2A4560);
  padding:5rem 5%;text-align:center;color:#fff;position:relative;overflow:hidden;
}
.svc-cta-band::before{content:'';position:absolute;top:-30%;right:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(74,144,217,.2),transparent 60%);pointer-events:none}
.svc-cta-band h2{font-size:clamp(1.5rem,3.5vw,2.4rem);font-weight:900;margin-bottom:1rem;position:relative;z-index:1}
.svc-cta-band p{color:rgba(255,255,255,.7);max-width:500px;margin:0 auto 2rem;position:relative;z-index:1}

/* ── Solution highlight box ── */
.solution-highlight{
  background:linear-gradient(135deg,rgba(123,104,238,.06),rgba(74,144,217,.06));
  border-radius:22px;padding:2.5rem;margin-bottom:2rem;
}
.solution-highlight-inner{
  display:flex;flex-wrap:wrap;gap:2rem;align-items:center;justify-content:space-between;
}

/* ── Responsive ── */
@media(max-width:860px){
  .wc-hero-grid,.sprout-layout{grid-template-columns:1fr}
  .wc-visual{min-height:auto}
  .wc-stat{flex-wrap:wrap;gap:1.5rem}
}