:root {
    --bg-0: #06060b;
    --bg-1: #0c0c14;
    --bg-2: #12121c;
    --bg-3: #1a1a27;
    --bg-4: #222233;
    --border: rgba(255,255,255,.06);
    --border-h: rgba(255,255,255,.12);
    --text-1: #eeeef5;
    --text-2: #9898aa;
    --text-3: #55556a;
    --accent: #7c5cfc;
    --accent-dim: rgba(124,92,252,.12);
    --accent-hover: #6a4ae8;
    --green: #e9e9e9;
    --green-dim: rgba(0,214,143,.12);
    --radius: 10px;
    --font: 'DM Sans', -apple-system, sans-serif;
    --mono: 'JetBrains Mono', monospace;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
    background: var(--bg-0);
    color: var(--text-1);
    font-family: var(--font);
    min-height: 100vh;
    overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }


/* ── Nav ── */
.lp-nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(6,6,11,.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 0 2rem;
}
.lp-nav-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    height: 60px;
}
.lp-logo {
    display: flex; align-items: center; gap: .65rem;
    font-weight: 700; font-size: .95rem; letter-spacing: -.02em;
    color: var(--text-1); text-decoration: none;
}
.lp-logo-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), #a78bfa);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem; flex-shrink: 0;
}
.lp-nav-actions { display: flex; align-items: center; gap: .5rem; }
.btn-ghost {
    padding: .45rem .9rem; border-radius: 7px; font-size: .8rem;
    font-weight: 500; color: var(--text-2); background: none;
    border: none; cursor: pointer; font-family: var(--font);
    transition: all .15s; text-decoration: none;
}
.btn-ghost:hover { background: var(--bg-3); color: var(--text-1); text-decoration: none; }
.btn-cta {
    padding: .48rem 1.1rem; border-radius: 8px; font-size: .8rem;
    font-weight: 600; background: var(--accent); color: #fff;
    border: none; cursor: pointer; font-family: var(--font);
    transition: all .15s; text-decoration: none;
}
.btn-cta:hover { background: var(--accent-hover); box-shadow: 0 0 20px rgba(124,92,252,.35); text-decoration: none; }
.btn-lang {
    padding: .2rem .45rem; border-radius: 4px; font-size: .75rem;
    font-weight: 600; color: var(--text-2); background: none;
    border: 1px solid var(--border); cursor: pointer; font-family: var(--font);
    transition: all .15s; text-decoration: none; opacity: .8;
}
.btn-lang:hover { border-color: var(--border-h); color: var(--text-1); opacity: 1; text-decoration: none; }

/* ── Watermark ── */
.lp-watermark {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-9deg);
    font-size: clamp(5rem, 16vw, 13rem);
    font-weight: 900;
    letter-spacing: -.05em;
    white-space: nowrap;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent) 0%, #a78bfa 50%, var(--green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: .06;
    pointer-events: none;
    user-select: none;
    filter: blur(.8px);
    z-index: 0;
}

/* ── Hero ── */
.hero {
    position: relative; z-index: 1;
    max-width: 1200px; margin: 0 auto;
    padding: 7rem 2rem 5rem;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
    overflow: hidden;
}
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--accent-dim); border: 1px solid rgba(124,92,252,.25);
    border-radius: 20px; padding: .28rem .8rem;
    font-size: .72rem; font-weight: 600; color: var(--accent);
    letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1.5rem;
}
.hero-eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0;
    box-shadow: 0 0 6px var(--accent);
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%,100% { opacity: 1; } 50% { opacity: .4; }
}
.hero-title {
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    font-weight: 700; line-height: 1.1; letter-spacing: -.035em;
    margin-bottom: 1.25rem;
}
.hero-title .grad {
    background: linear-gradient(135deg, var(--accent) 0%, #a78bfa 50%, var(--green) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-sub {
    font-size: 1.05rem; color: var(--text-2); line-height: 1.7;
    margin-bottom: 2rem; max-width: 500px;
}
.hero-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.btn-hero-primary {
    padding: .75rem 1.75rem; border-radius: 9px; font-size: .9rem;
    font-weight: 600; background: var(--accent); color: #fff;
    border: none; cursor: pointer; font-family: var(--font);
    transition: all .2s; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;
}
.btn-hero-primary:hover { background: var(--accent-hover); box-shadow: 0 6px 30px rgba(124,92,252,.4); text-decoration: none; transform: translateY(-1px); }
.btn-hero-secondary {
    padding: .73rem 1.5rem; border-radius: 9px; font-size: .9rem;
    font-weight: 600; background: var(--bg-2); color: var(--text-1);
    border: 1px solid var(--border-h); cursor: pointer; font-family: var(--font);
    transition: all .2s; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;
}
.btn-hero-secondary:hover { background: var(--bg-3); border-color: rgba(255,255,255,.2); text-decoration: none; transform: translateY(-1px); }
.hero-pills {
    display: flex; align-items: center; gap: 1.25rem; margin-top: 1.75rem; flex-wrap: wrap;
}
.hero-pill {
    display: flex; align-items: center; gap: .4rem;
    font-size: .75rem; color: var(--text-3); font-weight: 500;
}
.hero-pill-dot { color: var(--green); font-size: .8rem; }

/* ── Hero visual ── */
.hero-visual {
    position: relative;
    display: flex; flex-direction: column; gap: .75rem;
}
.mock-card {
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: 12px; padding: 1.1rem 1.25rem;
    position: relative; overflow: hidden;
}
.mock-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(124,92,252,.04) 0%, transparent 60%);
    pointer-events: none;
}
.mock-bar {
    display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem;
}
.mock-dot { width: 10px; height: 10px; border-radius: 50%; }
.mock-dot:nth-child(1) { background: #ff5f57; }
.mock-dot:nth-child(2) { background: #febc2e; }
.mock-dot:nth-child(3) { background: #28c840; }
.mock-code {
    font-family: var(--mono); font-size: .75rem; color: var(--text-2); line-height: 1.8;
}
.mock-code .c-purple { color: #a78bfa; }
.mock-code .c-green  { color: var(--green); }
.mock-code .c-yellow { color: #feca57; }
.mock-code .c-gray   { color: var(--text-3); }
.mock-code .c-white  { color: var(--text-1); }

.mock-upload-row {
    display: flex; align-items: center; gap: .75rem;
}
.mock-thumb {
    width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(135deg, #7c5cfc33, #a78bfa22);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.mock-file-info { flex: 1; }
.mock-file-name { font-size: .78rem; font-weight: 600; color: var(--text-1); margin-bottom: .15rem; }
.mock-file-meta { font-size: .68rem; color: var(--text-3); font-family: var(--mono); }
.mock-badge {
    font-size: .65rem; font-weight: 700; padding: .2rem .5rem; border-radius: 4px;
    background: var(--green-dim); color: var(--green); border: 1px solid rgba(0,214,143,.2);
}
.mock-url {
    font-family: var(--mono); font-size: .68rem; color: var(--text-3);
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: 6px; padding: .45rem .75rem; margin-top: .75rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-url .c-accent { color: var(--accent); }

.mock-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
}
.mock-stat {
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: 8px; padding: .7rem;
    display: flex; flex-direction: column; gap: .2rem;
}
.mock-stat-val { font-size: .95rem; font-weight: 700; color: var(--text-1); font-family: var(--mono); }
.mock-stat-lbl { font-size: .62rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.mock-stat-val.green { color: var(--green); }
.mock-stat-val.purple { color: var(--accent); }

/* ── Divider ── */
.section-divider {
    height: 1px; background: var(--border);
    max-width: 1200px; margin: 0 auto;
}

/* ── Features ── */
.section {
    position: relative; z-index: 1;
    max-width: 1200px; margin: 0 auto;
    padding: 5rem 2rem;
}
.section-tag {
    font-size: .7rem; font-weight: 700; color: var(--accent);
    text-transform: uppercase; letter-spacing: .1em; margin-bottom: .75rem;
}
.section-title {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 700; letter-spacing: -.03em; margin-bottom: .75rem;
}
.section-sub {
    font-size: .95rem; color: var(--text-2); max-width: 520px; line-height: 1.65;
}
.section-head { margin-bottom: 3rem; }

.feat-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.feat-card {
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: 14px; padding: 1.5rem;
    transition: border-color .2s, transform .2s;
    cursor: default;
}
.feat-card:hover {
    border-color: var(--border-h);
    transform: translateY(-2px);
}
.feat-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem; flex-shrink: 0;
}
.feat-icon.purple { background: var(--accent-dim); color: var(--accent); }
.feat-icon.green  { background: var(--green-dim);  color: var(--green); }
.feat-icon.yellow { background: rgba(254,202,87,.12); color: #feca57; }
.feat-icon svg { width: 20px; height: 20px; }
.feat-title {
    font-size: .9rem; font-weight: 700; margin-bottom: .4rem;
}
.feat-desc {
    font-size: .8rem; color: var(--text-2); line-height: 1.65;
}

/* ── Steps ── */
.steps-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
    position: relative;
}
.steps-grid::before {
    content: '';
    position: absolute; top: 22px; left: calc(16.67% + 22px); right: calc(16.67% + 22px);
    height: 1px; background: linear-gradient(90deg, var(--accent), var(--green));
    opacity: .3;
}
.step {
    display: flex; flex-direction: column; gap: .75rem;
}
.step-num {
    width: 44px; height: 44px; border-radius: 12px;
    border: 1px solid var(--border-h);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; font-family: var(--mono);
    color: var(--accent); background: var(--accent-dim);
}
.step-title { font-size: .9rem; font-weight: 700; }
.step-desc  { font-size: .8rem; color: var(--text-2); line-height: 1.65; }

/* ── CTA banner ── */
.cta-section {
    position: relative; z-index: 1;
    padding: 0 2rem 6rem;
}
.cta-inner {
    max-width: 1200px; margin: 0 auto;
    background: linear-gradient(135deg, rgba(124,92,252,.1) 0%, rgba(0,214,143,.06) 100%);
    border: 1px solid rgba(124,92,252,.2);
    border-radius: 20px; padding: 3.5rem 3rem;
    text-align: center; position: relative; overflow: hidden;
}
.cta-inner::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,92,252,.07) 0%, transparent 70%);
    pointer-events: none;
}
.cta-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700; letter-spacing: -.03em; margin-bottom: .75rem; position: relative;
}
.cta-sub {
    font-size: .95rem; color: var(--text-2); margin-bottom: 2rem; position: relative;
}
.cta-actions { display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap; position: relative; }

/* ── Footer ── */
footer {
    position: relative; z-index: 1;
    border-top: 1px solid var(--border);
    padding: 2rem;
}
.footer-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.footer-copy {
    font-size: .75rem; color: var(--text-3);
}
.footer-links {
    display: flex; gap: 1.5rem;
}
.footer-link {
    font-size: .75rem; color: var(--text-3); text-decoration: none; transition: color .15s;
}
.footer-link:hover { color: var(--text-2); text-decoration: none; }
.footer-author {
    color: var(--accent); font-weight: 600; text-decoration: none;
    transition: color .15s, opacity .15s;
}
.footer-author:hover { opacity: .75; text-decoration: none; }

/* ── Creator Card ── */
.creator-section {
    position: relative; z-index: 1;
    max-width: 1200px; margin: 0 auto;
    padding: 5rem 2rem;
    display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.creator-card {
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: 20px; padding: 1.75rem 2rem;
    display: flex; align-items: center; gap: 1.75rem;
    max-width: 560px; width: 100%;
    position: relative; overflow: hidden;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.creator-card:hover {
    border-color: rgba(124,92,252,.3);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(124,92,252,.12);
}
.creator-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(124,92,252,.05) 0%, transparent 60%);
    pointer-events: none;
}
.creator-card::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent), #a78bfa, var(--green));
}
.creator-avatar-wrap { position: relative; flex-shrink: 0; }
.creator-avatar {
    width: 72px; height: 72px; border-radius: 50%;
    object-fit: cover; display: block;
    box-shadow: 0 0 0 3px rgba(124,92,252,.35), 0 0 0 5px rgba(124,92,252,.1);
}
.creator-avatar-placeholder {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #a78bfa);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; font-weight: 700; color: #fff;
    box-shadow: 0 0 0 3px rgba(124,92,252,.35), 0 0 0 5px rgba(124,92,252,.1);
}
.creator-info { flex: 1; min-width: 0; }
.creator-name-row {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .35rem; flex-wrap: wrap;
}
.creator-name { font-size: 1.05rem; font-weight: 700; color: var(--text-1); }
.creator-role {
    font-size: .62rem; font-weight: 700; padding: .18rem .5rem; border-radius: 4px;
    background: var(--accent-dim); color: var(--accent);
    border: 1px solid rgba(124,92,252,.25);
    text-transform: uppercase; letter-spacing: .06em;
}
.creator-badges-row {
    display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .65rem;
}
.creator-badge-chip {
    font-size: .63rem; font-weight: 600; padding: .18rem .45rem; border-radius: 4px;
    background: var(--bg-3); border: 1px solid var(--border); color: var(--text-2);
}
.creator-stats-row {
    display: flex; align-items: center; gap: 1rem;
}
.creator-stat { display: flex; flex-direction: column; gap: .08rem; }
.creator-stat-val {
    font-size: .82rem; font-weight: 700; color: var(--text-1); font-family: var(--mono);
}
.creator-stat-lbl {
    font-size: .6rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .07em;
}
.creator-stat-sep { width: 1px; height: 22px; background: var(--border); }

/* ── Responsive ── */
@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; padding: 4rem 1.5rem 3rem; gap: 2.5rem; }
    .hero-visual { display: none; }
    .feat-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: 1fr; }
    .steps-grid::before { display: none; }
}
@media (max-width: 600px) {
    .feat-grid { grid-template-columns: 1fr; }
    .lp-nav { padding: 0 1rem; }
    .section, .cta-section { padding-left: 1.25rem; padding-right: 1.25rem; }
    .cta-inner { padding: 2.5rem 1.5rem; }
}