body.drumze-landing {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', sans-serif;
  background: #000000;
  color: #e6e6e6;
  text-align: center;
}

.hero {
  padding: 4em 1em;
  background: #000000;
}

/* Image logo (keep if you want to use the PNG/SVG) */
.drumze-logo {
  width: 420px;
  max-width: 100%;
  height: auto;
  margin-bottom: 1em;
  animation: pulse 3s ease-in-out infinite;
}

/* Pulse animation (used by both image logo and text logo) */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

/* Default h1 (non-logo headings) */
h1 {
  font-size: 2.5em;
  margin-bottom: 0.2em;
  color: #61dafb;
}

/* TEXT LOGO — use <h1 class="brand-logo">DRUMZE</h1> */
.brand-logo{
  --a1:#61dafb;                 /* cyan accent you’re using */
  --a2:#00b7ff;
  --glow:rgba(97,218,251,.18);

  font-family: 'Segoe UI', Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: .9;
  display:inline-block;
  margin: 0 0 .25em;

  /* responsive size */
  font-size: clamp(3rem, 9vw, 8rem);

  /* gradient ink + subtle stroke for logo feel */
  color: transparent;
  background:
    radial-gradient(120% 100% at 50% 120%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, var(--a1), var(--a2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px rgba(255,255,255,.15);

  /* glow + pulse */
  text-shadow:
    0 0 12px var(--glow),
    0 0 28px rgba(0,180,255,.10);
  animation: pulse 3s ease-in-out infinite;
}

/* underline accent for the wordmark */
.brand-logo::after{
  content:"";
  display:block;
  width:64%;
  height:4px;
  margin:.28em auto 0;
  background: linear-gradient(90deg, transparent, var(--a1), transparent);
  opacity:.85;
  filter: blur(.3px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .drumze-logo,
  .brand-logo{ animation: none; }
}

.tagline {
  margin-top: .3em;
  font-weight: 600;
  font-size: 2em;
  letter-spacing: .02em;
}

.value-prop {
  max-width: 600px;
  margin: .6em auto 0;
  color: #bbb;
  font-size: 1.05em;
  line-height: 1.45;
}

@media (max-width: 600px) {
  .value-prop { font-size: 1em; max-width: 44ch; }
}

.cta-btn {
  display: inline-block;
  padding: 0.8em 2em;
  background: #61dafb;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: background 0.3s;
}

.cta-btn:hover {
  background: #33aacc;
}

.footer {
  margin-top: 4em;
  font-size: 0.9em;
  color: #777;
}