body {
    margin: 0;
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    background: linear-gradient(115deg, #0F2027 0%, #2C5364 100%);
    color: #F3F3F3;
}

header {
    padding: 2rem 1rem 1rem 1rem;
    text-align: center;
}
.title {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 1.5px;
}
.subtitle {
    margin-top: 1rem;
    font-size: 1.15rem;
    color: #C0C7D6;
}

.contact-link {
    color: #00D2FF;
    text-decoration: none;
}

.tab-container {
    margin: 2rem 0 0 0;
    display: flex;
    justify-content: center;
}
.tab-btn {
    padding: 0.75rem 2rem;
    border-radius: 3rem 3rem 0 0;
    border: none;
    background: #1F4068;
    color: #F3F3F3;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0 0.5rem;
    cursor: pointer;
    outline: none;
    transition: background 0.2s;
}
.tab-btn.active {
    background: #00D2FF;
    color: #2C5364;
    box-shadow: 0 4px 24px rgba(0,210,255,0.18);
}

.content-section {
    max-width: 850px;
    margin: 1.5rem auto;
    background: rgba(34,41,54,0.75);
    border-radius: 1.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.11);
    padding: 2rem;
    min-height: 390px;
}
.top-area {
    display: flex;
    flex-direction: column; /* stack elements */
    gap: 1rem;              /* spacing between dropdown, audio, button */
    width: 100%;
}

.full-width {
    width: 100%;
}

.audio-player {
    width: 100%;
}

/* Make dropdown full-width nicely styled */
select.full-width {
    padding: 0.6rem;
    font-size: 1rem;
    border: none;
    border-radius: 0.5rem;
    background: #283E51;
    color: #fff;
}

/* Make button full width */
.demo-btn.full-width {
    text-align: center;
}

.asrboost-subtitle {
  margin: 0.5rem auto 1.4rem auto;     /* Extra space below title, more below subtitle */
  font-size: 1.08rem;                  /* Smaller than title, clearly secondary */
  font-weight: 400;
  color: #48b7ff;                      /* Softer accent (you can tweak as desired) */
  background: rgba(44, 83, 100, 0.07); /* Very subtle highlight to avoid clash */
  padding: 0.7rem 1rem;
  border-left: 3px solid #48b7ff;      /* Subtle left border */
  border-radius: 6px;
  box-shadow: none;                    /* Remove extra shadow */
  letter-spacing: 0.03em;
  display: inline-flex;                /* Only as wide as needed, centers inside <header> */
  align-items: center;
  gap: 0.6rem;
  max-width: 95%;                      /* Responsive for all screens */
  text-align: left;                    /* Slightly left, but adjusts inside centered parent */
}

/* Responsive for mobile */
@media (max-width: 500px) {
  .asrboost-subtitle {
    font-size: 0.94rem;
    padding: 0.6rem 0.6rem;
    max-width: 100vw;
  }
}

.model-info {
    font-size: 0.85rem;
    color: #C0C7D6;
    margin-top: 0.5rem;
    font-style: italic;
    max-width: 600px;
    line-height: 1.3;
    user-select: none;
    /* Optional subtle background highlight */
    background: rgba(192, 199, 214, 0.1);
    padding: 6px 10px;
    border-radius: 6px;
}

.dropdown-label {
    margin-bottom: 0.5rem;
    display: block;
    color: #C0C7D6;
}
select {
    width: 100%;
    padding: 0.6rem;
    font-size: 1rem;
    border: none;
    border-radius: 0.5rem;
    background: #283E51;
    color: #fff;
}
.demo-btn {
    margin-top: 1rem;
    padding: 0.6rem 1.4rem;
    background: linear-gradient(90deg, #00D2FF 0%, #3A7BD5 100%);
    color: #16222A;
    border: none;
    border-radius: 2rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,210,255,0.08);
    font-size: 1rem;
    transition: background 0.15s;
}
.model-results {
    margin-top: 2rem;
    display: flex;
    flex-direction: column; /* Stack vertically */
    gap: 1rem;              /* Space between stacked items */
}

.info-block {
    flex: 1;
    padding: 1rem;
    background: rgba(15,32,39,0.79);
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(0,210,255,0.05);
    min-width: 0;
}
.info-bold {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.7rem;
}
.info-text {
    font-size: 1.1rem;
    color: #C0C7D6;
    font-style: italic;
    word-break: break-word;
}

.hiw-section {
    margin-top: 1.5rem;
}

footer {
    margin-top: 3rem;
    background: #16222A;
    padding: 1.5rem 0;
    text-align: center;
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 -2px 12px rgba(0,210,255,0.07);
}
.footer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.logo-img {
    width: 75px;
    height: auto;
    opacity: 0.82;
    filter: grayscale(40%) brightness(1.2);
    max-width: 22vw;
}

/* --- Responsive Styles --- */

@media (max-width: 900px) {

    .top-area {
        flex-direction: column;
        gap: 1rem; /* smaller gap than default */
        margin-bottom: 1rem; /* ensure no big trailing gap */
    }

    .model-results {
        margin-top: 1rem; /* shrink from 2rem to close the gap */
    }
    /* Make dropdown match center style */
    #audio-dropdown {
        max-width: 300px;      /* narrower so it looks balanced */
        margin-left: auto;     
        margin-right: auto;
    }
}

@media (max-width: 500px) {
    .content-section {
        padding: 1.2rem;
    }
    header {
        padding: 1.2rem 1rem 0.7rem 1rem;
    }
    .title {
        font-size: 1.45rem;
    }
    .subtitle {
        font-size: 0.98rem;
    }
    .tab-btn {
        padding: 0.6rem 1.25rem;
        font-size: 1rem;
    }
    .content-section {
        padding: 0.7rem 2vw;
        border-radius: 0.7rem;
    }
    footer {
        padding: 0.7rem 0;
    }
    .logo-img {
        width: 55px;
        max-width: 33vw;
    }
    .footer-logos {
        gap: 1rem;
    }
}