/* ============ ArbiSignal 랜딩(공개 메인) 스타일 ============ */
.lp {
    --bg: #0a0e1a;
    --bg2: #0c111e;
    --ink: #eef1fb;
    --ink-dim: #9aa4bf;
    --indigo: #5a72ff;
    --indigo2: #7c5cff;
    --emerald: #20c997;
    --line: rgba(255,255,255,.08);
    --card: rgba(255,255,255,.04);
    color: var(--ink);
    background: var(--bg);
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    overflow-x: hidden;
}
.lp a { text-decoration: none; color: inherit; }
.lp b { color: #fff; font-weight: 700; }

/* ---------- 버튼 ---------- */
.lp-btn {
    display: inline-flex; align-items: center; gap: 8px;
    border-radius: 12px; font-weight: 700; cursor: pointer;
    transition: transform .18s ease, box-shadow .25s ease, background .2s ease;
    white-space: nowrap; border: 1px solid transparent;
}
.lp-btn-sm { padding: 8px 16px; font-size: .9rem; }
.lp-btn-lg { padding: 14px 26px; font-size: 1.02rem; }
.lp-btn-primary { background: linear-gradient(135deg, #3D5AF1, #7048E8); color: #fff; }
.lp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(61,90,241,.5); }
.lp-btn-ghost { background: rgba(255,255,255,.06); color: var(--ink); border-color: var(--line); }
.lp-btn-ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.lp-link-btn { color: var(--ink-dim); font-weight: 600; padding: 8px 10px; transition: color .2s; }
.lp-link-btn:hover { color: #fff; }
.lp-arrow { transition: transform .2s ease; }
.lp-btn:hover .lp-arrow { transform: translateX(4px); }
.lp-glow { animation: lpGlow 2.6s ease-in-out infinite; }
@keyframes lpGlow {
    0%,100% { box-shadow: 0 0 0 0 rgba(61,90,241,.0), 0 10px 26px rgba(61,90,241,.35); }
    50%     { box-shadow: 0 0 28px 4px rgba(112,72,232,.5), 0 10px 30px rgba(61,90,241,.45); }
}

/* ---------- 브랜드 ---------- */
.lp-brand { display: inline-flex; align-items: center; gap: 10px; }
.lp-brand-name { font-weight: 800; letter-spacing: .01em; font-size: 1.12rem; }

/* ---------- 네비바 ---------- */
.lp-nav { position: sticky; top: 0; z-index: 50; transition: background .3s, border-color .3s, backdrop-filter .3s;
    border-bottom: 1px solid transparent; }
.lp-nav.scrolled { background: rgba(10,14,26,.82); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.lp-nav-inner { max-width: 1180px; margin: 0 auto; padding: 16px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lp-nav-links { display: flex; gap: 26px; }
.lp-nav-links a { color: var(--ink-dim); font-weight: 600; font-size: .94rem; transition: color .2s; }
.lp-nav-links a:hover { color: #fff; }
.lp-nav-cta { display: flex; align-items: center; gap: 10px; }

/* ---------- 히어로 ---------- */
.lp-hero { position: relative; min-height: 92vh; display: flex; align-items: center;
    padding: 40px 24px 80px;
    background:
        radial-gradient(110% 90% at 15% 0%, #21306e 0%, rgba(33,48,110,0) 48%),
        radial-gradient(90% 80% at 100% 20%, #3a1f6e 0%, rgba(58,31,110,0) 50%),
        linear-gradient(180deg, #0b1022 0%, #0a0e1a 70%);
    overflow: hidden;
}
.lp-particles { position: absolute; inset: 0; z-index: 0; }
.lp-hero-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; z-index: 0; }
.lp-orb-a { width: 380px; height: 380px; background: #3D5AF1; top: -80px; left: -60px; animation: lpFloatA 12s ease-in-out infinite; }
.lp-orb-b { width: 320px; height: 320px; background: #7048E8; bottom: -90px; right: 4%; animation: lpFloatB 14s ease-in-out infinite; }
.lp-hero-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; width: 100%;
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }

.lp-badge { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700;
    color: #c9d2ff; background: rgba(90,114,255,.14); border: 1px solid rgba(90,114,255,.3);
    padding: 7px 14px; border-radius: 999px; margin-bottom: 22px; }
.lp-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); animation: lpPulse 1.8s infinite; }
.lp-h1 { font-size: clamp(2.1rem, 5vw, 3.55rem); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; margin: 0 0 20px; }
.lp-accent { background: linear-gradient(120deg, #6B82FF, #20C997 70%); -webkit-background-clip: text;
    background-clip: text; color: transparent; }
#lp-typed::after { color: #6B82FF; }
.lp-sub { font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--ink-dim); line-height: 1.6; max-width: 540px; margin: 0 0 30px; }
.lp-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.lp-trust-row { display: flex; gap: 20px; flex-wrap: wrap; color: var(--ink-dim); font-size: .9rem; }
.lp-trust-row .lp-check { color: var(--emerald); font-weight: 800; margin-right: 5px; }

/* 히어로 비주얼 (가짜 가격차) */
.lp-hero-visual { position: relative; height: 360px; }
.lp-chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 700; stroke-dashoffset: 700; animation: lpDraw 2.4s ease forwards .3s; }
.lp-line-a { stroke: #6B82FF; filter: drop-shadow(0 0 6px rgba(107,130,255,.6)); }
.lp-line-b { stroke: #20C997; animation-delay: .55s; filter: drop-shadow(0 0 5px rgba(32,201,151,.5)); }
.lp-area { opacity: 0; animation: lpFade 1s ease forwards 2.4s; }
.lp-quote-card { position: absolute; z-index: 3; background: rgba(16,22,42,.86); backdrop-filter: blur(10px);
    border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; box-shadow: 0 14px 36px rgba(0,0,0,.45); }
.lp-quote-ex { font-size: .76rem; color: var(--ink-dim); font-weight: 600; }
.lp-quote-price { font-size: 1.04rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-float-a { top: 6%; left: 0; animation: lpFloatA 6s ease-in-out infinite; }
.lp-float-b { top: 40%; right: 0; animation: lpFloatB 7s ease-in-out infinite; }
.lp-float-c { bottom: 8%; left: 22%; animation: lpFloatC 5.5s ease-in-out infinite; }
.lp-spread-chip { position: absolute; z-index: 3; background: linear-gradient(135deg, rgba(32,201,151,.2), rgba(32,201,151,.08));
    border: 1px solid rgba(32,201,151,.4); color: #6bf0c4; font-weight: 700; font-size: .9rem;
    padding: 8px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; }
.lp-spread-chip b { color: #aef7df; }
.lp-spread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); animation: lpPulse 1.6s infinite; }

.lp-scroll-hint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
    color: var(--ink-dim); font-size: .74rem; letter-spacing: .2em; }
.lp-scroll-hint::after { content: ''; display: block; width: 1px; height: 26px; margin: 8px auto 0;
    background: linear-gradient(var(--ink-dim), transparent); animation: lpScroll 1.8s ease-in-out infinite; }

/* ---------- 섹션 공통 ---------- */
.lp-section { max-width: 1180px; margin: 0 auto; padding: 96px 24px; }
.lp-section-head { text-align: center; max-width: 680px; margin: 0 auto 54px; }
.lp-eyebrow { color: var(--indigo); font-weight: 800; letter-spacing: .18em; font-size: .78rem; margin-bottom: 12px; }
.lp-h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 14px; }
.lp-section-sub { color: var(--ink-dim); font-size: 1.06rem; line-height: 1.6; margin: 0; }

/* ---------- 동작 방식 ---------- */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lp-step { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px;
    padding: 30px 26px; transition: transform .25s ease, border-color .25s, background .25s; overflow: hidden; }
.lp-step:hover { transform: translateY(-6px); border-color: rgba(90,114,255,.55); background: rgba(90,114,255,.06);
    box-shadow: 0 0 0 1px rgba(90,114,255,.35), 0 18px 44px rgba(61,90,241,.18); }
.lp-step-no { position: absolute; top: 16px; right: 22px; font-size: 2.4rem; font-weight: 800; color: rgba(255,255,255,.06); }
.lp-step h3 { font-size: 1.22rem; font-weight: 700; margin: 0 0 10px; }

/* 아이콘 박스(Material 라인 아이콘) — 이모지 대체 */
.lp-ic-box { width: 54px; height: 54px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 18px; background: linear-gradient(135deg, #3D5AF1, #7048E8); box-shadow: 0 10px 24px rgba(61,90,241,.4); }
.lp-ic-box .mud-icon-root { color: #fff; font-size: 28px; }
.lp-ic-emerald { background: linear-gradient(135deg, #0CA678, #20C997); box-shadow: 0 10px 24px rgba(12,166,120,.4); }
.lp-step p { color: var(--ink-dim); line-height: 1.6; margin: 0; }

/* ---------- 수치 ---------- */
.lp-numbers { padding: 30px 24px; }
.lp-numbers-inner { max-width: 980px; margin: 0 auto; background: linear-gradient(135deg, rgba(61,90,241,.12), rgba(112,72,232,.08));
    border: 1px solid var(--line); border-radius: 22px; padding: 40px 30px;
    display: flex; align-items: center; justify-content: space-around; gap: 20px; flex-wrap: wrap; }
.lp-num { text-align: center; }
.lp-num-val { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.02em;
    background: linear-gradient(120deg, #8aa0ff, #20C997); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-num-text { font-size: clamp(1.4rem, 3.2vw, 2rem) !important; white-space: nowrap; }
.lp-num-label { color: var(--ink-dim); font-weight: 600; margin-top: 6px; }
.lp-num-div { width: 1px; height: 46px; background: var(--line); }

/* ---------- 안전성 ---------- */
.lp-safety { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lp-safe-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 30px 26px;
    transform-style: preserve-3d; transition: box-shadow .25s; }
.lp-safe-card:hover { border-color: rgba(32,201,151,.45); box-shadow: 0 0 0 1px rgba(32,201,151,.35), 0 18px 44px rgba(32,201,151,.15); }
.lp-safe-card h3 { font-size: 1.18rem; font-weight: 700; margin: 0 0 10px; }
.lp-safe-card p { color: var(--ink-dim); line-height: 1.6; margin: 0; }

/* ---------- 히어로 CTA 보조 문구 ---------- */
.lp-cta-note { color: var(--ink-dim); font-size: .92rem; margin: 0 0 22px; }
.lp-cta-note .lp-check { color: var(--emerald); font-weight: 800; margin-right: 6px; }
.lp-cta-note b { color: #aef7df; }

/* ---------- 요금(성과 후불제) ---------- */
.lp-price-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.lp-price-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px;
    padding: 36px 26px; text-align: center; transition: transform .25s ease, box-shadow .25s; }
.lp-price-card:hover { transform: translateY(-6px); border-color: rgba(32,201,151,.4); box-shadow: 0 0 0 1px rgba(32,201,151,.3), 0 18px 44px rgba(32,201,151,.14); }
.lp-price-card h3 { font-size: 1.24rem; font-weight: 700; margin: 0 0 10px; }
.lp-price-card p { color: var(--ink-dim); line-height: 1.6; margin: 0; }
.lp-price-hl { background: linear-gradient(160deg, rgba(32,201,151,.16), rgba(32,201,151,.04));
    border-color: rgba(32,201,151,.45); box-shadow: 0 0 0 1px rgba(32,201,151,.2), 0 18px 50px rgba(32,201,151,.12); transform: translateY(-8px); }
.lp-price-hl:hover { transform: translateY(-12px); }
.lp-price-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #20C997, #0CA678); color: #03110c; font-weight: 800; font-size: .74rem;
    letter-spacing: .04em; padding: 5px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(32,201,151,.4); white-space: nowrap; }
.lp-price-zero { font-size: 3rem; font-weight: 800; line-height: 1; margin-bottom: 10px;
    background: linear-gradient(120deg, #6bf0c4, #20C997); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 마무리 CTA ---------- */
.lp-final { max-width: 1180px; margin: 0 auto; padding: 40px 24px 90px; }
.lp-final-card { position: relative; text-align: center; border-radius: 28px; padding: 70px 30px; overflow: hidden;
    background: radial-gradient(120% 130% at 50% 0%, #21306e 0%, #0c1124 60%);
    border: 1px solid rgba(90,114,255,.3); }
.lp-final-card .lp-h2 { position: relative; z-index: 2; }
.lp-final-card .lp-section-sub { position: relative; z-index: 2; margin-bottom: 30px; }
.lp-final-card .lp-btn { position: relative; z-index: 2; }
.lp-final-orb { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(80px);
    background: #5a72ff; opacity: .35; top: -160px; left: 50%; transform: translateX(-50%); animation: lpFloatA 10s ease-in-out infinite; }

/* ---------- 푸터 ---------- */
.lp-footer { border-top: 1px solid var(--line); padding: 44px 24px; background: #080b14; }
.lp-foot-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.lp-disclaimer { color: var(--ink-dim); font-size: .86rem; line-height: 1.6; max-width: 620px; margin: 0; }
.lp-foot-copy { color: rgba(255,255,255,.4); font-size: .82rem; }

/* ---------- 동적 이펙트(전역) ---------- */
.lp-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100;
    background: linear-gradient(90deg, #3D5AF1, #20C997); box-shadow: 0 0 12px rgba(61,90,241,.6); }
.lp-bg-particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
/* 콘텐츠를 배경 파티클 위로 */
.lp-hero, .lp-section, .lp-numbers, .lp-final, .lp-footer { position: relative; z-index: 1; }
/* 히어로 마우스 스포트라이트(커서 따라 빛) */
.lp-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 28%), rgba(90,114,255,.16), transparent 62%);
    transition: background .12s ease; }

/* ---------- 디테일 폴리시 ---------- */
.lp-section-alt { position: relative; }
.lp-section-alt::before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: 100vw; height: 100%; z-index: -1; background: linear-gradient(180deg, rgba(90,114,255,.05), rgba(90,114,255,0));
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.lp-quote-ex { display: inline-flex; align-items: center; }
.lp-ex-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.lp-dot-up { background: #3D5AF1; box-shadow: 0 0 8px #3D5AF1; }
.lp-dot-bn { background: #F0B90B; box-shadow: 0 0 8px #F0B90B; }
.lp-dot-okx { background: #c3cad8; box-shadow: 0 0 8px rgba(195,202,216,.6); }
.lp-chart-dot { fill: #6B82FF; opacity: 0; transform-box: fill-box; transform-origin: center;
    animation: lpFade .4s ease forwards 2.3s, lpDotGlow 1.8s ease-in-out infinite 2.4s; }

/* ---------- keyframes ---------- */
@keyframes lpPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(32,201,151,.6); } 70% { box-shadow: 0 0 0 8px rgba(32,201,151,0); } }
@keyframes lpDotGlow { 0%,100% { filter: drop-shadow(0 0 3px rgba(107,130,255,.7)); } 50% { filter: drop-shadow(0 0 11px rgba(107,130,255,1)); } }
@keyframes lpDraw { to { stroke-dashoffset: 0; } }
@keyframes lpFade { to { opacity: 1; } }
@keyframes lpFloatA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes lpFloatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(14px); } }
@keyframes lpFloatC { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-10px) translateX(6px); } }
@keyframes lpScroll { 0%,100% { opacity: .3; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
    .lp-hero-inner { grid-template-columns: 1fr; gap: 30px; }
    .lp-hero-visual { height: 280px; order: 2; }
    .lp-nav-links { display: none; }
    .lp-steps, .lp-safety, .lp-price-row { grid-template-columns: 1fr; }
    .lp-price-hl { transform: none; }
    .lp-num-div { display: none; }
    .lp-numbers-inner { gap: 28px; }
    .lp-section { padding: 64px 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .lp * { animation: none !important; }
    .lp-line { stroke-dashoffset: 0; } .lp-area { opacity: 1; }
}