@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap");

.tm-root{
  --violet:#6D6AB7; --violet-deep:#5A57A3; --ink:#15142B; --paper:#F5F4FB; --coral:#F86848;
  font-family:"IBM Plex Sans Arabic",system-ui,sans-serif; color:#fff; background:var(--violet);
  min-height:100vh; display:grid; grid-template-columns:minmax(0,1.38fr) minmax(0,1fr); position:relative; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.tm-root *{box-sizing:border-box;margin:0}
.tm-panel{padding:48px 64px 44px; display:flex; flex-direction:column; gap:40px; position:relative; z-index:1}
.tm-logo{height:34px; width:auto; display:block; align-self:flex-start}
.tm-main{flex:1; display:flex; flex-direction:column; justify-content:center}
.tm-kicker{font-size:16px; font-weight:600; letter-spacing:0; color:var(--ink); background:#fff; align-self:flex-start; padding:6px 14px; border-radius:999px; margin-bottom:28px;
  animation:tm-rise .8s cubic-bezier(.2,.8,.2,1) both}
.tm-h1{font-weight:700; font-size:clamp(84px,10.5vw,176px); line-height:.92; letter-spacing:-.01em;
  animation:tm-rise .9s .08s cubic-bezier(.2,.8,.2,1) both}
.tm-dots{display:inline-flex; gap:.09em; margin-inline-start:.06em; vertical-align:baseline}
.tm-dots i{width:.14em; height:.14em; border-radius:50%; background:#fff; display:inline-block; animation:tm-type 1.4s ease-in-out infinite}
.tm-dots i:nth-child(2){animation-delay:.2s}
.tm-h2{font-weight:700; font-size:clamp(40px,4.6vw,76px); line-height:1.1; color:var(--ink); margin-top:10px;
  animation:tm-rise .9s .18s cubic-bezier(.2,.8,.2,1) both}
.tm-sub{font-size:20px; line-height:1.7; max-width:30em; margin-top:22px; color:rgba(255,255,255,.9);
  animation:tm-rise .9s .28s cubic-bezier(.2,.8,.2,1) both}

.tm-form{margin-top:40px; max-width:760px; animation:tm-rise .9s .38s cubic-bezier(.2,.8,.2,1) both}
.tm-form-title{font-size:18px; font-weight:600; margin-bottom:14px}
.tm-fields{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.tm-input{font:inherit; font-size:16px; color:var(--ink); background:#fff; border:2px solid #fff; border-radius:14px; padding:14px 16px; width:100%; outline:none; transition:border-color .2s, box-shadow .2s}
.tm-input::placeholder{color:#7A7894}
.tm-input:focus{border-color:var(--ink); box-shadow:0 0 0 4px rgba(21,20,43,.18)}
.tm-input[aria-invalid="true"]{border-color:var(--coral)}
.tm-input[dir="ltr"]{text-align:right}
.tm-row{display:flex; align-items:center; gap:18px; margin-top:12px}
.tm-btn{font:inherit; font-size:17px; font-weight:700; color:#fff; background:var(--ink); border:0; border-radius:14px; padding:14px 30px; cursor:pointer; display:inline-flex; align-items:center; gap:10px; transition:transform .15s, background .2s}
.tm-btn:hover{background:#000}
.tm-btn:active{transform:scale(.97)}
.tm-btn[disabled]{opacity:.7; cursor:progress}
.tm-btn svg{transition:transform .25s}
.tm-btn:hover svg{transform:translateX(-4px)}
.tm-err{font-size:15px; color:#fff; background:rgba(248,104,72,.95); padding:4px 12px; border-radius:8px}
.tm-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.tm-done{display:flex; align-items:center; gap:16px; background:#fff; color:var(--ink); border-radius:18px; padding:20px 24px; max-width:560px; animation:tm-pop .5s cubic-bezier(.2,1.4,.4,1) both}
.tm-done b{font-size:20px; display:block}
.tm-done span{font-size:16px; color:#4A4870}
.tm-done-mark{flex:none; width:48px; height:48px; border-radius:50%; background:var(--violet); display:grid; place-items:center}

.tm-pillars{display:flex; gap:34px; flex-wrap:wrap; list-style:none; padding:0}
.tm-pillars li{display:flex; align-items:center; gap:10px; font-size:16px; font-weight:500}
.tm-pillars svg{width:28px; height:28px; flex:none}

.tm-photo{position:relative; min-height:100%}
.tm-photo img.tm-portrait{position:absolute; inset:auto 0 0 0; width:100%; height:96%; object-fit:contain; object-position:50% 100%; filter:grayscale(1) contrast(1.05);
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%),linear-gradient(270deg,transparent 0,#000 16%); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,#000 80%,transparent 100%),linear-gradient(270deg,transparent 0,#000 16%); mask-composite:intersect;
  animation:tm-rise 1.1s .2s cubic-bezier(.2,.8,.2,1) both}
.tm-sign{position:absolute; z-index:2; bottom:40px; inset-inline:40px; display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.tm-sign small{font-size:15px; font-weight:500; color:rgba(255,255,255,.8)}
.tm-sign img{width:min(300px,80%); height:auto}


.tm-g-spin{transform-origin:50% 50%; animation:tm-spin 12s linear infinite}
.tm-g-pulse{transform-origin:50% 50%; animation:tm-pulse 2.6s ease-in-out infinite}
.tm-g-bars rect{animation:tm-bar 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:right center}
.tm-g-bars rect:nth-child(2){animation-delay:.2s}.tm-g-bars rect:nth-child(3){animation-delay:.4s}
.tm-g-dots circle{animation:tm-breathe 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
.tm-g-dots circle:nth-child(2){animation-delay:.3s}.tm-g-dots circle:nth-child(3){animation-delay:.9s}.tm-g-dots circle:nth-child(4){animation-delay:.6s}

@keyframes tm-rise{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}
@keyframes tm-pop{from{opacity:0; transform:scale(.9)}to{opacity:1; transform:none}}
@keyframes tm-type{0%,60%,100%{transform:translateY(0); opacity:1}30%{transform:translateY(-.12em); opacity:.55}}
@keyframes tm-spin{to{rotate:360deg}}
@keyframes tm-pulse{0%,100%{transform:scale(1)}50%{transform:scale(.82)}}
@keyframes tm-bar{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.6)}}
@keyframes tm-breathe{0%,100%{transform:scale(1)}50%{transform:scale(.7)}}

@media (max-width:980px){
  .tm-root{grid-template-columns:1fr}
  .tm-panel{padding:28px 22px 8px; gap:28px}
  .tm-logo{height:28px}
  .tm-fields{grid-template-columns:1fr}
  .tm-row{flex-wrap:wrap}
  .tm-btn{width:100%; justify-content:center}
  .tm-photo{min-height:0; aspect-ratio:704/822; margin-top:8px}
  .tm-photo img.tm-portrait{height:100%; -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%); mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
    .tm-pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
  .tm-pillars li{flex-direction:column; gap:8px; font-size:15px}
  .tm-sign{inset-inline:22px; bottom:28px}
}
@media (prefers-reduced-motion:reduce){.tm-root *{animation:none!important}}