body:has(.demo-page){background:#f2f4f7}.demo-page{color:#374151;min-height:100vh;font-family:var(--font-poppins), system-ui, sans-serif;letter-spacing:normal;background:#f2f4f7}.demo-page :where(h1,p,b,span,div,label,input,select,textarea,button){font-family:inherit}.demo-nav{align-items:center;height:74px;padding:0 36px;display:flex}.demo-brand{flex:none;align-items:center;gap:8px;height:50px;display:flex}.demo-brand-mark{flex:none;justify-content:center;align-items:center;width:48px;height:50px;display:flex}.demo-brand-mark img{display:block}.demo-close{color:#f9fafb;cursor:pointer;background-image:linear-gradient(132.21deg,#6b84ff 13.021%,#c898ff 88.037%);border:0;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;margin-left:auto;padding:0;transition:filter .2s,transform .2s;display:inline-flex}.demo-close>svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;width:14px;height:14px;display:block}.demo-close:hover{filter:brightness(1.06);transform:translateY(-1px)}.demo-close:focus-visible{outline-offset:3px;outline:2px solid #6b84ff}.demo-brand-word{flex:none;width:98px;height:31px;position:relative}.demo-brand-word img{width:98px;max-width:none;height:33px;display:block;position:absolute;top:-1.264px;left:0}.demo-body{box-sizing:border-box;align-items:flex-start;gap:77px;width:100%;max-width:1440px;margin:0 auto;padding:0 75px 36px 34px;display:flex}.demo-visual{aspect-ratio:704/702;border-radius:25px;flex:0 0 704px;width:704px;position:relative;overflow:hidden;container-type:inline-size}.demo-visual-bg{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.demo-visual-title{text-align:center;color:#374151;width:85.6534%;margin:0;font-size:clamp(14px,3.409cqi,24px);font-weight:600;line-height:1.5;position:absolute;top:6.83761%;left:7.24432%}.demo-visual-title span{color:#6769eb}.demo-form{flex-direction:column;flex:0 0 550px;align-items:center;gap:24px;width:550px;margin-top:53px;display:flex}.demo-form-head{flex-direction:column;gap:18px;width:100%;display:flex}.demo-form-head h1{text-align:center;color:#374151;margin:0;font-size:20px;font-weight:600;line-height:24px}.demo-form-head p{text-align:center;color:#374151;margin:0;font-size:13px;font-weight:400;line-height:19px}.demo-fields{flex-direction:column;align-items:center;gap:28px;width:100%;display:flex}.demo-row{align-items:flex-start;gap:24px;width:100%;display:flex}.demo-field{flex-direction:column;flex:1 1 0;align-items:flex-start;gap:4px;width:100%;min-width:0;display:flex}.demo-field label{color:#374151;align-items:flex-start;font-size:13px;font-weight:600;line-height:19px;display:flex}.demo-asterisk{flex:none;width:19px;height:19px}.demo-asterisk img{display:block}.demo-field input,.demo-field select,.demo-field textarea{box-sizing:border-box;color:#374151;background:#fff;border:1px solid #e3e3e3;border-radius:8px;outline:none;width:100%;height:43px;padding:0 12px;font-size:13px;font-weight:400;line-height:19px;transition:border-color .15s,box-shadow .15s}.demo-field textarea{resize:none;height:81px;padding:12px}.demo-field input::placeholder,.demo-field textarea::placeholder{color:#9ca3af}.demo-field input:focus,.demo-field select:focus,.demo-field textarea:focus{border-color:#6769eb;box-shadow:0 0 0 3px #6769eb1f}.demo-field input:-webkit-autofill{-webkit-text-fill-color:#374151;caret-color:#374151;box-shadow:inset 0 0 0 1000px #fff}.demo-field input:-webkit-autofill:hover{-webkit-text-fill-color:#374151;caret-color:#374151;box-shadow:inset 0 0 0 1000px #fff}.demo-field input:-webkit-autofill:focus{-webkit-text-fill-color:#374151;caret-color:#374151;box-shadow:inset 0 0 0 1000px #fff}.demo-field textarea:-webkit-autofill{-webkit-text-fill-color:#374151;caret-color:#374151;box-shadow:inset 0 0 0 1000px #fff}.demo-field textarea:-webkit-autofill:hover{-webkit-text-fill-color:#374151;caret-color:#374151;box-shadow:inset 0 0 0 1000px #fff}.demo-field textarea:-webkit-autofill:focus{-webkit-text-fill-color:#374151;caret-color:#374151;box-shadow:inset 0 0 0 1000px #fff}:-webkit-any(.demo-field input:-webkit-autofill:focus,.demo-field textarea:-webkit-autofill:focus){box-shadow:inset 0 0 0 1000px #fff,0 0 0 3px #6769eb1f}:is(.demo-field input:autofill:focus,.demo-field textarea:autofill:focus){box-shadow:inset 0 0 0 1000px #fff,0 0 0 3px #6769eb1f}.demo-select select:-webkit-autofill{-webkit-text-fill-color:#374151;box-shadow:inset 0 0 0 1000px #f9fafb}.demo-select select:-webkit-autofill:hover{-webkit-text-fill-color:#374151;box-shadow:inset 0 0 0 1000px #f9fafb}.demo-select select:-webkit-autofill:focus{-webkit-text-fill-color:#374151;box-shadow:inset 0 0 0 1000px #f9fafb}.demo-select select:-webkit-autofill:focus{box-shadow:inset 0 0 0 1000px #f9fafb,0 0 0 3px #6769eb1f}.demo-field input:autofill,.demo-field textarea:autofill{color:#374151;background:#fff}.demo-select{width:100%;position:relative}.demo-select select{appearance:none;cursor:pointer;background:#ffffff80;padding-right:32px}.demo-select select[data-placeholder]{color:#9ca3af}.demo-select select option{color:#374151}.demo-select>img{pointer-events:none;display:block;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.demo-phone{align-items:center;gap:8px;width:100%;display:flex}.demo-select-dial{flex:0 0 137px;width:137px}.demo-phone>input{flex:1 1 0;min-width:0}.demo-submit{color:#f9fafb;cursor:pointer;background-image:linear-gradient(132.21deg,#6b84ff 13.021%,#c898ff 88.037%);border:0;border-radius:25px;width:168px;height:42px;font-size:16px;font-weight:700;line-height:28px;transition:filter .2s,transform .2s}.demo-submit:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}.demo-submit:disabled{opacity:.65;cursor:default}.demo-form-error{color:#ec3131;width:100%;margin:0;font-size:13px;line-height:19px}.demo-form[data-state=success]{justify-content:center}@media (max-width:1380px){.demo-body{gap:48px;padding:0 32px 36px}.demo-visual{flex:1 1 0;width:auto;min-width:0}.demo-form{flex:0 0 470px;width:470px}}@media (max-width:1040px){.demo-body{flex-direction:column;align-items:center;gap:40px}.demo-visual{flex:none;width:100%;max-width:704px}.demo-form{flex:none;width:100%;max-width:550px;margin-top:0}}@media (max-width:560px){.demo-nav{padding:0 20px}.demo-close{width:34px;height:34px}.demo-body{gap:32px;padding:0 20px 32px}.demo-row{flex-direction:column;gap:20px}.demo-fields{gap:20px}.demo-field input,.demo-field select,.demo-field textarea{font-size:16px}}