/* Simple modern styles for startup homepage */
:root{--bg:#0b1220;--accent:#14b8a6;--accent-2:#2dd4bf;--muted:#94a3b8;--card:#0f1724;--surface:#071022}
*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial; margin:0; color:#0b1220; background:linear-gradient(180deg,#f8fafc,#fff)}
.container{max-width:1100px;margin:0 auto;padding:2rem}
.nav-row{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.125rem}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{color:#334155;text-decoration:none}
.nav .btn-outline{padding:.5rem .75rem;border:1px solid #c7d2fe;border-radius:6px;color:var(--accent)}
.nav-toggle{display:none;background:none;border:0;font-size:1.25rem}

/* Colored menu bar */
.site-header{
  /* sticky header with translucent backdrop and gradient */
  position:sticky;
  top:0;
  z-index:60;
  background:linear-gradient(90deg,#b6bbc1,#8995a1);
  color:#fff;
  box-shadow:0 6px 18px rgba(16,24,40,0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:background 400ms ease, box-shadow 300ms ease, transform 250ms ease;
  will-change:background,transform;
}
.site-header .container{padding:0.8rem 2rem}
.site-header .brand{color:#0b3d91; font-size:1.25rem; font-weight:800}
.site-header .nav a{color:rgba(18, 3, 70, 0.95)}
.site-header .nav .btn-outline{border-color:rgba(255,255,255,0.18);color:#fff;background:transparent}
.site-header .nav-toggle{display:none;color:#100f0f}

/* subtle gradient shift animation */
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.site-header{
  background-size:200% 200%;
}

/* Animate on hover */
.site-header:hover{animation:gradientShift 3s linear infinite}

/* Apply a slightly different look when scrolled */
.site-header.scrolled{transform:translateY(-1px);box-shadow:0 8px 30px rgba(2,6,23,0.7)}
.site-header.scrolled{animation:gradientShift 4s linear infinite}

@media (max-width:900px){
  .site-header .nav-toggle{display:block}
  .site-header .nav{display:none}
}

.hero{padding:2.5rem 0}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:3rem;align-items:center}
.hero h1{font-size:2.5rem;margin:0 0 .75rem; line-height: 1.2;}
.lead{color:#475569;margin-bottom:1.5rem; font-size: 1.125rem;}
.ctas{display:flex;gap:.75rem;margin-top:1.5rem}
.btn-primary{background:var(--accent);color:#fff;padding:.75rem 1.25rem;border-radius:8px;text-decoration:none}
.btn-ghost{background:transparent;border:1px solid #e6e9ff;padding:.65rem 1.15rem;border-radius:8px;color:#334155;text-decoration:none}
.trust{list-style:none;padding:0;margin-top:1.5rem;color:#64748b}
.mock img{max-width:100%;border-radius:12px;box-shadow:0 10px 30px rgba(83,109,246,0.12)}

.features{padding:1.5rem 0}
.features h2{margin-bottom:1.5rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.card{background:#fff;border-radius:10px;padding:1.5rem;box-shadow:0 4px 12px rgba(15,23,36,0.06)}
.card h3{margin-top:0}

.about{padding:1.5rem 0}
.list{color:#475569}

.contact{padding:2rem 0;background:linear-gradient(180deg,#fff,#f8fafc)}
.contact-grid{display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:center}
.contact-form{display:flex;flex-direction:column;gap:.75rem}
.contact-form input,.contact-form select{padding:.75rem .8rem;border-radius:8px;border:1px solid #e6e9ef}

.form-message {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background-color: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  text-align: center;
  font-size: 0.9rem;
  display: none; /* Hidden by default */
}

.site-footer{padding:1.5rem 0;background:#fff;border-top:1px solid #eef2f7}
.footer-grid{display:flex;justify-content:space-between;align-items:center}
.footer-links a{margin-left:1rem;color:#475569;text-decoration:none}

/* Responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .nav{display:none}
  .nav-toggle{display:block}
}

/* Accessibility focus */
a:focus, button:focus, input:focus{outline:3px solid rgba(83,109,246,0.16);outline-offset:2px}