:root {
    --bg: #050816;
    --bg-soft: #10172d;
    --fg: #f5f7ff;
    --muted: rgba(245, 247, 255, 0.55);
    --accent-a: #7cf7d4;
    --accent-b: #ff8f5b;
    --accent-c: #8ec5ff;
    --line: rgba(142, 197, 255, 0.10);
    --card-bg: rgba(16, 23, 45, 0.55);
    --card-border: rgba(142, 197, 255, 0.12);
    --radius: 14px;
}

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

html, body { min-height: 100%; }

body {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 20% 15%, rgba(124,247,212,.14), transparent 32%),
        radial-gradient(circle at 80% 14%, rgba(255,143,91,.15), transparent 30%),
        radial-gradient(circle at 50% 82%, rgba(142,197,255,.12), transparent 28%),
        linear-gradient(155deg, var(--bg) 0%, #081124 40%, var(--bg-soft) 100%);
    color: var(--fg);
    font-family: "Inter", system-ui, sans-serif;
    line-height: 1.55;
}

/* ---------- scene ---------- */
.scene {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    isolation: isolate;
}

#particles {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.grid, .scene::before {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.grid {
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at center, black 20%, transparent 72%);
    opacity: .45;
    animation: drift 26s linear infinite;
}

.scene::before {
    content: "";
    background: radial-gradient(circle at center, rgba(124,247,212,.08), transparent 56%);
    filter: blur(14px);
    opacity: .7;
}

/* ---------- orbs ---------- */
.orb {
    position: fixed;
    border-radius: 999px;
    filter: blur(14px);
    mix-blend-mode: screen;
    opacity: .6;
    pointer-events: none;
}

.orb-a { width: 22rem; height: 22rem; top: 6%; left: 10%; background: radial-gradient(circle, rgba(124,247,212,.6), rgba(124,247,212,.03) 72%); animation: float-a 16s ease-in-out infinite; }
.orb-b { width: 26rem; height: 26rem; right: 8%; bottom: 8%; background: radial-gradient(circle, rgba(255,143,91,.55), rgba(255,143,91,.03) 74%); animation: float-b 20s ease-in-out infinite; }
.orb-c { width: 14rem; height: 14rem; right: 22%; top: 15%; background: radial-gradient(circle, rgba(142,197,255,.55), rgba(142,197,255,.04) 75%); animation: float-c 18s ease-in-out infinite; }

/* ---------- topbar ---------- */
.topbar {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1100px;
    padding: 1.4rem 2rem;
}

.topbar-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.logo-icon { width: 30px; height: 30px; }

.topbar-name {
    font-family: "Orbitron", sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .04em;
    background: linear-gradient(135deg, var(--fg), var(--accent-a));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.topbar-links { display: flex; align-items: center; gap: 1rem; }

.status-badge {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-a);
    border: 1px solid rgba(124,247,212,.22);
    padding: .28rem .8rem;
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

.pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-a);
    animation: pulse-glow 2s ease-in-out infinite;
}

/* ---------- hero ---------- */
.hero {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    padding: 2rem 1.5rem 3rem;
    text-align: center;
    max-width: 960px;
    width: 100%;
}

.chip {
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-c);
    background: rgba(142,197,255,.08);
    border: 1px solid rgba(142,197,255,.18);
    padding: .35rem 1.1rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

.wordmark {
    margin: 0;
    font-family: "Orbitron", sans-serif;
    font-size: clamp(3.5rem, 13vw, 9rem);
    font-weight: 900;
    letter-spacing: -.06em;
    line-height: .9;
    color: transparent;
    background: linear-gradient(120deg, var(--fg) 10%, var(--accent-a) 36%, var(--accent-c) 58%, var(--accent-b) 85%, var(--fg) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmer 8s linear infinite, breathe 6s ease-in-out infinite;
    position: relative;
}

.wordmark::before, .wordmark::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: -1;
}

.wordmark::before { color: rgba(255,255,255,.04); transform: translate(.04em,.03em); }
.wordmark::after  { color: rgba(124,247,212,.12); filter: blur(20px); }

.tagline {
    max-width: 520px;
    color: var(--muted);
    font-size: .95rem;
    font-weight: 400;
    line-height: 1.6;
}

/* ---------- feature cards ---------- */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
    margin-top: .8rem;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1.6rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    backdrop-filter: blur(10px);
    transition: border-color .3s, transform .3s;
}

.card:hover {
    border-color: rgba(124,247,212,.28);
    transform: translateY(-3px);
}

.card-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(124,247,212,.08);
    color: var(--accent-a);
}

.card-icon svg { width: 20px; height: 20px; }

.card h3 {
    font-family: "Orbitron", sans-serif;
    font-size: .82rem;
    font-weight: 700;
    color: var(--fg);
}

.card p {
    font-size: .8rem;
    color: var(--muted);
    line-height: 1.55;
}

/* ---------- terminal ---------- */
.terminal {
    width: 100%;
    max-width: 640px;
    margin-top: 1.2rem;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--card-border);
    background: rgba(8,12,28,.85);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

.terminal-bar {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .9rem;
    background: rgba(16,23,45,.7);
    border-bottom: 1px solid var(--card-border);
}

.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }

.terminal-title {
    margin-left: auto;
    font-size: .65rem;
    letter-spacing: .06em;
    color: var(--muted);
    text-transform: uppercase;
}

.terminal-body {
    padding: 1rem 1.2rem;
    font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
    font-size: .78rem;
    line-height: 1.7;
}

.term-line { white-space: pre-wrap; }

.term-prompt { color: var(--accent-a); font-weight: 600; }
.term-cmd    { color: var(--fg); }

.term-output {
    margin-top: .4rem;
    color: rgba(245,247,255,.6);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .6s ease, transform .6s ease;
}

.term-output.visible {
    opacity: 1;
    transform: translateY(0);
}

.term-ok { color: var(--accent-a); }
.term-hl { color: var(--accent-c); }

/* ---------- footer ---------- */
.footer-note {
    margin-top: 1.4rem;
    font-size: .7rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(245,247,255,.28);
}

/* ---------- keyframes ---------- */
@keyframes shimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-.06em) scale(1.012); }
}

@keyframes drift {
    from { transform: translate3d(0,0,0); }
    to   { transform: translate3d(-32px,-32px,0); }
}

@keyframes float-a {
    0%, 100% { transform: translate3d(0,0,0); }
    50%      { transform: translate3d(3rem,2rem,0); }
}

@keyframes float-b {
    0%, 100% { transform: translate3d(0,0,0); }
    50%      { transform: translate3d(-2rem,-3rem,0); }
}

@keyframes float-c {
    0%, 100% { transform: translate3d(0,0,0); }
    50%      { transform: translate3d(-1rem,2.5rem,0); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124,247,212,.5); }
    50%      { box-shadow: 0 0 0 5px rgba(124,247,212,0); }
}

/* ---------- responsive ---------- */
@media (max-width: 720px) {
    .features { grid-template-columns: 1fr; gap: .8rem; }
    .topbar { padding: 1rem 1.2rem; }
    .hero { padding: 1.5rem 1.2rem 2rem; }
    .terminal-body { font-size: .72rem; }
}

@media (max-width: 480px) {
    .wordmark { font-size: clamp(3rem, 18vw, 5rem); }
    .tagline  { font-size: .85rem; }
    .orb-a { width: 14rem; height: 14rem; }
    .orb-b { width: 16rem; height: 16rem; }
    .orb-c { width: 10rem; height: 10rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}