@charset "utf-8";

/* hidden 은 sticky 를 막으므로 clip 사용 (미지원 브라우저는 hidden 으로 폴백) */
#container {overflow: hidden; overflow: clip;}

.wrap {max-width: 1680px;}

/* ---------- 공통 : 섹션 타이틀 ---------- */
.main-content .sec-head {margin-bottom: 50px;}
.main-content .sec-head--center {text-align: center;}
.main-content .sec-title {margin-top: 18px; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.32; letter-spacing: -0.04em; color: var(--color-ink);}
.main-content .sec-title strong {font-weight: 700;}
.main-content .sec-desc {margin-top: 20px; font-size: clamp(18px, 1.3vw, 24px); line-height: 1.5; color: var(--color-ink-2);}

/* ---------- 공통 : 등장 모션 ---------- */
.main-content .reveal {opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease);}
.main-content section.is-active .reveal {opacity: 1; transform: none;}

/* 텍스트 라인 마스크 */
.line {display: block; overflow: hidden; padding-bottom: .06em;}
.line > span {display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease);}
.line:nth-child(2) > span {transition-delay: .1s;}
.line:nth-child(3) > span {transition-delay: .2s;}
.main-visual.is-in .line > span,
.is-in .line > span {transform: none;}

/* ---------- 브라우저 목업 ---------- */
.browser {overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 30px 60px -20px rgba(10, 31, 92, .4), 0 0 0 1px rgba(10, 31, 92, .08);}
.browser-bar {display: flex; align-items: center; gap: 6px; height: calc(30px * var(--s, 1)); padding: 0 12px; background: #f1f4f9; border-bottom: 1px solid #e3e9f2;}
.browser-bar > i {width: 8px; height: 8px; border-radius: 50%; background: #cfd7e5;}
.browser-bar span {display: flex; align-items: center; gap: 5px; width: 58%; margin: 0 auto; padding: 3px 12px; border-radius: 6px; background: #fff; font-size: calc(9px * var(--s, 1)); color: var(--color-gray);}
.browser-bar span em {font-size: .9em; color: #7d8aa3;}
.browser-screen {position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #fff;}

.mock-site {position: absolute; inset: 0; display: flex; flex-direction: column; font-size: calc(10.2px * var(--s, 1)); line-height: 1.4; color: var(--color-ink); text-align: left;}
.mock-nav {display: flex; justify-content: space-between; align-items: center; padding: 1.1em 1.8em; border-bottom: 1px solid #eef2f8;}
.mock-logo {display: flex; align-items: center; gap: .5em; font-weight: 700; font-size: 1.15em; letter-spacing: -0.02em; color: var(--color-navy);}
.mock-logo i {width: 1.3em; height: 1.3em; border-radius: 50%; border: .3em solid var(--color-primary);}
.mock-menu {display: flex; gap: 1.5em; font-size: .95em; color: var(--color-ink-2);}
.mock-menu .on {color: var(--color-primary); font-weight: 500;}

.mock-hero {
    flex: 1.3; display: flex; align-items: center; padding: 0 1.8em; color: #fff;
    background:
        radial-gradient(circle at 80% 50%, rgba(140, 215, 245, .9) 0 7%, transparent 7.5%),
        radial-gradient(circle at 80% 50%, rgba(63, 111, 224, .55) 0 16%, transparent 16.5%),
        radial-gradient(circle at 80% 50%, rgba(63, 111, 224, .28) 0 25%, transparent 25.5%),
        radial-gradient(circle at 80% 50%, rgba(63, 111, 224, .14) 0 34%, transparent 34.5%),
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 2.2em 2.2em,
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 2.2em 2.2em,
        #0a1f5c;
}
.mock-hero small {display: block; font-size: .85em; letter-spacing: .06em; opacity: .7;}
.mock-hero strong {display: block; margin: .35em 0 .4em; font-weight: 700; font-size: 2.3em; line-height: 1.1; letter-spacing: -0.03em;}
.mock-hero p {font-size: .95em; opacity: .8;}
.mock-hero em {display: inline-block; margin-top: 1em; padding: .35em 1.1em; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; font-style: normal; font-size: .85em;}

.mock-body {flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2em; padding: 1.3em 1.8em;}
.mock-col b {display: block; margin-bottom: .5em; padding-bottom: .45em; border-bottom: 1px solid #e6ecf6; font-weight: 700; font-size: 1em; color: var(--color-navy);}
.mock-list li {display: flex; align-items: center; gap: .6em; padding: .22em 0; color: var(--color-ink-2);}
.mock-list i {width: .55em; height: .55em; border-radius: .15em; background: var(--color-primary);}
.mock-news li {display: flex; gap: .8em; padding: .22em 0; color: var(--color-ink-2);}
.mock-news time {font-weight: 500; color: var(--color-primary);}

/* =========================================================
   01. MAIN VISUAL
   ========================================================= */
.main-visual {
    --navy: #0a1f5c;
    position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center;
    min-height: clamp(760px, 100vh, 980px); padding: 120px 0 130px; overflow: hidden;
    background-color: #f6f8fc;
}

/* 세로 그리드 라인 */
.mv-lines {position: absolute; top: 0; bottom: 0; left: 4.8%; right: -7.7%; z-index: 0; display: grid; grid-template-columns: repeat(8, 1fr); pointer-events: none;}
.mv-lines i {position: relative;}
.mv-lines i::before {content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(10, 31, 92, .07); transform: scaleY(0); transform-origin: top; animation: mvLineDraw 1.6s var(--ease) both; animation-delay: calc(var(--n) * .08s + .1s);}
@keyframes mvLineDraw {to {transform: scaleY(1);}}

/* 배경 큰 글자 */
.mv-word {position: absolute; right: 3%; top: 54%; z-index: 1; transform: translateY(-50%); pointer-events: none; user-select: none;}
.mv-word-text {
    --layer1: #2f6bff;
    --layer2: #5fd0f0;
    display: block; padding: 0 .08em .06em .04em; font-weight: 700; font-size: 12.5vw; line-height: 1; letter-spacing: -0.06em; white-space: nowrap;
    color: var(--navy);
    text-shadow: .022em .018em 0 var(--layer1), .044em .036em 0 var(--layer2);
    animation: mvLayer 7s ease-in-out infinite;
}
@keyframes mvLayer {
    0%, 100% {text-shadow: .022em .018em 0 var(--layer1), .044em .036em 0 var(--layer2);}
    50%      {text-shadow: -.018em .022em 0 var(--layer1), -.036em .044em 0 var(--layer2);}
}

/* 원형 궤도 */
.mv-orbit {position: absolute; left: 71.5%; top: 54%; z-index: 2; width: min(40vw, 740px); aspect-ratio: 1; transform: translate(-50%, -50%);}
.mv-orbit-ring {position: absolute; inset: 0; border: 1px solid rgba(10, 31, 92, .16); border-radius: 50%;}
.mv-orbit-ring::before {content: ""; position: absolute; inset: 12%; border: 1px dashed rgba(10, 31, 92, .12); border-radius: 50%;}

.mv-orbit-dot {position: absolute; inset: 0; animation: mvSpin 24s linear infinite;}
.mv-orbit-dot::before {content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 6px rgba(10, 31, 92, .12), 0 0 18px 4px rgba(47, 91, 216, .35);}
@keyframes mvSpin {to {transform: rotate(360deg);}}

/* 서비스 포인트 */
.mv-points li {position: absolute;}
.mv-points .p1 {left: 14.6%; top: 14.6%; --pulse: -3s;}
.mv-points .p2 {left: 82%;  top: 11.7%; --pulse: -21.333s;}
.mv-points .p3 {left: 88%;  top: 82%; --pulse: -15.333s;}
.mv-points .p4 {left: 11.7%; top: 82%; --pulse: -8.667s;}
.mv-points button {display: grid; grid-template-columns: 36px auto; column-gap: 16px; row-gap: 2px; align-items: center; margin: -18px 0 0 -18px; overflow: visible; text-align: left; cursor: default;}
.mv-points .p2 button, .mv-points .p3 button {grid-template-columns: auto 36px; margin: -18px 0 0 18px; text-align: right; transform: translateX(-100%);}
.mv-points .p2 i, .mv-points .p3 i {grid-column: 2; grid-row: 1 / span 2;}
.mv-points .p2 b, .mv-points .p3 b {grid-column: 1; grid-row: 1;}
.mv-points .p2 span, .mv-points .p3 span {grid-column: 1; grid-row: 2;}
.mv-points i {grid-row: span 2; position: relative; width: 36px; height: 36px; border: 1px solid rgba(10, 31, 92, .2); border-radius: 50%; background: #fff;}
.mv-points i::after {content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--navy);}
.mv-points i::before {content: ""; position: absolute; inset: -1px; border: 1px solid var(--navy); border-radius: 50%; opacity: 0;}
.mv-points b {font-weight: 700; font-size: 20px; letter-spacing: .01em; color: #2b3348; white-space: nowrap;}
.mv-points span {font-size: 20px; color: #6b7387; white-space: nowrap;}

.mv-points i {animation: mvBlink 24s linear infinite; animation-delay: var(--pulse);}
.mv-points i::before {animation: mvRipple 24s ease-out infinite; animation-delay: var(--pulse);}
.mv-points b {animation: mvLabel 24s linear infinite; animation-delay: var(--pulse);}
@keyframes mvBlink {
    0%, 6%    {border-color: var(--navy);}
    14%, 100% {border-color: rgba(10, 31, 92, .2);}
}
@keyframes mvRipple {
    0%   {opacity: .45; transform: scale(1);}
    9%   {opacity: 0; transform: scale(1.7);}
    100% {opacity: 0; transform: scale(1.7);}
}
@keyframes mvLabel {
    0%, 12% {color: var(--navy);}
    18%, 100% {color: #2b3348;}
}

/* 좌측 메시지 */
.mv-inner {position: relative; z-index: 3; width: 100%;}
.mv-title {font-weight: 500; font-size: clamp(40px, 3.7vw, 70px); line-height: 1.22; letter-spacing: -0.04em; color: #111;}
.mv-title .grad {font-weight: 500; background: linear-gradient(90deg, #0a1f5c 0%, #1f47c2 60%, #2f6bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}
.mv-sub {margin-top: 30px; font-weight: 500; font-size: clamp(19px, 1.45vw, 26px); line-height: 1.55; color: #1f2638;}

.mv-copy {padding-left: 6%;}

/* 버튼 */
.mv-btns {display: flex; flex-wrap: wrap; gap: 14px; margin-top: 64px;}
.mv-btn {position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-width: 232px; height: 62px; padding: 0 8px 0 30px; border-radius: 999px; font-weight: 500; font-size: 18px; letter-spacing: -0.02em; transition: color .4s var(--ease), border-color .4s;}
.mv-btn::before {content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);}
.mv-btn:hover::before {transform: scaleX(1); transform-origin: left;}
.mv-btn span {display: grid; place-items: center; flex: 0 0 46px; height: 46px; border-radius: 50%; font-size: 16px; line-height: 1; transition: background .4s, color .4s;}
.mv-btn span i {display: block; line-height: 1; transition: transform .45s var(--ease);}
.mv-btn span i::before {font-weight: 700 !important; -webkit-text-stroke: .4px currentColor;}
.mv-btn:hover span i {transform: translateX(3px);}

.mv-btn--fill {background: var(--navy); color: #fff;}
.mv-btn--fill::before {background: var(--color-primary);}
.mv-btn--fill span {background: #fff; color: var(--navy);}
.mv-btn--fill:hover {color: #fff;}
.mv-btn--fill:hover span {color: var(--color-primary);}

.mv-btn--line {border: 1px solid rgba(10, 31, 92, .22); background: rgba(255, 255, 255, .75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--navy);}
.mv-btn--line::before {background: var(--navy);}
.mv-btn--line span {background: var(--navy); color: #fff;}
.mv-btn--line:hover {border-color: var(--navy); color: #fff;}
.mv-btn--line:hover span {background: #fff; color: var(--navy);}

.mv-btn--light {background: #fff; color: #0a1f5c;}
.mv-btn--light::before {background: var(--color-primary);}
.mv-btn--light span {background: #0a1f5c; color: #fff;}
.mv-btn--light:hover {color: #fff;}
.mv-btn--light:hover span {background: #fff; color: var(--color-primary);}

/* 하단 스크롤 */
.mv-bottom {position: absolute; left: 0; right: 0; bottom: 40px; z-index: 3; display: flex; justify-content: flex-end;}
.mv-scroll {display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 13px; letter-spacing: .06em; color: var(--color-ink);}
.mv-scroll i {position: relative; width: 1px; height: 34px; overflow: hidden; background: #d4d9e4;}
.mv-scroll i::after {content: ""; position: absolute; left: 0; top: -100%; width: 1px; height: 100%; background: var(--color-ink); animation: mvScroll 2s ease-in-out infinite;}
@keyframes mvScroll {to {top: 100%;}}

/* 첫 화면 등장 애니메이션 */
.mv-word {animation: mvWordIn 1.8s var(--ease) .1s both;}
.mv-title .line > span {animation: mvLineUp 1s var(--ease) both;}
.mv-title .line:nth-child(1) > span {animation-delay: .3s;}
.mv-title .line:nth-child(2) > span {animation-delay: .45s;}
.mv-title .line:nth-child(3) > span {animation-delay: .6s;}
.mv-sub {animation: mvFadeUp 1s var(--ease) .85s both;}
.mv-btns {animation: mvFadeUp 1s var(--ease) 1s both;}
.mv-orbit-ring {animation: mvRingIn 1.4s var(--ease) .5s both;}
.mv-points li {animation: mvFadeUp .9s var(--ease) both;}
.mv-points .p1 {animation-delay: 1.1s;}
.mv-points .p2 {animation-delay: 1.25s;}
.mv-points .p3 {animation-delay: 1.4s;}
.mv-points .p4 {animation-delay: 1.55s;}
.mv-bottom {animation: mvFade 1s ease 1.6s both;}

@keyframes mvWordIn {
    from {opacity: 0; clip-path: inset(-20% 100% -20% 0); filter: blur(6px);}
    to   {opacity: 1; clip-path: inset(-20% -5% -20% 0); filter: blur(0);}
}
@keyframes mvLineUp {
    from {transform: translateY(105%);}
    to   {transform: translateY(0);}
}
@keyframes mvFadeUp {
    from {opacity: 0; transform: translateY(24px);}
    to   {opacity: 1; transform: translateY(0);}
}
@keyframes mvFade {
    from {opacity: 0;}
    to   {opacity: 1;}
}
@keyframes mvRingIn {
    from {opacity: 0; transform: scale(.7) rotate(-30deg);}
    to   {opacity: 1; transform: scale(1) rotate(0);}
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */
.main-content {position: relative; z-index: 3; background: #fff;}
/* 섹션 스택 : 섹션이 끝까지 스크롤되면 고정되고 다음 섹션이 위로 덮으며 올라옴 (top 값은 index.php 스크립트에서 계산) */
.main-content > section {position: sticky; top: 0; background-color: #fff; box-shadow: 0 -30px 60px -30px rgba(10, 31, 92, .18);}
.main-content > section:last-child {position: relative;}

/* =========================================================
   02. ABOUT
   ========================================================= */
#section02 {padding: 150px 0 120px; overflow: hidden; background: linear-gradient(180deg, #f6f8fc 0%, #fff 45%);}
#section02 > .wrap {position: relative; z-index: 1;}

.about-glow {position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%);}
.about-glow i {position: absolute; border-radius: 50%; filter: blur(90px); opacity: .6; animation: aboutDrift 20s ease-in-out infinite alternate;}
.about-glow i:nth-child(1) {left: -8%; top: 8%; width: 560px; height: 560px; background: #d3e2fb;}
.about-glow i:nth-child(2) {right: -6%; bottom: -24%; width: 620px; height: 620px; background: #cdeef8; animation-duration: 24s; animation-delay: -6s;}
.about-glow i:nth-child(3) {left: 38%; top: 30%; width: 380px; height: 380px; background: #e2ebfb; opacity: .5; animation-duration: 28s; animation-delay: -12s;}
@keyframes aboutDrift {
    0%   {transform: translate(0, 0) scale(1);}
    50%  {transform: translate(60px, 40px) scale(1.08);}
    100% {transform: translate(-40px, 70px) scale(.95);}
}

.about-inner {position: relative; display: flex; justify-content: space-between; align-items: center; gap: 60px; max-width: 1600px; margin: 0 auto;}
.about-text {margin: 0; font-size: clamp(24px, 2.3vw, 42px); line-height: 1.5; letter-spacing: -0.04em; color: var(--color-ink);}
.about-text .line > span {white-space: nowrap;}

/* 키워드 하이라이트 */
.about-text .kw {--d: calc(var(--k) * 1.5s); position: relative; isolation: isolate; display: inline-block; margin: 0 .08em; padding: .04em .7em; line-height: 1.3; border-radius: 999px;}
.about-text .kw::before,
.about-text .kw::after {content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;}
.about-text .kw::before {border: 1px solid rgba(31, 71, 194, .3); background: rgba(195, 218, 250, .3); clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease); transition-delay: calc(.9s + var(--k) * .15s);}
.about-text .kw::after {background: #1f47c2; opacity: 0; transform: scale(.85);}
.about-inner.is-in .kw::before {clip-path: inset(0 0 0 0);}
.about-inner.is-in .kw {animation: kwText 6s var(--ease) calc(1.8s + var(--d)) infinite;}
.about-inner.is-in .kw::after {animation: kwFill 6s var(--ease) calc(1.8s + var(--d)) infinite;}
@keyframes kwFill {
    0%        {opacity: 0; transform: scale(.85);}
    6%, 22%   {opacity: 1; transform: scale(1);}
    32%, 100% {opacity: 0; transform: scale(1.06);}
}
@keyframes kwText {
    0%        {color: var(--color-ink);}
    6%, 22%   {color: #fff;}
    32%, 100% {color: var(--color-ink);}
}

/* 카드 덱 */
.deck {
    --cw: 27em; --ch: 23em; --step: 2.4em;
    --c0: rgba(31, 71, 194, .86); --c1: rgba(61, 111, 224, .78); --c2: rgba(134, 172, 240, .62); --c3: rgba(195, 218, 250, .55);
    --t0: #fff;    --t1: #fff;    --t2: #0a1f5c; --t3: #0a1f5c;
    position: relative; isolation: isolate; flex-shrink: 0; font-size: 16px; width: calc(var(--cw) + var(--step) * 3); height: calc(var(--ch) + var(--step) * 3);
    opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease) .4s, transform 1.2s var(--ease) .4s;
}
.about-inner.is-in .deck {opacity: 1; transform: none;}
.deck::before {
    content: ""; position: absolute; inset: 8% 0 -6% 12%; z-index: -1; pointer-events: none;
    background:
        radial-gradient(circle at 30% 65%, rgba(63, 111, 224, .35), transparent 55%),
        radial-gradient(circle at 78% 28%, rgba(95, 200, 240, .35), transparent 50%);
    filter: blur(30px);
}

.deck-card {
    position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column;
    width: var(--cw); height: var(--ch); padding: 2.2em 2.5em 2em; border: 1px solid rgba(255, 255, 255, .45); border-radius: 1.25em;
    background: var(--c0); color: var(--t0);
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .06);
    transform: translate(calc(var(--k) * var(--step)), calc(var(--k) * var(--step) * -1)); transform-origin: left bottom;
}
.about-inner.is-in .deck-card {animation: deckCycle 6s var(--ease) calc(1.8s + var(--k) * 1.5s - 6s) infinite;}
@keyframes deckCycle {
    0%, 22%   {transform: translate(0, 0) rotate(0); opacity: 1; z-index: 4; background: var(--c0); color: var(--t0);}
    28%       {transform: translate(-3.2em, .6em) rotate(-4deg); opacity: 0; z-index: 5; background: var(--c0); color: var(--t0);}
    30%       {transform: translate(calc(var(--step) * 3), calc(var(--step) * -3)); opacity: 0; z-index: 1; background: var(--c3); color: var(--t3);}
    36%, 47%  {transform: translate(calc(var(--step) * 3), calc(var(--step) * -3)); opacity: 1; z-index: 1; background: var(--c3); color: var(--t3);}
    53%, 72%  {transform: translate(calc(var(--step) * 2), calc(var(--step) * -2)); opacity: 1; z-index: 2; background: var(--c2); color: var(--t2);}
    78%, 97%  {transform: translate(var(--step), calc(var(--step) * -1)); opacity: 1; z-index: 3; background: var(--c1); color: var(--t1);}
    100%      {transform: translate(0, 0) rotate(0); opacity: 1; z-index: 4; background: var(--c0); color: var(--t0);}
}

.deck-head {position: relative; display: flex; flex-direction: column; gap: .3em; padding-bottom: 1em;}
.deck-head::after {content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .2;}
.deck-head small {font-weight: 500; font-size: 1em; letter-spacing: .16em; opacity: .75;}
.deck-head b {font-weight: 500; font-size: 1.75em; letter-spacing: -0.02em;}

.deck-lead {margin: auto 0; font-weight: 500; font-size: 2.1em; line-height: 1.35; letter-spacing: -0.04em;}

.deck-tags {display: flex; flex-wrap: wrap; gap: .45em;}
.deck-tags li {position: relative; padding: .3em .85em; border-radius: 999px; font-size: 1em; line-height: 1.4;}
.deck-tags li::before {content: ""; position: absolute; inset: 0; border: 1px solid currentColor; border-radius: inherit; opacity: .35;}
.deck-page {display: flex; justify-content: space-between; align-items: center; margin-top: 1.1em;}
.deck-page span {display: flex; gap: .4em;}
.deck-page i {width: 1.8em; height: 2px; background: currentColor; opacity: .25;}
.deck-page i.on {width: 3em; opacity: 1;}
.deck-page em {font-size: .95em; letter-spacing: .08em; opacity: .7;}
.deck-page em b {font-weight: 500;}

/* =========================================================
   03. PORTFOLIO
   ========================================================= */
#section03 {padding: 110px 0 100px; overflow: hidden; background: var(--color-ink); color: #fff;}
#section03 .sec-title {margin-top: 0; color: #fff;}
#section03 .sec-title .c-primary {color: #8fb0f2;}

.works-head {display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 48px;}
.works-side {display: flex; align-items: center; gap: 28px;}
.cert {display: flex; align-items: center; gap: 18px; padding-right: 28px; border-right: 1px solid rgba(255, 255, 255, .15);}
.cert-badge {flex-shrink: 0;}
.cert-badge img {display: block; width: 76px; height: auto; border-radius: 4px;}
.cert-desc {font-size: 18px; line-height: 1.6; letter-spacing: -0.03em; color: rgba(255, 255, 255, .75);}
.cert-desc strong {font-weight: 700; color: #fff;}

.svc-swiper {overflow: hidden;}

.pf {--r: 22px; position: relative; display: block; color: #fff; user-select: none;}
.pf:hover {color: #fff;}
.pf-media {position: relative; aspect-ratio: 4 / 3.2; overflow: hidden; border-radius: var(--r); background: #1b2335;}
.pf-media img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; transition: transform 1.2s var(--ease);}
.pf:hover .pf-media img {transform: scale(1.05);}

.pf-info {display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding: 20px 4px 0;}
.pf-cat {grid-column: 1; font-size: 18px; color: rgba(255, 255, 255, .6);}
.pf-name {grid-column: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; margin-top: 6px; font-weight: 500; font-size: 21px; line-height: 1.4; letter-spacing: -0.03em; word-break: keep-all;}
.pf-arrow {grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; font-size: 15px; color: #fff; transition: background .3s, color .3s, border-color .3s, transform .4s var(--ease);}
.pf:hover .pf-arrow {border-color: #fff; background: #fff; color: var(--color-navy); transform: rotate(45deg);}

.svc-ctrl {display: flex; justify-content: space-between; align-items: center; margin-top: 30px;}
.svc-arrows {display: flex; gap: 14px;}
.svc-arrows button {font-size: 22px; color: #fff; cursor: pointer; transition: opacity .3s, transform .3s;}
.svc-arrows button.swiper-button-disabled {opacity: .25; cursor: default;}
.svc-prev:not(.swiper-button-disabled):hover {transform: translateX(-3px);}
.svc-next:not(.swiper-button-disabled):hover {transform: translateX(3px);}
.svc-pagination {position: static !important; width: auto !important; display: flex; gap: 6px;}
.svc-pagination .swiper-pagination-bullet {width: 16px; height: 2px; margin: 0 !important; border-radius: 0; background: rgba(255, 255, 255, .2); opacity: 1; transition: width .4s var(--ease), background .4s;}
.svc-pagination .swiper-pagination-bullet-active {width: 40px; background: #fff;}

/* =========================================================
   04. CMS
   ========================================================= */
#section04 {padding: 90px 0 130px; overflow: hidden;}
#section04 > .wrap {position: relative; z-index: 1;}

.cms-bg {
    --g: 56px;
    position: absolute; left: 0; top: 0; bottom: 0; width: 58%; z-index: 0; pointer-events: none;
    background-image: linear-gradient(rgba(31, 71, 194, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 71, 194, .08) 1px, transparent 1px);
    background-size: var(--g) var(--g);
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 45% 50%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 70% at 45% 50%, #000 25%, transparent 75%);
}
.cms-bg i {position: absolute; left: calc(var(--x) * var(--g)); top: calc(var(--y) * var(--g)); width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 2px; background: var(--color-primary); opacity: .12; animation: cmsNode 6s ease-in-out infinite; animation-delay: var(--d);}
@keyframes cmsNode {
    0%, 100% {opacity: .12; transform: scale(1);}
    10%      {opacity: .75; transform: scale(1.3);}
    25%      {opacity: .12; transform: scale(1);}
}
.cms-grid {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 960px); gap: 70px; align-items: center;}
.cms-copy {display: flex; flex-direction: column; align-items: flex-start;}
.cms-copy .sec-title {font-size: clamp(32px, 3.6vw, 58px);}
.cms-desc {margin: 26px 0 44px; font-size: clamp(18px, 1.3vw, 22px); line-height: 1.6; color: var(--color-ink-2);}
.cms-copy .mv-btn {--navy: var(--color-ink);}

/* CMS 4분할 */
.quad {position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; aspect-ratio: 16 / 10;}
.quad-tile {position: relative; display: flex; flex-direction: column; justify-content: flex-start; padding: 40px 40px 36px; overflow: hidden; color: #fff; outline: none; transition: transform .8s var(--ease), filter .5s;}
.quad-tile--tl {border-radius: 90px 18px 70px 18px; background: linear-gradient(135deg, #0B1F4D 0%, #123B8A 55%, #1F5BC4 100%);}
.quad-tile--tr {border-radius: 18px 90px 18px 70px; background: linear-gradient(225deg, #0B1F4D 0%, #123B8A 55%, #1F5BC4 100%); text-align: right;}
.quad-tile--bl {border-radius: 18px 70px 18px 90px; background: linear-gradient(45deg, #0B1F4D 0%, #123B8A 55%, #1F5BC4 100%);}
.quad-tile--br {border-radius: 70px 18px 90px 18px; background: linear-gradient(315deg, #0B1F4D 0%, #123B8A 55%, #1F5BC4 100%); text-align: right;}

.quad-img {position: absolute; inset: 0; z-index: 0;}
.quad-img img {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease);}
.quad-img::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 18, 60, .7) 0%, rgba(6, 18, 60, .25) 55%, rgba(6, 18, 60, .1) 100%);}
.quad-tile--bl .quad-img::after, .quad-tile--br .quad-img::after {background: linear-gradient(0deg, rgba(6, 18, 60, .7) 0%, rgba(6, 18, 60, .25) 55%, rgba(6, 18, 60, .1) 100%);}
.quad-tile.is-focus .quad-img img {transform: scale(1.04);}
.quad-info {position: relative; z-index: 2; max-width: 17em;}
.quad-tile--tr .quad-info, .quad-tile--br .quad-info {margin-left: auto;}
.quad-info strong {display: block; font-weight: 700; font-size: clamp(20px, 1.5vw, 26px); line-height: 1.3; letter-spacing: -0.03em; color: #fff;}
.quad-info p {margin-top: 10px; font-size: clamp(14px, .95vw, 16px); line-height: 1.6; letter-spacing: -0.02em; color: rgba(255, 255, 255, .72);}

.quad-tile--bl, .quad-tile--br {justify-content: flex-end;}

.quad.is-open .quad-tile--tl {transform: translate(-9px, -9px);}
.quad.is-open .quad-tile--tr {transform: translate(9px, -9px);}
.quad.is-open .quad-tile--bl {transform: translate(-9px, 9px);}
.quad.is-open .quad-tile--br {transform: translate(9px, 9px);}

.quad.has-focus .quad-tile:not(.is-focus) {filter: brightness(.4) saturate(.7);}

.quad-core {position: absolute; left: 50%; top: 50%; z-index: 4; display: grid; place-items: center; align-content: center; width: 170px; height: 170px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 8px rgba(255, 255, 255, .45), 0 0 0 9px rgba(31, 71, 194, 0); transform: translate(-50%, -50%) scale(0); transition: transform .8s var(--ease) .15s, box-shadow .4s;}
.quad-core strong {font-weight: 700; font-size: 40px; letter-spacing: -0.02em; background: linear-gradient(90deg, var(--color-primary), var(--color-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent;}
.quad.is-open .quad-core {transform: translate(-50%, -50%) scale(1);}
.quad.has-focus .quad-core {box-shadow: 0 0 0 8px rgba(255, 255, 255, .45), 0 0 0 10px rgba(31, 71, 194, .55);}

/* =========================================================
   05. ARCHITECTURE
   ========================================================= */
#section05 {padding: 110px 0 120px; overflow: hidden; background: linear-gradient(180deg, #fff, #f4f7fc 40%, #fff);}
.arch-map {--s: 1.2; position: relative; height: calc(640px * var(--s) + 40px); margin-top: 20px;}
.arch-note {margin-top: 36px; text-align: center; font-size: clamp(15px, 1vw, 17px); color: var(--color-gray);}
.arch-lines {position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;}
.arch-lines line {stroke: #bccbea; stroke-width: 1; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1s var(--ease);}
.arch-map.is-in .arch-lines line {stroke-dashoffset: 0;}

.arch-orbit {position: absolute; left: 50%; top: 50%; width: calc(760px * var(--s)); height: calc(420px * var(--s)); border: 1px dashed #d6dff0; border-radius: 50%; transform: translate(-50%, -50%);}
.arch-orbit--lg {width: calc(1000px * var(--s)); height: calc(580px * var(--s)); border-style: solid; border-color: #ebf0f8;}

.arch-core {position: absolute; left: 50%; top: 50%; z-index: 2; width: calc(552px * var(--s)); opacity: 0; transform: translate(-50%, -50%) scale(.92); transition: transform 1s var(--ease), opacity 1s;}
.arch-map.is-in .arch-core {opacity: 1; transform: translate(-50%, -50%);}

.arch-node {position: absolute; left: 50%; top: 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 180px; padding: 16px 28px; border-radius: 22px; background: #fff; box-shadow: 0 12px 30px -14px rgba(10, 31, 92, .3), 0 0 0 1px #e6ecf6; opacity: 0; transform: translate(-50%, -50%) scale(.4); transition: transform 1s var(--ease), opacity .6s, background .3s; transition-delay: calc(var(--i) * .1s + .3s);}
.arch-node b {font-weight: 500; font-size: 14px; letter-spacing: .14em; color: var(--color-primary);}
.arch-node span {font-weight: 700; font-size: clamp(19px, 1.4vw, 24px); letter-spacing: -0.03em; color: var(--color-navy);}
.arch-map.is-in .arch-node {opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--x) * var(--s) * 1px), calc(var(--y) * var(--s) * 1px));}
.arch-map.is-in .arch-node {animation: archGlow 8s ease-in-out infinite; animation-delay: calc(1.6s + var(--i) * 1s);}
.arch-map.is-in .arch-node b {animation: archGlowEn 8s ease-in-out infinite; animation-delay: calc(1.6s + var(--i) * 1s);}
.arch-map.is-in .arch-node span {animation: archGlowKo 8s ease-in-out infinite; animation-delay: calc(1.6s + var(--i) * 1s);}
@keyframes archGlow {
    0%, 16%, 100% {background: #fff; box-shadow: 0 12px 30px -14px rgba(10, 31, 92, .3), 0 0 0 1px #e6ecf6;}
    4%, 11%       {background: var(--color-navy); box-shadow: 0 16px 34px -14px rgba(10, 31, 92, .55), 0 0 0 6px rgba(31, 71, 194, .14);}
}
@keyframes archGlowEn {
    0%, 16%, 100% {color: var(--color-primary);}
    4%, 11%       {color: #8fb0f2;}
}
@keyframes archGlowKo {
    0%, 16%, 100% {color: var(--color-navy);}
    4%, 11%       {color: #fff;}
}

/* =========================================================
   08. CTA
   ========================================================= */
#section08 {padding: 100px 0 100px;}

/* 숫자 통계 */
.stats {position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 110px;}
.stats::before, .stats::after {content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--color-line); transform: scaleX(0); transition: transform 1.4s var(--ease) .2s;}
.stats::before {top: 0;}
.stats::after {bottom: 0;}
section.is-active .stats::before, section.is-active .stats::after {transform: scaleX(1);}
.stat {position: relative; display: flex; flex-direction: column; padding: 44px 36px 48px;}
.stat::before {content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--color-line); transform: scaleY(0); transform-origin: top; transition: transform 1s var(--ease);}
section.is-active .stat::before {transform: scaleY(1);}
.stat:nth-child(2)::before {transition-delay: .9s;}
.stat:nth-child(3)::before {transition-delay: 1.05s;}
.stat:nth-child(4)::before {transition-delay: 1.2s;}
.stat:first-child {padding-left: 0;}
.stat:first-child::before {display: none;}
.stat-label {font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: var(--color-primary);}
.stat-num {display: flex; align-items: baseline; gap: 10px; height: clamp(64px, 5.6vw, 100px); margin: 22px 0 24px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--color-navy); white-space: nowrap;}
.stat-num em {display: flex; align-items: flex-end; height: 100%; font-style: normal; font-size: clamp(60px, 5.4vw, 96px);}
.stat:nth-child(2) .stat-num {flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px;}
.stat:nth-child(2) .stat-num em {height: auto; font-size: clamp(30px, 2.5vw, 44px); line-height: 1.1;}
.stat-num small {font-weight: 500; font-size: 13px; letter-spacing: .22em; color: var(--color-gray);}
.stat p {font-size: clamp(15px, 1.05vw, 17px); line-height: 1.6; letter-spacing: -0.02em; color: var(--color-ink-2);}

/* CTA 박스 : 블루아워 연구동 사진 + 네이비 오버레이 + 아웃라인 워터마크 */
.cta-box {
    --p: 0; --navy: #0a1f5c;
    --track: clamp(44px, 4.4vw, 76px); /* 흐르는 영문 글자 크기 */
    --track-gap: calc(var(--track) + 18px + clamp(28px, 2.6vw, 44px)); /* 영문 줄 + 여백 → 문구와 겹치지 않도록 */
    position: relative; isolation: isolate; display: flex; align-items: center;
    margin-inline: calc((100% - 100vw) / 2 * var(--p));
    padding: var(--track-gap) clamp(24px, 6vw, 110px) var(--track-gap) clamp(24px, 13vw, 240px); overflow: hidden; border-radius: calc(40px * (1 - var(--p)));
    text-align: left; color: #fff; background: #07163f url(../images/index/cta-bg.png) no-repeat 70% center / cover;
}
/* 오버레이 : 텍스트 쪽(좌) 75% → 건물 쪽(우) 65% */
.cta-box::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(6, 18, 52, .35) 0%, transparent 35%, transparent 60%, rgba(6, 18, 52, .45) 100%),
        linear-gradient(90deg, rgba(8, 22, 64, .75) 0%, rgba(8, 22, 64, .72) 38%, rgba(8, 22, 64, .65) 100%);
}
.cta-box > * {position: relative; z-index: 2;}

.cta-marquee {position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 0; pointer-events: none;}
.cta-track {display: flex; width: max-content; animation: ctaFlow 90s linear infinite;}
.cta-track--rev {animation-direction: reverse;}
.cta-track span {padding-right: .3em; font-weight: 700; font-size: var(--track); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .1);}
@keyframes ctaFlow {
    from {transform: translateX(0);}
    to   {transform: translateX(-50%);}
}

.cta-copy {display: flex; flex-direction: column; align-items: flex-start;}
.cta-box h3 {font-weight: 600; font-size: clamp(34px, 3.8vw, 64px); line-height: 1.2; letter-spacing: -0.045em; white-space: nowrap; color: #fff;}
.cta-box p {margin: 18px 0 20px; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.6; letter-spacing: -0.02em; color: rgba(255, 255, 255, .78);}
/* 제작 상담하기 : 텍스트 + 라인 + 회전 원형 배지 */
.cta-link {display: inline-flex; align-items: center; gap: 24px; color: #fff;}
.cta-link:hover {color: #fff;}
.cta-link-text {font-weight: 600; font-size: clamp(19px, 1.4vw, 24px); letter-spacing: -0.03em;}
.cta-link-line {width: 64px; height: 1px; background: rgba(255, 255, 255, .55); transition: width .6s var(--ease), background .4s;}
.cta-link:hover .cta-link-line {width: 120px; background: #fff;}
.cta-link-badge {position: relative; display: grid; place-items: center; width: 124px; height: 124px;}
.cta-link-badge svg {position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: ctaSpin 16s linear infinite;}
.cta-link-badge text {font-weight: 500; font-size: 10.5px; letter-spacing: .2em; fill: rgba(255, 255, 255, .8);}
.cta-link-badge i {display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #fff; color: #0a1f5c; font-size: 22px; line-height: 1; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 14px 30px -10px rgba(0, 0, 0, .5); transition: transform .6s var(--ease), background .4s, color .4s;}
.cta-link-badge i::before {font-weight: 700 !important; -webkit-text-stroke: .4px currentColor; transition: transform .6s var(--ease);}
.cta-link:hover .cta-link-badge i {transform: scale(1.14); color: var(--color-primary);}
.cta-link:hover .cta-link-badge i::before {transform: rotate(45deg);}
@keyframes ctaSpin {to {transform: rotate(360deg);}}
@media (prefers-reduced-motion: reduce) {
    .cta-link-badge svg {animation: none;}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1700px) {
    .works-head {flex-direction: column; align-items: flex-start; gap: 30px;}
}

@media (max-width: 1500px) {
    .arch-map {--s: 1;}
    .deck {font-size: 13px;}
}

@media (max-width: 1200px) {
    .arch-map {--s: .78;}
    .arch-core {width: calc(480px * var(--s));}
    .about-inner {gap: 50px;}
    .deck {font-size: 11px;}
}

@media (max-width: 1024px) {
    .mv-orbit {display: none;}
    .main-visual {justify-content: flex-start; padding-top: 150px;}
    .mv-copy {padding-left: 0;}
    .mv-word {top: auto; bottom: 110px; left: 4%; right: auto; transform: none;}
    .mv-word-text {font-size: 23vw;}
    .cms-grid {grid-template-columns: 1fr; gap: 50px;}
    .cms-bg {width: 100%; bottom: 50%;}
    .stats {grid-template-columns: repeat(2, 1fr);}
    .stat:nth-child(3) {padding-left: 0;}
    .stat:nth-child(3)::before {display: none;}
    .stat:nth-child(n+3) {border-top: 1px solid var(--color-line);}

    .about-inner {flex-direction: column; align-items: flex-start; gap: 90px;}
    .deck {align-self: center; font-size: 12px;}
}

@media (max-width: 860px) {
    .arch-map {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; height: auto;}
    .arch-lines, .arch-orbit {display: none;}
    .arch-core {position: relative; left: auto; top: auto; grid-column: 1 / -1; width: 100%; max-width: 576px; margin: 0 auto 20px; transform: scale(.96);}
    .arch-map.is-in .arch-core {transform: none;}
    .arch-node {position: relative; left: auto; top: auto; min-width: 0; transform: translateY(20px);}
    .arch-map.is-in .arch-node {transform: none;}
    .works-head {flex-direction: column; align-items: flex-start;}
    .works-side {flex-wrap: wrap; gap: 24px;}
    .arch-node {padding: 14px 16px;}
    .mock-site {font-size: 8.5px;}
    .quad-tile--tl {border-radius: 36px 12px 28px 12px;}
    .quad-tile--tr {border-radius: 12px 36px 12px 28px;}
    .quad-tile--bl {border-radius: 12px 28px 12px 36px;}
    .quad-tile--br {border-radius: 28px 12px 36px 12px;}
}

@media (max-width: 640px) {
    .main-visual {min-height: 700px; padding: 110px 0 120px;}
    .mv-btns {gap: 10px; margin-top: 30px;}
    .mv-btn {min-width: 0; height: 52px; gap: 14px; padding: 0 6px 0 22px; font-size: 15px;}
    .mv-btn span {flex-basis: 40px; height: 40px; font-size: 15px;}
    .mv-word {bottom: 100px;}
    .mv-bottom {bottom: 24px;}
    #section08 {padding: 70px 0 80px;}
    .stats {margin-bottom: 60px;}
    .stat {padding: 28px 16px 30px;}
    .stat:nth-child(odd) {padding-left: 0;}
    .stat p br {display: none;}
    .stat-num {flex-direction: column; align-items: flex-start; gap: 6px; height: auto; margin: 14px 0 14px;}
    .stat-num em {height: 44px; font-size: 44px;}
    .stat:nth-child(2) .stat-num em {font-size: 28px;}
    .stat-num small {font-size: 11px;}
    .cta-box {--track: 36px; padding: var(--track-gap) 20px; background-position: 65% center;}
    .cta-box h3 {font-size: 30px; white-space: normal;}
    .cta-link {gap: 16px;}
    .cta-link-line {width: 32px;}
    .cta-link-badge {width: 96px; height: 96px;}
    .cta-link-badge i {width: 48px; height: 48px; font-size: 18px;}
    .cta-box::before {background: linear-gradient(180deg, rgba(8, 22, 64, .65) 0%, rgba(8, 22, 64, .75) 100%);}
    .cta-box p br {display: none;}
    #section02 {padding: 110px 0 80px;}
    .about-text {font-size: min(24px, calc((100vw - 40px) / 22));}
    .deck {font-size: 9.5px;}
    .quad-core {width: 110px; height: 110px;}
    .quad-core strong {font-size: 26px;}
    .quad-tile {padding: 22px 16px;}
    .quad-tile--tl {border-radius: 20px 8px 16px 8px;}
    .quad-tile--tr {border-radius: 8px 20px 8px 16px;}
    .quad-tile--bl {border-radius: 8px 16px 8px 20px;}
    .quad-tile--br {border-radius: 16px 8px 20px 8px;}
    .quad-info strong {font-size: 16px;}
    .quad-info p {font-size: 12.5px;}
    #section03 {padding: 80px 0;}
    .cert-desc {font-size: 17px;}
    .cert {padding-right: 0; border-right: 0;}
}