/* ===== SELF-HOSTED FONTS (same-origin, variable woff2, latin subset) ===== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/inter-variable.woff2') format('woff2')
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-variable.woff2') format('woff2')
}

/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* clip, not hidden: hidden turns html/body into scroll containers and
     silently breaks position:sticky (the scroll-hero pin). clip gives the
     same no-horizontal-scroll guarantee without creating a scroll container. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: #0A0A0A;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  max-width: 100vw;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility
}

img {
  max-width: 100%;
  height: auto;
  display: block
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation
}

input,
textarea,
select {
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none
}

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

button {
  cursor: pointer;
  border: none;
  font-family: inherit
}

ul {
  list-style: none
}

img {
  max-width: 100%
}

.mono {
  font-family: 'JetBrains Mono', monospace
}

/* ===== UTILITIES ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px
}

.hero .container {
  max-width: 1240px
}

.section {
  padding: 56px 0
}

.section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 12px
}

.section-title {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.95)
}

.section-sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: 16px;
  max-width: 100%;
  margin-bottom: 32px;
  line-height: 1.65
}

.brand-intro {
  padding: 64px 0 40px;
}

.brand-intro-card {
  max-width: 920px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 40px 48px;
  text-align: left;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.brand-intro-card:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.09);
  transform: translateY(-2px);
}

.brand-intro-card .section-label {
  margin-bottom: 18px;
}

.brand-definition {
  font-size: 18px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: -0.005em;
  margin: 0;
}

.brand-definition strong {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.98);
}

.brand-definition strong.text-blue {
  font-weight: 700;
}

/* Concrete-credibility chips (under the brand-intro definition) */
.cred-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.cred-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  padding: 7px 14px;
}

.cred-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

@media(max-width:768px) {
  .cred-chips {
    gap: 8px;
    margin-top: 20px;
  }

  .cred-chip {
    font-size: 11px;
    padding: 6px 12px;
  }
}

@media (max-width: 768px) {
  .brand-intro {
    padding: 44px 0 28px;
  }
  .brand-intro-card {
    padding: 28px 22px;
    border-radius: 14px;
  }
  .brand-intro-card .section-label {
    margin-bottom: 14px;
  }
  .brand-definition {
    font-size: 15.5px;
    line-height: 1.7;
  }
}

@media (max-width: 420px) {
  .brand-intro-card {
    padding: 24px 18px;
  }
  .brand-definition {
    font-size: 14.5px;
  }
}

.text-muted {
  color: rgba(255, 255, 255, 0.45)
}

.text-secondary {
  color: rgba(255, 255, 255, 0.65)
}

.text-blue {
  background: linear-gradient(90deg, #3B82F6, #A78BFA, #FB923C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.text-code {
  color: #60A5FA;
  font-family: 'JetBrains Mono', monospace
}

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0)
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease
}

.btn-primary {
  background: #3B82F6;
  color: #fff;
  position: relative;
  overflow: hidden
}

.btn-primary:hover {
  background: #2563EB
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s
}

.btn-primary:hover::after {
  left: 100%
}

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  background: transparent
}

.btn-ghost:hover {
  border-color: #3B82F6;
  color: rgba(255, 255, 255, 0.9)
}

.btn-lg {
  height: 48px;
  padding: 0 32px;
  font-size: 16px
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 14px 0;
  transition: all 0.3s ease
}

.navbar.scrolled {
  background: rgba(10, 10, 10, 0.90);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3)
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  /* logo PNG is now transparent — no chip, so it blends into the page bg */
  background: transparent;
  padding: 0;
  border: none
}

.nav-logo-img {
  height: 26px;
  width: auto;
  display: block;
  mix-blend-mode: lighten
}

.footer-logo-link {
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 0;
  width: fit-content
}

.footer-logo-img {
  height: 30px;
  width: auto;
  display: block;
  mix-blend-mode: lighten
}

.nav-links {
  display: flex;
  gap: 28px
}

.nav-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
  letter-spacing: -0.01em
}

.nav-links a:hover {
  color: rgba(255, 255, 255, 0.9)
}

.nav-cta {
  flex-shrink: 0
}

.btn-nav {
  padding: 9px 20px !important;
  font-size: 14px !important;
  border-radius: 8px;
  font-weight: 600
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
  transition: all 0.3s
}

.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.hamburger.active span:nth-child(2) {
  opacity: 0
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 57px;
  left: 0;
  right: 0;
  background: rgba(12, 12, 12, 0.98);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px 24px 24px;
  z-index: 99
}

.mobile-menu.open {
  display: block
}

.mobile-menu a {
  display: block;
  padding: 13px 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: color 0.2s
}

.mobile-menu a:hover {
  color: rgba(255, 255, 255, 0.9)
}

.mobile-menu .mobile-cta {
  margin-top: 16px;
  display: block;
  text-align: center;
  padding: 13px 0;
  background: #3B82F6;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  border-bottom: none
}

.mobile-menu .mobile-cta:hover {
  background: #2563EB
}

/* ===== HERO ===== */
.hero {
  min-height: auto;
  display: flex;
  align-items: center;
  position: relative;
  padding: 100px 0 80px;
  overflow: hidden
}

.hero::before {
  display: none
}

.hero-glow-top {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.06) 0%, transparent 65%);
  pointer-events: none
}

.hero-content {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding: 0 24px
}

/* 2-segment status badge */
.hero-badge {
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 28px;
  backdrop-filter: blur(10px);
  overflow: hidden;
  font-size: 13px
}

.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.06) 100%);
  color: #4ADE80;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-right: 1px solid rgba(255, 255, 255, 0.08)
}

.badge-info {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  letter-spacing: -0.005em
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
  animation: badgePulse 2s ease-in-out infinite;
  flex-shrink: 0
}

@keyframes badgePulse {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6)
  }

  50% {
    box-shadow: 0 0 18px rgba(34, 197, 94, 1)
  }
}

.hero h1 {
  font-size: clamp(34px, 5.5vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
  color: #FFFFFF
}

.hero-sub {
  font-size: clamp(16px, 2vw, 19px);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  max-width: 560px;
  margin: 0 auto 32px;
  font-weight: 400
}

/* CTA row */
.hero-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px
}

.btn-hero {
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.25s ease
}

.btn-hero.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3)
}

.btn-hero.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85)
}

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

/* Microcopy */
.hero-micro {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 auto 72px;
  text-align: center
}

@media(max-width:768px) {
  .hero { padding: 88px 0 56px }
  .hero h1 { margin-bottom: 20px }
  .hero-sub { margin-bottom: 28px }
  .hero-cta-row {
    flex-direction: column;
    gap: 10px
  }
  .hero-cta-row .btn-hero {
    width: 100%;
    justify-content: center;
    text-align: center
  }
  .hero-micro { margin-bottom: 48px }
}

/* Quiet trust strip — muted credibility between the badge and the H1 */
.hero-trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
  max-width: 660px;
  margin: -6px auto 26px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em
}

.hero-trust-strip .hts-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap
}

.hero-trust-strip svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.8
}

.hero-trust-strip .hts-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0
}

@media(max-width:768px) {
  .hero-trust-strip {
    font-size: 11px;
    gap: 8px 10px;
    margin-bottom: 22px
  }

  /* drop the dividers once items wrap, so stray dots don't dangle */
  .hero-trust-strip .hts-dot {
    display: none
  }
}

/* ===== PRODUCT MOCKUP — WIDE ===== */
.product-mockup {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto 40px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0d0d0d;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 40px 100px rgba(0, 0, 0, 0.65), 0 0 80px rgba(59, 130, 246, 0.08);
  text-align: left
}

/* Top bar */
.mock-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #111;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: nowrap;
  overflow: hidden
}

.mock-repo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding-right: 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.06)
}

.mock-repo-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.mock-repo-name {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.2
}

.mock-repo-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 2px
}

/* Blurred group container — everything blurred lives here */
.mock-blurred-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  justify-content: flex-end;
  padding-right: 4px
}

/* Audit grade — inside blurred group */
.mock-grade {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 5px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0
}

.mock-grade-ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(34, 197, 94, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #4ADE80;
  background: rgba(34, 197, 94, 0.08);
  flex-shrink: 0
}

.mock-grade-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4)
}

.mock-grade-score {
  font-size: 13px;
  font-weight: 800;
  color: #4ADE80
}

/* Stat boxes */
.mock-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  flex-shrink: 0
}

.mock-stat svg {
  opacity: 0.7;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4)
}

.mock-stat strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700
}

.mock-stat em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 2px;
  font-weight: 400
}

/* Action buttons inside blurred group */
.mock-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
  flex-shrink: 0
}

.mock-action-btn svg {
  opacity: 0.7;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.45)
}

/* BLUR EFFECT — applied to individual items inside the group */
.blurred-box {
  filter: blur(5px);
  opacity: 0.75;
  user-select: none;
  pointer-events: none
}

/* ===== @MENTOR — ALWAYS CLEAR, PROMINENT, GLOWING ===== */
.mock-mentor-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(59, 130, 246, 0.6);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0.12) 100%);
  flex-shrink: 0;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.005em;
  position: relative;
  z-index: 5;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2), 0 0 20px rgba(59, 130, 246, 0.35), 0 0 40px rgba(59, 130, 246, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: mentorGlow 2.6s ease-in-out infinite;
  white-space: nowrap;
  transition: transform 0.2s
}

.mock-mentor-btn:hover {
  transform: translateY(-1px)
}

.mock-mentor-btn svg {
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.7))
}

@keyframes mentorGlow {

  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2), 0 0 16px rgba(59, 130, 246, 0.3), 0 0 32px rgba(59, 130, 246, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12)
  }

  50% {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5), 0 0 28px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18)
  }
}

/* Body */
.mock-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 480px
}

/* Sidebar */
.mock-sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.01);
  padding: 14px 0
}

.mock-sidebar-header {
  padding: 0 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 8px
}

.mock-sidebar-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35)
}

.mock-sidebar-meta {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.22);
  margin-top: 3px
}

.mock-layer {
  padding: 0 12px
}

.mock-layer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: default;
  transition: background 0.2s
}

.mock-layer-header:hover,
.mock-layer-header.active-layer {
  background: rgba(255, 255, 255, 0.04)
}

.mock-layer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0
}

.mock-layer-icon {
  flex-shrink: 0;
  opacity: 0.85
}

.mock-layer-name {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  flex: 1;
  letter-spacing: -0.01em
}

.mock-layer-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'JetBrains Mono', monospace
}

.mock-layer-arrow {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.3);
  transition: transform 0.2s
}

.mock-layer-arrow.open {
  transform: rotate(90deg)
}

.mock-files {
  padding: 4px 0 8px 22px
}

.mock-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: default
}

.mock-file:hover {
  background: rgba(255, 255, 255, 0.03)
}

.mock-file>span:nth-child(2) {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500
}

.mock-file.active-file {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2)
}

.mock-file.active-file>span:nth-child(2) {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600
}

.mock-file-bar {
  width: 42px;
  height: 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0
}

.mock-file-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  opacity: 0.75
}

.mock-file-count {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  min-width: 24px;
  text-align: right
}

/* ===== FILE DETAIL PANEL ===== */
.mock-detail-panel {
  padding: 18px 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px
}

/* File header */
.mock-file-header {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.mock-file-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px
}

.mock-file-title strong {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  font-family: 'JetBrains Mono', monospace
}

.mock-file-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0
}

.mock-file-tag.api {
  background: rgba(16, 185, 129, 0.12);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.25)
}

.mock-file-breadcrumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3)
}

/* Why This Matters card */
.mock-why-card {
  background: rgba(167, 139, 250, 0.04);
  border: 1px solid rgba(167, 139, 250, 0.15);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.mock-why-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A78BFA;
  margin-bottom: 2px
}

.mock-why-section {
  display: flex;
  gap: 12px;
  align-items: flex-start
}

.mock-why-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.mock-why-content {
  flex: 1;
  min-width: 0
}

.mock-why-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px
}

.mock-why-text {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0
}

.blurred-text {
  filter: blur(4.5px);
  opacity: 0.75;
  user-select: none;
  pointer-events: none
}

/* Imports section */
.mock-imports {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.mock-imports-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 4px
}

.mock-import-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s;
  cursor: default
}

.mock-import-row:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1)
}

.mock-import-row svg {
  flex-shrink: 0
}

.mock-import-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'JetBrains Mono', monospace
}

.mock-import-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0
}

.mock-import-tag.util {
  background: rgba(168, 85, 247, 0.12);
  color: #C4B5FD;
  border: 1px solid rgba(168, 85, 247, 0.25)
}

.mock-import-tag.model {
  background: rgba(16, 185, 129, 0.12);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.25)
}

.mock-import-tag.core {
  background: rgba(6, 182, 212, 0.12);
  color: #67E8F9;
  border: 1px solid rgba(6, 182, 212, 0.25)
}

.mock-import-tag.api {
  background: rgba(16, 185, 129, 0.12);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.25)
}

.mock-import-arrow {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.25);
  flex-shrink: 0
}

/* Learning path bar */
.mock-learningbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: #111;
  border-top: 1px solid rgba(255, 255, 255, 0.05)
}

.mock-lb-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0
}

.mock-lb-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  display: flex;
  align-items: center;
  justify-content: center
}

.mock-lb-title {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4)
}

.mock-lb-meta {
  display: block;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 2px
}

.mock-lb-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
  display: flex;
  overflow: hidden;
  gap: 1px
}

.mock-lb-segment {
  height: 100%;
  border-radius: 2px;
  opacity: 0.6
}

.mock-lb-next {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap
}

.mock-lb-next strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace
}

/* Search bar */
.mock-searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  background: #0d0d0d
}

.mock-search-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  flex: 1
}

.mock-search-kbd {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05)
}

/* Very subtle gradient at bottom edge */
.mock-blur-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 12%;
  background: linear-gradient(to bottom, transparent 0%, rgba(10, 10, 10, 0.4) 100%);
  pointer-events: none;
  z-index: 2
}

/* Trust bar below mockup */
.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500
}

.trust-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 16px
}

/* Remove old dep-graph styles */
.dep-graph {
  display: none
}

.scroll-indicator {
  display: none
}

/* ===== PAIN CARDS ===== */
.pain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.pain-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 30px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden
}

.pain-card:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.09);
  transform: translateY(-2px)
}

.pain-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border: 1px solid;
  flex-shrink: 0
}

.pain-icon-wrap.blue {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.2)
}

.pain-icon-wrap.orange {
  background: rgba(249, 115, 22, 0.08);
  border-color: rgba(249, 115, 22, 0.2)
}

.pain-icon-wrap.red {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2)
}

.pain-icon-wrap.amber {
  background: rgba(234, 179, 8, 0.08);
  border-color: rgba(234, 179, 8, 0.2)
}

.pain-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.3
}

.pain-card p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 16px;
  flex: 1
}

.pain-stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 7px 12px;
  margin-top: auto;
  align-self: flex-start;
  max-width: 100%
}

.pain-stat strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700
}

/* ===== FEATURE CARDS ===== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px
}

.feature-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 28px;
  transition: all 0.3s;
  display: flex;
  flex-direction: column
}

.feature-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
  transform: translateY(-2px)
}

.feature-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border: 1px solid;
  flex-shrink: 0
}

.feature-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.95)
}

.feature-card p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  flex: 1;
  line-height: 1.7
}

.feature-card .terminal {
  margin-top: 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #60A5FA;
  line-height: 1.7
}

/* ===== WHO SECTION ===== */
.who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px
}

.who-col {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 36px
}

.who-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: 0.01em
}

.who-badge.blue {
  background: rgba(59, 130, 246, 0.1);
  color: #60A5FA;
  border: 1px solid rgba(59, 130, 246, 0.2)
}

.who-badge.green {
  background: rgba(34, 197, 94, 0.1);
  color: #4ADE80;
  border: 1px solid rgba(34, 197, 94, 0.2)
}

.who-col h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.3
}

.who-intro {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin-bottom: 24px
}

.who-col ul {
  display: flex;
  flex-direction: column;
  gap: 11px
}

.who-col li {
  display: flex;
  gap: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  align-items: flex-start;
  line-height: 1.5
}

.who-col li svg {
  flex-shrink: 0;
  margin-top: 2px
}

/* ===== METRICS ===== */
.section-dark {
  background: rgba(255, 255, 255, 0.01)
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px
}

.metric-card {
  text-align: center;
  padding: 28px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  transition: all 0.3s
}

.metric-card:hover {
  border-color: rgba(255, 255, 255, 0.09);
  transform: translateY(-2px)
}

.metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  border: 1px solid
}

.metric-card .number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 42px;
  font-weight: 800;
  color: #3B82F6;
  margin-bottom: 8px;
  line-height: 1
}

.metric-card .label {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  line-height: 1.5
}

.terminal-block {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 28px 32px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 2;
  max-width: 680px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.4)
}

.terminal-block .cmd {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600
}

.terminal-block .ok {
  color: #22C55E
}

.terminal-block .warn {
  color: #EAB308
}

.terminal-block .t-dim {
  color: rgba(255, 255, 255, 0.25)
}

.terminal-block strong {
  color: rgba(255, 255, 255, 0.7)
}

/* ===== HOW IT WORKS ===== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative
}

.step {
  display: flex;
  flex-direction: column;
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: left;
  transition: all 0.3s;
  overflow: hidden
}

.step:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.09);
  transform: translateY(-2px)
}

.step-watermark {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 60px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.02);
  line-height: 1;
  pointer-events: none;
  font-family: 'Inter', sans-serif
}

.step-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid
}

.step-icon.blue {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
  color: #3B82F6
}

.step-icon.mauve {
  background: rgba(167, 139, 250, 0.1);
  border-color: rgba(167, 139, 250, 0.2);
  color: #A78BFA
}

.step-icon.green {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.2);
  color: #22C55E
}

.step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px
}

.step-num.blue {
  color: rgba(59, 130, 246, 0.7)
}

.step-num.mauve {
  color: rgba(167, 139, 250, 0.7)
}

.step-num.green {
  color: rgba(34, 197, 94, 0.7)
}

.step h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.3
}

.step p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 20px;
  flex: 1
}

.code-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #60A5FA;
  align-self: flex-start;
  margin-top: auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.progress-bar {
  display: inline-block;
  width: 56px;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
  margin: 0 4px
}

.progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3B82F6, #60A5FA);
  border-radius: 3px;
  animation: progressGlow 2s ease-in-out infinite
}

@keyframes progressGlow {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0.65
  }
}

/* ===== PRICING — LOCKED TILES ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px
}

.pricing-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer
}

.pricing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  border-radius: 14px
}

.pricing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4)
}

.pricing-card:hover::before {
  opacity: 1
}

.pricing-locked-featured {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.04)
}

.pricing-locked-featured:hover {
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 16px 40px rgba(59, 130, 246, 0.15)
}

.pricing-popular {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  z-index: 2
}

/* Locked badge */
.pricing-locked-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
  align-self: flex-start
}

.pricing-locked-badge svg {
  flex-shrink: 0;
  opacity: 0.8
}

.featured-badge {
  color: #60A5FA;
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.25)
}

.pricing-plan-name {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em
}

/* Hidden price */
.pricing-price-hidden {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 14px;
  line-height: 1
}

.price-blur {
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  filter: blur(7px);
  letter-spacing: 0.02em;
  user-select: none;
  transition: filter 0.3s
}

.pricing-card:hover .price-blur {
  filter: blur(4px)
}

.price-blur.enterprise-price {
  font-size: 24px;
  font-weight: 700
}

.price-suffix {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400
}

.pricing-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.55;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  min-height: 42px
}

/* Feature hints (compact, dotted) */
.pricing-features-hint {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  margin-bottom: 24px
}

.pricing-features-hint li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4
}

.pricing-features-hint .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.8
}

/* Claim button */
.btn-plan-claim {
  display: block;
  width: 100%;
  text-align: center;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
  margin-top: auto;
  cursor: pointer;
  font-family: inherit
}

.btn-plan-claim:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff
}

.btn-plan-claim.claim-featured {
  background: #3B82F6;
  border-color: #3B82F6;
  color: #fff
}

.btn-plan-claim.claim-featured:hover {
  background: #2563EB;
  border-color: #2563EB;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3)
}

/* Selected state (after click) */
.pricing-card.plan-selected {
  border-color: #22C55E;
  background: rgba(34, 197, 94, 0.04)
}

.pricing-card.plan-selected .btn-plan-claim {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #4ADE80
}

.pricing-note {
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  max-width: 600px;
  margin: 0 auto
}

/* ===== FAQ ===== */
.faq-list {
  max-width: 740px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.faq-item {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s
}

.faq-item.open {
  border-color: rgba(255, 255, 255, 0.1)
}

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s;
  gap: 16px
}

.faq-q:hover {
  background: rgba(255, 255, 255, 0.04)
}

.faq-q svg {
  transition: transform 0.3s;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.25)
}

.faq-item.open .faq-q {
  color: rgba(255, 255, 255, 0.95)
}

.faq-item.open .faq-q svg {
  transform: rotate(45deg);
  color: rgba(255, 255, 255, 0.5)
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 24px
}

.faq-item.open .faq-a {
  max-height: 400px;
  padding: 0 24px 22px
}

.faq-a p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.75
}

/* ===== WAITLIST CTA ===== */
.final-cta {
  border-top: 1px solid rgba(255, 255, 255, 0.05)
}

.waitlist-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  position: relative
}

.waitlist-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
  pointer-events: none
}

/* Plan selection banner (above form) */
.plan-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0 auto 18px;
  backdrop-filter: blur(8px);
  animation: slideInBanner 0.4s ease
}

@keyframes slideInBanner {
  from {
    opacity: 0;
    transform: translateY(-8px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.plan-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor
}

.plan-banner-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500
}

.plan-banner-text strong {
  font-weight: 700
}

.plan-banner-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 0 0 4px;
  transition: color 0.2s
}

.plan-banner-close:hover {
  color: rgba(255, 255, 255, 0.85)
}

.waitlist-form {
  max-width: 480px;
  margin: 0 auto 12px;
  display: flex;
  gap: 10px
}

.waitlist-form input {
  flex: 1;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border 0.2s
}

.waitlist-form input:focus {
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.04)
}

.waitlist-form input::placeholder {
  color: rgba(255, 255, 255, 0.2)
}

.waitlist-note {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 40px
}

.step2-title {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px
}

.step2-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 24px
}

.waitlist-success {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #5fbe82;
  font-size: 14px;
  font-weight: 600;
  padding: 16px 24px;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 12px;
  max-width: 400px;
  margin: 0 auto
}

.waitlist-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  flex-wrap: wrap
}

.wp-item {
  text-align: center
}

.wp-item strong {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'JetBrains Mono', monospace
}

.wp-item span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3)
}

.wp-sep {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.06)
}

/* ===== INVOLVEMENT CARDS ===== */
.involvement-options {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left
}

.involvement-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: all 0.25s;
  position: relative
}

.involvement-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12)
}

.involvement-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.involvement-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.25s;
  position: relative
}

.involvement-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s
}

.involvement-card input[type="radio"]:checked~.involvement-radio::after {
  transform: translate(-50%, -50%) scale(1)
}

.involvement-card:has(input[type="radio"]:checked) {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04)
}

.involvement-card:has(input[type="radio"]:checked) .involvement-radio {
  border-color: rgba(255, 255, 255, 0.4)
}

.involvement-card[data-accent="#3B82F6"]:has(input[type="radio"]:checked) {
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.06)
}

.involvement-card[data-accent="#3B82F6"]:has(input[type="radio"]:checked) .involvement-radio {
  border-color: #3B82F6
}

.involvement-card[data-accent="#3B82F6"]:has(input[type="radio"]:checked) .involvement-radio::after {
  background: #3B82F6
}

.involvement-card[data-accent="#22C55E"]:has(input[type="radio"]:checked) {
  border-color: #22C55E;
  background: rgba(34, 197, 94, 0.06)
}

.involvement-card[data-accent="#22C55E"]:has(input[type="radio"]:checked) .involvement-radio {
  border-color: #22C55E
}

.involvement-card[data-accent="#22C55E"]:has(input[type="radio"]:checked) .involvement-radio::after {
  background: #22C55E
}

.involvement-text {
  display: flex;
  flex-direction: column;
  gap: 3px
}

.involvement-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9)
}

.involvement-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.5
}

#waitlist-step-2 {
  animation: fadeSlideUp 0.4s ease forwards
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* ===== FOOTER ===== */
.footer {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 64px 0 32px
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  margin-top: 8px;
  line-height: 1.7;
  max-width: 300px
}

.footer-copy {
  margin-top: 20px !important;
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 13px !important
}

.footer h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.45)
}

.footer a {
  display: block;
  padding: 6px 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  transition: color 0.2s
}

.footer a:hover {
  color: rgba(255, 255, 255, 0.95)
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  flex-wrap: wrap;
  gap: 12px
}

.footer-legal {
  display: flex;
  gap: 20px
}

.footer-legal a {
  display: inline;
  padding: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer
}

.footer-legal a:hover {
  color: rgba(255, 255, 255, 0.85)
}

/* Modal-trigger buttons styled to match footer link appearance */
.footer-modal-btn {
  display: inline;
  padding: 0;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  transition: color 0.2s
}

.footer-modal-btn:hover {
  color: rgba(255, 255, 255, 0.9)
}

/* Company-column modal buttons must read identically to the <a> links beside
   them (the base rule's color:inherit made them brighter than Careers/Contact) */
.footer-grid .footer-modal-btn {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  text-align: left;
  color: rgba(255, 255, 255, 0.6)
}

.footer-grid .footer-modal-btn:hover {
  color: rgba(255, 255, 255, 0.95)
}

.footer-legal .footer-modal-btn {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7)
}

.footer-legal .footer-modal-btn:hover {
  color: rgba(255, 255, 255, 0.85)
}

/* ===== RESPONSIVE — TABLET (1024px) ===== */
@media(max-width:1024px) {

  .feature-grid,
  .steps {
    grid-template-columns: 1fr 1fr
  }

  .metrics-grid {
    grid-template-columns: 1fr 1fr
  }

  .pricing-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px
  }

  .proof-grid {
    grid-template-columns: 1fr 1fr
  }

  .product-mockup {
    max-width: 100%
  }

  .mock-body {
    grid-template-columns: 240px 1fr
  }

  .hero h1 {
    font-size: 46px
  }

  .section-title {
    font-size: 32px
  }

  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 32px
  }
}

/* ===== RESPONSIVE — TABLET SMALL (900px) ===== */
@media(max-width:900px) {
  .container {
    padding: 0 24px
  }

  .hero {
    padding: 110px 0 64px
  }

  .hero h1 {
    font-size: 42px;
    line-height: 1.08
  }

  .hero-content {
    padding: 0 20px
  }

  .product-mockup {
    margin-bottom: 32px
  }
}

/* ===== RESPONSIVE — MOBILE (768px) ===== */
@media(max-width:768px) {

  /* Hero typography */
  .hero {
    padding: 96px 0 56px;
    min-height: auto
  }

  .hero h1 {
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.035em;
    margin-bottom: 18px
  }

  .hero-sub {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 36px;
    max-width: 100%
  }

  .hero-badge {
    font-size: 11px;
    flex-wrap: wrap;
    max-width: 90vw
  }

  .badge-status {
    padding: 7px 11px;
    font-size: 10px;
    letter-spacing: 0.06em
  }

  .badge-info {
    padding: 7px 13px;
    font-size: 12px
  }

  /* Section typography */
  .section {
    padding: 40px 0
  }

  .section-title {
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 10px
  }

  .section-sub {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px
  }

  .section-label {
    font-size: 11px;
    margin-bottom: 10px
  }

  /* Grids → single column */
  .pain-grid,
  .feature-grid,
  .who-grid,
  .metrics-grid,
  .pricing-grid,
  .steps {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px
  }

  /* Cards padding */
  .pain-card,
  .feature-card,
  .who-col,
  .metric-card,
  .pricing-card {
    padding: 22px
  }

  .step {
    padding: 24px 22px
  }

  /* Step number watermark - smaller */
  .step-watermark {
    font-size: 44px;
    top: 8px;
    right: 12px
  }

  /* Navbar */
  .nav-links,
  .nav-cta {
    display: none
  }

  .hamburger {
    display: flex;
    padding: 8px;
    margin: -8px
  }

  .navbar {
    padding: 12px 0
  }

  .nav-logo-img {
    height: 26px
  }

  .navbar.scrolled {
    padding: 10px 0
  }

  /* Mobile menu — better experience */
  .mobile-menu {
    padding: 18px 24px 28px
  }

  .mobile-menu a {
    padding: 15px 0;
    font-size: 16px
  }

  /* Waitlist form */
  .waitlist-form {
    flex-direction: column;
    gap: 10px
  }

  .waitlist-form input,
  .waitlist-form button {
    width: 100%;
    min-height: 48px;
    font-size: 16px
  }

  /* Plan banner */
  .plan-banner {
    max-width: 100%;
    font-size: 12px;
    padding: 9px 14px 9px 12px
  }

  .plan-banner-text {
    font-size: 12px
  }

  /* ===== MOBILE MOCKUP — compact ===== */
  .product-mockup {
    margin-bottom: 28px;
    border-radius: 12px
  }

  .mock-topbar {
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: nowrap
  }

  .mock-repo {
    padding-right: 10px;
    gap: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.06)
  }

  .mock-repo-icon {
    width: 30px;
    height: 30px
  }

  .mock-repo-name {
    font-size: 12px
  }

  .mock-repo-url {
    font-size: 10px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .mock-blurred-group {
    display: none
  }

  .mock-mentor-btn {
    padding: 8px 12px;
    font-size: 11px;
    gap: 5px;
    margin-left: auto
  }

  .mock-mentor-btn svg {
    width: 11px;
    height: 11px
  }

  /* Mobile body — sidebar only, hide detail */
  .mock-body {
    grid-template-columns: 1fr;
    min-height: auto
  }

  .mock-sidebar {
    border-right: none;
    padding: 10px 0
  }

  .mock-sidebar-header {
    padding: 0 14px 10px
  }

  .mock-layer {
    padding: 0 10px
  }

  .mock-layer-header {
    padding: 8px 10px
  }

  .mock-layer-name {
    font-size: 12px
  }

  .mock-files {
    padding: 2px 0 4px 16px
  }

  .mock-file {
    padding: 6px 10px;
    gap: 6px
  }

  .mock-file>span:nth-child(2) {
    font-size: 11px
  }

  .mock-file-bar {
    width: 36px
  }

  .mock-detail-panel {
    display: none
  }

  /* Learning bar */
  .mock-learningbar {
    padding: 9px 12px;
    gap: 10px
  }

  .mock-lb-icon {
    width: 26px;
    height: 26px
  }

  .mock-lb-title {
    font-size: 9px
  }

  .mock-lb-meta {
    font-size: 9px
  }

  .mock-lb-next {
    display: none
  }

  .mock-lb-bar {
    height: 5px
  }

  .mock-searchbar {
    padding: 9px 12px
  }

  .mock-search-text {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  /* Trust bar — wrap nicely */
  .hero-trust {
    gap: 10px 14px;
    font-size: 12px;
    padding: 0 16px
  }

  .trust-sep {
    display: none
  }

  .trust-item {
    font-size: 12px
  }

  /* Metrics */
  .metric-card {
    padding: 22px 18px
  }

  .metric-card .number {
    font-size: 34px
  }

  .metric-card .label {
    font-size: 12px
  }

  .terminal-block {
    font-size: 11px;
    padding: 18px 16px;
    line-height: 1.9;
    overflow-x: auto
  }

  /* Pricing */
  .pricing-grid {
    margin-bottom: 20px
  }

  .pricing-card {
    padding: 24px 20px
  }

  .pricing-price-hidden {
    margin-bottom: 12px
  }

  .price-blur {
    font-size: 30px
  }

  .pricing-note {
    font-size: 12px;
    padding: 0 16px
  }

  /* FAQ */
  .faq-q {
    padding: 18px 20px;
    font-size: 14px;
    min-height: 60px;
    gap: 12px
  }

  .faq-a {
    padding: 0 20px
  }

  .faq-item.open .faq-a {
    padding: 0 20px 20px
  }

  .faq-a p {
    font-size: 13px;
    line-height: 1.7
  }

  /* Buttons — better touch targets */
  .btn {
    min-height: 44px
  }

  .btn-lg {
    padding: 14px 28px;
    font-size: 15px
  }

  .btn-nav {
    padding: 9px 16px !important;
    font-size: 13px !important
  }

  /* Footer */
  .footer {
    padding: 48px 0 28px
  }

  .footer-grid {
    margin-bottom: 36px
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    font-size: 12px
  }

  .footer-brand p {
    max-width: 100%;
    font-size: 13px
  }

  .footer h4 {
    font-size: 11px;
    margin-bottom: 14px
  }

  .footer a {
    font-size: 13px;
    padding: 5px 0
  }

  .footer-logo-img {
    height: 32px
  }

  /* Waitlist proof bar */
  .waitlist-proof {
    flex-direction: row;
    justify-content: space-around;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    flex-wrap: wrap
  }

  .wp-sep {
    display: none
  }

  .wp-item strong {
    font-size: 18px
  }

  .wp-item span {
    font-size: 11px
  }

  /* Step 2 — involvement */
  .step2-title {
    font-size: 18px;
    line-height: 1.3
  }

  .step2-sub {
    font-size: 12px
  }

  .involvement-card {
    padding: 14px 14px
  }

  .involvement-label {
    font-size: 14px
  }

  .involvement-desc {
    font-size: 12px;
    line-height: 1.5
  }

  /* Hero glow softer on mobile */
  .hero-glow-top {
    width: 500px;
    height: 300px
  }
}

/* ===== RESPONSIVE — SMALL PHONES (480px) ===== */
@media(max-width:480px) {
  .container {
    padding: 0 18px
  }

  .hero-content {
    padding: 0 18px
  }

  /* Hero */
  .hero {
    padding: 88px 0 44px
  }

  .hero h1 {
    font-size: 28px;
    letter-spacing: -0.03em;
    margin-bottom: 14px;
    line-height: 1.12
  }

  .hero-sub {
    font-size: 14px;
    margin-bottom: 28px;
    line-height: 1.55
  }

  /* Section */
  .section {
    padding: 32px 0
  }

  .section-title {
    font-size: 22px;
    line-height: 1.25
  }

  .section-sub {
    font-size: 13px;
    margin-bottom: 24px
  }

  /* Badge wraps cleanly */
  .hero-badge {
    font-size: 10px;
    border-radius: 8px
  }

  .badge-status {
    padding: 6px 10px;
    font-size: 9px
  }

  .badge-info {
    padding: 6px 10px;
    font-size: 11px
  }

  /* Footer single column */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .footer-legal {
    justify-content: center
  }

  /* Cards tighter */
  .pain-card,
  .feature-card,
  .who-col,
  .metric-card,
  .pricing-card {
    padding: 18px
  }

  .pain-card h3,
  .feature-card h3,
  .step h3 {
    font-size: 16px
  }

  .step {
    padding: 22px 18px
  }

  /* Pain stat — keep readable */
  .pain-stat {
    font-size: 10px;
    padding: 6px 10px
  }

  /* Mockup tighter */
  .mock-topbar {
    padding: 9px 10px;
    gap: 6px
  }

  .mock-repo-icon {
    width: 28px;
    height: 28px
  }

  .mock-repo-name {
    font-size: 11px
  }

  .mock-repo-url {
    font-size: 9px;
    max-width: 110px
  }

  .mock-mentor-btn {
    padding: 7px 10px;
    font-size: 10px
  }

  .mock-mentor-btn svg {
    width: 10px;
    height: 10px
  }

  .mock-layer-icon {
    width: 11px;
    height: 11px
  }

  /* Terminal block */
  .feature-card .terminal,
  .code-pill {
    font-size: 10px
  }

  /* Lists smaller */
  .who-col li {
    font-size: 13px;
    gap: 8px
  }

  .pricing-features-hint li {
    font-size: 12px
  }

  .faq-a p {
    font-size: 13px
  }

  /* Pricing on small phones */
  .price-blur {
    font-size: 26px
  }

  .pricing-price-hidden {
    margin-bottom: 10px
  }

  /* Hero CTA */
  .btn-lg {
    padding: 13px 24px;
    font-size: 14px;
    width: 100%;
    max-width: 280px
  }

  /* Modal */
  .modal {
    padding: 24px 20px;
    border-radius: 14px
  }

  .modal h3 {
    font-size: 18px;
    margin-bottom: 14px
  }

  .modal p,
  .modal-list li {
    font-size: 13px;
    line-height: 1.65
  }

  .modal-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 14px
  }

  /* Mobile menu */
  .mobile-menu a {
    font-size: 15px;
    padding: 13px 0
  }
}

/* ===== TINY PHONES (360px) ===== */
@media(max-width:360px) {
  .hero h1 {
    font-size: 26px
  }

  .section-title {
    font-size: 20px
  }

  .hero-badge {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border-radius: 12px
  }

  .hero-badge .badge-status,
  .hero-badge .badge-info {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08)
  }

  .hero-badge .badge-info {
    border-bottom: none
  }
}

/* ===== MODALS ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 5, 0.7);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeInOverlay 0.25s ease
}

.modal-overlay.open {
  display: flex
}

@keyframes fadeInOverlay {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.modal {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 36px 32px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  animation: slideUpModal 0.3s ease;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(59, 130, 246, 0.05)
}

@keyframes slideUpModal {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-family: inherit;
  line-height: 1
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15)
}

.modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border: 1px solid
}

.modal h3 {
  font-size: 22px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 16px;
  letter-spacing: -0.02em
}

.modal p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  margin-bottom: 14px
}

.modal p strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600
}

.modal-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
  padding-left: 0;
  list-style: none
}

.modal-list li {
  padding-left: 18px;
  position: relative;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6
}

.modal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.7)
}

.modal-list li strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  display: inline-block;
  margin-right: 4px
}

.modal-meta {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 8px
}

@media(max-width:480px) {
  .modal {
    padding: 28px 22px;
    max-height: 90vh
  }

  .modal h3 {
    font-size: 19px
  }

  .modal p,
  .modal-list li {
    font-size: 13px
  }
}

/* =====================================================================
   FROM THE BLOG — homepage teaser section
   ===================================================================== */
.blog-teaser {
  padding: 80px 0
}

.blog-teaser-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 36px;
  flex-wrap: wrap
}

.blog-teaser-all {
  color: #60A5FA;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 10px 18px;
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.05);
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0
}

.blog-teaser-all:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.5);
  color: #93C5FD
}

.blog-teaser-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px
}

.blog-teaser-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 28px;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s ease
}

a.blog-teaser-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(59, 130, 246, 0.35);
  transform: translateY(-2px)
}

.blog-teaser-featured {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.02));
  border-color: rgba(59, 130, 246, 0.25);
  padding: 32px
}

.blog-teaser-side {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.blog-teaser-side .blog-teaser-card {
  padding: 20px 22px;
  flex: 1
}

.blog-teaser-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #60A5FA;
  padding: 4px 10px;
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.06);
  margin-bottom: 16px;
  width: fit-content
}

.blog-teaser-tag.soon-tag {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03)
}

.blog-teaser-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 12px
}

.blog-teaser-title-sm {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.82);
  margin: 0
}

.blog-teaser-excerpt {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 18px;
  flex-grow: 1
}

.blog-teaser-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 12px
}

.blog-teaser-dot {
  opacity: 0.5
}

.blog-teaser-link {
  color: #60A5FA;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: auto
}

.blog-teaser-soon {
  opacity: 0.7
}

/* Responsive */
@media (max-width: 1024px) {
  .blog-teaser-grid {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .blog-teaser-side {
    flex-direction: row;
    gap: 12px
  }

  .blog-teaser-side .blog-teaser-card {
    flex: 1
  }
}

@media (max-width: 768px) {
  .blog-teaser {
    padding: 56px 0
  }

  .blog-teaser-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 28px
  }

  .blog-teaser-featured {
    padding: 24px
  }

  .blog-teaser-title {
    font-size: 20px
  }

  .blog-teaser-side {
    flex-direction: column
  }

  .blog-teaser-side .blog-teaser-card {
    padding: 18px 20px
  }
}

/* =====================================================================
   BLOG INDEX + ARTICLE PAGES
   ===================================================================== */

/* Active nav link state */
.nav-links a.active {
  color: #fff
}

.nav-links a.active::after {
  content: '';
  display: block;
  height: 2px;
  width: 100%;
  margin-top: 4px;
  background: #3B82F6;
  border-radius: 2px
}

/* ===== BLOG INDEX HEADER ===== */
.blog-header {
  position: relative;
  padding: 140px 0 56px;
  overflow: hidden
}

.blog-header::before {
  content: '';
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 280px;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 0
}

.blog-header-inner {
  position: relative;
  z-index: 1;
  max-width: 760px
}

.blog-h1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.98);
  margin-bottom: 18px
}

.blog-intro {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  max-width: 640px
}

/* ===== BLOG GRID ===== */
.blog-section {
  padding: 32px 0 96px
}

.blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 64px
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 28px;
  transition: all 0.25s ease;
  text-decoration: none;
  color: inherit;
  position: relative
}

a.blog-card:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(59, 130, 246, 0.35);
  transform: translateY(-2px)
}

.blog-card-featured {
  grid-column: 1 / -1;
  padding: 36px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.02));
  border-color: rgba(59, 130, 246, 0.25)
}

.blog-card-featured::after {
  content: 'FEATURED';
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #3B82F6;
  padding: 4px 10px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.08)
}

.blog-card-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #60A5FA;
  padding: 4px 10px;
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.06);
  margin-bottom: 18px;
  width: fit-content
}

.blog-card-tag.soon-tag {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03)
}

.blog-card-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 12px
}

.blog-card-featured .blog-card-title {
  font-size: 28px
}

.blog-card-excerpt {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 20px;
  flex-grow: 1
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 14px
}

.blog-card-dot {
  opacity: 0.5
}

.blog-card-link {
  color: #60A5FA;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: auto
}

.blog-card-soon {
  opacity: 0.75
}

.blog-card-soon .blog-card-title {
  color: rgba(255, 255, 255, 0.7)
}

/* ===== BLOG NEWSLETTER CTA ===== */
.blog-newsletter {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 16px;
  padding: 48px 32px;
  text-align: center
}

.blog-newsletter-inner {
  max-width: 560px;
  margin: 0 auto
}

.blog-newsletter-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 12px
}

.blog-newsletter-sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 24px
}

/* ===== ARTICLE PAGE ===== */
.article {
  padding: 120px 0 64px
}

.article-container {
  max-width: 760px
}

.article-header {
  margin-bottom: 40px
}

.article-breadcrumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  margin-bottom: 24px
}

.article-breadcrumb a {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s
}

.article-breadcrumb a:hover {
  color: #60A5FA
}

.article-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #60A5FA;
  padding: 4px 10px;
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.06);
  margin-bottom: 20px
}

.article-h1 {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.98);
  margin-bottom: 16px
}

.article-subtitle {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
  font-style: italic;
  margin-bottom: 24px
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap
}

.article-dot {
  opacity: 0.5
}

/* Article body */
.article-body {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.82)
}

.article-body p {
  margin-bottom: 22px
}

.article-body strong {
  color: rgba(255, 255, 255, 0.98);
  font-weight: 600
}

.article-body em {
  color: rgba(255, 255, 255, 0.88)
}

.article-body h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.98);
  margin: 56px 0 18px;
  scroll-margin-top: 100px
}

.article-body h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.95);
  margin: 36px 0 14px
}

.article-body ol,
.article-body ul {
  margin: 0 0 24px 0;
  padding-left: 24px
}

.article-body ul {
  list-style: disc
}

.article-body ol {
  list-style: decimal
}

.article-body li {
  margin-bottom: 8px;
  padding-left: 6px;
  color: rgba(255, 255, 255, 0.78)
}

.article-body a {
  color: #60A5FA;
  text-decoration: underline;
  text-decoration-color: rgba(96, 165, 250, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s
}

.article-body a:hover {
  text-decoration-color: rgba(96, 165, 250, 0.8)
}

/* Buttons inside article body — restore proper styles (override inline-link rules above) */
.article-body a.btn {
  color: #fff;
  text-decoration: none;
  font-weight: 500
}

.article-body a.btn:hover {
  color: #fff;
  text-decoration: none
}

.article-body a.btn-primary,
.article-body a.btn-primary:hover {
  color: #fff;
  background: #3B82F6
}

.article-body a.btn-primary:hover {
  background: #2563EB
}

.article-body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  color: #93C5FD
}

/* Table of contents */
.article-toc {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 24px 28px;
  margin: 36px 0
}

.toc-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 14px !important
}

.article-toc ol {
  margin: 0;
  padding-left: 20px;
  list-style: decimal
}

.article-toc li {
  margin-bottom: 6px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.55)
}

.article-toc a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.2s
}

.article-toc a:hover {
  color: #60A5FA
}

/* Article tables */
.article-table-wrap {
  margin: 28px 0;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px
}

.article-table th,
.article-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06)
}

.article-table th {
  background: rgba(59, 130, 246, 0.05);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em
}

.article-table td {
  color: rgba(255, 255, 255, 0.75)
}

.article-table tr:last-child td {
  border-bottom: none
}

/* Article code blocks */
.article-code {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px;
  line-height: 1.7;
  background: #0F0F0F;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 28px 0;
  color: rgba(255, 255, 255, 0.85);
  white-space: pre;
  overflow-x: auto
}

/* Checklist style */
.article-checklist {
  list-style: none !important;
  padding-left: 0 !important
}

.article-checklist li {
  position: relative;
  padding-left: 30px !important;
  margin-bottom: 10px
}

.article-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #22C55E;
  font-weight: 700;
  font-size: 16px
}

/* Inline + final CTAs */
.article-cta-inline {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.02));
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-radius: 12px;
  padding: 24px 28px;
  margin: 40px 0
}

.article-cta-inline p {
  margin-bottom: 14px;
  font-size: 16px
}

.article-cta-inline p:last-of-type {
  margin-bottom: 20px
}

.article-cta-final {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.03));
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 16px;
  padding: 36px;
  margin: 56px 0 32px
}

.article-cta-final h3 {
  font-size: 24px;
  margin-top: 0 !important;
  margin-bottom: 14px !important
}

.article-cta-final p {
  font-size: 16px
}

.article-cta-final .btn {
  margin-top: 12px
}

/* Article footer */
.article-footer {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px
}

.article-footer p {
  margin-bottom: 10px
}

/* Related articles */
.article-related {
  padding: 64px 0 96px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.01)
}

.related-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 28px
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.related-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 22px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease
}

.related-card:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(59, 130, 246, 0.3)
}

.related-card h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 14px
}

.related-soon {
  opacity: 0.7
}

/* ===== RESPONSIVE — BLOG/ARTICLE TABLET (1024px) ===== */
@media (max-width: 1024px) {
  .blog-h1 {
    font-size: 40px
  }

  .article-h1 {
    font-size: 36px
  }
}

/* ===== RESPONSIVE — BLOG/ARTICLE MOBILE (768px) ===== */
@media (max-width: 768px) {
  .blog-header {
    padding: 110px 0 40px
  }

  .blog-h1 {
    font-size: 34px
  }

  .blog-intro {
    font-size: 16px
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .blog-card {
    padding: 22px
  }

  .blog-card-featured {
    padding: 22px
  }

  .blog-card-featured::after {
    top: 22px;
    right: 22px;
    font-size: 9.5px;
    padding: 3px 8px;
    letter-spacing: 0.08em
  }

  .blog-card-featured .blog-card-tag {
    max-width: calc(100% - 90px)
  }

  .blog-card-featured .blog-card-title {
    font-size: 21px
  }

  .blog-card-title {
    font-size: 19px
  }

  .blog-newsletter {
    padding: 36px 24px
  }

  .blog-newsletter-title {
    font-size: 22px
  }

  .article {
    padding: 100px 0 48px
  }

  .article-h1 {
    font-size: 30px
  }

  .article-subtitle {
    font-size: 17px
  }

  .article-body {
    font-size: 16px
  }

  .article-body h2 {
    font-size: 24px;
    margin: 44px 0 14px
  }

  .article-body h3 {
    font-size: 18px;
    margin: 28px 0 10px
  }

  .article-code {
    font-size: 12.5px;
    padding: 16px 18px
  }

  .article-cta-final {
    padding: 26px 22px
  }

  .article-cta-final h3 {
    font-size: 20px
  }

  .related-grid {
    grid-template-columns: 1fr;
    gap: 14px
  }
}

/* ===== RESPONSIVE — BLOG/ARTICLE SMALL MOBILE (480px) ===== */
@media (max-width: 480px) {
  .blog-h1 {
    font-size: 28px
  }

  .article-h1 {
    font-size: 26px
  }

  .article-toc {
    padding: 18px 20px
  }

  .article-table th,
  .article-table td {
    padding: 10px 12px;
    font-size: 13px
  }

  /* Featured card: shorten tag label + tighten badge so both fit on one row */
  .blog-card-featured .blog-card-tag {
    font-size: 10px;
    padding: 3px 8px;
    letter-spacing: 0.04em
  }

  .blog-card-featured::after {
    font-size: 9px;
    padding: 2px 7px
  }
}

/* ===== COMPARISON TABLE (landing) ===== */
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02)
}

.compare-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 14px
}

.compare-table th,
.compare-table td {
  padding: 16px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.compare-table thead th {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  vertical-align: bottom;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12)
}

.compare-table tbody tr:last-child td,
.compare-table tbody tr:last-child th {
  border-bottom: none
}

.compare-table .compare-feature-col {
  width: 40%
}

.compare-table th[scope="row"],
.compare-table .compare-feature-col {
  text-align: left;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82)
}

/* Highlighted Xolvyn column */
.compare-table .compare-col-xolvyn {
  background: rgba(59, 130, 246, 0.06)
}

.compare-table thead th.compare-col-xolvyn {
  color: #60A5FA
}

.cmp-yes {
  color: #4ADE80;
  font-size: 16px;
  font-weight: 700
}

.cmp-no {
  color: rgba(255, 255, 255, 0.25);
  font-size: 15px;
  font-weight: 600
}

@media(max-width:768px) {

  .compare-table th,
  .compare-table td {
    padding: 13px 14px
  }
}

/* =====================================================================
   CAREERS PAGE
   Reuses existing tokens: .section, .container, .section-label,
   .section-title, .fade-up, .btn, .text-blue, card surfaces, .modal.
   ===================================================================== */

/* Careers hero — tighter than the product hero (no product mockup) */
.careers-hero {
  padding: 150px 0 56px
}

.careers-hero .hero-sub {
  margin-bottom: 0
}

/* "1 open role" badge segment uses the blue accent instead of green */
.badge-status.badge-hiring {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(59, 130, 246, 0.07) 100%);
  color: #60A5FA
}

.badge-status.badge-hiring .badge-dot {
  background: #3B82F6;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
  animation-name: badgePulseBlue
}

@keyframes badgePulseBlue {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6)
  }

  50% {
    box-shadow: 0 0 18px rgba(59, 130, 246, 1)
  }
}

/* ===== ROLE CARD (repeatable) ===== */
.roles-list {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.role-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 34px;
  transition: all 0.3s
}

.role-card:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.09)
}

.role-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 6px
}

.role-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1.2
}

.role-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.role-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 11px;
  white-space: nowrap
}

.role-tagline {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  line-height: 1.65;
  margin: 8px 0 26px;
  max-width: 720px
}

.role-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px;
  margin-bottom: 28px
}

.role-col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 14px
}

.role-col ul {
  display: flex;
  flex-direction: column;
  gap: 11px
}

.role-col li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72)
}

.role-col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(59, 130, 246, 0.55)
}

.role-col.nice-to-have li::before {
  background: rgba(167, 139, 250, 0.5)
}

.role-col li strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600
}

.role-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06)
}

.role-actions .text-link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s
}

.role-actions .text-link:hover {
  color: #60A5FA
}

/* ===== "WHAT THIS ACTUALLY IS" — radically honest ===== */
.honest-list {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.honest-block {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 6px 18px;
  align-items: start;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 2px solid rgba(59, 130, 246, 0.35);
  border-radius: 12px;
  padding: 24px 26px;
  transition: all 0.3s
}

.honest-block:hover {
  background: rgba(255, 255, 255, 0.035);
  border-left-color: rgba(59, 130, 246, 0.7)
}

.honest-num {
  grid-row: 1 / span 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.18);
  line-height: 1
}

.honest-block h3 {
  font-size: 17px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.01em;
  margin-bottom: 8px
}

.honest-block p {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68)
}

.honest-block p + p {
  margin-top: 10px
}

.honest-block p strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600
}

.honest-block .mono-accent {
  font-family: 'JetBrains Mono', monospace;
  color: #60A5FA;
  font-size: 13.5px
}

/* ===== APPLICATION CHALLENGE ===== */
.challenge-card {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(59, 130, 246, 0.06) 0%, transparent 55%),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 40px 42px
}

.challenge-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4ADE80;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 18px
}

.challenge-card > p {
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
  max-width: 760px
}

.challenge-card > p strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600
}

.challenge-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 30px 0 8px;
  counter-reset: chstep
}

.challenge-step {
  position: relative;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 22px
}

.challenge-step::before {
  counter-increment: chstep;
  content: counter(chstep, decimal-leading-zero);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #60A5FA;
  display: block;
  margin-bottom: 10px
}

.challenge-step h4 {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 7px;
  letter-spacing: -0.01em
}

.challenge-step p {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62)
}

.challenge-fallback {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 22px
}

.challenge-fallback svg {
  flex-shrink: 0;
  margin-top: 2px
}

.challenge-fallback p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.66)
}

.challenge-fallback strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600
}

.challenge-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06)
}

.challenge-note {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6
}

/* ===== APPLY MODAL EXTRAS (reuses .modal) ===== */
.modal .modal-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 4px 0 20px;
  counter-reset: applystep
}

.modal .modal-step {
  position: relative;
  padding-left: 38px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72)
}

.modal .modal-step::before {
  counter-increment: applystep;
  content: counter(applystep);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #60A5FA;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center
}

.modal .modal-step strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600
}

.modal-motive {
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 20px
}

.modal-motive .modal-motive-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #60A5FA;
  margin-bottom: 7px
}

.modal-motive p {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-bottom: 0 !important;
  font-style: italic
}

.modal .btn-apply-mail {
  width: 100%;
  justify-content: center;
  margin-bottom: 6px
}

/* ===== VIEW-SOURCE EASTER EGG (#secret) ===== */
.secret-reveal {
  display: none
}

.secret-reveal:target {
  display: block;
  animation: slideUpModal 0.4s ease
}

.secret-reveal .secret-card {
  max-width: 680px;
  margin: 0 auto;
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(167, 139, 250, 0.08) 0%, transparent 55%),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 16px;
  padding: 36px 38px;
  text-align: center
}

.secret-reveal .secret-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #A78BFA;
  margin-bottom: 14px
}

.secret-reveal h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.96);
  margin-bottom: 14px
}

.secret-reveal p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  max-width: 520px;
  margin: 0 auto 14px
}

.secret-reveal .btn {
  margin-top: 8px
}

/* ===== ROLE: RESPONSIBILITIES + FULL TECH STACK ===== */
.role-do {
  margin-bottom: 30px
}

.role-stack {
  margin-bottom: 28px
}

.role-do > h4,
.role-stack > h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 12px
}

.role-stack-intro {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  max-width: 720px;
  margin-bottom: 20px
}

.role-stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px
}

.stack-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 18px 18px 20px
}

.stack-group h5 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #60A5FA;
  margin-bottom: 13px
}

.stack-group ul {
  display: flex;
  flex-direction: column;
  gap: 9px
}

.stack-group li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8)
}

.stack-group li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: rgba(59, 130, 246, 0.4)
}

.stack-group li strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600
}

.stack-group .q {
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 1px
}

.stack-note {
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 22px
}

.stack-note p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8)
}

.stack-note strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600
}

/* ===== CAREERS RESPONSIVE ===== */
@media(max-width:900px) {
  .role-cols {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .role-stack-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .challenge-steps {
    grid-template-columns: 1fr
  }
}

@media(max-width:768px) {
  .careers-hero {
    padding: 120px 0 44px
  }

  .role-card {
    padding: 24px 22px
  }

  .role-title {
    font-size: 20px
  }

  .role-card-head {
    gap: 12px
  }

  .role-stack-grid {
    grid-template-columns: 1fr
  }

  .honest-block {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 22px
  }

  .honest-num {
    grid-row: auto;
    font-size: 18px;
    margin-bottom: 4px
  }

  .challenge-card {
    padding: 28px 22px
  }

  .secret-reveal .secret-card {
    padding: 28px 22px
  }

  .secret-reveal h2 {
    font-size: 22px
  }
}
/* ===== HERO MOCKUP — SECURITY REPORT (static replica) ===== */
.sec-report-mock {
  text-align: left;
  overflow: hidden
}

/* Header */
.sec-report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07)
}

.sec-report-id {
  display: flex;
  align-items: center;
  gap: 11px
}

.sec-report-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.3);
  flex-shrink: 0
}

.sec-report-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.95)
}

.sec-report-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px
}

.sec-report-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.sec-report-repo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  padding: 5px 10px
}

.sec-report-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  padding: 6px 11px
}

/* Severity stat cards */
.sec-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 16px 18px 12px
}

.sec-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  padding: 14px 10px
}

.sec-stat-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center
}

.sec-stat-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  font-weight: 700;
  line-height: 1
}

.sec-stat-label {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5)
}

/* Risk summary */
.sec-risk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 18px 14px
}

.sec-risk-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.sec-risk-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #FBBF24;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 100px;
  padding: 5px 12px
}

.sec-owasp-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  padding: 3px 7px
}

.sec-owasp-tag strong {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700
}

.sec-risk-right {
  display: flex;
  align-items: center;
  gap: 8px
}

.sec-muted-pill {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 100px;
  padding: 4px 10px;
  white-space: nowrap
}

/* Findings table */
.sec-findings {
  padding: 0 12px 6px
}

.sec-finding-row {
  display: grid;
  grid-template-columns: 84px 1.35fr 78px 52px 116px 1.8fr;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05)
}

.sec-finding-head {
  border-top: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.4);
  padding-bottom: 9px
}

.sec-col-blast {
  color: #60A5FA
}

.sec-sev {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 5px;
  white-space: nowrap
}

.sev-critical {
  color: #F87171;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.32)
}

.sev-high {
  color: #FB923C;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.32)
}

.sev-medium {
  color: #FBBF24;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.32)
}

.sec-file {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85)
}

.sec-line {
  color: rgba(255, 255, 255, 0.4)
}

.sec-cwe {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #F59E0B
}

.sec-cvss {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px;
  font-weight: 700
}

/* Blast radius — the visual anchor the headline promises */
.sec-blast {
  display: flex;
  flex-direction: column;
  gap: 5px
}

.sec-blast-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92)
}

.sec-blast-num.sec-blast-low {
  color: rgba(255, 255, 255, 0.55)
}

.sec-blast-bar {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden
}

.sec-blast-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px
}

.sec-desc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.8)
}

.sec-rule {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.38)
}

/* Footer */
.sec-report-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.015)
}

.sec-footer-engine {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.42)
}

.sec-footer-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap
}

.sec-footer-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65)
}

.sec-footer-score strong {
  color: rgba(255, 255, 255, 0.95)
}

.sec-footer-grade {
  color: #FBBF24;
  font-weight: 700
}

.sec-footer-powered {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45)
}

.sec-auditor {
  font-family: 'JetBrains Mono', monospace;
  color: #60A5FA
}

/* ===== MOBILE: Security Report mockup (≤768px) ===== */
@media(max-width:768px) {
  /* Header stacks so the repo pill + Export never get cut off */
  .sec-report-header { gap: 12px; padding: 14px 16px }
  .sec-report-actions { width: 100%; gap: 8px }
  .sec-report-repo { flex: 1 1 100%; justify-content: flex-start; font-size: 11px; min-width: 0; word-break: break-all }
  .sec-report-export { flex: 0 0 auto }
  .sec-report-sub { font-size: 10px }

  /* 4 stat cards -> 2x2 */
  .sec-stat-row { grid-template-columns: repeat(2, 1fr); padding: 14px 16px 10px }
  .sec-stat-num { font-size: 22px }

  /* Risk summary wraps cleanly */
  .sec-risk-row { padding: 0 16px 14px }
  .sec-risk-right { flex-wrap: wrap }

  /* Findings: table -> stacked cards (kills horizontal overflow) */
  .sec-findings { padding: 0 14px 4px }
  .sec-finding-row.sec-finding-head { display: none }

  .sec-finding-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    padding: 14px;
    margin-bottom: 10px
  }
  .sec-finding-row:last-child { margin-bottom: 0 }

  /* Line 1: severity pill + file */
  .sec-finding-row > span:nth-child(1) { order: 1 }
  .sec-finding-row > .sec-file { order: 2; flex: 1 1 auto; min-width: 0; word-break: break-word }

  /* Line 2: CWE + CVSS as small labelled chips */
  .sec-finding-row > .sec-cwe,
  .sec-finding-row > .sec-cvss {
    font-size: 11px;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.03)
  }
  .sec-finding-row > .sec-cwe { order: 4 }
  .sec-finding-row > .sec-cvss { order: 5 }
  .sec-finding-row > .sec-cvss::before {
    content: "CVSS ";
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500
  }

  /* Blast radius: full-width + emphasized — the key data point stays prominent */
  .sec-finding-row > .sec-blast {
    order: 6;
    flex: 1 1 100%;
    gap: 7px;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 8px;
    padding: 9px 11px
  }
  .sec-finding-row > .sec-blast::before {
    content: "BLAST RADIUS";
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.07em;
    color: #60A5FA
  }
  .sec-finding-row > .sec-blast .sec-blast-num { font-size: 15px }
  .sec-finding-row > .sec-blast .sec-blast-bar { height: 6px }

  /* Description full-width */
  .sec-finding-row > .sec-desc { order: 7; flex: 1 1 100% }

  /* Footer stacks */
  .sec-footer-right { width: 100%; gap: 12px }
}

/* ===== MOBILE: comparison table -> stacked cards (≤768px) ===== */
@media(max-width:768px) {
  .compare-wrap { overflow-x: visible }
  .compare-table { min-width: 0 }
  .compare-table thead { display: none }
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td { display: block }

  .compare-table tr {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden
  }
  .compare-table th[scope="row"] {
    text-align: left;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    width: auto
  }
  .compare-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-align: right
  }
  .compare-table tr td:last-child { border-bottom: none }
  .compare-table td.compare-col-xolvyn { background: rgba(59, 130, 246, 0.06) }

  /* Row labels via the column headers (no markup change needed) */
  .compare-table td::before {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    margin-right: 12px
  }
  .compare-table td:nth-child(2)::before { content: "Xolvyn" }
  .compare-table td:nth-child(3)::before { content: "Generic security scanners" }
  .compare-table td:nth-child(4)::before { content: "Generic graph tools" }
}

/* ===== MOBILE: tap targets, trust strips, overflow guards (≤768px) ===== */
@media(max-width:768px) {
  .btn,
  .btn-primary,
  .btn-plan-claim,
  .faq-q { min-height: 44px }
  .mobile-menu a { min-height: 44px }

  /* trust rows wrap instead of overflowing */
  .hero-trust { flex-wrap: wrap; row-gap: 8px }
  .hero-trust-strip { max-width: 100% }

  /* belt-and-suspenders against horizontal overflow */
  .product-mockup,
  img,
  table { max-width: 100% }
}

/* ===== MOBILE: hero type scale (≤480 / ≤390 / ≤360) ===== */
@media(max-width:480px) {
  .hero h1 { font-size: 30px; line-height: 1.12 }
  .hero-sub { font-size: 14.5px }
  .section-title { font-size: 22px }
}

@media(max-width:390px) {
  .hero h1 { font-size: 27px }
}

@media(max-width:360px) {
  .hero h1 { font-size: 24px }
  .hero-sub { font-size: 14px }
}

/* ===================================================================
   HERO DUAL MOCKUP — one dependency map, two views
   Card A (Understand / architecture) behind + offset top-left,
   Card B (Secure / security report) in front + offset bottom-right.
   =================================================================== */
.hero-duo {
  position: relative;
  max-width: 1000px;
  margin: 0 auto 40px;
  text-align: center
}

.hero-duo-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  padding: 7px 16px;
  margin-bottom: 24px
}

.hero-duo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3B82F6;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.7)
}

.hero-duo-stack {
  position: relative;
  padding-top: 52px
}

.duo-card {
  text-align: left
}

.duo-tab {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 6px 13px;
  border-radius: 8px 8px 0 0;
  position: relative;
  z-index: 1;
  margin-left: 16px;
  margin-bottom: -1px
}

.duo-tab-a {
  color: #C4B5FD;
  background: rgba(167, 139, 250, 0.14);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-bottom: none
}

.duo-tab-b {
  color: #FCA5A5;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.32);
  border-bottom: none
}

.duo-window {
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden
}

/* Card A — Understand: behind, top-left, slightly recessed */
.duo-card-understand {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  z-index: 1;
  transform: scale(0.97);
  transform-origin: top left
}

.duo-card-understand .duo-window {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5)
}

/* Card B — Secure: front, bottom-right, primary */
.duo-card-secure {
  position: relative;
  width: 76%;
  margin-left: auto;
  z-index: 2
}

.duo-card-secure .duo-window {
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.7), 0 0 60px rgba(239, 68, 68, 0.06)
}

/* Architecture explorer (Card A interior) */
.ae-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07)
}

.ae-repo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ae-mentor {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: #60A5FA;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 100px;
  padding: 4px 9px;
  /* glow, matching the live @mentor button */
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.28)
}

/* Top-bar action row — Graph visible, the rest blurred (teaser) */
.ae-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden
}

.ae-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03)
}

.ae-action svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0
}

.ae-action--blur {
  filter: blur(4px);
  opacity: 0.5;
  pointer-events: none
}

.ae-action--on {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.12)
}

.ae-action--on svg {
  stroke: #60A5FA
}

/* hide the action row when the explorer gets narrow, so the top bar never crowds */
@media (max-width: 900px) {
  .ae-actions {
    display: none
  }
}

.ae-body {
  display: grid;
  grid-template-columns: 132px 1fr
}

.ae-sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 12px 10px
}

.ae-sidebar-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 10px;
  padding: 0 4px
}

.ae-layer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7)
}

.ae-layer-active {
  background: rgba(59, 130, 246, 0.1);
  color: rgba(255, 255, 255, 0.95)
}

.ae-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0
}

.ae-layer-name {
  flex: 1;
  white-space: nowrap
}

.ae-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72)
}

.ae-detail {
  padding: 14px 16px
}

.ae-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 14px
}

.ae-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 7px
}

.ae-blurb {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 16px
}

.ae-imports {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.ae-import {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 6px 10px
}

/* Mobile: stack the two cards vertically, security first, full-width (no overlap) */
@media(max-width:768px) {
  .hero-duo { max-width: 100% }

  .hero-duo-stack {
    padding-top: 0;
    display: flex;
    flex-direction: column;
    gap: 26px
  }

  .duo-card {
    position: static;
    width: 100%;
    transform: none
  }

  .duo-card-understand { order: 2 }

  .duo-card-secure {
    order: 1;
    margin-left: 0
  }
}

@media(max-width:480px) {
  .ae-body { grid-template-columns: 108px 1fr }
  .ae-detail { padding: 12px 14px }
}


/* ===== HERO ANCHOR LINE ===== */
.hero-anchor {
  max-width: 620px;
  margin: -28px auto 30px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5)
}
/* ===== FINDINGS CARD (hero visual) ===== */
.findings-card {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: visible
}

.findings-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  height: 110%;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.06) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0
}

.findings-inner {
  position: relative;
  z-index: 1;
  background: #0E0E0E;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%)
}

.findings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px
}

.findings-repo {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: -0.01em
}

.findings-grade {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: #F59E0B;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 100px;
  padding: 5px 12px;
  letter-spacing: 0.01em
}

.findings-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 16px
}

.findings-list {
  display: flex;
  flex-direction: column
}

.finding-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.finding-row-last {
  border-bottom: none
}

.finding-left {
  flex: 1;
  min-width: 0
}

.finding-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px
}

.finding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0
}

.finding-file {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.finding-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
  padding-left: 18px
}

.finding-right {
  width: 140px;
  flex-shrink: 0;
  text-align: right;
  padding-top: 2px
}

.finding-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  display: block;
  margin-bottom: 6px
}

.finding-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden
}

.finding-bar > span {
  display: block;
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease
}

/* Findings card mobile */
@media(max-width:768px) {
  .findings-inner { padding: 20px }
  .finding-row { gap: 16px }
  .finding-right { width: 100px }
  .finding-file { font-size: 13px }
  .finding-desc { font-size: 12px }
  .findings-repo { font-size: 12px }
}

@media(max-width:480px) {
  .findings-inner { padding: 16px }
  .finding-right { width: 80px }
  .finding-file { font-size: 12px }
  .finding-count { font-size: 12px }
}

/* ===== HOW IT WORKS ===== */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.how-step {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 26px;
  transition: all .3s
}

.how-step:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
  transform: translateY(-2px)
}

.how-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px
}

.how-step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.18)
}

.how-step-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center
}

.how-step h3 {
  font-size: 17px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 9px
}

.how-step p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6)
}

@media(max-width:768px) {
  .how-grid {
    grid-template-columns: 1fr;
    gap: 14px
  }
}

/* =====================================================================
   HERO V3 — TEXT-FORWARD (locked copy from CONTENT.md)
   Type + whitespace are the visual; background stays atmospheric.
   ===================================================================== */

/* Very faint grid, masked so it concentrates behind the headline */
.hero::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 75%);
  pointer-events: none
}

/* Soft blue glow behind the headline (~0.10) */
.hero-glow-top {
  top: -40px;
  width: 880px;
  height: 560px;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.10) 0%, transparent 68%)
}

/* Quiet drifting accent blob, bottom-right corner */
.hero-blob {
  position: absolute;
  right: -140px;
  bottom: -160px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.07), transparent 65%);
  filter: blur(70px);
  pointer-events: none;
  animation: heroBlobDrift 22s ease-in-out infinite alternate
}

@keyframes heroBlobDrift {
  from {
    transform: translate(0, 0)
  }

  to {
    transform: translate(-64px, -48px)
  }
}

/* Minimal muted status pill */
/* Two-segment status pill: green "private beta" badge + launch date */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(13, 13, 13, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  padding: 5px 14px 5px 5px;
  margin-bottom: 32px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35)
}

/* left segment — green outlined badge */
.hero-pill-beta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid rgba(52, 211, 153, 0.45);
  background: rgba(34, 197, 94, 0.1);
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #34D399;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.16)
}

.hero-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.9);
  animation: badgePulseGreen 2s ease-in-out infinite;
  flex-shrink: 0
}

/* divider */
.hero-pill-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0
}

/* right segment — launch date */
.hero-pill-launch {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap
}

@keyframes badgePulseGreen {
  0%, 100% {
    box-shadow: 0 0 7px rgba(52, 211, 153, 0.6)
  }
  50% {
    box-shadow: 0 0 13px rgba(52, 211, 153, 1)
  }
}

/* narrow phones: shrink so both segments fit on one line */
@media (max-width: 420px) {
  .hero-pill {
    gap: 7px;
    padding: 4px 11px 4px 4px
  }

  .hero-pill-beta {
    font-size: 9.5px;
    letter-spacing: 0.05em;
    padding: 4px 9px;
    gap: 6px
  }

  .hero-pill-launch {
    font-size: 11.5px
  }
}

/* Final say on hero type scale — overrides earlier mobile shrink rules */
.hero {
  padding: 152px 0 96px
}

.hero h1 {
  font-size: clamp(34px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 24px
}

.hero-sub {
  font-size: clamp(16px, 2vw, 19px);
  max-width: 580px;
  margin-bottom: 32px
}

.hero-cta-row {
  margin-bottom: 16px
}

.hero-micro {
  margin: 0 auto
}

/* Trust bar (section 3) — understated credibility strip below the hero.
   Top hairline only, no fill, no heavy box. */
.trust-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 30px 0
}

.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 28px
}

.trust-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.15s ease
}

.trust-bar-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.15s ease
}

.trust-bar-icon svg {
  width: 16px;
  height: 16px;
  display: block
}

.trust-bar-logos {
  gap: 7px
}

/* subtle hover: text + icon brighten together */
.trust-bar-item:hover {
  color: rgba(255, 255, 255, 0.85)
}

.trust-bar-item:hover .trust-bar-icon {
  color: rgba(255, 255, 255, 0.85)
}

.trust-bar-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0
}

@media(max-width:768px) {
  .hero {
    padding: 120px 0 64px
  }

  .trust-bar {
    padding: 24px 0
  }

  /* drop the dividers; lay items out as 2x2 bordered tiles
     (icon on top, label below) — equal-height, balanced */
  .trust-bar-divider {
    display: none
  }

  .trust-bar-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 12px;
    max-width: 420px;
    margin: 0 auto
  }

  .trust-bar-item {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 10px;
    padding: 18px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 12.5px;
    line-height: 1.35
  }

  .trust-bar-icon svg {
    width: 20px;
    height: 20px
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-blob,
  .hero-pill-dot {
    animation: none
  }

  .fade-up {
    opacity: 1;
    transform: none;
    transition: none
  }
}

/* Keep the careers hero on its own spacing (the .hero override above is landing-only) */
.careers-hero {
  padding: 150px 0 56px
}

@media(max-width:768px) {
  .careers-hero {
    padding: 120px 0 44px
  }
}

/* =====================================================================
   SCROLL HERO — pinned 4-slide showcase
   Track provides scroll distance; sticky viewport pins; JS maps scroll
   progress to slide transforms (transform/opacity only, GPU-friendly).
   ===================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0
}

/* Citable definition paragraph — visible to both users and AI crawlers,
   positioned early in the DOM (first 30% of page) for maximum citability */
.hero-definition {
  max-width: 720px;
  margin: 0 auto 0;
  padding: 18px 28px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  letter-spacing: -0.005em;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -9999px;
  /* Visually hidden but remains in the DOM for crawlers.
     To make visible to users, remove position/top overrides. */
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  width: 1px;
  height: 1px;
}

.scrollhero {
  position: relative;
  background: #0A0A0A
}

.scrollhero-track {
  height: 450vh;
  position: relative
}

.scrollhero-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden
}

/* reuse the hero glow, recentered for the pinned viewport */
.scrollhero-glow {
  top: -140px;
  width: 980px;
  height: 620px;
  transition: background 0.6s ease
}

/* Persistent top pill */
.scrollhero-top {
  position: absolute;
  top: 320px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 10;
  pointer-events: none
}

.scrollhero-top .hero-pill {
  margin-bottom: 0;
  pointer-events: auto
}

/* Slides */
.scrollhero-slides {
  position: absolute;
  inset: 0;
  z-index: 2
}

.scrollhero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 26px;
  /* top padding clears the fixed navbar + status pill, matching the old hero's
     breathing room below the nav */
  padding: 400px 24px 40px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden
}

/* graceful no-JS default: first slide visible */
.scrollhero-slide[data-slide="0"] {
  opacity: 1;
  visibility: visible
}

.scrollhero-slide.is-current {
  pointer-events: auto
}

.slide-copy {
  text-align: center;
  max-width: 760px;
  will-change: transform, opacity
}

.slide-heading {
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 14px
}

.slide-sub {
  font-size: clamp(15px, 1.6vw, 18px);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.55;
  max-width: 620px;
  margin: 0 auto
}

.slide-visual {
  /* Option B: a comfortable, uniform width centered in the wide stage —
     bigger than the old 660px cards, but not stretched edge-to-edge (which
     left the condensed content looking sparse). */
  width: min(960px, 94vw);
  display: flex;
  justify-content: center;
  will-change: transform, opacity
}

.slide-placeholder {
  width: 100%;
  height: min(44vh, 380px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55)
}

/* Progress rail */
.scrollhero-progress {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5
}

.progress-dot {
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
  transition: background .3s ease, height .3s ease
}

.progress-dot.is-active {
  background: #3B82F6;
  height: 22px
}

/* Mobile: pinned hero adjustments so content fits in the viewport */
@media (max-width: 768px) {
  .scrollhero-slide {
    padding: 130px 16px 20px;
    justify-content: flex-start;
    gap: 14px
  }

  .scrollhero-top {
    top: 72px
  }

  .slide-heading {
    font-size: clamp(22px, 6.5vw, 30px);
    margin-bottom: 6px
  }

  .slide-sub {
    font-size: 13.5px;
    line-height: 1.45;
    margin-bottom: 0
  }

  .slide-visual {
    width: 100%;
    overflow: visible
  }

  /* Scale the product cards down to fit the mobile viewport fully */
  .slide-visual .duo-window,
  .slide-visual .ae-window,
  .slide-visual .sec-report-mock,
  .slide-visual .gh-window {
    transform: scale(0.78);
    transform-origin: top center;
    margin-bottom: -12%
  }

  .scrollhero-progress {
    right: 6px;
    gap: 7px
  }

  .progress-dot {
    width: 5px;
    height: 5px
  }

  .progress-dot.is-active {
    height: 16px
  }
}

@media (max-width: 480px) {
  .scrollhero-slide {
    padding: 120px 12px 16px;
    gap: 10px
  }

  .scrollhero-top {
    top: 64px
  }

  .slide-heading {
    font-size: clamp(20px, 6vw, 26px);
    margin-bottom: 4px
  }

  .slide-sub {
    font-size: 13px;
    line-height: 1.4
  }

  .slide-visual .duo-window,
  .slide-visual .ae-window,
  .slide-visual .sec-report-mock,
  .slide-visual .gh-window {
    transform: scale(0.68);
    margin-bottom: -18%
  }
}

/* ---------------------------------------------------------------------
   STATIC FALLBACK — mobile (<768px) and prefers-reduced-motion.
   Pin disabled; slides render as normal stacked sections.
   --------------------------------------------------------------------- */
.scrollhero.is-static .scrollhero-track {
  height: auto
}

.scrollhero.is-static .scrollhero-viewport {
  position: static;
  height: auto;
  overflow: visible
}

.scrollhero.is-static .scrollhero-slides {
  position: static
}

.scrollhero.is-static .scrollhero-slide {
  position: static;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  gap: 18px;
  padding: 40px 20px
}

.scrollhero.is-static .slide-copy,
.scrollhero.is-static .slide-visual {
  transform: none !important;
  opacity: 1 !important
}

.scrollhero.is-static .scrollhero-top {
  position: static;
  padding: 112px 0 4px;
  pointer-events: auto
}

.scrollhero.is-static .scrollhero-progress {
  display: none
}

.scrollhero.is-static .slide-heading {
  font-size: clamp(26px, 7vw, 34px)
}

/* ---------------------------------------------------------------------
   MOBILE SLIDE DECK — horizontal swipe carousel.
   On phones the pin is off; the 4 slides become a full-width swipeable
   deck with CSS scroll-snap, and the progress dots become its pager
   (kept in sync by JS). Gated on .is-carousel, which JS adds only at
   <=768px — so reduced-motion desktop keeps the stacked layout above.
   Each slide sizes to its own content (align-items:flex-start) and JS sets
   the deck height to the active slide, so sparse slides don't inherit a
   huge empty panel from the dense ones.
   --------------------------------------------------------------------- */
.scrollhero.is-carousel .scrollhero-slides {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  /* size to the CURRENT slide, not the tallest — JS sets the height per slide
     so sparse slides don't inherit a huge empty panel from the dense ones */
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  transition: height 0.35s ease
}

.scrollhero.is-carousel .scrollhero-slides::-webkit-scrollbar {
  display: none
}

.scrollhero.is-carousel .scrollhero-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  /* top-aligned: heading sits just below the pill on every slide */
  justify-content: flex-start;
  gap: 18px;
  padding: 16px 18px 30px
}

/* in the deck, show product cards at full width (no down-scale) — the cards
   already have responsive mobile layouts, and full width reads far better */
.scrollhero.is-carousel .slide-visual .duo-window,
.scrollhero.is-carousel .slide-visual .ae-window,
.scrollhero.is-carousel .slide-visual .sec-report-mock,
.scrollhero.is-carousel .slide-visual .gh-window,
.scrollhero.is-carousel .slide-visual .graph-window {
  transform: none;
  margin-bottom: 0
}

/* deck: trim the security report to its top findings so it isn't a long box */
.scrollhero.is-carousel .sec-findings .sec-finding-row:nth-child(4) {
  display: none
}

/* progress dots become the deck's horizontal pager */
.scrollhero.is-carousel .scrollhero-progress {
  display: flex;
  position: static;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transform: none;
  right: auto;
  top: auto;
  gap: 8px;
  margin: 16px auto 2px
}

.scrollhero.is-carousel .progress-dot {
  width: 7px;
  height: 7px
}

.scrollhero.is-carousel .progress-dot.is-active {
  width: 22px;
  height: 7px
}

/* status pill sits above the deck, clearing the fixed navbar */
.scrollhero.is-carousel .scrollhero-top {
  padding: 90px 0 4px
}

/* ---------------------------------------------------------------------
   SLIDE VISUALS — reused product windows inside the pinned viewport
   --------------------------------------------------------------------- */
.slide-visual .duo-window {
  width: 100%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55)
}

/* the architecture explorer reads better slightly narrower */
.slide-visual .ae-window {
  max-width: 100%
}

/* Short laptop viewports: tighten the budget so heading + window fit 100vh */
@media (min-width: 769px) and (max-height: 860px) {
  .scrollhero-slide {
    padding-top: 148px;
    gap: 10px
  }

  .scrollhero-top {
    top: 92px;
  }

  .slide-heading {
    font-size: clamp(24px, 3.2vw, 38px);
    margin-bottom: 6px
  }

  .slide-sub {
    font-size: 14px;
    line-height: 1.45
  }

  .slide-visual {
    transform: scale(0.85);
    transform-origin: top center;
  }

  .scrollhero .sec-report-header {
    padding: 12px 14px
  }

  .scrollhero .sec-stat-row {
    padding: 12px 14px 8px;
    gap: 8px
  }

  .scrollhero .sec-stat-card {
    padding: 10px 8px;
    gap: 3px
  }

  .scrollhero .sec-stat-num {
    font-size: 20px
  }

  .scrollhero .sec-finding-row {
    padding: 8px 10px;
    gap: 10px
  }

  .scrollhero .sec-report-footer {
    padding: 10px 14px
  }

  .scrollhero .ae-detail {
    padding: 12px 14px
  }

  .scrollhero .ae-blurb {
    margin-bottom: 12px
  }

  .scrollhero .gh-comment-body {
    padding: 10px 12px
  }

  .scrollhero .gh-table td,
  .scrollhero .gh-table th {
    padding: 5px 9px
  }
}

/* ---------------------------------------------------------------------
   GITHUB DARK-MODE PR RECREATIONS (slides 3-4)
   GitHub dark palette: canvas #0d1117, raised #161b22, border #30363d.
   --------------------------------------------------------------------- */
.gh-window {
  width: 100%;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55)
}

.slide-visual .gh-window {
  max-width: 100%
}

/* ===== COMBINED PR SLIDE — two GitHub cards side by side =====
   This slide's visual (two stacked-content cards) is taller than the other
   slides, so vertical-centering would push the heading up under the status
   pill and clip the taller card at the bottom. Instead we anchor the content
   to the top (heading always clears the pill) and scale the card pair down to
   fit shorter laptop viewports. */
.scrollhero-slide[data-slide="2"] {
  justify-content: flex-start;
  padding-top: 132px;
  padding-bottom: 32px;
  gap: 16px
}

.scrollhero-slide[data-slide="2"] .slide-heading {
  margin-bottom: 8px
}

.scrollhero-slide[data-slide="2"] .slide-visual {
  width: min(1160px, 94vw);
  transform-origin: top center
}

.gh-pair {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  transform-origin: top center
}

.gh-pair .gh-window {
  flex: 1 1 0;
  min-width: 0;
  max-width: none
}

/* scale the pair down on shorter viewports so both cards stay fully visible.
   We scale the inner .gh-pair (not .slide-visual) because the scroll engine
   writes its own inline transform onto .slide-visual every frame. */
@media (min-width: 769px) and (max-height: 820px) {
  .scrollhero-slide[data-slide="2"] .gh-pair {
    transform: scale(0.9)
  }
}

@media (min-width: 769px) and (max-height: 730px) {
  .scrollhero-slide[data-slide="2"] .gh-pair {
    transform: scale(0.8)
  }
}

@media (max-width: 768px) {
  .gh-pair {
    flex-direction: column
  }

  /* the cards carry flex:1 1 0 for the side-by-side desktop split; in a
     vertical column that basis collapses their height to nothing, so reset
     them to size by content */
  .gh-pair .gh-window {
    flex: 0 0 auto;
    width: 100%
  }
}

/* ===== SLIDE 4 — ARCHITECTURE GRAPH OVERVIEW =====
   A faithful, compact recreation of the product's "Project Overview" graph:
   six layer cards wired to the central Core hub by labeled dependency edges. */
.graph-window {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55)
}

.graph-canvas {
  position: relative;
  padding: 16px
}

.graph-overview-label {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.62)
}

.graph-overview-label svg {
  width: 12px;
  height: 12px;
  color: rgba(255, 255, 255, 0.5)
}

/* dependency edges — drawn behind the nodes, uniform hairline weight */
.graph-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none
}

.graph-edges path {
  fill: none;
  stroke: rgba(184, 150, 108, 0.5);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke
}

.graph-edge-num {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(206, 184, 150, 0.78);
  background: #0d0d0d;
  padding: 1px 4px;
  border-radius: 4px;
  pointer-events: none
}

.graph-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 16px;
  margin-top: 30px
}

.graph-node {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: #0e0e0e;
  padding: 12px 13px;
  overflow: hidden
}

/* colored top accent per layer (driven by --c) */
.graph-node::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c);
  opacity: 0.85
}

.graph-node--active {
  border-color: rgba(45, 212, 191, 0.55);
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.3), 0 0 26px rgba(45, 212, 191, 0.16)
}

.graph-node-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px
}

.graph-node-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.4)
}

.graph-node-cx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px
}

.graph-cx-simple {
  color: #3FB950
}

.graph-cx-moderate {
  color: #D29922
}

.graph-cx-complex {
  color: #F85149
}

.graph-node-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 5px
}

.graph-node-desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.42);
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.graph-node-foot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4)
}

.graph-stat {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 3;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(13, 13, 13, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 7px;
  padding: 4px 9px
}

.graph-stat strong {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600
}

/* tablet/phone: collapse to two columns so titles stay readable */
/* ---- SLIDE 4 GRAPH — mobile -------------------------------------------
   At <=768px the hero drops its scroll-pin and slides become normal stacked
   sections, so the 2D node-and-edge layout no longer reads. We reflow the
   graph into a compact node grid (no connecting edges — they're meaningless
   once cards stack), and cancel the inherited window down-scale. */
@media (max-width: 768px) {
  /* don't shrink this window like the other slides — it reflows instead */
  .slide-visual .graph-window {
    transform: none;
    margin-bottom: 0
  }

  .graph-edges,
  .graph-edge-num {
    display: none
  }

  .graph-canvas {
    padding: 13px
  }

  .graph-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-top: 34px
  }

  .graph-node {
    padding: 10px 11px
  }

  .graph-node-title {
    font-size: 15px;
    margin-bottom: 4px
  }

  .graph-node-desc {
    font-size: 11px;
    -webkit-line-clamp: 2;
    line-clamp: 2
  }

  /* float-out pill would overlap the last card once stacked — inline it */
  .graph-stat {
    position: static;
    display: inline-block;
    margin-top: 12px
  }
}

/* very narrow phones: one card per row reads cleaner than a cramped 2-up */
@media (max-width: 430px) {
  .graph-grid {
    grid-template-columns: 1fr
  }

  .graph-node-desc {
    -webkit-line-clamp: 3;
    line-clamp: 3
  }
}

.gh-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #161b22;
  border-bottom: 1px solid #30363d;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: #9198a1
}

.gh-titlebar-sep {
  color: #3d444d
}

.gh-muted {
  color: #9198a1
}

/* PR head (slide 4) */
.gh-pr-head {
  padding: 14px 16px 13px;
  border-bottom: 1px solid #30363d
}

.gh-pr-title {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f0f6fc
}

.gh-pr-num {
  color: #9198a1;
  font-weight: 400
}

.gh-pr-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 9px;
  font-size: 12.5px
}

.gh-merged-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #8250df;
  color: #fff;
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600
}

.gh-branch {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #58a6ff;
  background: rgba(68, 147, 248, 0.12);
  border-radius: 5px;
  padding: 1px 6px
}

/* Comment card */
.gh-comment {
  margin: 14px 16px;
  border: 1px solid #30363d;
  border-radius: 8px;
  overflow: hidden
}

.gh-comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #161b22;
  border-bottom: 1px solid #30363d;
  font-size: 12.5px
}

.gh-avatar {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0
}

.gh-login {
  font-weight: 600;
  color: #f0f6fc
}

.gh-bot-pill {
  font-size: 10.5px;
  color: #9198a1;
  border: 1px solid #3d444d;
  border-radius: 100px;
  padding: 1px 8px;
  line-height: 1.5
}

.gh-comment-body {
  padding: 13px 14px;
  font-size: 13px;
  color: #e6edf3
}

.gh-comment-text {
  line-height: 1.6;
  color: #e6edf3
}

.gh-inline-code {
  font-size: 12px;
  background: rgba(110, 118, 129, 0.18);
  border-radius: 5px;
  padding: 1px 6px
}

.gh-analysis-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #f0f6fc;
  margin-bottom: 12px
}

.gh-grade {
  color: #3fb950;
  font-weight: 700
}

/* Markdown-style tables */
.gh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-bottom: 13px
}

.gh-table:last-child {
  margin-bottom: 2px
}

.gh-table th,
.gh-table td {
  border: 1px solid #30363d;
  padding: 6px 10px;
  text-align: left;
  vertical-align: middle
}

.gh-table th {
  background: #161b22;
  color: #9198a1;
  font-weight: 600;
  font-size: 11.5px
}

.gh-table td {
  color: #e6edf3
}

.gh-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px
}

.gh-subhead {
  font-size: 12.5px;
  font-weight: 700;
  color: #f0f6fc;
  margin-bottom: 8px
}

.gh-sev {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 100px;
  white-space: nowrap
}

.gh-sev-medium {
  color: #d29922;
  border: 1px solid rgba(210, 153, 34, 0.4);
  background: rgba(187, 128, 9, 0.1)
}

.gh-sev-low {
  color: #9198a1;
  border: 1px solid #3d444d;
  background: rgba(110, 118, 129, 0.1)
}

/* Commit + merged rows (slide 4) */
.gh-commit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px 12px;
  padding: 10px 12px;
  border: 1px solid #30363d;
  border-radius: 8px;
  font-size: 12.5px;
  color: #e6edf3
}

.gh-commit-msg {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.gh-verified {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: #3fb950;
  border: 1px solid rgba(63, 185, 80, 0.4);
  border-radius: 100px;
  padding: 2px 10px
}

.gh-merged-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 16px 16px;
  padding: 10px 12px;
  background: rgba(130, 80, 223, 0.1);
  border: 1px solid rgba(130, 80, 223, 0.4);
  border-radius: 8px;
  font-size: 12.5px;
  color: #e6edf3
}

/* Mobile: tables tighten and wrap instead of overflowing */
@media(max-width:768px) {
  .gh-titlebar {
    flex-wrap: wrap;
    padding: 9px 12px
  }

  .gh-comment {
    margin: 12px 12px
  }

  .gh-commit-row,
  .gh-merged-row {
    margin-left: 12px;
    margin-right: 12px;
    flex-wrap: wrap
  }

  .gh-commit-msg {
    white-space: normal
  }

  .gh-pr-title {
    font-size: 14px
  }

  .gh-table th,
  .gh-table td {
    padding: 5px 7px;
    font-size: 11px
  }

  .gh-mono {
    font-size: 10.5px
  }

  .gh-table .gh-mono {
    word-break: break-word
  }
}

/* ---------------------------------------------------------------------
   SCROLL HERO — POLISH (checkpoint 4)
   Per-slide glow mood, glow parallax, clickable rail, mobile reveals.
   --------------------------------------------------------------------- */

/* Glow hue shifts with the active slide: blue -> blue -> neutral -> green */
.scrollhero .scrollhero-glow {
  will-change: transform
}

.scrollhero.glow-0 .scrollhero-glow {
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.10) 0%, transparent 68%)
}

.scrollhero.glow-1 .scrollhero-glow {
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.12) 0%, transparent 68%)
}

.scrollhero.glow-2 .scrollhero-glow {
  background: radial-gradient(ellipse at center, rgba(148, 163, 184, 0.07) 0%, transparent 68%)
}

.scrollhero.glow-3 .scrollhero-glow {
  background: radial-gradient(ellipse at center, rgba(34, 197, 94, 0.09) 0%, transparent 68%)
}

/* Progress dots are real buttons now */
.progress-dot {
  display: block;
  padding: 0;
  cursor: pointer;
  border: none
}

.progress-dot:hover {
  background: rgba(255, 255, 255, 0.4)
}

.progress-dot.is-active:hover {
  background: #3B82F6
}

.progress-dot:focus-visible {
  outline: 2px solid #3B82F6;
  outline-offset: 3px
}

/* Mobile static mode: gentle fade-up reveals (skipped for reduced motion) */
.scrollhero.is-static .scrollhero-slide.io-pending {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease, transform .6s ease
}

.scrollhero.is-static .scrollhero-slide.io-pending.io-in {
  opacity: 1;
  transform: none
}

@media (prefers-reduced-motion: reduce) {
  .scrollhero-glow {
    transition: none
  }

  .scrollhero.is-static .scrollhero-slide.io-pending {
    opacity: 1;
    transform: none;
    transition: none
  }
}

/* =====================================================================
   SECTIONS 4–9 — NEW LANDING PAGE STRUCTURE
   ===================================================================== */

/* Generous vertical padding for content sections (~96px desktop) */
.section--lg {
  padding: 64px 0
}

/* ===== SECTION 4 — CAPABILITY CARDS ===== */
.cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.cap-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 32px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column
}

.cap-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px)
}

/* Featured card — the differentiator */
.cap-card--featured {
  border-color: rgba(239, 68, 68, 0.2);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.035) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: 0 0 48px rgba(239, 68, 68, 0.05), inset 0 1px 0 rgba(239, 68, 68, 0.06);
  position: relative;
  overflow: hidden
}

.cap-card--featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #EF4444 0%, rgba(239, 68, 68, 0) 80%);
  border-radius: 14px 14px 0 0
}

.cap-card--featured:hover {
  border-color: rgba(239, 68, 68, 0.35);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.055) 0%, rgba(255, 255, 255, 0.03) 100%);
  box-shadow: 0 0 64px rgba(239, 68, 68, 0.08)
}

.cap-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 16px
}

.cap-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid;
  flex-shrink: 0
}

.cap-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.3
}

.cap-card p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.7;
  flex: 1
}

/* ===== SECTION 5 — HOW IT WORKS STEPS ===== */
.hiw-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0
}

.hiw-step {
  flex: 1;
  max-width: 340px;
  text-align: center;
  padding: 32px 24px
}

.hiw-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--accent, #3B82F6);
  margin-bottom: 22px
}

/* thin gradient rules that fade into the accent-colored number on each side */
.hiw-num::before,
.hiw-num::after {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent, #3B82F6))
}

.hiw-num::after {
  transform: scaleX(-1)
}

.hiw-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  border: 1px solid
}

.hiw-step h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.3
}

.hiw-step p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  line-height: 1.65
}

.hiw-connector {
  display: flex;
  align-items: center;
  padding-top: 64px;
  flex-shrink: 0;
  opacity: 0.7
}

/* ===== SECTION 6 — PRICING TIERS ===== */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 52px auto 0
}

.tier-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease
}

/* colored top edge — tinted to each tier's --accent, lit on hover */
.tier-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent, #3B82F6);
  opacity: 0;
  transition: opacity 0.3s ease
}

.tier-card:hover::before {
  opacity: 0.7
}

.tier-card:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: color-mix(in srgb, var(--accent, #fff) 40%, rgba(255, 255, 255, 0.12));
  transform: translateY(-4px);
  box-shadow: 0 16px 44px color-mix(in srgb, var(--accent, #000) 13%, transparent)
}

.tier-card--recommended {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.04);
  box-shadow: 0 0 48px rgba(59, 130, 246, 0.06)
}

.tier-card--recommended::before {
  opacity: 0.9
}

.tier-card--recommended:hover {
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 16px 64px rgba(59, 130, 246, 0.16)
}

.tier-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  z-index: 2
}

/* ===== 4-tier pricing (Free / Pro / Team / Enterprise) ===== */
.tier-grid.tier-grid--4 {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1180px
}

/* top-left status flag: Locked / Founding Price / Custom */
.tier-flag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5)
}

.tier-flag svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0
}

.tier-flag--accent {
  color: #60A5FA;
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.1)
}

/* prices stay hidden until launch (a "founding price" teaser) — the digits are
   masked behind soft, accent-tinted dots. Swap the placeholder digits for real
   numbers and drop .tier-blur to reveal them. */
.tier-blur {
  display: inline-block;
  font-size: 0;
  -webkit-user-select: none;
  user-select: none
}

.tier-blur::after {
  content: "\2022\2022";
  font-size: 22px;
  letter-spacing: 0.12em;
  vertical-align: 0.18em;
  color: color-mix(in srgb, var(--accent, #fff) 62%, rgba(255, 255, 255, 0.32))
}

/* colored bullet dots, tinted per tier via the card's --accent */
.tier-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent, #3B82F6);
  flex-shrink: 0
}

@media (max-width: 1024px) {
  .tier-grid.tier-grid--4 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px
  }
}

@media (max-width: 600px) {
  .tier-grid.tier-grid--4 {
    grid-template-columns: 1fr;
    max-width: 420px
  }
}

.tier-name {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px
}

.tier-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 16px
}

.tier-amount {
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.02em
}

.tier-amount--custom {
  font-size: 22px;
  font-weight: 700
}

.tier-period {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.35)
}

.tier-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06)
}

.tier-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
  flex: 1
}

.tier-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4
}

.tier-features li svg {
  flex-shrink: 0
}

.tier-cta {
  text-align: center;
  padding: 12px 20px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.25s ease;
  margin-top: auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none
}

.tier-cta:hover {
  background: color-mix(in srgb, var(--accent, #fff) 12%, rgba(255, 255, 255, 0.04));
  border-color: color-mix(in srgb, var(--accent, #fff) 45%, rgba(255, 255, 255, 0.2));
  color: #fff
}

.tier-cta--primary {
  background: #3B82F6;
  border-color: #3B82F6;
  color: #fff
}

.tier-cta--primary:hover {
  background: #2563EB;
  border-color: #2563EB;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3)
}

/* ===== SECTION 8 — CTA BAND ===== */
.cta-band {
  border-top: 1px solid rgba(255, 255, 255, 0.05)
}

.cta-band-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  position: relative
}

.cta-band-glow {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 450px;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.09) 0%, rgba(59, 130, 246, 0.02) 40%, transparent 65%);
  pointer-events: none
}

/* ===== SECTION 9 — FOOTER (rebuilt) ===== */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  margin-bottom: 48px
}

.footer-cols {
  display: flex;
  gap: 64px
}

.footer-bottom a {
  display: inline;
  padding: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5)
}

.footer-bottom a:hover {
  color: rgba(255, 255, 255, 0.85)
}

.footer-tagline {
  font-size: 13px;
  font-weight: 600;
  /* exact headline gradient + order: blue -> mauve -> orange */
  background: linear-gradient(90deg, #3B82F6, #A78BFA, #FB923C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.footer-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px
}

.footer-cr {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap
}

.footer-legal a {
  display: inline;
  padding: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap
}

.footer-legal a:hover {
  color: rgba(255, 255, 255, 0.85)
}

/* ===== RESPONSIVE — NEW SECTIONS ===== */
@media (max-width: 1024px) {
  .section--lg {
    padding: 56px 0
  }

  .tier-grid {
    gap: 16px
  }

  .footer-cols {
    gap: 40px
  }
}

@media (max-width: 768px) {
  .section--lg {
    padding: 48px 0
  }

  /* Capability grid → single column */
  .cap-grid {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .cap-card {
    padding: 24px
  }

  .cap-card--featured::before {
    display: none
  }

  .cap-icon {
    width: 42px;
    height: 42px
  }

  .cap-card h3 {
    font-size: 16px
  }

  /* Steps → stacked */
  .hiw-steps {
    flex-direction: column;
    align-items: center;
    gap: 4px
  }

  .hiw-step {
    padding: 20px 16px;
    max-width: 100%
  }

  .hiw-connector {
    padding-top: 0;
    transform: rotate(90deg)
  }

  .hiw-num {
    font-size: 12px;
    margin-bottom: 18px
  }

  /* Pricing → single column */
  .tier-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 100%
  }

  .tier-card {
    padding: 24px 20px
  }

  .tier-amount {
    font-size: 30px
  }

  /* Footer → stacked */
  .footer-top {
    flex-direction: column;
    gap: 32px
  }

  .footer-cols {
    gap: 32px
  }
}

@media (max-width: 480px) {
  .section--lg {
    padding: 40px 0
  }

  .footer-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
  }

  .footer-cols > div:last-child {
    grid-column: 1 / -1
  }

  .cap-card {
    padding: 20px
  }

  .cap-card h3 {
    font-size: 15px
  }

  .cap-card p {
    font-size: 13px
  }

  .hiw-step h3 {
    font-size: 15px
  }

  .hiw-step p {
    font-size: 13px
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none
  }

  .cap-card,
  .tier-card,
  .hiw-step,
  .faq-item,
  .faq-q svg {
    transition: none
  }

  .cap-card:hover,
  .tier-card:hover {
    transform: none
  }

  .faq-a {
    transition: none
  }

  .cta-band-glow {
    display: none
  }
}

/* ===== CAREERS PAGE — CLOSED STATE ===== */

/* Badge — red/amber "Applications Closed" */
.badge-closed {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.06) 100%) !important;
  color: #F87171 !important;
}

.badge-dot-closed {
  background: #EF4444 !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.8) !important;
  animation: badgePulseClosed 2s ease-in-out infinite !important;
}

@keyframes badgePulseClosed {
  0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.6) }
  50% { box-shadow: 0 0 18px rgba(239, 68, 68, 1) }
}

/* Disabled button — grayed out, no hover */
.btn-disabled {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
}

/* Closed role cards — slightly dimmed */
.role-card-closed {
  opacity: 0.7;
  position: relative;
}

.role-card-closed::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(10, 10, 10, 0.15);
  pointer-events: none;
}

/* Closed tag — red tint */
.role-tag-closed {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #F87171 !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

/* Challenge card — closed state */
.challenge-card-closed {
  opacity: 0.7;
}