/* =====================================================
   GreenAI home.css
   Desktop styles: original, unchanged.
   Mobile additions: appended at bottom via @media.
   ===================================================== */

/* ── Original desktop styles ── */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    margin: 0; padding: 0; color: #333;
}

.bg-circle { position: absolute; border-radius: 50%; opacity: 0.3; z-index: 0; }
.circle-1 { width:200px; height:200px; background:#4CAF50; top:10%;    right:10%; }
.circle-2 { width:150px; height:150px; background:#81C784; top:20%;    right:25%; }
.circle-3 { width:100px; height:100px; background:#C8E6C9; top:5%;     right:5%;  }
.circle-4 { width:120px; height:120px; background:#A5D6A7; bottom:15%; left:5%;   }
.circle-5 { width:80px;  height:80px;  background:#4CAF50; bottom:25%; left:15%;  }
.circle-6 { width:60px;  height:60px;  background:#81C784; bottom:35%; left:8%;   }
.circle-7 { width:180px; height:180px; background:#C8E6C9; top:50%;    left:-5%;  }
.circle-8 { width:90px;  height:90px;  background:#A5D6A7; top:60%;    left:8%;   }

.container { max-width:1000px; margin:0 auto; padding:20px; }

header { text-align:center; margin-bottom:30px; }
header h1 { font-size:2.5rem; color:#2e7d32; margin-bottom:10px; text-transform:capitalize; }
header h2 { font-size:1.5rem; color:#555; font-weight:normal; }

.registration-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin-bottom:40px; }

.option-card { background-color:#fff; border-radius:10px; padding:20px; text-align:center; cursor:pointer; transition:all .3s; box-shadow:0 4px 6px rgba(0,0,0,.1); }
.option-card:hover { transform:translateY(-5px); box-shadow:0 6px 12px rgba(0,0,0,.15); }
.option-icon { font-size:2.5rem; margin-bottom:15px; }
.option-card h3 { margin:0; color:#2e7d32; }

.preview-section { background-color:#fff; border-radius:10px; padding:20px; box-shadow:0 4px 6px rgba(0,0,0,.1); }
.divider { height:1px; background-color:#ddd; margin:20px 0; }
.preview-section h3 { color:#555; margin-top:0; }
.preview-content { min-height:100px; display:flex; align-items:center; justify-content:center; color:#777; }

/* ── Original responsive ── */
@media (max-width:768px) { .registration-options { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .registration-options { grid-template-columns:1fr; } }