:root{
  --ink:#e5e7eb; --muted:#94a3b8; --bg1:#0b1320; --bg2:#0f172a; --panel:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12); --btn:#22d3ee; --btnText:#0b1320; --chip:rgba(255,255,255,.12); --chipText:#e5e7eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 100%);
  color:var(--ink);
}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;background:rgba(11,19,32,.6);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--line);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:800;letter-spacing:.2px;color:#fff}
.nav a{color:var(--ink);text-decoration:none;margin:0 12px}
.nav .cta{background:var(--btn);color:var(--btnText);padding:10px 14px;border-radius:10px}
.hero{padding:56px 0 24px}
.h-title{font-size:48px;line-height:1.1;margin:0 0 8px 0}
.h-lead{color:var(--muted);font-size:18px;margin:0 0 22px 0}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px 0}
.pill{background:var(--chip);color:var(--chipText);padding:6px 12px;border-radius:999px;font-size:14px;border:1px solid var(--line)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 6px 0}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:700}
.btn.primary{background:var(--btn);color:var(--btnText)}
.btn.secondary{background:transparent;border:1px solid var(--line);color:var(--ink)}
.caption{color:var(--muted);font-size:14px;margin-top:8px}
.section{padding:32px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.card h3{margin:0 0 6px 0}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.step .n{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#111827;color:#fff;font-size:14px;margin-bottom:8px}
.footer{padding:24px 0;color:var(--muted);font-size:14px;border-top:1px solid var(--line);margin-top:24px}
@media (max-width:980px){
  .h-title{font-size:36px}
  .cards{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .step-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .step-grid{grid-template-columns:1fr}
}

/* logo tweaks */
.header .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #e5e7eb; }
@media (max-width:640px){ .header .brand .hide-sm { display: none; } }

/* responsive header layout */
.header { padding: 10px 0; }
.header .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.header .brand { flex: 0 0 auto; }
.header nav { display: flex; align-items: center; gap: 18px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.header nav a { white-space: nowrap; }

/* keep Contact pinned to the right on wide screens */
.header nav a.cta {
  margin-left: auto;
  padding: 8px 12px;
  border-radius: 10px;
  background: #22d3ee;
  color: #0b1320;
  font-weight: 700;
  border: 0;
}

/* tighten and stack gracefully on small widths */
@media (max-width: 900px) {
  .header nav { gap: 12px; }
  .header nav a { font-size: 14px; }
}
@media (max-width: 640px) {
  .header .wrap { gap: 10px; }
  .header nav { width: 100%; justify-content: flex-start; }
  .header nav a.cta { margin-left: 0; margin-top: 6px; }
}

/* navbar layout */
.header .wrap.nav { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.header .wrap.nav .brand { flex:0 0 auto; }
.header .wrap.nav nav { display:flex; align-items:center; gap:18px; flex:1 1 auto; min-width:0; flex-wrap:wrap; }
.header .wrap.nav nav a { white-space:nowrap; }

/* Contact pill pinned to the right on wide screens */
.header .wrap.nav > a.cta {
  margin-left:auto;
  padding:8px 12px;
  border-radius:10px;
  background:#22d3ee;
  color:#0b1320;
  font-weight:700;
  text-decoration:none;
}

/* Small screens: let it drop under neatly */
@media (max-width:640px){
  .header .wrap.nav { gap:10px; }
  .header .wrap.nav nav { width:100%; gap:12px; }
  .header .wrap.nav > a.cta { margin-left:0; margin-top:6px; }
}

/* Mobile fixes for /demo input and Analysis button */
@media (max-width: 600px){
  /* Try common containers used on the demo page */
  .controls, .chat-controls, .demo-controls, form .controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
    flex-wrap: wrap !important; /* in case it is a flex container */
  }
  input[type="text"], input[type="search"], textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
  }
  button, .btn, input[type="submit"] {
    width: 100% !important;
    display: block !important;
  }
}

/* Mobile stack for /demo controls */
@media (max-width: 980px){
  .row { flex-wrap: wrap !important; }
  .row input[type="text"], .row select, .row button { flex: 1 1 100% !important; width: 100% !important; display: block !important; }
}
/* Tighter stack on small phones */
@media (max-width: 600px){
  .row { flex-direction: column !important; gap: 8px !important; }
  .row input[type="text"], .row select, .row button { width: 100% !important; }
}

/* Mobile stack for /demo controls */
@media (max-width: 980px){
  .row { flex-wrap: wrap !important; }
  .row input[type="text"], .row select, .row button { flex: 1 1 100% !important; width: 100% !important; display: block !important; }
}
/* Tighter stack on small phones */
@media (max-width: 600px){
  .row { flex-direction: column !important; gap: 8px !important; }
  .row input[type="text"], .row select, .row button { width: 100% !important; }
}

/* Mobile input overflow fix */
.row input[type="text"]{
  min-width: 0 !important;   /* allow flex item to shrink */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Desktop Chrome row layout fix */
@media (min-width: 769px){
  .row{display:flex;align-items:stretch;gap:8px}
  .row #msg{flex:1 1 auto !important;min-width:0 !important;width:auto !important;max-width:100% !important;box-sizing:border-box !important;display:block !important}
  .row select,.row button{flex:0 0 auto !important;width:auto !important}
}