/* ==========================================================================
   gitroots landing page — cyberpunk-premium theme
   Scoped entirely to .gr-landing.gr-cyber so no other page is affected.
   Loads after app.css; relies on cascade + higher specificity to override.
   ========================================================================== */

.gr-landing.gr-cyber {
  --gr-ink: #eef7f0;
  --gr-muted: #93a9a0;
  --gr-soft: #060a08;
  --gr-panel: #0c1613;
  --gr-line: rgba(164, 224, 92, 0.14);
  --gr-dark: #030605;
  --gr-green: #35e0a1;
  --gr-lime: #a4e05c;
  --gr-pale: rgba(164, 224, 92, 0.08);
  --cy-cyan: #3ee6ff;
  --cy-magenta: #ff4fd8;
  --cy-line: rgba(255, 255, 255, 0.08);
  --cy-glow-lime: rgba(164, 224, 92, 0.55);
  --cy-glow-cyan: rgba(62, 230, 255, 0.45);
  position: relative;
  background: var(--gr-soft) !important;
  isolation: isolate;
}

.gr-landing.gr-cyber,
.gr-landing.gr-cyber * {
  scrollbar-color: rgba(164, 224, 92, 0.35) transparent;
}

/* ---------- background system: grid + drifting glow orbs ---------- */

.gr-cyber-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.gr-cyber-bg::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(164, 224, 92, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(164, 224, 92, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
  animation: gr-cy-grid-drift 60s linear infinite;
}

.gr-cyber-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 6, 5, 0.2) 0%, rgba(3, 6, 5, 0.55) 55%, var(--gr-soft) 100%);
}

.gr-cyber-parallax {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.gr-cyber-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}

.gr-cyber-orb-a {
  top: -10%;
  left: 8%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, var(--cy-glow-lime), transparent 68%);
  animation: gr-cy-orb-a 22s ease-in-out infinite;
}

.gr-cyber-orb-b {
  top: 22%;
  right: -6%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, var(--cy-glow-cyan), transparent 70%);
  animation: gr-cy-orb-b 26s ease-in-out infinite;
}

.gr-cyber-orb-c {
  bottom: 6%;
  left: 32%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(255, 79, 216, 0.28), transparent 72%);
  animation: gr-cy-orb-c 30s ease-in-out infinite;
}

@keyframes gr-cy-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-56px, -56px, 0); }
}

@keyframes gr-cy-orb-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(40px, 60px, 0) scale(1.08); }
}

@keyframes gr-cy-orb-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-50px, 40px, 0) scale(1.1); }
}

@keyframes gr-cy-orb-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(30px, -35px, 0) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .gr-cyber-bg::before,
  .gr-cyber-orb {
    animation: none !important;
  }
}

.gr-landing.gr-cyber > .gr-hero,
.gr-landing.gr-cyber > .gr-trust-strip,
.gr-landing.gr-cyber > main,
.gr-landing.gr-cyber > .gr-footer {
  position: relative;
  z-index: 1;
}

/* Nav's own stacking context must beat every section below it (siblings
   with equal z-index paint in DOM order, so a tie with .gr-hero would let
   the hero win and cover the mobile dropdown menu). */
.gr-landing.gr-cyber > .gr-nav {
  position: relative;
  z-index: 20;
}

/* ---------- scroll progress bar ---------- */

.gr-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 200;
  background: rgba(255, 255, 255, 0.04);
}

.gr-scroll-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gr-lime), var(--cy-cyan));
  box-shadow: 0 0 12px var(--cy-glow-lime), 0 0 4px var(--cy-glow-cyan);
  transform-origin: left;
}

/* ---------- nav ---------- */

.gr-cyber .gr-nav {
  height: 80px;
  padding-top: 8px;
  background: transparent !important;
  border-bottom: 1px solid var(--cy-line);
}

.gr-cyber .gr-logo img {
  width: 164px;
  max-height: none;
  filter: drop-shadow(0 0 10px rgba(164, 224, 92, 0.35));
}

.gr-cyber .gr-nav-links a,
.gr-cyber .gr-nav-actions > a:not(.gr-btn) {
  color: #c9d8cf !important;
}

.gr-cyber .gr-nav-links a:hover,
.gr-cyber .gr-nav-actions > a:not(.gr-btn):hover {
  color: var(--gr-lime) !important;
  text-shadow: 0 0 12px var(--cy-glow-lime);
}

.gr-cyber .gr-nav-toggle {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--cy-line) !important;
  color: #eef7f0 !important;
}

.gr-cyber .gr-mobile-menu {
  background: #060c08 !important;
  border-bottom: 1px solid var(--cy-line) !important;
}

.gr-cyber .gr-mobile-menu a:not(.gr-btn) {
  color: #dfeee4 !important;
  border-bottom-color: var(--cy-line) !important;
}

/* ---------- buttons ---------- */

.gr-cyber .gr-btn {
  position: relative;
  overflow: hidden;
}

.gr-cyber .gr-btn-dark {
  background: linear-gradient(120deg, #12331f, #0b1f14) !important;
  border: 1px solid rgba(164, 224, 92, 0.4) !important;
  color: #eafbe2 !important;
  box-shadow: 0 0 0 1px rgba(164, 224, 92, 0.08), 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(164, 224, 92, 0.12);
}

.gr-cyber .gr-btn-dark:hover {
  box-shadow: 0 0 0 1px rgba(164, 224, 92, 0.25), 0 16px 34px rgba(0, 0, 0, 0.55), 0 0 34px var(--cy-glow-lime);
}

.gr-cyber .gr-btn-lime {
  background: var(--gr-lime) !important;
  color: #06170d !important;
  box-shadow: 0 0 28px var(--cy-glow-lime), 0 14px 30px rgba(0, 0, 0, 0.4);
}

.gr-cyber .gr-btn-lime:hover {
  box-shadow: 0 0 40px var(--cy-glow-lime), 0 16px 34px rgba(0, 0, 0, 0.45);
}

.gr-cyber .gr-btn-soft {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #eef7f0 !important;
  border-color: var(--cy-line) !important;
}

.gr-cyber .gr-btn-soft:hover {
  border-color: rgba(164, 224, 92, 0.4) !important;
  box-shadow: 0 0 22px rgba(164, 224, 92, 0.16);
}

.gr-cyber .gr-btn-outline {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.gr-cyber .gr-btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.34) !important;
}

/* ---------- hero ---------- */

.gr-cyber .gr-kicker,
.gr-cyber .gr-eyebrow {
  color: var(--gr-lime) !important;
  text-shadow: 0 0 14px rgba(164, 224, 92, 0.3);
}

.gr-cyber .gr-kicker {
  border-color: var(--cy-line) !important;
  background: rgba(164, 224, 92, 0.06) !important;
}

.gr-cyber .gr-hero h1,
.gr-cyber .gr-section h2,
.gr-cyber .gr-cta h2,
.gr-cyber .gr-plan-intro h2 {
  color: var(--gr-ink) !important;
}

.gr-cyber .gr-hero h1 mark {
  color: var(--gr-lime) !important;
  background: transparent;
  text-shadow: 0 0 24px var(--cy-glow-lime), 0 0 60px rgba(164, 224, 92, 0.25);
}

.gr-cyber .gr-hero-copy > h1 {
  animation: gr-cy-hero-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both, gr-cy-glitch-in 1.4s 260ms both;
}

@keyframes gr-cy-hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gr-cy-glitch-in {
  0% { clip-path: inset(0 0 100% 0); }
  8% { clip-path: inset(0 0 0 0); transform: translate(-2px, 0); }
  10% { transform: translate(2px, 0); }
  12% { transform: translate(0, 0); }
  100% { clip-path: inset(0 0 0 0); }
}

.gr-cyber .gr-hero p {
  color: var(--gr-muted) !important;
}

.gr-cyber .gr-hero-proof span {
  color: #b7c7bd !important;
}

.gr-cyber .gr-hero-proof span::before {
  background: var(--gr-lime) !important;
  box-shadow: 0 0 10px var(--cy-glow-lime);
}

/* ---------- hero shape ----------
   A freestanding rotating solid, not boxed in any card/frame - it just
   occupies the hero's right column directly (see .gr-hero-shape-canvas in
   landing-cyberpunk.js). Given a bit of overflow room so its glow/particles
   aren't hard-clipped at the column edge. */

.gr-cyber .gr-hero-shape {
  position: relative;
  height: 640px;
  margin: -80px -90px;
  overflow: visible;
  pointer-events: none;
}

.gr-cyber .gr-hero-shape-canvas {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (max-width: 900px) {
  .gr-cyber .gr-hero-shape {
    height: 500px;
    margin: -40px -30px;
  }
}

@media (max-width: 640px) {
  .gr-cyber .gr-hero-shape {
    height: 380px;
    margin: -10px 0;
  }
}

/* terminal scanline sweep for map/terminal panels */

.gr-cyber .gr-map-card,
.gr-cyber .gr-waitlist-terminal {
  position: relative;
}

.gr-cyber .gr-map-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 46%;
  top: -46%;
  background: linear-gradient(180deg, transparent, rgba(164, 224, 92, 0.06) 60%, transparent);
  animation: gr-cy-scan 7s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes gr-cy-scan {
  0% { top: -46%; }
  100% { top: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .gr-cyber .gr-map-card::after {
    animation: none !important;
    display: none;
  }
}

/* ---------- trust strip: marquee ---------- */

.gr-cyber .gr-trust-strip {
  border-top: 1px solid var(--cy-line) !important;
  border-bottom: 1px solid var(--cy-line) !important;
  background: rgba(255, 255, 255, 0.015) !important;
}

.gr-cyber .gr-trust-strip > div {
  display: flex;
  align-items: center;
  gap: 32px;
  overflow: hidden;
}

.gr-cyber .gr-trust-strip-track {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.gr-cyber .gr-trust-strip-row {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: gr-cy-marquee 22s linear infinite;
}

.gr-cyber .gr-trust-strip span {
  color: #6c8073 !important;
  flex: 0 0 auto;
}

.gr-cyber .gr-trust-strip p {
  color: #b9c9be !important;
  flex: 0 0 auto;
  white-space: nowrap;
}

@keyframes gr-cy-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.gr-cyber .gr-trust-strip-track:hover .gr-trust-strip-row {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .gr-cyber .gr-trust-strip-row {
    animation: none;
  }
}

/* ---------- sections: copy ---------- */

.gr-cyber .gr-section-copy p,
.gr-cyber .gr-how p,
.gr-cyber .gr-plan-intro p {
  color: var(--gr-muted) !important;
}

/* app.css fills this section with a solid saturated green (#07251a) left
   over from the pre-redesign theme - never overridden for the cyberpunk
   palette, so it stood out as a flat colored block against every other
   section's shared dark ambient background. Drop it so the same
   .gr-cyber-bg grid/orb texture shows through here too. */
.gr-cyber .gr-how {
  background: transparent !important;
}

/* ---------- feature grid / AI grid cards ---------- */

.gr-cyber .gr-feature-grid article,
.gr-cyber .gr-ai-grid article {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)) !important;
  border: 1px solid var(--cy-line) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), border-color 260ms ease, box-shadow 260ms ease;
  transform: perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0px));
}

.gr-cyber .gr-feature-grid article:hover,
.gr-cyber .gr-ai-grid article:hover,
.gr-cyber .gr-feature-grid article:active,
.gr-cyber .gr-ai-grid article:active {
  border-color: rgba(164, 224, 92, 0.4) !important;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45), 0 0 34px rgba(164, 224, 92, 0.14) !important;
}

/* Keep the feature card's top accent line lit through hover too - the
   rule above resets box-shadow wholesale, which would otherwise drop it. */
.gr-cyber .gr-feature-grid article:hover,
.gr-cyber .gr-feature-grid article:active {
  box-shadow: inset 0 2px 0 rgba(164, 224, 92, 0.7), 0 26px 60px rgba(0, 0, 0, 0.45), 0 0 34px rgba(164, 224, 92, 0.14) !important;
}

.gr-cyber .gr-feature-grid article:active,
.gr-cyber .gr-ai-grid article:active {
  transition-duration: 80ms;
}

.gr-cyber .gr-feature-grid h3,
.gr-cyber .gr-ai-grid h3,
.gr-cyber .gr-plan-card h3 {
  color: var(--gr-ink) !important;
}

.gr-cyber .gr-feature-grid p,
.gr-cyber .gr-ai-grid p {
  color: var(--gr-muted) !important;
}

.gr-cyber .gr-icon-box {
  background: rgba(164, 224, 92, 0.1) !important;
  color: var(--gr-lime) !important;
  box-shadow: inset 0 0 0 1px rgba(164, 224, 92, 0.18);
}

.gr-cyber .gr-ai-grid article.is-dark {
  background: linear-gradient(160deg, #0f2117, #060b08) !important;
  border-color: rgba(164, 224, 92, 0.22) !important;
}

.gr-cyber .gr-ai-grid small {
  border-color: var(--cy-line) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #cfe3d5 !important;
}

.gr-cyber .gr-integrated {
  color: var(--gr-lime) !important;
  border-color: var(--cy-line) !important;
  background: rgba(164, 224, 92, 0.06) !important;
}

/* ---------- how-it-works / overlay map ---------- */

.gr-cyber .gr-steps span {
  color: var(--gr-lime) !important;
  text-shadow: 0 0 10px var(--cy-glow-lime);
}

.gr-cyber .gr-steps strong {
  color: var(--gr-ink) !important;
}

.gr-cyber .gr-steps p {
  color: var(--gr-muted) !important;
}

.gr-cyber .gr-steps div {
  border-color: var(--cy-line) !important;
}

.gr-cyber .gr-map-card {
  background: linear-gradient(160deg, #0c1712, #050a07) !important;
  border: 1px solid var(--cy-line) !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5) !important;
}

.gr-cyber .gr-map-card small {
  color: #7f9186 !important;
}

.gr-cyber .gr-tree span {
  color: #b9c9be !important;
}

.gr-cyber .gr-tree .is-open em {
  color: var(--gr-lime) !important;
}

.gr-cyber .gr-tree .is-hidden {
  color: #4d5c53 !important;
}

.gr-cyber .gr-tree .is-hidden em {
  color: #6c5a4d !important;
}

.gr-cyber .gr-map-card footer {
  border-top: 1px solid var(--cy-line) !important;
  color: #7f9186 !important;
}

.gr-cyber .gr-map-card footer strong {
  color: var(--gr-lime) !important;
}

/* ---------- metric strip: count-up numbers ---------- */

.gr-cyber .gr-metric-strip {
  border-top: 1px solid var(--cy-line) !important;
  border-bottom: 1px solid var(--cy-line) !important;
  background: transparent !important;
}

.gr-cyber .gr-metric-strip strong {
  color: var(--gr-lime) !important;
  text-shadow: 0 0 18px var(--cy-glow-lime);
  font-variant-numeric: tabular-nums;
}

.gr-cyber .gr-metric-strip span {
  color: var(--gr-muted) !important;
}

/* ---------- pricing ---------- */

.gr-cyber .gr-billing {
  border-color: var(--cy-line) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.gr-cyber .gr-billing button {
  color: var(--gr-muted) !important;
}

.gr-cyber .gr-billing button.is-active {
  background: var(--gr-lime) !important;
  color: #06170d !important;
  box-shadow: 0 0 18px var(--cy-glow-lime);
}

.gr-cyber .gr-plan-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)) !important;
  border: 1px solid var(--cy-line) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
}

.gr-cyber .gr-plan-card.is-featured {
  background: linear-gradient(160deg, #0f2117, #060b08) !important;
  border: 1px solid rgba(164, 224, 92, 0.4) !important;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(164, 224, 92, 0.16) !important;
}

.gr-cyber .gr-plan-description,
.gr-cyber .gr-plan-yearly {
  color: var(--gr-muted) !important;
}

.gr-cyber .gr-plan-price strong {
  color: var(--gr-ink) !important;
}

.gr-cyber .gr-plan-cta {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--cy-line) !important;
  color: var(--gr-ink) !important;
  transition: border-color 200ms ease, background 200ms ease;
}

.gr-cyber .gr-plan-cta:hover {
  border-color: rgba(164, 224, 92, 0.4) !important;
  background: rgba(164, 224, 92, 0.08) !important;
}

.gr-cyber .gr-plan-card.is-featured .gr-plan-cta {
  background: var(--gr-lime) !important;
  color: #06170d !important;
  border-color: transparent !important;
  box-shadow: 0 0 24px var(--cy-glow-lime);
}

.gr-cyber .gr-plan-head span {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #c3d4c9 !important;
  border: 1px solid var(--cy-line) !important;
}

.gr-cyber .gr-plan-card.is-featured .gr-plan-head span {
  background: rgba(164, 224, 92, 0.14) !important;
  color: var(--gr-lime) !important;
  border-color: rgba(164, 224, 92, 0.3) !important;
}

.gr-cyber .gr-check-list li {
  color: #c3d4c9 !important;
}

/* app.css colors this dot per card variant - var(--gr-green) (which
   resolves to the cyber theme's teal accent, not green) on regular cards,
   var(--gr-lime) only on the featured card, and a static light gray for
   muted items. That produced three unrelated dot colors across one
   pricing row. Unify on the theme's lime accent everywhere, dimmed for
   muted/not-yet-available items instead of switching hue. */
.gr-cyber .gr-check-list li::before,
.gr-cyber .gr-plan-card.is-featured .gr-check-list li::before {
  background: var(--gr-lime) !important;
  box-shadow: inset 0 0 0 4px rgba(6, 10, 8, 0.6), 0 0 8px rgba(164, 224, 92, 0.3) !important;
}

.gr-cyber .gr-check-list .is-muted::before {
  background: rgba(164, 224, 92, 0.35) !important;
  box-shadow: inset 0 0 0 4px rgba(6, 10, 8, 0.6) !important;
}

.gr-cyber .gr-check-list .is-muted {
  color: #6d7d73 !important;
}

.gr-cyber .gr-demo-panel {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)) !important;
  border: 1px solid var(--cy-line) !important;
}

.gr-cyber .gr-demo-panel h3 {
  color: var(--gr-ink) !important;
}

.gr-cyber .gr-demo-panel p {
  color: var(--gr-muted) !important;
}

.gr-cyber .gr-demo-form input,
.gr-cyber .gr-demo-form textarea,
.gr-cyber .gr-demo-form select {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--cy-line) !important;
  color: var(--gr-ink) !important;
}

.gr-cyber .gr-demo-form label {
  color: #c3d4c9 !important;
}

/* ---------- waitlist ---------- */

.gr-cyber .gr-waitlist-panel {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)) !important;
  border: 1px solid var(--cy-line) !important;
}

.gr-cyber .gr-waitlist-copy h2 {
  color: var(--gr-ink) !important;
}

.gr-cyber .gr-waitlist-copy p {
  color: var(--gr-muted) !important;
}

.gr-cyber .gr-waitlist-terminal {
  background: #050907 !important;
  border: 1px solid var(--cy-line) !important;
}

.gr-cyber .gr-waitlist-terminal span {
  color: #7f9186 !important;
}

.gr-cyber .gr-waitlist-terminal code {
  color: #c3d4c9 !important;
}

.gr-cyber .gr-waitlist-terminal b {
  color: var(--gr-lime) !important;
}

.gr-cyber .gr-waitlist-form {
  background: rgba(255, 255, 255, 0.02) !important;
  border-left: 1px solid var(--cy-line) !important;
}

.gr-cyber .gr-waitlist-form input,
.gr-cyber .gr-waitlist-form textarea,
.gr-cyber .gr-waitlist-form select {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--cy-line) !important;
  color: var(--gr-ink) !important;
}

/* ---------- CTA ---------- */

.gr-cyber .gr-cta {
  background: linear-gradient(160deg, #0f2117 0%, #050a07 100%) !important;
  border: 1px solid rgba(164, 224, 92, 0.22) !important;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5) !important;
  /* Base .gr-cta only carries margin-top (96px, spacing from the
     section above) - with nothing below it, the card's own border sat
     flush against the footer's top edge with zero gap between them. */
  margin-bottom: 88px;
}

.gr-cyber .gr-cta p {
  color: #b7c7bd !important;
}

.gr-cyber .gr-trust span {
  color: #7f9186 !important;
}

/* ---------- footer ---------- */

.gr-cyber .gr-footer {
  position: relative;
  border-top: 1px solid var(--cy-line) !important;
}

/* A thin lime fade across the top edge, echoing the feature cards'
   accent line, so the footer doesn't read as a plain, unrelated block
   tacked onto the bottom of the page. */
.gr-cyber .gr-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: min(420px, 60%);
  height: 1px;
  background: linear-gradient(90deg, var(--gr-lime), rgba(164, 224, 92, 0));
  opacity: 0.7;
  pointer-events: none;
}

.gr-cyber .gr-footer-brand img {
  width: 164px !important;
  filter: drop-shadow(0 0 10px rgba(164, 224, 92, 0.3));
}

.gr-cyber .gr-footer p {
  color: var(--gr-muted) !important;
}

.gr-cyber .gr-footer-links nav span {
  color: var(--gr-lime) !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.gr-cyber .gr-footer a {
  color: #c3d4c9 !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.gr-cyber .gr-footer a:hover {
  color: var(--gr-lime) !important;
  border-bottom-color: rgba(164, 224, 92, 0.4);
}

.gr-cyber .gr-footer-bottom {
  border-top: 1px solid var(--cy-line) !important;
}

.gr-cyber .gr-footer-bottom span {
  color: #7f9186 !important;
}

/* ---------- scroll-reveal enhancements ---------- */

.gr-cyber [data-cy-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 760ms cubic-bezier(0.16, 1, 0.3, 1), transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gr-cyber [data-cy-reveal].is-cy-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .gr-cyber [data-cy-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 640px) {
  .gr-cyber-orb {
    filter: blur(50px);
    opacity: 0.35;
  }

  .gr-cyber .gr-feature-grid article,
  .gr-cyber .gr-ai-grid article {
    display: flex;
    flex-direction: column;
  }

  .gr-cyber .gr-icon-box {
    width: 40px;
    height: 40px;
  }

  .gr-cyber .gr-feature-grid h3,
  .gr-cyber .gr-ai-grid h3 {
    margin-top: 14px !important;
  }

  .gr-cyber .gr-feature-grid p,
  .gr-cyber .gr-ai-grid p {
    margin-top: 7px !important;
    flex: 1 1 auto;
  }

  .gr-cyber .gr-feature-grid article::after,
  .gr-cyber .gr-ai-grid article::after {
    content: "";
    margin-top: 14px;
    height: 1px;
    background: linear-gradient(90deg, rgba(164, 224, 92, 0.3), transparent);
  }
}

/* ==========================================================================
   STRUCTURAL REDESIGN — angular HUD shape language.
   Not a recolor: every panel/button/badge below trades the rounded-card
   geometry for a cut-corner + bracket vocabulary, plus new composed
   elements (terminal titlebar, circuit-trace steps, ghost index numbers,
   instrument-panel metrics) that don't exist in the base template's layout.
   ========================================================================== */

.gr-landing.gr-cyber {
  --cy-cut: 16px;
  --cy-cut-lg: 30px;
  --cy-cut-sm: 9px;
}

/* ---------- buttons: cut corners instead of pill/rounded ---------- */

.gr-cyber .gr-btn {
  border-radius: 0 !important;
  clip-path: polygon(
    var(--cy-cut-sm) 0, 100% 0, 100% calc(100% - var(--cy-cut-sm)),
    calc(100% - var(--cy-cut-sm)) 100%, 0 100%, 0 var(--cy-cut-sm)
  );
}

.gr-cyber .gr-nav-toggle {
  border-radius: 0 !important;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.gr-cyber .gr-billing {
  border-radius: 0 !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.gr-cyber .gr-billing button.is-active {
  border-radius: 0 !important;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* ---------- kicker: bracketed terminal tag instead of pill ---------- */

.gr-cyber .gr-kicker {
  border-radius: 0 !important;
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.09em;
}

.gr-cyber .gr-kicker::before {
  content: "[ ";
  opacity: 0.55;
}

.gr-cyber .gr-kicker::after {
  content: " ]";
  opacity: 0.55;
}

.gr-cyber .gr-kicker span {
  border-radius: 0 !important;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* ---------- icon boxes: hexagon instead of rounded square ---------- */

.gr-cyber .gr-icon-box {
  border-radius: 0 !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, rgba(164, 224, 92, 0.32), rgba(164, 224, 92, 0.07)) !important;
  border: 1px solid rgba(164, 224, 92, 0.5) !important;
  box-shadow: 0 0 20px rgba(164, 224, 92, 0.18), inset 0 0 14px rgba(164, 224, 92, 0.1);
}

/* app.css hardcodes the icon stroke to a dark forest green tuned for white
   cards (body.gr-landing-page .gr-icon-box svg, 0,2,2 specificity) — on the
   dark cyberpunk hexagon that reads as a near-invisible muddy outline, so
   it needs an explicit !important override rather than relying on cascade
   order. */
.gr-cyber .gr-icon-box svg {
  stroke: var(--gr-lime) !important;
  filter: drop-shadow(0 0 5px rgba(164, 224, 92, 0.55));
}

/* ---------- panels: shared cut-corner silhouette ---------- */

.gr-cyber .gr-feature-grid article,
.gr-cyber .gr-ai-grid article,
.gr-cyber .gr-plan-card,
.gr-cyber .gr-demo-panel,
.gr-cyber .gr-waitlist-form {
  border-radius: 0 !important;
  clip-path: polygon(
    0 0, calc(100% - var(--cy-cut)) 0, 100% var(--cy-cut),
    100% 100%, var(--cy-cut) 100%, 0 calc(100% - var(--cy-cut))
  );
}

.gr-cyber .gr-map-card,
.gr-cyber .gr-cta {
  border-radius: 0 !important;
  clip-path: polygon(
    0 0, calc(100% - var(--cy-cut-lg)) 0, 100% var(--cy-cut-lg),
    100% 100%, var(--cy-cut-lg) 100%, 0 calc(100% - var(--cy-cut-lg))
  );
}

/* ---------- HUD corner brackets (map card) ---------- */

.gr-cyber .gr-hud-corners {
  position: absolute;
  inset: 12px;
  z-index: 4;
  pointer-events: none;
  opacity: 0.6;
  background:
    linear-gradient(to right, var(--gr-lime) 2px, transparent 2px) top left / 18px 2px no-repeat,
    linear-gradient(to bottom, var(--gr-lime) 2px, transparent 2px) top left / 2px 18px no-repeat,
    linear-gradient(to left, var(--gr-lime) 2px, transparent 2px) top right / 18px 2px no-repeat,
    linear-gradient(to bottom, var(--gr-lime) 2px, transparent 2px) top right / 2px 18px no-repeat,
    linear-gradient(to right, var(--gr-lime) 2px, transparent 2px) bottom left / 18px 2px no-repeat,
    linear-gradient(to top, var(--gr-lime) 2px, transparent 2px) bottom left / 2px 18px no-repeat,
    linear-gradient(to left, var(--gr-lime) 2px, transparent 2px) bottom right / 18px 2px no-repeat,
    linear-gradient(to top, var(--gr-lime) 2px, transparent 2px) bottom right / 2px 18px no-repeat;
}

/* ---------- feature cards: bare glowing icon (no hexagon/box), corner
   accent, ghost number as a deliberate bottom-right watermark instead of
   a cramped top corner ---------- */

.gr-cyber .gr-feature-grid .gr-icon-box {
  width: auto;
  height: auto;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  justify-content: flex-start;
}

.gr-cyber .gr-feature-grid .gr-icon-box svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.5;
}

.gr-cyber .gr-feature-grid {
  counter-reset: gr-cy-feat;
}

.gr-cyber .gr-feature-grid article {
  counter-increment: gr-cy-feat;
  position: relative;
  overflow: hidden;
}

/* Top accent line via inset box-shadow rather than a pseudo-element -
   ::after is already spoken for on mobile (the stacked-layout bottom
   divider a few rules up), so this repeats the base card's own shadow
   list and adds the accent on top of it instead of colliding. */
.gr-cyber .gr-feature-grid article {
  box-shadow: inset 0 2px 0 rgba(164, 224, 92, 0.5), 0 20px 50px rgba(0, 0, 0, 0.35) !important;
}

.gr-cyber .gr-feature-grid article::before {
  content: counter(gr-cy-feat, decimal-leading-zero);
  position: absolute;
  bottom: -10px;
  right: 8px;
  font: 800 60px/1 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  color: transparent;
  -webkit-text-stroke: 1px rgba(164, 224, 92, 0.14);
  pointer-events: none;
  z-index: 0;
}

.gr-cyber .gr-feature-grid .gr-icon-box,
.gr-cyber .gr-feature-grid h3,
.gr-cyber .gr-feature-grid p {
  position: relative;
  z-index: 1;
}

/* ---------- nav: terminal-prompt hover + blinking cursor ---------- */

.gr-cyber .gr-nav-links a {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
}

.gr-cyber .gr-nav-links a::before {
  content: "";
  color: var(--gr-lime);
}

.gr-cyber .gr-nav-links a:hover::before {
  content: "> ";
}

.gr-cyber .gr-logo {
  display: inline-flex;
  align-items: center;
}

.gr-cyber .gr-logo::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 16px;
  margin-left: 8px;
  background: var(--gr-lime);
  box-shadow: 0 0 8px var(--cy-glow-lime);
  animation: gr-cy-cursor-blink 1.1s steps(1) infinite;
}

@keyframes gr-cy-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gr-cyber .gr-logo::after {
    animation: none;
    opacity: 0.6;
  }
}

/* ---------- how-it-works: circuit-trace step timeline ---------- */

.gr-cyber .gr-steps {
  position: relative;
}

.gr-cyber .gr-steps::before {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 32px;
  left: 13px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gr-lime) 15%, var(--gr-lime) 85%, transparent);
  opacity: 0.35;
}

.gr-cyber .gr-steps > div {
  border-bottom: 0 !important;
  position: relative;
}

.gr-cyber .gr-steps > div > span {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: #0c1712;
  border: 1px solid var(--cy-line);
  font-size: 10px;
}

/* ---------- metric strip: instrument-panel readouts ---------- */

/* Previously this wrapper carried its own background so the 1px grid `gap`
   would read as hairline dividers between cells. That background painted
   the whole centered content-width box, though, not just the seams - so
   next to the section's full-bleed edge-to-edge color it produced a hard
   rectangular seam exactly at the max-width boundary. Real borders on each
   cell avoid that entirely. */
.gr-cyber .gr-metric-strip > div {
  gap: 16px;
}

.gr-cyber .gr-metric-strip article {
  position: relative;
  padding: 22px 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)) !important;
  border: 1px solid var(--cy-line);
}

.gr-cyber .gr-metric-strip article::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(164, 224, 92, 0.4) 1px, transparent 1px) top left / 10px 1px no-repeat,
    linear-gradient(to bottom, rgba(164, 224, 92, 0.4) 1px, transparent 1px) top left / 1px 10px no-repeat,
    linear-gradient(to left, rgba(164, 224, 92, 0.4) 1px, transparent 1px) top right / 10px 1px no-repeat,
    linear-gradient(to bottom, rgba(164, 224, 92, 0.4) 1px, transparent 1px) top right / 1px 10px no-repeat,
    linear-gradient(to right, rgba(164, 224, 92, 0.4) 1px, transparent 1px) bottom left / 10px 1px no-repeat,
    linear-gradient(to top, rgba(164, 224, 92, 0.4) 1px, transparent 1px) bottom left / 1px 10px no-repeat,
    linear-gradient(to left, rgba(164, 224, 92, 0.4) 1px, transparent 1px) bottom right / 10px 1px no-repeat,
    linear-gradient(to top, rgba(164, 224, 92, 0.4) 1px, transparent 1px) bottom right / 1px 10px no-repeat;
}

@media (max-width: 640px) {
  .gr-cyber .gr-hud-corners {
    inset: 8px;
  }

  .gr-cyber .gr-feature-grid article::before {
    font-size: 46px;
  }

  .gr-cyber .gr-metric-strip > div {
    gap: 10px;
  }
}

/* ==========================================================================
   Public legal + blog pages (Privacy, Terms, Refund Policy, Blog)
   The shared .panel/.page-hero/.detail-grid component library and the
   blog-specific classes are hardcoded light-theme colors under the
   body.gr-landing-page[.gr-blog-public] scope in app.css. These overrides
   restyle the same selectors for dark parity with the rest of the site,
   scoped to .gr-cyber so nothing else is touched.
   ========================================================================== */

.gr-cyber .gr-public-main .page-hero,
.gr-cyber .gr-public-main .panel {
  border-color: rgba(164, 224, 92, 0.16) !important;
  background: rgba(12, 22, 19, 0.82) !important;
  color: var(--gr-ink) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(10px) !important;
}

.gr-cyber .gr-public-main .page-hero .pill,
.gr-cyber .gr-public-main .blog-pill {
  border-color: rgba(164, 224, 92, 0.3) !important;
  background: var(--gr-pale) !important;
  color: var(--gr-lime) !important;
}

.gr-cyber .gr-public-main .page-hero h1,
.gr-cyber .gr-public-main .blog-hero h1 {
  color: var(--gr-ink) !important;
}

.gr-cyber .gr-public-main .page-hero p,
.gr-cyber .gr-public-main .blog-hero p {
  color: var(--gr-muted) !important;
}

.gr-cyber .gr-public-main .panel-header h2,
.gr-cyber .gr-blog-public-main .blog-feed-head h2 {
  color: var(--gr-ink) !important;
}

.gr-cyber .gr-public-main .detail-grid > div,
.gr-cyber .gr-public-main .stacked-row,
.gr-cyber .gr-public-main .message-box {
  border-color: rgba(164, 224, 92, 0.12) !important;
  background: rgba(164, 224, 92, 0.04) !important;
  color: var(--gr-ink) !important;
}

.gr-cyber .gr-public-main .message-box {
  color: var(--gr-muted) !important;
}

.gr-cyber .gr-public-main .muted,
.gr-cyber .gr-public-main .chart-meta {
  color: var(--gr-muted) !important;
}

.gr-cyber .gr-public-main .detail-grid strong,
.gr-cyber .gr-public-main .stacked-title {
  color: var(--gr-ink) !important;
}

.gr-cyber .gr-public-main .hero-actions .btn,
.gr-cyber .gr-public-main .btn {
  border-color: rgba(164, 224, 92, 0.25) !important;
  background: rgba(164, 224, 92, 0.06) !important;
  color: var(--gr-ink) !important;
}

.gr-cyber .gr-public-main .hero-actions .btn:hover,
.gr-cyber .gr-public-main .btn:hover {
  border-color: rgba(164, 224, 92, 0.45) !important;
  background: rgba(164, 224, 92, 0.12) !important;
}

.gr-cyber .gr-public-main .table-link {
  color: var(--gr-lime) !important;
}

/* ---------- blog hero + sidebar ---------- */

.gr-cyber .gr-blog-public-main .blog-hero::before {
  background:
    linear-gradient(120deg, rgba(12, 22, 19, 0.7) 0%, rgba(12, 22, 19, 0.55) 52%, rgba(6, 10, 8, 0.4) 100%),
    radial-gradient(circle at 78% 18%, rgba(164, 224, 92, 0.18), transparent 34%) !important;
}

.gr-cyber .gr-blog-public-main .blog-hero-side {
  border-color: rgba(164, 224, 92, 0.14) !important;
  background: rgba(6, 12, 10, 0.55) !important;
  box-shadow: inset 0 1px 0 rgba(164, 224, 92, 0.08) !important;
}

.gr-cyber .gr-blog-public-main .blog-search-form label,
.gr-cyber .gr-blog-public-main .blog-search-shortcuts-label,
.gr-cyber .gr-blog-public-main .blog-sidebar-head h3 {
  color: var(--gr-muted) !important;
}

.gr-cyber .gr-blog-public-main .blog-search-row input {
  border-color: rgba(164, 224, 92, 0.18) !important;
  background: rgba(6, 10, 8, 0.6) !important;
  color: var(--gr-ink) !important;
}

.gr-cyber .gr-blog-public-main .blog-search-row input:focus {
  border-color: rgba(164, 224, 92, 0.5) !important;
}

.gr-cyber .gr-blog-public-main .blog-shortcut-pill,
.gr-cyber .gr-blog-public-main .blog-topic-chip,
.gr-cyber .gr-blog-public-main .tag-pill {
  border-color: rgba(164, 224, 92, 0.16) !important;
  background: rgba(164, 224, 92, 0.06) !important;
  color: #c3d4c9 !important;
}

.gr-cyber .gr-blog-public-main .blog-shortcut-pill:hover,
.gr-cyber .gr-blog-public-main .blog-topic-chip:hover,
.gr-cyber .gr-blog-public-main .tag-pill:hover,
.gr-cyber .gr-blog-public-main .blog-shortcut-pill.is-active,
.gr-cyber .gr-blog-public-main .blog-topic-chip.is-active {
  border-color: rgba(164, 224, 92, 0.4) !important;
  background: rgba(164, 224, 92, 0.14) !important;
  color: var(--gr-lime) !important;
}

.gr-cyber .gr-blog-public-main .blog-filter-text {
  color: var(--gr-muted) !important;
}

.gr-cyber .gr-blog-public-main .blog-filter-reset {
  color: var(--gr-lime) !important;
}

/* ---------- blog post cards ---------- */

.gr-cyber .gr-blog-public-main .blog-post-card {
  border-color: rgba(164, 224, 92, 0.14) !important;
  background: rgba(12, 22, 19, 0.85) !important;
  color: var(--gr-ink) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4) !important;
}

.gr-cyber .gr-blog-public-main .blog-post-card:hover {
  border-color: rgba(164, 224, 92, 0.35) !important;
  box-shadow: 0 24px 52px rgba(164, 224, 92, 0.1) !important;
}

.gr-cyber .gr-blog-public-main .blog-post-kind,
.gr-cyber .gr-blog-public-main .blog-post-topic {
  color: var(--gr-lime) !important;
}

.gr-cyber .gr-blog-public-main .blog-post-media {
  border-color: rgba(164, 224, 92, 0.12) !important;
  background: rgba(6, 10, 8, 0.6) !important;
}

.gr-cyber .gr-blog-public-main .blog-post-head,
.gr-cyber .gr-blog-public-main .blog-post-footer {
  border-color: rgba(164, 224, 92, 0.14) !important;
  background: rgba(6, 10, 8, 0.7) !important;
}

.gr-cyber .gr-blog-public-main .blog-post-media-fallback {
  color: var(--gr-lime) !important;
}

.gr-cyber .gr-blog-public-main .blog-post-title {
  color: var(--gr-ink) !important;
}

.gr-cyber .gr-blog-public-main .blog-post-excerpt {
  color: var(--gr-muted) !important;
}

.gr-cyber .gr-blog-public-main .blog-post-tag {
  border-color: rgba(164, 224, 92, 0.12) !important;
  background: rgba(164, 224, 92, 0.05) !important;
  color: var(--gr-muted) !important;
}

.gr-cyber .gr-blog-public-main .blog-post-divider {
  background: rgba(164, 224, 92, 0.14) !important;
}

.gr-cyber .gr-blog-public-main .blog-post-meta-label,
.gr-cyber .gr-blog-public-main .blog-post-meta-value {
  color: var(--gr-muted) !important;
}

.gr-cyber .gr-blog-public-main .blog-read-link {
  color: var(--gr-lime) !important;
}

/* ---------- blog detail ---------- */

.gr-cyber .gr-blog-public-main .blog-detail-featured-media {
  border-color: rgba(164, 224, 92, 0.14) !important;
}

.gr-cyber .gr-blog-public-main .blog-detail-content {
  color: rgba(239, 247, 242, 0.9) !important;
}

.gr-cyber .gr-blog-public-main .blog-content,
.gr-cyber .gr-blog-public-main .blog-content p,
.gr-cyber .gr-blog-public-main .blog-content .identity-lead,
.gr-cyber .gr-blog-public-main .blog-detail-excerpt {
  color: rgba(239, 247, 242, 0.9) !important;
}

.gr-cyber .gr-public-main .repo-pagination {
  color: var(--gr-muted) !important;
}