/* Humanize landing page — sky-cyan theme overlay */
:root {
  --hm-cyan: #38bdf8;
  --hm-cyan-2: #0284c7;
  --hm-cyan-light: #bae6fd;
  --hm-cyan-glow: rgba(56, 189, 248, 0.35);
}

.hm-page .pulse-dot.cyan { background: var(--hm-cyan); }
.hm-page .gold-eyebrow,
.hm-page .cyan-eyebrow {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.3);
  color: var(--hm-cyan);
}
.hm-page .strike-cyan {
  position: relative; display: inline-block; color: #647d9c;
}
.hm-page .strike-cyan::after {
  content: ""; position: absolute; left: -4%; right: -4%; top: 50%;
  height: 6px; background: var(--hm-cyan);
  transform-origin: left;
  transform: scaleX(0) rotate(-1.5deg);
  animation: strike 1.2s cubic-bezier(.6,.1,.3,1) 0.6s forwards;
  border-radius: 3px;
  box-shadow: 0 0 14px var(--hm-cyan-glow);
}
.hm-page .gradient-cyan {
  background: linear-gradient(135deg, var(--hm-cyan-light) 0%, var(--hm-cyan) 50%, var(--hm-cyan-2) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 5s ease-in-out infinite;
  display: inline-block;
}
.hm-page .cyan-btn,
.hm-page .btn-primary.cyan-btn {
  background: linear-gradient(135deg, var(--hm-cyan), var(--hm-cyan-2));
  color: #050d18;
  box-shadow: 0 6px 30px -8px var(--hm-cyan-glow);
}
.hm-page .cyan-btn:hover { box-shadow: 0 10px 40px -6px var(--hm-cyan-glow); }
.hm-page .glow.cyan-btn { animation: cta-pulse-cyan 2.2s ease-in-out infinite; }
@keyframes cta-pulse-cyan {
  0%, 100% { box-shadow: 0 6px 30px -8px var(--hm-cyan-glow); }
  50% { box-shadow: 0 6px 45px 0 var(--hm-cyan-glow); }
}
.hm-page .trust-num.cyan { color: var(--hm-cyan); }

/* Comparison demo */
.hm-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
  margin-top: 40px;
}
.hm-arrow {
  display: grid; place-items: center;
  font-size: 36px;
  color: var(--hm-cyan);
}
.hm-card-before, .hm-card-after {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  position: relative;
}
.hm-card-after { border-color: rgba(56, 189, 248, 0.4); }
.hm-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.hm-card-after .hm-card-label { color: var(--hm-cyan); }
.hm-card-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Voice levels grid */
.hm-levels-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 36px;
  max-width: 880px;
  margin-left: auto; margin-right: auto;
}
.hm-level-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.hm-level-card-pro { border-color: rgba(56,189,248,0.35); }
.hm-level-card-max { border-color: rgba(196,132,252,0.35); }
.hm-level-icon { font-size: 26px; flex-shrink: 0; }
.hm-level-info { flex: 1; }
.hm-level-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hm-level-tagline {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.hm-tier-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
}
.hm-tier-free {
  background: rgba(110,231,183,0.12);
  color: #6ee7b7;
}
.hm-tier-pro {
  background: rgba(56,189,248,0.15);
  color: var(--hm-cyan);
}
.hm-tier-max {
  background: rgba(196,132,252,0.15);
  color: #c084fc;
}

/* Pricing cards */
.hm-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.hm-tier-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 220ms;
}
.hm-tier-card:hover { transform: translateY(-4px); }
.hm-tier-featured {
  border-color: rgba(56,189,248,0.5);
  box-shadow: 0 20px 60px -20px rgba(56,189,248,0.25);
}
.hm-tier-max-card { border-color: rgba(196,132,252,0.4); }
.hm-tier-tag {
  position: absolute;
  top: -12px; right: 20px;
  background: linear-gradient(135deg, var(--hm-cyan), var(--hm-cyan-2));
  color: #050d18;
  font-size: 11px; font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
}
.hm-tier-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.hm-tier-price {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}
.hm-tier-price.cyan { color: var(--hm-cyan); }
.hm-tier-price.purple { color: #c084fc; }
.hm-tier-once { font-size: 12px; color: var(--muted); margin-bottom: 20px; }
.hm-tier-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.hm-tier-card li {
  font-size: 13.5px;
  padding-left: 22px;
  position: relative;
  color: var(--text);
  line-height: 1.5;
}
.hm-tier-card li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--hm-cyan);
  font-weight: 700;
}
.hm-tier-max-card li::before { color: #c084fc; }
.hm-btn-tier {
  display: block;
  text-align: center;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.hm-btn-tier-cyan {
  background: linear-gradient(135deg, var(--hm-cyan), var(--hm-cyan-2));
  color: #050d18;
}
.hm-btn-tier-purple {
  background: linear-gradient(135deg, #c084fc, #9333ea);
  color: #fff;
}
.hm-btn-tier-free {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}

/* Cyan tool card on hub */
.tool-card-cyan:hover {
  border-color: rgba(56,189,248,0.45) !important;
  box-shadow: 0 24px 56px -28px rgba(56,189,248,0.4) !important;
}
.tool-card-cyan .tool-tier { color: var(--hm-cyan); }
.tool-card-cyan .tool-arrow { color: var(--hm-cyan); }

@media (max-width: 860px) {
  .hm-pricing-grid { grid-template-columns: 1fr; }
  .hm-levels-grid { grid-template-columns: 1fr; }
  .hm-compare { grid-template-columns: 1fr; }
  .hm-arrow { transform: rotate(90deg); }
}