:root{
  --bg:#0a0b0f;
  --ink:#f5f7ff;
  --muted:#aeb6c7;
  --prime:#e11d2f;
  --panel:#10131c;
  --ring:#1e2432;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  overflow:hidden;
}

.stage{position:relative;height:100vh;width:100vw}

/* Animated background */
.bg{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(80% 50% at 50% 30%, #161a24 0%, #0b0d12 60%),
    conic-gradient(from 180deg at 50% 50%, rgba(225,29,47,.18), rgba(14,19,30,.2), rgba(225,29,47,.18));
  filter:saturate(1.05) brightness(.9);
  animation:swirl 28s linear infinite;
}
@keyframes swirl{ to { transform: rotate(1turn); } }

.topbar{
  position:absolute; top:12px; left:16px; right:16px;
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(180deg,rgba(10,11,15,.65),rgba(10,11,15,0));
  backdrop-filter:saturate(140%) blur(6px);
  padding:10px 12px; border-radius:12px; z-index:5;
  border:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:8px; font-weight:800}
.logo{height:22px; width:auto; display:block}
.brand-text{font-weight:800}

.cta,.ghost{
  padding:12px 18px; border-radius:12px; border:none; cursor:pointer;
  font-weight:800; text-decoration:none; display:inline-block;
}
.cta{background:var(--prime); color:white}
.cta.small{padding:8px 12px; font-size:14px}
.ghost{background:transparent; border:1px solid var(--ring); color:var(--ink)}

.hero{
  position:absolute; inset:0; display:grid;
  grid-template-columns:1fr 1fr; align-items:center; padding:6vw;
}
.center{text-align:center; grid-column:1 / span 2}
.center h1{font-size:clamp(28px,4vw,56px); line-height:1.05; margin:0 0 .25em}
.center p{color:var(--muted); font-size:clamp(16px,2vw,20px); margin:0 0 1em}
.actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.helper{margin-top:10px; color:var(--muted); font-size:13px; text-align:center}
.helper.tiny{font-size:12px; opacity:.8}

.left{position:absolute; left:6vw; bottom:10vh; max-width:520px}
.label{display:block; color:var(--muted); font-size:14px; margin-bottom:8px}
.input-wrap{
  display:flex; align-items:center; gap:8px;
  background:rgba(20,22,34,.7); border:1px solid var(--ring);
  border-radius:14px; padding:10px 12px
}
.input-wrap input{flex:1; background:transparent; border:none; color:var(--ink); font-size:18px; outline:none}
.input-wrap button{width:40px; height:40px; border-radius:10px; border:1px solid var(--ring); background:transparent; color:var(--ink); cursor:pointer}
/* STATUS */
.status{
  margin-top:12px;
  color:#c8d0e0;
  font-size:14px;
  min-height:1.2em;
  text-align:center;
  opacity:.9;
}
.status.busy::after{ content:' …'; animation:dots 1.2s steps(3,end) infinite }
@keyframes dots{ 0%{content:' '} 33%{content:'. '} 66%{content:'.. '} 100%{content:'... '} }

/* PROGRESS */
.progress{
  display:block;                 /* ensure it can center */
  width:360px;                   /* a bit wider so it reads premium */
  height:6px;                    /* slightly thicker */
  margin:10px auto 0;            /* <- centers it */
  background:#172135;
  border-radius:999px;
  overflow:hidden;
  opacity:0;
  transform:translateZ(0);
  transition:opacity .25s ease;
}
.progress.show{ opacity:1 }
.progress span{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#22c55e,#10b981);
  border-radius:inherit;
  will-change:width;
}

/* Optional: tiny glow to feel high-end */
.progress.show span{
  box-shadow:0 0 12px rgba(34,197,94,.35);
}
.footer {
  text-align: center;
  padding: 32px 20px 40px;
  border-top: 2px solid var(--accent, #c0142a);
  background: transparent;
  font-size: 14px;
  color: #ccc;
  line-height: 1.6;
}

.footer-logo {
  display: block;
  margin: 0 auto 14px;
  height: 32px;
  opacity: 0.95;
}

.footer .legal {
  margin-top: 6px;
  font-size: 14px;
  color: #eee;
}

.footer .contact,
.footer .links {
  margin-top: 6px;
  font-size: 14px;
}

.footer a {
  color: var(--accent, #c0142a);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer a:hover {
  color: #ff4d4d;
}
.main-input {
  margin: 28px auto 12px;
  max-width: 640px;
}

.main-input input {
  height: 72px;
  font-size: 20px;
  padding: 0 20px;
  border-radius: 14px;
}

.main-input button {
  height: 72px;
  width: 72px;
  font-size: 22px;
}
/* Center hero content tighter and give it a clear column width */
.hero .center{
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

/* Main input is the hero; make it larger and balanced */
.main-input{
  margin: 28px auto 12px;
  max-width: 820px;
  width: 100%;
}
.main-input input{
  height: 76px;
  font-size: 20px;
  padding: 0 22px;
  border-radius: 14px;
  backdrop-filter: blur(6px);
}
.main-input button{
  height: 76px;
  width: 76px;
  font-size: 22px;
  border-radius: 14px;
}

/* CTA spacing relative to the input */
.hero .actions{
  margin-top: 16px;
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Footer always centered with same width as hero */
.footer{
  border-top: 2px solid var(--accent,#c0142a);
}
.footer > *{
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive: input full width on mobile */
@media (max-width: 720px){
  .main-input{ max-width: 100%; }
  .main-input input{ height: 64px; font-size: 18px; }
  .main-input button{ height: 64px; width: 64px; font-size: 20px; }
}
<script>
  (function(){
    const el = document.getElementById('industry');
    const btn = document.getElementById('quickSpeak');
    if (el && btn){
      el.addEventListener('keydown', e => {
        if (e.key === 'Enter') { btn.click(); }
      });
    }
  })();
</script>