/* Copied from src/styles/brochure.css so the stylesheet is shipped as a static asset
   and will be copied to `dist/styles/brochure.css` on build. */
:root{
  --bg:#0b1b3a; /* brighter midnight blue */
  --surface:#0f213b; /* lighter deep navy panel with purple tint */
  --muted:#9fb0c9; /* cool muted */
  --text:#e8eef8; /* main text */
  --accent:#7c5cff; /* violet accent */
  --accent-2:#5ee0ff; /* cyan secondary accent for small gradients */
  --accent-contrast:#0f0a22; /* dark for button text */
  --card-radius:12px;
  --max-width:1100px;
}

html,body{height:100%;}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #050607;
  color:var(--text);
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.site-container{max-width:var(--max-width);margin:0 auto;padding:48px 24px;}
.header{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{font-weight:700;font-size:1.25rem;color:var(--accent);text-decoration:none}
.nav a{color:var(--muted);margin-left:20px;text-decoration:none}
.nav a:hover,.nav a:focus{color:var(--text)}

.hero{display:flex;gap:32px;align-items:center;padding:48px 0}
.hero-copy{flex:1}
.hero-centered{display:flex;flex-direction:column;align-items:center;text-align:center;padding:72px 12px}
.hero-centered h1{font-size:2.6rem;max-width:900px}
.hero-centered p{max-width:800px}
.screenshot{
  margin-top:28px;
  width:100%;
  max-width:1100px;
  height:460px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(94,224,255,0.04),rgba(124,92,255,0.02));
  display:flex;align-items:center;justify-content:center;box-shadow:0 12px 40px rgba(2,6,16,0.6);
}
.screenshot img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
  display:block;
}
.screenshot .placeholder{position:relative;z-index:1}
.eyebrow{color:var(--accent);font-weight:700;margin-bottom:12px;font-size:0.875rem}
.hero h1{font-size:2.4rem;margin:0 0 12px;line-height:1.05}
.hero p{color:var(--muted);line-height:1.6;font-size:1.05rem}
.cta-row{margin-top:20px;display:flex;gap:12px}

.btn-primary{
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  box-shadow: 0 6px 18px rgba(124,92,255,0.06);
}
.btn-primary:hover,.btn-primary:focus{filter:brightness(0.96);box-shadow:0 10px 28px rgba(124,92,255,0.10)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:12px 18px;border-radius:10px;text-decoration:none}
.btn-ghost:hover,.btn-ghost:focus{color:var(--text);border-color:rgba(255,255,255,0.12);background:rgba(255,255,255,0.01)}

.hero-illustration{width:360px;flex:0 0 360px;background:linear-gradient(135deg,rgba(94,224,255,0.06),rgba(124,92,255,0.04));border-radius:var(--card-radius);padding:18px}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.feature{background:var(--surface);padding:20px;border-radius:var(--card-radius);box-shadow:0 6px 20px rgba(2,6,16,0.6)}
.feature h3{margin-top:0;color:var(--text)}
.feature p{color:var(--muted)}
.cards{display:flex;gap:12px;margin-top:22px}
.footer{border-top:1px solid rgba(255,255,255,0.04);margin-top:48px;padding:28px 0;background:var(--surface);color:var(--muted);font-size:0.95rem;border-radius:8px}
.footer a{color:var(--muted)}
.footer a.text-muted{color:var(--muted);opacity:0.95}
.footer a:hover,.footer a:focus{color:var(--text);text-decoration:underline}
.footer .fw-semibold{color:var(--text)}
.footer strong{color:var(--text)}

/* Prose block for consistent page content width */
.prose{max-width:900px;margin:0 auto;padding:4px 18px}
.prose h1{font-size:2rem;margin-bottom:8px}
.prose p{line-height:1.7}

/* Accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:900px){
  .hero{flex-direction:column}
  .hero-illustration{width:100%;flex:auto}
  .hero-centered h1{font-size:1.9rem}
  .screenshot{height:260px}
  .features{grid-template-columns:1fr}
}

/* Contact form styles */
.contact-form{max-width:var(--max-width);display:block}
.contact-form .form-row{margin-bottom:12px}
.contact-form label{display:block;font-weight:600;margin-bottom:6px}
.contact-form input,.contact-form textarea{width:100%;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:var(--surface);color:var(--text)}
.contact-form .muted{color:var(--muted);font-size:0.9rem}