/* CI-V02-01 Calm Lavender — Key Visual (tokens from mobile/src/theme/colors.js) */
:root{
  --purple:#6750a4; --purple-dark:#543f8e; --lilac:#e9ddff; --iris:#3A2575;
  --cyan:#4a9d92; --cyan-c:#d9ede9;
  --mint:#a3e4d7; --apricot:#fad7a0; --slilac:#d7bde2; --sky:#aed6f1;
  --bg:#f4f3f8; --surface:#ffffff; --muted:#f1eff7; --border:#e6e3ef;
  --ink:#2c2833; --ink2:#6c6678; --ink3:#9a95a4;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Pretendard,'Malgun Gothic',system-ui,sans-serif;color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased}
.container{max-width:1200px;margin:0 auto;padding:0 40px}
a{text-decoration:none;color:inherit}

/* header */
.header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:9}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center;gap:12px}
.logo-text{font-size:26px;font-weight:800;color:var(--purple);letter-spacing:-.03em}
.logo-text strong{color:var(--cyan)}
.menu{display:flex;align-items:center;gap:30px}
.menu a{color:var(--ink2);font-weight:600;font-size:15px}
.menu .cta{background:var(--purple);color:#fff;padding:11px 22px;border-radius:14px}

/* hero */
.hero{position:relative;overflow:hidden;background:#f4f3f8}
.hero::before{content:"";position:absolute;inset:-16px;background:url('bg_hero.png') center/cover no-repeat;filter:blur(5px);opacity:.72;z-index:0}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(250,249,253,.60) 0%,rgba(248,247,252,.26) 52%,rgba(244,243,248,.06) 100%);z-index:0}
.hero>*{position:relative;z-index:1}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;padding:72px 40px 40px;align-items:center}
.eyebrow{color:var(--cyan);font-weight:700;letter-spacing:.1em;font-size:14px;margin-bottom:14px}
.eyebrow.dark{color:var(--purple)}
h1{font-size:54px;line-height:1.18;font-weight:800;letter-spacing:-.03em}
h1 .hl{color:var(--purple)}
.lead{margin-top:22px;font-size:18px;line-height:1.7;color:var(--ink2);max-width:520px}
.cta-row{display:flex;gap:14px;margin-top:30px}
.btn{padding:15px 28px;border-radius:16px;font-weight:700;font-size:16px}
.btn.primary{background:var(--purple);color:#fff}
.btn.ghost{background:var(--surface);color:var(--purple);border:2px solid var(--lilac)}
.slot-legend{display:flex;gap:22px;margin-top:28px;color:var(--ink2);font-size:14px;font-weight:600}
.slot-legend span{display:flex;align-items:center;gap:8px}
.slot-legend i{width:14px;height:14px;border-radius:50%;display:inline-block}

/* phone mock */
.hero-visual{display:flex;justify-content:center}
.phone{width:300px;background:var(--surface);border:1px solid var(--border);border-radius:36px;padding:22px;box-shadow:0 18px 50px rgba(103,80,164,.16)}
.phone-top{font-weight:800;font-size:18px;margin-bottom:16px}
.slot-card{display:flex;align-items:center;gap:12px;background:var(--muted);border-radius:18px;padding:16px 18px;margin-bottom:12px}
.slot-card .dot{width:18px;height:18px;border-radius:50%}
.slot-card b{font-size:16px}
.slot-card em{margin-left:auto;color:var(--ink2);font-style:normal;font-size:14px}
.slot-card .chk{margin-left:10px;color:var(--cyan);font-weight:800}
.phone-cta{background:var(--purple);color:#fff;text-align:center;font-weight:800;padding:16px;border-radius:18px;margin-top:6px}

/* kpi */
.kpi-strip{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:30px 40px}
.kpi{display:flex;flex-direction:column;gap:6px}
.kpi .num{font-size:38px;font-weight:800;color:var(--purple)}
.kpi .num small{font-size:16px;color:var(--cyan);margin-left:4px}
.kpi .lbl{color:var(--ink2);font-size:14px}

/* solutions */
.solutions{padding:84px 0;background:var(--bg)}
.solutions h2{font-size:36px;font-weight:800;margin:10px 0 36px;letter-spacing:-.02em}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:28px;box-shadow:0 6px 20px rgba(103,80,164,.05)}
.card .ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;margin-bottom:16px}
.card h3{font-size:19px;margin-bottom:10px}
.card p{color:var(--ink2);font-size:14px;line-height:1.6}

/* proof */
.proof{padding:84px 0;background:var(--surface)}
.proof h2{font-size:32px;font-weight:800;margin:10px 0 32px}
.logowall{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.logo-slot{background:var(--muted);border-radius:16px;padding:26px;text-align:center;font-weight:700;color:var(--ink2)}
.logo-slot.accent{background:var(--cyan-c);color:var(--cyan)}

/* footer */
.footer{position:relative;overflow:hidden;background:#2e1d5e;color:#fff;padding:48px 0}
.footer::before{content:"";position:absolute;inset:-16px;background:url('bg_footer.png') center/cover no-repeat;filter:blur(6px);opacity:.72;z-index:0}
.footer::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(58,37,117,.34),rgba(36,22,84,.46));z-index:0}
.footer>*{position:relative;z-index:1}
.foot-row{display:flex;justify-content:space-between;align-items:flex-start;gap:30px}
.foot-tag{color:var(--mint);margin-top:6px;font-size:14px}
.foot-info{text-align:right;color:#cdbff0;font-size:14px;line-height:1.9}
.foot-mini{color:#9a86c8;font-size:12px;margin-top:6px}

/* language switcher (combo) */
.langsel{font-family:Pretendard,'Malgun Gothic',sans-serif;font-weight:600;font-size:14px;color:var(--ink2);background:#fff;border:1px solid var(--border);border-radius:12px;padding:9px 12px;cursor:pointer;margin-left:4px}
.langsel:hover{border-color:var(--purple);color:var(--purple)}

/* glow & gradient accents */
h1 .hl{background:linear-gradient(90deg,#6750a4,#4a9d92);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.eyebrow{text-shadow:0 0 16px rgba(74,157,146,.30)}
.btn.primary{background:linear-gradient(135deg,#7a5fc0,#6750a4 55%,#543f8e);box-shadow:0 10px 28px rgba(103,80,164,.42)}
.btn.primary:hover{box-shadow:0 14px 34px rgba(103,80,164,.55)}
.btn.ghost{box-shadow:0 6px 18px rgba(103,80,164,.10)}
.menu .cta{background:linear-gradient(135deg,#7a5fc0,#6750a4);box-shadow:0 6px 18px rgba(103,80,164,.35)}
.phone{box-shadow:0 18px 52px rgba(103,80,164,.30),0 0 0 1px rgba(103,80,164,.08)}
.phone-cta{background:linear-gradient(135deg,#7a5fc0,#6750a4);box-shadow:0 8px 22px rgba(103,80,164,.42)}
.card{transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:0 14px 32px rgba(103,80,164,.18);transform:translateY(-2px)}
.kpi .num{background:linear-gradient(135deg,#6750a4,#4a9d92);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kpi .num small{-webkit-text-fill-color:#4a9d92}