@charset "utf-8";
:root {
    --blue:#0866ff;
    --navy:#101d35;
    --ink:#142039;
    --gray:#6d788b;
    --line:#e5eaf2;
    --pale:#f3f7ff
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:98px
}
body {
    margin:0;
    font-family:"Noto Sans KR","Malgun Gothic",sans-serif;
    color:var(--ink);
    word-break:keep-all;
    -webkit-font-smoothing:antialiased
}
a {
    color:inherit;
    text-decoration:none
}
button,input,textarea {
    font:inherit
}
button,a,input,textarea,summary {
    -webkit-tap-highlight-color:transparent
}
button {
    cursor:pointer
}
button:disabled {
    cursor:wait;
    opacity:.7
}
:focus-visible {
    outline:3px solid #75acff;
    outline-offset:5px
}
::selection {
    color:#fff;
    background:var(--blue)
}
.wrap {
    width:min(1200px,calc(100% - 64px));
    margin:auto
}
.icon-library {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden
}
.icon {
    display:inline-block;
    width:24px;
    height:24px;
    flex-shrink:0;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
}
.skip {
    position:fixed;
    top:-80px;
    left:20px;
    z-index:100;
    padding:14px 24px;
    background:var(--blue);
    color:#fff;
    border-radius:8px
}
.skip:focus {
    top:10px
}
header {
    position:sticky;
    z-index:20;
    top:0;
    height:88px;
    border-bottom:1px solid #e9edf4;
    background:#fffffff2;
    backdrop-filter:blur(16px)
}
.nav {
    height:100%;
    display:flex;
    align-items:center;
    gap:30px
}
.logo {
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    font:800 25px/1.15 Manrope,sans-serif;
    letter-spacing:-1.3px
}
.logo-mark {
    display:grid;
    place-content:center;
    position:relative;
    width:40px;
    height:40px;
    border-radius:12px;
    background:var(--blue);
    color:#fff;
    font-size:39px;
    line-height:1;
    letter-spacing:-5px;
    padding:0 8px 8px 0
}
.logo-mark>span {
    position:absolute;
    right:9px;
    bottom:4px;
    color:#a9d1ff;
    font-size:30px
}
.logo-light {
    font-weight:500
}
.logo small {
    display:block;
    margin-top:4px;
    color:#7a8495;
    font:500 11px "Noto Sans KR",sans-serif;
    letter-spacing:2.2px
}
nav {
    display:flex;
    align-items:center;
    gap:29px;
    margin-left:auto;
    font-size:15px;
    font-weight:500
}
nav a:hover,.mnav a:hover {
    color:var(--blue)
}
.navbtn {
    display:flex;
    align-items:center;
    gap:22px;
    padding:12px 18px;
    border-radius:7px;
    background:var(--blue);
    color:#fff;
    font-size:14px;
    font-weight:600
}
.navbtn:hover,.primary:hover,.submit:hover {
    background:#0054de;
    box-shadow:0 8px 24px #0866ff25
}
.navbtn span {
    font-size:18px
}
.menu,.mnav,.mobile-break {
    display:none
}
.hero {
    position:relative;
    overflow:hidden;
    background:radial-gradient(ellipse at 88% 45%,#dceaff 0,transparent 49%),linear-gradient(110deg,#fff 5%,#f8fbff 70%,#eef5ff)
}
.grid {
    position:absolute;
    inset:0;
    background-image:linear-gradient(#5790df06 1px,transparent 1px),linear-gradient(90deg,#5790df06 1px,transparent 1px);
    background-size:48px 48px;
    pointer-events:none
}
.hero-in {
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:34px;
    align-items:center;
    min-height:638px;
    padding-top:34px;
    padding-bottom:45px
}
.hero-badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0 0 25px;
    padding:8px 13px;
    border:1px solid #dbe8ff;
    border-radius:30px;
    color:#2261ce;
    background:#edf4ff;
    font-size:13px;
    font-weight:600
}
.hero-badge>span {
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--blue)
}
h1 {
    margin:0;
    font-size:55px;
    font-weight:900;
    line-height:1.32;
    letter-spacing:-3.4px
}
em {
    font-style:normal;
    color:var(--blue)
}
.hero-copy>p:not(.hero-badge) {
    margin:25px 0 30px;
    font-size:15px;
    color:#69768b;
    line-height:1.95;
    letter-spacing:-.4px
}
.hero-copy strong {
    color:#334563;
    font-weight:500
}
.actions {
    display:flex;
    align-items:center;
    gap:22px
}
.primary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    padding:17px 22px;
    border-radius:8px;
    background:var(--blue);
    color:#fff;
    box-shadow:0 8px 22px #0866ff22;
    font-size:15px;
    font-weight:700;
    transition:background .2s,box-shadow .2s
}
.primary .icon {
    width:20px
}
.secondary {
    font-size:14px;
    font-weight:500;
    color:#52637c
}
.secondary span {
    margin-left:6px
}
.trust {
    display:flex;
    flex-wrap:wrap;
    gap:17px;
    margin-top:23px;
    font-size:12px;
    color:#8490a3
}
.hero-visual {
    position:relative;
    padding-top:20px;
    padding-bottom:25px
}
.visual-note {
    margin:0 16px 15px 0;
    color:#3576d9;
    text-align:right;
    font-size:14px;
    font-weight:500;
    transform:rotate(-4deg)
}
.visual-note>span {
    margin-left:9px;
    font-size:28px
}
.dashboard {
    position:relative;
    overflow:hidden;
    border:1px solid #fff;
    border-radius:16px;
    background:#fff;
    box-shadow:0 24px 65px #466ebc20,0 0 0 7px #ffffff60;
    transform:perspective(1300px) rotateY(-5deg) rotateX(2deg)
}
.dash-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 20px;
    border-bottom:1px solid var(--line)
}
.dash-top>span:first-child {
    display:flex;
    align-items:center;
    gap:8px;
    font:800 14px Manrope,sans-serif
}
.mini-mark {
    color:var(--blue);
    font-size:24px;
    letter-spacing:-2px
}
.live {
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 9px;
    border-radius:20px;
    color:#46836c;
    background:#f0faf6;
    font-size:11px
}
.live i,.dash-bottom i {
    display:inline-block;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#32ba83
}
.dash-body {
    padding:23px;
    background:linear-gradient(130deg,#f9fbff,#f1f6ff)
}
.dash-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:21px
}
.dash-heading small {
    font:700 10px Manrope,sans-serif;
    letter-spacing:1.4px;
    color:#8e9bb0
}
.dash-heading h2 {
    margin:7px 0 5px;
    font-size:23px;
    letter-spacing:-1px
}
.dash-heading p {
    margin:0;
    font-size:12px;
    color:#8390a4
}
.dash-spark {
    color:var(--blue);
    font-size:48px;
    margin-right:12px
}
.dash-metrics {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:9px
}
.dash-metrics>div {
    padding:14px 10px;
    background:#fff;
    border:1px solid #eaf0fa;
    border-radius:9px
}
.metric-icon {
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    margin-bottom:11px;
    border-radius:9px;
    color:var(--blue);
    background:#edf4ff
}
.metric-icon .icon {
    width:20px;
    height:20px
}
.dash-metrics>div>span:not(.metric-icon) {
    display:block;
    margin-bottom:4px;
    font-size:11px;
    color:#7b889e
}
.dash-metrics b {
    font-size:14px;
    letter-spacing:-.5px
}
.dash-flow {
    margin-top:13px;
    padding:16px;
    border:1px solid #eaf0fa;
    border-radius:9px;
    background:#fff
}
.dash-flow-title {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px
}
.dash-flow-title>span {
    font:700 9px Manrope,sans-serif;
    letter-spacing:1px;
    color:#9eabc0
}
.flow-nodes {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:21px 0
}
.flow-nodes>span {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    color:var(--blue)
}
.flow-nodes small {
    font-size:11px;
    color:#738299
}
.flow-nodes>i {
    font-style:normal;
    color:#b8cdee
}
.flow-complete {
    display:flex;
    align-items:center;
    gap:6px;
    padding-top:11px;
    border-top:1px solid #f0f3f8;
    color:#8290a3;
    font-size:11px
}
.green-check {
    color:#24a678
}
.dash-bottom {
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:11px 20px;
    color:#8f9aae;
    font-size:10px
}
.dash-bottom i {
    margin-right:5px
}
.dash-bottom>span:last-child {
    font:700 9px Manrope,sans-serif;
    letter-spacing:.6px
}
.notification {
    position:absolute;
    right:-13px;
    bottom:12px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:14px 18px;
    border:1px solid #e1eafa;
    border-radius:12px;
    background:#fff;
    box-shadow:0 12px 34px #21497a18;
    transform:rotate(-2deg)
}
.notification-icon {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#e9f9f0;
    color:#24b778
}
.notification-icon .icon {
    width:19px;
    height:19px
}
.notification b {
    display:block;
    margin-bottom:4px;
    font-size:13px
}
.notification div>span {
    display:block;
    color:#8c98a9;
    font-size:11px
}
.notification>small {
    align-self:flex-start;
    padding-left:12px;
    font-size:10px;
    color:#98a5b8
}
.visual-caption {
    position:absolute;
    width:100%;
    bottom:-30px;
    text-align:center;
    font-size:10px;
    color:#8d9db4
}
.hero-bottom {
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:65px;
    border-top:1px solid #dfe8f4
}
.hero-bottom>span {
    font:500 11px Manrope,sans-serif;
    letter-spacing:1.8px;
    color:#97a6ba
}
.hero-bottom b {
    color:#586e8e;
    font-weight:700
}
.hero-bottom>a {
    color:#7184a0;
    font-size:12px
}
.hero-bottom>a>span {
    margin-left:20px;
    color:var(--blue);
    font-size:19px
}
.tool-strip {
    border-bottom:1px solid var(--line);
    background:#fff
}
.tool-strip-in {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:48px;
    min-height:118px
}
.tool-strip p {
    flex-shrink:0;
    color:#9aa3b2;
    font-size:13px;
    line-height:1.9
}
.tool-strip p b {
    color:#657287;
    font-weight:500
}
.tool-logos {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex:1;
    gap:30px;
    max-width:810px
}
.tool-logos>span {
    display:flex;
    align-items:center;
    gap:9px;
    color:#566073;
    font:700 17px Manrope,sans-serif
}
.tool-automation .icon {
    color:var(--blue)
}
.tool-google b {
    color:#4285f4;
    font-size:27px
}
.tool-gpt i {
    color:#26987c;
    font-size:31px;
    font-style:normal
}
.tool-mail .icon {
    color:#7793ba;
    width:25px
}
.section {
    padding:105px 0
}
.label {
    margin:0 0 17px;
    font:700 12px Manrope,sans-serif;
    letter-spacing:2px
}
.blue {
    color:var(--blue)
}
.heading {
    margin-bottom:45px
}
.center {
    text-align:center
}
.heading h2,.case-head h2,.copy h2,.faq-title h2,.consult-copy h2 {
    margin:0;
    font-size:39px;
    font-weight:800;
    line-height:1.45;
    letter-spacing:-2px
}
.heading>p:last-child,.copy>p:not(.label),.faq-title>p:not(.label) {
    margin:19px 0 0;
    font-size:15px;
    color:var(--gray);
    line-height:1.9
}
.cards {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}
.cards article {
    padding:27px 25px;
    border:1px solid var(--line);
    border-radius:13px;
    background:linear-gradient(145deg,#fff,#fbfcff);
    transition:border-color .2s,transform .2s
}
.cards article:hover {
    border-color:#a6c8ff;
    transform:translateY(-5px)
}
.cards article>small {
    display:block;
    font:600 10px Manrope,sans-serif;
    letter-spacing:1.5px;
    color:#9aa7ba
}
.service-icon {
    display:grid;
    place-items:center;
    width:57px;
    height:57px;
    margin:26px 0 21px;
    border-radius:16px;
    background:linear-gradient(140deg,#eff6ff,#e4efff);
    color:var(--blue)
}
.service-icon .icon {
    width:28px;
    height:28px
}
.cards h3 {
    margin:0 0 13px;
    font-size:21px;
    letter-spacing:-.9px
}
.cards p {
    margin:0 0 25px;
    min-height:78px;
    color:var(--gray);
    font-size:14px;
    line-height:1.9
}
.cards article>b {
    display:block;
    padding-top:17px;
    border-top:1px solid var(--line);
    font-size:12px;
    font-weight:500;
    color:#4776b4
}
.solution {
    background:#f4f7fc;
    border-block:1px solid #edf1f7
}
.case-head {
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:38px;
    gap:25px
}
.case-head>p {
    margin:0 0 7px;
    color:var(--gray);
    font-size:15px;
    line-height:1.9
}
.scenario {
    overflow:hidden;
    border:1px solid #e0e8f4;
    border-radius:15px;
    background:#fff;
    box-shadow:0 12px 35px #193e7205
}
.scenario-top {
    display:flex;
    align-items:center;
    gap:16px;
    padding:23px 30px;
    border-bottom:1px solid #eef2f8
}
.scenario-badge {
    padding:6px 10px;
    border-radius:5px;
    background:#eaf2ff;
    color:var(--blue);
    font-size:12px;
    font-weight:600;
    flex-shrink:0
}
.scenario-top h3 {
    margin:0;
    font-size:15px;
    font-weight:600;
    letter-spacing:-.4px
}
.scenario-label {
    margin-left:auto;
    color:#9cabc0;
    font:600 10px Manrope,sans-serif;
    letter-spacing:1px
}
.scenario-flow {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:29px 22px
}
.scenario-flow article {
    position:relative;
    text-align:center;
    padding:9px 12px 17px
}
.scenario-flow article:not(:last-child):after {
    content:"→";
    position:absolute;
    top:60px;
    right:-13px;
    color:#b0c8eb;
    font-size:25px
}
.scenario-number {
    display:block;
    color:#a1afc3;
    font:600 11px Manrope,sans-serif
}
.scenario-flow .service-icon {
    margin:15px auto 17px
}
.scenario-flow h4 {
    margin:0 0 10px;
    font-size:15px;
    letter-spacing:-.5px
}
.scenario-flow p {
    margin:0 0 18px;
    color:var(--gray);
    font-size:14px;
    line-height:1.8
}
.scenario-flow article>span:last-child {
    padding:5px 9px;
    border:1px solid #e8edf5;
    border-radius:20px;
    color:#94a0b2;
    font-size:11px
}
.scenario-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:19px 30px;
    background:#edf4ff;
    color:#496a9a;
    font-size:13px
}
.scenario-bottom>span {
    display:flex;
    align-items:center;
    gap:5px
}
.scenario-bottom .icon {
    width:17px;
    height:17px;
    margin-right:5px;
    color:var(--blue)
}
.scenario-bottom strong {
    font-weight:600
}
.scenario-bottom>a {
    color:var(--blue);
    font-weight:600
}
.case-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:22px
}
.case-grid article {
    padding:27px 28px;
    border:1px solid #e3eaf4;
    border-radius:12px;
    background:#ffffffa8
}
.case-grid article>span {
    color:#7285a2;
    font-size:12px
}
.case-grid h3 {
    margin:14px 0;
    font-size:20px;
    line-height:1.55;
    letter-spacing:-.8px
}
.case-grid p {
    margin:0;
    color:var(--gray);
    font-size:13px;
    line-height:1.9
}
.case-grid article>b {
    display:block;
    margin-top:24px;
    color:#3e76c4;
    font-size:12px;
    font-weight:500
}
.notice {
    margin:22px 0 0;
    color:#8895aa;
    font-size:12px;
    line-height:1.8;
    text-align:center
}
.split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center
}
.check-list {
    padding:0;
    margin:26px 0;
    list-style:none;
    font-size:14px;
    color:#4a5b73
}
.check-list li {
    display:flex;
    gap:10px;
    margin:12px 0
}
.check-list li:before {
    content:"✓";
    color:var(--blue)
}
.text-link {
    display:inline-block;
    margin-top:8px;
    padding-bottom:7px;
    border-bottom:1px solid #b5d1fa;
    color:var(--blue);
    font-size:14px;
    font-weight:500
}
.integration-map {
    position:relative;
    height:360px;
    background:radial-gradient(ellipse,#edf4ff,transparent 70%)
}
.map-ring {
    position:absolute;
    left:50%;
    top:50%;
    width:355px;
    height:310px;
    transform:translate(-50%,-50%) rotate(-15deg);
    border:1px dashed #c7d9f4;
    border-radius:50%
}
.map-ring.inner {
    width:240px;
    height:190px;
    border-style:solid;
    border-color:#e4edfa
}
.map-center {
    position:absolute;
    left:50%;
    top:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:13px;
    width:167px;
    height:120px;
    border:1px solid #c7dcff;
    border-radius:20px;
    background:#fff;
    box-shadow:0 12px 45px #0866ff14;
    transform:translate(-50%,-50%)
}
.map-center .automation-label {
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--blue);
    font-size:18px;
    font-weight:700
}
.map-center small {
    color:#7b8fae;
    font-size:11px
}
.map-node {
    position:absolute;
    display:flex;
    align-items:center;
    gap:10px;
    padding:15px 19px;
    border:1px solid #e1eaf7;
    border-radius:12px;
    background:#fff;
    box-shadow:0 8px 25px #244f8e09;
    font-size:13px;
    font-weight:500
}
.map-node .icon {
    color:var(--blue);
    width:22px;
    height:22px
}
.node-form {
    left:3%;
    top:55px
}
.node-sheets {
    right:0;
    top:30px
}
.node-gpt {
    left:7%;
    bottom:31px
}
.node-sms {
    right:1%;
    bottom:44px
}
.sheet-mark {
    font-size:25px;
    color:#30a66d
}
.gpt-mark {
    font-size:28px;
    color:#249a80
}
.map-dot {
    position:absolute;
    width:8px;
    height:8px;
    border:2px solid #fff;
    border-radius:50%;
    background:#91baff;
    box-shadow:0 0 0 4px #edf4ff
}
.dot-one {
    top:20px;
    left:43%
}
.dot-two {
    bottom:7px;
    right:42%
}
.process {
    border-block:1px solid #edf1f7;
    background:#f8faff
}
.steps {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px
}
.steps article {
    position:relative;
    border-top:1px solid #ccdcf2;
    padding-top:26px
}
.steps article:before {
    content:"";
    position:absolute;
    top:-4px;
    left:0;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--blue)
}
.steps article>b {
    display:block;
    margin-bottom:19px;
    color:#bfd4f5;
    font:700 40px Manrope,sans-serif;
    letter-spacing:-2px
}
.steps article>span {
    color:#8c9db6;
    font:600 10px Manrope,sans-serif;
    letter-spacing:1.2px
}
.steps h3 {
    margin:8px 0 13px;
    font-size:18px;
    letter-spacing:-.5px
}
.steps p {
    margin:0;
    color:var(--gray);
    font-size:14px;
    line-height:1.9
}
.faq {
    display:grid;
    grid-template-columns:1fr 1.8fr;
    gap:75px
}
.faq-title .text-link {
    margin-top:27px
}
.accordion details {
    border-bottom:1px solid var(--line)
}
.accordion details:first-child {
    border-top:1px solid #cdd8e7
}
.accordion summary {
    display:flex;
    align-items:center;
    gap:13px;
    padding:22px 0;
    list-style:none;
    font-size:15px;
    font-weight:500;
    cursor:pointer
}
.accordion summary::-webkit-details-marker {
    display:none
}
.accordion summary>b {
    color:var(--blue);
    font:700 14px Manrope,sans-serif
}
.accordion summary>i {
    margin-left:auto;
    color:#8799b1;
    font-size:18px;
    font-style:normal;
    flex-shrink:0;
    transition:transform .2s
}
.accordion details[open] summary>i {
    transform:rotate(45deg);
    color:var(--blue)
}
.accordion details>p {
    margin:0;
    padding:0 28px 24px;
    color:var(--gray);
    font-size:14px;
    line-height:1.9
}
.consult {
    position:relative;
    overflow:hidden;
    padding:85px 0;
    color:#fff;
    background:radial-gradient(ellipse at 10% 100%,#185fe1,transparent 65%),#0753d0
}
.consult-in {
    display:grid;
    grid-template-columns:1fr 490px;
    align-items:center;
    gap:65px
}
.consult-copy .label {
    color:#9cc6ff
}
.consult-copy h2 {
    font-size:37px;
    line-height:1.55
}
.consult-copy em {
    color:#bddcff
}
.consult-copy>p:not(.label) {
    margin:23px 0;
    color:#c5dcff;
    font-size:15px;
    line-height:1.9
}
.consult-checks {
    display:flex;
    gap:20px;
    color:#cbe0ff;
    font-size:13px
}
.consult-note {
    display:flex;
    gap:14px;
    align-items:center;
    margin-top:45px;
    padding-top:24px;
    border-top:1px solid #ffffff25;
    color:#aaccff;
    font-size:13px;
    line-height:1.9
}
.consult-note>b,.consult-note b {
    color:#e7f1ff;
    font-weight:500
}
.consult form {
    padding:30px;
    border-radius:16px;
    background:#fff;
    color:var(--ink);
    box-shadow:0 15px 50px #05389030
}
.form-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px
}
.form-heading h3 {
    margin:0;
    font-size:21px;
    letter-spacing:-1px
}
.form-heading>span {
    font-size:11px;
    color:#97a1b1
}
.consult form b {
    color:var(--blue)
}
.form-intro {
    margin:9px 0 25px;
    color:#8490a3;
    font-size:13px
}
.form-row {
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:13px
}
.form-row>label,.content-label {
    display:block;
    font-size:13px;
    font-weight:500
}
.consult input:not([type=checkbox]):not([type=hidden]),.consult textarea {
    display:block;
    width:100%;
    margin-top:8px;
    padding:13px 12px;
    border:1px solid #dfe5ee;
    border-radius:7px;
    background:#fafbfd;
    color:var(--ink);
    font-size:14px;
    line-height:1.65;
    transition:border-color .2s,box-shadow .2s
}
.consult input::placeholder,.consult textarea::placeholder {
    color:#a1aaba;
    opacity:1
}
.consult input:focus,.consult textarea:focus {
    outline:none;
    border-color:#6ea5ff;
    box-shadow:0 0 0 3px #0866ff0c
}
.content-label {
    margin-top:19px
}
.consult textarea {
    min-height:111px;
    resize:vertical
}
.field-note {
    display:flex;
    justify-content:space-between;
    gap:8px;
    margin:7px 0 20px;
    color:#9aa5b5;
    font-size:11px
}
#content-count {
    flex-shrink:0;
    font-family:Manrope,sans-serif
}
.agree,.agree label {
    display:flex;
    align-items:center
}
.agree {
    justify-content:space-between;
    gap:8px;
    margin-bottom:18px
}
.agree label {
    gap:6px;
    font-size:12px;
    color:#778396;
    cursor:pointer
}
.agree input {
    width:15px;
    height:15px;
    margin:0;
    accent-color:var(--blue);
    flex-shrink:0
}
.privacy {
    padding:0;
    border:0;
    background:none;
    color:#7a8699;
    text-decoration:underline;
    text-underline-offset:3px;
    font-size:11px;
    flex-shrink:0
}
.submit {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;
    width:100%;
    padding:15px;
    border:0;
    border-radius:8px;
    background:var(--blue);
    color:#fff;
    font-size:15px;
    font-weight:600;
    transition:background .2s
}
.submit .icon {
    width:20px;
    height:20px
}
.form-note {
    margin:12px 0 0;
    text-align:center;
    font-size:10px;
    color:#9ca6b4;
    line-height:1.8
}
footer {
    background:#fff;
    padding-top:45px
}
.foot {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:35px;
    padding-bottom:35px
}
.foot-brand .logo {
    font-size:23px
}
.foot-brand>p {
    margin:15px 0 0;
    color:#8994a5;
    font-size:12px
}
.foot-info {
    text-align:right;
    color:#929ba9;
    font-size:11px;
    line-height:1.9
}
.foot-info p {
    display:flex;
    justify-content:flex-end;
    gap:12px;
    flex-wrap:wrap;
    margin:5px 0
}
.foot-company strong {
    color:#5e6b7e
}
.copyright {
    display:flex;
    align-items:center;
    gap:30px;
    padding:22px 0;
    border-top:1px solid var(--line);
    color:#9ba5b3;
    font:500 10px Manrope,sans-serif;
    letter-spacing:.7px
}
.copyright .privacy {
    margin-left:auto;
    font:400 11px "Noto Sans KR",sans-serif;
    letter-spacing:0
}
.float {
    position:fixed;
    z-index:15;
    right:24px;
    bottom:24px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:13px 19px;
    border:1px solid #ffffff55;
    border-radius:30px;
    background:var(--blue);
    box-shadow:0 6px 24px #004ad53d;
    color:#fff;
    font-size:13px;
    font-weight:500
}
.float .icon {
    width:20px;
    height:20px
}
.modal {
    width:min(460px,calc(100% - 32px));
    max-height:calc(100dvh - 40px);
    padding:0;
    border:0;
    border-radius:16px;
    color:var(--ink);
    box-shadow:0 30px 100px #06152f40
}
.modal::backdrop {
    background:#101d3580;
    backdrop-filter:blur(4px)
}
.modal-box {
    position:relative;
    padding:32px
}
.modal h3 {
    margin:0 0 25px;
    font-size:21px;
    letter-spacing:-1px
}
.modal p:not(.label) {
    font-size:14px;
    color:#778397;
    line-height:1.9
}
.modal p b {
    color:#33445f;
    font-weight:600
}
.close {
    position:absolute;
    top:15px;
    right:17px;
    width:32px;
    height:32px;
    border:0;
    background:transparent;
    color:#8d99ab;
    font-size:27px
}
.ok {
    width:100%;
    margin-top:15px;
    padding:13px;
    border:0;
    border-radius:7px;
    color:#fff;
    background:var(--blue);
    font-size:15px
}
.modal-open {
    overflow:hidden
}
.will-reveal {
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s,transform .6s
}
.will-reveal.show {
    opacity:1;
    transform:none
}
@media(min-width:1400px) {
    .wrap {
        width:min(1240px,calc(100% - 80px))
    }
    .hero-in {
        gap:45px;
        min-height:670px
    }
    h1 {
        font-size:59px
    }
}
@media(max-width:1100px) {
    nav {
        gap:18px;
        font-size:14px
    }
    .nav {
        gap:22px
    }
    .logo {
        font-size:22px
    }
    .navbtn {
        gap:12px
    }
    h1 {
        font-size:47px;
        letter-spacing:-2.8px
    }
    .hero-in {
        gap:25px;
        min-height:630px
    }
    .actions {
        gap:16px;
        align-items:flex-start;
        flex-direction:column
    }
    .dash-body {
        padding:17px
    }
    .dash-metrics>div {
        padding:12px 8px
    }
    .dash-metrics b {
        font-size:14px
    }
    .cards article {
        padding:23px 18px
    }
    .cards p {
        min-height:93px
    }
    .tool-logos {
        gap:20px
    }
    .tool-logos>span {
        font-size:14px
    }
    .consult-in {
        grid-template-columns:1fr 450px;
        gap:35px
    }
    .consult-copy h2 {
        font-size:31px
    }
    .split {
        gap:35px
    }
}
@media(max-width:900px) {
    header {
        height:74px
    }
    nav,.navbtn {
        display:none
    }
    .menu {
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:6px;
        margin-left:auto;
        width:42px;
        height:42px;
        padding:10px;
        border:1px solid var(--line);
        border-radius:8px;
        background:#fff
    }
    .menu span {
        width:20px;
        height:2px;
        background:var(--ink);
        transition:transform .2s
    }
    .menu-open .menu span:first-child {
        transform:translateY(4px) rotate(45deg)
    }
    .menu-open .menu span:last-child {
        transform:translateY(-4px) rotate(-45deg)
    }
    .menu-open .mnav {
        display:flex;
        position:absolute;
        top:74px;
        left:0;
        right:0;
        flex-direction:column;
        gap:0;
        padding:12px 32px 20px;
        background:#fff;
        border-bottom:1px solid var(--line);
        box-shadow:0 14px 24px #152f5b0c
    }
    .mnav a {
        padding:14px 0;
        font-size:14px
    }
    .hero-in {
        grid-template-columns:1fr;
        max-width:650px;
        padding:55px 0 70px;
        gap:35px
    }
    .hero-copy {
        text-align:center
    }
    h1 {
        font-size:54px
    }
    .actions {
        flex-direction:row;
        align-items:center;
        justify-content:center;
        gap:22px
    }
    .trust {
        justify-content:center
    }
    .hero-visual {
        width:100%;
        max-width:550px;
        margin:auto
    }
    .tool-strip-in {
        gap:25px
    }
    .tool-logos {
        flex-wrap:wrap;
        justify-content:center;
        gap:18px 30px
    }
    .section {
        padding:80px 0
    }
    .cards {
        grid-template-columns:repeat(2,1fr)
    }
    .cards article {
        padding:28px
    }
    .cards p {
        min-height:46px
    }
    .case-head {
        display:block
    }
    .case-head>p {
        margin-top:20px
    }
    .scenario-label {
        display:none
    }
    .case-grid article {
        padding:23px 19px
    }
    .case-grid h3 {
        font-size:17px
    }
    .split {
        grid-template-columns:1fr;
        gap:25px
    }
    .integration-map {
        width:100%;
        max-width:520px;
        margin:auto
    }
    .faq {
        grid-template-columns:1fr 1.6fr;
        gap:30px
    }
    .faq-title h2 {
        font-size:32px
    }
    .consult-in {
        grid-template-columns:1fr;
        gap:38px;
        max-width:600px
    }
    .consult-copy h2 {
        font-size:38px
    }
    .consult-note {
        margin-top:25px
    }
    .foot {
        align-items:flex-start
    }
    .foot-info {
        max-width:430px
    }
}
@media(max-width:600px) {
    html {
        scroll-padding-top:86px
    }
    .wrap {
        width:calc(100% - 40px)
    }
    header {
        height:68px
    }
    .logo {
        font-size:23px
    }
    .logo-mark {
        width:36px;
        height:36px;
        font-size:35px;
        border-radius:10px
    }
    .menu-open .mnav {
        top:68px;
        padding-inline:20px
    }
    .hero-in {
        padding-top:38px;
        padding-bottom:62px;
        gap:18px
    }
    .hero-badge {
        font-size:12px;
        margin-bottom:23px
    }
    h1 {
        font-size:42px;
        letter-spacing:-2.5px;
        line-height:1.3
    }
    .mobile-break {
        display:block
    }
    h1 .mobile-break {
        display:none
    }
    .hero-copy>p:not(.hero-badge) {
        margin:21px 0 24px;
        font-size:15px;
        line-height:1.9
    }
    .actions {
        flex-direction:column;
        gap:16px
    }
    .primary {
        width:100%;
        max-width:310px;
        padding:16px 20px;
        font-size:15px
    }
    .secondary {
        font-size:13px
    }
    .trust {
        gap:11px;
        font-size:10px;
        margin-top:20px
    }
    .hero-visual {
        padding-top:16px;
        padding-bottom:25px
    }
    .visual-note {
        margin-bottom:9px;
        font-size:12px
    }
    .dashboard {
        transform:none;
        border-radius:13px;
        box-shadow:0 20px 45px #466ebc18,0 0 0 4px #ffffff70
    }
    .dash-top {
        padding:11px 13px
    }
    .dash-top>span:first-child {
        font-size:12px
    }
    .live {
        font-size:10px;
        padding:5px 7px
    }
    .dash-body {
        padding:17px 13px
    }
    .dash-heading {
        margin-bottom:15px
    }
    .dash-heading h2 {
        font-size:21px
    }
    .dash-heading p {
        font-size:11px
    }
    .dash-spark {
        font-size:38px;
        margin-right:3px
    }
    .dash-metrics {
        gap:6px
    }
    .dash-metrics>div {
        padding:10px 7px
    }
    .dash-metrics>div>span:not(.metric-icon) {
        font-size:10px
    }
    .dash-metrics b {
        font-size:13px
    }
    .metric-icon {
        width:28px;
        height:28px;
        margin-bottom:9px
    }
    .dash-flow {
        padding:12px
    }
    .flow-nodes {
        margin:16px 0
    }
    .flow-complete {
        font-size:10px
    }
    .dash-bottom {
        padding:10px 13px;
        font-size:9px
    }
    .dash-bottom>span:last-child {
        font-size:8px
    }
    .notification {
        right:-5px;
        bottom:1px;
        gap:8px;
        padding:11px 13px
    }
    .notification b {
        font-size:12px
    }
    .notification div>span {
        font-size:10px
    }
    .notification>small {
        padding-left:3px;
        font-size:9px
    }
    .notification-icon {
        width:29px;
        height:29px
    }
    .visual-caption {
        bottom:-32px;
        font-size:9px;
        line-height:1.7
    }
    .hero-bottom {
        min-height:58px;
        justify-content:center
    }
    .hero-bottom>span {
        font-size:10px;
        letter-spacing:1.4px
    }
    .hero-bottom>a {
        display:none
    }
    .tool-strip-in {
        display:block;
        padding-top:18px;
        padding-bottom:25px;
        text-align:center
    }
    .tool-strip p {
        margin:0 0 20px;
        font-size:12px
    }
    .tool-strip p br {
        display:none
    }
    .tool-logos {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:17px 12px;
        max-width:300px;
        margin:auto
    }
    .tool-logos>span {
        justify-content:center;
        font-size:15px
    }
    .tool-google b {
        font-size:23px
    }
    .tool-gpt i {
        font-size:26px
    }
    .section {
        padding:65px 0
    }
    .label {
        font-size:10px;
        letter-spacing:1.6px;
        margin-bottom:14px
    }
    .heading h2,.case-head h2,.copy h2,.faq-title h2,.consult-copy h2 {
        font-size:29px;
        line-height:1.48;
        letter-spacing:-1.5px
    }
    .heading>p:last-child,.copy>p:not(.label),.faq-title>p:not(.label) {
        font-size:13px;
        margin-top:15px
    }
    .heading {
        margin-bottom:30px
    }
    .cards {
        gap:12px
    }
    .cards article {
        padding:21px 16px
    }
    .cards article>small {
        font-size:9px;
        letter-spacing:.8px
    }
    .service-icon {
        width:47px;
        height:47px;
        margin:21px 0 17px;
        border-radius:13px
    }
    .service-icon .icon {
        width:25px;
        height:25px
    }
    .cards h3 {
        font-size:18px;
        margin-bottom:11px
    }
    .cards p {
        min-height:103px;
        font-size:13px;
        margin-bottom:18px
    }
    .cards article>b {
        font-size:11px;
        line-height:1.7;
        min-height:48px;
        padding-top:12px
    }
    .case-head {
        margin-bottom:28px
    }
    .case-head>p {
        font-size:13px
    }
    .scenario-top {
        align-items:flex-start;
        flex-direction:column;
        padding:21px;
        gap:12px
    }
    .scenario-top h3 {
        font-size:14px;
        line-height:1.7
    }
    .scenario-flow {
        grid-template-columns:1fr 1fr;
        padding:15px 10px
    }
    .scenario-flow article {
        padding:15px 5px
    }
    .scenario-flow article:not(:last-child):after {
        display:none
    }
    .scenario-flow h4 {
        font-size:15px
    }
    .scenario-flow p {
        font-size:12px
    }
    .scenario-bottom {
        flex-direction:column;
        align-items:flex-start;
        padding:17px 20px;
        font-size:12px
    }
    .scenario-bottom>span {
        flex-wrap:wrap
    }
    .case-grid {
        grid-template-columns:1fr;
        gap:12px;
        margin-top:16px
    }
    .case-grid article {
        padding:23px
    }
    .case-grid h3 {
        font-size:19px;
        margin:12px 0
    }
    .case-grid article>b {
        margin-top:17px
    }
    .notice {
        text-align:left;
        font-size:11px
    }
    .integration-map {
        height:310px;
        margin-top:15px
    }
    .map-ring {
        width:270px;
        height:270px
    }
    .map-ring.inner {
        width:205px;
        height:180px
    }
    .map-center {
        width:138px;
        height:102px;
        gap:10px
    }
    .map-center .automation-label {
        gap:6px;
        font-size:16px
    }
    .map-center .automation-label .icon {
        width:20px;
        height:20px
    }
    .map-node {
        gap:7px;
        padding:12px;
        font-size:12px
    }
    .node-form {
        left:0;
        top:25px
    }
    .node-sheets {
        right:0;
        top:12px
    }
    .node-gpt {
        left:3%;
        bottom:15px
    }
    .node-sms {
        right:0;
        bottom:24px
    }
    .steps {
        grid-template-columns:1fr 1fr;
        gap:30px 20px
    }
    .steps article {
        padding-top:19px
    }
    .steps article>b {
        font-size:32px;
        margin-bottom:15px
    }
    .steps h3 {
        font-size:16px
    }
    .steps p {
        font-size:12px
    }
    .faq {
        grid-template-columns:1fr;
        gap:30px
    }
    .faq-title h2 br {
        display:none
    }
    .faq-title .text-link {
        margin-top:17px
    }
    .accordion summary {
        gap:9px;
        font-size:14px;
        line-height:1.8;
        padding:19px 0
    }
    .accordion details>p {
        padding:0 23px 21px;
        font-size:13px
    }
    .consult {
        padding:60px 0
    }
    .consult-in {
        gap:30px
    }
    .consult-copy>p:not(.label) {
        font-size:14px;
        margin:19px 0
    }
    .consult-checks {
        gap:15px;
        font-size:12px
    }
    .consult-note {
        margin-top:24px;
        padding-top:20px;
        font-size:12px
    }
    .consult form {
        padding:24px 20px
    }
    .form-heading h3 {
        font-size:19px
    }
    .form-intro {
        font-size:12px;
        margin-bottom:22px
    }
    .form-row {
        gap:10px
    }
    .consult input:not([type=checkbox]):not([type=hidden]),.consult textarea {
        font-size:16px;
        padding:11px 10px
    }
    .consult input::placeholder {
        font-size:14px
    }
    .consult textarea::placeholder {
        font-size:14px;
        line-height:1.8
    }
    .field-note {
        font-size:10px;
        line-height:1.7
    }
    .agree label {
        font-size:11px
    }
    .agree .privacy {
        font-size:10px
    }
    .form-note {
        font-size:9px
    }
    footer {
        padding-top:35px;
        padding-bottom:64px
    }
    .foot {
        display:block;
        padding-bottom:25px
    }
    .foot-info {
        margin-top:24px;
        text-align:left;
        font-size:10px
    }
    .foot-info p {
        justify-content:flex-start;
        gap:4px 10px
    }
    .copyright {
        flex-wrap:wrap;
        gap:14px 20px;
        font-size:9px;
        padding-top:19px
    }
    .copyright .privacy {
        font-size:10px
    }
    .copyright>a {
        display:none
    }
    .float {
        right:14px;
        bottom:14px;
        padding:12px 16px;
        font-size:12px
    }
    .modal-box {
        padding:28px 23px
    }
    .modal h3 {
        font-size:19px
    }
}
@media(max-width:370px) {
    .map-ring {
        width:230px;
        height:230px
    }
    .wrap {
        width:calc(100% - 32px)
    }
    h1 {
        font-size:36px;
        letter-spacing:-2.4px
    }
    .cards {
        grid-template-columns:1fr
    }
    .cards p {
        min-height:0
    }
    .cards article>b {
        min-height:0
    }
    .form-row {
        grid-template-columns:1fr;
        gap:17px
    }
    .notification {
        right:0;
        padding:10px
    }
    .notification>small {
        display:none
    }
    .dash-bottom>span:last-child {
        display:none
    }
    .map-node {
        font-size:11px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        animation:none!important;
        transition:none!important
    }
    .will-reveal {
        opacity:1;
        transform:none
    }
}