1/* Reset and Base Styles */
  2* {
  3    box-sizing: border-box;
  4    margin: 0;
  5    padding: 0;
  6}
  7
  8body {
  9    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
 10    line-height: 1.6;
 11    color: #333;
 12    background-color: #f8f9fa;
 13}
 14
 15.container {
 16    max-width: 800px;
 17    margin: 0 auto;
 18    padding: 0 20px;
 19}
 20
 21/* Header Styles */
 22header {
 23    background-color: #fff;
 24    border-bottom: 1px solid #e9ecef;
 25    padding: 1rem 0;
 26}
 27
 28.header-content {
 29    display: flex;
 30    justify-content: space-between;
 31    align-items: center;
 32}
 33
 34.logo {
 35    font-size: 1.5rem;
 36    font-weight: 600;
 37    color: #2c3e50;
 38    text-decoration: none;
 39}
 40
 41nav a {
 42    text-decoration: none;
 43    color: #6c757d;
 44    margin-left: 1.5rem;
 45    font-weight: 500;
 46}
 47
 48nav a:hover {
 49    color: #2c3e50;
 50}
 51
 52/* Main Content */
 53main {
 54    padding: 2rem 0;
 55    min-height: calc(100vh - 160px);
 56}
 57
 58/* Footer */
 59footer {
 60    background-color: #fff;
 61    border-top: 1px solid #e9ecef;
 62    padding: 1.5rem 0;
 63    margin-top: 2rem;
 64    color: #6c757d;
 65    font-size: 0.9rem;
 66}
 67
 68.footer-content {
 69    text-align: center;
 70}
 71
 72.tagline {
 73    font-style: italic;
 74    margin-top: 0.5rem;
 75}
 76
 77/* Home Page Styles */
 78.hero {
 79    text-align: center;
 80    padding: 3rem 0;
 81}
 82
 83.hero h1 {
 84    font-size: 2.5rem;
 85    font-weight: 700;
 86    color: #2c3e50;
 87    margin-bottom: 1rem;
 88}
 89
 90.hero-subtitle {
 91    font-size: 1.2rem;
 92    color: #6c757d;
 93    margin-bottom: 2rem;
 94    max-width: 600px;
 95    margin-left: auto;
 96    margin-right: auto;
 97}
 98
 99.cta-section {
100    margin: 2rem 0;
101}
102
103.cta-button {
104    display: inline-block;
105    background-color: #2c3e50;
106    color: white;
107    padding: 1rem 2rem;
108    text-decoration: none;
109    border-radius: 8px;
110    font-weight: 600;
111    font-size: 1.1rem;
112    transition: background-color 0.2s;
113}
114
115.cta-button:hover {
116    background-color: #34495e;
117}
118
119.cta-description {
120    margin-top: 0.5rem;
121    color: #6c757d;
122    font-size: 0.9rem;
123}
124
125.features {
126    margin: 4rem 0;
127}
128
129.feature-grid {
130    display: grid;
131    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
132    gap: 2rem;
133    margin-top: 2rem;
134}
135
136.feature {
137    background: white;
138    padding: 1.5rem;
139    border-radius: 8px;
140    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
141}
142
143.feature h3 {
144    color: #2c3e50;
145    margin-bottom: 0.5rem;
146}
147
148.philosophy {
149    background: white;
150    padding: 2rem;
151    border-radius: 8px;
152    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
153    margin: 3rem 0;
154}
155
156.philosophy h2 {
157    color: #2c3e50;
158    margin-bottom: 1rem;
159}
160
161.philosophy p {
162    margin-bottom: 1.5rem;
163    line-height: 1.7;
164}
165
166.philosophy blockquote {
167    font-style: italic;
168    font-size: 1.1rem;
169    color: #6c757d;
170    border-left: 4px solid #2c3e50;
171    padding-left: 1rem;
172    margin: 1rem 0;
173}
174
175/* Submit Page Styles */
176.submit-page {
177    max-width: 600px;
178    margin: 0 auto;
179}
180
181.submit-header {
182    text-align: center;
183    margin-bottom: 3rem;
184}
185
186.submit-header h1 {
187    color: #2c3e50;
188    margin-bottom: 0.5rem;
189}
190
191.submit-header p {
192    color: #6c757d;
193    font-size: 1.1rem;
194}
195
196.submit-form-container {
197    display: grid;
198    gap: 3rem;
199}
200
201.submit-form {
202    background: white;
203    padding: 2rem;
204    border-radius: 8px;
205    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
206}
207
208.form-group {
209    margin-bottom: 1.5rem;
210}
211
212.form-group label {
213    display: block;
214    font-weight: 600;
215    color: #2c3e50;
216    margin-bottom: 0.5rem;
217}
218
219.form-group input,
220.form-group select {
221    width: 100%;
222    padding: 0.75rem;
223    border: 2px solid #e9ecef;
224    border-radius: 4px;
225    font-size: 1rem;
226    transition: border-color 0.2s;
227}
228
229.form-group input:focus,
230.form-group select:focus {
231    outline: none;
232    border-color: #2c3e50;
233}
234
235.form-group small {
236    display: block;
237    margin-top: 0.25rem;
238    color: #6c757d;
239    font-size: 0.9rem;
240}
241
242.submit-button {
243    width: 100%;
244    background-color: #2c3e50;
245    color: white;
246    padding: 1rem 2rem;
247    border: none;
248    border-radius: 8px;
249    font-weight: 600;
250    font-size: 1.1rem;
251    cursor: pointer;
252    transition: background-color 0.2s;
253}
254
255.submit-button:hover {
256    background-color: #34495e;
257}
258
259.submit-info {
260    background: white;
261    padding: 2rem;
262    border-radius: 8px;
263    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
264}
265
266.submit-info h3 {
267    color: #2c3e50;
268    margin-bottom: 1rem;
269}
270
271.submit-info ol {
272    padding-left: 1.2rem;
273}
274
275.submit-info li {
276    margin-bottom: 0.5rem;
277    line-height: 1.6;
278}
279
280/* Responsive Design */
281@media (max-width: 768px) {
282    .container {
283        padding: 0 15px;
284    }
285    
286    .header-content {
287        flex-direction: column;
288        gap: 1rem;
289    }
290    
291    nav a {
292        margin-left: 1rem;
293        margin-right: 1rem;
294    }
295
296    .hero h1 {
297        font-size: 2rem;
298    }
299    
300    .hero-subtitle {
301        font-size: 1.1rem;
302    }
303    
304    .feature-grid {
305        grid-template-columns: 1fr;
306        gap: 1rem;
307    }
308    
309    .philosophy {
310        padding: 1.5rem;
311    }
312
313    .submit-form,
314    .submit-info {
315        padding: 1.5rem;
316    }
317    
318    .submit-form-container {
319        gap: 2rem;
320    }
321}