/* ==========================================================
   LIFEHANPAN
   HERO V02
========================================================== */

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

/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    color-scheme:dark;
}

body{

    font-family:"Pretendard",sans-serif;

    background:#050816;

    color:#fff;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}

a{

    color:inherit;

    text-decoration:none;

}

img{

    display:block;

    max-width:100%;

}

button{

    font:inherit;

}

/* ==========================================================
   ROOT
========================================================== */

:root{

    --bg:#050816;
    --bg2:#091120;

    --white:#ffffff;

    --text:#DDE7FF;

    --muted:#91A6C7;

    --line:rgba(255,255,255,.07);

    --glass:rgba(255,255,255,.05);

    --blue:#4F8DFF;

    --cyan:#65DDFF;

    --radius:24px;

    --container:1400px;

    --transition:.45s cubic-bezier(.22,.61,.36,1);

}

/* ==========================================================
   GLOBAL
========================================================== */

.hp-container{

    width:min(var(--container),92%);

    margin:auto;

}

section{

    position:relative;

}

/* ==========================================================
   BODY
========================================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
        radial-gradient(circle at top,
        rgba(79,141,255,.08),
        transparent 55%);

    pointer-events:none;

    z-index:-5;

}

/* ==========================================================
   NOISE
========================================================== */

.hp-noise{

    position:fixed;

    inset:0;

    opacity:.025;

    pointer-events:none;

    z-index:999;

    background-image:
    radial-gradient(circle,#fff 1px,transparent 1px);

    background-size:7px 7px;

}

/* ==========================================================
   CURSOR
========================================================== */

.hp-cursor-light{

    position:fixed;

    width:520px;

    height:520px;

    border-radius:50%;

    pointer-events:none;

    background:
    radial-gradient(circle,
    rgba(101,221,255,.13),
    transparent 70%);

    transform:translate(-50%,-50%);

    z-index:1;

}

/* ==========================================================
   HEADER
========================================================== */

.hp-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:90px;

    display:flex;

    align-items:center;

    z-index:200;

    background:rgba(5,8,22,.82);

    border-bottom:1px solid rgba(255,255,255,.05);

}

.hp-header .hp-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.hp-header-right{

    display:flex;

    align-items:center;

    gap:34px;

}

.hp-logo{

    font-size:18px;

    font-weight:800;

    letter-spacing:.4em;

}

.hp-nav{

    display:flex;

    align-items:center;

    gap:34px;

}

.hp-nav a{

    color:#B8CAE7;

    font-size:15px;

    position:relative;

    transition:var(--transition);

}

.hp-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--cyan);

    transition:var(--transition);

}

.hp-nav a:hover{

    color:#fff;

}

.hp-nav a:hover::after{

    width:100%;

}

.hp-nav-cta{

    color:#B8CAE7;

    font-size:15px;

    position:relative;

    transition:var(--transition);

}

.hp-nav-cta::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--cyan);

    transition:var(--transition);

}

.hp-nav-cta:hover{

    color:#fff;

}

.hp-nav-cta:hover::after{

    width:100%;

}

/* ==========================================================
   HERO
========================================================== */

.hp-hero{

    position:relative;

    height:100vh;

    min-height:900px;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    isolation:isolate;

    background:
    radial-gradient(circle at top,
    #12284f 0%,
    #08101d 45%,
    #050816 100%);

}

/* ==========================================================
   BACKGROUND
========================================================== */

.hp-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:-2;

}

/* ==========================================================
   GRID
========================================================== */

.hp-grid{

    position:absolute;

    inset:-20%;

    background-image:

        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);

    background-size:90px 90px;

    transform:perspective(1200px) rotateX(78deg);

    transform-origin:center top;

    opacity:.35;

}


/* ==========================================================
   SPOTLIGHT
========================================================== */

.hp-spotlight{

    position:absolute;

    left:50%;

    top:42%;

    width:950px;

    height:950px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(255,255,255,.10),
        rgba(79,141,255,.08) 35%,
        rgba(79,141,255,.02) 65%,
        transparent 75%);

    filter:blur(70px);

}


/* ==========================================================
   GLOW
========================================================== */

.hp-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    opacity:.55;

    mix-blend-mode:screen;

}

.hp-glow-left{

    width:650px;

    height:650px;

    background:#3B82F6;

    left:-180px;

    top:-120px;

}

.hp-glow-right{

    width:600px;

    height:600px;

    background:#38BDF8;

    right:-160px;

    bottom:-120px;

}


/* ==========================================================
   FLOATING PARTICLES
========================================================== */

.hp-particles{

    position:absolute;

    inset:0;

    overflow:hidden;

}

.hp-particles::before,
.hp-particles::after{

    content:"";

    position:absolute;

    width:3px;

    height:3px;

    border-radius:50%;

    background:#ffffff;

    box-shadow:

        120px 80px #ffffff,

        260px 180px rgba(255,255,255,.6),

        500px 120px rgba(255,255,255,.4),

        820px 240px rgba(255,255,255,.8),

        1020px 80px rgba(255,255,255,.5),

        1340px 260px rgba(255,255,255,.4),

        240px 520px rgba(255,255,255,.5),

        720px 620px rgba(255,255,255,.7),

        1180px 560px rgba(255,255,255,.5),

        1480px 420px rgba(255,255,255,.6);

}

.hp-particles::after{

    opacity:.55;

}


/* ==========================================================
   OVERLAY
========================================================== */

.hp-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(to bottom,

            rgba(5,8,22,.15),

            rgba(5,8,22,.45),

            rgba(5,8,22,.92)

        );

}


/* ==========================================================
   KEYFRAMES
========================================================== */

/* ==========================================================
   CONTENT
========================================================== */

.hp-content{

    position:relative;

    z-index:20;

    max-width:980px;

    text-align:center;

}

/* ==========================================================
   TAG
========================================================== */

.hp-tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 22px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(18,24,44,.55);

    color:#8FC8FF;

    font-size:14px;

    letter-spacing:.25em;

    text-transform:uppercase;

    margin-bottom:42px;

}

.hp-tag::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#4F8DFF;

    box-shadow:0 0 18px #4F8DFF;

}

/* ==========================================================
   TITLE
========================================================== */

.hp-title{

    display:flex;

    flex-direction:column;

    line-height:.92;

    letter-spacing:-.05em;

    margin-bottom:30px;

}

.hp-title span{

    display:block;

    font-size:clamp(72px,8vw,128px);

    font-weight:800;

}

.hp-title span:last-child{

    background:linear-gradient(
        90deg,
        #ffffff,
        #DDEBFF,
        #72B6FF
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

/* ==========================================================
   SUB
========================================================== */

.hp-sub{

    width:min(620px,90%);

    margin:auto;

    font-size:22px;

    color:#AFC2DD;

    line-height:1.9;

}

/* ==========================================================
   CTA
========================================================== */

.hp-link{

    display:inline-flex;

    align-items:center;

    gap:18px;

    margin-top:60px;

    font-size:18px;

    font-weight:600;

    transition:.4s;

}

.hp-link svg{

    transition:.45s;

}

.hp-link:hover{

    color:#71C4FF;

}

.hp-link:hover svg{

    transform:translateX(12px);

}

/* ==========================================================
   STAGE
========================================================== */

.hp-stage{

    position:absolute;

    right:70px;

    bottom:70px;

    font-size:110px;

    font-weight:800;

    color:rgba(255,255,255,.045);

    user-select:none;

    pointer-events:none;

    letter-spacing:.08em;

}

/* ==========================================================
   SCROLL
========================================================== */

.hp-scroll{

    position:absolute;

    left:50%;

    bottom:38px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

}

.hp-scroll span{

    font-size:11px;

    letter-spacing:.35em;

    color:#8FA6C9;

}

.hp-scroll-line{

    width:1px;

    height:80px;

    background:linear-gradient(

        rgba(255,255,255,.45),

        transparent

    );

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:900px){

.hp-nav{

gap:22px;

}

.hp-nav a{

font-size:14px;

}

.hp-nav-cta{

font-size:14px;

}

.hp-title span{

font-size:60px;

}

.hp-sub{

font-size:18px;

}

.hp-scroll{

bottom:20px;

}

}

@media(max-width:640px){

.hp-nav{

display:none;

}

.hp-stage{

display:none;

}

}

/* ==========================================================
   INTERACTION POLISH
========================================================== */

.hp-cursor-light {
    display: none;
}

.hp-link {
    position: relative;
    padding-bottom: 10px;
}

.hp-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.25),
        rgba(113, 196, 255, 0.95)
    );
    transform-origin: left;
    transition: transform 0.45s ease;
}

.hp-link:hover::after {
    transform: scaleX(1.14);
}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hp-cursor-light {
        display: none;
    }
}

/* LIFEHANPAN COMPACT SCALE OVERRIDE */
.hp-hero{height:72vh;min-height:585px}
.hp-hero-title{font-size:clamp(52px,6.3vw,100px)}
.hp-stage{font-size:clamp(48px,6vw,86px)}
.hp-hero-copy,.hp-sub{font-size:18px}
@media(max-width:640px){.hp-hero-title,.hp-title span{font-size:44px}.hp-hero-copy,.hp-sub{font-size:16px}}

/* LIFEHANPAN COMPACT SCALE OVERRIDE 2 (추가 축소) */
.hp-hero-title{font-size:clamp(42px,5.2vw,80px)}
.hp-stage{font-size:clamp(40px,5vw,70px)}
.hp-hero-copy,.hp-sub{font-size:16px}
@media(max-width:640px){.hp-hero-title,.hp-title span{font-size:38px}.hp-hero-copy,.hp-sub{font-size:15px}}

/* LIFEHANPAN MOBILE PERFORMANCE OVERRIDE */
@media(max-width:768px){
    .hp-scroll{display:none !important;}
}