/* React Bits ports — Remii theme (#FF5101 / ink / paper) */

.gradient-waves-host,
.hero-waves,
.lightfall-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: auto;
  /* CSS fallback — Remii ink + orange if WebGL fails */
  background:
    radial-gradient(ellipse 90% 60% at 50% 70%, rgba(255, 81, 1, 0.42) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 20% 40%, rgba(255, 120, 40, 0.18) 0%, transparent 50%),
    #0A0A0A;
}
.hero-waves canvas,
.lightfall-container canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
}

/* Staggered menu */
.sm-root {
  position: fixed;
  inset: 0;
  z-index: 220;
  pointer-events: none;
}
.sm-root[data-open] {
  pointer-events: auto;
}
.sm-toggle-fab {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 230;
  pointer-events: auto;
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  color: #ececee;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
body.nav-light .sm-toggle-fab {
  color: #0a0a0a;
}
.sm-toggle-fab .sm-x {
  position: relative;
  width: 14px;
  height: 14px;
}
.sm-toggle-fab .sm-x span {
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  background: currentColor;
}
.sm-toggle-fab .sm-x span:last-child {
  transform: rotate(90deg);
}
.sm-prelayers,
.sm-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100%;
  pointer-events: none;
}
.sm-prelayer {
  position: absolute;
  inset: 0;
  transform: translateX(100%);
}
.sm-panel {
  background: #f7f7f5;
  color: #0a0a0a;
  z-index: 2;
  transform: translateX(100%);
  pointer-events: auto;
  padding: 96px 32px 40px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sm-panel a {
  color: inherit;
  text-decoration: none;
}
.sm-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.sm-item {
  display: block;
  font-size: clamp(36px, 8vw, 56px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  text-transform: uppercase;
  padding-right: 1.2em;
  position: relative;
}
.sm-item:hover {
  color: #ff5101;
}
.sm-item::after {
  content: attr(data-n);
  position: absolute;
  right: 0;
  top: 0.15em;
  font-size: 14px;
  font-weight: 500;
  color: #ff5101;
}
.sm-socials {
  margin-top: auto;
  padding-top: 32px;
}
.sm-socials b {
  display: block;
  color: #ff5101;
  font-size: 13px;
  margin-bottom: 10px;
}
.sm-socials a {
  margin-right: 16px;
  font-weight: 600;
  font-size: 15px;
}
.sm-socials a:hover {
  color: #ff5101;
}
@media (max-width: 860px) {
  .sm-toggle-fab {
    display: inline-flex;
  }
  .nav-toggle {
    display: none !important;
  }
}

/* Electric border — Growth / bestseller */
.electric-border {
  --electric-border-color: #ff5101;
  position: relative;
  border-radius: 8px;
  isolation: isolate;
}
.eb-canvas-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}
.eb-canvas {
  display: block;
}
.eb-content {
  position: relative;
  z-index: 1;
  border-radius: inherit;
}
.eb-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--electric-border-color) 55%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--electric-border-color) 28%, transparent);
  z-index: 0;
}
/* Most popular — in flow above the plan name (never absolute/overlap) */
.tier-badge {
  display: inline-block;
  position: static;
  margin: 0 0 10px;
  background: #ff5101;
  color: #0a0a0a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 2px;
  line-height: 1.2;
}
.tier.hot {
  position: relative;
  overflow: visible;
  border-color: rgba(255, 81, 1, 0.55);
  background: #fff;
  box-shadow: 0 18px 50px rgba(255, 81, 1, 0.1);
}
.tier.hot .btn {
  background: #ff5101;
  color: #0a0a0a;
}

/* Star border — Book a call only (quiet; no giant blobs on plan cards) */
.star-border {
  display: inline-block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  padding: 1px;
  background: linear-gradient(135deg, #ff5101 0%, #26272d 55%, #ff5101 100%);
}
.star-border .sb-bot,
.star-border .sb-top {
  display: none;
}
.star-border .sb-inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 9px;
  border: 0;
  background: #0a0a0a;
  color: #ececee;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.star-border .sb-inner:hover {
  color: #ff5101;
}

/* Masked heading */
.masked-heading {
  position: relative;
  width: 100%;
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-wrap: balance;
}
.masked-heading__measure {
  color: transparent;
}
.masked-heading__word {
  display: inline-block;
  white-space: pre;
}
.masked-heading__word:not(:last-child)::after {
  content: " ";
}
.masked-heading__baseline {
  display: inline-block;
  width: 0;
  height: 0;
}
.masked-heading__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.masked-heading__reveal {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.masked-heading__clip {
  position: absolute;
  inset: 0;
}
.masked-heading__media {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.masked-heading__source {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}