/* PulseRec: the recording studio. Graphite surfaces, one warm amber-to-rose
   accent — the same gradient as the app icon — ink colours and a live meter. */
.app-pulserec {
  --bg: #0B0C10; --bg2: #14161B; --surface: #171A21; --line: #262A33;
  --text: #F2F3F5; --muted: #8E939E; --accent: #FF4A5E; --accent-ink: #FFFFFF; --accent2: #FF8A4C;
  --font-head: "Manrope", system-ui, sans-serif; --font-body: "Manrope", system-ui, sans-serif;
  --radius: 22px; --shadow: 0 24px 60px rgba(0, 0, 0, .5);
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(232, 35, 111, .08), transparent 60%),
    radial-gradient(800px 460px at -10% 30%, rgba(255, 138, 76, .06), transparent 60%),
    linear-gradient(180deg, #101218, #0B0C10 55%);
}
.app-pulserec .topbar { background: rgba(11, 12, 16, .74); }
.app-pulserec .hero h1 { font-weight: 800; }
.app-pulserec .tagline { background: linear-gradient(90deg, #FF8A4C, #FF4A5E 60%, #E8236F); -webkit-background-clip: text; background-clip: text; color: transparent; }
.app-pulserec .store-btn, .app-pulserec .home-pill {
  background: linear-gradient(180deg, #FF8A4C, #FF4A5E 55%, #E8236F);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 30px rgba(232, 35, 111, .32);
}
.app-pulserec .store-btn.soon { background: transparent; box-shadow: none; }
/* Cards carry a faint top light, like the app's raised panels. */
.app-pulserec .feature, .app-pulserec .faq, .app-pulserec .contact-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 42%), var(--surface);
}
/* The record ring: a gradient hoop around each feature icon. */
.app-pulserec .feature-icon {
  border-radius: 50%; border: 2px solid transparent; width: 52px;
  background: linear-gradient(180deg, #1C1F26, #14161B) padding-box,
    linear-gradient(135deg, #FF8A4C, #FF4A5E 55%, #E8236F) border-box;
  color: #FFC9D0;
}
.app-pulserec .feature:nth-child(3n+2) .feature-icon { color: #FFD9AE; }
.app-pulserec .feature:nth-child(3n) .feature-icon { color: #AFE8CB; }
/* Section marker: a little waveform. */
.app-pulserec .section-title::after {
  content: ""; display: block; width: 84px; height: 30px; margin-top: 14px;
  background-image: linear-gradient(180deg, #FF8A4C, #E8236F), linear-gradient(180deg, #FF8A4C, #E8236F),
    linear-gradient(180deg, #FF8A4C, #E8236F), linear-gradient(180deg, #FF8A4C, #E8236F),
    linear-gradient(180deg, #FF8A4C, #E8236F), linear-gradient(180deg, #FF8A4C, #E8236F),
    linear-gradient(180deg, #FF8A4C, #E8236F);
  background-size: 5px 8px, 5px 15px, 5px 24px, 5px 30px, 5px 19px, 5px 11px, 5px 7px;
  background-position: 0 bottom, 10px bottom, 20px bottom, 30px bottom, 40px bottom, 50px bottom, 60px bottom;
  background-repeat: no-repeat;
}
/* The promise panel is the whiteboard: dashed frame, marker under the title. */
.app-pulserec .promise { border: 1.5px dashed rgba(255, 255, 255, .2); background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 50%), var(--surface); }
.app-pulserec .promise h2 {
  width: fit-content; padding: 0 .1em;
  background: linear-gradient(180deg, transparent 60%, rgba(255, 74, 94, .3) 60% 92%, transparent 92%);
}
.app-pulserec .phone { background: linear-gradient(145deg, #2A2F3A, #101218); }
.app-pulserec .shots .phone { box-shadow: var(--shadow), 0 0 44px rgba(232, 35, 111, .07); }
/* A recorder chip sits on the hero phone, as if a take is live. */
.app-pulserec .hero-phone::after {
  content: "REC 00:12"; position: absolute; top: -16px; left: 26px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 .68rem/1 var(--font-head); letter-spacing: .12em;
  color: #F2F3F5; background: rgba(11, 12, 16, .92); border: 1px solid #262A33;
  padding: 7px 11px; border-radius: 999px; box-shadow: var(--shadow);
}
.app-pulserec .hero-phone::before {
  content: ""; position: absolute; top: -8px; left: 33px; z-index: 4;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px rgba(255, 74, 94, .9); animation: rec-blink 1.4s ease-in-out infinite;
}
@keyframes rec-blink { 50% { opacity: .25; box-shadow: 0 0 2px rgba(255, 74, 94, .4); } }
/* Hero motif: an audio meter rising from the floor, plus soft pulse rings. */
.app-pulserec .wave {
  position: absolute; bottom: -2px; width: 6px; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(255, 138, 76, .55), rgba(232, 35, 111, .25));
  transform-origin: bottom; animation: eq ease-in-out infinite;
}
.app-pulserec .w1 { left: 7%;  height: 130px; animation-duration: 1.15s; }
.app-pulserec .w2 { left: 12%; height: 88px;  animation-duration: .95s; animation-delay: -.4s; }
.app-pulserec .w3 { left: 17%; height: 168px; animation-duration: 1.3s;  animation-delay: -.8s; }
.app-pulserec .w4 { left: 22%; height: 110px; animation-duration: 1.05s; animation-delay: -.2s; }
.app-pulserec .w5 { left: 27%; height: 148px; animation-duration: 1.25s; animation-delay: -.6s; }
.app-pulserec .w6 { left: 32%; height: 70px;  animation-duration: .9s;   animation-delay: -.1s; }
.app-pulserec .w7 { left: 37%; height: 122px; animation-duration: 1.2s;  animation-delay: -.9s; }
@keyframes eq { 0%, 100% { transform: scaleY(.16); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
.app-pulserec .ring {
  position: absolute; right: 26%; top: 46%; width: 230px; height: 230px; margin: -115px;
  border-radius: 50%; border: 1.5px solid rgba(255, 74, 94, .16);
  animation: pulse-out 5s ease-out infinite;
}
.app-pulserec .r2 { animation-delay: -1.7s; border-color: rgba(255, 138, 76, .13); }
.app-pulserec .r3 { animation-delay: -3.4s; border-color: rgba(232, 35, 111, .13); }
@keyframes pulse-out { from { transform: scale(.35); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }