/* ============================================================
   HERO — interactive tilt hero + trust wall styles.
   Namespaced hero-c1-* so these never collide with style.css.
   (hero-c2-*/hero-c3-* rules below are unused leftovers from
   earlier concept exploration; harmless to keep, safe to prune.)
   ============================================================ */

.hero-concept-badge {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 999;
  background: var(--bg-card);
  border: 1px solid var(--green-dim);
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

/* shared two-column hero grid used by concepts 1 & 2 */
.hero-split { padding: 110px 0 60px; }
.hero-split .container { position: relative; z-index: 2; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  text-align: left;
}
.hero-grid h1 { text-align: left; }
.hero-grid .hero-sub { text-align: left; margin: 0 0 32px; }
.hero-grid .hero-note { text-align: left; }
.hero-grid .hero-btns { justify-content: flex-start; }
.hero-grid .hero-trust { justify-content: flex-start; }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-grid h1, .hero-grid .hero-sub, .hero-grid .hero-note { text-align: center; }
  .hero-grid .hero-btns, .hero-grid .hero-trust { justify-content: center; }
}

/* ────────────────────────────────────────────
   CONCEPT 1 — CSS 3D tilt showcase
   ──────────────────────────────────────────── */
.hero-c1-bricks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.hero-c1-stage {
  position: relative;
  height: 460px;
  perspective: 1600px;
}
.hero-c1-glow-orb {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 60% 45%, rgba(57,255,20,.16) 0%, transparent 60%);
  pointer-events: none;
}
.hero-c1-devices {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.hero-c1-laptop {
  position: absolute;
  left: 46%;
  top: 46%;
  width: 380px;
  transform: translate(-50%, -50%) translateZ(0);
  transform-style: preserve-3d;
}
.hero-c1-laptop-screen {
  background: #0c0e0c;
  border: 2px solid #1c241c;
  border-radius: 12px 12px 4px 4px;
  padding: 10px;
  box-shadow: 0 40px 80px rgba(0,0,0,.55), 0 0 60px rgba(57,255,20,.08);
}
.hero-c1-browser-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  padding: 0 2px;
}
.hero-c1-browser-bar span { width: 8px; height: 8px; border-radius: 50%; background: #2a332a; display: block; flex: none; }
.hero-c1-browser-url {
  margin-left: 8px;
  flex: 1;
  background: #14181a;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 10px;
  color: #6b7a6b;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-c1-site-mock {
  position: relative;
  background: #06080a;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.hero-c1-site-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-c1-site-video.is-active { opacity: 1; }
.hero-c1-laptop-base {
  width: 112%;
  margin-left: -6%;
  height: 12px;
  background: linear-gradient(180deg, #1c241c, #0a0c0a);
  border-radius: 0 0 8px 8px;
  transform-origin: top center;
  transform: translateZ(-6px) rotateX(-62deg);
  box-shadow: 0 24px 34px rgba(0,0,0,.45);
}
.hero-c1-phone {
  position: absolute;
  right: 4%;
  bottom: 2%;
  width: 142px;
  height: 288px;
  background: #0a0c0a;
  border: 3px solid #1c241c;
  border-radius: 26px;
  padding: 8px;
  transform: translateZ(90px) rotateZ(-5deg);
  box-shadow: 0 36px 60px rgba(0,0,0,.6);
}
.hero-c1-phone-notch {
  width: 46px; height: 5px;
  background: #1c241c;
  border-radius: 3px;
  margin: 0 auto 10px;
}
.hero-c1-phone-screen {
  background: #06080a;
  border-radius: 18px;
  height: calc(100% - 20px);
  padding: 14px 10px;
}
.hero-c1-notification {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(57,255,20,.07);
  border: 1px solid rgba(57,255,20,.25);
  border-radius: 10px;
  padding: 10px;
  animation: c1NotifyIn .7s ease .6s both, c1NotifyPulse 3.2s ease 2s infinite;
}
.hero-c1-notification-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-top: 4px; flex: none; box-shadow: 0 0 10px var(--green); }
.hero-c1-notification-title { font-size: 11px; font-weight: 700; color: var(--text); }
.hero-c1-notification-sub { font-size: 9.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
@keyframes c1NotifyIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes c1NotifyPulse { 0%,100% { box-shadow: 0 0 0 rgba(57,255,20,0); } 50% { box-shadow: 0 0 24px rgba(57,255,20,.18); } }
@media (max-width: 960px) {
  .hero-c1-stage { height: 360px; margin-top: 20px; }
  .hero-c1-laptop { width: 290px; }
  .hero-c1-phone { width: 108px; height: 220px; }
}
@media (max-width: 640px) {
  .hero-split { padding: 88px 0 28px; }
  .hero-grid { gap: 14px; }
  .hero-grid h1 { font-size: 30px; line-height: 1.12; letter-spacing: -1px; margin-bottom: 10px; }
  .hero-grid .hero-sub { display: none; }
  .hero-grid .hero-btns { margin-bottom: 0; }
  .hero-grid .hero-note { font-size: 10.5px; margin-top: 10px; }
  .hero-grid .hero-trust { margin-top: 16px; }
  .hero-c1-stage { height: 210px; margin-top: 2px; }
  .hero-c1-glow-orb { inset: -10%; }
  .hero-c1-laptop { width: 175px; left: 42%; }
  .hero-c1-laptop-screen { padding: 6px; border-radius: 9px 9px 3px 3px; }
  .hero-c1-browser-bar { margin-bottom: 5px; }
  .hero-c1-browser-bar span { width: 5px; height: 5px; }
  .hero-c1-browser-url { font-size: 7px; padding: 2px 6px; margin-left: 4px; }
  .hero-c1-phone { width: 62px; height: 126px; right: 0; bottom: 0; padding: 5px; border-radius: 16px; }
  .hero-c1-phone-notch { width: 22px; height: 3px; margin-bottom: 5px; }
  .hero-c1-notification { padding: 6px; gap: 5px; border-radius: 7px; }
  .hero-c1-notification-dot { width: 5px; height: 5px; }
  .hero-c1-notification-title { font-size: 7px; }
  .hero-c1-notification-sub { font-size: 6px; }
}

/* ────────────────────────────────────────────
   CONCEPT 2 — WebGL floating devices (Three.js)
   ──────────────────────────────────────────── */
.hero-c2-stage {
  position: relative;
  height: 460px;
}
.hero-c2-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-c2-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 960px) { .hero-c2-stage { height: 320px; margin-top: 20px; } }

/* ────────────────────────────────────────────
   CONCEPT 3 — orbiting constellation (CSS parallax bento)
   ──────────────────────────────────────────── */
.hero-c3-stage {
  position: relative;
  height: 500px;
  perspective: 1400px;
}
.hero-c3-cluster {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.hero-c3-card {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  will-change: transform;
  transition: transform .08s linear;
  opacity: 0;
  animation: c3FlyIn .8s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes c3FlyIn { from { opacity: 0; transform: translate3d(0,40px,0) scale(.9); } to { opacity: 1; } }
.hero-c3-laptop {
  left: 6%; top: 18%; width: 300px;
  padding: 10px;
  animation-delay: .05s;
  border-color: var(--green-dim);
  box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 0 50px rgba(57,255,20,.07);
}
.hero-c3-phone {
  left: 58%; top: 6%; width: 108px; height: 220px;
  padding: 8px;
  animation-delay: .18s;
  border-color: var(--green-dim);
}
.hero-c3-chip {
  padding: 14px 16px;
  min-width: 120px;
}
.hero-c3-chip--leads { left: 2%; top: 68%; animation-delay: .3s; }
.hero-c3-chip--review { left: 60%; top: 62%; animation-delay: .42s; border-color: rgba(167,139,250,.4); }
.hero-c3-chip--rank { left: 78%; top: 32%; animation-delay: .54s; border-color: rgba(34,211,238,.4); }
.hero-c3-chip-num { font-size: 22px; font-weight: 800; color: var(--green); letter-spacing: -.5px; }
.hero-c3-chip-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.hero-c3-chip--review { font-size: 13px; color: var(--violet); display: flex; align-items: center; gap: 8px; }
.hero-c3-chip--review span { font-size: 15px; font-weight: 800; color: var(--text); }
.hero-c3-chip--rank { display: flex; align-items: center; gap: 10px; }
.hero-c3-chip--rank div:first-child { font-size: 22px; font-weight: 800; color: var(--cyan); }

.hero-c3-browser-bar { display: flex; gap: 5px; margin-bottom: 8px; padding-left: 2px; }
.hero-c3-browser-bar span { width: 7px; height: 7px; border-radius: 50%; background: #2a332a; display: block; }
.hero-c3-site-mock { background: #06080a; border-radius: 6px; padding: 14px 12px; min-height: 140px; }
.hero-c3-site-head { width: 70px; height: 8px; background: var(--green); border-radius: 3px; margin-bottom: 10px; }
.hero-c3-site-line { height: 5px; background: rgba(255,255,255,.14); border-radius: 3px; margin-bottom: 7px; }
.hero-c3-site-line.w1 { width: 90%; }
.hero-c3-site-line.w2 { width: 60%; margin-bottom: 14px; }
.hero-c3-site-cta { width: 60px; height: 16px; background: var(--green); border-radius: 4px; }

.hero-c3-phone-notch { width: 36px; height: 4px; background: #1c241c; border-radius: 3px; margin: 0 auto 8px; }
.hero-c3-phone-screen { background: #06080a; border-radius: 16px; height: calc(100% - 16px); padding: 12px 8px; }
.hero-c3-notification { display: flex; gap: 8px; align-items: flex-start; background: rgba(57,255,20,.07); border: 1px solid rgba(57,255,20,.25); border-radius: 9px; padding: 8px; }
.hero-c3-notification-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-top: 3px; flex: none; }
.hero-c3-notification-title { font-size: 10px; font-weight: 700; color: var(--text); }
.hero-c3-notification-sub { font-size: 8.5px; color: var(--muted); margin-top: 2px; line-height: 1.3; }

@media (max-width: 960px) {
  .hero-c3-stage { height: 560px; margin-top: 10px; }
  .hero-c3-laptop { left: 50%; top: 2%; transform: translateX(-50%) !important; }
  .hero-c3-phone { left: 58%; top: 38%; }
  .hero-c3-chip--leads { left: 4%; top: 58%; }
  .hero-c3-chip--review { left: 46%; top: 66%; }
  .hero-c3-chip--rank { left: 10%; top: 78%; }
}

/* ────────────────────────────────────────────
   TRUST WALL — single horizontal logo marquee
   ──────────────────────────────────────────── */
.trustwall { padding: 48px 0 64px; background: var(--bg); overflow: hidden; position: relative; }
.trustwall-label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 30px;
}
.trustwall-row {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.trustwall-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: trustSlide 36s linear infinite;
  will-change: transform;
}
@keyframes trustSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.trustwall-row:hover .trustwall-track { animation-play-state: paused; }
.trustwall-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 88px;
}
.trustwall-chip img {
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.trustwall-chip--mono img { filter: brightness(0) invert(1); opacity: .88; }
@media (prefers-reduced-motion: reduce) {
  .trustwall-track { animation: none !important; }
}
@media (max-width: 860px) {
  .trustwall-track { gap: 44px; }
  .trustwall-chip { height: 64px; }
  .trustwall-chip img { max-height: 56px; }
}