:root{--bg:#fff;--bg2:#f5f5f7;--ink:#1d1d1f;--mute:#6e6e73;--line:#d2d2d7;--blue:#0071e3;--blue2:#0066cc;--dark:#000;--r:28px;--w:1080px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Pretendard Variable","Pretendard","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;letter-spacing:-.015em;-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:var(--blue2);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%}
.wrap{width:min(var(--w),90%);margin:0 auto}
h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.035em;font-weight:700;color:var(--ink)}
h1{font-size:clamp(2.6rem,7.4vw,5.6rem)}
h2{font-size:clamp(2rem,4.6vw,3.5rem)}
h3{font-size:1.3rem;letter-spacing:-.02em;line-height:1.25}
p{margin:0 0 1em}
.eyebrow{font-size:clamp(1rem,1.6vw,1.3rem);font-weight:600;color:var(--mute);margin-bottom:.8rem;letter-spacing:-.01em}
.mute{color:var(--mute)}
.center{text-align:center}
/* nav */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:48px;width:min(1024px,92%)}
.logo{font-weight:700;font-size:1.05rem;color:var(--ink);letter-spacing:-.03em}.logo:hover{text-decoration:none}
.logo small{font-weight:600;color:var(--mute);margin-left:.5em;font-size:.65rem;letter-spacing:.14em}
.nav{display:flex;gap:2rem;align-items:center}
.nav a{font-size:.8rem;color:#424245;font-weight:400}.nav a:hover,.nav a[aria-current]{color:#000;text-decoration:none}
.menu{display:none;background:none;border:0;font:inherit;font-size:.85rem;color:var(--ink);padding:.4em}
/* buttons */
.btn{display:inline-block;background:var(--blue);color:#fff!important;padding:.78em 1.5em;border-radius:980px;font-size:1.05rem;font-weight:400;border:1px solid var(--blue);transition:background .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.btn:hover{background:#0077ed;text-decoration:none;transform:scale(1.03)}
.btn.sm{padding:.35em .95em;font-size:.78rem}
.btn.ghost{background:transparent;color:var(--blue2)!important;border-color:var(--blue2)}.btn.ghost:hover{background:var(--blue);color:#fff!important}
.more{font-size:1.15rem;color:var(--blue2)}.more::after{content:" ›"}
/* hero */
.hero{text-align:center;padding:clamp(4.5rem,11vw,9rem) 0 clamp(3rem,7vw,6rem)}
.hero h1{max-width:12em;margin:0 auto}
.hero p.sub{font-size:clamp(1.15rem,2.2vw,1.65rem);color:var(--mute);max-width:30em;margin:1.6rem auto 2.2rem;line-height:1.4;letter-spacing:-.02em}
.hero .acts{display:flex;gap:1.6rem;justify-content:center;align-items:center;flex-wrap:wrap}
/* big numbers on black */
.black{background:var(--dark);color:#f5f5f7}.black h2,.black h3{color:#f5f5f7}.black .mute,.black p{color:#a1a1a6}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;text-align:center;padding:clamp(4rem,8vw,7rem) 0}
.stats b{display:block;font-size:clamp(2.6rem,6vw,4.8rem);font-weight:700;letter-spacing:-.04em;background:linear-gradient(90deg,#fff,#a1a1a6);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
.stats span{display:block;margin-top:.6rem;color:#a1a1a6;font-size:1rem}
/* sections */
.sec{padding:clamp(4rem,9vw,8rem) 0}
.sec.alt{background:var(--bg2)}
.sec-h{text-align:center;max-width:46rem;margin:0 auto clamp(2.5rem,5vw,4.5rem)}
.sec-h p{margin:1.2rem 0 0;font-size:clamp(1.05rem,1.8vw,1.35rem);color:var(--mute);line-height:1.45}
/* service tiles */
.cat{margin-bottom:4rem}
.cat-t{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.cat-t h3{font-size:clamp(1.5rem,2.6vw,2rem)}.cat-t span{color:var(--mute);font-size:1rem}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.tile{display:flex;flex-direction:column;justify-content:space-between;min-height:260px;background:var(--bg2);border-radius:var(--r);padding:2rem 2rem 1.8rem;color:var(--ink);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.alt .tile{background:#fff}
.tile:hover{transform:scale(1.015);box-shadow:0 18px 44px rgba(0,0,0,.1);text-decoration:none}
.tile i{font-style:normal;font-size:.8rem;font-weight:600;color:var(--mute);letter-spacing:.06em}
.tile h3{font-size:clamp(1.5rem,2.4vw,2rem);margin:.5rem 0 .7rem}
.tile p{color:var(--mute);font-size:1rem;line-height:1.45;margin:0}
.tile u{text-decoration:none;color:var(--blue2);margin-top:1.4rem;font-size:1rem}.tile u::after{content:" ›"}
.tile.wide{grid-column:span 2;min-height:220px}
/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{background:#fff;border-radius:var(--r);padding:2rem 1.6rem}
.step i{font-style:normal;font-size:2.6rem;font-weight:700;color:var(--blue);letter-spacing:-.04em;line-height:1}
.step h3{margin:1.2rem 0 .6rem}.step p{color:var(--mute);font-size:.97rem;margin:0;line-height:1.5}
/* principles (dark) */
.pr{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.pr div{background:#1d1d1f;border-radius:var(--r);padding:2.2rem}
.pr div:first-child{grid-column:span 2;padding:3rem 2.2rem;text-align:center}
.pr div:first-child h3{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.pr h3{margin-bottom:.7rem}.pr p{margin:0;font-size:1.02rem;line-height:1.5}
/* faq */
.faq{max-width:760px;margin:0 auto}
details{border-bottom:1px solid var(--line);padding:1.3rem 0}
summary{font-size:1.2rem;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;letter-spacing:-.02em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--mute);font-size:1.6rem;line-height:1;transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:.9rem 0 0;color:var(--mute);line-height:1.55}
/* cta */
.cta{background:var(--bg2);text-align:center;padding:clamp(4rem,9vw,7rem) 0}
.cta h2{max-width:14em;margin:0 auto}.cta p{color:var(--mute);font-size:1.25rem;margin:1.2rem 0 0}
.cta .acts{display:flex;gap:1.6rem;justify-content:center;align-items:center;margin-top:2rem;flex-wrap:wrap}
/* detail pages */
.crumb{font-size:.8rem;color:var(--mute);padding:1.2rem 0 0}.crumb a{color:var(--mute)}
.page-h{text-align:center;padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem)}
.page-h h1{font-size:clamp(2.4rem,6vw,4.4rem);max-width:14em;margin:0 auto}
.page-h p.lede{font-size:clamp(1.1rem,2vw,1.5rem);color:var(--mute);max-width:32em;margin:1.4rem auto 0;line-height:1.4}
.two{display:grid;grid-template-columns:1fr 1.7fr;gap:3rem;padding:2.6rem 0;border-top:1px solid var(--line)}
.two h2{font-size:1.5rem;letter-spacing:-.03em}
.two ul,.two ol{margin:0;padding-left:1.2em}.two li{margin:.5em 0;line-height:1.55}
.note{background:var(--bg2);border-radius:20px;padding:1.5rem 1.7rem;margin:0;line-height:1.6}
.note b{display:block;margin-bottom:.4rem}
.tags span{display:inline-block;background:var(--bg2);border-radius:99px;padding:.2em .9em;font-size:.8rem;margin:0 .4em .4em 0;color:var(--mute)}
.row{display:grid;grid-template-columns:2.6rem 1fr 1.6fr 1rem;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line);color:var(--ink)}
.row:hover{text-decoration:none;background:var(--bg2)}.row i{font-style:normal;font-size:.8rem;color:var(--mute)}.row em{font-style:normal;color:var(--mute);font-size:.92rem}.row u{text-decoration:none;color:var(--blue2)}
.audit{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.audit div{background:var(--bg2);border-radius:20px;padding:1.2rem 1.4rem}.audit b{display:block;margin-bottom:.2rem}.audit span{color:var(--mute);font-size:.95rem;line-height:1.45;display:block}
form.f{display:grid;gap:1rem;max-width:620px}
label{font-weight:600;font-size:.9rem;display:grid;gap:.4rem}
input,select,textarea{font:inherit;padding:.85em 1em;border:1px solid var(--line);border-radius:14px;background:#fff;width:100%}
input:focus,select:focus,textarea:focus{outline:4px solid rgba(0,113,227,.25);border-color:var(--blue)}
.chk{display:flex;gap:.6rem;font-weight:400;align-items:flex-start;font-size:.88rem;color:var(--mute)}.chk input{width:auto;margin-top:.35em}
.f .btn{justify-self:start;cursor:pointer;font:inherit;font-size:1.05rem}
/* article */
.art{max-width:700px;margin:0 auto;padding:1.5rem 0 5rem}.art h2{margin:2.6rem 0 1rem;font-size:1.7rem}.art li{margin:.5em 0;line-height:1.6}.art p{line-height:1.65}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{display:block;background:var(--bg2);border-radius:var(--r);padding:1.8rem;color:var(--ink);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.card:hover{transform:scale(1.02);text-decoration:none}.card h3{margin:.8rem 0}.card p{color:var(--mute);font-size:.97rem;line-height:1.5;margin:0}
/* footer */
.ft{background:var(--bg2);color:var(--mute);padding:2.5rem 0 2rem;font-size:.78rem;line-height:1.6}
.ft .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding-bottom:1.6rem;border-bottom:1px solid var(--line)}
.ft h4{color:var(--ink);margin:0 0 .6rem;font-size:.78rem;font-weight:600}.ft a{color:var(--mute);display:block;padding:.15em 0}.ft a:hover{color:var(--ink)}
.ft .logo{color:var(--ink);font-size:1rem}
.ft .small{padding-top:1.2rem;font-size:.74rem}
/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media(max-width:860px){
 .tiles,.steps,.pr,.cards,.audit,.stats,.two,.ft .cols{grid-template-columns:1fr}
 .tile.wide,.pr div:first-child{grid-column:auto}.tile{min-height:200px}
 .two{gap:1rem}.row{grid-template-columns:2.2rem 1fr 1rem}.row em{display:none}
 .nav{display:none;position:absolute;top:48px;left:0;right:0;background:rgba(255,255,255,.96);padding:1rem 5%;flex-direction:column;align-items:flex-start;gap:1rem;border-bottom:1px solid var(--line)}
 .nav.open{display:flex}.menu{display:block}.nav a{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}

/* ===== v3: Bridge concept ===== */
:root{--g1:#0071e3;--g2:#6e56ff;--g3:#ff5e8a}
.grad{background:linear-gradient(95deg,var(--g1),var(--g2) 55%,var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
/* hero aurora */
.hero2{position:relative;overflow:hidden;text-align:center;padding:clamp(5rem,12vw,10rem) 0 0}
.aur{position:absolute;inset:-10% -10% auto -10%;height:90%;pointer-events:none;filter:blur(70px);opacity:.55}
.aur i{position:absolute;border-radius:50%;animation:drift 18s ease-in-out infinite alternate}
.aur i:nth-child(1){width:46vw;height:46vw;left:4%;top:0;background:radial-gradient(closest-side,#8fc3ff,transparent)}
.aur i:nth-child(2){width:40vw;height:40vw;right:6%;top:6%;background:radial-gradient(closest-side,#c3b4ff,transparent);animation-delay:-6s}
.aur i:nth-child(3){width:34vw;height:34vw;left:34%;top:30%;background:radial-gradient(closest-side,#ffc2d6,transparent);animation-delay:-12s}
@keyframes drift{to{transform:translate(6vw,4vw) scale(1.12)}}
.hero2 .wrap{position:relative}
.hero2 h1{max-width:11em;margin:0 auto;font-size:clamp(2.8rem,8vw,6.6rem);line-height:1.04}
.hero2 .sub{font-size:clamp(1.15rem,2.2vw,1.65rem);color:var(--mute);max-width:30em;margin:1.6rem auto 2.2rem;line-height:1.4}
.hero2 .acts{display:flex;gap:1.6rem;justify-content:center;align-items:center;flex-wrap:wrap}
.arch{display:block;width:min(1100px,100%);margin:clamp(2rem,5vw,4rem) auto 0;height:auto}
.arch .deck{stroke:#1d1d1f;stroke-width:3;stroke-linecap:round}
.arch .cable{fill:none;stroke:url(#gl);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.2s .3s cubic-bezier(.2,.8,.2,1) forwards}
.arch .hang{stroke:#c7c7cc;stroke-width:1.5;opacity:0;animation:fade .8s 1.8s forwards}
.arch .nd{fill:#fff;stroke:#1d1d1f;stroke-width:3;opacity:0;animation:fade .6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes fade{to{opacity:1}}
/* scene (sticky) */
.scene{position:relative;height:460vh;background:#000;color:#f5f5f7}
.stick{position:sticky;top:0;height:100vh;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(5rem,9vh,7rem) 0 3rem;overflow:hidden}
.stick .eyebrow{color:#86868b;text-align:center}
.scene h2{color:#f5f5f7;text-align:center;max-width:14em;margin:0 auto}
.scene .stage{position:relative;display:grid;place-items:center;min-height:0}
.scene svg{width:min(1100px,92vw);height:auto;max-height:46vh;overflow:visible}
.scene .deck{stroke:#3a3a3c;stroke-width:3;stroke-linecap:round}
.scene .base{fill:none;stroke:#2c2c2e;stroke-width:5;stroke-linecap:round}
.scene .live{fill:none;stroke:url(#gl2);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
.scene .hang{stroke:#2c2c2e;stroke-width:1.5}
.scene .nd{fill:#000;stroke:#48484a;stroke-width:3;transition:fill .4s,stroke .4s,r .4s}
.scene .nd.on{fill:#fff;stroke:#fff}
.scene .nl{fill:#86868b;font-size:22px;font-weight:600;text-anchor:middle;transition:fill .4s}
.scene .nl.on{fill:#fff}
.caps{position:relative;min-height:9.5rem;text-align:center;padding:0 5%}
.cap{position:absolute;left:0;right:0;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s;pointer-events:none}
.cap.on{opacity:1;transform:none;pointer-events:auto}
.cap h3{font-size:clamp(1.6rem,3.4vw,2.6rem);color:#fff;margin-bottom:.6rem}
.cap p{color:#a1a1a6;max-width:34em;margin:0 auto;font-size:1.1rem;line-height:1.5}
.cap a{display:inline-block;margin-top:.8rem;color:#2997ff}
/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.bt{position:relative;border-radius:var(--r);padding:2rem;background:var(--bg2);overflow:hidden;min-height:320px;display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;transform-style:preserve-3d;will-change:transform}
.bt:hover{box-shadow:0 24px 60px rgba(0,0,0,.12)}
.bt::before{content:"";position:absolute;width:60%;aspect-ratio:1;right:-18%;top:-24%;border-radius:50%;background:radial-gradient(closest-side,var(--tint),transparent);opacity:.7;pointer-events:none}
.bt .ic{width:46px;height:46px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:1.2rem}
.bt h3{font-size:clamp(1.6rem,2.8vw,2.3rem);margin-bottom:.6rem}
.bt p{color:var(--mute);margin:0 0 1.4rem;max-width:26em;line-height:1.45}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto}
.chips a{background:rgba(255,255,255,.85);border:1px solid rgba(0,0,0,.06);border-radius:99px;padding:.35em .9em;font-size:.88rem;color:var(--ink);transition:background .2s,color .2s}
.chips a:hover{background:var(--ink);color:#fff;text-decoration:none}
.b1{grid-column:span 4;--tint:#b8d8ff}.b2{grid-column:span 2;--tint:#d9ccff}
.b3{grid-column:span 3;--tint:#ffd0de}.b4{grid-column:span 3;--tint:#ffe3b8}
.b5{grid-column:span 6;--tint:#c4f0d8;min-height:260px}
/* report preview */
.rep{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.rep h2{margin-bottom:1rem}.rep p{color:var(--mute);font-size:1.15rem;line-height:1.5}
.dev{background:#fff;border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.05);padding:1.4rem 1.6rem 1.8rem;position:relative}
.dev .bar{display:flex;gap:.4rem;margin-bottom:1.2rem}.dev .bar i{width:11px;height:11px;border-radius:50%;background:#e5e5ea}
.dev .tag{position:absolute;right:1.4rem;top:1.1rem;font-size:.72rem;color:var(--mute);border:1px solid var(--line);border-radius:99px;padding:.1em .7em}
.dev h4{margin:0 0 .2rem;font-size:1rem}.dev small{color:var(--mute)}
.kp{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.2rem 0}
.kp div{background:var(--bg2);border-radius:16px;padding:.9rem 1rem}.kp b{display:block;font-size:1.5rem;letter-spacing:-.03em}.kp span{font-size:.75rem;color:var(--mute)}
.chart{display:flex;align-items:flex-end;gap:10px;height:130px;padding-top:.6rem}
.chart i{flex:1;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--g2),var(--g1));height:var(--h);transform-origin:bottom;transform:scaleY(0);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.dev.in .chart i{transform:scaleY(1)}
.chart i:nth-child(2){transition-delay:.08s}.chart i:nth-child(3){transition-delay:.16s}.chart i:nth-child(4){transition-delay:.24s}.chart i:nth-child(5){transition-delay:.32s}.chart i:nth-child(6){transition-delay:.4s}.chart i:nth-child(7){transition-delay:.48s}
/* bridge steps (process) */
.bsteps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:2.6rem}
.bsteps::before{content:"";position:absolute;left:2%;right:2%;top:.9rem;height:2px;background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3))}
.bsteps .step{position:relative;background:transparent;padding:1.2rem 0 0}
.bsteps .step::before{content:"";position:absolute;top:-1.95rem;left:0;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--g2)}
.bsteps .step i{font-size:1rem;color:var(--mute)}
@media(max-width:860px){
 .bento{grid-template-columns:1fr}.b1,.b2,.b3,.b4,.b5{grid-column:auto}
 .rep,.bsteps{grid-template-columns:1fr}.bsteps::before{display:none}.bsteps .step::before{display:none}
 .scene{height:auto}.stick{position:static;height:auto;display:block;padding:4rem 0}.scene svg{max-height:none}.caps{min-height:0}.cap{position:static;opacity:1;transform:none;margin-bottom:1.8rem}
 .kp{grid-template-columns:1fr 1fr 1fr}
}