:root {
    --bg: #06080d;
    --bg2: #0e1622;
    --panel: rgba(12, 18, 28, .72);
    --panel2: rgba(17, 29, 43, .86);
    --line: rgba(95, 217, 214, .28);
    --line-hot: rgba(229, 117, 57, .45);
    --text: #eef7ff;
    --muted: #9fb3c7;
    --cyan: #48e5d4;
    --blue: #4db8ff;
    --rust: #d67b3f;
    --danger: #ff5f70;
    --ok: #57e593;
    --shadow: 0 28px 80px rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
        radial-gradient(900px 460px at 10% 0%, rgba(53, 188, 255, .22), transparent 60%),
        radial-gradient(900px 520px at 100% 10%, rgba(214, 123, 63, .16), transparent 58%),
        linear-gradient(145deg, var(--bg), var(--bg2) 58%, #070b11);
    background-size: 42px 42px, 42px 42px, 100% 100%, 100% 100%, 100% 100%;
    overflow-x: hidden;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.026) 0 1px, transparent 1px 5px);
    opacity: .18;
    mix-blend-mode: screen;
    z-index: 20;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

.boot-loader {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    gap: 14px;
    align-content: center;
    background: #05080d;
    transition: .45s opacity, .45s visibility;
}
.boot-loader.hide { opacity: 0; visibility: hidden; }
.boot-loader span { color: #8eeedf; font-size: 12px; letter-spacing: .18em; }
.loader-ring {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 2px solid rgba(72, 229, 212, .18);
    border-top-color: var(--cyan);
    animation: spin .8s linear infinite;
}

.site-nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1180px, calc(100% - 28px));
    height: 64px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 14px;
    border: 1px solid rgba(103, 211, 219, .24);
    border-radius: 10px;
    background: rgba(7, 12, 20, .62);
    backdrop-filter: blur(18px);
    box-shadow: 0 16px 60px rgba(0,0,0,.28);
    transition: .25s background, .25s box-shadow, .25s border-color;
}
.site-nav.scrolled {
    background: rgba(6, 10, 17, .9);
    border-color: rgba(103, 211, 219, .38);
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.home-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; white-space: nowrap; }
.logo-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    box-shadow: 0 10px 32px rgba(72, 229, 212, .32);
    overflow: hidden;
}
.logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.nav-menu { display: flex; align-items: center; gap: 6px; }
.nav-menu a {
    padding: 9px 11px;
    border-radius: 8px;
    color: #c4d8e9;
    font-size: 14px;
    transition: .18s background, .18s color;
}
.nav-menu a:hover { background: rgba(72, 229, 212, .1); color: #ebffff; }
.nav-cta, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    font-weight: 800;
    transition: .2s transform, .2s box-shadow, .2s border-color;
}
.nav-cta, .btn-primary {
    color: #06151a;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    box-shadow: 0 14px 34px rgba(72, 229, 212, .28);
}
.btn-secondary {
    color: #e8fbff;
    border: 1px solid rgba(103, 211, 219, .42);
    background: rgba(13, 27, 40, .68);
}
.nav-cta:hover, .btn:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(72, 229, 212, .34); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: rgba(12, 21, 33, .8); border-radius: 8px; }
.nav-toggle span { display: block; width: 20px; height: 2px; margin: 5px auto; background: #d7f7ff; }

.hero-section {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 120px 20px 70px;
}
.particle-canvas, .grid-layer, .scan-layer, .code-rain { position: absolute; inset: 0; pointer-events: none; }
.particle-canvas { opacity: .72; }
.grid-layer {
    background:
        linear-gradient(rgba(72,229,212,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(72,229,212,.1) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: linear-gradient(to bottom, transparent, black 18%, black 78%, transparent);
    transform: perspective(650px) rotateX(60deg) translateY(130px) scale(1.2);
    transform-origin: bottom;
}
.scan-layer {
    background: linear-gradient(90deg, transparent 0%, rgba(72,229,212,.08) 48%, rgba(72,229,212,.26) 50%, rgba(72,229,212,.08) 52%, transparent 100%);
    width: 28%;
    animation: scan 6s ease-in-out infinite;
}
.code-rain span {
    position: absolute;
    color: rgba(185, 255, 237, .24);
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    animation: drift 9s ease-in-out infinite;
}
.code-rain span:nth-child(1) { left: 12%; top: 22%; }
.code-rain span:nth-child(2) { right: 18%; top: 18%; animation-delay: -1.2s; }
.code-rain span:nth-child(3) { left: 18%; bottom: 16%; animation-delay: -2.5s; }
.code-rain span:nth-child(4) { right: 9%; bottom: 24%; animation-delay: -3.8s; }
.code-rain span:nth-child(5) { left: 46%; top: 12%; animation-delay: -5s; }

.hero-inner {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 42px;
    align-items: center;
}
.eyebrow {
    display: inline-flex;
    color: #93f7e8;
    font-size: 12px;
    letter-spacing: .16em;
    font-weight: 800;
}
.hero-copy h1 {
    max-width: 780px;
    margin: 16px 0 18px;
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.03;
}
.hero-copy p {
    max-width: 680px;
    margin: 0;
    color: #b8c9d8;
    font-size: 18px;
    line-height: 1.8;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.hero-proof span {
    border: 1px solid rgba(103, 211, 219, .28);
    background: rgba(13, 24, 34, .62);
    color: #c8e6f2;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 13px;
}

.ops-panel {
    position: relative;
    border: 1px solid rgba(102, 226, 218, .34);
    border-radius: 10px;
    padding: 18px;
    background:
        linear-gradient(155deg, rgba(15, 27, 39, .94), rgba(7, 12, 20, .9)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 9px);
    box-shadow: var(--shadow), 0 0 60px rgba(72, 229, 212, .12);
    animation: floatPanel 5s ease-in-out infinite;
    overflow: hidden;
}
.ops-panel::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: linear-gradient(120deg, transparent, rgba(72,229,212,.2), transparent);
    transform: translateX(-120%);
    animation: panelShine 5s infinite;
}
.panel-top, .server-gauge, .panel-grid, .mini-table, .alert-strip { position: relative; z-index: 1; }
.panel-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel-top span, .server-gauge span, .panel-grid span { display: block; color: var(--muted); font-size: 12px; }
.panel-top strong { display: block; margin-top: 5px; font-size: 18px; }
.panel-top em { font-style: normal; color: #8fffc8; border: 1px solid rgba(87, 229, 147, .34); padding: 7px 10px; border-radius: 999px; background: rgba(15, 84, 55, .28); }
.server-gauge { display: flex; justify-content: space-between; align-items: center; margin: 24px 0; }
.server-gauge strong { display: block; margin-top: 6px; font-size: 30px; }
.gauge-ring {
    width: 94px;
    height: 94px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--cyan) 0 64%, rgba(255,255,255,.08) 64% 100%);
}
.gauge-ring span { width: 72px; height: 72px; border-radius: 50%; background: #08101a; display: grid; place-items: center; color: #e9ffff; font-weight: 800; }
.panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.panel-grid div, .mini-table div {
    border: 1px solid rgba(103, 211, 219, .18);
    background: rgba(8, 16, 27, .72);
    border-radius: 8px;
    padding: 10px;
}
.panel-grid strong { display: block; margin-top: 5px; }
.danger { color: var(--danger); }
.mini-table { display: grid; gap: 8px; margin-top: 12px; }
.mini-table div { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; }
.mini-table strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-table em { color: #a7f5cc; font-style: normal; font-size: 12px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #03171b; background: var(--cyan); font-weight: 900; }
.avatar.hot { background: var(--danger); color: #fff; }
.alert-strip { margin-top: 12px; border: 1px solid rgba(255,95,112,.34); color: #ffd7dc; background: rgba(95, 18, 28, .36); border-radius: 8px; padding: 10px; font-family: Consolas, Monaco, monospace; font-size: 12px; }

section:not(.hero-section) { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 82px 0; }
.section-head { margin-bottom: 26px; }
.section-head h2 { margin: 10px 0 0; font-size: clamp(28px, 4vw, 44px); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.feature-card, .stat-card, .flow-card, .cta-section {
    border: 1px solid rgba(103, 211, 219, .22);
    background: linear-gradient(150deg, rgba(15, 27, 40, .82), rgba(8, 13, 21, .78));
    border-radius: 10px;
    box-shadow: var(--shadow);
}
.feature-card {
    min-height: 210px;
    padding: 20px;
    transition: .22s transform, .22s border-color, .22s background;
}
.feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(72, 229, 212, .58);
    background: linear-gradient(150deg, rgba(18, 59, 62, .84), rgba(33, 24, 19, .78));
}
.card-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #07161b;
    background: linear-gradient(135deg, var(--cyan), var(--rust));
    font-weight: 900;
}
.feature-card h3 { margin: 18px 0 10px; }
.feature-card p, .flow-card p, .cta-section p { color: #aec2d4; line-height: 1.75; margin: 0; }

.console-demo {
    display: grid;
    grid-template-columns: 230px 1fr;
    min-height: 430px;
    border: 1px solid rgba(103, 211, 219, .24);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(5, 9, 15, .78);
    box-shadow: var(--shadow);
}
.command-list { padding: 14px; display: grid; align-content: start; gap: 10px; border-right: 1px solid rgba(103, 211, 219, .18); background: rgba(11, 19, 30, .76); }
.command-btn {
    border: 1px solid rgba(103, 211, 219, .22);
    background: rgba(13, 26, 39, .8);
    color: #d6eaf7;
    min-height: 44px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    padding: 0 12px;
    transition: .18s background, .18s border-color, .18s transform;
}
.command-btn:hover, .command-btn.active { transform: translateX(4px); border-color: rgba(72,229,212,.56); background: rgba(23, 60, 64, .75); }
.command-btn.danger.active, .command-btn.danger:hover { border-color: rgba(255,95,112,.58); background: rgba(81, 21, 30, .72); }
.terminal-window { min-width: 0; background: #03070d; }
.terminal-bar { height: 44px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid rgba(103, 211, 219, .16); background: #08101a; }
.terminal-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.terminal-bar span:nth-child(2) { background: var(--rust); }
.terminal-bar span:nth-child(3) { background: var(--ok); }
.terminal-bar strong { margin-left: 8px; color: #a7bdd1; font-size: 12px; letter-spacing: .08em; }
#terminalOutput {
    height: 386px;
    margin: 0;
    padding: 18px;
    overflow: auto;
    color: #bfffee;
    font-family: Consolas, Monaco, monospace;
    font-size: 14px;
    line-height: 1.75;
    white-space: pre-wrap;
}

.stats-section { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat-card { padding: 22px; }
.stat-card strong { display: block; font-size: 42px; color: #a7fff0; }
.stat-card strong::after { content: "+"; color: var(--rust); }
.stat-card span { color: var(--muted); }

.flow-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; position: relative; }
.flow-card { padding: 20px; }
.flow-card span { color: var(--rust); font-size: 13px; font-weight: 900; letter-spacing: .14em; }
.flow-card h3 { margin: 12px 0 10px; }

.cta-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 36px;
    background:
        linear-gradient(130deg, rgba(9, 20, 31, .92), rgba(17, 41, 44, .82), rgba(53, 29, 20, .8)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 10px);
}
.cta-section h2 { margin: 8px 0 12px; font-size: clamp(28px, 4vw, 46px); }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.site-footer {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 30px 0 46px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--muted);
    border-top: 1px solid rgba(103, 211, 219, .18);
}
.site-footer strong { color: var(--text); }

.toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 70;
    padding: 11px 14px;
    border: 1px solid rgba(72, 229, 212, .42);
    border-radius: 8px;
    background: rgba(7, 14, 22, .92);
    color: #ddfffa;
    box-shadow: var(--shadow);
    transform: translateY(18px);
    opacity: 0;
    pointer-events: none;
    transition: .22s transform, .22s opacity;
}
.toast.show { transform: translateY(0); opacity: 1; }

.reveal { opacity: 0; transform: translateY(24px); transition: .7s opacity, .7s transform; }
.reveal.in { opacity: 1; transform: translateY(0); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scan { 0%, 100% { transform: translateX(-120%); opacity: 0; } 20%, 80% { opacity: 1; } 50% { transform: translateX(420%); } }
@keyframes drift { 0%, 100% { transform: translateY(0); opacity: .2; } 50% { transform: translateY(22px); opacity: .52; } }
@keyframes floatPanel { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes panelShine { 0%, 45% { transform: translateX(-120%); } 70%, 100% { transform: translateX(120%); } }

@media (max-width: 1040px) {
    .nav-menu {
        position: absolute;
        top: 74px;
        right: 0;
        width: min(320px, 100%);
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        border: 1px solid rgba(103, 211, 219, .24);
        border-radius: 10px;
        background: rgba(7, 12, 20, .94);
        box-shadow: var(--shadow);
    }
    .nav-menu.open { display: flex; }
    .nav-toggle { display: block; }
    .nav-cta { display: none; }
    .hero-inner { grid-template-columns: 1fr; }
    .ops-panel { max-width: 560px; }
    .feature-grid, .flow-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .site-nav { top: 10px; height: 58px; width: calc(100% - 20px); }
    .home-logo span:last-child { font-size: 15px; }
    .hero-section { padding: 100px 16px 52px; }
    .hero-copy h1 { font-size: 40px; }
    .hero-copy p { font-size: 16px; }
    .hero-actions .btn { width: 100%; }
    .ops-panel { padding: 14px; }
    .server-gauge { align-items: flex-start; }
    .feature-grid, .flow-line, .stats-section { grid-template-columns: 1fr; }
    section:not(.hero-section) { width: min(100% - 24px, 1180px); padding: 54px 0; }
    .console-demo { grid-template-columns: 1fr; }
    .command-list { border-right: 0; border-bottom: 1px solid rgba(103, 211, 219, .18); }
    .command-btn:hover, .command-btn.active { transform: translateY(-2px); }
    #terminalOutput { height: 320px; font-size: 13px; }
    .cta-section { flex-direction: column; align-items: stretch; padding: 24px; }
    .cta-actions .btn { width: 100%; }
    .site-footer { flex-direction: column; }
}

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

/* Rust corrosion visual pass: local image assets, no external dependency. */
.home-page,
body {
    background-image:
        radial-gradient(900px 520px at 12% -10%, rgba(72,229,212,.2), transparent 60%),
        radial-gradient(900px 560px at 92% 10%, rgba(216,128,62,.2), transparent 58%),
        linear-gradient(110deg, rgba(3,7,13,.88), rgba(7,14,24,.72)),
        url('../img/rust-wasteland.svg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
.hero-visual,
.demo-shell,
.cta-panel {
    background-image:
        linear-gradient(145deg, rgba(6,12,22,.88), rgba(8,20,35,.62)),
        url('../img/server-room.svg');
    background-size: cover;
    background-position: center;
}
.features,
.flow {
    background-image:
        linear-gradient(rgba(5,8,14,.72), rgba(5,8,14,.72)),
        url('../img/tactical-map.svg');
    background-size: cover;
    background-position: center;
}
.terminal,
.output-panel,
.console-panel {
    background-image:
        linear-gradient(rgba(3,7,15,.9), rgba(3,7,15,.9)),
        url('../img/console-texture.svg');
    background-size: cover;
    background-position: center;
}