*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Pretendard Variable','Pretendard',sans-serif;background:#fff;color:#0F172A;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ── 진행바 ── */
#prog{position:fixed;top:0;left:0;height:2px;background:#4F46E5;z-index:9999;width:0;transition:width .1s linear;pointer-events:none}

.gnb-logo{font-size:0;font-weight:800;letter-spacing:-.02em;background: url(/images/pointweb_logo.svg) no-repeat; width: 160px; height: 35px}


/* ── [C] 스크롤 페이드인 공통 ── */
.fade-up{opacity:0;transform:translateY(32px);transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1)}
.fade-up.in{opacity:1;transform:translateY(0)}
.fade-up.d1{transition-delay:.1s}
.fade-up.d2{transition-delay:.18s}
.fade-up.d3{transition-delay:.26s}
.fade-up.d4{transition-delay:.34s}
.fade-up.d5{transition-delay:.42s}

/* ── 공통 섹션 ── */
.sec-kicker{font-size:20px;font-weight:700;text-transform:uppercase;color:#4F46E5;margin-bottom:14px}
.sec-h2{font-size:clamp(34px,4vw,56px);font-weight:700;line-height:1.1;color:#0F172A;margin-bottom:52px;word-break:keep-all}
.sec-h2 em{color:#4F46E5;font-style:normal}
.sec-h2-light{color:#F8FAFC}
.sec-h2-light em{color:#818CF8}

.txtcenter { text-align: center;}
/* ══════════════════════════════
   섹션 1 — 히어로
══════════════════════════════ */
.ctabox { padding: 140px 0}
.hero-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(79,70,229,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(79,70,229,.03) 1px,transparent 1px);background-size:72px 72px;pointer-events:none}
.hero-blob{position:absolute;width:720px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(79,70,229,.07) 0%,transparent 65%);top:-200px;right:-160px;pointer-events:none;animation:blobFloat 8s ease-in-out infinite}
@keyframes blobFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-24px) scale(1.04)}}



50%{opacity:.2}}

/* [A] 타이핑 효과 */




50%{border-color:transparent}}

.hero-sub strong{color:rgba(255,255,255,0.9);font-weight:600}

.btn-p{font-size:17px;font-weight:700;background:#4F46E5;color:#fff;padding:16px 38px;border-radius:24px;transition:all .2s;box-shadow:0 4px 20px rgba(79,70,229,.28);border:none;cursor:pointer;font-family:inherit}
.btn-p:hover{background:#3730A3;transform:translateY(-2px);box-shadow:0 8px 32px rgba(79,70,229,.42)}
.btn-s{font-size:16px;font-weight:600;color:#64748B;transition:color .2s;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.btn-s:hover{color:#0F172A}

/* [B] 히어로 통계 카운트업 */


.hs:last-child{border-right:none}

.hs-n sup{font-size:12px;color:#4F46E5;font-weight:700}


/* ══════════════════════════════
   섹션 2 — 신뢰수치
══════════════════════════════ */
.trust{width:100%;padding:140px 64px;background:#F8FAFC;border-top:1px solid #E2E8F0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.trust-card{ padding:44px 36px;background:#fff;transition:border-color .2s,transform .2s; border-radius: 20px}
/* .trust-card{border:1.5px solid #E2E8F0;border-radius:20px;padding:44px 36px;background:#fff;transition:border-color .2s,transform .2s} */

.trust-card:hover{border:1.5px solid #4F46E5; transform:translateY(-3px)}
.tc-n{font-size:56px;font-weight:700;color:#0F172A;letter-spacing:-.04em;line-height:1;margin-bottom:20px}
.tc-n sup{font-size:40px;color:#4F46E5;top: 12px;position: relative;left: 6px;}
.tc-l{font-size:20px;color:#64748B;font-weight:bold;margin-bottom:10px}
.tc-d{font-size:17px;color: #494949;font-weight: 600;line-height:1.5;/* padding-left:12px; *//* border-left:2px solid #E2E8F0; */word-break: keep-all;}


/* ══════════════════════════════
   섹션 3 — 포트폴리오 미리보기
══════════════════════════════ */
.portfolio-prev{width:100%;padding:160px 64px;background:#fff;border-top:1px solid #F1F5F9;}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px;}
.pf-card{position:relative;display:block;overflow:hidden;border-radius:20px;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s;}
.pf-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.12);}
.pf-thumb{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:20px;background:none;}
.pf-thumb::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:65%;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));z-index:1;}
.pf-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:20px;transition:transform .35s ease;}
.pf-card:hover .pf-thumb img{transform:scale(1.04);}

.pf-stat-badge{display:none!important;  position:absolute;right:10px;bottom:10px;z-index:3;background:rgba(15,23,42,.72);color:#fff;font-size:14px;font-weight:700;padding:5px 10px;border-radius:8px;text-align:center;backdrop-filter:blur(4px);}
.pf-body{position:absolute;left:0;bottom:0;width:100%;padding:28px;z-index:2;text-align:left;color:#fff;}
.pf-badge{display:none!important;}
.pf-title{font-size:24px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.35;}
.pf-desc{display:none;}
.pf-more{text-align:center;}
.pf-more-btn{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#fff;border:1.5px solid #4F46E5;border-radius:12px;padding:13px 28px;transition:all .2s;background:#4F46E5;}

.pf-more-btn:hover{background:#EEF2FF;color:#4F46E5;border:1.5px solid #4F46E5;}


/* ══════════════════════════════
   섹션 4 — 업종별 제작 (다크)
══════════════════════════════ */
.industry{width:100%;padding:96px 64px}
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ind-card{transition:all .25s ease;border-radius:20px;padding:26px 22px;background: #f8f8f8;transition:all .2s;display:flex;gap:15px;opacity:0;text-align: center;/* text-align: center; */transform:translateY(24px);align-items: center;/* width: 100%; */flex-direction: column;}
.ind-card.in{opacity:1;transform:translateY(0);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1),border-color .2s,background .2s,color .2s}
.ind-card:hover{background:var(--cc);}
.ind-icon{width:70px;height: 70px;border-radius:20px;background:rgba(255,255,255,.12);display:flex;overflow:hidden;margin-bottom: 10px;text-align: center;}
.ind-icon img{width: 100%;object-fit:contain;display:block}
.ind-name{font-size:26px;font-weight:700;color:#202020;letter-spacing:-.01em;transition:color .2s}
.ind-desc{font-size:18px;color:#787878;line-height:1.6;flex:1;transition:color .2s}
.ind-link{background: #fff;font-size:16px;font-weight:600;color:var(--cc);align-items:center;gap:4px;transition:gap .15s,color .2s;padding: 10px 0;border-radius: 12px;text-align: center;/* border:1px solid var(--cc); */width: 100%;}
.ind-card:hover .ind-name{color:#fff}
.ind-card:hover .ind-desc{color:rgba(255,255,255,.82)}
.ind-card:hover .ind-link{color:#fff; gap:8px; background: rgb(0 0 0 / 30%);}
.ind-card:hover .ind-icon{background:#fff}



.industry-grid .ind-card:nth-child(1) .ind-icon{background:#f5f4ff;}
.industry-grid .ind-card:nth-child(2) .ind-icon{background:#fff6ef;}
.industry-grid .ind-card:nth-child(3) .ind-icon{background:#eaf7ff;}
.industry-grid .ind-card:nth-child(4) .ind-icon{background:#f1fef5;}
.industry-grid .ind-card:nth-child(5) .ind-icon{background:#ffeff2;}
.industry-grid .ind-card:nth-child(6) .ind-icon{background:#fff8e7;}
.industry-grid .ind-card:nth-child(7) .ind-icon{background:#e7f8fe;}
.industry-grid .ind-card:nth-child(8) .ind-icon{background:#eafbfd;}

/* 🔥 카드별 배경 */
/* .industry-grid .ind-card:nth-child(1){background:#f5f4ff;}
.industry-grid .ind-card:nth-child(2){background:#fff6ef;}
.industry-grid .ind-card:nth-child(3){background:#eaf7ff;}
.industry-grid .ind-card:nth-child(4){background:#f1fef5;}
.industry-grid .ind-card:nth-child(5){background:#ffeff2;}
.industry-grid .ind-card:nth-child(6){background:#fff8e7;}
.industry-grid .ind-card:nth-child(7){background:#e7f8fe;}
.industry-grid .ind-card:nth-child(8){background:#eafbfd;} */

.ind-card::before{  content:"";position:absolute;inset:0; border-radius: 20px;  background:var(--cc);  opacity:0;  transition:opacity .25s ease;  z-index:0;}
.ind-card > *{position:relative;z-index:1;}
.ind-card:hover::before{opacity:1;}


/* ══════════════════════════════
   섹션 5 — 고객 한마디
══════════════════════════════ */
.reviews{width:100%; margin:120px 0;overflow:hidden;}
.reviews .layoutbox{width:100%;max-width:none;padding: 100px 0 140px;background: #4f46e5;border-radius: 999px;}
.reviews .txtcenter{padding:0 64px}

.review-slide-wrap{width:100%;margin-top:48px;cursor:grab;touch-action:pan-y}
.review-slide-wrap.is-dragging{cursor:grabbing}
.review-grid{display:flex;gap:20px;width:max-content;will-change:transform;user-select:none}
.review-grid.is-moving{animation:none}
.review-card{width:380px;min-height:290px;background:#fff;border:1.5px solid #E2E8F0;border-radius:20px;padding:32px 28px;transition:border-color .2s,box-shadow .2s;display:flex;flex-direction:column;gap:14px;flex-shrink:0;}
.review-grid.is-moving{animation:none;}
.review-slide-wrap:hover .review-grid{animation-play-state:unset;}
.review-card:nth-child(odd){transform:translateY(-10px)}
.review-card:nth-child(even){transform:translateY(20px)}

.review-quote{ display: none; font-size:32px;color:#c7cde0;font-weight:900;line-height:1;margin-bottom:-8px}
.review-txt{font-size:17px;color:#0F172A;line-height:1.5;font-weight:500;word-break:keep-all;flex:1}
.review-result{font-size:17px;font-weight:700;color:#4F46E5;background:#EEF2FF;padding:12px 15px;border-radius:8px;display:inline-block}
.review-meta{display:flex;align-items:center;gap:10px}
.review-avatar{ overflow: hidden;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.review-avatar img { width:100%}
.review-name{font-size:18px;font-weight:600;color:#0F172A}
.review-org{font-size:15px;color:#94A3B8;margin-top:8px}
.reviews .sec-h2,
.reviews .sec-h2 em,
.reviews .sec-kicker{color:#fff}


@media(max-width:1280px){

  .pf-card img { border-radius: 15px;}
  .pf-title { font-size: 18px}
  .reviews{width:calc(100% - 40px);padding:64px 0;border-radius:40px;margin:80px auto;overflow:hidden;}
  .reviews .layoutbox{width:100%;}
  .reviews .txtcenter{padding:0 20px;}
  .review-slide-wrap{width:100%; margin-top:36px;}
  .review-grid{gap:16px;}
  .review-card{width:280px;min-height:280px;padding:24px 20px;}
  .review-card:nth-child(odd){transform:translateY(-10px);}
  .review-card:nth-child(even){transform:translateY(10px);}
  .review-name{font-size:16px;}
  .review-org{font-size:13px;margin-top:4px;}
  .review-txt{font-size:15px;}
  .review-result{font-size:14px;}
  .pf-thumb { background: none}
}


/* ══════════════════════════════
   섹션 6 — 진행 프로세스
══════════════════════════════ */
.process{width:100%;padding:160px 0; background: #f9f9f9}
.process-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin:80px 0;--bar-width:0%;}
.process-steps::before{content:'';position:absolute;top:30px;left:10%;right:10%;height:3px;background:rgba(79,70,229,.15);border-radius:999px;}
.process-steps::after{content:'';position:absolute;top:30px;left:10%;width:var(--bar-width);height:3px;background:#4F46E5;border-radius:999px;transition:width 1.8s ease;}
.proc-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;position:relative;z-index:1;}
.proc-num{width:60px;height:60px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;border:2px solid #C7D2FE;font-weight:700;color:#4F46E5;box-shadow:0 0 0 2px rgba(79,70,229,.08);transition:all .35s ease;}
.proc-step.is-on .proc-num{animation:pop .4s ease;transform:scale(1.18);background:#4F46E5;color:#fff;border-color:#4F46E5;box-shadow:0 0 0 8px rgba(79,70,229,.2),0 0 24px rgba(79,70,229,.6);}
.proc-label{font-size:22px;font-weight:700;color:#fff;line-height:1.35;margin:15px 0 10px;background:#4F46E5;padding:12px 20px;border-radius:15px;}
.proc-period{font-size:18px;color:#282828;line-height:1.6;font-weight:600;border-radius:15px;}

.process-cta{text-align:center;margin-top:48px;}
.process-cta a{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color: #362ec0;border: 1.5px solid #362ec0;border-radius:12px;padding:13px 28px;transition:all .2s;}
.process-cta a:hover{background:#362ec0;color:#fff;}


@keyframes pop{
  0%{transform:scale(.8);}
  70%{transform:scale(1.2);}
  100%{transform:scale(1.18);}
}

/* ══════════════════════════════
   섹션 7 — FAQ + CTA
══════════════════════════════ */
.faq-cta{width:100%;padding:96px 64px;background:#fff;border-top:1px solid #F1F5F9}
.faq-cta-inner{display:flex;gap:50px;align-items:start}
.faq-cta-inner:first-child div { flex: 1}
/* .faq-cta-inner{display:grid;grid-template-columns:1fr 480px;gap:80px;align-items:start} */
.faq-wrap{display:flex;flex-direction:column;gap:10px}
/* [F] 아코디언 */
.faq-item{border:1.5px solid #c5c9ce;border-radius:14px;overflow:hidden;transition:border-color .2s}
.faq-item.open{border-color:#4F46E5}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:25px 22px;cursor:pointer;gap:12px;user-select:none}
.faq-q-txt{font-size:18px;font-weight:600;color:#0F172A;line-height:1.4;word-break:keep-all}
.faq-icon{width:24px;height:24px;border-radius:50%;background:#F1F5F9;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s,transform .3s;font-size:14px;color:#64748B}
.faq-item.open .faq-icon{background:#4F46E5;color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1),padding .35s}
.faq-item.open .faq-a{max-height:200px}
.faq-a-inner{padding:15px 22px 20px; word-break: keep-all;font-size:16px;color:#475569;line-height:1.8;border-top:1px solid #F1F5F9}
/* CTA 폼 */
.cta-box{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:20px;padding:36px}
.cta-box-kicker{font-size:20px;font-weight:700;text-transform:uppercase;color:#4F46E5;margin-bottom:14px}
.cta-box-h2{font-size:clamp(34px,3vw,62px);font-weight:700;letter-spacing:-.04em;line-height:1.2;color:#0F172A;margin-bottom:26px;word-break:keep-all}
.cta-box-h2 em{color:#4F46E5;font-style:normal}
.cta-box-sub{font-size:15px;color:#64748B;line-height:1.7;margin-bottom:24px}
.cf-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.cf-chip{font-size:18px;color:#475569;background:#fff;border:1.5px solid #E2E8F0;border-radius:10px;padding:7px 14px;cursor:pointer;transition:all .15s;font-family:inherit}
.cf-chip:hover{border-color:#4F46E5;color:#4F46E5}
.cf-chip.on{background:#4F46E5;border-color:#4F46E5;color:#fff}
.cf-label{font-weight:700;color:#475569;display:block;margin-bottom:7px}
.cf-label span { font-size: 15px}
.cf-input{width:100%;background:#fff;border:1.5px solid #E2E8F0;border-radius:10px;padding:15px;font-size:16px;color:#0F172A;font-family:inherit;transition:border-color .2s;margin-bottom:20px;display:block;-webkit-appearance:none;-webkit-appearance:none;appearance:none}
.cf-input:focus{outline:none;border-color:#4F46E5;box-shadow:0 0 0 3px rgba(79,70,229,.08)}.cf-input:focus-visible{outline:2px solid #4F46E5;outline-offset:1px}
.cf-input::placeholder{color:#939eac}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.cf-row .cf-input{margin-bottom:0}
.cf-drop{border:1.5px dashed #E2E8F0;border-radius:10px;background:#fff;padding:14px;text-align:center;cursor:pointer;transition:border-color .2s;position:relative;margin-bottom:14px}
.cf-drop:hover{border-color:#4F46E5}
.cf-drop input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.cf-drop-txt{font-size:15px;color:#64748B;line-height:1.55}
.cf-drop-txt strong{color:#4F46E5;font-weight:600}
.cf-drop-ext{font-size:15px;color:#94A3B8;margin-top:3px}
.cf-file-list{margin-bottom:14px;display:flex;flex-direction:column;gap:5px}
.cf-file-item{display:flex;align-items:center;justify-content:space-between;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:7px;padding:6px 10px;font-size:13px;color:#475569}
.cf-file-del{color:#94A3B8;font-size:16px;line-height:1;cursor:pointer;transition:color .15s}
.cf-file-del:hover{color:#E24B4A}
.cf-btn{width:100%;padding:16px;border-radius:12px;background:#4F46E5;color:#fff;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s;border:none;margin-top:6px}
.cf-btn:hover{background:#3730A3;transform:translateY(-2px);box-shadow:0 8px 28px rgba(79,70,229,.4)}
.cf-note{font-size:15px;color:#94A3B8;text-align:center;margin-top:12px;line-height:1.6}
.cf-note strong{color:#64748B}

.cta-sub { font-size: 19px; color: #555; display: block; margin-bottom: 40px; line-height: 1.5}




/* ── 반응형 ── */
@media(max-width:1100px){
  .faq-cta-inner{ flex-direction: column; }
  .gnb-ham span { background: #fff !important}
}


@media(max-width:1024px){
  -grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid,.review-grid,.pf-grid{grid-template-columns:1fr 1fr}.trust-grid{grid-template-columns:1fr 1fr}
  .process-steps{grid-template-columns:repeat(3,1fr);gap:32px}
  .process-steps::before{display:none}
  .trust-card { padding: 24px}
  .tc-n { font-size: 40px}
  .tc-n sup { font-size: 30px}
  .process-steps::before,
  .process-steps::after{display:none;}
  .proc-step.is-on .proc-num{transform:none;background:#EEF2FF;color:#4F46E5;border-color:#C7D2FE;box-shadow:0 0 0 6px rgba(79,70,229,.08);}
  .reviews .layoutbox { border-radius: 100px}

}
@media(max-width:767px){

  .proc-label { font-size: 18px; margin:10px 0 0;width: 100%; padding: 10px 0}
  .proc-period { font-size: 16px;}
  .hero{padding:80px 20px 60px}
  .hero-inner{align-items:center;text-align:center}
  .hero-h1,.hero-h1-sub{font-size:clamp(38px,10vw,60px);justify-content:center}
  .hero-btns{justify-content:center}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .hs:nth-child(2){border-right:none}
  .hs:nth-child(3),.hs:nth-child(4){border-top:1px solid #E2E8F0}
  .trust,.portfolio-prev,.process,.faq-cta{padding:64px 20px}
  .reviews {padding:64px 0}
  .trust-grid{grid-template-columns:1fr}
  .pf-grid,.review-grid{grid-template-columns:1fr}
  .industry{padding:64px 20px}
  .industry-grid{grid-template-columns:1fr 1fr}
  .process-steps{grid-template-columns:repeat(2,1fr);gap:28px}
  .cf-row{grid-template-columns:1fr}
  .cf-row .cf-input{margin-bottom:14px}
  .ft-inner{flex-direction:column;align-items:flex-start}
  .hero-cta-wrap  {}
  .btn-p { font-size: 15px}
  .hero-sub { font-size: 15px !important;  line-height: 1.5}

  .tc-n { font-size: 36px}
  .tc-n sup { font-size: 24px}
  .tc-d { font-size: 15px}
  .faq-q { padding: 16px}
  .faq-q-txt { font-size: 16px}
  .faq-cta { padding:20px}
  .cta-box { padding: 20px}
  .cf-note { font-size: 12px}
  .cf-label { font-size: 14px}
  .cta-box-sub { font-size: 14px}

}
@media(max-width:480px){
  .industry-grid{grid-template-columns:1fr}
  .process-steps{grid-template-columns:1fr 1fr}
}

.hero{width:100%;min-height:100vh;background:#0d0b1c;display:block;position:relative;overflow:hidden}
.hero-accent-tl{position:absolute;width:600px;height:600px;border-radius:50%;background:linear-gradient(135deg,rgba(79,70,229,.18),rgba(124,58,237,.10));opacity:.9;top:-240px;left:-200px;pointer-events:none}
.hero-ring-br{position:absolute;width:360px;height:360px;border-radius:50%;border:1px solid rgba(79,70,229,.1);bottom:-120px;right:-80px;pointer-events:none}
.hero-ring-br2{position:absolute;width:200px;height:200px;border-radius:50%;border:1px solid rgba(79,70,229,.12);bottom:-40px;right:60px;pointer-events:none}
.hero-inner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:800px;max-width:54vw;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:10}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#4F46E5;background:#EEF2FF;padding:9px 20px;border-radius:24px;margin-bottom:32px;letter-spacing:.02em}
.hero-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:#4F46E5;animation:hkp 2s infinite}

.hero-tags { flex-direction: column;}



@keyframes hkp{0%,100%{opacity:1}50%{opacity:.3}}
.hero-h1{font-size:clamp(48px,7.5vw,96px);font-weight:700;line-height:1.06;letter-spacing:-1px;color:#ffffff;margin-bottom:24px;word-break:keep-all}
.hero-h1 em{color:#a89ef5;font-style:normal}
.hero-h1 .line{display:block;opacity:0;transform:translateY(30px)}
.hero-h1 .line.in{animation:hlu .6s cubic-bezier(.22,1,.36,1) forwards}
.hero-h1 .line:nth-child(1).in{animation-delay:.08s}
.hero-h1 .line:nth-child(2).in{animation-delay:.22s}
.hero-h1 .line:nth-child(3).in{animation-delay:.36s}
@keyframes hlu{to{opacity:1;transform:translateY(0)}}
.hero-sub{font-size:clamp(17px,2vw,20px);color:rgba(255,255,255,0.65);line-height:1.8;max-width:560px;margin-bottom:36px;word-break:keep-all}
.hero-sub strong{color:rgba(255,255,255,0.9);font-weight:600}
.hero-btns{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:28px}
.hero-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:52px}
.hero-chip{font-size:14px;font-weight:600;color:#3730A3;background:#EEF2FF;padding:9px 18px;border-radius:20px;border:1px solid #C7D2FE}
.hero-stats{display:flex;align-items:stretch;border:1px solid #E2E8F0;border-radius:20px;overflow:hidden;width:100%;max-width:560px}
.hs{padding:22px 0;text-align:center;border-right:1px solid #E2E8F0;flex:1}
.hs:last-child{border-right:none}
.hs-n{display:block;font-size:28px;font-weight:700;color:#0F172A;letter-spacing:-.03em;line-height:1}
.hs-n sup{font-size:12px;color:#4F46E5;font-weight:700}
.hs-l{display:block;font-size:12px;color:#94A3B8;margin-top:5px}

.why{width:100%;padding:96px 64px;background:#fff; margin-bottom: 120px}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why-card{border:1.5px solid #E2E8F0;border-radius:20px;padding:40px 34px;background:#fff;transition:all .2s}
.why-card:hover{border-color:#4F46E5;transform:translateY(-4px);box-shadow:0 12px 32px rgba(79,70,229,.1)}
.why-num{width:36px;height:36px;border-radius:10px;/* background:#EEF2FF; */display:flex;align-items:center;justify-content:center;font-size: 23px;font-weight:700;color:#4F46E5;margin-bottom:20px;margin: 20px auto;margin-top: 0;}

.why-title{font-size: 25px;font-weight:700;color:#0F172A;letter-spacing:-.02em;line-height:1.35;margin-bottom:24px;word-break:keep-all;text-align: center;position:relative;display:inline-block; width: 100%;}
.why-title::before,.why-title::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:14px;height:55px;border:4px solid #4F46E5;}
.why-title::before{left:0;border-right:none;border-radius:3px 0 0 3px;}
.why-title::after{right:0;border-left:none;border-radius:0 3px 3px 0;}
.why-desc{font-size:17px;color: #231e6f;line-height:1.6;word-break: keep-all;background: #eef2ff;padding: 20px;border-radius: 15px;position:relative;font-weight: 500;}
.why img { width: 120px; border-radius: 99px; text-align: center; margin: auto; display: block; margin-bottom: 20px}
.why-desc::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #eef2ff;}


@media(max-width:1280px){
  .why-grid{grid-template-columns:1fr 1fr}
  .why-title { font-size: 20px}
}
@media(max-width:768px){
  .why{padding:0px 20px 0px; margin-bottom:80px;}
  .why-grid{grid-template-columns:1fr}
  .why-card { padding: 30px 25px}
  .hero{padding:100px 20px 60px}
  .hero-h1{font-size:clamp(40px,10vw,64px)}
  .hero-stats{max-width:100%}.hs{padding:16px 0}
  .hs-n{font-size:22px}
  .process { margin-bottom: 60px;}
    .why img { width: 100px}
}


/* ── 태블릿 대응 (768px ~ 1024px) ── */
@media(min-width:768px) and (max-width:1024px){
  .hero-inner,.hero-content{padding:0 32px}
  .trust,.portfolio-prev,.reviews,.process,.faq-cta,.why,.industry{padding:72px 40px}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .pf-grid{grid-template-columns:repeat(2,1fr)}
  .review-grid{grid-template-columns:1fr}
  .industry-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr 1fr}
  .hero-stats{width:90%}
  .inn,.container{padding:0 32px}
  .cta-form{padding:28px 24px}
}

/* ── iOS Safari 주소창 대응 ── */
@supports (height: 100svh){
  .hero,.hero-section,section.hero{min-height:100svh !important}
}
/* ── 소폰(480px 이하) 추가 최적화 ── */
@media(max-width:480px){
  body{font-size:14px}

  .mob-panel{width:min(300px,90vw)}
  .hero-h1,.cta-h2{font-size:clamp(32px,9vw,52px)}
  .cf-row{grid-template-columns:1fr !important}
  .cf-input{font-size:16px}  /* iOS 줌 방지 */
  .btn-pw,.cf-btn,.mob-cta{min-height:44px}
}
