/* HearThere — site styles */

:root {
    --bg: #0e1525;
    --bg-elevated: #131c33;
    --fg: #f4f6fb;
    --fg-muted: #a4afc7;
    --accent: #5b8ce6;
    --border: rgba(255, 255, 255, 0.08);
    --max-width: 720px;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif;
    background:
        radial-gradient(ellipse at top, #1a2942 0%, #0e1525 60%),
        var(--bg);
    color: var(--fg);
    font-size: 16px;
    line-height: 1.6;
    min-height: 100vh;
}

main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 64px 24px 80px;
}

@media (min-width: 720px) {
    main {
        padding-top: 96px;
    }
}

/* Header / hero */

.hero {
    text-align: center;
    margin-bottom: 64px;
}

.hero img.icon {
    width: 128px;
    height: 128px;
    border-radius: 28px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(255, 255, 255, 0.05);
    margin-bottom: 32px;
}

h1 {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}

.tagline {
    font-size: 22px;
    color: var(--fg-muted);
    margin: 0 0 36px;
    line-height: 1.4;
    font-weight: 400;
}

@media (max-width: 540px) {
    h1 { font-size: 32px; }
    .tagline { font-size: 18px; }
}

/* App Store badge */

.cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: var(--fg);
    color: var(--bg);
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.cta-secondary {
    color: var(--fg-muted);
    text-decoration: none;
    font-size: 14px;
    margin-left: 16px;
}

.cta-secondary:hover {
    color: var(--fg);
}

.coming-soon {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(91, 140, 230, 0.15);
    color: var(--accent);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-left: 8px;
    vertical-align: middle;
}

.cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cta-fineprint {
    font-size: 13px;
    margin-top: 12px;
    margin-bottom: 0;
}

/* Pricing section */

.pricing {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

@media (min-width: 600px) {
    .pricing {
        grid-template-columns: 1fr 1fr;
    }
}

.pricing-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
}

.pricing-card-primary {
    border-color: rgba(91, 140, 230, 0.4);
    box-shadow: 0 0 0 1px rgba(91, 140, 230, 0.2),
                0 8px 24px rgba(91, 140, 230, 0.08);
}

.pricing-card-head h3 {
    margin: 0 0 4px;
    font-size: 16px;
    color: var(--fg-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pricing-card .price {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fg);
    line-height: 1.1;
}

.pricing-card .price-sub {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--fg-muted);
}

.pricing-card ul {
    margin: 20px 0 24px;
    padding-left: 20px;
    color: var(--fg-muted);
    font-size: 14px;
    flex: 1;
}

.pricing-card li {
    margin-bottom: 6px;
}

.cta-block {
    display: block;
    text-align: center;
    width: 100%;
}

.cta-primary {
    background: var(--accent);
    color: var(--fg);
}

/* Body sections */

section {
    margin-bottom: 56px;
}

h2 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}

h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 24px 0 8px;
}

p {
    margin: 0 0 16px;
    color: var(--fg);
}

p.muted, .muted {
    color: var(--fg-muted);
}

ul {
    padding-left: 20px;
    margin: 0 0 16px;
}

li {
    margin-bottom: 8px;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

code, kbd {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.9em;
    background: var(--bg-elevated);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Footer */

footer {
    border-top: 1px solid var(--border);
    margin-top: 80px;
    padding-top: 32px;
    text-align: center;
    color: var(--fg-muted);
    font-size: 14px;
}

footer a {
    color: var(--fg-muted);
    margin: 0 12px;
}

footer a:hover {
    color: var(--fg);
}

/* Animated demo: two monitors, a window sliding between them,
   audio bars activating on whichever screen the window is on. */

/* Studio-Display-style: monitor with thin matte bezel, slim aluminum stand
   and foot below. Monitors fill the demo (16:10 each); stand/foot poke
   below via pseudo-elements so they don't disrupt window positioning. */

.demo {
    position: relative;
    margin: 32px auto 80px;            /* extra bottom for stand/foot */
    width: 100%;
    max-width: 520px;
    aspect-ratio: 520 / 150;
}

.demo .monitors {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 0 8px;
    overflow: visible;
}

.demo .display {
    position: relative;
    background: #050810;                              /* the screen */
    border-radius: 8px;
}

/* Each display gets its own glow animation, synced with the window position
   and its audio-bars timing: left glows during 0-45%, right during 50-95%. */
.demo .monitors .display:nth-child(1) {
    animation: display-glow-left 5s infinite ease-in-out;
}
.demo .monitors .display:nth-child(2) {
    animation: display-glow-right 5s infinite ease-in-out;
}

@keyframes display-glow-left {
    0%, 35% {
        box-shadow:
            inset 0 0 0 4px #15171c,
            0 1px 0 rgba(255, 255, 255, 0.04),
            0 0 28px rgba(255, 255, 255, 0.18),
            0 8px 18px rgba(0, 0, 0, 0.45);
    }
    50%, 100% {
        box-shadow:
            inset 0 0 0 4px #15171c,
            0 1px 0 rgba(255, 255, 255, 0.04),
            0 0 0 rgba(255, 255, 255, 0),
            0 8px 18px rgba(0, 0, 0, 0.45);
    }
}

@keyframes display-glow-right {
    0%, 45%, 100% {
        box-shadow:
            inset 0 0 0 4px #15171c,
            0 1px 0 rgba(255, 255, 255, 0.04),
            0 0 0 rgba(255, 255, 255, 0),
            0 8px 18px rgba(0, 0, 0, 0.45);
    }
    50%, 95% {
        box-shadow:
            inset 0 0 0 4px #15171c,
            0 1px 0 rgba(255, 255, 255, 0.04),
            0 0 28px rgba(255, 255, 255, 0.18),
            0 8px 18px rgba(0, 0, 0, 0.45);
    }
}

/* The aluminum stand: a small post + a wider foot, drawn outside the
   display via positioning the outer wrapper. We put them on the
   .monitors container so they appear at the right horizontal position
   for each display. */
.demo .display::before {
    /* stand post */
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 22%;
    height: 10px;
    background: linear-gradient(180deg, #2e333d 0%, #20242c 100%);
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

.demo .display::after {
    /* foot */
    content: "";
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 48%;
    height: 4px;
    background: linear-gradient(180deg, #3a3f48 0%, #262a31 100%);
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Audio waveform — five vertical pills, like SF Symbol's `waveform`.
   Each bar has its own height-pulse animation, staggered so the wave
   appears to ripple through them like a real audio visualizer. The
   parent's opacity gates visibility to the active phase. */

.demo .audio-bars {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;             /* center bars on a midline so they grow up/down */
    gap: 3px;
    height: 26px;
    opacity: 0;
}

.demo .audio-bars span {
    display: block;
    width: 3.5px;
    background: var(--fg);
    border-radius: 2px;
    height: 30%;
}

/* Each bar has its own keyframe pattern AND its own duration. Different
   prime-ish durations means they never re-sync, so the motion looks like
   five frequency bands responding independently rather than one wave.

   Each cycle has multiple peaks of varying heights — like real audio has
   multiple amplitude transients per bar, not just one smooth pulse. The
   ease-out timing function gives each peak a "snappy attack, slower decay"
   feel that's closer to real sound. */

.demo .audio-bars span:nth-child(1) { animation: bar-1 0.9s infinite ease-out; }
.demo .audio-bars span:nth-child(2) { animation: bar-2 1.3s infinite ease-out; }
.demo .audio-bars span:nth-child(3) { animation: bar-3 1.1s infinite ease-out; }
.demo .audio-bars span:nth-child(4) { animation: bar-4 1.5s infinite ease-out; }
.demo .audio-bars span:nth-child(5) { animation: bar-5 0.7s infinite ease-out; }

/* Each bar's pattern has 3-5 peaks per cycle at irregular intervals.
   Heights span 18%–95% for a strong dynamic range. */

@keyframes bar-1 {
    0%, 100% { height: 25%; }
    12%      { height: 78%; }
    24%      { height: 30%; }
    42%      { height: 88%; }
    58%      { height: 22%; }
    72%      { height: 65%; }
    86%      { height: 35%; }
}

@keyframes bar-2 {
    0%, 100% { height: 32%; }
    10%      { height: 92%; }
    22%      { height: 40%; }
    36%      { height: 70%; }
    50%      { height: 24%; }
    62%      { height: 85%; }
    78%      { height: 30%; }
    92%      { height: 60%; }
}

@keyframes bar-3 {
    0%, 100% { height: 45%; }
    8%       { height: 95%; }
    20%      { height: 50%; }
    32%      { height: 85%; }
    46%      { height: 30%; }
    58%      { height: 90%; }
    72%      { height: 40%; }
    86%      { height: 75%; }
}

@keyframes bar-4 {
    0%, 100% { height: 28%; }
    14%      { height: 80%; }
    28%      { height: 35%; }
    44%      { height: 92%; }
    60%      { height: 25%; }
    76%      { height: 70%; }
    90%      { height: 40%; }
}

@keyframes bar-5 {
    0%, 100% { height: 22%; }
    16%      { height: 70%; }
    34%      { height: 28%; }
    52%      { height: 82%; }
    70%      { height: 30%; }
    88%      { height: 55%; }
}

/* Visibility gating — bars only visible when their monitor is active. */
.demo .audio-bars.left  { animation: bars-fade-left  5s infinite ease-in-out; }
.demo .audio-bars.right { animation: bars-fade-right 5s infinite ease-in-out; }

@keyframes bars-fade-left {
    0%, 45%, 100% { opacity: 0; }
    5%, 42%       { opacity: 1; }
}

@keyframes bars-fade-right {
    0%, 49%, 100% { opacity: 0; }
    55%, 92%      { opacity: 1; }
}

/* The video window slides between the two monitors. */

.demo .window {
    position: absolute;
    top: 42%;             /* slightly upper so audio bars stay visible below */
    /* Position the window's LEFT EDGE such that it's centered on the left
       monitor (25% - half-width = 25% - 13% = 12%). The slide animation then
       uses transform translateX to move it to the right monitor. */
    left: 12%;
    width: 26%;
    aspect-ratio: 16 / 10;
    transform: translate(0, -50%);
    background: #243149;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    overflow: hidden;
    animation: window-slide 5s infinite ease-in-out;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.demo .window .titlebar {
    height: 18px;
    background: linear-gradient(180deg, #3a4561 0%, #2a3349 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 6px;
}

.demo .window .titlebar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.35);
}
.demo .window .titlebar i:nth-child(1) { background: #ff5f57; }
.demo .window .titlebar i:nth-child(2) { background: #febc2e; }
.demo .window .titlebar i:nth-child(3) { background: #28c840; }

.demo .window .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 18px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.85);
}

@keyframes window-slide {
    /* translate: 0  → centered on left monitor (because left:12% places the
       window's left edge such that it's already centered there).
       translate: 192% → shifts the window right by 50% of the demo width,
       i.e. exactly one monitor + half-gap, landing centered on right monitor.
       (192% = 50% demo / 26% window-width.) */
    0%, 35%   { transform: translate(0,    -50%); }
    50%, 85%  { transform: translate(192%, -50%); }
    100%      { transform: translate(0,    -50%); }
}

/* Small "what it does" feature grid on landing */

.features {
    display: grid;
    gap: 24px;
    margin-top: 24px;
}

@media (min-width: 540px) {
    .features {
        grid-template-columns: 1fr 1fr;
    }
}

.feature {
    padding: 20px;
    background: var(--bg-elevated);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.feature h3 {
    margin-top: 0;
}

.feature p {
    margin-bottom: 0;
    color: var(--fg-muted);
    font-size: 14px;
    line-height: 1.5;
}