/* ============================================================
   SENSIBLE AVENUE — "CONTROL ROOM" DARK SKIN
   Loaded AFTER styles.css. Re-themes every existing component
   to the v2 palette (ink / operational blue / mono data type)
   without touching page content or structure.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  --color-primary: #4d9fff;
  --color-primary-light: #6fb1ff;
  --color-primary-dark: #1f6bff;
  --color-accent: #4d9fff;
  --color-bg: #0b0f17;
  --color-bg-alt: #121826;
  --color-bg-dark: #0b0f17;
  --color-bg-elevated: #1a2334;
  --color-text: #f4f7fb;
  --color-text-light: #8fa0b8;
  --color-text-muted: #6b7a91;
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-light: rgba(255, 255, 255, 0.06);
  --color-card: #121826;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 0 40px rgba(77, 159, 255, 0.12), 0 12px 48px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.5);
  --glow: 0 0 40px rgba(77, 159, 255, 0.15);
  --live: #2fd180;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

::selection {
  background: #4d9fff;
  color: #fff;
}

h1,
h2,
h3,
h4 {
  font-family: "Space Grotesk", "Inter", -apple-system, sans-serif;
}

.section-eyebrow,
.services__block-badge,
.plans__tier-badge,
.pricing-cat__badge,
.rates__label,
.rates__min,
.hero__stat-label,
.trust__label,
.legal__meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
}

.rates__amount,
.pricing-cat__price,
.hero__stat-number {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.section-eyebrow::after {
  background: #4d9fff;
}

/* ---------- SCROLLBAR & FOCUS ---------- */
::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-bg);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4d9fff;
}

/* ---------- NAV ---------- */
.nav,
.nav--scrolled {
  background: rgba(11, 15, 23, 0.75);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--color-border);
}

.nav__logo-img {
  background: #fff;
  border-radius: 9px;
  padding: 3px;
}

.nav__link {
  color: var(--color-text-light);
}

.nav__link:hover,
.nav__link.active {
  color: #fff;
}

.nav__link::after {
  background: #4d9fff;
}

.nav__cta {
  background: linear-gradient(135deg, #4d9fff, #1f6bff);
  border: 0;
  border-radius: 10px;
  box-shadow: var(--glow);
}

.nav__cta:hover {
  background: linear-gradient(135deg, #6fb1ff, #2f77ff);
  box-shadow: 0 8px 40px rgba(77, 159, 255, 0.28);
}

.nav__hamburger span {
  background: var(--color-text);
}

/* ---------- BUTTONS ---------- */
.btn {
  border-radius: 10px;
}

.btn--primary,
.btn--white {
  background: linear-gradient(135deg, #4d9fff, #1f6bff);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--glow);
}

.btn--primary:hover,
.btn--white:hover {
  background: linear-gradient(135deg, #6fb1ff, #2f77ff);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 40px rgba(77, 159, 255, 0.28);
}

.btn--outline,
.btn--secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
}

.btn--outline:hover,
.btn--secondary:hover {
  background: rgba(77, 159, 255, 0.12);
  color: #fff;
  border-color: #4d9fff;
}

.btn--ghost {
  border-color: rgba(255, 255, 255, 0.3);
}

.btn--ghost:hover {
  background: rgba(77, 159, 255, 0.12);
  color: #fff;
  border-color: #4d9fff;
}

.btn--disabled {
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  border-color: var(--color-border);
  box-shadow: none;
}

/* ---------- HERO (FR homepage / legacy) ---------- */
.hero {
  background: var(--color-bg);
}

.hero__gradient {
  background: radial-gradient(
    ellipse 80% 60% at 50% 0%,
    rgba(31, 107, 255, 0.12) 0%,
    transparent 70%
  );
}

.hero__bg::before {
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.08) 1px,
    transparent 1px
  );
}

.hero__eyebrow {
  background: rgba(77, 159, 255, 0.12);
  border: 1px solid rgba(77, 159, 255, 0.4);
  color: #cfe4ff;
  border-radius: 999px;
}

.hero__eyebrow::before {
  background: var(--live);
}

.hero__stat-number {
  color: #fff;
}

/* ---------- RATES BAND ---------- */
.rates {
  background: #0d1322;
  background-image: radial-gradient(
      ellipse 60% 50% at 15% 0%,
      rgba(77, 159, 255, 0.1),
      transparent 60%
    ),
    radial-gradient(
      ellipse 50% 60% at 90% 100%,
      rgba(31, 107, 255, 0.08),
      transparent 60%
    );
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.rates__grid {
  background: var(--color-border);
  border-color: var(--color-border);
}

.rates__card {
  background: var(--color-bg-alt);
}

.rates__card:hover,
.rates__card--highlight {
  background: var(--color-bg-elevated);
}

.rates__card::before {
  background: #4d9fff;
}

/* ---------- DIFFERENCE / PILLARS ---------- */
.difference__card {
  background: var(--color-bg-alt);
  border-radius: 0;
}

.difference__card:hover {
  background: var(--color-bg-elevated);
}

.difference__card:hover .difference__card-title,
.difference__card:hover .difference__card-text {
  color: inherit;
}

.difference__card:hover .difference__card-title {
  color: var(--color-text);
}

.difference__icon svg rect {
  fill: #4d9fff;
}

.difference__icon svg path,
.difference__icon svg circle {
  stroke: #4d9fff;
}

.difference__card:hover .difference__icon svg rect {
  fill: rgba(77, 159, 255, 0.25);
}

.difference__card:hover .difference__icon svg path,
.difference__card:hover .difference__icon svg circle {
  stroke: #6fb1ff;
}

.difference__closing strong {
  color: #4d9fff;
}

/* ---------- INNOVATION (legacy EN index) ---------- */
.innovation {
  background: #0d1322;
  background-image: radial-gradient(
    ellipse 60% 50% at 15% 0%,
    rgba(77, 159, 255, 0.1),
    transparent 60%
  );
}

/* ---------- SERVICES BLOCKS ---------- */
.services {
  background: var(--color-bg);
}

.services__block {
  border-top-color: var(--color-border);
}

.services__block--alt {
  background: var(--color-bg-alt);
}

.services__block-list li::before {
  background: #4d9fff;
}

/* ---------- TRUST BAR (legacy) ---------- */
.trust {
  background: var(--color-bg-alt);
}

/* ---------- FOUNDER ---------- */
.founder__quote {
  border-left-color: #4d9fff;
}

/* ---------- FAQ ---------- */
.faq {
  background: var(--color-bg-alt);
}

.faq__item summary::after {
  color: #4d9fff;
}

.faq__item summary:hover {
  color: #fff;
}

.faq__item a {
  color: #4d9fff;
  text-decoration: none;
}

.faq__item a:hover {
  opacity: 1;
  filter: brightness(1.25);
}

/* ---------- CONTACT FORM ---------- */
.contact__detail-icon {
  background: var(--color-bg-alt);
}

.contact__detail-icon svg path,
.contact__detail-icon svg circle,
.contact__detail-icon svg rect {
  stroke: #4d9fff;
}

.contact__form-group input,
.contact__form-group textarea,
.contact__form-group select {
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-radius: 10px;
}

.contact__form-group input:focus,
.contact__form-group textarea:focus,
.contact__form-group select:focus {
  border-color: #4d9fff;
  box-shadow: 0 0 0 3px rgba(77, 159, 255, 0.18);
}

.contact__form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238fa0b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* ---------- PRICING PAGES ---------- */
.pricing-hero,
.pricing-book {
  background: #0d1322;
  background-image: radial-gradient(
      ellipse 60% 50% at 15% 0%,
      rgba(77, 159, 255, 0.12),
      transparent 60%
    ),
    radial-gradient(
      ellipse 50% 60% at 90% 100%,
      rgba(31, 107, 255, 0.09),
      transparent 60%
    );
}

.pricing-hero {
  border-bottom: 1px solid var(--color-border);
}

.pricing-book {
  border-top: 1px solid var(--color-border);
}

.pricing-nav a {
  border-radius: 999px;
}

.pricing-nav a:hover {
  background: rgba(77, 159, 255, 0.15);
  border-color: #4d9fff;
  color: #fff;
}

.pricing-cat {
  background: var(--color-card);
  border-radius: 16px;
}

.pricing-cat:hover {
  border-color: rgba(77, 159, 255, 0.35);
}

.pricing-cat__head {
  border-bottom: 2px solid rgba(77, 159, 255, 0.45);
}

.pricing-cat h2 {
  color: var(--color-text);
}

.pricing-cat__price {
  color: #fff;
}

.pricing-cat__price--label {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: var(--color-text-light);
}

.pricing-cat__rule em {
  background: var(--color-bg-elevated);
  border-left-color: #4d9fff;
}

.pricing-promo {
  background: var(--color-bg-elevated);
  border: 1px solid rgba(77, 159, 255, 0.4);
  border-radius: 16px;
  overflow: hidden;
}

.pricing-promo::before {
  background: linear-gradient(135deg, #4d9fff, #1f6bff);
  color: #fff;
  border-radius: 0 0 10px 0;
}

.legal__block h2 {
  border-bottom-color: var(--color-border);
}

.legal__block p,
.legal__block ul li {
  color: var(--color-text-light);
}

/* legacy legal-style pricing (safety net) */
.legal__block a {
  color: #4d9fff;
  text-decoration: none;
}

.legal__block a:hover {
  opacity: 1;
  filter: brightness(1.25);
}

.legal__block ul li::before {
  background: #4d9fff;
}

/* ---------- FOOTER ---------- */
.footer {
  background: #080b12;
}

.footer::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(77, 159, 255, 0.4),
    transparent
  );
}

.footer__links-group a:hover,
.footer__bottom-links a:hover {
  color: #6fb1ff;
}

/* ---------- MOBILE NAV ---------- */
@media (max-width: 768px) {
  .nav__links {
    background: rgba(11, 15, 23, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .nav__links a {
    color: var(--color-text);
  }
}