:root {
  --ink: #14215c; --night: #0f1940; --blue: #3d63c9; --sky: #8aa5f0; --pale: #c9d3f0;
  --tint: #f3f5fb; --line: #e1e6f2; --muted: #5d6788; --bad: #c4314b; --white: #fff;
  --r: 16px; --font: "Pretendard Variable", Pretendard, "Malgun Gothic", system-ui, sans-serif;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 72px }
body { margin: 0; font: 16px/1.65 var(--font); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; word-break: keep-all }
img { max-width: 100%; display: block }
a { color: inherit; text-decoration: none }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.25 }
h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800 }
h3 { font-size: 18px; font-weight: 700 }
p { margin: 0 }
.wrap { width: min(1180px, 100% - 32px); margin: 0 auto }
section { padding: 112px 0 }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--blue); margin-bottom: 14px }
.eyebrow.on-dark { color: var(--sky) }
.lead { font-size: 18px; color: var(--muted); max-width: 640px; margin-top: 18px }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 26px; border-radius: 12px;
  background: var(--blue); color: #fff; font: 700 16px var(--font); border: 0; cursor: pointer; transition: transform .15s, background .15s }
.btn:hover { background: #3557b3; transform: translateY(-1px) }
.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; border-radius: 10px }
.btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.28) }
.btn--ghost:hover { background: rgba(255,255,255,.08) }

/* nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; transition: background .2s, box-shadow .2s }
.nav__in { height: 68px; display: flex; align-items: center; gap: 28px }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: #fff }
.brand img { width: 28px; height: 28px; filter: brightness(0) invert(1) }
.nav__links { display: flex; gap: 26px; margin-left: auto; font-size: 15px; color: rgba(255,255,255,.78) }
.nav__links a:hover { color: #fff }
.nav.solid { background: rgba(255,255,255,.92); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line) }
.nav.solid .brand { color: var(--ink) } .nav.solid .brand img { filter: none }
.nav.solid .nav__links { color: var(--muted) } .nav.solid .nav__links a:hover { color: var(--ink) }

/* hero */
.hero { background: radial-gradient(1200px 600px at 75% 30%, #1d2c73 0%, var(--night) 60%); color: #fff; padding: 150px 0 110px; overflow: hidden }
.hero__in { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center }
.hero h1 { font-size: clamp(38px, 5vw, 62px); font-weight: 800 }
.hero h1 span { color: var(--sky) }
.hero .lead { color: var(--pale) }
.hero__cta { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap }
.hero__facts { list-style: none; padding: 0; margin: 44px 0 0; display: flex; gap: 36px }
.hero__facts b { display: block; font-size: 28px; font-weight: 800 }
.hero__facts span { font-size: 13px; color: var(--pale) }

/* screenshot frame */
.shot { margin: 0; border-radius: var(--r); overflow: hidden; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 30px 60px -20px rgba(15,25,64,.25) }
.shot img { width: 100% }
.shot--hero { border: 0; box-shadow: 0 40px 90px -20px rgba(0,0,0,.55); transform: perspective(1600px) rotateY(-6deg); transform-origin: left }
.shot__bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #eef1f8; font-size: 12px; color: var(--muted) }
.shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfd6e8 }
.shot__bar span { margin-left: 10px }
.shot--dark { border-color: #26336f; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6) }

/* cards */
.grid2, .grid3, .grid4 { display: grid; gap: 20px }
.grid2 { grid-template-columns: repeat(2, 1fr) } .grid3 { grid-template-columns: repeat(3, 1fr) } .grid4 { grid-template-columns: repeat(4, 1fr) }
.card { padding: 30px; border-radius: var(--r); background: var(--tint) }
.card small { display: block; margin: 20px 0 6px; font-size: 13px; font-weight: 700; color: var(--blue) }
.card p { color: var(--muted); margin-top: 8px; font-size: 15px }
.ic { width: 52px; height: 52px; border-radius: 14px; background: #fff; display: grid; place-items: center }
.ic svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round }
.ic--bad svg path { stroke: var(--bad) }
.pain { padding: 90px 0 }

/* how */
.how { background: var(--tint) }
.steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s }
.steps li { background: #fff; border-radius: var(--r); padding: 28px; position: relative }
.steps span { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--ink); color: #fff;
  font-weight: 800; font-size: 14px; margin-bottom: 20px }
.steps li:nth-child(3) span { background: var(--blue) }
.steps p { color: var(--muted); font-size: 15px; margin-top: 10px }

/* features */
.feat { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; margin-bottom: 110px }
.feat--rev .feat__copy { order: 2 }
.ticks { list-style: none; padding: 0; margin: 26px 0 0 }
.ticks li { position: relative; padding-left: 30px; margin: 12px 0; color: var(--muted) }
.ticks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 5px; background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='black' stroke-width='2.2' fill='none'/%3E%3C/svg%3E") center/12px no-repeat, linear-gradient(#000 0 0) }
.note { margin-top: 18px; font-size: 14px; color: var(--muted) }
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center }
.chips span { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); font-size: 15px; color: var(--muted) }

/* ops */
.ops { background: var(--night); color: #fff }
.ops .lead { color: var(--pale) }
.ops .shot { margin-top: 48px }
.ops__grid { margin-top: 48px }
.ops__grid div { border-top: 1px solid #2a3772; padding-top: 22px }
.ops__grid p { color: var(--pale); font-size: 15px; margin-top: 8px }

/* security */
.security .grid4 { margin: 40px 0 48px }
.security .card { background: #fff; border: 1px solid var(--line) }

/* plans */
.plans { background: var(--tint) }
.plans .grid2 { margin-top: 40px }
.plan { padding: 40px; border-radius: var(--r); background: #fff; border: 1px solid var(--line) }
.plan small { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--blue) }
.plan h3 { font-size: 24px; margin-top: 8px }
.plan .price { font-size: 30px; font-weight: 800; margin: 18px 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line) }
.plan ul { margin: 0; padding-left: 18px; color: var(--muted) } .plan li { margin: 8px 0 }
.plan--on { background: var(--ink); color: #fff; border-color: var(--ink) }
.plan--on small { color: var(--sky) } .plan--on .price { border-color: #2a3772 } .plan--on ul { color: var(--pale) }

/* contact */
.contact { background: var(--night); color: #fff }
.contact__in { display: grid; grid-template-columns: 1fr 440px; gap: 64px; align-items: center }
.contact h2 span { color: var(--sky) }
.addr { margin-top: 28px; color: var(--pale); font-size: 15px; line-height: 1.9 }
.form { background: #fff; color: var(--ink); border-radius: var(--r); padding: 32px; display: grid; gap: 12px }
.form h3 { margin-bottom: 6px }
.form input, .form textarea { font: 15px var(--font); padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); resize: vertical }
.form input:focus, .form textarea:focus { outline: 2px solid var(--blue); border-color: transparent }
.form__msg { font-size: 14px; color: var(--muted); min-height: 22px }
.foot { padding: 28px 0; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line) }

/* chatbot */
.chat-fab { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px 0 14px;
  border-radius: 28px; border: 0; background: var(--ink); color: #fff; font: 700 15px var(--font); cursor: pointer; box-shadow: 0 14px 30px -8px rgba(15,25,64,.5) }
.chat-fab img { width: 30px; height: 30px; background: #fff; border-radius: 9px; padding: 4px }
.chat { position: fixed; right: 24px; bottom: 24px; z-index: 31; width: 390px; height: 600px; max-height: calc(100vh - 48px); background: #fff;
  border-radius: 20px; box-shadow: 0 30px 70px -10px rgba(15,25,64,.4); display: grid; grid-template-rows: auto 1fr auto auto; overflow: hidden }
.chat[hidden] { display: none }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--ink); color: #fff }
.chat__head img { width: 34px; height: 34px; background: #fff; border-radius: 10px; padding: 5px }
.chat__head small { display: block; font-size: 12px; color: var(--pale) }
.chat__head button { margin-left: auto; background: none; border: 0; color: #fff; font-size: 18px; cursor: pointer }
.chat__body { overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--tint) }
.msg { max-width: 86%; padding: 11px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap }
.msg--bot { background: #fff; border-top-left-radius: 4px; align-self: flex-start }
.msg--me { background: var(--blue); color: #fff; border-top-right-radius: 4px; align-self: flex-end }
.msg--typing { color: var(--muted) }
.chat__sugg { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0 }
.chat__sugg button { font: 13px var(--font); padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer }
.chat__sugg button:hover { border-color: var(--blue); color: var(--blue) }
.chat__in { display: flex; gap: 8px; padding: 12px 14px 14px }
.chat__in input { flex: 1; font: 15px var(--font); padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px }
.chat__in input:focus { outline: 2px solid var(--blue); border-color: transparent }
.chat__in button { width: 46px; border: 0; border-radius: 12px; background: var(--blue); color: #fff; font-size: 18px; cursor: pointer }

/* reveal */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s }
.rv.in { opacity: 1; transform: none }

@media (max-width: 960px) {
  section { padding: 80px 0 }
  .nav__links { display: none } .nav .btn--sm { margin-left: auto }
  .hero { padding: 120px 0 80px } .hero__in, .feat, .contact__in { grid-template-columns: 1fr; gap: 40px }
  .shot--hero { transform: none } .feat--rev .feat__copy { order: 0 } .feat { margin-bottom: 80px }
  .grid3, .grid4, .grid2, .steps { grid-template-columns: 1fr }
  .hero__facts { gap: 22px }
  .chat { right: 8px; left: 8px; width: auto; bottom: 8px; height: calc(100vh - 16px) }
  .chat-fab span { display: none } .chat-fab { padding: 0 13px }
}
.chat__sugg[hidden] { display: none }