:root{
  --bg:#F6F7FB; --card:#fff; --text:#0F172A; --muted:#475569; --muted2:#64748B;
  --line:#E5E7EB; --primary:#6B4EFF; --primary2:#8B7CFF;
  --success:#22C55E; --warn:#F59E0B; --danger:#EF4444;
  --shadow: 0 26px 80px rgba(15,23,42,.11);
  --shadow2: 0 14px 34px rgba(15,23,42,.08);
  --r14:14px; --r18:18px; --r24:24px; --r32:32px;
  --max: 1240px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Pretendard, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 560px at 16% -10%, rgba(107,78,255,.18), transparent 60%),
    radial-gradient(950px 540px at 92% -5%, rgba(139,124,255,.20), transparent 55%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 22px}
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(229,231,235,.75);
}
.topbar .container{
  height:74px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:1000; letter-spacing:-.4px; font-size:20px;}
.logoMark{
  width:26px; height:26px; border-radius:10px;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 14px 28px rgba(107,78,255,.25);
}
.nav{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.nav a{padding:10px 12px; border-radius:999px; font-weight:1000; color:#1f2937}
.nav a:hover{background:rgba(15,23,42,.06)}
.nav a.active{background: rgba(107,78,255,.12); color: #3730A3; border: 1px solid rgba(107,78,255,.25)}
.rightCtas{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:999px; font-weight:1000;
  border:1px solid var(--line); background:#fff;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
  cursor:pointer; user-select:none;
  transition: transform .08s ease, box-shadow .12s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 16px 30px rgba(15,23,42,.10)}
.btn.primary{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color:#fff; border:none; box-shadow: 0 16px 30px rgba(107,78,255,.22);
}
.btn.ghost{background:rgba(255,255,255,.75)}
.btn.small{padding:10px 12px; font-size:14px}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(229,231,235,.9);
  background: rgba(255,255,255,.72);
  font-weight:1000; color:#111;
}
.pill .mini{
  width:18px; height:18px; border-radius:7px;
  background: rgba(107,78,255,.15);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px;
}
section{padding:64px 0}
.sectionHead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.sectionHead h1,.sectionHead h2{margin:0; letter-spacing:-.8px}
.sectionHead h1{font-size:40px}
.sectionHead h2{font-size:30px}
.sectionHead p{margin:6px 0 0; color:var(--muted); font-weight:900}
.card{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(229,231,235,.9);
  border-radius: var(--r24);
  box-shadow: var(--shadow2);
}
.cardPad{padding:22px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid3{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.grid4{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px}
.muted{color:var(--muted); font-weight:900}
.kpi{
  background: rgba(255,255,255,.75);
  border:1px solid rgba(229,231,235,.9);
  border-radius: 18px;
  padding:12px 14px;
}
.kpi b{display:block; font-size:16px}
.kpi span{display:block; margin-top:4px; color:var(--muted); font-weight:900; font-size:13px}
.feat{
  display:flex; gap:12px; align-items:flex-start;
  padding:16px; border-radius: 22px;
  border:1px solid rgba(229,231,235,.9);
  background: rgba(255,255,255,.80);
}
.ic{
  width:42px; height:42px; border-radius:16px;
  background: rgba(107,78,255,.12);
  border:1px solid rgba(107,78,255,.20);
  display:flex; align-items:center; justify-content:center;
  font-weight:1000; color:#3730A3; flex:0 0 auto;
}
.feat h4{margin:0 0 6px; font-size:16px}
.feat p{margin:0; color:var(--muted); font-weight:800; line-height:1.6}
.badge{
  padding:8px 10px; border-radius: 12px;
  background: rgba(15,23,42,.06);
  font-weight:1000;
}
.hr{height:1px; background:rgba(229,231,235,.9); margin:14px 0}
.input, select, textarea{
  width:100%; padding:12px; border-radius: 14px;
  border:1px solid rgba(229,231,235,.95); background:#fff; font: inherit; font-size:15px;
}
textarea{min-height:110px; resize:vertical}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
footer{padding:54px 0; color:#64748B}
footer b{color:#0F172A}
/* responsive */
@media (max-width: 1040px){
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
  .topbar .container{height:auto; padding:12px 22px; flex-wrap:wrap}
}