/* assets/custom.css */
:root{
  --primary:#4f6ddf;
  --primary-700:#3f58b5;
  --ink:#0b1020;
  --muted:#6b7280;
  --surface:#ffffff;
  --bg:#f5f7fb;
  --ok:#10b981;
  --dark:#111827;
  --shadow:0 10px 30px rgba(17,24,39,.08);
  --radius:18px;
}

html,body{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; color:var(--ink); background:var(--bg);}

.section{padding:72px 0;}
.section-min{padding:40px 0;}

.hero{
  background: radial-gradient(1200px 600px at 50% -10%, #7f95ff33, transparent), linear-gradient(180deg, #4f6ddf, #405cd0);
  color:#fff;
  padding:96px 0 72px;
  position:relative;
  overflow:hidden;
}
.hero .headline{font-weight:800; letter-spacing:-.02em;}
.hero .sub{opacity:.95; max-width:740px; margin:14px auto 0;}
.hero .cta{margin-top:28px; gap:12px}
.btn-soft{
  background:#fff; color:var(--primary); border:none; padding:12px 22px; font-weight:600; border-radius:12px; box-shadow:var(--shadow);
}
.btn-soft:hover{transform:translateY(-1px); color:#263a97}

.kpi-strip{display:flex; gap:24px; justify-content:center; margin-top:28px; flex-wrap:wrap}
.kpi{background:#ffffff1a; border:1px solid #ffffff33; border-radius:999px; padding:8px 16px; font-weight:600}

.icon-bubble{
  width:54px; height:54px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:16px; background:#eef2ff; color:var(--primary);
  box-shadow:var(--shadow);
}

.feature-card{
  border-radius:var(--radius); background:var(--surface); padding:24px; height:100%;
  box-shadow:var(--shadow); transition:.2s ease; border:1px solid #eef2ff;
}
.feature-card:hover{transform:translateY(-2px)}

.step-dot{width:34px; height:34px; border-radius:999px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow:var(--shadow)}

/* .pricing{gap:24px}  */
.price-card{
  background:var(--surface); border-radius:24px; padding:28px; box-shadow:var(--shadow); border:1px solid #eef2ff; position:relative; height:100%;
}
.price-card.popular{border:2px solid var(--primary)}
.ribbon{
  position:absolute; top:16px; right:16px; background:var(--primary); color:#fff; font-size:12px; padding:6px 10px; border-radius:999px; font-weight:700; letter-spacing:.02em
}
.price{font-size:28px; font-weight:800}
.per{color:var(--muted); font-weight:600}
.price-feats{margin:16px 0 22px; list-style:none; padding:0}
.price-feats li{margin:8px 0; display:flex; gap:10px; align-items:flex-start}
.check{color:var(--ok);}

.badge-note{font-size:12px; color:#6b7280}

.trust{display:flex; gap:28px; justify-content:center; align-items:center; flex-wrap:wrap}
.trust img{height:150px; opacity:.8}

.cta-band{
  background: linear-gradient(90deg, var(--primary), var(--primary-700));
  color:#fff; border-radius:24px; padding:36px; box-shadow:var(--shadow)
}