body { margin:0; font-family: 'Segoe UI', Arial, sans-serif; background: #181828; color: #f5f5f5; }
.fa, .fab, .fas { vertical-align: middle; }
/* Colorful icon styles */
.icon-color-apple { color: #fff; background: linear-gradient(135deg,#b89fff,#6c47e1); border-radius: 50%; padding: 0.3em; }
.icon-color-google { color: #34a853; }
.icon-color-waitlist { color: #b89fff; }
.icon-microphone { color: #ffb300; }
.icon-ear { color: #00bcd4; }
.icon-wind { color: #bdbdbd; }
.icon-user-secret { color: #8f6fff; }
.icon-ban { color: #ff5252; }
.icon-volume-up { color: #6c47e1; }
.icon-envelope-open { color: #00e676; }
.icon-envelope { color: #b89fff; }
.icon-paper-plane { color: #ffb300; }
.icon-user-shield { color: #6c47e1; }
.icon-tiktok { color: #25f4ee; }
.icon-instagram { color: #e1306c; }
.icon-twitter { color: #1da1f2; }
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 1.1s cubic-bezier(.4,0,.2,1), transform 1.1s cubic-bezier(.4,0,.2,1); }
.fade-in.visible { opacity: 1; transform: none; }

/* Responsive Navigation Menu Styles */
.main-nav { width: 100%; background: #23234a; box-shadow: 0 2px 12px #0002; position: sticky; top: 0; z-index: 999; }
.main-nav ul { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; list-style: none; }
.main-nav li { margin: 0 0.7em; }
.main-nav a { display: block; color: #b89fff; padding: 1em 1.2em; text-decoration: none; font-size: 1.1em; border-radius: 6px; transition: background 0.2s, color 0.2s; }
.main-nav a.active, .main-nav a:hover { background: #6c47e1; color: #fff; }

/* Hamburger Icon for Mobile */
.main-nav .nav-toggle { display: none; background: none; border: none; color: #b89fff; font-size: 2em; padding: 0.6em 1em; cursor: pointer; }

@media (max-width: 900px) {
  .main-nav ul { justify-content: flex-end; }
}

@media (max-width: 700px) {
  .main-nav ul { flex-direction: column; align-items: flex-start; background: #23234a; position: absolute; left: 0; top: 64px; right: 0; display: none; }
  .main-nav ul.open { display: flex; }
  .main-nav li { margin: 0; width: 100%; }
  .main-nav a { width: 100%; padding: 1.2em 1.5em; }
  .main-nav .nav-toggle { display: block; position: absolute; right: 0.5em; top: 0.3em; z-index: 1001; }
}

.hero { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background: linear-gradient(135deg,#181828 70%,#2e2e48 100%); position:relative; overflow:hidden; }
.hero-logo {
    width: 220px;
    max-width: 70vw;
    margin-bottom: 2em;
    border-radius: 28%;
    box-shadow: 0 4px 48px #6c47e199, 0 1px 8px #0008;
    background: rgba(30,30,60,0.4);
    display: block;
    animation: whisperLogo 3.8s ease-in-out infinite alternate;
    filter: blur(0.8px);
}
@keyframes whisperLogo {
    0% {
        transform: translateX(0px) scale(1);
        opacity: 0.88;
        filter: blur(1.2px);
    }
    18% {
        transform: translateX(-10px) scale(1.01);
        opacity: 0.96;
        filter: blur(0.5px);
    }
    35% {
        transform: translateX(10px) scale(1.04);
        opacity: 1;
        filter: blur(0.2px);
    }
    52% {
        transform: translateX(-8px) scale(1.01);
        opacity: 0.92;
        filter: blur(0.7px);
    }
    70% {
        transform: translateX(8px) scale(1.03);
        opacity: 0.98;
        filter: blur(0.3px);
    }
    100% {
        transform: translateX(0px) scale(1);
        opacity: 0.87;
        filter: blur(1px);
    }
}
.hero .waves { position:absolute; left:0; right:0; bottom:0; height:80px; background: url('/og-image.jpg') center/cover no-repeat; opacity:0.25;
    animation: waveMove 6s linear infinite alternate; }
@keyframes waveMove {
    from { background-position-x: 0; }
    to { background-position-x: 120px; }
}
.hero h1 { font-size:2.8rem; margin-bottom:0.5em; color:#b89fff; text-shadow:0 2px 16px #0006; text-align:center; }
.hero h2 { font-size:1.2rem; font-weight:400; margin-bottom:2em; color:#eee; text-align:center; }
.hero .cta { display:flex; gap:1em; flex-wrap:wrap; justify-content:center; width:100%; }
.hero .cta button, .hero .cta a { background:#6c47e1; color:#fff; border:none; border-radius:8px; padding:1em 1.8em; font-size:1rem; cursor:pointer; text-decoration:none; transition:background 0.2s, transform 0.2s; }
.hero .cta button:hover, .hero .cta a:hover { background:#8f6fff; transform:scale(1.07); }
.section { max-width:900px; margin:0 auto; padding:60px 20px 40px 20px; }
.section-title { font-size:2rem; color:#b89fff; margin-bottom:0.5em; text-align:center; }
.how-it-works { display:flex; gap:1.5em; justify-content:space-between; flex-wrap:wrap; }
.how-step { flex:1 1 220px; background:#23234a; border-radius:14px; padding:2em 1em; margin:0.5em 0; text-align:center; box-shadow:0 2px 12px #0002; transition: box-shadow 0.3s; }
.how-step:hover { box-shadow:0 4px 32px #6c47e144; }
.how-step .icon { font-size:2.5rem; margin-bottom:0.7em; }
.why-list { list-style:none; padding:0; margin:1.5em 0 0 0; display:flex; flex-wrap:wrap; gap:1em; justify-content:center; }
.why-list li { background:#23234a; border-radius:8px; padding:0.7em 1.2em; display:flex; align-items:center; gap:0.7em; transition:background 0.2s; }
.why-list li:hover { background:#6c47e1; color:#fff; }
.screenshots { display:flex; gap:2em; justify-content:center; flex-wrap:wrap; margin-top:2em; }
.screenshots img { width:180px; height:360px; object-fit:cover; border-radius:18px; background:#222; box-shadow:0 0 24px #0004; transition:transform 0.4s cubic-bezier(.4,0,.2,1), box-shadow 0.3s; }
.screenshots img:hover { transform:scale(1.07) rotate(-2deg); box-shadow:0 0 48px #8f6fff88; }
.waitlist-form { display:flex; flex-direction:column; align-items:center; gap:1em; margin-top:1.5em; }
.waitlist-form input[type=email] { padding:0.9em 1.2em; border-radius:8px; border:none; width:260px; font-size:1em; transition:box-shadow 0.2s; }
.waitlist-form input[type=email]:focus { box-shadow:0 0 0 2px #b89fff; outline:none; }
.waitlist-form button { padding:0.9em 1.8em; border-radius:8px; background:#6c47e1; color:#fff; border:none; font-size:1em; cursor:pointer; transition:background 0.2s, transform 0.2s; }
.waitlist-form button:hover { background:#8f6fff; transform:scale(1.07); }
.form-note { font-size:0.95em; color:#aaa; margin-top:0.4em; }
.press { background:#23234a; border-radius:14px; padding:2em 1.2em; margin-top:2em; text-align:center; transition:box-shadow 0.3s; }
.press:hover { box-shadow:0 4px 32px #6c47e144; }
.press .press-contact { margin-top:1em; color:#b89fff; font-weight:bold; }
footer { background:#181828; color:#aaa; text-align:center; padding:2em 0 1em 0; margin-top:4em; border-top:1px solid #23234a; }
.footer-links, .footer-social { margin:0.5em 0; }
.footer-social a { display:inline-block; margin:0 0.5em; color:#b89fff; font-size:1.3em; transition:color 0.2s, transform 0.2s; }
.footer-social a:hover { color:#fff; transform:scale(1.2); }
@media (max-width:700px) {
    .how-it-works, .screenshots { flex-direction:column; align-items:center; }
    .hero-logo { width: 180px; max-width: 100vw; }
    .hero h1 span { display:block; }
    .hero h1 { font-size:2rem; }
}