:root{
  --bg: #071423;
  --card: rgba(255,255,255,0.06);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);
  --muted2: rgba(255,255,255,0.55);
  --border: rgba(255,255,255,0.12);

  /* Logo-matched accents */
  --teal: #2EC7C9;
  --orange: #FF7A00;

  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 22px;
}

*{ box-sizing:border-box; }
html, body { height:100%; background: var(--bg); } /* helps eliminate top seam */
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

/* Background glow layer (push it further out to avoid 1px seam) */
.bg{
  position:fixed;
  inset:-40vmax;              /* bigger than before */
  top:-60vmax;                /* force extra coverage up top */
  background:
    radial-gradient(45vmax 30vmax at 20% 15%, rgba(46,199,201,0.18), transparent 60%),
    radial-gradient(40vmax 30vmax at 80% 25%, rgba(255,122,0,0.16), transparent 60%),
    radial-gradient(60vmax 40vmax at 50% 90%, rgba(46,199,201,0.10), transparent 60%);
  filter: blur(18px);
  z-index:-2;
  pointer-events:none;
  transform: translateZ(0);   /* reduces rendering seams */
}

.wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 34px 18px 28px;
  min-height:100%;
  display:flex;
  flex-direction:column;
}

.hero{
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 26px 0 10px;
  gap: 10px;
}

/* RF waveform layer behind logo */
.waveWrap{
  position:absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  width: 100%;
  height: 340px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 0;            /* bring it forward */
  pointer-events:none;
  opacity: 1;            /* make it visible */
}

.wave{
  width:min(1100px, 96vw);
  height: 320px;
  filter:
    drop-shadow(0 0 18px rgba(46,199,201,0.22))
    drop-shadow(0 0 18px rgba(255,122,0,0.18));
}
/* Two strokes animate opposite-phase for “color pulsing” */
.wave .teal{
  stroke: var(--teal);
  opacity: 0.55;
  animation: wavePulseTeal 2.8s ease-in-out infinite;
}
.wave .orange{
  stroke: var(--orange);
  opacity: 0.35;
  animation: wavePulseOrange 2.8s ease-in-out infinite;
}

/* Optional subtle “travel” along the line */
.wave .travel{
  stroke-dasharray: 14 18;
  animation: waveTravel 2.2s linear infinite;
  opacity: 0.35;
}

@keyframes wavePulseTeal{
  0%,100% { opacity: 0.25; filter: drop-shadow(0 0 0 rgba(46,199,201,0)); }
  50%     { opacity: 0.75; filter: drop-shadow(0 0 18px rgba(46,199,201,0.25)); }
}
@keyframes wavePulseOrange{
  0%,100% { opacity: 0.15; filter: drop-shadow(0 0 0 rgba(255,122,0,0)); }
  50%     { opacity: 0.60; filter: drop-shadow(0 0 18px rgba(255,122,0,0.22)); }
}
@keyframes waveTravel{
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -64; }
}

/* HERO LOGO — prominent + animated glow */
.heroLogo{
position: relative; z-index: 2; 
 height: 230px;
  width: auto;
  margin: 6px 0 6px;
  filter:
    drop-shadow(0 0 22px rgba(46,199,201,0.22))
    drop-shadow(0 0 34px rgba(255,122,0,0.18))
    drop-shadow(0 14px 44px rgba(0,0,0,0.55));
  animation: logoGlow 3.2s ease-in-out infinite;
  transform: translateZ(0);
}

@keyframes logoGlow{
  0%,100%{
    filter:
      drop-shadow(0 0 18px rgba(46,199,201,0.18))
      drop-shadow(0 0 26px rgba(255,122,0,0.14))
      drop-shadow(0 14px 44px rgba(0,0,0,0.55));
    transform: scale(1.00);
  }
  50%{
    filter:
      drop-shadow(0 0 28px rgba(46,199,201,0.26))
      drop-shadow(0 0 44px rgba(255,122,0,0.22))
      drop-shadow(0 18px 52px rgba(0,0,0,0.60));
    transform: scale(1.012);
  }
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border: 1px solid rgba(46,199,201,0.45);
  background: rgba(46,199,201,0.08);
  color: rgba(255,255,255,0.88);
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 13px;
  margin-top: 6px;
}

.dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--orange));
  box-shadow: 0 0 0 6px rgba(46,199,201,0.10);
}

h1{
  margin: 10px 0 6px;
  font-size: clamp(30px, 3.5vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.lead{
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 74ch;
}

.ctaRow{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  justify-content:center;
  margin: 10px 0 10px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.92);
  text-decoration:none;
  font-weight: 600;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.20);}

.btn.primary{
  border-color: rgba(255,122,0,0.45);
  background: linear-gradient(180deg, rgba(255,122,0,0.20), rgba(255,122,0,0.06));
}

.tag{
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  padding: 8px 12px;
  border-radius: 999px;
}

.foot{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  gap: 12px;
  color: var(--muted2);
  font-size: 13px;
  padding: 18px 6px 0;
}
.small{ color: rgba(255,255,255,0.45); }

@media (max-width: 720px){
  .heroLogo{ height: 150px; }
  .waveWrap{ height: 200px; }
  .wave{ height: 190px; }
  .foot{ flex-direction:column; }
}