:root {
--hmo-primary: #E8B33D;
--hmo-primary-hover: #F2C25E;
--hmo-primary-active: #D19E2B;
--hmo-primary-rgb: 232, 179, 61;
--hmo-primary-light: rgba(232, 179, 61, 0.14);
--hmo-primary-bg: rgba(232, 179, 61, 0.08);
--hmo-bg: #0A0B0F;
--hmo-bg-gradient: linear-gradient(180deg, #0A0B0F 0%, #0D0F16 50%, #0A0B0F 100%);
--hmo-bg-deep: linear-gradient(160deg, #05060A 0%, #0D0F16 40%, #161225 75%, #241A0E 100%);
--hmo-surface: #12141B;
--hmo-surface-2: #171A23;
--hmo-surface-3: #1D212D;
--hmo-text: #F2F3F7;
--hmo-text-secondary: #A9AFBE;
--hmo-text-tertiary: #737A8C;
--hmo-divider: #21242F;
--hmo-border: #262A36;
--hmo-border-strong: #363B4D;
--hmo-success: #34C77B;
--hmo-success-bg: rgba(52, 199, 123, 0.12);
--hmo-warning: #FFB74D;
--hmo-warning-bg: rgba(255, 183, 77, 0.12);
--hmo-danger: #FF5A5A;
--hmo-danger-bg: rgba(250, 59, 59, 0.14);
--hmo-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--hmo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.35);
--hmo-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
--hmo-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
--hmo-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
--hmo-shadow-primary: 0 6px 20px rgba(232, 179, 61, 0.22);
}
body {
background: var(--hmo-bg);
color: var(--hmo-text);
}
::selection { background: rgba(232, 179, 61, 0.3); }
.lp-topnav {
background: rgba(10, 11, 15, 0.82);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--hmo-border);
}
.lp-topnav-brand {
color: var(--hmo-text);
gap: 8px;
}
.lp-topnav-brand:hover { color: var(--hmo-primary); }
.lp-topnav-brand span { font-weight: 700; letter-spacing: 0.5px; }
.brand-logo {
width: 24px;
height: 24px;
border-radius: 6px;
display: block;
flex-shrink: 0;
}
.lp-topnav-links a {
color: var(--hmo-text-secondary);
}
.lp-topnav-links a:hover { color: var(--hmo-text); }
.lp-topnav-links a.active { color: var(--hmo-primary); }
.lp-hero-bg { background: var(--hmo-bg-deep); }
.lp-hero-circle-1 {
background: radial-gradient(circle, rgba(232, 179, 61, 0.15) 0%, transparent 68%);
}
.lp-hero-circle-2 {
background: radial-gradient(circle, rgba(214, 48, 70, 0.12) 0%, transparent 68%);
}
.lp-hero-circle-3 {
background: radial-gradient(circle, rgba(88, 108, 220, 0.10) 0%, transparent 68%);
}
.lp-hero-tag {
background: rgba(232, 179, 61, 0.1);
color: var(--hmo-primary);
border: 1px solid rgba(232, 179, 61, 0.3);
}
.lp-hero-sub { color: var(--hmo-text-secondary); }
.lp-hero-config-box {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(232, 179, 61, 0.35);
}
.lp-hero-config-box code {
color: var(--hmo-primary);
text-shadow: 0 0 18px rgba(232, 179, 61, 0.35);
}
.lp-btn-primary {
background: linear-gradient(135deg, #E8B33D 0%, #C98F1F 100%);
color: #17120A;
}
.lp-btn-primary:hover {
background: linear-gradient(135deg, #F2C25E 0%, #D89E2B 100%);
box-shadow: 0 8px 24px rgba(232, 179, 61, 0.3);
}
.lp-btn-ghost {
color: var(--hmo-text);
border-color: var(--hmo-border-strong);
background: rgba(255, 255, 255, 0.03);
}
.lp-btn-ghost:hover {
border-color: var(--hmo-primary);
color: var(--hmo-primary);
background: rgba(232, 179, 61, 0.08);
}
.lp-card {
background: var(--hmo-surface);
border: 1px solid var(--hmo-border);
}
.lp-card:hover { border-color: rgba(232, 179, 61, 0.35); }
.lp-section-title { color: var(--hmo-text); }
.lp-section-sub { color: var(--hmo-text-secondary); }
.lp-footer {
background: #0C0D12;
border-top: 1px solid var(--hmo-border);
}
.lp-topnav-links.open,
.lp-topnav-links[style*="display: block"] {
background: #10121A;
}
.lp-feature-card,
.lp-content-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--hmo-border);
}
.lp-feature-card:hover {
background: rgba(255, 255, 255, 0.06);
}
.lp-section-alt {
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--hmo-border);
}
.lp-cta {
background: linear-gradient(135deg, #171208 0%, #241A0C 45%, #3A2A10 100%);
border: 1px solid rgba(232, 179, 61, 0.3);
}
.lp-step-number { color: #17120A; }
.lp-step-connector {
background: linear-gradient(90deg, rgba(232, 179, 61, 0.15), rgba(232, 179, 61, 0.6), rgba(232, 179, 61, 0.15));
}
.lp-content-body table th { background: rgba(255, 255, 255, 0.04); }
.lp-content-body table td { background: transparent; }
.lp-content-body table tr:hover td { background: rgba(255, 255, 255, 0.05); }
.lp-feature-icon[style*="#F0F0FF"] {
background: rgba(108, 92, 231, 0.16) !important;
}
.lp-hero-config {
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
.cfg-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.lp-hero-config-box {
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border: 1px solid rgba(232, 179, 61, 0.28);
border-radius: 999px;
padding: 7px 7px 7px 14px;
text-align: left;
transition: border-color 0.2s, box-shadow 0.2s;
}
.lp-hero-config-box:hover {
border-color: rgba(232, 179, 61, 0.6);
box-shadow: 0 0 0 1px rgba(232, 179, 61, 0.18), 0 6px 18px rgba(0, 0, 0, 0.35);
}
.cfg-badge {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--hmo-primary), var(--hmo-primary-active));
color: #17120A;
font-size: 13px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
}
.lp-hero-config-box code {
flex: 1;
min-width: 0;
text-align: left;
background: transparent;
border: none;
padding: 0;
font-size: 0.95rem;
color: var(--hmo-primary);
text-shadow: 0 0 18px rgba(232, 179, 61, 0.35);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lp-hero-config-copy {
flex-shrink: 0;
border-radius: 999px;
background: linear-gradient(135deg, var(--hmo-primary), var(--hmo-primary-active));
color: #17120A;
font-weight: 700;
padding: 8px 18px;
border: none;
border-left: none;
}
.lp-hero-config-copy:hover {
background: linear-gradient(135deg, var(--hmo-primary-hover), var(--hmo-primary));
}
.dl-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin: 16px 0 8px;
}
.dl-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--hmo-border);
border-radius: var(--hmo-radius-lg);
padding: 24px 20px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
transition: border-color 0.2s, transform 0.2s;
}
.dl-card:hover {
border-color: rgba(232, 179, 61, 0.35);
transform: translateY(-3px);
}
.dl-logo {
width: 56px;
height: 56px;
border-radius: 14px;
}
.dl-card h4 {
margin: 4px 0 0;
color: var(--hmo-text);
font-size: 1rem;
}
.dl-card p {
margin: 0;
color: var(--hmo-text-secondary);
font-size: 0.85rem;
line-height: 1.6;
flex: 1;
}
.dl-btn {
width: 100%;
justify-content: center;
display: inline-flex;
align-items: center;
gap: 6px;
}