:root{
  --indigo:#6a11cb;
  --blue:#2575fc;
  --ink:#0f172a;
  --muted:#94a3b8;
  --panel:#ffffff;
  --ring:rgba(37,117,252,.25);
  --shadow:0 24px 60px rgba(2,6,23,.22);
  --radius:20px;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
.reg-page{min-height:100vh;position:relative;background:linear-gradient(135deg,var(--indigo) 0%, var(--blue) 100%);overflow:hidden}

/* فقاعات الخلفية */
.bg-bubble{position:absolute;border-radius:50%;filter:blur(2px);opacity:.22;pointer-events:none}
.b1{width:280px;height:280px;left:6%;top:22%;background:radial-gradient(closest-side,#fff,transparent);animation:float 12s ease-in-out infinite}
.b2{width:220px;height:220px;right:8%;bottom:10%;background:radial-gradient(closest-side,#fff,transparent);animation:float 11s 1.2s ease-in-out infinite}
.b3{width:140px;height:140px;left:20%;bottom:16%;background:radial-gradient(closest-side,#fff,transparent);animation:float 10s .6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px)}}

.wrap{min-height:100vh;display:grid;place-items:center;padding:40px 16px}
.card{width:100%;max-width:640px;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}
.glass{background:rgba(255,255,255,.10);backdrop-filter:saturate(160%) blur(18px);border:1px solid rgba(255,255,255,.35);color:#fff}

.head h1{margin:0;text-align:center;font-size:28px}
.head p{margin:6px 0 16px;text-align:center;color:#e2e8f0}

/* Tabs */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:rgba(255,255,255,.10);padding:8px;border-radius:14px;margin-bottom:16px}
.tab{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:0;border-radius:10px;background:transparent;color:#e2e8f0;cursor:pointer;font-weight:800;transition:.2s}
.tab img{width:18px;height:18px;filter:brightness(1.1)}
.tab.active{background:linear-gradient(90deg,var(--indigo),var(--blue));color:#fff;box-shadow:0 10px 30px rgba(37,117,252,.35)}

/* Form */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.company{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.company.hidden{display:none}
.field{position:relative;display:block}
.field.float input{
  width:100%;border:1px solid rgba(255,255,255,.35);border-radius:12px;
  padding:18px 44px 12px 12px;background:rgba(255,255,255,.08);color:#fff;
  font-size:15px;outline:0;transition:.2s
}
.field.float span{
  position:absolute;right:44px;top:12px;color:#e2e8f0;pointer-events:none;transition:.15s;font-size:14px
}
.field .ico{position:absolute;right:12px;top:12px}
.field .ico img{width:18px;height:18px;opacity:.95}
.field.float input:placeholder-shown + span{top:12px;font-size:14px;opacity:.9}
.field.float input:not(:placeholder-shown) + span,
.field.float input:focus + span{top:-8px;background:rgba(15,23,42,.5);padding:0 6px;border-radius:8px;font-size:12px}
.field.float input:focus{border-color:#ffffff;box-shadow:0 0 0 4px var(--ring)}
.err{display:block;color:#ffe4e6;font-size:12px;margin:6px 4px 0;min-height:14px}

.check{display:inline-flex;align-items:center;gap:8px;color:#e2e8f0;font-size:14px;margin:12px 0 14px}

/* Buttons */
.btn{display:inline-block;border:0;border-radius:12px;padding:12px 16px;cursor:pointer;font-weight:900}
.btn.full{width:100%}
.btn.gradient{background:linear-gradient(90deg,var(--indigo),var(--blue));color:#fff;box-shadow:0 10px 30px rgba(37,117,252,.35);transition:transform .08s ease, box-shadow .2s ease}
.btn.gradient:hover{transform:translateY(-1px);box-shadow:0 16px 40px rgba(37,117,252,.45)}

/* Ripple */
.ripple{position:relative;overflow:hidden;isolation:isolate}
.ripple::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transform:scale(.2);background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent);transition:opacity .35s, transform .35s}
.ripple:active::after{opacity:1;transform:scale(1)}

.alt{margin-top:10px;text-align:center;color:#e2e8f0}
.alt a{color:#fff;text-decoration:underline}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(10px)}
.back-home {
  text-align: center;
  margin-top: 20px;
}

.back-home a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  background: linear-gradient(90deg, #4f46e5, #9333ea);
  padding: 10px 20px;
  border-radius: 8px;
  transition: background 0.3s ease, transform 0.2s ease;
  display: inline-block;
}

.back-home a:hover {
  background: linear-gradient(90deg, #4338ca, #7e22ce);
  transform: translateY(-2px);
}