.section-wave-hero-banner {
  background: radial-gradient(1200px 800px at 10% 10%, rgb(30, 124, 212), transparent 55%),
              radial-gradient(900px 700px at 90% 30%, rgba(26, 194, 255, 0.807), transparent 60%),
              linear-gradient(160deg, var(--bg1), var(--bg2));
  color:var(--text);
  overflow-x:hidden;
  height: 100%;
}

@keyframes swirl{
  to{ transform: rotate(360deg); }
}

/* wave-hero */
.wave-hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-block:6rem;
  overflow:hidden;
  isolation:isolate;
}

/* Canvas waves layer */
#waveCanvas {
  position:absolute;
  inset:auto 0 0 0;
  height:55vh; /* ครึ่งล่าง */
  opacity:.9;
  filter: drop-shadow(0 6px 24px rgba(23,192,255,.2));
  pointer-events:none;
  z-index:0;
}

/* Floating network nodes (SVG) */
.network-layer{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:1;
}
.network-layer .node{
  fill:rgba(255,255,255,.8);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.35));
}
.network-layer .link{
  stroke:url(#gradLink);
  stroke-width:1.2;
  stroke-linecap:round;
  opacity:.75;
  filter: drop-shadow(0 0 10px rgba(23,192,255,.35));
}

/* Content */
.wave-hero .eyebrow{
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
}

.wave-hero h1{
  font-weight:700;
  line-height:1.5;
  text-shadow:0 2px 20px rgba(0,0,0,.25);
}

.wave-hero .lead{
  color:#c9dcff;
}

/* Glass chip badges */
.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
  border-radius:999px;
  font-size:.875rem;
  color:#e9f2ff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), var(--glow);
}
.chip i{
  width:.7rem; height:.7rem; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, #fff0 60%), var(--acc);
  box-shadow: 0 0 10px rgba(23,192,255,.6);
  display:inline-block;
}

/* CTA unlock-style */
.cta{
  position:relative; display:inline-flex; align-items:center; gap:1rem;
  padding:.85rem 1.2rem .85rem .85rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  color:#fff; text-decoration:none; font-weight:600;
  transition: background .35s ease, border-color .35s ease, transform .2s ease;
  overflow:hidden;
}
.cta:hover{ transform: translateY(-2px); background: rgba(23,192,255,.15); border-color: rgba(23,192,255,.35); }
.cta .knob{
  position:relative; width:40px; height:40px; border-radius:50%;
  background: radial-gradient(35% 35% at 30% 30%, #fff, #ffffffb0 60%, #ffffff8a 75%, #ffffff40 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,.25), 0 0 0 2px rgba(255,255,255,.25) inset;
  transform: translateX(0);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.cta:hover .knob{ transform: translateX(80px); }
.cta .pulse{
  position:absolute; inset:0; border-radius:999px;
  background: radial-gradient(closest-side, rgba(23,192,255,.35), transparent);
  opacity:.0; transform: scale(.4);
  transition: opacity .35s ease, transform .35s ease;
}
.cta:hover .pulse{ opacity:.45; transform: scale(1.2); }

.cta.secondary{
  background: rgba(127,90,240,.12);
  border-color: rgba(127,90,240,.35);
}
.cta.secondary:hover{
  background: rgba(127,90,240,.24);
}

/* Decorative rings */
.ring{
  position:absolute; border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 60px rgba(127,90,240,.18), inset 0 0 30px rgba(23,192,255,.08);
  animation: float 12s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
.ring.r1{ width:420px; height:420px; top:-120px; right:-60px; animation-delay:-3s; }
.ring.r2{ width:260px; height:260px; bottom:10%; left:-80px; animation-delay:-6s; }
.ring.r3{ width:520px; height:520px; bottom:-120px; right:10%; animation-delay:-9s;}

@keyframes float{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-12px) }
}

/* Responsive tweaks */
@media (max-width:991.98px){
  .cta:hover .knob{ transform: translateX(64px); }
  #waveCanvas{ height:45vh; }
}