*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Plus Jakarta Sans',sans-serif;min-height:100vh;background:#f0f4f8;color:#1e293b;overflow-x:hidden}

/* Hero banner */
.reg-hero{position:relative;background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#0f172a 100%);padding:40px 20px 80px;text-align:center;overflow:hidden}
.reg-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.reg-hero::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:60px;background:linear-gradient(to bottom right,transparent 49.5%,#f0f4f8 50%)}
.reg-hero-content{position:relative;z-index:2;max-width:600px;margin:0 auto}
.reg-logo{width:72px;height:72px;background:linear-gradient(145deg,#ff8c00,#ff6b00);border-radius:18px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(255,120,0,.3);margin-bottom:16px}
.reg-logo img{width:65%;height:65%;object-fit:contain;filter:brightness(1.3)}
.reg-hero h1{font-size:1.8rem;font-weight:800;color:#fff;letter-spacing:2px;margin-bottom:4px}
.reg-hero h1 span{color:#ff8c00}
.reg-hero p{color:rgba(255,255,255,.5);font-size:.85rem;letter-spacing:1px}
.reg-hero .tagline{color:rgba(255,255,255,.7);font-size:1rem;margin-top:8px;font-weight:500}

/* Features strip */
.reg-features{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;margin-top:20px}
.reg-feat{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.6);font-size:.78rem;font-weight:500}
.reg-feat i{color:#ff8c00;font-size:.9rem}

/* Form container */
.reg-container{max-width:680px;margin:-40px auto 40px;padding:0 20px;position:relative;z-index:10}
.reg-card{background:#fff;border-radius:16px;box-shadow:0 4px 25px rgba(0,0,0,.08);overflow:hidden}
.reg-card-header{padding:24px 32px 16px;border-bottom:1px solid #f1f5f9}
.reg-card-header h2{font-size:1.15rem;font-weight:700;color:#1e293b;display:flex;align-items:center;gap:8px}
.reg-card-header h2 i{color:#ff8c00}
.reg-card-header p{color:#94a3b8;font-size:.82rem;margin-top:2px}

/* Sections */
.reg-section{padding:20px 32px}
.reg-section+.reg-section{border-top:1px solid #f1f5f9}
.reg-section-title{display:flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px}
.reg-section-title.isp{color:#0f172a}
.reg-section-title.isp i{color:#ff8c00}
.reg-section-title.admin{color:#0f172a}
.reg-section-title.admin i{color:#0ea5e9}

/* Form elements */
.reg-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.reg-full{grid-column:1/-1}
.reg-field{margin-bottom:14px}
.reg-field label{display:block;font-size:.72rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.reg-field label .req{color:#ef4444;margin-left:2px}
.reg-input-wrap{position:relative;display:flex;align-items:center}
.reg-input-wrap i{position:absolute;left:14px;color:#94a3b8;font-size:.85rem;transition:color .2s}
.reg-input{width:100%;padding:11px 14px 11px 42px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;font-size:.88rem;font-family:'Plus Jakarta Sans',sans-serif;color:#1e293b;transition:all .2s}
.reg-input::placeholder{color:#cbd5e1}
.reg-input:focus{outline:none;border-color:#ff8c00;background:#fff;box-shadow:0 0 0 3px rgba(255,140,0,.08)}
.reg-input:focus+i,.reg-input-wrap:focus-within i{color:#ff8c00}
.reg-hint{font-size:.7rem;color:#94a3b8;margin-top:4px}

/* Alert */
.reg-alert{margin:16px 32px 0;padding:12px 16px;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;color:#dc2626;font-size:.84rem;display:flex;align-items:center;gap:8px}
.reg-alert i{flex-shrink:0}

/* Submit */
.reg-submit{padding:20px 32px 28px}
.reg-btn{width:100%;padding:14px;background:linear-gradient(135deg,#ff8c00,#ff6b00);border:none;border-radius:12px;color:#fff;font-size:.95rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;cursor:pointer;transition:all .2s;letter-spacing:.5px;box-shadow:0 4px 15px rgba(255,120,0,.2);display:flex;align-items:center;justify-content:center;gap:8px}
.reg-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(255,120,0,.3)}
.reg-btn:active{transform:translateY(0)}

.reg-login-link{text-align:center;padding:0 32px 24px;font-size:.84rem}
.reg-login-link a{color:#0ea5e9;text-decoration:none;font-weight:600;transition:color .2s}
.reg-login-link a:hover{color:#0284c7}

/* Footer */
.reg-footer{text-align:center;padding:0 20px 32px;color:#94a3b8;font-size:.75rem}

/* Responsive */
@media(max-width:640px){
    .reg-hero{padding:32px 16px 60px}
    .reg-hero h1{font-size:1.4rem}
    .reg-features{gap:16px}
    .reg-container{padding:0 12px;margin-top:-30px}
    .reg-section{padding:16px 20px}
    .reg-row{grid-template-columns:1fr}
    .reg-submit{padding:16px 20px 24px}
    .reg-card-header{padding:20px 20px 14px}
    .reg-alert{margin:12px 20px 0}
    .reg-login-link{padding:0 20px 20px}
}
@media(max-width:380px){
    .reg-hero h1{font-size:1.2rem}
    .reg-feat{font-size:.7rem}
    .reg-input{font-size:.82rem;padding:10px 12px 10px 38px}
}