:root { --bg: #f4f2ec; --ink: #16181d; --muted: #6d6b64; --line: rgba(22, 24, 29, .14); --accent: #2f5bff; --danger: #c4352b; }
* { box-sizing: border-box; }
html { direction: rtl; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; line-height: 1.7; }
.wrap { display: grid; grid-template-columns: 1fr 1.25fr; min-height: 100svh; }
.form-side { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 6vw, 6rem); }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.5rem; margin-bottom: auto; padding-bottom: 3rem; }
.brand svg { width: 32px; height: 32px; color: var(--accent); }
h1 { font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 1rem; font-weight: 700; }
h1 span { font-weight: 300; }
.lead { color: var(--muted); font-size: 1.08rem; max-width: 30rem; margin: 0 0 2.4rem; }
form { margin-bottom: auto; }
label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .4rem; }
.row { display: flex; gap: .5rem; max-width: 26rem; }
input { flex: 1; min-width: 0; height: 52px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 0 1.3rem; font: inherit; font-size: 1.1rem; letter-spacing: .3em; direction: ltr; outline: 0; transition: border-color .2s, box-shadow .2s; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(47, 91, 255, .14); }
button { height: 52px; min-width: 120px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 1rem inherit; font-family: inherit; cursor: pointer; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
button:hover { transform: translateY(-2px); }
.busy button { opacity: .6; pointer-events: none; }
.msg { color: var(--danger); min-height: 1.6em; margin: .7rem 0 0; font-size: .92rem; }
.art-side { background: #e9e6dd; display: grid; place-items: center; padding: 3rem; overflow: hidden; }
.art-side svg { width: min(100%, 760px); height: auto; }
@media (max-width: 860px) {
  .wrap { grid-template-columns: 1fr; }
  .art-side { order: -1; max-height: 42svh; padding: 1.5rem; }
  .art-side svg { max-height: 38svh; }
  .brand { padding-bottom: 1.5rem; }
}