:root {
  --ninja-graphite: #202226;
  --ninja-graphite-soft: #30343a;
  --ninja-ink: #17191c;
  --ninja-gold: #d9a83e;
  --ninja-gold-light: #f1c760;
  --ninja-paper: #f2f1ed;
  --ninja-line: rgba(32, 34, 38, 0.12);
}

/* Landing: graphite and warm gold replace the former blue castle palette. */
html body,
#main .framer-ojJen.framer-jvcg58 {
  background: radial-gradient(circle at 86% 8%, rgba(217, 168, 62, 0.2), transparent 27%),
    radial-gradient(circle at 7% 92%, rgba(32, 34, 38, 0.1), transparent 34%),
    var(--ninja-paper) !important;
}

#main [data-framer-name="Single-screen landing shell"] {
  border-color: var(--ninja-line) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.93), rgba(231, 230, 225, 0.9)) !important;
  box-shadow: 0 38px 100px rgba(32, 34, 38, 0.16) !important;
}

#main [data-framer-name="Blue security glow"] {
  background: radial-gradient(50% 50%, rgba(32, 34, 38, 0.24), transparent 70%) !important;
}

#main [data-framer-name="Subtle fortress grid"] {
  background-image: linear-gradient(rgba(32, 34, 38, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 34, 38, 0.045) 1px, transparent 1px) !important;
  background-size: 38px 38px !important;
}

#main [data-framer-name="Shield mark"] {
  background: var(--ninja-graphite) url("08c2690a-3dc6-44ba-b809-d070ad45c5d5.png") center / cover no-repeat !important;
  border: 1px solid rgba(217, 168, 62, 0.42);
  box-shadow: 0 12px 30px rgba(32, 34, 38, 0.23);
}

#main [data-framer-name="Shield mark"] svg {
  display: none !important;
}

#main [data-framer-root] h1,
#main [data-framer-name="Brand"] p {
  --framer-text-color: var(--ninja-ink) !important;
  color: var(--ninja-ink) !important;
}

#main [data-framer-root] svg {
  --1m973uw: var(--ninja-graphite-soft) !important;
}

#main [data-framer-name="Primary"] {
  background: var(--ninja-graphite) !important;
  box-shadow: 0 18px 40px rgba(32, 34, 38, 0.24) !important;
}

#main [data-framer-name="Primary"]:hover {
  background: #111315 !important;
}

#main [data-framer-name="Primary"] svg {
  --1m973uw: var(--ninja-gold-light) !important;
}

#main [data-framer-name="Primary"] p {
  --framer-text-color: #fff !important;
  color: #fff !important;
}

#main [data-framer-name="Secondary"] p {
  --framer-text-color: var(--ninja-graphite) !important;
  color: var(--ninja-graphite) !important;
}

#main [data-framer-name="Eyebrow badge"],
#main [data-framer-name="Status module"],
#main [data-framer-name="Default"],
#main [data-framer-name="Navigation glass backplate"] {
  border-color: var(--ninja-line) !important;
  background-color: rgba(255, 255, 255, 0.72) !important;
}

#main [data-framer-name="Eyebrow badge"] p,
#main [data-framer-name="Status module"] > div:first-child p {
  color: var(--ninja-graphite-soft) !important;
}

#main [data-framer-name="Encrypted route line"] {
  background: linear-gradient(90deg, transparent, rgba(32, 34, 38, 0.34), rgba(217, 168, 62, 0.48), transparent) !important;
}

#main [data-framer-name="Encrypted route line"] [data-framer-name="Route node"]:first-child {
  background: var(--ninja-graphite-soft) !important;
  box-shadow: 0 0 14px rgba(32, 34, 38, 0.55) !important;
}

#main [data-framer-name="Encrypted route line"] [data-framer-name="Route node"]:last-child {
  background: var(--ninja-gold) !important;
}

/* The supplied ninja artwork fully replaces every generated castle/lock visual. */
#main [data-framer-name="Castle security visual"] {
  width: 500px !important;
  height: 500px !important;
  min-width: 500px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#main [data-framer-name="Castle security visual"] > * {
  display: none !important;
}

#main [data-framer-name="Castle security visual"]::before {
  width: 500px;
  height: 500px;
  border: 1px solid rgba(217, 168, 62, 0.24);
  border-radius: 38px;
  background: var(--ninja-graphite) url("08c2690a-3dc6-44ba-b809-d070ad45c5d5.png") center / cover no-repeat;
  box-shadow: 0 30px 72px rgba(23, 25, 28, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* Pricing: clean cards without castle watermarks. */
.pricing-section {
  background: radial-gradient(circle at 88% 8%, rgba(217, 168, 62, 0.18), transparent 30%), var(--ninja-paper) !important;
  color: var(--ninja-ink);
}

.price-card::before {
  content: none !important;
  background-image: none !important;
}

.pricing-kicker,
.price-period,
.price-features li::before,
.featured .price-period,
.featured .price-features li::before {
  color: var(--ninja-graphite-soft) !important;
}

.price-card {
  border-color: var(--ninja-line) !important;
  box-shadow: 0 22px 54px rgba(32, 34, 38, 0.1) !important;
}

.price-card,
.price-card.featured,
.price-device-count,
.price-value {
  color: var(--ninja-ink) !important;
}

.price-button {
  border-color: var(--ninja-line) !important;
  color: var(--ninja-graphite) !important;
}

.featured .price-button,
.price-badge {
  border-color: var(--ninja-gold) !important;
  background: var(--ninja-gold) !important;
  color: var(--ninja-ink) !important;
}

/* Account: same palette and icon language as the landing. */
body:has(.dashboard) {
  color: var(--ninja-ink);
  background: radial-gradient(circle at 88% 0%, rgba(217, 168, 62, 0.2), transparent 27%),
    radial-gradient(circle at 4% 100%, rgba(32, 34, 38, 0.11), transparent 31%),
    var(--ninja-paper);
}

.brand-logo {
  border-radius: 13px;
  box-shadow: 0 9px 24px rgba(32, 34, 38, 0.22);
}

.eyebrow,
.card-label,
.subscription-copy h2 span,
.reward-pair strong,
.plan-option small,
.timeline time,
.attachment-dropzone button {
  color: var(--ninja-graphite-soft) !important;
}

.button.primary,
.avatar,
.shield-icon,
.toast {
  background: var(--ninja-graphite) !important;
  color: #fff !important;
  box-shadow: 0 16px 32px rgba(32, 34, 38, 0.22) !important;
}

.button.secondary,
.topbar-actions .secondary,
.referral-intro > p strong,
.referral-stats strong {
  color: var(--ninja-graphite) !important;
}

.referral-link-row input:focus,
.attachment-dropzone:focus,
.attachment-dropzone.dragging {
  border-color: var(--ninja-graphite-soft) !important;
  box-shadow: 0 0 0 3px rgba(32, 34, 38, 0.1) !important;
}

.referral-summary,
.attachment-dropzone {
  border-color: var(--ninja-line) !important;
}

.shield-icon {
  color: var(--ninja-gold-light) !important;
}

.button.gold {
  background: var(--ninja-gold) !important;
  color: var(--ninja-ink) !important;
}

.subscription-card,
.referral-card {
  background: linear-gradient(135deg, #fff 0%, #f2f1ed 58%, #e5e3dd 100%) !important;
}

.progress span,
.load span {
  background: linear-gradient(90deg, var(--ninja-graphite-soft), #72767c) !important;
}

.plan-option.selected,
.device-option.selected,
.method.selected {
  border-color: var(--ninja-graphite) !important;
  background: #e8e7e2 !important;
  color: var(--ninja-graphite) !important;
  box-shadow: inset 0 0 0 1px var(--ninja-graphite) !important;
}

.period-option.selected,
.account-period-option.selected {
  border-color: var(--ninja-graphite) !important;
  background: var(--ninja-graphite) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(32, 34, 38, 0.2) !important;
}

.flag,
.modal-close,
.attachment-remove {
  background: #e8e7e2 !important;
  color: var(--ninja-graphite) !important;
}

@media (max-width: 767px) {
  #main [data-framer-name="Castle security visual"] {
    width: 500px !important;
    min-width: 500px !important;
    height: 500px !important;
    transform: scale(0.62) !important;
    margin-bottom: -190px !important;
  }
}

@media (max-width: 410px) {
  #main [data-framer-name="Castle security visual"] {
    transform: scale(0.55) !important;
    margin-bottom: -225px !important;
  }
}