@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
body{min-width:320px;overflow-x:hidden;background:#050816;color:#fff;font-family:"Pretendard",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}

:root{
    --line:rgba(255,255,255,.08);
    --blue:#5d8dff;
    --cyan:#69d7ff;
    --container:1240px;
}

.hp-cta-page{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    background:
        radial-gradient(circle at 18% 10%,rgba(93,141,255,.16),transparent 28%),
        radial-gradient(circle at 88% 90%,rgba(105,215,255,.12),transparent 26%),
        linear-gradient(180deg,#050816 0%,#07101d 100%);
}
.hp-cta-page::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
}
.hp-cta{position:relative;z-index:1;padding:72px 0}
.hp-cta-container{width:min(var(--container),92%);margin:0 auto}

.hp-cta-shell{
    position:relative;overflow:hidden;padding:42px;border:1px solid var(--line);border-radius:36px;
    background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),rgba(7,13,25,.94);
    box-shadow:0 38px 120px rgba(0,0,0,.34)
}
.hp-cta-intro{
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    padding-bottom:24px;border-bottom:1px solid var(--line)
}
.hp-cta-kicker,.hp-cta-stage{font-size:11px;font-weight:800;letter-spacing:.22em}
.hp-cta-kicker{color:#8fb9ff}
.hp-cta-stage{color:rgba(255,255,255,.34)}

.hp-cta-hero{
    display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
    align-items:center;gap:54px;padding:68px 0 54px
}
.hp-cta-eyebrow{margin-bottom:18px;color:#8fa7cb;font-size:16px;font-weight:700}
.hp-cta-copy h1{max-width:760px;font-size:clamp(46px,5.6vw,78px);line-height:1.04;letter-spacing:-.055em;font-weight:850}
.hp-cta-description{margin-top:28px;color:#aebdd3;font-size:17px;line-height:1.85}

.hp-cta-signature-wrap{
    position:relative;min-height:240px;display:flex;flex-direction:column;
    align-items:flex-end;justify-content:center;padding:30px 18px 10px
}
.hp-cta-signature-wrap::before{
    content:"";position:absolute;inset:12% 0 0 12%;border-radius:50%;
    background:rgba(93,141,255,.12);filter:blur(56px)
}
.hp-cta-signature-note{
    position:relative;z-index:1;margin-right:6px;margin-bottom:10px;
    color:rgba(255,255,255,.32);font-size:9px;font-weight:800;letter-spacing:.22em
}
.hp-real-signature{
    position:relative;z-index:1;display:block;width:100%;max-width:580px;height:180px;
    overflow:hidden;
    filter:drop-shadow(0 0 2px rgba(255,255,255,.8)) drop-shadow(0 0 14px rgba(93,141,255,.24))
}
.hp-real-signature-img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}

.hp-cta-primary{margin:2px 0 44px}
.hp-cta-primary-btn{
    position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;
    min-height:118px;width:100%;padding:26px 30px 26px 34px;
    border:1px solid rgba(255,255,255,.12);border-radius:24px;
    background:linear-gradient(90deg,rgba(93,141,255,.2),rgba(105,215,255,.12)),#0b1425;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 50px rgba(0,0,0,.22);
    transition:.35s ease
}
.hp-cta-primary-btn::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);
    transform:translateX(-120%);transition:transform .75s ease
}
.hp-cta-primary-btn:hover{
    transform:translateY(-4px);border-color:rgba(105,215,255,.34);
    box-shadow:0 24px 60px rgba(0,0,0,.28),0 0 38px rgba(93,141,255,.1)
}
.hp-cta-primary-btn:hover::before{transform:translateX(120%)}
.hp-cta-primary-text{position:relative;z-index:1;display:grid;gap:8px}
.hp-cta-primary-text small{color:#8fb9ff;font-size:10px;font-weight:900;letter-spacing:.2em}
.hp-cta-primary-text strong{font-size:clamp(26px,3vw,40px);letter-spacing:-.04em}
.hp-cta-primary-arrow{
    position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;flex:none;
    border-radius:50%;background:#fff;color:#07101d;font-size:25px;font-weight:900;transition:.35s ease
}
.hp-cta-primary-btn:hover .hp-cta-primary-arrow{transform:translateX(6px)}

.hp-cta-services{padding-top:30px;border-top:1px solid var(--line)}
.hp-cta-services-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}
.hp-cta-services-head span{color:#8fb9ff;font-size:10px;font-weight:900;letter-spacing:.22em}
.hp-cta-services-head p{color:#7f91ad;font-size:13px}
.hp-cta-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hp-cta-service-card{
    min-height:230px;display:flex;flex-direction:column;justify-content:space-between;padding:22px;
    border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.025);transition:.3s ease
}
.hp-cta-service-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.045)}
.hp-cta-service-index{color:rgba(255,255,255,.24);font-size:11px;font-weight:800;letter-spacing:.16em}
.hp-cta-service-label{display:block;margin-bottom:7px;color:#7e93b2;font-size:11px;font-weight:800}
.hp-cta-service-card h3{font-size:24px;letter-spacing:-.035em}
.hp-cta-service-card p{margin-top:7px;color:#93a5c0;font-size:13px;line-height:1.6}
.hp-cta-service-card button,.hp-cta-service-card a{
    align-self:flex-start;border:0;background:none;color:#fff;font-size:13px;font-weight:800;cursor:pointer;opacity:.76;transition:.25s ease
}
.hp-cta-service-card button:hover,.hp-cta-service-card a:hover{opacity:1;transform:translateX(3px)}

.hp-cta-reveal{opacity:1;transform:none}

@media(max-width:640px){
    .hp-cta{padding:34px 0}
    .hp-cta-container{width:min(94%,620px)}
    .hp-cta-shell{padding:24px 18px;border-radius:26px}
    .hp-cta-intro{align-items:flex-start;flex-direction:column;gap:8px}
    .hp-cta-hero{grid-template-columns:1fr;gap:18px;padding:48px 0 30px}
    .hp-cta-copy h1{font-size:38px;line-height:1.08}
    .hp-cta-description{font-size:15px}
    .hp-cta-signature-wrap{min-height:136px;align-items:flex-start;padding:10px 0 0}
    .hp-cta-signature-note{font-size:8px}
    .hp-real-signature{height:120px;max-width:680px}
    .hp-cta-primary-btn{min-height:102px;padding:22px 20px;border-radius:20px}
    .hp-cta-primary-text strong{font-size:24px}
    .hp-cta-primary-arrow{width:48px;height:48px;font-size:21px}
    .hp-cta-services-head{align-items:flex-start;flex-direction:column;gap:8px}
    .hp-cta-service-grid{grid-template-columns:1fr}
    .hp-cta-service-card{min-height:180px}
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    .hp-real-signature{clip-path:inset(0 0 0 0)!important}
}


/* ==========================================================
   CTA COPY TUNING — 약속과 책임감 중심
========================================================== */

.hp-cta-copy h1{
    max-width:720px;
    font-size:clamp(42px,5vw,68px);
    line-height:1.08;
}

.hp-cta-signature-note{
    color:rgba(255,255,255,.46);
    font-size:12px;
    font-weight:750;
    letter-spacing:-.01em;
}

.hp-cta-signature-promise{
    position:relative;
    z-index:1;
    display:block;
    margin-top:-8px;
    margin-right:8px;
    color:rgba(255,255,255,.76);
    font-size:15px;
    font-weight:700;
    letter-spacing:-.02em;
}

@media(max-width:640px){
    .hp-cta-copy h1{
        font-size:34px;
        line-height:1.12;
    }

    .hp-cta-signature-note{
        font-size:11px;
    }

    .hp-cta-signature-promise{
        margin-top:-2px;
        font-size:13px;
    }
}