/* ============================================================
   Hero Section Styles
   ============================================================ */

.hero {
  position: relative;
  padding: 180px 0 140px;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(255, 106, 26, 0.16) 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 50% 100%, rgba(255, 106, 26, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 55% 40% at 50% 62%, rgba(255, 106, 26, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 30% 20% at 50% 28%, rgba(255, 120, 30, 0.08) 0%, transparent 70%);
}

/* Wormhole/Portal Grid Effect */
.hero-grid-lines {
  position: absolute;
  inset: 0;
  perspective: 800px;
  pointer-events: none;
}

.hero-grid-lines::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(0deg, rgba(255, 106, 26, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 106, 26, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: 0 0, 0 0;
  animation: grid-flow 8s linear infinite;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 0%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 0%, transparent 60%);
}

.hero-grid-lines::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(0deg, rgba(255, 106, 26, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 106, 26, 0.02) 1px, transparent 1px);
  background-size: 160px 160px;
  background-position: 0 0, 0 0;
  animation: grid-flow-reverse 12s linear infinite;
}

@keyframes grid-flow {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 80px 80px, 80px 80px; }
}

@keyframes grid-flow-reverse {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: -160px -160px, -160px -160px; }
}


.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.5rem;
  z-index: 1;
  max-width: 900px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.2rem;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.13) 0%, rgba(255, 106, 26, 0.06) 100%);
  border: 1px solid rgba(255, 106, 26, 0.35);
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--orange-accent);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 22px rgba(255, 106, 26, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-shadow: 0 0 12px rgba(255, 106, 26, 0.40);
}
.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

.hero h1 { 
  max-width: 900px; 
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  line-height: 1.1; 
  margin: 0;
  color: var(--text-primary);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.hero h1 em {
  font-style: normal;
  color: var(--orange);
  font-weight: 900;
  text-shadow: 0 0 40px rgba(255, 106, 26, 0.42), 0 0 80px rgba(255, 106, 26, 0.14);
}

.hero-sub {
  max-width: 680px;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
  position: relative;
}

.hero-actions::before {
  content: '';
  position: absolute;
  inset: -24px -60px;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(255, 106, 26, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.hero-actions .btn {
  padding: 1rem 2.2rem;
  font-size: 1rem;
  font-weight: 700;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-top: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 106, 26, 0.15);
  flex-wrap: wrap;
  justify-content: center;
}
.hero-stat-item { text-align: center; }
.hero-stat-num {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--white);
  display: block;
  letter-spacing: -0.02em;
}
.hero-stat-label {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Hero Preview Card */
.hero-preview {
  width: 100%;
  max-width: 920px;
  margin-top: 4rem;
  background: var(--bg-card);
  border: 1px solid rgba(255, 106, 26, 0.30);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 60px 120px rgba(0, 0, 0, 0.90),
    0 0 60px rgba(255, 106, 26, 0.20),
    0 0 120px rgba(255, 106, 26, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(255, 106, 26, 0.06);
  position: relative;
}

.hero-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,106,26,0.05) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.hero-preview-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.2rem;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255, 106, 26, 0.15);
  backdrop-filter: blur(10px);
}
.hero-preview-dot { width: 12px; height: 12px; border-radius: 50%; }
.hero-preview-dot:nth-child(1) { background: #ff5f57; }
.hero-preview-dot:nth-child(2) { background: #febc2e; }
.hero-preview-dot:nth-child(3) { background: #28c840; }

.hero-preview-url {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  opacity: 0.7;
}

.hero-preview-screen {
  aspect-ratio: 16/9;
  background: linear-gradient(160deg, #0C1118 0%, #0A0E18 45%, #080C14 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.preview-desktop {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.preview-taskbar {
  height: 32px;
  background: rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255, 106, 26, 0.1);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 0.75rem;
}
.preview-taskbar-icon {
  width: 16px; height: 16px; border-radius: 3px;
  background: rgba(255, 106, 26, 0.15);
  border: 1px solid rgba(255, 106, 26, 0.25);
}
.preview-taskbar-time {
  margin-left: auto;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
}
.preview-body {
  flex: 1;
  display: flex;
  gap: 0.6rem;
  padding: 0.75rem;
}
.preview-window {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255, 106, 26, 0.15);
  border-radius: 8px;
  padding: 0.75rem;
}
.preview-win-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.preview-win-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff5f57;
}
.preview-win-lines { display: flex; flex-direction: column; gap: 0.3rem; }
.preview-win-line {
  height: 4px;
  background: linear-gradient(90deg, rgba(255, 106, 26, 0.28) 0%, rgba(255, 106, 26, 0.10) 100%);
  border-radius: 2px;
}
.preview-win-line.short { width: 70%; }
.preview-win-line.shorter { width: 45%; }

.preview-overlay {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--white);
  background: linear-gradient(135deg, rgba(8, 9, 14, 0.88) 0%, rgba(5, 6, 10, 0.92) 100%);
  padding: 0.7rem 1rem;
  border: 1px solid rgba(255, 106, 26, 0.35);
  border-radius: 8px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
  font-weight: 600;
}
.preview-fps, .preview-ping, .preview-bw { 
  display: block;
  color: var(--orange);
}

.preview-scanning {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 106, 26, 0.25), transparent);
  animation: scan 4s infinite;
  pointer-events: none;
}

@keyframes scan {
  0%, 100% { opacity: 0; transform: translateX(-100%); }
  45%, 55% { opacity: 0.8; }
}

/* Trust Bar */
.trust-bar {
  background-color: var(--bg-card);
  background-image: linear-gradient(180deg, rgba(255, 106, 26, 0.04) 0%, transparent 100%);
  border-top: 1px solid rgba(255, 106, 26, 0.12);
  border-bottom: 1px solid var(--border-dim);
  padding: 2rem 0;
}

.trust-bar-inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
  white-space: nowrap;
}

.trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--orange);
  flex-shrink: 0;
}

/* Hero Proof Strip */
.hero-proof-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: 1.5rem 1.5rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 106, 26, 0.20);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.proof-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.proof-item svg {
  width: 16px;
  height: 16px;
  color: var(--orange);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .hero-proof-strip {
    gap: 1rem;
    padding: 1rem;
  }

  .proof-item {
    font-size: 0.85rem;
    flex-shrink: 0;
  }
}

/* ── Perspective Floor Grid ─────────────────────────────────── */
.hero-floor-grid {
  position: absolute;
  bottom: 0;
  left: -60%;
  width: 220%;
  height: 55%;
  transform-origin: center bottom;
  transform: perspective(600px) rotateX(55deg);
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 106, 26, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 106, 26, 0.16) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, transparent 75%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, transparent 75%);
  animation: floor-scroll 5s linear infinite;
}

@keyframes floor-scroll {
  from { background-position: center 0; }
  to   { background-position: center 80px; }
}

/* ── CSS Particle Field (stars) ─────────────────────────────── */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.hero-particles::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  background: transparent;
  border-radius: 50%;
  box-shadow:
    18px 45px rgba(255,255,255,0.7),   102px 380px rgba(255,255,255,0.5),
    237px 120px rgba(255,255,255,0.8),  314px 560px rgba(255,255,255,0.4),
    456px 80px rgba(255,255,255,0.6),   523px 420px rgba(255,255,255,0.7),
    687px 250px rgba(255,255,255,0.5),  745px 680px rgba(255,255,255,0.6),
    891px 140px rgba(255,255,255,0.8),  967px 490px rgba(255,255,255,0.4),
    1043px 330px rgba(255,255,255,0.6), 1128px 720px rgba(255,255,255,0.5),
    1234px 190px rgba(255,255,255,0.7), 1312px 570px rgba(255,255,255,0.5),
    1445px 90px rgba(255,255,255,0.6),  1523px 440px rgba(255,255,255,0.8),
    1678px 290px rgba(255,255,255,0.4), 1756px 620px rgba(255,255,255,0.6),
    1845px 160px rgba(255,255,255,0.5), 1912px 780px rgba(255,255,255,0.7),
    67px 720px rgba(255,255,255,0.4),   178px 820px rgba(255,255,255,0.6),
    289px 650px rgba(255,255,255,0.5),  389px 780px rgba(255,255,255,0.3),
    512px 860px rgba(255,255,255,0.4),  634px 740px rgba(255,255,255,0.6),
    756px 830px rgba(255,255,255,0.5),  867px 760px rgba(255,255,255,0.3),
    978px 850px rgba(255,255,255,0.4),  1089px 700px rgba(255,255,255,0.6),
    1189px 800px rgba(255,255,255,0.4), 1289px 870px rgba(255,255,255,0.5),
    1401px 710px rgba(255,255,255,0.3), 1512px 840px rgba(255,255,255,0.5),
    1623px 770px rgba(255,255,255,0.4), 1734px 820px rgba(255,255,255,0.6),
    145px 250px rgba(255,255,255,0.5),  823px 380px rgba(255,255,255,0.6),
    1356px 290px rgba(255,255,255,0.4), 1789px 470px rgba(255,255,255,0.5);
  animation: star-twinkle1 5s ease-in-out infinite alternate;
}

.hero-particles::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  background: transparent;
  border-radius: 50%;
  box-shadow:
    256px 180px rgba(255,106,26,0.5),  578px 340px rgba(255,106,26,0.4),
    834px 520px rgba(255,106,26,0.35), 1123px 230px rgba(255,106,26,0.5),
    1389px 460px rgba(255,106,26,0.4), 1645px 380px rgba(255,106,26,0.35),
    412px 620px rgba(255,106,26,0.3),  712px 730px rgba(255,106,26,0.4),
    1045px 680px rgba(255,106,26,0.35),1289px 740px rgba(255,106,26,0.3),
    1567px 690px rgba(255,106,26,0.4), 89px 540px rgba(255,106,26,0.3),
    1789px 560px rgba(255,106,26,0.35),456px 480px rgba(255,106,26,0.45),
    1234px 520px rgba(255,106,26,0.3);
  animation: star-twinkle2 7s ease-in-out infinite alternate;
  animation-delay: -3s;
}

@keyframes star-twinkle1 {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

@keyframes star-twinkle2 {
  from { opacity: 0.2; }
  to   { opacity: 0.8; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero {
    padding: 120px 0 80px;
  }

  .hero-preview {
    margin-top: 2.5rem;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 100px 0 60px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-preview {
    margin-top: 2rem;
  }
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-grid-lines::before,
  .hero-grid-lines::after,
  .hero-floor-grid,
  .hero-particles::before,
  .hero-particles::after,
  .hero-badge-dot,
  .preview-scanning {
    animation: none;
  }
}