:root {
  /* ORVX — same palette as the product. */
  --orvx-bg:        #F7F7F5;
  --orvx-surface:   #FFFFFF;
  --orvx-text:      #111113;
  --orvx-border:    #E6E7EA;
  --orvx-dark:      #17181C;
  --orvx-lime:      #C7FF3D;
  --orvx-lime-soft: #F0FFD0;

  --bg: var(--orvx-bg);
  --panel: var(--orvx-surface);
  --panel-soft: #F7F7F5;
  --line: var(--orvx-border);
  --text: var(--orvx-text);
  --muted: #5F6268;
  --brand: var(--orvx-dark);
  --brand-2: #26282E;
  --lime: var(--orvx-lime);
  --lime-soft: var(--orvx-lime-soft);
  --lime-ink: #3D4A00;
  --danger: #B91C1C;
  --warn: #B45309;
  --good: #15803D;
}

* { box-sizing: border-box; }

/* ORVX wordmark — near-black type with the X standing on a lime tile. Lime as
   ink on white is ~1.4:1; as a ground behind near-black it is ~16:1. */
.os-wordmark { font-weight: 700; letter-spacing: .10em; color: var(--orvx-text); white-space: nowrap;
  direction: ltr; unicode-bidi: isolate; }
.os-wordmark .x {
  display: inline-block; background: var(--orvx-lime); color: var(--orvx-text);
  border-radius: 3px; padding: 0 .17em; margin-left: .07em; letter-spacing: 0;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(circle at 50% -18%, rgba(199, 255, 61, 0.16), transparent 55%),
    var(--orvx-bg);
}

body[dir="rtl"] { font-family: "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", sans-serif; }

a { color: inherit; text-decoration: none; }

.shell { max-width: 1120px; margin: 0 auto; padding: 24px 18px 60px; }

.topbar {
  position: sticky;
  top: 14px;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--line);
  backdrop-filter: blur(8px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  box-shadow: 0 0 22px rgba(199, 255, 61, 0.85);
}

.nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--muted); font-size: 0.92rem; }
.nav a:hover { color: var(--text); }

.btn {
  border: 1px solid var(--line);
  background: var(--line);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 11px;
  cursor: pointer;
  font: inherit;
}
.btn.primary {
  background: linear-gradient(120deg, rgba(72, 162, 255, 0.25), rgba(52, 211, 153, 0.22));
  border-color: rgba(72, 162, 255, 0.45);
}

.hero {
  margin-top: 26px;
  padding: 34px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(16, 24, 35, 0.95), rgba(12, 18, 27, 0.95));
}
.hero h1 { margin: 0; font-size: clamp(2rem, 4.5vw, 3.3rem); letter-spacing: -0.04em; }
.hero p { margin: 14px 0 0; color: var(--muted); max-width: 720px; line-height: 1.6; }
.hero-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }

.section { margin-top: 26px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(14, 21, 30, 0.9); }
.section h2 { margin: 0 0 12px; font-size: 1.4rem; }
.section p { margin: 0; color: var(--muted); line-height: 1.6; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: rgba(8, 13, 20, 0.7); }
.card h3 { margin: 0 0 8px; font-size: 1.03rem; }
.card p { margin: 0; color: var(--muted); font-size: 0.93rem; }

.faq-item { border-top: 1px solid var(--line); padding: 12px 0; }
.faq-item:first-child { border-top: 0; }
.faq-item h4 { margin: 0 0 6px; font-size: 1rem; }
.faq-item p { margin: 0; }

.pricing-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--line); }
.toggle button { border: 0; background: transparent; color: var(--muted); padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.toggle button.active { background: rgba(72, 162, 255, 0.2); color: var(--text); }

.pricing-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plan { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: rgba(8, 13, 20, 0.75); }
.plan.recommended { border-color: rgba(72, 162, 255, 0.45); box-shadow: 0 0 0 1px rgba(72, 162, 255, 0.35) inset; }
.badge-rec { font-size: 0.75rem; color: var(--orvx-text); background: var(--lime-soft); border: 1px solid var(--lime); border-radius: 999px; padding: 4px 9px; font-weight: 560; }
.plan h3 { margin: 0 0 8px; }
.price { font-size: 1.9rem; margin: 0; }
.price small { font-size: 0.85rem; color: var(--muted); }
.features { margin: 12px 0; padding: 0; list-style: none; display: grid; gap: 7px; color: var(--muted); }

.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kv .card strong { display: block; margin-top: 5px; font-size: 1.2rem; }

.status-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 0.82rem; }
.status-pill.good { color: var(--good); border-color: rgba(83, 224, 162, 0.45); }
.status-pill.warn { color: var(--warn); border-color: rgba(255, 210, 122, 0.45); }
.status-pill.bad { color: var(--danger); border-color: rgba(255, 139, 139, 0.45); }

.footer {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .grid-3, .pricing-grid, .kv { grid-template-columns: 1fr; }
}