:root {
    --c-bg: #0d0f12;
    --c-surface: #161a1f;
    --c-prim: #10b981; 
    --c-tcd: #ffffff;
    --c-txt: #94a3b8;
    --c-wht: #f8fafc;
    --grad: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; }

body { background-color: var(--c-bg); color: var(--c-wht); line-height: 1.6; }

.navbar { padding: 30px 5%; display: flex; justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
.logo { font-weight: 800; font-size: 1.4rem; letter-spacing: -1px; }
.tcd { color: var(--c-tcd); text-transform: uppercase; }
.divider { margin: 0 15px; color: var(--c-txt); font-weight: 300; }
.circleup span { color: var(--c-prim); }

.container { max-width: 1100px; margin: 60px auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.intro h1 { font-size: 2.8rem; margin: 20px 0; line-height: 1.1; }
.badge { display: inline-block; padding: 6px 15px; background: rgba(16, 185, 129, 0.1); color: var(--c-prim); border-radius: 50px; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }

.terminal { background: #050505; padding: 20px; border-radius: 12px; font-family: 'Fira Code', monospace; font-size: 0.85rem; border: 1px solid rgba(255,255,255,0.1); }
.status { color: var(--c-prim); }

.form-wrapper { background: var(--c-surface); padding: 40px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.05); }

.form-group { margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

label { display: block; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: var(--c-txt); margin-bottom: 8px; }

input, select, textarea {
    width: 100%; padding: 14px; background: #1e2329; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: white; outline: none; transition: 0.3s;
}

input:focus, select:focus, textarea:focus { border-color: var(--c-prim); }

.btn-submit {
    width: 100%; padding: 16px; background: var(--grad); border: none; border-radius: 10px; color: white; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
}

.success-box { text-align: center; }
.success-box i { font-size: 4rem; color: var(--c-prim); }

footer { text-align: center; padding: 40px; color: var(--c-txt); }

@media (max-width: 900px) { .container { grid-template-columns: 1fr; } }