:root {
  --bg: #09090d !important;
  --bg2: #111118 !important;
  --bg3: #171720 !important;
  --bg4: #22232b !important;
  --border: rgba(255, 255, 255, .08) !important;
  --border2: rgba(255, 255, 255, .13) !important;
  --accent: #f4f1ea !important;
  --accent2: #aeb3bf !important;
  --glow: rgba(255, 255, 255, .08) !important;
  --text: #f4f1ea !important;
  --muted: #777d8d !important;
  --muted2: #a0a6b4 !important;
}

body {
  font-family: var(--ui-font-sans, "Manrope", "DM Sans", sans-serif) !important;
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 255, 255, .08), transparent 26%),
    radial-gradient(circle at 94% 10%, rgba(123, 129, 139, .16), transparent 30%),
    linear-gradient(135deg, #07070b 0%, #101017 48%, #08080c 100%) !important;
}

.grid-bg {
  background-image:
    linear-gradient(rgba(255, 255, 255, .024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .024) 1px, transparent 1px) !important;
  z-index: 0 !important;
  opacity: .72 !important;
}

.hero,
section,
.features,
#how,
.alerts-section,
.cta-section,
footer {
  background: transparent !important;
}

nav {
  background: rgba(9, 9, 13, .74) !important;
  border-bottom-color: rgba(255, 255, 255, .08) !important;
}

.nav-logo,
h1,
h2,
.feat-title,
.plan-name {
  font-family: var(--ui-font-sans, "Manrope", sans-serif) !important;
}

.nav-logo-icon {
  color: transparent !important;
  font-size: 0 !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .045)) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
}

.nav-logo-icon::after {
  content: "\ef36";
  font-family: "remixicon";
  font-size: 18px;
  color: var(--text);
}

footer .footer-left > div:first-child {
  color: transparent !important;
  font-size: 0 !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .045)) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
}

footer .footer-left > div:first-child::after {
  content: "\ef36";
  font-family: "remixicon";
  font-size: 15px;
  color: var(--text);
}

.btn-nav.primary,
.btn-primary,
.plan-cta.solid {
  background: linear-gradient(145deg, #f4f1ea, #aeb3bf) !important;
  color: #09090d !important;
  border-color: rgba(255, 255, 255, .24) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

.btn-ghost,
.btn-nav,
.lang-btn,
.plan-cta.outline {
  background: rgba(255, 255, 255, .045) !important;
  border-color: rgba(255, 255, 255, .10) !important;
}

h1 em,
h2 em,
.metric-val {
  background: linear-gradient(145deg, #f4f1ea, #8d93a0) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.hero-badge,
.feat-tag,
.lang-item.active {
  color: #d6d9e0 !important;
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

.features-header .section-sub {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.dot,
.cursor {
  background: #d7d9df !important;
}

.orb-1,
.orb-2,
.cta-glow {
  opacity: .55 !important;
  filter: blur(90px) !important;
}

.dashboard-frame,
.metrics-strip,
.feat-card,
.alert-ch,
.plan-card,
.how-terminal,
.hero-ticker {
  background: linear-gradient(145deg, rgba(28, 27, 35, .92), rgba(16, 16, 23, .96)) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .40) !important;
}

.feat-card:hover,
.alert-ch:hover,
.plan-card.featured,
.plan-cta.outline:hover {
  border-color: rgba(255, 255, 255, .22) !important;
}

.fsv.a,
.ta,
.section-label,
.plan-cta.outline:hover {
  color: #d7d9df !important;
}

.lp-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 6, 9, .72);
  backdrop-filter: blur(18px);
  z-index: 1000;
}

.lp-modal.open {
  display: flex;
}

.lp-modal-panel {
  width: min(980px, 100%);
  height: min(760px, calc(100vh - 48px));
  background: linear-gradient(145deg, rgba(28, 27, 35, .98), rgba(14, 14, 20, .99));
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .62);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lp-modal-head {
  height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  border-bottom: 0;
  color: var(--text);
  font-weight: 800;
  letter-spacing: -.02em;
  position: relative;
  z-index: 2;
}

.lp-modal-head span {
  display: none;
}

.lp-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.lp-modal-frame {
  width: 100%;
  flex: 1;
  border: 0;
  background: #09090d;
}

@media (max-width: 720px) {
  .lp-modal { padding: 10px; }
  .lp-modal-panel { height: calc(100vh - 20px); border-radius: 16px; }
}