/* ── Variables ── */
:root {
    --bg:       #0a0a0f;
    --surface:  #13131a;
    --surface2: #1c1c28;
    --border:   rgba(255,255,255,0.08);
    --text:     #f0f0f5;
    --muted:    #8888a0;
    --accent:   #7c6af7;
    --accent2:  #5eead4;
    --gradient: linear-gradient(135deg, #7c6af7 0%, #5eead4 100%);
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
    font-family:'Inter','Noto Sans KR',sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ── Noise texture ── */
body::before {
    content:'';
    position:fixed; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events:none; z-index:0;
}

/* ── Scroll progress ── */
.scroll-line {
    position:fixed; top:0; left:0;
    height:2px;
    background: var(--gradient);
    z-index:200;
    transition:width .1s;
}

/* ── Nav ── */
nav {
    position:fixed; top:0; width:100%; z-index:100;
    padding:20px 48px;
    display:flex; justify-content:space-between; align-items:center;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    background:rgba(10,10,15,0.75);
}
.nav-logo {
    font-size:1.1rem; font-weight:700;
    background:var(--gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    letter-spacing:-.02em;
}
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a {
    color:var(--muted); text-decoration:none;
    font-size:.9rem; font-weight:500;
    transition:color .2s;
}
.nav-links a:hover { color:var(--text); }

/* ── Hero ── */
#hero {
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    position:relative;
    padding:100px 48px 60px;
    /* dot grid background */
    background-image:
        radial-gradient(circle, rgba(124,106,247,0.12) 1px, transparent 1px);
    background-size:32px 32px;
}

#hero::after {
    content:'';
    position:absolute; inset:0;
    background:radial-gradient(ellipse 70% 70% at 50% 50%, transparent 30%, var(--bg) 100%);
    pointer-events:none;
}

.hero-inner {
    position:relative; z-index:1;
    max-width:1100px; width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

/* Hero text */
.hero-text { display:flex; flex-direction:column; gap:24px; }

.hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 18px;
    border-radius:100px;
    border:1px solid var(--border);
    background:var(--surface);
    font-size:.8rem; color:var(--muted);
    letter-spacing:.05em;
    width:fit-content;
}
.hero-badge .dot {
    width:8px; height:8px; border-radius:50%;
    background:var(--accent2);
    animation:blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

h1 {
    font-size:clamp(2.6rem,5.5vw,4.4rem);
    font-weight:700;
    letter-spacing:-.04em;
    line-height:1.1;
}
.gradient-text {
    background:var(--gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}

.hero-sub {
    font-size:1.05rem; color:var(--muted);
    line-height:1.8; max-width:460px;
}

.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }

/* Buttons */
.btn {
    padding:13px 28px; border-radius:10px;
    font-size:.95rem; font-weight:600;
    text-decoration:none; border:none; cursor:pointer;
    font-family:inherit; transition:all .2s;
    display:inline-flex; align-items:center; gap:8px;
}
.btn-primary { background:var(--gradient); color:#fff; }
.btn-primary:hover {
    opacity:.85; transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(124,106,247,.35);
}
.btn-ghost {
    background:var(--surface); color:var(--text);
    border:1px solid var(--border);
}
.btn-ghost:hover { background:var(--surface2); transform:translateY(-2px); }

/* Hero visual */
.hero-visual { display:flex; justify-content:center; align-items:center; }

.chip-wrapper {
    position:relative;
    width:360px; height:360px;
}
.chip-img { width:100%; height:100%; filter:drop-shadow(0 0 30px rgba(124,106,247,.25)); }

.float-badge {
    position:absolute;
    padding:6px 14px; border-radius:100px;
    background:rgba(19,19,26,.92);
    border:1px solid rgba(124,106,247,.4);
    color:var(--text);
    font-size:.72rem; font-weight:600;
    backdrop-filter:blur(12px);
    white-space:nowrap;
    box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.fb1 { top:5%;  left:-8%;  animation:fbFloat 4s ease-in-out infinite; }
.fb2 { top:18%; right:-12%; animation:fbFloat 4s ease-in-out infinite .6s; }
.fb3 { bottom:22%; left:-12%; animation:fbFloat 4s ease-in-out infinite 1.2s; }
.fb4 { bottom:8%;  right:-8%;  animation:fbFloat 4s ease-in-out infinite 1.8s; }
@keyframes fbFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* ── Sections ── */
section { padding:100px 48px; position:relative; z-index:1; }
.container { max-width:960px; margin:0 auto; }
.section-label {
    font-size:.75rem; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent); margin-bottom:14px;
}
.section-title {
    font-size:clamp(1.8rem,4vw,2.8rem);
    font-weight:700; letter-spacing:-.03em;
    margin-bottom:18px; line-height:1.15;
}
.section-desc {
    color:var(--muted); font-size:1.05rem;
    max-width:520px; margin-bottom:56px;
}

/* ── About ── */
.about-grid {
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:48px; align-items:start;
}
.about-text p {
    color:var(--muted); margin-bottom:18px;
    line-height:1.85; font-size:1rem;
}
.about-text p strong { color:var(--text); font-weight:600; }

.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.stat-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px; padding:22px;
    transition:border-color .25s, transform .25s;
    cursor:default;
}
.stat-card:hover { border-color:rgba(124,106,247,.45); transform:translateY(-3px); }

.stat-number {
    font-size:1.9rem; font-weight:700;
    background:var(--gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    line-height:1; margin-bottom:6px;
}
.stat-label { font-size:.82rem; color:var(--muted); }

/* ── Skills ── */
#skills { background:var(--surface); }

.skills-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(270px,1fr));
    gap:20px;
}

.skill-card {
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:16px; padding:28px;
    transition:all .25s;
    position:relative; overflow:hidden;
}
.skill-card::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--gradient);
    transform:scaleX(0); transform-origin:left;
    transition:transform .35s;
}
.skill-card:hover::before { transform:scaleX(1); }
.skill-card:hover {
    border-color:rgba(124,106,247,.4);
    box-shadow:0 20px 48px rgba(0,0,0,.35);
}

.skill-icon {
    width:52px; height:52px;
    border-radius:12px;
    background:rgba(124,106,247,.1);
    border:1px solid rgba(124,106,247,.2);
    display:flex; align-items:center; justify-content:center;
    font-size:1.6rem; margin-bottom:16px;
}
.skill-title { font-size:1.05rem; font-weight:600; margin-bottom:8px; }
.skill-desc { font-size:.87rem; color:var(--muted); line-height:1.65; }

.skill-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.tag {
    padding:4px 13px; border-radius:100px;
    font-size:.73rem; font-weight:600;
    background:rgba(124,106,247,.1);
    color:var(--accent);
    border:1px solid rgba(124,106,247,.2);
    transition:all .2s;
}
.tag:hover {
    background:rgba(124,106,247,.2);
    border-color:rgba(124,106,247,.5);
}

/* ── Projects ── */
.projects-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
    gap:22px;
}

.project-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px; overflow:hidden;
    transition:all .25s;
}
.project-card:hover {
    transform:translateY(-5px);
    box-shadow:0 20px 48px rgba(0,0,0,.4);
    border-color:rgba(124,106,247,.3);
}

.project-header {
    padding:28px 28px 20px;
    background:linear-gradient(135deg, rgba(124,106,247,.15) 0%, rgba(94,234,212,.1) 100%);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:14px;
}
.project-header-icon {
    width:46px; height:46px; border-radius:10px;
    background:rgba(124,106,247,.15);
    border:1px solid rgba(124,106,247,.25);
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem;
}
.project-header-title { font-size:1.1rem; font-weight:700; }
.project-header-sub  { font-size:.78rem; color:var(--accent); margin-top:2px; }

.project-body { padding:20px 28px 26px; }
.project-desc { font-size:.88rem; color:var(--muted); line-height:1.7; margin-bottom:16px; }

/* ── Contact ── */
#contact { background:var(--surface); }
.contact-inner { text-align:center; max-width:540px; margin:0 auto; }

.contact-links {
    display:flex; gap:14px; justify-content:center;
    flex-wrap:wrap; margin-top:38px;
}
.contact-link {
    display:flex; align-items:center; gap:10px;
    padding:14px 26px; border-radius:12px;
    border:1px solid var(--border);
    background:var(--bg); color:var(--text);
    text-decoration:none; font-size:.9rem; font-weight:600;
    transition:all .2s;
}
.contact-link svg { width:18px; height:18px; }
.contact-link:hover {
    border-color:rgba(124,106,247,.5);
    background:rgba(124,106,247,.08);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(124,106,247,.2);
}

/* ── Footer ── */
footer {
    border-top:1px solid var(--border);
    padding:32px 48px;
    text-align:center;
    color:var(--muted); font-size:.85rem;
    position:relative; z-index:1;
}

/* ── Fade-up animation ── */
.fade-up {
    opacity:0; transform:translateY(28px);
    transition:opacity .6s ease, transform .6s ease;
}
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ── Responsive ── */
@media (max-width:860px) {
    nav { padding:16px 24px; }
    .nav-links { display:none; }
    section { padding:80px 24px; }
    #hero { padding:100px 24px 60px; }
    .hero-inner { grid-template-columns:1fr; gap:48px; text-align:center; }
    .hero-actions { justify-content:center; }
    .hero-sub { margin:0 auto; }
    .hero-visual { display:none; }
    .about-grid { grid-template-columns:1fr; }
    .about-stats { grid-template-columns:1fr 1fr; }
}