/* Modern Material-inspired styles - plain white background */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --primary:#0f62fe;
  --on-primary:#ffffff;
  --text:#0f1720;
  --muted:#6b7280;
  --radius:14px;
  --card-shadow: 0 8px 30px rgba(15,23,32,0.06);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%; margin:0; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;}
.container{max-width:1100px; margin:0 auto; padding:28px}

/* App bar */
.appbar{border-bottom:1px solid #f3f4f6; background:var(--bg)}
.row{display:flex; align-items:center}
.spaced{justify-content:space-between}
.brand{font-weight:700; color:var(--text); font-size:20px}
.nav a{margin-left:18px; color:var(--muted); font-weight:500}

/* Card */
.card{background:var(--surface); border-radius:var(--radius); padding:22px; box-shadow:var(--card-shadow); margin:18px 0}
.small{padding:16px}

/* Hero */
.hero{display:flex; gap:24px; align-items:stretch}
.hero-left{flex:1}
.hero-right{width:320px}
h1{font-size:34px; margin:0 0 12px 0}
.subtitle{color:var(--muted); margin-bottom:16px}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; font-weight:600; cursor:pointer; text-decoration:none}
.btn.primary{background:var(--primary); color:var(--on-primary)}
.btn.outline{border:1px solid #e5e7eb; background:transparent; color:var(--text)}

/* Features grid */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px}
.feature{display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:12px}
.feature .material-icons{font-size:36px; color:var(--primary)}

/* Contact form */
.contact-form label{display:block; margin-bottom:12px}
.contact-form span{display:block; margin-bottom:6px; color:var(--muted)}
.contact-form input, .contact-form textarea{width:100%; padding:12px; border-radius:10px; border:1px solid #eef2f7; font-size:14px; background:#fff}
.form-actions{margin-top:8px}
.toast{padding:12px; background:#ecfeff; color:#034d4d; border-radius:8px; margin-bottom:12px}

/* Footer */
.footer{margin-top:28px; padding:18px; background:transparent}
.links a{margin-left:12px; color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  .hero{flex-direction:column}
  .hero-right{width:100%}
  .features{grid-template-columns:1fr}
  .nav a{margin-left:10px}
}