html { scroll-behavior: smooth; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
    font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto, sans-serif;
    color: #212121;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    word-break: keep-all;
}
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
img { max-width: 100%; display: block; }

.page {
    width: 1920px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0 auto;
    overflow-x: hidden;
}
/* 모든 섹션에 overflow-x: hidden 강제 — 안의 콘텐츠가 1920 밖으로 새는 걸 차단 */
.page > * { overflow-x: hidden; max-width: 100%; }

.section {
    align-self: stretch;
    padding: 120px 16px 60px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}


.gnb {
    align-self: stretch;
    height: 64px;
    padding: 0 40px;
    background: rgba(0, 2, 31, 0.85);
    background-blend-mode: multiply;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
}
.gnb__brand { display: flex; align-items: center; text-decoration: none; }
.gnb__logo { display: block; width: 202px; height: auto; }
.gnb__menu {
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gnb__menu-icon { display: block; width: 36px; height: 36px; }

/* ===== Layer: Hero ===== */
.hero-section {
    position: relative;
    padding: 300px 16px 200px;
    overflow: hidden;
    background: #ffffff;
    gap: 37px;
}
.hero-section::before {
    content: "";
    position: absolute;
    top: -180px;
    left: 40px;
    right: 40px;
    bottom: 480px;
    border-radius: 0 0 50% 50%;
    background:
        radial-gradient(circle at 50% 100%, rgba(190, 194, 253, 0.30), transparent 50%),
        radial-gradient(circle at -2% 120px, rgba(177, 221, 253, 0.50), transparent 55%),
        radial-gradient(circle at 12% 120px, rgba(34, 104, 253, 0.45), transparent 55%),
        radial-gradient(circle at 38% 120px, rgba(34, 104, 253, 0.40), transparent 55%),
        radial-gradient(circle at 62% 120px, rgba(126, 70, 255, 0.45), transparent 55%),
        radial-gradient(circle at 88% 120px, rgba(126, 70, 255, 0.45), transparent 55%);
    filter: blur(100px);
    pointer-events: none;
}
.hero-section > * { position: relative; z-index: 1; }

/* iOS Safari */
@supports (-webkit-touch-callout: none) {
    html.ios-lite .page {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    html.ios-lite .hero-section {
        background: #ffffff url("assets/hero.png") center top / cover no-repeat;
    }
    html.ios-lite .hero-section::before {
        content: none;
        display: none;
        background: none;
        filter: none;
    }

    html.ios-lite .axdc-section {
        background: #A8B5FC url("assets/axdc-section.png") center top / cover no-repeat;
    }
    html.ios-lite .axdc-section::before,
    html.ios-lite .axdc-section::after {
        content: none;
        display: none;
        background: none;
        filter: none;
    }
}
/* iOS: 가벼운 opacity-only fade-in (transform/will-change 없이 GPU compositing만 사용) */
html.ios-lite .reveal {
    transform: none !important;
    transition: opacity 0.6s ease !important;
    will-change: auto !important;
}
html.ios-lite .reveal-stagger > * {
    transform: none !important;
    transition: opacity 0.6s ease !important;
    will-change: auto !important;
}
/* stats-bar 차트 애니메이션은 무거우므로 비활성 유지 */
html.ios-lite .stats-card .stats-bar,
html.ios-lite .stats-card .stats-bar__value,
html.ios-lite .stats-card .stats-bar__label {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
}

/* iOS Event 섹션의 4-card row가 줄바꿈되지 않도록 한 줄 유지 강제 */
html.ios-lite .row-wrap { flex-wrap: nowrap !important; }

/* iOS 문의하기 폼: 데스크톱 2열(left/right 46%) → 1열로 세로 적층 */
html.ios-lite .main-contact-us .form-area { display: block !important; }
html.ios-lite .main-contact-us .left-area,
html.ios-lite .main-contact-us .right-area {
    width: 100% !important;
    margin-left: 0 !important;
}
html.ios-lite .main-contact-us .left-area { margin-bottom: 120px !important; }

/* iOS에서 폼 폰트/높이를 모바일 표준 visual 크기(약 13~16px)로 맞추고 위아래 간격 여유 있게 */
html.ios-lite .main-contact-us .tit-area { margin-top: 120px !important; margin-bottom: 90px !important; padding-left: 90px !important; }
html.ios-lite .main-contact-us .tit-area:before { width: 18px !important; }
html.ios-lite .main-contact-us .tit-area h3 { font-size: 75px !important; line-height: 1.3 !important; margin-bottom: 35px !important; font-weight: 400 !important; }
html.ios-lite .main-contact-us .tit-area h3 strong { font-size: inherit !important; display: block !important; font-weight: 700 !important; }
html.ios-lite .main-contact-us .tit-area p { font-size: 42px !important; line-height: 1.5 !important; margin-top: 35px !important; }
html.ios-lite .main-contact-us .form-area label { font-size: 50px !important; line-height: 1.4 !important; margin-bottom: 25px !important; display: block !important; }
html.ios-lite .main-contact-us .form-area input[type=text],
html.ios-lite .main-contact-us .form-area textarea { font-size: 60px !important; height: auto !important; min-height: 170px !important; line-height: 1.4 !important; padding: 25px 0 !important; }
html.ios-lite .main-contact-us .form-area textarea { min-height: 360px !important; }
html.ios-lite .main-contact-us .form-area li { margin-bottom: 110px !important; }
html.ios-lite .main-contact-us .agree_txt label,
html.ios-lite .main-contact-us .agree_txt label span { font-size: 42px !important; line-height: 1.5 !important; }
html.ios-lite .main-contact-us .agree_txt input[type=checkbox] { width: 45px !important; height: 45px !important; }
html.ios-lite .main-contact-us .form-area .error_txt { font-size: 38px !important; margin-top: 18px !important; }
html.ios-lite .main-contact-us .btn-area { margin-top: 80px !important; }
html.ios-lite .main-contact-us .btn-area .btn-submit { width: 480px !important; height: 170px !important; line-height: 170px !important; font-size: 60px !important; }
html.ios-lite .main-contact-us #contentTextareaLen,
html.ios-lite .main-contact-us .text-count { font-size: 38px !important; }


/* ===== Layer: Video ===== */
.video-section { /* uses .section defaults */ }

/* ===== Layer: Painpoint ===== */
.painpoint-section { background: linear-gradient(0deg, #FBFCFF 0%, #FBFCFF 100%), white; }

/* ===== Layer: AxDC ===== */
.axdc-section {
    position: relative;
    overflow: hidden;
    background:
        /* 화이트 그라데이션 (좌하단 + 우상단) — 연하고 가로로 길게 */
        radial-gradient(ellipse 55% 22% at 0% 100%, rgba(255, 255, 255, 0.55), transparent 70%),
        radial-gradient(ellipse 55% 20% at 100% 0%, rgba(255, 255, 255, 0.45), transparent 70%),
        /* 우상단 라이트 라벤더 #DCD0FB — 연하게 */
        radial-gradient(ellipse 40% 30% at 100% 8%, rgba(220, 208, 251, 0.55), transparent 60%),
        /* 베이스 대각선 (중앙 라이트 블루, 양끝 톤다운된 라벤더) */
        linear-gradient(45deg,
            #7B8DF2 0%,
            #A8B5FC 25%,
            #C1D9FC 50%,
            #CFBDF8 75%,
            #B8A1F0 100%
        );
}

.axdc-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 78% 65%, rgba(203, 189, 249, 0.30), transparent 60%),
        radial-gradient(circle at 85% 55%, rgba(189, 165, 240, 0.25), transparent 60%),
        radial-gradient(circle at 72% 75%, rgba(176, 145, 235, 0.22), transparent 60%);
    filter: blur(120px);
    pointer-events: none;
}

.axdc-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 60% 50%, rgba(160, 130, 240, 0.15), transparent 70%);
    filter: blur(160px);
    pointer-events: none;
}
.axdc-section > * { position: relative; z-index: 1; }


.reference-section {
    position: relative;
    padding: 110px 0 60px;
    overflow: hidden;
    background: #ffffff;
    align-items: flex-start;
}

.reference-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 75% 95% at 70% 40%, rgba(220, 208, 251, 0.55), transparent 70%),
        radial-gradient(ellipse 75% 95% at 30% 35%, rgba(193, 217, 252, 0.6), transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}
.reference-section > * { position: relative; z-index: 1; }

/* ===== Layer: Event ===== */
.event-section { background: #FBFCFF; overflow: hidden; }

.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 1.5s cubic-bezier(0.16, 0.84, 0.24, 1) 0.2s,
                transform 1.5s cubic-bezier(0.16, 0.84, 0.24, 1) 0.2s;
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 1.0s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 1.0s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1)  { transition-delay: 0.20s; }
.reveal-stagger.is-visible > *:nth-child(2)  { transition-delay: 0.32s; }
.reveal-stagger.is-visible > *:nth-child(3)  { transition-delay: 0.44s; }
.reveal-stagger.is-visible > *:nth-child(4)  { transition-delay: 0.56s; }
.reveal-stagger.is-visible > *:nth-child(5)  { transition-delay: 0.68s; }
.reveal-stagger.is-visible > *:nth-child(6)  { transition-delay: 0.80s; }
.reveal-stagger.is-visible > *:nth-child(7)  { transition-delay: 0.92s; }
.reveal-stagger.is-visible > *:nth-child(8)  { transition-delay: 1.04s; }
.reveal-stagger.is-visible > *:nth-child(9)  { transition-delay: 1.16s; }
.reveal-stagger.is-visible > *:nth-child(10) { transition-delay: 1.28s; }
.reveal-stagger.is-visible > *:nth-child(11) { transition-delay: 1.40s; }
.reveal-stagger.is-visible > *:nth-child(12) { transition-delay: 1.52s; }


.stats-card .stats-bar {
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.stats-card .stats-bar__value,
.stats-card .stats-bar__label {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
.stats-card.is-visible .stats-bar { transform: scaleY(1); }
.stats-card.is-visible .stats-bar__value,
.stats-card.is-visible .stats-bar__label { opacity: 1; }
.stats-card.is-visible .stats-chart__col:nth-child(1) .stats-bar { transition-delay: 0.50s; }
.stats-card.is-visible .stats-chart__col:nth-child(2) .stats-bar { transition-delay: 0.65s; }
.stats-card.is-visible .stats-chart__col:nth-child(3) .stats-bar { transition-delay: 0.80s; }
.stats-card.is-visible .stats-chart__col:nth-child(4) .stats-bar { transition-delay: 0.95s; }
.stats-card.is-visible .stats-chart__col:nth-child(5) .stats-bar { transition-delay: 1.20s; }
.stats-card.is-visible .stats-chart__col:nth-child(1) .stats-bar__value,
.stats-card.is-visible .stats-chart__col:nth-child(1) .stats-bar__label { transition-delay: 1.85s; }
.stats-card.is-visible .stats-chart__col:nth-child(2) .stats-bar__value,
.stats-card.is-visible .stats-chart__col:nth-child(2) .stats-bar__label { transition-delay: 2.00s; }
.stats-card.is-visible .stats-chart__col:nth-child(3) .stats-bar__value,
.stats-card.is-visible .stats-chart__col:nth-child(3) .stats-bar__label { transition-delay: 2.15s; }
.stats-card.is-visible .stats-chart__col:nth-child(4) .stats-bar__value,
.stats-card.is-visible .stats-chart__col:nth-child(4) .stats-bar__label { transition-delay: 2.30s; }
.stats-card.is-visible .stats-chart__col:nth-child(5) .stats-bar__value,
.stats-card.is-visible .stats-chart__col:nth-child(5) .stats-bar__label { transition-delay: 2.55s; }

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-stagger > *,
    .stats-card .stats-bar,
    .stats-card .stats-bar__value, .stats-card .stats-bar__label {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

.event-section-2 { background: #FBFCFF; overflow: hidden; }
.kolas-card {
    width: 100%;
    max-width: 1650px;
    padding: 24px;
    background: white;
    border: 1px solid #DEDEDE;
    border-radius: 16px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.kolas-item {
    width: 290px;
    height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    text-align: center;
}
.kolas-item--image img {
    max-height: 170px;
    width: auto;
    display: block;
}
.kolas-item__title {
    align-self: stretch;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    color: #2268FD;
}
.kolas-item__desc {
    align-self: stretch;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    color: #212121;
}
.kolas-item__iso {
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
    color: #212121;
}

/* ===== 시험성적서 분류 (KOLAS 공인 / 일반) ===== */
.cert-grid {
    width: 100%;
    max-width: 1650px;
    display: grid;
    grid-template-columns: minmax(0, 928px) minmax(0, 692px);
    grid-template-rows: auto;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
}
.cert-col {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.cert-col--blue,
.cert-col--purple { max-width: none; }
.cert-col__head {
    padding: 18px 26px;
    border: 1px solid #DEDEDE;
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
}
.cert-col--blue .cert-col__head {
    background: rgba(34, 104, 253, 0.10);
    color: #2268FD;
}
.cert-col--purple .cert-col__head {
    background: rgba(126, 70, 255, 0.10);
    color: #7E46FF;
}
.cert-col__body {
    flex: 1;
    padding: 18px 12px;
    background: white;
    border: 1px solid #DEDEDE;
    border-top: none;
    border-radius: 0 0 16px 16px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
}
.cert-card {
    width: 100%;
    min-width: 0;
    padding: 24px 18px;
    background: rgba(255, 255, 255, 0.40);
    border: 1px solid #DEDEDE;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.cert-card__icon {
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block;
}
.cert-card__label {
    align-self: stretch;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    color: #212121;
}
.cert-card__desc {
    align-self: stretch;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: #646464;
}

/* ===== Layer: CTA ===== */
.cta-section { padding: 200px 16px; overflow: hidden; }

/* ===== Layer: Inquiry (문의 폼)  */
.main-contact-us2{padding:80px 20px; margin-top:0; width:100%; border-top:1px solid #ddd;}
.main-contact-us2 .cont{margin:0 auto; max-width:1220px; width:100%; box-sizing:border-box;}
.main-contact-us .cont{display:flex; justify-content: flex-end;}
.main-contact-us .inner{margin-left:auto; padding-left:0; max-width:1220px; width:100%;}
.main-contact-us .tit-area{position:relative; margin-bottom:3.375rem; padding-left:26px;}
.main-contact-us .tit-area:before{position:absolute; left:0; top:0; width:4px; height:100%; background-color:#161616; display:block; content:"";}
.main-contact-us .tit-area h2{font-size:2rem; font-weight:400; color:#161616; line-height:1.43;}
.main-contact-us .tit-area h2 strong{display:block;}
.main-contact-us .tit-area p{margin-top:0.875rem; font-size:0.875rem; font-weight:600; color:#3c3c3c;}
.main-contact-us .form-area{position:relative; padding-bottom:1.875rem; display:flex;}
.main-contact-us .form-area:before{position:absolute; left:0; bottom:0; width:100%; height:1px; background-color:#d1d1d1; display:block; content:""; background: linear-gradient(91deg, #2268FD 0%, #7E46FF 40%, #7E46FF 65%, #F22C82 100%);}
.main-contact-us .left-area{width:46%;}
.main-contact-us .right-area{margin-left:auto; width:46%;}
.main-contact-us .form-area li{margin-bottom:2.25rem; list-style:none;}
.main-contact-us .form-area li:last-child{margin-bottom:0;}
.main-contact-us .form-area .d-flex{display:flex; gap:10px; align-items: center; flex-wrap:wrap;}
.main-contact-us .form-area .d-flex .error_txt{margin-top:0;}
.main-contact-us .form-area label{font-size:1rem; font-weight:700; color:#161616; display:block;}
.main-contact-us .form-area label strong{display:inline-block; color:#ff4054; font-weight:inherit;}
.main-contact-us .form-area input[type=text]{padding-left:0 !important; width:100%; height:55px; line-height:54px; border:none; border-bottom:1px solid #d1d1d1; font-size:1rem; color:#3c3c3c; padding:0 10px; box-sizing:border-box; transition: all 0.6s ease-out; background:transparent;}
.main-contact-us .form-area textarea::placeholder,
.main-contact-us .form-area input[type=text]::placeholder{color:#9c9c9c; transition: all 0.6s ease-out;}
.main-contact-us .form-area input[type=text]:focus{border:none; outline: none; border-bottom:1px solid #0074FF;}
.main-contact-us .form-area textarea:focus{border-color:#0074ef; outline: none;}
.main-contact-us .form-area textarea{margin-top:1rem; padding:1.25rem; width:100%; height:252px; border:1px solid #d1d1d1; font-size:1rem; color:#3c3c3c; resize:none; box-sizing:border-box; display:block; transition: all 0.6s ease-out; font-family:inherit;}
.main-contact-us .form-area .text_number{margin-top:10px; width:100%; display:block; text-align:right; font-size:0.8125rem; color:#6d6d6d;}
.main-contact-us .form-area .error_txt{margin-top:0.5rem; font-size:0.875rem; color:#ff4054;}
.main-contact-us .agree_txt{display:flex; gap:10px; align-items: flex-start; flex-wrap: wrap;}
.main-contact-us .agree_txt input[type=checkbox]{-webkit-appearance: checkbox !important;}
.main-contact-us .agree_txt label{font-size:0.875rem; color:#3c3c3c; font-family:inherit; font-weight:600; cursor:pointer;}
.main-contact-us .agree_txt label span{margin-top:0.875rem; display:block; font-size:0.875rem; color:#6680b3; font-weight:400;}
.main-contact-us .agree_txt label span strong{font-size:inherit; color:inherit; font-family:inherit; font-weight:inherit;}
.main-contact-us .agree_txt span a{color:#0074ff; display:inline-block; text-decoration:underline;}
.main-contact-us .btn-area{margin-top:1.875rem; text-align:center;}
.main-contact-us .btn-area .btn-submit{position:relative; width:194px; height:60px; line-height:60px; display:inline-block; text-align: center; background: linear-gradient(91deg, #2268FD 0%, #7E46FF 40%, #7E46FF 65%, #F22C82 100%); border-radius:2em; font-size:1.125rem; color:#fff; border:none; cursor:pointer;}
/* AJAX 진행 중 — Chrome/Galaxy 등 non-iOS만 스피너 노출
   (html.ios-lite 즉 iPhone Safari는 ::after 렌더 이슈로 비활성) */
html:not(.ios-lite) .main-contact-us .btn-area .btn-submit.is-submitting{color:transparent !important; cursor:wait !important;}
html:not(.ios-lite) .main-contact-us .btn-area .btn-submit.is-submitting::after{content:""; position:absolute; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; border:3px solid rgba(255,255,255,0.35); border-top-color:#fff; border-radius:50%; animation:coex2026-btn-spin 0.8s linear infinite; box-sizing:border-box;}
@keyframes coex2026-btn-spin{to{transform:rotate(360deg);}}

@media (max-width: 1640px) {
    .main-contact-us .form-area{padding-left:20px;}
}
@media (max-width: 1200px) {
    .main-contact-us .form-area{display:block;}
    .main-contact-us .left-area{margin-bottom:20px; width:100%;}
    .main-contact-us .right-area{width:100%;}
}
@media (max-width: 960px) {
    .main-contact-us2{padding:60px 16px; margin-top:0;}
}
@media (max-width: 768px) {
    html{font-size: 16px;}
    .main-contact-us .form-area input[type=text]{height:48px; line-height:48px; font-size: 1rem;}
    .main-contact-us .form-area textarea{font-size:1rem;}
    .main-contact-us .form-area{padding-left:0;}
    .main-contact-us .tit-area{padding-left:15px;}
    .main-contact-us .form-area label{font-size:1rem;}
    .main-contact-us .form-area .error_txt{font-size:0.875rem;}
    .main-contact-us .form-area .agree_txt label{font-size:0.875rem; line-height:1.6;}
    .main-contact-us .agree_txt label span{font-size:0.875rem;}
    .main-contact-us .agree_txt input[type=checkbox]{margin-top:2px;}
    .main-contact-us .btn-area .btn-submit{width:140px; height:50px; line-height:50px; font-size:1rem;}
}

/* ===== Layer: Footer (visual terminator) ===== */
.page-footer {
    align-self: stretch;
    height: 120px;
    background: transparent;
}

.row-center {
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.row-wrap {
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}
.row-wrap--30 { gap: 30px; }
.row-wrap--80 { gap: 80px; }

/* ===== Reference grid (4 columns × 3 rows: badges + cards) ===== */
.reference-grid {
    width: 100%;
    max-width: 1650px;
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
}
.reference-grid > .badge-purple,
.reference-grid > .card { width: 100%; }

.col-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stretch-text { flex: 1 1 0; text-align: center; }

/* ===== Layer: Hero — inner elements ===== */
.hero-section__inner {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
}
.hero-section__logo-wrap {
    align-self: stretch;
    height: 154.77px;
    padding: 0 16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.hero-section__logo {
    width: 100%;
    max-width: 900px;
    height: auto;
    display: block;
}
.hero-section__taglines {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.hero-section__tagline-row {
    align-self: stretch;
    padding: 0 16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===== Buttons ===== */
.btn-pill-dark {
    padding: 20px 36px;
    background: linear-gradient(0deg, #212121, #212121),
                linear-gradient(135deg, rgba(0, 104, 255, 0.20), rgba(134, 60, 255, 0.20));
    border-radius: 100px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.btn-cta {
    width: 300px;
    max-width: 300px;
    height: 62px;
    padding: 16px 24px;
    background: linear-gradient(90deg, #0068FF 0%, #863CFF 52%, #FF0081 100%);
    box-shadow: 0 0 20px rgba(0, 104, 255, 0.30), 0 0 60px rgba(134, 60, 255, 0.10);
    border-radius: 9999px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* ===== Video card ===== */
.video-card-row {
    align-self: stretch;
    height: 675px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.video-card {
    width: 1200px;
    height: 675px;
    border: none;
    border-radius: 37px;
    overflow: hidden;
    background: #000;
}
.video-card iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ===== Cards ===== */
.card {
    background: rgba(255, 255, 255, 0.40);
    border: 1px solid #DEDEDE;
    border-radius: 16px;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
}
.card--limit {
    width: 383px;
    padding: 30px 26px;
    background: white;
    border-color: rgba(33, 33, 33, 0.15);
    justify-content: center;
    gap: 20px;
}
.card--industry {
    width: 390px;
    padding: 30px 24px;
}
.card--industry-26 { padding: 30px 26px; }
.card-body {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* ===== Badges ===== */
.badge-step {
    padding: 4px 12px;
    background: rgba(188, 188, 188, 0.09);
    border: 1px solid rgba(188, 188, 188, 0.21);
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
}
.badge-blue {
    padding: 8px 24px;
    background: rgba(34, 104, 253, 0.10);
    border: 1px solid rgba(34, 104, 253, 0.30);
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
}
.badge-purple {
    width: 390px;
    padding: 8px 24px;
    background: rgba(126, 70, 255, 0.10);
    border: 1px solid rgba(126, 70, 255, 0.30);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== Feature rows (NLU/NLG/Auto) ===== */
.feature-row {
    width: 100%;
    max-width: 1200px;
    padding: 12px 16px;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    flex-wrap: wrap;
}
.feature-text {
    width: 334px;
    height: 276px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
}
.feature-text--gap20 { gap: 20px; }
.feature-illustration {
    flex: 1 1 0;
    height: 280px;
    max-width: 480px;
    min-width: 360px;
    position: relative;
    overflow: hidden;
}
.feature-illustration__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.stats-card {
    width: 100%;
    max-width: 1200px;
    padding: 80px 16px 40px;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: flex-start;
    gap: 80px;
    flex-wrap: wrap;
}
.stats-text {
    width: 334px;
    padding: 12px 0;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.stats-text__title {
    width: 312px;
    height: 129px;
    position: relative;
}
.stats-text__title-row {
    width: 312px;
    left: 0;
    top: 0;
    position: absolute;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
}
.stats-text__title-row > .heading-lg { width: 310px; }
.stats-text__value-row {
    width: 312px;
    left: 0;
    top: 53px;
    position: absolute;
    display: inline-flex;
    gap: 12.02px;
}
.stats-chart {
    flex: 1 1 0;
    height: 480px;
    max-width: 480px;
    min-width: 320px;
    padding: 32px 12px 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.stats-chart__col {
    flex: 1 1 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.stats-bar {
    width: 100%;
    background: #C8C8C8;
    border-radius: 14px 14px 0 0;
    position: relative;
}
.stats-bar__value {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #646464;
    white-space: nowrap;
}
.stats-bar__label {
    min-height: 32px;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: #646464;
    text-align: center;
    white-space: nowrap;
}
.stats-chart__col--highlight .stats-bar {
    background: linear-gradient(180deg, #2268FD 0%, rgba(34, 104, 253, 0.92) 100%);
    box-shadow: 0 16px 36px rgba(34, 104, 253, 0.32);
}
.stats-chart__col--highlight .stats-bar__value {
    font-size: 32px;
    font-weight: 800;
    line-height: 36px;
    color: #2268FD;
    margin-bottom: 12px;
}
.stats-chart__col--highlight .stats-bar__label {
    font-size: 16px;
    line-height: 20px;
    color: #2268FD;
    font-weight: 700;
}
/* 막대 비율 (원본 유지: 31% / 40% / 53% / 75% / 100%) */
.stats-bar--h1 { height: 31%; }
.stats-bar--h2 { height: 40%; }
.stats-bar--h3 { height: 53%; }
.stats-bar--h4 { height: 75%; }
.stats-bar--h5 { height: 95%; }

/* ===== Event info box ===== */
.event-info {
    width: 100%;
    max-width: 478px;
    padding: 14px 24px;
    background: white;
    border: 1px solid #DEDEDE;
    border-radius: 16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.event-info__row {
    flex: 1 1 0;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.event-info__value { flex: 1 1 0; }

/* ===== Industry card title (single-line variant) ===== */
.industry-title-block {
    align-self: stretch;
    height: 110px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.industry-title-block--gap16 { gap: 16px; }
.industry-desc-block {
    align-self: stretch;
    height: 90px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.pixel-logo {
    height: 110px;
    padding: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.pixel-logo div { background: #212121; }

/* ===== Card product logo (SVG) ===== */
.card-product-logo {
    height: 110px;
    width: auto;
    display: block;
}

/* ===== Industry illustration ===== */
.industry-illust {
    width: 172px;
    height: 172px;
    display: block;
}

/* ===== Typography ===== */
.heading-xl { font-size: 48px; font-weight: 800; line-height: 72px; color: #212121; word-wrap: break-word; }
.heading-lg { font-size: 40px; font-weight: 700; line-height: 60px; color: #212121; word-wrap: break-word; }
.heading-md { font-size: 32px; font-weight: 700; line-height: 48px; color: #212121; word-wrap: break-word; }
.heading-sm { font-size: 24px; font-weight: 700; line-height: 36px; color: #212121; word-wrap: break-word; }
.heading-card { font-size: 28px; font-weight: 600; line-height: 40px; color: #212121; word-wrap: break-word; }

.subtitle-lg { font-size: 40px; font-weight: 400; line-height: 60px; color: #646464; word-wrap: break-word; }
.subtitle-md { font-size: 30px; font-weight: 400; line-height: 45px; color: #646464; word-wrap: break-word; }
.subtitle-md--strong { font-size: 30px; font-weight: 700; line-height: 45px; color: #212121; word-wrap: break-word; }

.body-lg { font-size: 20px; font-weight: 400; line-height: 30px; color: #646464; word-wrap: break-word; }
.body-lg--strong { font-size: 20px; font-weight: 600; line-height: 30px; color: #646464; word-wrap: break-word; }
.body-lg--label { font-size: 20px; font-weight: 600; line-height: 30px; color: #212121; word-wrap: break-word; }

.body-md { font-size: 16px; font-weight: 400; line-height: 24px; color: #646464; word-wrap: break-word; }
.body-md--strong { font-size: 16px; font-weight: 600; line-height: 24px; color: #212121; word-wrap: break-word; }
.body-md--track { letter-spacing: 0.36px; }
.caption { font-size: 10px; font-weight: 400; line-height: 15px; color: #646464; word-wrap: break-word; }

.eyebrow {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #2268FD;
    text-transform: uppercase;
    word-wrap: break-word;
}
.badge-text-blue { font-size: 16px; font-weight: 700; line-height: 24px; color: #2268FD; word-wrap: break-word; }
.badge-text-purple { font-size: 16px; font-weight: 700; line-height: 24px; color: #7E46FF; word-wrap: break-word; }
.stat-value { font-size: 48px; font-weight: 800; line-height: 72px; color: #2268FD; word-wrap: break-word; }
.btn-cta-text { font-size: 20px; font-weight: 700; line-height: 30px; color: white; text-align: center; word-wrap: break-word; }