[data-reveal] { will-change: opacity, transform; }
[data-reveal].reveal-init {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
}
[data-reveal].reveal-in { opacity: 1 !important; transform: none !important; }

[data-bar] { transition: width 1.1s cubic-bezier(.16, 1, .3, 1); }

[data-faq-panel] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
[data-faq-panel] > .faq-panel-inner { overflow: hidden; min-height: 0; }
[data-faq-item][data-open] [data-faq-panel] { grid-template-rows: 1fr; }

[data-login], [data-support], [data-servers] { position: relative; }
[data-login-menu], [data-support-menu], [data-servers-menu] {
  position: absolute;
  top: 100%;
  margin-top: .75rem;
  z-index: 50;
  min-width: 11rem;
  background: #282828b8;
  transform-origin: top center;
  animation: in-login .14s ease;
}
[data-login-menu] { right: 0; }
[data-support-menu], [data-servers-menu] { left: 0; }
[data-login-menu][hidden], [data-support-menu][hidden], [data-servers-menu][hidden] { display: none; }
[data-login-menu] a, [data-support-menu] a, [data-servers-menu] a { display: block; color: inherit; text-decoration: none; }
@keyframes in-login {
  from { opacity: 0; transform: scale(.95) translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

[data-header-bg] {
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}

body.menu-open { overflow: hidden; }

/* ── Brand primary = dashboard blue (#3b82f6) ──────────────────────────────
   v2 ships precompiled Tailwind, so we override the green/emerald/purple
   utility classes it actually uses to the dashboard accent blue.
   accent #3b82f6 · hover #2563eb · light #60a5fa */
.text-green-500, .text-green-400, .text-emerald-300 { color: #3b82f6 !important; }
.bg-green-500 { background-color: #3b82f6 !important; }
.bg-green-500\/10 { background-color: rgba(59, 130, 246, 0.10) !important; }
.border-green-500\/60, .border-green-500\/50 { border-color: rgba(59, 130, 246, 0.60) !important; }
.hover\:border-green-500:hover { border-color: #3b82f6 !important; }
.hover\:border-green-500\/60:hover { border-color: rgba(59, 130, 246, 0.60) !important; }
.hover\:border-green-500\/50:hover { border-color: rgba(59, 130, 246, 0.50) !important; }
.from-emerald-600 { --tw-gradient-from: #2563eb var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(37,99,235,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-emerald-200 { --tw-gradient-to: #93c5fd var(--tw-gradient-to-position) !important; }
.to-emerald-400 { --tw-gradient-to: #60a5fa var(--tw-gradient-to-position) !important; }
.text-emerald-300 { color: #60a5fa !important; }
/* primary buttons (green hex) -> blue */
.bg-\[\#347659\] { background-color: #3b82f6 !important; }
.hover\:bg-\[\#347659\]\/80:hover { background-color: rgba(37, 99, 235, 0.9) !important; }
/* purple link hover -> blue */
.hover\:text-\[\#b3a6ee\]:hover { color: #3b82f6 !important; }

.bg-card { background-color: hsl(0deg 0% 6.86% / var(--tw-bg-opacity, 1)) }
/* neutral grey card border (was purple-grey #2a2536) */
.border-card { border-color: #242424 !important }

/* "Better bang for your buck": keep InstantNode's row GREEN (the global
   green->blue override would otherwise turn it blue). */
.in-green { color: #22c55e !important; }
.in-green-bg { background-color: #22c55e !important; }

/* Student-discount banner strip -> neutral grey (was greengray teal) */
.banner-grey { background-color: #18181b !important; }
/* Left-to-right fade over the banner image: solid grey on the left, transparent
   on the right (precompiled Tailwind has no from-[#hex] util, so plain CSS). */
.banner-fade {
  background-image: linear-gradient(to right, #18181b 0%, rgba(24,24,27,0.95) 35%, rgba(24,24,27,0.55) 70%, rgba(24,24,27,0) 100%);
}

/* ── Redesigned CTA card (product pages "Get your bot online" etc.) ──────────
   Layered: deep gradient base + blue top glow + faint grid fading from the top
   + a thin blue accent line. Replaces the old flat greengray + purple glow. */
.cta-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  background:
    radial-gradient(130% 130% at 50% -25%, rgba(59,130,246,0.10), transparent 55%),
    linear-gradient(180deg, #17171b 0%, #0f0f12 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,0.05),
    0 40px 80px -40px rgba(0,0,0,0.85);
}
.cta-card::before { /* blue top glow */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 85% at 50% 0%, rgba(59,130,246,0.26), transparent 70%);
  pointer-events: none;
}
.cta-card::after { /* faint grid, masked to fade out toward the bottom */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(75% 75% at 50% 0%, #000 0%, transparent 78%);
  pointer-events: none;
}
.cta-card > * { position: relative; z-index: 1; } /* content above the layers */
.cta-card .cta-topline { /* thin blue accent line at the very top edge */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(60%, 28rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.8), transparent);
  z-index: 2;
}
.cta-card a.inline-flex { box-shadow: 0 10px 30px -10px rgba(59,130,246,0.65); } /* glowing CTA button */

/* Subtle "Coming soon" badge: quiet grey pill, no glow, no dot. */
.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9ca3af;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 9999px;
  padding: 0.25rem 0.7rem;
  vertical-align: middle;
}

.kvm-slider { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 9999px; background: #2a2a2a; outline: none; cursor: pointer; }
.kvm-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 18px; width: 18px; border-radius: 9999px; background: #3b82f6; cursor: pointer; box-shadow: 0 0 0 4px rgba(59, 130, 246, .2); transition: box-shadow .15s ease; }
.kvm-slider::-webkit-slider-thumb:hover { box-shadow: 0 0 0 6px rgba(59, 130, 246, .3); }
.kvm-slider::-moz-range-thumb { height: 18px; width: 18px; border: none; border-radius: 9999px; background: #3b82f6; cursor: pointer; }
.kvm-slider::-moz-range-track { height: 6px; border-radius: 9999px; background: transparent; }

/* Dedicated configurator: selected option card. */
[data-ded-opt] { transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
[data-ded-opt].ded-on { border-color: #3b82f6 !important; background-color: rgba(59,130,246,.08) !important; box-shadow: inset 0 0 0 1px rgba(59,130,246,.30); }

/* Legal pages: readable long-form typography. The v2 site ships precompiled
   Tailwind, so arbitrary [&_h2] variants don't exist - plain CSS instead. */
.legal-prose { color: #cfd3da; font-size: 0.95rem; line-height: 1.75; }
.legal-prose > section { padding-top: 1.75rem; }
.legal-prose > section:first-child { padding-top: 0; }
.legal-prose > section + section { border-top: 1px solid rgba(255,255,255,0.06); }
.legal-prose h2 {
  color: #fff; font-weight: 600;
  font-size: 1.15rem; line-height: 1.4;
  margin: 0 0 0.75rem;
  scroll-margin-top: 6rem;
}
.legal-prose h3 { color: #e8eaee; font-weight: 600; font-size: 1rem; margin: 1.25rem 0 0.5rem; }
.legal-prose p { margin: 0 0 0.9rem; }
.legal-prose p:last-child { margin-bottom: 0; }
.legal-prose strong { color: #fff; font-weight: 600; }
.legal-prose ul { margin: 0.5rem 0 1rem; padding-left: 1.25rem; list-style: disc; }
.legal-prose li { margin: 0.35rem 0; }
.legal-prose a { color: #3b82f6; text-decoration: underline; text-underline-offset: 2px; transition: color .15s ease; }
.legal-prose a:hover { color: #60a5fa; }