:root { --primary: #0f172a; --accent: #2563eb; --accent-hover: #1d4ed8; --bg: #f8fafc; --card-bg: #ffffff; --text: #334155; --text-light: #64748b; --border: #e2e8f0; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; } body { background-color: var(--bg); color: var(--text); line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; } header { background-color: var(--primary); color: #ffffff; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; } header .logo { font-size: 1.25rem; font-weight: bold; color: #ffffff; text-decoration: none; } nav { display: flex; gap: 1.5rem; } nav a { color: #cbd5e1; text-decoration: none; font-weight: 500; transition: color 0.2s; } nav a:hover, nav a.active { color: #ffffff; } main { flex: 1; } .hero { background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="%231e293b" width="50" height="50"/></svg>'); color: #ffffff; padding: 5rem 2rem; text-align: center; } .hero h1 { font-size: 2.5rem; margin-bottom: 1rem; color: #ffffff; } .hero p { font-size: 1.2rem; color: #cbd5e1; max-width: 600px; margin: 0 auto 2rem auto; } .btn { display: inline-block; background-color: var(--accent); color: #ffffff; padding: 0.75rem 1.5rem; border-radius: 0.375rem; text-decoration: none; font-weight: 600; border: none; cursor: pointer; transition: background-color 0.2s; } .btn:hover { background-color: var(--accent-hover); } .container { max-width: 1000px; margin: 0 auto; padding: 4rem 2rem; } .section-title { text-align: center; font-size: 2rem; margin-bottom: 3rem; color: var(--primary); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; } .card { background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .card h3 { margin-bottom: 0.75rem; color: var(--primary); } form { display: flex; flex-direction: column; gap: 1.25rem; max-width: 600px; margin: 0 auto; background: var(--card-bg); padding: 2.5rem; border-radius: 0.5rem; border: 1px solid var(--border); } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } label { font-weight: 500; font-size: 0.9rem; } input, textarea { padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 1rem; width: 100%; } input:focus, textarea:focus { outline: none; border-color: var(--accent); } .form-message { padding: 1rem; border-radius: 0.375rem; margin-top: 1rem; display: none; } .form-message.success { background: #dcfce7; color: #166534; display: block; } .form-message.error { background: #fee2e2; color: #991b1b; display: block; } footer { background-color: var(--primary); color: #94a3b8; text-align: center; padding: 2rem; font-size: 0.9rem; margin-top: auto; }